From 1bb5018bb33d5e9d2c9c0ce69509a910a67813e8 Mon Sep 17 00:00:00 2001
From: Anthony Ronning <101225832+AnthonyRonning@users.noreply.github.com>
Date: Sat, 11 Jul 2026 07:40:40 +0000
Subject: [PATCH] feat: align agent chat with normal chat

---
 frontend/src/components/AgentMode.tsx       | 245 +++++++++++++-------
 frontend/src/components/UnifiedChat.tsx     | 204 ++++++----------
 frontend/src/components/chat/ChatTurn.tsx   | 138 +++++++++++
 frontend/src/components/markdown.tsx        |  14 +-
 frontend/src/services/agentTimeline.test.ts | 105 ++++++++-
 frontend/src/services/agentTimeline.ts      |  42 ++++
 6 files changed, 525 insertions(+), 223 deletions(-)
 create mode 100644 frontend/src/components/chat/ChatTurn.tsx

diff --git a/frontend/src/components/AgentMode.tsx b/frontend/src/components/AgentMode.tsx
index d63903d27..20421272e 100644
--- a/frontend/src/components/AgentMode.tsx
+++ b/frontend/src/components/AgentMode.tsx
@@ -16,15 +16,20 @@ import {
   MessageSquarePlus,
   MoreHorizontal,
   ShieldCheck,
-  Terminal,
   Trash,
   X,
   Zap
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Markdown } from "@/components/markdown";
+import { Markdown, ThinkingBlock } from "@/components/markdown";
+import {
+  CHAT_COMPOSER_TEXTAREA_CLASS,
+  ChatAssistantTurn,
+  ChatComposerSurface,
+  ChatDesktopConversationHeader,
+  ChatUserTurn
+} from "@/components/chat/ChatTurn";
 import {
   Select,
   SelectContent,
@@ -60,7 +65,12 @@ import {
   proxyService
 } from "@/services/proxyService";
 import { agentOperationFence } from "@/services/agentOperationFence";
-import { coalesceAdjacentThinkingItems, hasRenderableThinkingText } from "@/services/agentTimeline";
+import {
+  activeAgentThinkingItemId,
+  coalesceAdjacentThinkingItems,
+  groupAgentTimelineItems,
+  hasRenderableThinkingText
+} from "@/services/agentTimeline";
 import {
   DEFAULT_AGENT_MODEL,
   PRIMARY_AGENT_MODEL_IDS,
@@ -288,6 +298,10 @@ export function AgentMode({ userId }: { userId: string }) {
     if (!projectRoot) return "Select folder";
     return recentRoots.find((root) => root.path === projectRoot)?.name || basename(projectRoot);
   }, [projectRoot, recentRoots]);
+  const activeSessionTitle = useMemo(() => {
+    const activeSession = sessions.find((session) => session.id === activeSessionId);
+    return activeSession ? sessionTitle(activeSession) : "Agent session";
+  }, [activeSessionId, sessions]);
   const activeRunId = activeSessionId ? (activeRunsBySession[activeSessionId] ?? null) : null;
   const activePendingSendKey = activeSessionId || NEW_SESSION_PENDING_KEY;
   const isSubmitting = pendingSendSessionIds.has(activePendingSendKey);
@@ -1407,6 +1421,14 @@ export function AgentMode({ userId }: { userId: string }) {
           </div>
         )}
 
+        {timelineItems.length > 0 ? (
+          <ChatDesktopConversationHeader
+            title={activeSessionTitle}
+            isSidebarOpen={isSidebarOpen}
+            onNewChat={() => void createSession()}
+          />
+        ) : null}
+
         {hasManualProxyConflict && (
           <div className="mx-auto mt-3 w-full max-w-6xl px-4">
             <div className="flex flex-col gap-3 rounded-md border border-maple-warning/40 bg-maple-warning/10 px-3 py-3 text-sm sm:flex-row sm:items-center sm:justify-between">
@@ -1449,10 +1471,10 @@ export function AgentMode({ userId }: { userId: string }) {
         <section className="flex min-h-0 flex-1 flex-col overflow-hidden">
           <div
             ref={chatContainerRef}
-            className="min-h-0 flex-1 overflow-y-auto px-4 py-5"
+            className="relative flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-y-contain"
             onScroll={updateAutoScrollFromPosition}
           >
-            <div className="mx-auto flex w-full max-w-4xl flex-col gap-4">
+            <div className="mx-auto w-full max-w-4xl p-4 md:p-6 landscape-short:p-2">
               {timelineItems.length === 0 ? (
                 <EmptyAgentState
                   activeRootLabel={activeRootLabel}
@@ -1475,14 +1497,18 @@ export function AgentMode({ userId }: { userId: string }) {
                   onSendMessage={() => void sendMessage()}
                 />
               ) : (
-                <AgentTimeline items={timelineItems} onPermissionDecision={respondToPermission} />
+                <AgentTimeline
+                  items={timelineItems}
+                  isRunActive={Boolean(activeRunId) && !isSubmitting}
+                  onPermissionDecision={respondToPermission}
+                />
               )}
             </div>
           </div>
 
           {timelineItems.length > 0 ? (
-            <div className="shrink-0 border-t border-border/35 bg-background px-4 py-3">
-              <div className="mx-auto max-w-4xl">
+            <div className="shrink-0 bg-background pb-[env(safe-area-inset-bottom)]">
+              <div className="mx-auto max-w-4xl px-4 landscape-short:px-3">
                 <AgentComposer
                   activeRootLabel={activeRootLabel}
                   areSettingsDisabled={areAgentSettingsLocked}
@@ -1503,6 +1529,9 @@ export function AgentMode({ userId }: { userId: string }) {
                   onProjectRootChange={selectProjectRoot}
                   onSendMessage={() => void sendMessage()}
                 />
+                <p className="mb-2 mt-1 text-center text-[10px] text-muted-foreground/50 landscape-short:mb-1">
+                  AI can make mistakes. Check important info.
+                </p>
               </div>
             </div>
           ) : null}
@@ -1515,11 +1544,15 @@ export function AgentMode({ userId }: { userId: string }) {
 function EmptyAgentState(props: AgentComposerProps) {
   return (
     <div className="flex min-h-[52vh] items-center justify-center">
-      <div className="flex w-full max-w-4xl flex-col items-center gap-5 text-center">
-        <h2 className="font-displayWide text-3xl font-normal brand-gradient-text">
+      <div className="flex w-full max-w-4xl flex-col items-center gap-6 text-center landscape-short:gap-3">
+        <h1 className="mb-6 overflow-visible pb-1 font-displayWide text-4xl font-normal leading-relaxed brand-gradient-text landscape-short:mb-2 landscape-short:text-2xl">
           Work in a folder...
-        </h2>
+        </h1>
         <AgentComposer {...props} />
+        <p className="flex items-center justify-center gap-1 text-center text-xs text-muted-foreground/60">
+          <Lock className="h-3 w-3" />
+          Encrypted and private at every step
+        </p>
       </div>
     </div>
   );
@@ -1914,7 +1947,7 @@ function AgentComposer({
       : recentRoots;
 
   return (
-    <div className="relative w-full overflow-hidden rounded-3xl border border-[hsl(var(--maple-secondary-container))] bg-background transition-colors focus-within:border-[hsl(var(--maple-primary))]">
+    <ChatComposerSurface>
       <Textarea
         id="agent-message"
         value={input}
@@ -1922,7 +1955,7 @@ function AgentComposer({
         onKeyDown={onKeyDown}
         disabled={isSendDisabled}
         placeholder="Ask Maple to work in this folder..."
-        className="w-full max-h-[200px] min-h-[52px] resize-none border-0 bg-transparent py-3.5 pl-4 pr-2 leading-6 focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60"
+        className={CHAT_COMPOSER_TEXTAREA_CLASS}
         rows={1}
       />
 
@@ -2000,7 +2033,7 @@ function AgentComposer({
           )}
         </div>
       </div>
-    </div>
+    </ChatComposerSurface>
   );
 }
 
@@ -2473,92 +2506,119 @@ function AgentModelSelector({
 
 function AgentTimeline({
   items,
+  isRunActive,
   onPermissionDecision
 }: {
   items: AgentTimelineItem[];
+  isRunActive: boolean;
   onPermissionDecision: (item: AgentTimelineItem, decision: AgentPermissionDecision) => void;
 }) {
   const visibleItems = coalesceAdjacentThinkingItems(items).filter(isRenderableTimelineItem);
+  const turns = groupAgentTimelineItems(visibleItems);
+  const activeThinkingItemId = activeAgentThinkingItemId(visibleItems, isRunActive);
+
   return (
-    <div className="flex flex-col gap-3">
-      {visibleItems.map((item) => {
-        if (item.itemType === "message") return <MessageBubble key={item.id} item={item} />;
-        if (item.itemType === "thinking") return <ThinkingMessage key={item.id} item={item} />;
-        if (item.itemType === "tool") return <ToolCallRow key={item.id} item={item} />;
-        if (item.itemType === "permission") {
+    <div className="space-y-1">
+      {turns.map((turn) => {
+        if (turn.type === "user") {
           return (
-            <PermissionRow key={item.id} item={item} onPermissionDecision={onPermissionDecision} />
+            <ChatUserTurn key={turn.id}>
+              <Markdown content={turn.item.text || ""} />
+            </ChatUserTurn>
           );
         }
-        return <SystemRow key={item.id} item={item} />;
+
+        return (
+          <ChatAssistantTurn key={turn.id}>
+            {turn.items.map((item) => (
+              <AgentAssistantItem
+                key={item.id}
+                item={item}
+                isThinking={item.id === activeThinkingItemId}
+                onPermissionDecision={onPermissionDecision}
+              />
+            ))}
+          </ChatAssistantTurn>
+        );
       })}
     </div>
   );
 }
 
-function MessageBubble({ item }: { item: AgentTimelineItem }) {
-  const role = item.role || "assistant";
-  const text = item.text || "";
-  if (!text.trim()) return null;
-  return (
-    <div className={cn("flex", role === "user" ? "justify-end" : "justify-start")}>
-      <div
-        className={cn(
-          "max-w-[82%] rounded-lg px-3 py-2 text-sm leading-6",
-          role === "user"
-            ? "bg-[hsl(var(--maple-primary))] text-primary-foreground"
-            : "border border-border/45 bg-muted/45 text-foreground"
-        )}
-      >
-        {role === "assistant" ? (
-          <Markdown content={text} />
-        ) : (
-          <div className="whitespace-pre-wrap break-words">{text}</div>
-        )}
+function AgentAssistantItem({
+  item,
+  isThinking,
+  onPermissionDecision
+}: {
+  item: AgentTimelineItem;
+  isThinking: boolean;
+  onPermissionDecision: (item: AgentTimelineItem, decision: AgentPermissionDecision) => void;
+}) {
+  if (item.itemType === "message") {
+    return (
+      <div className="prose prose-sm max-w-none dark:prose-invert">
+        <Markdown content={item.text || ""} />
       </div>
+    );
+  }
+  if (item.itemType === "thinking") {
+    return <ThinkingBlock content={item.text || ""} isThinking={isThinking} showDuration={false} />;
+  }
+  if (item.itemType === "tool") return <ToolCallRow item={item} />;
+  if (item.itemType === "permission") {
+    return <PermissionRow item={item} onPermissionDecision={onPermissionDecision} />;
+  }
+  return <SystemRow item={item} />;
+}
+
+function ToolCallRow({ item }: { item: AgentTimelineItem }) {
+  const status = item.status || "running";
+  const failed = status === "failed" || status === "error";
+  const active = isActiveAgentStatus(status);
+  const hasDetails =
+    Boolean(item.text?.trim()) || item.input !== undefined || item.output !== undefined;
+  const statusIcon = active ? (
+    <Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
+  ) : failed ? (
+    <X className="h-4 w-4 shrink-0 text-destructive" />
+  ) : (
+    <Check className="h-4 w-4 shrink-0 text-maple-success" />
+  );
+
+  const summary = (
+    <div className="flex min-w-0 flex-1 items-center gap-2">
+      {statusIcon}
+      <span className="min-w-0 flex-1 truncate text-sm font-medium">{toolTitle(item)}</span>
+      <span className={cn("shrink-0 text-xs text-muted-foreground", failed && "text-destructive")}>
+        {formatStatus(status)}
+      </span>
     </div>
   );
-}
 
-function ThinkingMessage({ item }: { item: AgentTimelineItem }) {
-  return (
-    <details className="group rounded-lg border border-border/35 bg-muted/25 px-3 py-2 text-sm text-muted-foreground">
-      <summary className="flex cursor-pointer list-none items-center gap-2 font-medium text-foreground/80">
-        <ChevronRight className="h-4 w-4 transition-transform group-open:rotate-90" />
-        Thinking
-      </summary>
-      <div className="mt-2 whitespace-pre-wrap break-words text-xs leading-5">
-        {item.text || ""}
+  if (!hasDetails) {
+    return (
+      <div
+        className={cn(
+          "flex items-center gap-2 rounded-2xl bg-muted/30 px-3 py-2 text-sm",
+          failed && "bg-destructive/5"
+        )}
+      >
+        {summary}
       </div>
-    </details>
-  );
-}
+    );
+  }
 
-function ToolCallRow({ item }: { item: AgentTimelineItem }) {
-  const failed = item.status === "failed";
   return (
     <details
       open={failed}
       className={cn(
-        "group rounded-lg border bg-muted/30 px-3 py-2",
-        failed ? "border-destructive/35" : "border-border/45"
+        "group rounded-3xl border border-muted/40 bg-muted/20 px-4 py-3 text-sm",
+        failed && "border-destructive/35 bg-destructive/5"
       )}
     >
-      <summary className="flex cursor-pointer list-none items-center justify-between gap-3">
-        <div className="flex min-w-0 items-center gap-2">
-          <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-90" />
-          <Terminal className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span className="truncate text-sm font-medium">{toolTitle(item)}</span>
-        </div>
-        <Badge
-          variant="secondary"
-          className={cn(
-            "shrink-0 capitalize",
-            failed && "border-destructive/40 bg-destructive/15 text-destructive"
-          )}
-        >
-          {formatStatus(item.status || "running")}
-        </Badge>
+      <summary className="flex cursor-pointer list-none items-center gap-2">
+        <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-90" />
+        {summary}
       </summary>
       <div className="mt-2 space-y-2 pl-6">
         {item.text ? <ToolDetail label="Summary" value={item.text} /> : null}
@@ -2584,24 +2644,27 @@ function PermissionRow({
   return (
     <div
       className={cn(
-        "rounded-lg border px-3 py-3",
+        "rounded-3xl border border-muted/40 bg-muted/20 px-4 py-3 text-sm",
         resolved
-          ? "border-border/45 bg-muted/20"
-          : "border-[hsl(var(--maple-primary)/0.45)] bg-[hsl(var(--maple-primary)/0.08)]"
+          ? "border-muted/40"
+          : "border-[hsl(var(--maple-primary)/0.45)] bg-[hsl(var(--maple-primary)/0.06)]"
       )}
     >
       <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <p className="text-sm font-medium">{item.title || "Permission requested"}</p>
-          {item.text ? (
-            <p className="mt-1 whitespace-pre-wrap break-words text-xs text-muted-foreground">
-              {item.text}
-            </p>
-          ) : null}
+        <div className="flex min-w-0 items-start gap-2">
+          <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0 text-[hsl(var(--maple-primary))]" />
+          <div className="min-w-0">
+            <p className="font-medium">{item.title || "Permission requested"}</p>
+            {item.text ? (
+              <p className="mt-1 whitespace-pre-wrap break-words text-xs text-muted-foreground">
+                {item.text}
+              </p>
+            ) : null}
+          </div>
         </div>
-        <Badge variant={resolved ? "secondary" : "outline"} className="shrink-0 rounded-md">
+        <span className="shrink-0 text-xs text-muted-foreground" role="status" aria-live="polite">
           {formatPermissionStatus(item.status || "pending")}
-        </Badge>
+        </span>
       </div>
       {item.input !== undefined ? (
         <div className="mt-2">
@@ -2646,10 +2709,10 @@ function SystemRow({ item }: { item: AgentTimelineItem }) {
   return (
     <div
       className={cn(
-        "rounded-lg border px-3 py-2 text-sm",
+        "rounded-2xl px-3 py-2 text-sm",
         failed
-          ? "border-destructive/35 bg-destructive/5 text-destructive"
-          : "border-border/35 bg-muted/25 text-muted-foreground"
+          ? "border border-destructive/35 bg-destructive/5 text-destructive"
+          : "bg-muted/30 text-muted-foreground"
       )}
     >
       <div className="flex items-start gap-2">
@@ -2742,6 +2805,10 @@ function formatStatus(status: string): string {
   return status.replace(/_/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
 }
 
+function isActiveAgentStatus(status: string | null | undefined): boolean {
+  return ["running", "in_progress", "streaming", "pending", "queued"].includes(status || "");
+}
+
 function formatPermissionStatus(status: string): string {
   switch (status) {
     case "allow_once":
diff --git a/frontend/src/components/UnifiedChat.tsx b/frontend/src/components/UnifiedChat.tsx
index b3fedb6b6..ac797fe67 100644
--- a/frontend/src/components/UnifiedChat.tsx
+++ b/frontend/src/components/UnifiedChat.tsx
@@ -32,6 +32,13 @@ import { truncateMarkdownPreservingLinks } from "@/utils/markdown";
 import { useOpenAI } from "@/ai/useOpenAi";
 import { DEFAULT_MODEL_ID, getInitialWebSearchEnabled } from "@/state/LocalStateContext";
 import { Markdown, ThinkingBlock } from "@/components/markdown";
+import {
+  CHAT_COMPOSER_TEXTAREA_CLASS,
+  ChatAssistantTurn,
+  ChatComposerSurface,
+  ChatDesktopConversationHeader,
+  ChatUserTurn
+} from "@/components/chat/ChatTurn";
 import { ModelSelector } from "@/components/ModelSelector";
 import { useLocalState } from "@/state/useLocalState";
 import { useOpenSecret } from "@opensecret/react";
@@ -147,19 +154,6 @@ function mergeMessagesById(existingMessages: Message[], newMessages: Message[]):
   return Array.from(messagesMap.values());
 }
 
-function MapleChatAvatar() {
-  return (
-    <img
-      src="/m-avatar.svg"
-      alt=""
-      width={32}
-      height={32}
-      draggable={false}
-      className="h-8 w-8 shrink-0 select-none"
-    />
-  );
-}
-
 function updateMessageById(
   messages: Message[],
   messageId: string,
@@ -1309,53 +1303,43 @@ const MessageList = memo(
             const userText = getUserMessageText(message);
 
             return (
-              <div
+              <ChatUserTurn
                 key={group.id}
-                ref={groupIndex === 0 ? firstMessageRef : undefined}
-                className="group/user flex flex-col items-end py-4 landscape-short:py-1.5"
+                containerRef={groupIndex === 0 ? firstMessageRef : undefined}
+                actions={userText ? <CopyButton text={userText} /> : undefined}
+                actionsClassName={
+                  isMobile ? "opacity-100" : "opacity-0 group-hover/user:opacity-100"
+                }
               >
-                <div className="max-w-[min(100%,42rem)] rounded-2xl border border-border bg-muted px-4 py-3 landscape-short:px-3 landscape-short:py-2 backdrop-blur-lg dark:bg-card">
-                  <div className="prose prose-sm max-w-none text-left dark:prose-invert">
-                    <div className="space-y-3">
-                      {message.content.map((part, partIdx) => {
-                        if (
-                          (part.type === "input_text" ||
-                            part.type === "output_text" ||
-                            part.type === "text") &&
-                          "text" in part &&
-                          part.text
-                        ) {
-                          return (
-                            <div key={partIdx}>
-                              <Markdown content={part.text} chatId={chatId || ""} />
-                            </div>
-                          );
-                        }
-                        if (part.type === "input_image" && "image_url" in part && part.image_url) {
-                          return (
-                            <div key={partIdx}>
-                              <img
-                                src={part.image_url}
-                                alt={`Image ${partIdx + 1}`}
-                                className="max-w-full rounded-2xl"
-                                style={{ maxHeight: "400px", objectFit: "contain" }}
-                              />
-                            </div>
-                          );
-                        }
-                        return null;
-                      })}
-                    </div>
-                  </div>
-                </div>
-                {userText && (
-                  <div
-                    className={`flex justify-end pr-1 pt-1 ${isMobile ? "opacity-100" : "opacity-0 group-hover/user:opacity-100"} transition-opacity`}
-                  >
-                    <CopyButton text={userText} />
-                  </div>
-                )}
-              </div>
+                {message.content.map((part, partIdx) => {
+                  if (
+                    (part.type === "input_text" ||
+                      part.type === "output_text" ||
+                      part.type === "text") &&
+                    "text" in part &&
+                    part.text
+                  ) {
+                    return (
+                      <div key={partIdx}>
+                        <Markdown content={part.text} chatId={chatId || ""} />
+                      </div>
+                    );
+                  }
+                  if (part.type === "input_image" && "image_url" in part && part.image_url) {
+                    return (
+                      <div key={partIdx}>
+                        <img
+                          src={part.image_url}
+                          alt={`Image ${partIdx + 1}`}
+                          className="max-w-full rounded-2xl"
+                          style={{ maxHeight: "400px", objectFit: "contain" }}
+                        />
+                      </div>
+                    );
+                  }
+                  return null;
+                })}
+              </ChatUserTurn>
             );
           }
 
@@ -1377,38 +1361,25 @@ const MessageList = memo(
             const textContent = getAssistantGroupText(group.items);
 
             return (
-              <div
+              <ChatAssistantTurn
                 key={group.id}
-                ref={groupIndex === 0 ? firstMessageRef : undefined}
-                className="group py-4 px-0 md:p-4 landscape-short:py-1.5 landscape-short:px-2"
+                containerRef={groupIndex === 0 ? firstMessageRef : undefined}
+                actions={
+                  textContent ? (
+                    <>
+                      <CopyButton text={textContent} />
+                      <TTSButton
+                        text={textContent}
+                        messageId={group.id}
+                        onNeedsSetup={onTTSSetupOpen}
+                        onManage={onTTSManage}
+                      />
+                    </>
+                  ) : undefined
+                }
               >
-                <div className="mx-auto flex w-full max-w-4xl flex-col gap-2 md:flex-row md:items-start md:gap-3">
-                  <div className="flex h-8 shrink-0 items-center gap-2 px-0 md:h-auto md:flex-col md:items-start md:gap-3 landscape-short:h-6">
-                    <MapleChatAvatar />
-                    <div className="text-sm font-semibold leading-none md:hidden">Maple</div>
-                  </div>
-                  <div className="flex min-w-0 w-full flex-1 flex-col overflow-hidden px-2 md:gap-2 md:px-0">
-                    <div className="hidden md:block">
-                      <div className="text-left text-sm font-semibold leading-none">Maple</div>
-                    </div>
-                    <div className="space-y-2">
-                      {renderAssistantItems(group.items)}
-                      {/* Copy and TTS buttons for the assistant's text content */}
-                      {textContent && (
-                        <div className="flex gap-1">
-                          <CopyButton text={textContent} />
-                          <TTSButton
-                            text={textContent}
-                            messageId={group.id}
-                            onNeedsSetup={onTTSSetupOpen}
-                            onManage={onTTSManage}
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
+                {renderAssistantItems(group.items)}
+              </ChatAssistantTurn>
             );
           }
 
@@ -1417,24 +1388,13 @@ const MessageList = memo(
 
         {/* Loading indicator - only show while waiting for the first assistant item (TTFT) */}
         {shouldShowInitialAssistantLoader && (
-          <div className="group py-4 px-0 md:p-4 landscape-short:py-1.5 landscape-short:px-2">
-            <div className="mx-auto flex w-full max-w-4xl flex-col gap-2 md:flex-row md:items-start md:gap-3">
-              <div className="flex h-8 shrink-0 items-center gap-2 px-0 md:h-auto md:flex-col md:items-start md:gap-3 landscape-short:h-6">
-                <MapleChatAvatar />
-                <div className="text-sm font-semibold leading-none md:hidden">Maple</div>
-              </div>
-              <div className="flex min-w-0 w-full flex-1 flex-col px-2 md:gap-2 md:px-0">
-                <div className="hidden md:block">
-                  <div className="text-left text-sm font-semibold leading-none">Maple</div>
-                </div>
-                <div className="flex items-center gap-1">
-                  <div className="h-2 w-2 animate-pulse rounded-full bg-foreground/60" />
-                  <div className="h-2 w-2 animate-pulse rounded-full bg-foreground/60 delay-75" />
-                  <div className="h-2 w-2 animate-pulse rounded-full bg-foreground/60 delay-150" />
-                </div>
-              </div>
+          <ChatAssistantTurn>
+            <div className="flex items-center gap-1">
+              <div className="h-2 w-2 animate-pulse rounded-full bg-foreground/60" />
+              <div className="h-2 w-2 animate-pulse rounded-full bg-foreground/60 delay-75" />
+              <div className="h-2 w-2 animate-pulse rounded-full bg-foreground/60 delay-150" />
             </div>
-          </div>
+          </ChatAssistantTurn>
         )}
       </>
     );
@@ -3392,28 +3352,12 @@ export function UnifiedChat() {
               </h1>
             </div>
           ) : (
-            <div className="h-14 flex items-center px-4">
-              <div className="relative flex flex-1 items-center justify-center">
-                <h1
-                  className={`max-w-[20rem] truncate text-base font-medium text-foreground transition-colors duration-300 ${
-                    titleJustUpdated ? "title-update-animation" : ""
-                  }`}
-                >
-                  {conversation?.metadata?.title || "Chat"}
-                </h1>
-                {!isSidebarOpen && (
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="absolute right-0 h-9 w-9 border-0"
-                    onClick={handleNewChatFromHeader}
-                    aria-label="New chat"
-                  >
-                    <SquarePen className="h-4 w-4" />
-                  </Button>
-                )}
-              </div>
-            </div>
+            <ChatDesktopConversationHeader
+              title={conversation?.metadata?.title || "Chat"}
+              titleClassName={titleJustUpdated ? "title-update-animation" : undefined}
+              isSidebarOpen={isSidebarOpen}
+              onNewChat={handleNewChatFromHeader}
+            />
           ))}
 
         {/* Messages Area */}
@@ -3743,7 +3687,7 @@ export function UnifiedChat() {
                     </div>
                   )}
 
-                  <div className="relative overflow-hidden rounded-3xl border border-[hsl(var(--maple-secondary-container))] bg-background transition-colors focus-within:border-[hsl(var(--maple-primary))]">
+                  <ChatComposerSurface>
                     <Textarea
                       ref={textareaRef}
                       value={input}
@@ -3752,7 +3696,7 @@ export function UnifiedChat() {
                       onPaste={handlePaste}
                       placeholder="Message Maple..."
                       disabled={isGenerating || isRecording}
-                      className="w-full min-h-[52px] landscape-short:min-h-[40px] max-h-[200px] landscape-short:max-h-[100px] resize-none border-0 bg-transparent py-3.5 landscape-short:py-2 pl-4 pr-2 leading-6 focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60"
+                      className={CHAT_COMPOSER_TEXTAREA_CLASS}
                       rows={1}
                       id="message"
                     />
@@ -3883,7 +3827,7 @@ export function UnifiedChat() {
                         className="absolute inset-0 rounded-3xl"
                       />
                     )}
-                  </div>
+                  </ChatComposerSurface>
                 </div>
               </form>
               <p className="mb-2 mt-1 landscape-short:mb-1 text-center text-[10px] text-muted-foreground/50">
diff --git a/frontend/src/components/chat/ChatTurn.tsx b/frontend/src/components/chat/ChatTurn.tsx
new file mode 100644
index 000000000..f58fd5b23
--- /dev/null
+++ b/frontend/src/components/chat/ChatTurn.tsx
@@ -0,0 +1,138 @@
+import type { ReactNode, Ref } from "react";
+import { SquarePen } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/utils/utils";
+
+type ChatTurnProps = {
+  children: ReactNode;
+  actions?: ReactNode;
+  containerRef?: Ref<HTMLDivElement>;
+  className?: string;
+};
+
+export function MapleChatAvatar() {
+  return (
+    <img
+      src="/m-avatar.svg"
+      alt=""
+      width={32}
+      height={32}
+      draggable={false}
+      className="h-8 w-8 shrink-0 select-none"
+    />
+  );
+}
+
+export function ChatUserTurn({
+  children,
+  actions,
+  containerRef,
+  className,
+  actionsClassName
+}: ChatTurnProps & { actionsClassName?: string }) {
+  return (
+    <div
+      ref={containerRef}
+      className={cn("group/user flex flex-col items-end py-4 landscape-short:py-1.5", className)}
+    >
+      <div className="max-w-[min(100%,42rem)] rounded-2xl border border-border bg-muted px-4 py-3 backdrop-blur-lg dark:bg-card landscape-short:px-3 landscape-short:py-2">
+        <div className="prose prose-sm max-w-none text-left dark:prose-invert">
+          <div className="space-y-3">{children}</div>
+        </div>
+      </div>
+      {actions ? (
+        <div className={cn("flex justify-end pr-1 pt-1 transition-opacity", actionsClassName)}>
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function ChatAssistantTurn({ children, actions, containerRef, className }: ChatTurnProps) {
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "group px-0 py-4 md:p-4 landscape-short:px-2 landscape-short:py-1.5",
+        className
+      )}
+    >
+      <div className="mx-auto flex w-full max-w-4xl flex-col gap-2 md:flex-row md:items-start md:gap-3">
+        <div className="flex h-8 shrink-0 items-center gap-2 px-0 md:h-auto md:flex-col md:items-start md:gap-3 landscape-short:h-6">
+          <MapleChatAvatar />
+          <div className="text-sm font-semibold leading-none md:hidden">Maple</div>
+        </div>
+        <div className="flex min-w-0 w-full flex-1 flex-col overflow-hidden px-2 md:gap-2 md:px-0">
+          <div className="hidden md:block">
+            <div className="text-left text-sm font-semibold leading-none">Maple</div>
+          </div>
+          <div className="space-y-2">
+            {children}
+            {actions ? <div className="flex gap-1">{actions}</div> : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ChatDesktopConversationHeader({
+  title,
+  isSidebarOpen,
+  onNewChat,
+  titleClassName
+}: {
+  title: string;
+  isSidebarOpen: boolean;
+  onNewChat: () => void;
+  titleClassName?: string;
+}) {
+  return (
+    <div className="flex h-14 items-center px-4">
+      <div className="relative flex flex-1 items-center justify-center">
+        <h1
+          className={cn(
+            "max-w-[20rem] truncate text-base font-medium text-foreground transition-colors duration-300",
+            titleClassName
+          )}
+        >
+          {title}
+        </h1>
+        {!isSidebarOpen ? (
+          <Button
+            variant="outline"
+            size="icon"
+            className="absolute right-0 h-9 w-9 border-0"
+            onClick={onNewChat}
+            aria-label="New chat"
+          >
+            <SquarePen className="h-4 w-4" />
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export const CHAT_COMPOSER_TEXTAREA_CLASS =
+  "w-full min-h-[52px] landscape-short:min-h-[40px] max-h-[200px] landscape-short:max-h-[100px] resize-none border-0 bg-transparent py-3.5 landscape-short:py-2 pl-4 pr-2 leading-6 focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60";
+
+export function ChatComposerSurface({
+  children,
+  className
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "relative w-full overflow-hidden rounded-3xl border border-[hsl(var(--maple-secondary-container))] bg-background transition-colors focus-within:border-[hsl(var(--maple-primary))]",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/src/components/markdown.tsx b/frontend/src/components/markdown.tsx
index a1cacf605..3f965f998 100644
--- a/frontend/src/components/markdown.tsx
+++ b/frontend/src/components/markdown.tsx
@@ -27,9 +27,15 @@ export interface ThinkingBlockProps {
   content: string;
   isThinking: boolean;
   duration?: number;
+  showDuration?: boolean;
 }
 
-export function ThinkingBlock({ content, isThinking, duration }: ThinkingBlockProps) {
+export function ThinkingBlock({
+  content,
+  isThinking,
+  duration,
+  showDuration = true
+}: ThinkingBlockProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const startTimeRef = useRef<number | null>(null);
@@ -89,7 +95,7 @@ export function ThinkingBlock({ content, isThinking, duration }: ThinkingBlockPr
           <span className="min-w-0 text-sm font-medium text-muted-foreground">
             {isThinking ? (
               <span className="inline-flex items-center gap-2">
-                Thinking for {durationText} seconds
+                {showDuration ? `Thinking for ${durationText} seconds` : "Thinking"}
                 <span className="inline-flex items-baseline gap-1">
                   <span className="inline-block animate-bounce" style={{ animationDelay: "0ms" }}>
                     .
@@ -102,8 +108,10 @@ export function ThinkingBlock({ content, isThinking, duration }: ThinkingBlockPr
                   </span>
                 </span>
               </span>
-            ) : (
+            ) : showDuration ? (
               `Thought for ${durationText} seconds`
+            ) : (
+              "Thought"
             )}
           </span>
           <span className="shrink-0 text-muted-foreground" aria-hidden>
diff --git a/frontend/src/services/agentTimeline.test.ts b/frontend/src/services/agentTimeline.test.ts
index 14a535cf8..c2fde3bdf 100644
--- a/frontend/src/services/agentTimeline.test.ts
+++ b/frontend/src/services/agentTimeline.test.ts
@@ -1,6 +1,11 @@
 import { describe, expect, test } from "bun:test";
 import type { AgentTimelineItem } from "./agentRuntimeService";
-import { coalesceAdjacentThinkingItems, hasRenderableThinkingText } from "./agentTimeline";
+import {
+  activeAgentThinkingItemId,
+  coalesceAdjacentThinkingItems,
+  groupAgentTimelineItems,
+  hasRenderableThinkingText
+} from "./agentTimeline";
 
 function thinking(id: string, text: string): AgentTimelineItem {
   return {
@@ -57,3 +62,101 @@ describe("coalesceAdjacentThinkingItems", () => {
     expect(projected.map((item) => item.text)).toEqual(["Before", undefined, "After"]);
   });
 });
+
+describe("activeAgentThinkingItemId", () => {
+  test("marks only a trailing thought in an active run", () => {
+    const items = [thinking("thought", "Working")];
+
+    expect(activeAgentThinkingItemId(items, true)).toBe("thought");
+    expect(activeAgentThinkingItemId(items, false)).toBeNull();
+  });
+
+  test("stops marking a thought active once later activity arrives", () => {
+    const items = [
+      thinking("thought", "Working"),
+      {
+        id: "tool",
+        itemType: "tool",
+        status: "running",
+        createdMs: 0,
+        merge: "replace"
+      } satisfies AgentTimelineItem
+    ];
+
+    expect(activeAgentThinkingItemId(items, true)).toBeNull();
+  });
+
+  test("does not reactivate a previous thought while the next prompt is submitting", () => {
+    const previousItems = [thinking("previous-thought", "Finished")];
+    const hasActiveRun = true;
+    const isSubmitting = true;
+
+    expect(activeAgentThinkingItemId(previousItems, hasActiveRun && !isSubmitting)).toBeNull();
+  });
+});
+
+describe("groupAgentTimelineItems", () => {
+  function item(
+    id: string,
+    itemType: AgentTimelineItem["itemType"],
+    role?: AgentTimelineItem["role"]
+  ): AgentTimelineItem {
+    return { id, itemType, role, createdMs: 0, merge: "replace" };
+  }
+
+  test("groups a complete agent response under one assistant turn", () => {
+    const turns = groupAgentTimelineItems([
+      item("user", "message", "user"),
+      item("thinking", "thinking", "thought"),
+      item("tool", "tool"),
+      item("permission", "permission"),
+      item("answer", "message", "assistant")
+    ]);
+
+    expect(turns).toHaveLength(2);
+    expect(turns[0]).toMatchObject({ type: "user", id: "user" });
+    expect(turns[1]).toMatchObject({
+      type: "assistant",
+      id: "assistant-after-user",
+      items: [{ id: "thinking" }, { id: "tool" }, { id: "permission" }, { id: "answer" }]
+    });
+  });
+
+  test("starts a new turn for each user message", () => {
+    const turns = groupAgentTimelineItems([
+      item("user-1", "message", "user"),
+      item("answer-1", "message", "assistant"),
+      item("user-2", "message", "user"),
+      item("answer-2", "message", "assistant")
+    ]);
+
+    expect(turns.map((turn) => turn.type)).toEqual(["user", "assistant", "user", "assistant"]);
+  });
+
+  test("keeps leading system activity in an assistant turn", () => {
+    const turns = groupAgentTimelineItems([
+      item("system", "system", "system"),
+      item("error", "error", "system"),
+      item("user", "message", "user")
+    ]);
+
+    expect(turns[0]).toMatchObject({
+      type: "assistant",
+      id: "assistant-leading",
+      items: [{ id: "system" }, { id: "error" }]
+    });
+    expect(turns[1]).toMatchObject({ type: "user", id: "user" });
+  });
+
+  test("keeps assistant keys stable as streamed items become renderable", () => {
+    const before = groupAgentTimelineItems([item("user", "message", "user"), item("tool", "tool")]);
+    const after = groupAgentTimelineItems([
+      item("user", "message", "user"),
+      item("thinking", "thinking", "thought"),
+      item("tool", "tool")
+    ]);
+
+    expect(before[1].id).toBe("assistant-after-user");
+    expect(after[1].id).toBe(before[1].id);
+  });
+});
diff --git a/frontend/src/services/agentTimeline.ts b/frontend/src/services/agentTimeline.ts
index b2bd7ab84..3af4e3d0f 100644
--- a/frontend/src/services/agentTimeline.ts
+++ b/frontend/src/services/agentTimeline.ts
@@ -1,9 +1,22 @@
 import type { AgentTimelineItem } from "./agentRuntimeService";
 
+export type AgentTimelineTurn =
+  | { type: "user"; item: AgentTimelineItem; id: string }
+  | { type: "assistant"; items: AgentTimelineItem[]; id: string };
+
 export function hasRenderableThinkingText(text: string | null | undefined): boolean {
   return Boolean(text?.trim());
 }
 
+export function activeAgentThinkingItemId(
+  items: AgentTimelineItem[],
+  isRunActive: boolean
+): string | null {
+  if (!isRunActive || items.length === 0) return null;
+  const trailingItem = items[items.length - 1];
+  return trailingItem.itemType === "thinking" ? trailingItem.id : null;
+}
+
 export function coalesceAdjacentThinkingItems(items: AgentTimelineItem[]): AgentTimelineItem[] {
   return items.reduce<AgentTimelineItem[]>((projected, item) => {
     const previous = projected[projected.length - 1];
@@ -18,3 +31,32 @@ export function coalesceAdjacentThinkingItems(items: AgentTimelineItem[]): Agent
     return projected;
   }, []);
 }
+
+export function groupAgentTimelineItems(items: AgentTimelineItem[]): AgentTimelineTurn[] {
+  const turns: AgentTimelineTurn[] = [];
+  let assistantItems: AgentTimelineItem[] = [];
+  let assistantTurnId = "assistant-leading";
+
+  const flushAssistantItems = () => {
+    if (assistantItems.length === 0) return;
+    turns.push({
+      type: "assistant",
+      items: assistantItems,
+      id: assistantTurnId
+    });
+    assistantItems = [];
+  };
+
+  for (const item of items) {
+    if (item.itemType === "message" && item.role === "user") {
+      flushAssistantItems();
+      turns.push({ type: "user", item, id: item.id });
+      assistantTurnId = `assistant-after-${item.id}`;
+      continue;
+    }
+    assistantItems.push(item);
+  }
+
+  flushAssistantItems();
+  return turns;
+}