diff --git a/gadget-code/frontend/src/components/ChatTurn.tsx b/gadget-code/frontend/src/components/ChatTurn.tsx
new file mode 100644
index 0000000..f4022d0
--- /dev/null
+++ b/gadget-code/frontend/src/components/ChatTurn.tsx
@@ -0,0 +1,183 @@
+import { useState, memo, useCallback } from "react";
+import type { ChatTurn as ChatTurnType } from "../lib/api";
+
+interface ChatTurnProps {
+  turn: ChatTurnType;
+  onUpdate: (turnId: string, updates: Partial<ChatTurnType>) => void;
+}
+
+const ChatTurn = memo(function ChatTurn({ turn, onUpdate }: ChatTurnProps) {
+  const [thinkingExpanded, setThinkingExpanded] = useState(false);
+  const [toolCallsExpanded, setToolCallsExpanded] = useState(true);
+
+  const handleThinkingToggle = useCallback(() => {
+    setThinkingExpanded((prev) => !prev);
+  }, []);
+
+  const handleToolCallsToggle = useCallback(() => {
+    setToolCallsExpanded((prev) => !prev);
+  }, []);
+
+  const formatDuration = (ms: number): string => {
+    if (ms < 1000) return `${ms}ms`;
+    const seconds = (ms / 1000).toFixed(1);
+    return `${seconds}s`;
+  };
+
+  const formatTokenCount = (count: number): string => {
+    if (count >= 1000) {
+      return `${(count / 1000).toFixed(1)}k`;
+    }
+    return count.toString();
+  };
+
+  const modelId = turn.llm || "Unknown";
+  const modeLabel =
+    turn.mode?.charAt(0).toUpperCase() + turn.mode?.slice(1) || "Unknown";
+  const statusLabel =
+    turn.status?.charAt(0).toUpperCase() + turn.status?.slice(1) || "Unknown";
+  const startedAt = new Date(turn.createdAt);
+
+  return (
+    <div className="border-b border-border-subtle pb-4 last:border-b-0">
+      {/* Turn Header */}
+      <div className="flex items-center gap-4 text-xs text-text-muted mb-3 px-4">
+        <div>{startedAt.toLocaleTimeString()}</div>
+        <div className="flex items-center gap-2">
+          <span className="font-mono">{modelId}</span>
+        </div>
+        <div className="w-px h-3 bg-border-subtle" />
+        <div>{modeLabel}</div>
+        <div className="w-px h-3 bg-border-subtle" />
+        <div
+          className={
+            turn.status === "finished"
+              ? "text-green-500"
+              : turn.status === "error"
+                ? "text-red-500"
+                : "text-yellow-500"
+          }
+        >
+          {statusLabel}
+        </div>
+        <div className="w-px h-3 bg-border-subtle" />
+        {turn.stats && (
+          <>
+            <div className="w-px h-3 bg-border-subtle" />
+            <div>{formatDuration(turn.stats.durationMs)}</div>
+            <div className="w-px h-3 bg-border-subtle" />
+            <div>
+              {turn.stats.inputTokens
+                ? formatTokenCount(turn.stats.inputTokens)
+                : "0"}{" "}
+              in /{" "}
+              {turn.stats.responseTokens
+                ? formatTokenCount(turn.stats.responseTokens)
+                : "0"}{" "}
+              out
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* User Prompt */}
+      <div className="max-w-[80%] ml-0 mb-4">
+        <div className="bg-brand text-white rounded p-4">
+          <div className="text-sm font-semibold mb-2">You</div>
+          <div className="whitespace-pre-wrap">{turn.prompts?.user || ""}</div>
+        </div>
+      </div>
+
+      {/* Agent Response */}
+      {(turn.thinking || turn.response || (turn.toolCalls && turn.toolCalls.length > 0)) && (
+        <div className="max-w-[80%] ml-auto mb-4">
+          <div className="bg-bg-tertiary border border-border-default rounded p-4">
+            <div className="text-sm font-semibold mb-3 text-text-secondary">
+              Gadget
+            </div>
+
+            {/* Thinking Section */}
+            {turn.thinking && (
+              <div className="mb-3">
+                <button
+                  onClick={handleThinkingToggle}
+                  className="text-xs text-text-muted hover:text-text-secondary flex items-center gap-1 transition-colors"
+                >
+                  <span
+                    className={`transform transition-transform ${thinkingExpanded ? "rotate-90" : ""}`}
+                  >
+                    ▶
+                  </span>
+                  Thinking ({formatTokenCount(turn.thinking.length)} chars)
+                </button>
+                {thinkingExpanded && (
+                  <div className="mt-2 p-3 bg-bg-secondary rounded text-sm text-text-secondary whitespace-pre-wrap font-mono text-xs">
+                    {turn.thinking}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Response Section */}
+            {turn.response && (
+              <div className="mb-3 whitespace-pre-wrap text-text-primary">
+                {turn.response}
+              </div>
+            )}
+
+            {/* Tool Calls Section */}
+            {turn.toolCalls && turn.toolCalls.length > 0 && (
+              <div className="mb-3">
+                <button
+                  onClick={handleToolCallsToggle}
+                  className="text-xs text-text-muted hover:text-text-secondary flex items-center gap-1 transition-colors"
+                >
+                  <span
+                    className={`transform transition-transform ${toolCallsExpanded ? "rotate-90" : ""}`}
+                  >
+                    ▶
+                  </span>
+                  Tool Calls ({turn.toolCalls.length})
+                </button>
+                {toolCallsExpanded && (
+                  <div className="mt-2 space-y-2">
+                    {turn.toolCalls.map((toolCall, idx) => (
+                      <div
+                        key={toolCall.callId || idx}
+                        className="p-2 bg-bg-secondary rounded border border-border-default"
+                      >
+                        <div className="flex items-center gap-2 text-xs font-mono text-text-secondary">
+                          <span className="text-brand">⚡</span>
+                          <span>{toolCall.name}</span>
+                          {toolCall.response && (
+                            <span className="text-green-500">✓</span>
+                          )}
+                        </div>
+                        {toolCall.parameters && (
+                          <div className="mt-1 text-xs font-mono text-text-muted whitespace-pre-wrap break-all">
+                            {toolCall.parameters}
+                          </div>
+                        )}
+                        {toolCall.response && (
+                          <div className="mt-1 text-xs font-mono text-green-500 whitespace-pre-wrap break-all">
+                            {toolCall.response}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div className="mt-2 text-xs text-text-muted">
+              {startedAt.toLocaleTimeString()}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default ChatTurn;