@bubblebrain-ai/bubble 0.0.4 → 0.0.6

package/dist/tui/run.js

@@ -1,4 +1,4 @@
-import { BoxRenderable, CodeRenderable, createCliRenderer, DiffRenderable, getTreeSitterClient, MarkdownRenderable, LineNumberRenderable, StyledText, RGBA, fg, bg, bold, dim, TextAttributes, TextRenderable, } from "@opentui/core";
+import { BoxRenderable, CodeRenderable, createCliRenderer, DiffRenderable, getTreeSitterClient, MarkdownRenderable, LineNumberRenderable, StyledText, RGBA, fg, bg, bold, italic, dim, TextAttributes, TextRenderable, } from "@opentui/core";
 import { createComponent, createElement, insert, render, spread, useKeyboard, useRenderer, useSelectionHandler, useTerminalDimensions, } from "@opentui/solid";
 import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
 import { AgentAbortError } from "../agent.js";
@@ -13,6 +13,12 @@ import { sidebarMcpRowsFromStates, renderMcpRowMarker } from "./sidebar-mcp.js";
 import { expandAtMentions, filterFileSuggestions, findAtContext, listProjectFiles } from "./file-mentions.js";
 import { compactDisplayMessages } from "./display-history.js";
 import { createMarkdownSyntaxStyle, createSubtleMarkdownSyntaxStyle } from "./markdown-theme.js";
+import { markdownInlineSegments } from "./markdown-inline.js";
+import { hashString } from "./render-signature.js";
+import { findToolRenderer } from "./tool-renderers/registry.js";
+import { writeToolKey } from "./tool-renderers/write.js";
+import { formatWritePreview, isWritePreviewTool } from "./tool-renderers/write-preview.js";
+import { extractStreamingArgsHint } from "./streaming-tool-args.js";
 import { getNextPermissionMode, PERMISSION_MODE_INFO } from "../permission/mode.js";
 import { getContextBudget } from "../context/budget.js";
 import { getLspService } from "../lsp/index.js";
@@ -55,6 +61,7 @@ const DEFAULT_THEME = {
     messageAssistantText: "#eeeeee",
     messageAssistantAccent: "#fab283",
     messageThinkingText: "#8b949e",
+    messageThinkingContentText: "#6e7681",
     messageThinkingBorder: "#282828",
     toolText: "#a6acb8",
     toolPending: "#fab283",
@@ -103,10 +110,31 @@ const QUESTION_MAX_OPTIONS = 10;
 const QUESTION_MAX_CONFIRM_ROWS = 3;
 const QUESTION_PANEL_MIN_HEIGHT = 9;
 const HOME_LOGO = [
-    " /\\_/\\  █▀▀▄ █  █ █▀▀▄ █▀▀▄ █    █▀▀",
-    "( o.o ) █▀▀▄ █  █ █▀▀▄ █▀▀▄ █    █▀▀",
-    " > ^ <  ▀▀▀  ▀▀▀▀ ▀▀▀  ▀▀▀  ▀▀▀▀ ▀▀▀▀",
+    { text: " /\\___/\\ ", tone: "primary" },
+    { text: "( ◕   ◕ )", tone: "primary" },
+    { text: "( ◡ ω ◡ )", tone: "warning" },
+    { text: " (\")_(\") ", tone: "warning" },
+    { text: "", tone: "primary" },
+    { text: "·  ◌   ○   ◯  ·", tone: "textMuted" },
+    { text: "", tone: "primary" },
+    { text: "██████╗ ██╗   ██╗██████╗ ██████╗ ██╗     ███████╗", tone: "primary" },
+    { text: "██╔══██╗██║   ██║██╔══██╗██╔══██╗██║     ██╔════╝", tone: "primary" },
+    { text: "██████╔╝██║   ██║██████╔╝██████╔╝██║     █████╗  ", tone: "warning" },
+    { text: "██╔══██╗██║   ██║██╔══██╗██╔══██╗██║     ██╔══╝  ", tone: "warning" },
+    { text: "██████╔╝╚██████╔╝██████╔╝██████╔╝███████╗███████╗", tone: "accent" },
+    { text: "╚═════╝  ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝", tone: "accent" },
+    { text: "", tone: "primary" },
+    { text: "── your bubble coding companion ──", tone: "secondary" },
 ];
+function homeLogoColor(tone) {
+    switch (tone) {
+        case "primary": return theme.primary;
+        case "warning": return theme.warning;
+        case "accent": return theme.accent;
+        case "secondary": return theme.secondary;
+        case "textMuted": return theme.textMuted;
+    }
+}
 const HOME_TIPS = [
     "Type @ followed by a filename to attach file context",
     "Press Shift+Tab to cycle Build, Plan, and Bypass modes",
@@ -318,20 +346,16 @@ function OpenTuiApp(props) {
     let rootBox;
     let sidebarShell;
     let transcriptHost;
-    const transcriptState = { entries: [], expandedThinking: new Set(), expandedCompactions: new Set() };
+    const transcriptState = {
+        entries: [],
+        expandedCompactions: new Set(),
+        expandedWrites: new Set(),
+        defaultWritesExpanded: false,
+    };
     let dock;
     let homeComposerShell;
     let sessionComposerShell;
     const promptScannerSyncs = new Set();
-    const thinkingSpinnerFrames = createFrames({
-        width: 4,
-        color: theme.primary,
-        style: "blocks",
-        inactiveFactor: 0.45,
-        minAlpha: 0.25,
-    });
-    let thinkingSpinnerFrameIndex = 0;
-    let thinkingSpinnerTimer;
     let approvalRoot;
     let approvalHeaderTitle;
     let approvalMetaIcon;
@@ -1524,7 +1548,6 @@ function OpenTuiApp(props) {
         for (const timer of questionSyncTimers)
             clearTimeout(timer);
         questionSyncTimers.clear();
-        stopThinkingSpinner();
         if (props.options.planHandlerRef)
             props.options.planHandlerRef.current = undefined;
         if (props.options.approvalHandlerRef)
@@ -1668,6 +1691,16 @@ function OpenTuiApp(props) {
             event.preventDefault?.();
             return true;
         }
+        if (event.ctrl && name === "t" && !picker) {
+            toggleThinkingVisibility();
+            event.preventDefault?.();
+            return true;
+        }
+        if (event.ctrl && name === "o" && !picker) {
+            toggleVisibleWriteBlocks();
+            event.preventDefault?.();
+            return true;
+        }
         if (routeModalKey(event))
             return true;
         if (cycleModeFromKey(event))
@@ -1688,12 +1721,12 @@ function OpenTuiApp(props) {
             plan: pendingPlan()?.plan,
             selectedOption: approvalOptionIdx(),
             showThinking: showThinking(),
-            onToggleThinking: (key) => {
-                if (transcriptState.expandedThinking.has(key)) {
-                    transcriptState.expandedThinking.delete(key);
+            onToggleWrite: (key) => {
+                if (transcriptState.expandedWrites.has(key)) {
+                    transcriptState.expandedWrites.delete(key);
                 }
                 else {
-                    transcriptState.expandedThinking.add(key);
+                    transcriptState.expandedWrites.add(key);
                 }
                 syncSessionMessages();
             },
@@ -1708,52 +1741,61 @@ function OpenTuiApp(props) {
             },
         };
     }
-    function syncSessionMessages(messages = currentTranscriptMessages(streamingDisplay)) {
-        if (!transcriptHost)
+    function toggleThinkingVisibility() {
+        if (!currentTranscriptMessages(streamingDisplay).some((message) => !!message.reasoning?.trim())) {
+            setNotice("No thinking blocks to toggle");
             return;
-        updateTranscriptHost(transcriptHost, transcriptState, messages, transcriptOptions(), props.syntaxStyle, props.subtleSyntaxStyle);
-        syncThinkingSpinner();
-        syncPromptSurfaces();
-    }
-    function renderThinkingSpinnerFrame() {
-        const frame = thinkingSpinnerFrames[thinkingSpinnerFrameIndex % thinkingSpinnerFrames.length] ?? "";
-        let rendered = false;
-        for (const entry of transcriptState.entries) {
-            const ref = entry.refs.reasoningToggleText;
-            if (!ref || !entry.refs.reasoningStreaming)
-                continue;
-            ref.content = thinkingToggleLabel(entry.refs.reasoningExpanded === true, true, frame);
-            ref.requestRender();
-            rendered = true;
-        }
-        if (rendered) {
-            transcriptHost?.requestRender();
-            rootBox?.requestRender();
         }
+        setShowThinking((prev) => {
+            const next = !prev;
+            setNotice(next ? "Thinking blocks visible" : "Thinking blocks hidden");
+            return next;
+        });
+        redrawTranscript();
     }
-    function stopThinkingSpinner() {
-        if (thinkingSpinnerTimer)
-            clearInterval(thinkingSpinnerTimer);
-        thinkingSpinnerTimer = undefined;
-        thinkingSpinnerFrameIndex = 0;
-    }
-    function syncThinkingSpinner() {
-        const hasStreamingThinking = transcriptState.entries.some((entry) => !!entry.refs.reasoningToggleText && entry.refs.reasoningStreaming === true);
-        if (!hasStreamingThinking) {
-            stopThinkingSpinner();
+    function toggleVisibleWriteBlocks() {
+        const keys = collectVisibleWriteKeys();
+        if (!keys.length) {
+            setNotice("No write previews to toggle");
             return;
         }
-        renderThinkingSpinnerFrame();
-        if (thinkingSpinnerTimer)
+        const shouldExpand = keys.some((key) => !transcriptState.expandedWrites.has(key));
+        transcriptState.defaultWritesExpanded = shouldExpand;
+        for (const key of keys) {
+            if (shouldExpand)
+                transcriptState.expandedWrites.add(key);
+            else
+                transcriptState.expandedWrites.delete(key);
+        }
+        setNotice(shouldExpand ? "Write previews expanded" : "Write previews collapsed");
+        syncSessionMessages();
+    }
+    function collectVisibleWriteKeys() {
+        const messages = currentTranscriptMessages(streamingDisplay)
+            .filter((message) => hasRenderableMessage(message, showThinking()));
+        const keys = [];
+        for (const [index, message] of messages.entries()) {
+            const messageKey = transcriptMessageKey(message, index);
+            for (const tool of message.toolCalls ?? []) {
+                if (isWritePreviewTool(tool)) {
+                    keys.push(writeToolKey(messageKey, tool));
+                }
+            }
+        }
+        return keys;
+    }
+    function syncSessionMessages(messages = currentTranscriptMessages(streamingDisplay)) {
+        if (!transcriptHost)
             return;
-        thinkingSpinnerTimer = setInterval(() => {
-            thinkingSpinnerFrameIndex = (thinkingSpinnerFrameIndex + 1) % thinkingSpinnerFrames.length;
-            renderThinkingSpinnerFrame();
-        }, PROMPT_SCANNER_INTERVAL_MS);
+        updateTranscriptHost(transcriptHost, transcriptState, messages, transcriptOptions(), props.syntaxStyle, props.subtleSyntaxStyle);
+        syncPromptSurfaces();
     }
     function redrawTranscript(extra, baseMessages = displayMessages) {
-        const shouldFollow = shouldFollowTranscriptBeforeUpdate();
         streamingDisplay = extra;
+        renderTranscriptNow(streamingDisplay, baseMessages);
+    }
+    function renderTranscriptNow(extra, baseMessages = displayMessages) {
+        const shouldFollow = shouldFollowTranscriptBeforeUpdate();
         const nextMessages = compactDisplayMessages(extra ? [...baseMessages, extra] : baseMessages);
         syncSessionMessages(nextMessages);
         rootBox?.requestRender();
@@ -3078,12 +3120,7 @@ function OpenTuiApp(props) {
     }
     async function executeSlash(input) {
         if (/^\/(?:thinking|toggle-thinking)(?:\s|$)/.test(input.trim())) {
-            setShowThinking((prev) => {
-                const next = !prev;
-                setNotice(next ? "Thinking blocks visible" : "Thinking blocks hidden");
-                return next;
-            });
-            redrawTranscript();
+            toggleThinkingVisibility();
             return true;
         }
         const wasHomeSurfaceActive = isHomeSurfaceActive();
@@ -3525,54 +3562,128 @@ function OpenTuiApp(props) {
         let assistantContent = "";
         let assistantReasoning = "";
         const toolCalls = [];
+        let currentTurnHasToolCall = false;
+        let turnStartedAt;
         let runError;
         let runCancelled = false;
+        // Throttle redraws driven by per-token streaming events (reasoning_delta
+        // and tool_call_delta). Both can fire hundreds of times per second on a
+        // long reply; coalescing into ~16fps keeps the transcript alive without
+        // thrashing OpenTUI's layout or re-parsing markdown per token.
+        let pendingStreamingRedrawTimer;
+        const STREAMING_REDRAW_INTERVAL_MS = 60;
+        const buildStreamingDisplay = (status) => ({
+            role: "assistant",
+            content: "",
+            reasoning: assistantReasoning || undefined,
+            toolCalls: toolCalls.length ? [...toolCalls] : undefined,
+            status,
+            streaming: true,
+            turnStartedAt,
+        });
+        const flushStreamingRedraw = () => {
+            if (pendingStreamingRedrawTimer === undefined)
+                return;
+            clearTimeout(pendingStreamingRedrawTimer);
+            pendingStreamingRedrawTimer = undefined;
+            redrawTranscript(buildStreamingDisplay(toolCalls.length ? undefined : "thinking"));
+        };
+        const scheduleStreamingRedraw = () => {
+            if (pendingStreamingRedrawTimer !== undefined)
+                return;
+            pendingStreamingRedrawTimer = setTimeout(flushStreamingRedraw, STREAMING_REDRAW_INTERVAL_MS);
+        };
         try {
             for await (const event of props.agent.run(actualInput, props.args.cwd, { abortSignal: run.abortController.signal })) {
                 if (event.type === "turn_start") {
                     assistantContent = "";
                     assistantReasoning = "";
                     toolCalls.length = 0;
+                    currentTurnHasToolCall = false;
+                    turnStartedAt = Date.now();
                     redrawTranscript({
                         role: "assistant",
                         content: "",
                         status: "thinking",
                         streaming: true,
+                        turnStartedAt,
                     });
                 }
                 else if (event.type === "text_delta") {
                     assistantContent += event.content;
-                    redrawTranscript({
-                        role: "assistant",
-                        content: assistantContent,
-                        reasoning: assistantReasoning || undefined,
-                        toolCalls: toolCalls.length ? [...toolCalls] : undefined,
-                        status: "responding",
-                        streaming: true,
-                    });
                 }
                 else if (event.type === "reasoning_delta") {
                     assistantReasoning += event.content;
+                    scheduleStreamingRedraw();
+                }
+                else if (event.type === "tool_call_start") {
+                    currentTurnHasToolCall = true;
+                    // Insert a streaming placeholder so the user sees feedback the moment
+                    // the model commits to a tool call, instead of waiting for the args
+                    // JSON to fully stream + parse.
+                    if (!toolCalls.find((item) => item.id === event.id)) {
+                        toolCalls.push({
+                            id: event.id,
+                            name: event.name,
+                            args: {},
+                            rawArguments: "",
+                            streamingArgs: true,
+                            status: "pending",
+                        });
+                    }
                     redrawTranscript({
                         role: "assistant",
-                        content: assistantContent,
+                        content: "",
                         reasoning: assistantReasoning || undefined,
-                        toolCalls: toolCalls.length ? [...toolCalls] : undefined,
-                        status: "thinking",
+                        toolCalls: [...toolCalls],
                         streaming: true,
+                        turnStartedAt,
                     });
                 }
+                else if (event.type === "tool_call_delta") {
+                    currentTurnHasToolCall = true;
+                    const existing = toolCalls.find((item) => item.id === event.id);
+                    if (existing) {
+                        existing.name = event.name || existing.name;
+                        existing.rawArguments = event.arguments;
+                        existing.streamingArgs = true;
+                        const hint = extractStreamingArgsHint(event.arguments);
+                        if (hint.path && existing.args.path !== hint.path) {
+                            existing.args = { ...existing.args, path: hint.path };
+                        }
+                        existing.streamingNewlineCount = hint.newlineCount;
+                        scheduleStreamingRedraw();
+                    }
+                }
+                else if (event.type === "tool_call_end") {
+                    currentTurnHasToolCall = true;
+                }
                 else if (event.type === "tool_start") {
-                    toolCalls.push({ id: event.id, name: event.name, args: event.args, status: "running" });
+                    currentTurnHasToolCall = true;
+                    flushStreamingRedraw();
+                    const now = Date.now();
+                    const existing = toolCalls.find((item) => item.id === event.id);
+                    if (existing) {
+                        existing.args = event.args;
+                        existing.streamingArgs = false;
+                        existing.streamingNewlineCount = undefined;
+                        existing.rawArguments = undefined;
+                        existing.status = "running";
+                        existing.startedAt = existing.startedAt ?? now;
+                    }
+                    else {
+                        toolCalls.push({ id: event.id, name: event.name, args: event.args, status: "running", startedAt: now });
+                    }
                     if (event.name === "question") {
                         scheduleQuestionSync();
                     }
                     redrawTranscript({
                         role: "assistant",
-                        content: assistantContent,
+                        content: "",
                         reasoning: assistantReasoning || undefined,
                         toolCalls: [...toolCalls],
                         streaming: true,
+                        turnStartedAt,
                     });
                 }
                 else if (event.type === "tool_end") {
@@ -3582,12 +3693,14 @@ function OpenTuiApp(props) {
                         call.isError = event.result.isError;
                         call.metadata = event.result.metadata;
                         call.status = event.result.isError ? "error" : "completed";
+                        call.completedAt = Date.now();
                         redrawTranscript({
                             role: "assistant",
-                            content: assistantContent,
+                            content: currentTurnHasToolCall ? "" : assistantContent,
                             reasoning: assistantReasoning || undefined,
                             toolCalls: [...toolCalls],
                             streaming: true,
+                            turnStartedAt,
                         });
                     }
                     if (event.name === "question") {
@@ -3596,6 +3709,30 @@ function OpenTuiApp(props) {
                     refreshGitSidebar();
                     syncSidebarLsp();
                 }
+                else if (event.type === "tool_update") {
+                    const call = toolCalls.find((item) => item.id === event.id);
+                    if (call) {
+                        call.metadata = mergeToolMetadata(call.metadata, event.update.metadata);
+                        call.result = event.update.message ?? call.result;
+                        const finished = event.update.status === "failed" || event.update.status === "blocked" || event.update.status === "cancelled" || event.update.status === "completed";
+                        call.status = event.update.status === "failed" || event.update.status === "blocked" || event.update.status === "cancelled"
+                            ? "error"
+                            : event.update.status === "completed"
+                                ? "completed"
+                                : "running";
+                        call.isError = call.status === "error";
+                        if (finished && call.completedAt === undefined)
+                            call.completedAt = Date.now();
+                        redrawTranscript({
+                            role: "assistant",
+                            content: currentTurnHasToolCall ? "" : assistantContent,
+                            reasoning: assistantReasoning || undefined,
+                            toolCalls: [...toolCalls],
+                            streaming: true,
+                            turnStartedAt,
+                        });
+                    }
+                }
                 else if (event.type === "todos_updated") {
                     setTodos(event.todos);
                     syncSidebarTodos(event.todos);
@@ -3607,6 +3744,10 @@ function OpenTuiApp(props) {
                     bumpSidebar();
                 }
                 else if (event.type === "turn_end") {
+                    if (pendingStreamingRedrawTimer !== undefined) {
+                        clearTimeout(pendingStreamingRedrawTimer);
+                        pendingStreamingRedrawTimer = undefined;
+                    }
                     if (event.usage) {
                         setSidebarUsage((current) => ({
                             contextTokens: event.usage.promptTokens || current.contextTokens,
@@ -3622,9 +3763,12 @@ function OpenTuiApp(props) {
                     bumpSidebar();
                     const assistantMessage = {
                         role: "assistant",
-                        content: assistantContent,
+                        content: currentTurnHasToolCall ? "" : assistantContent,
                         reasoning: assistantReasoning || undefined,
                         toolCalls: toolCalls.length ? [...toolCalls] : undefined,
+                        turnStartedAt,
+                        turnCompletedAt: Date.now(),
+                        turnUsage: event.usage,
                     };
                     const nextMessages = hasRenderableMessage(assistantMessage)
                         ? [...displayMessages, assistantMessage]
@@ -3634,6 +3778,7 @@ function OpenTuiApp(props) {
                     assistantContent = "";
                     assistantReasoning = "";
                     toolCalls.length = 0;
+                    turnStartedAt = undefined;
                     streamingDisplay = undefined;
                 }
             }
@@ -3645,6 +3790,10 @@ function OpenTuiApp(props) {
             }
         }
         finally {
+            if (pendingStreamingRedrawTimer !== undefined) {
+                clearTimeout(pendingStreamingRedrawTimer);
+                pendingStreamingRedrawTimer = undefined;
+            }
             pendingApprovalRef = undefined;
             setPendingApproval(undefined);
             setApprovalOptionIdx(0);
@@ -3736,7 +3885,7 @@ function OpenTuiApp(props) {
             paddingLeft: 2,
             paddingRight: 2,
         }, [
-            h("box", { flexShrink: 0, flexDirection: "column" }, ...HOME_LOGO.map((line) => h("text", { fg: theme.primary }, line))),
+            h("box", { flexShrink: 0, flexDirection: "column", alignItems: "center" }, ...HOME_LOGO.map((line) => h("text", { fg: homeLogoColor(line.tone) }, line.text || " "))),
             h("box", { height: 1, minHeight: 0, flexShrink: 1 }),
             h("box", {
                 ref: (ref) => {
@@ -4481,7 +4630,6 @@ function OpenTuiApp(props) {
                     if (isNewHost)
                         transcriptState.entries = [];
                     updateTranscriptHost(ref, transcriptState, currentTranscriptMessages(streamingDisplay), transcriptOptions(), props.syntaxStyle, props.subtleSyntaxStyle);
-                    syncThinkingSpinner();
                     syncPromptSurfaces(isNewHost);
                     if (isNewHost)
                         scheduleTranscriptScrollAfterUpdate(transcriptScrollFollowing, 0);
@@ -4820,19 +4968,31 @@ function renderAssistantMessage(message, syntaxStyle, subtleSyntaxStyle, showThi
             borderColor: theme.messageThinkingBorder,
             flexDirection: "column",
             flexShrink: 0,
-        }, renderMarkdownContent(formatThinkingMarkdown(visibleReasoning), subtleSyntaxStyle, {
+        }, h("text", { content: thinkingLabelContent(message.streaming === true, reasoningElapsedMs(message)), fg: theme.messageThinkingText, wrapMode: "none" }), renderMarkdownContent(formatThinkingMarkdown(visibleReasoning), subtleSyntaxStyle, {
             streaming: message.streaming === true,
-            fg: theme.messageThinkingText,
+            fg: theme.messageThinkingContentText,
         })));
     }
-    for (const tool of message.toolCalls ?? [])
+    const toolCalls = message.toolCalls ?? [];
+    for (const tool of toolCalls)
         children.push(renderTool(tool, syntaxStyle, width));
-    if (message.content.trim()) {
-        children.push(h("box", { paddingLeft: 3, marginTop: 1, flexDirection: "column", flexShrink: 0 }, renderMarkdownContent(message.content.trim(), syntaxStyle, {
+    const trimmedContent = message.content.trim();
+    if (trimmedContent && toolCalls.length > 0) {
+        children.push(h("box", { paddingLeft: 3, marginTop: 1, flexShrink: 0 }, h("text", { content: answerDividerStyledText(), wrapMode: "none" })));
+    }
+    if (trimmedContent) {
+        children.push(h("box", { paddingLeft: 3, marginTop: 1, flexDirection: "column", flexShrink: 0 }, renderMarkdownContent(trimmedContent, syntaxStyle, {
             streaming: message.streaming === true,
             fg: theme.messageAssistantText,
         })));
     }
+    if (message.streaming === true && trimmedContent) {
+        children.push(h("box", { paddingLeft: 3, flexShrink: 0 }, h("text", { fg: theme.primary, wrapMode: "none" }, "▌")));
+    }
+    const summaryString = formatTurnSummary(message);
+    if (summaryString) {
+        children.push(h("box", { paddingLeft: 3, marginTop: 1, flexShrink: 0 }, h("text", { fg: theme.textMuted, wrapMode: "none" }, summaryString)));
+    }
     if (!children.length)
         return null;
     return h("box", { flexDirection: "column", flexShrink: 0 }, children);
@@ -4911,12 +5071,23 @@ function updateTranscriptHost(host, state, messages, options, syntaxStyle, subtl
     }
     for (const [index, message] of visibleMessages.entries()) {
         const key = transcriptMessageKey(message, index);
-        const thinkingExpanded = state.expandedThinking.has(key);
+        if (state.defaultWritesExpanded) {
+            for (const tool of message.toolCalls ?? []) {
+                if (isWritePreviewTool(tool)) {
+                    state.expandedWrites.add(writeToolKey(key, tool));
+                }
+            }
+        }
         const compactionExpanded = state.expandedCompactions.has(key);
-        const signature = transcriptMessageSignature(message, showThinking, thinkingExpanded, compactionExpanded);
+        const signature = transcriptMessageSignature(message, compactionExpanded);
         const previous = state.entries[index];
         if (previous?.key === key && previous.signature === signature) {
-            updateMessageEntry(previous, message, showThinking, thinkingExpanded, compactionExpanded);
+            updateMessageEntry(previous, message, showThinking, compactionExpanded, {
+                syntaxStyle,
+                expandedWrites: state.expandedWrites,
+                width: options?.width ?? 80,
+                onToggleWrite: options?.onToggleWrite,
+            });
             nextEntries.push(previous);
             continue;
         }
@@ -4924,7 +5095,7 @@ function updateTranscriptHost(host, state, messages, options, syntaxStyle, subtl
             host.remove(previous.node.id);
             previous.node.destroyRecursively();
         }
-        const entry = createMessageEntry(ctx, message, index, syntaxStyle, subtleSyntaxStyle, key, signature, showThinking, options?.width ?? 80, thinkingExpanded, compactionExpanded, options?.onToggleThinking, options?.onToggleCompaction);
+        const entry = createMessageEntry(ctx, message, index, syntaxStyle, subtleSyntaxStyle, key, signature, showThinking, options?.width ?? 80, compactionExpanded, state.expandedWrites, options?.onToggleCompaction, options?.onToggleWrite);
         if (entry) {
             host.add(entry.node, index);
             nextEntries.push(entry);
@@ -4967,34 +5138,23 @@ function clearTranscriptEntries(host, state) {
 function transcriptMessageKey(message, index) {
     return `${index}:${message.role}`;
 }
-function transcriptMessageSignature(message, showThinking = true, thinkingExpanded = false, compactionExpanded = false) {
+function transcriptMessageSignature(message, compactionExpanded = false) {
     if (message.role !== "assistant")
         return message.role;
     if (message.syntheticKind === "ui_compact_card") {
         return `compaction:${compactionExpanded ? "expanded" : "collapsed"}:${message.compactionMeta?.turns ?? 0}`;
     }
     const modelSwitch = parseModelSwitchMessage(message.content);
-    const tools = (message.toolCalls ?? [])
-        .map((tool) => `${tool.id}:${tool.name}:${tool.status ?? (tool.result === undefined ? "pending" : "completed")}:${tool.isError ? "error" : "ok"}`)
-        .join("|");
-    const visibleReasoning = showThinking && !!message.reasoning?.trim();
+    const pureModelSwitch = modelSwitch && !message.reasoning?.trim() && !(message.toolCalls?.length);
+    if (pureModelSwitch) {
+        return `assistant:model-switch:${hashString(modelSwitch)}`;
+    }
     return [
         message.role,
-        modelSwitch ? "model-switch" : "standard",
-        message.status ?? "idle",
-        visibleReasoning ? (thinkingExpanded ? "reasoning-expanded" : "reasoning-collapsed") : "no-reasoning",
-        message.content.trim() ? "content" : "no-content",
-        tools,
+        "standard",
     ].join(":");
 }
-function hashString(value) {
-    let hash = 5381;
-    for (let index = 0; index < value.length; index++) {
-        hash = ((hash << 5) + hash) ^ value.charCodeAt(index);
-    }
-    return (hash >>> 0).toString(36);
-}
-function updateMessageEntry(entry, message, showThinking = true, thinkingExpanded = false, compactionExpanded = false) {
+function updateMessageEntry(entry, message, showThinking = true, compactionExpanded = false, assistantOptions) {
     if (message.role === "user") {
         if (entry.refs.userText)
             entry.refs.userText.content = message.content || " ";
@@ -5018,21 +5178,163 @@ function updateMessageEntry(entry, message, showThinking = true, thinkingExpande
         }
         return;
     }
+    if (assistantOptions) {
+        updateAssistantEntry(entry, message, showThinking, assistantOptions);
+        return;
+    }
+}
+function updateAssistantEntry(entry, message, showThinking, options) {
+    const content = message.content.trim();
+    const visibleReasoning = showThinking ? message.reasoning?.trim() ?? "" : "";
+    const tools = message.toolCalls ?? [];
+    const showStatus = !!message.status && !visibleReasoning && !content && tools.length === 0;
     if (entry.refs.statusText) {
-        entry.refs.statusText.content = assistantStatusLabel(message);
+        entry.refs.statusText.content = showStatus ? assistantStatusLabel(message) : "";
+    }
+    if (entry.refs.statusBox) {
+        entry.refs.statusBox.visible = showStatus;
     }
+    const streamingReasoning = message.streaming === true;
     if (entry.refs.reasoningToggleText) {
-        entry.refs.reasoningExpanded = thinkingExpanded;
-        entry.refs.reasoningStreaming = message.streaming === true;
-        entry.refs.reasoningToggleText.content = thinkingToggleLabel(thinkingExpanded, message.streaming === true);
+        entry.refs.reasoningStreaming = streamingReasoning;
+        entry.refs.reasoningToggleText.content = visibleReasoning
+            ? thinkingLabelContent(streamingReasoning, reasoningElapsedMs(message))
+            : new StyledText([fg(theme.messageThinkingText)("")]);
+    }
+    // During streaming we update only the plain text node — cheap per-delta. The
+    // markdown node stays hidden + stale. Once streaming ends (turn_end), we
+    // pay the parse cost exactly once and swap visibility.
+    if (entry.refs.reasoningPlainText) {
+        if (streamingReasoning) {
+            entry.refs.reasoningPlainText.content = formatThinkingMarkdown(visibleReasoning);
+        }
+        entry.refs.reasoningPlainText.visible = streamingReasoning && !!visibleReasoning;
     }
     if (entry.refs.reasoningMarkdown) {
-        entry.refs.reasoningMarkdown.content = showThinking ? formatThinkingMarkdown(message.reasoning?.trim() ?? "") : "";
-        entry.refs.reasoningMarkdown.streaming = message.streaming === true;
+        if (!streamingReasoning) {
+            syncMarkdownRenderable(entry.refs.reasoningMarkdown, formatThinkingMarkdown(visibleReasoning), false);
+        }
+        entry.refs.reasoningMarkdown.visible = !streamingReasoning && !!visibleReasoning;
+    }
+    if (entry.refs.reasoningBox) {
+        entry.refs.reasoningBox.visible = !!visibleReasoning;
+    }
+    updateAssistantToolEntries(entry, tools, options);
+    if (entry.refs.answerDividerBox) {
+        const showDivider = tools.length > 0 && !!content;
+        entry.refs.answerDividerBox.visible = showDivider;
+        if (entry.refs.answerDividerText) {
+            entry.refs.answerDividerText.content = showDivider
+                ? answerDividerStyledText()
+                : new StyledText([fg(theme.textMuted)("")]);
+        }
     }
     if (entry.refs.contentMarkdown) {
-        entry.refs.contentMarkdown.content = message.content.trim();
-        entry.refs.contentMarkdown.streaming = message.streaming === true;
+        syncMarkdownRenderable(entry.refs.contentMarkdown, content, message.streaming === true);
+    }
+    if (entry.refs.contentBox) {
+        entry.refs.contentBox.visible = !!content;
+    }
+    if (entry.refs.contentCursorBox) {
+        const cursorActive = message.streaming === true && !!content;
+        entry.refs.contentCursorBox.visible = cursorActive;
+        if (entry.refs.contentCursorText)
+            entry.refs.contentCursorText.content = cursorActive ? "▌" : "";
+    }
+    const summaryString = formatTurnSummary(message);
+    if (entry.refs.turnSummaryText) {
+        entry.refs.turnSummaryText.content = summaryString ?? "";
+    }
+    if (entry.refs.turnSummaryBox) {
+        entry.refs.turnSummaryBox.visible = !!summaryString;
+    }
+}
+function syncMarkdownRenderable(markdown, content, streaming) {
+    if (markdown.content === content && markdown.streaming === streaming)
+        return;
+    markdown.content = content;
+    markdown.streaming = streaming;
+    markdown.clearCache();
+}
+function updateAssistantToolEntries(entry, tools, options) {
+    const toolsBox = entry.refs.toolsBox;
+    if (!toolsBox)
+        return;
+    toolsBox.visible = tools.length > 0;
+    const previousEntries = entry.refs.toolEntries ?? new Map();
+    const nextEntries = new Map();
+    tools.forEach((tool, index) => {
+        const toolKey = writeToolKey(entry.key, tool);
+        const writeExpanded = options.expandedWrites.has(toolKey);
+        const signature = toolRenderableSignature(tool, writeExpanded);
+        const previous = previousEntries.get(tool.id);
+        if (previous?.signature === signature) {
+            nextEntries.set(tool.id, previous);
+            return;
+        }
+        if (previous) {
+            toolsBox.remove(previous.node.id);
+            previous.node.destroyRecursively();
+        }
+        const node = createToolRenderable(toolsBox.ctx, tool, options.syntaxStyle, options.width, writeExpanded, isWritePreviewTool(tool) ? () => options.onToggleWrite?.(toolKey) : undefined);
+        toolsBox.add(node, index);
+        nextEntries.set(tool.id, { signature, node });
+    });
+    for (const [id, previous] of previousEntries.entries()) {
+        if (nextEntries.has(id))
+            continue;
+        toolsBox.remove(previous.node.id);
+        previous.node.destroyRecursively();
+    }
+    entry.refs.toolEntries = nextEntries;
+}
+function toolRenderableSignature(tool, writeExpanded) {
+    return [
+        tool.id,
+        tool.name,
+        tool.status ?? (tool.result === undefined ? "pending" : "completed"),
+        tool.isError ? "error" : "ok",
+        tool.streamingArgs ? "streaming-args" : "args-complete",
+        writeExpanded ? "expanded" : "collapsed",
+        hashString(stableStringify(tool.args)),
+        hashString(tool.rawArguments ?? ""),
+        hashString(tool.result ?? ""),
+        hashString(stableStringify(tool.metadata ?? null)),
+    ].join(":");
+}
+function mergeToolMetadata(current, incoming) {
+    if (!incoming)
+        return current;
+    if (current?.kind !== "subagent" || incoming.kind !== "subagent") {
+        return incoming;
+    }
+    const currentSubagents = Array.isArray(current.subagents) ? current.subagents : [];
+    const incomingSubagents = Array.isArray(incoming.subagents) ? incoming.subagents : [];
+    const byId = new Map();
+    for (const item of currentSubagents) {
+        const subAgentId = typeof item === "object" && item !== null && "subAgentId" in item
+            ? String(item.subAgentId)
+            : "";
+        byId.set(subAgentId || `current:${byId.size}`, item);
+    }
+    for (const item of incomingSubagents) {
+        const subAgentId = typeof item === "object" && item !== null && "subAgentId" in item
+            ? String(item.subAgentId)
+            : "";
+        byId.set(subAgentId || `incoming:${byId.size}`, item);
+    }
+    return {
+        ...current,
+        ...incoming,
+        subagents: [...byId.values()],
+    };
+}
+function stableStringify(value) {
+    try {
+        return JSON.stringify(value) ?? "";
+    }
+    catch {
+        return String(value);
     }
 }
 function createBox(ctx, options, children = []) {
@@ -5056,6 +5358,7 @@ function createMarkdown(ctx, content, syntaxStyle, options) {
         content,
         syntaxStyle,
         treeSitterClient,
+        renderNode: createSemanticMarkdownRenderNode(ctx, options?.fg ?? theme.messageAssistantText),
         streaming: options?.streaming === true,
         conceal: true,
         concealCode: false,
@@ -5075,6 +5378,87 @@ function createMarkdown(ctx, content, syntaxStyle, options) {
         },
     });
 }
+function createSemanticMarkdownRenderNode(ctx, defaultFg) {
+    const palette = semanticMarkdownPalette(defaultFg);
+    return (token, context) => {
+        switch (token?.type) {
+            case "hr":
+                return createText(ctx, new StyledText([
+                    fg(theme.borderSubtle)("─".repeat(48)),
+                ]), {
+                    fg: theme.borderSubtle,
+                    wrapMode: "none",
+                    flexShrink: 0,
+                });
+            case "heading":
+                return createText(ctx, markdownInlineToStyledText(markdownTokenInlineTokens(token), palette, token.text ?? "", { bold: true }), {
+                    fg: defaultFg,
+                    wrapMode: "word",
+                    flexShrink: 0,
+                });
+            case "paragraph":
+                return createText(ctx, markdownInlineToStyledText(markdownTokenInlineTokens(token), palette, token.text ?? ""), {
+                    fg: defaultFg,
+                    wrapMode: "word",
+                    flexShrink: 0,
+                });
+            case "list":
+                return createMarkdownList(ctx, token, palette, defaultFg);
+            default:
+                return context.defaultRender();
+        }
+    };
+}
+function createMarkdownList(ctx, token, palette, defaultFg) {
+    const ordered = token?.ordered === true;
+    const start = typeof token?.start === "number" ? token.start : 1;
+    const items = Array.isArray(token?.items) ? token.items : [];
+    if (items.length === 0)
+        return null;
+    return createBox(ctx, {
+        flexDirection: "column",
+        flexShrink: 0,
+    }, items.map((item, index) => {
+        const marker = ordered ? `${start + index}. ` : "• ";
+        return createText(ctx, new StyledText([
+            fg(theme.textMuted)(marker),
+            ...markdownInlineToStyledText(markdownTokenInlineTokens(item), palette, item.text ?? "").chunks,
+        ]), {
+            fg: defaultFg,
+            wrapMode: "word",
+            flexShrink: 0,
+        });
+    }));
+}
+function markdownTokenInlineTokens(token) {
+    if (Array.isArray(token?.tokens))
+        return token.tokens;
+    if (typeof token?.text === "string")
+        return [{ type: "text", text: token.text }];
+    return undefined;
+}
+function semanticMarkdownPalette(defaultFg) {
+    return {
+        text: defaultFg,
+        textMuted: theme.textMuted,
+        success: theme.success,
+        warning: theme.warning,
+        secondary: theme.secondary,
+    };
+}
+function markdownInlineToStyledText(tokens, palette, fallback = "", style = {}) {
+    const chunks = markdownInlineSegments(tokens, fallback, style).map((segment) => {
+        let chunk = fg(palette[segment.color ?? "text"])(segment.text);
+        if (segment.bold)
+            chunk = bold(chunk);
+        if (segment.italic)
+            chunk = italic(chunk);
+        if (segment.dim)
+            chunk = dim(chunk);
+        return chunk;
+    });
+    return new StyledText(chunks);
+}
 function createDiffRenderable(ctx, diff, filePath, syntaxStyle, width = 80) {
     return new DiffRenderable(ctx, {
         diff,
@@ -5137,6 +5521,24 @@ function createCodeBlockRenderable(ctx, content, filePath, syntaxStyle) {
     lineNumbers.add(code);
     return lineNumbers;
 }
+function createToolRenderHelpers() {
+    return {
+        theme,
+        createBox: (ctx, options, children) => createBox(ctx, options, children),
+        createText: (ctx, content, options) => createText(ctx, content, (options ?? {})),
+        createCodeBlockRenderable,
+        createDiffRenderable,
+        toolColor,
+        displayToolName,
+        toolHeader,
+        toolPath,
+        extractToolDiff,
+        summarizeToolResult,
+        isToolFinished,
+        toolPreview,
+        toolStateIcon,
+    };
+}
 function renderCodeBlockContent(content, filePath, syntaxStyle) {
     return h("line_number", { fg: theme.textMuted, minWidth: 3, paddingRight: 1 }, h("code", {
         content,
@@ -5148,14 +5550,14 @@ function renderCodeBlockContent(content, filePath, syntaxStyle) {
         width: "100%",
     }));
 }
-function createMessageEntry(ctx, message, index, syntaxStyle, subtleSyntaxStyle, key, signature, showThinking = true, width = 80, thinkingExpanded = false, compactionExpanded = false, onToggleThinking, onToggleCompaction) {
+function createMessageEntry(ctx, message, index, syntaxStyle, subtleSyntaxStyle, key, signature, showThinking = true, width = 80, compactionExpanded = false, expandedWrites = new Set(), onToggleCompaction, onToggleWrite) {
     if (message.role === "user")
         return createUserEntry(ctx, message, index, key, signature);
     if (message.role === "error")
         return createErrorEntry(ctx, message, key, signature);
     if (message.syntheticKind === "ui_compact_card")
         return createCompactionCardEntry(ctx, message, key, signature, compactionExpanded, onToggleCompaction);
-    return createAssistantEntry(ctx, message, syntaxStyle, subtleSyntaxStyle, key, signature, showThinking, width, thinkingExpanded, onToggleThinking);
+    return createAssistantEntry(ctx, message, syntaxStyle, subtleSyntaxStyle, key, signature, showThinking, width, expandedWrites, onToggleWrite);
 }
 function createUserEntry(ctx, message, index, key, signature) {
     const refs = {};
@@ -5200,7 +5602,7 @@ function createErrorEntry(ctx, message, key, signature) {
     }, [text]);
     return { key, signature, node, refs };
 }
-function createAssistantEntry(ctx, message, syntaxStyle, subtleSyntaxStyle, key, signature, showThinking = true, width = 80, thinkingExpanded = false, onToggleThinking) {
+function createAssistantEntry(ctx, message, syntaxStyle, subtleSyntaxStyle, key, signature, showThinking = true, width = 80, expandedWrites = new Set(), onToggleWrite) {
     const modelSwitch = parseModelSwitchMessage(message.content);
     if (modelSwitch && !message.reasoning?.trim() && !(message.toolCalls?.length)) {
         return createModelSwitchEntry(ctx, modelSwitch, key, signature);
@@ -5208,70 +5610,135 @@ function createAssistantEntry(ctx, message, syntaxStyle, subtleSyntaxStyle, key,
     const children = [];
     const refs = {};
     const visibleReasoning = showThinking ? message.reasoning?.trim() : "";
-    if (message.status && !visibleReasoning && !message.content.trim() && !(message.toolCalls?.length)) {
-        const status = createText(ctx, assistantStatusLabel(message), {
-            fg: theme.messageThinkingText,
-        });
-        refs.statusText = status;
-        children.push(createBox(ctx, {
-            paddingLeft: 3,
-            marginTop: 1,
-            flexShrink: 0,
-        }, [status]));
-    }
-    if (visibleReasoning) {
-        const reasoningChildren = [];
-        const toggleText = createText(ctx, thinkingToggleLabel(thinkingExpanded, message.streaming === true), {
-            fg: theme.messageThinkingText,
-            wrapMode: "none",
-        });
-        refs.reasoningToggleText = toggleText;
-        refs.reasoningExpanded = thinkingExpanded;
-        refs.reasoningStreaming = message.streaming === true;
-        reasoningChildren.push(createBox(ctx, {
-            flexShrink: 0,
-            onMouseUp: () => onToggleThinking?.(key),
-        }, [toggleText]));
-        if (thinkingExpanded) {
-            const markdown = createMarkdown(ctx, formatThinkingMarkdown(visibleReasoning), subtleSyntaxStyle, {
-                streaming: message.streaming === true,
-                fg: theme.messageThinkingText,
-            });
-            refs.reasoningMarkdown = markdown;
-            reasoningChildren.push(markdown);
-        }
-        children.push(createBox(ctx, {
-            paddingLeft: 2,
-            marginTop: 1,
-            border: ["left"],
-            borderColor: theme.messageThinkingBorder,
-            flexDirection: "column",
-            flexShrink: 0,
-        }, reasoningChildren));
-    }
-    for (const tool of message.toolCalls ?? [])
-        children.push(createToolRenderable(ctx, tool, syntaxStyle, width));
-    if (message.content.trim()) {
-        const markdown = createMarkdown(ctx, message.content.trim(), syntaxStyle, {
-            streaming: message.streaming === true,
-            fg: theme.messageAssistantText,
-        });
-        refs.contentMarkdown = markdown;
-        children.push(createBox(ctx, {
-            paddingLeft: 3,
-            marginTop: 1,
-            flexDirection: "column",
+    const content = message.content.trim();
+    const tools = message.toolCalls ?? [];
+    const showStatus = !!message.status && !visibleReasoning && !content && tools.length === 0;
+    const status = createText(ctx, assistantStatusLabel(message), {
+        fg: theme.messageThinkingText,
+    });
+    refs.statusText = status;
+    const statusBox = createBox(ctx, {
+        paddingLeft: 3,
+        marginTop: 1,
+        flexShrink: 0,
+        visible: showStatus,
+    }, [status]);
+    refs.statusBox = statusBox;
+    children.push(statusBox);
+    const labelText = createText(ctx, thinkingLabelContent(message.streaming === true, reasoningElapsedMs(message)), {
+        fg: theme.messageThinkingText,
+        wrapMode: "none",
+    });
+    refs.reasoningToggleText = labelText;
+    const streamingReasoning = message.streaming === true;
+    refs.reasoningStreaming = streamingReasoning;
+    // While the model is still streaming we render reasoning as plain text — a
+    // single TextRenderable.content update is cheap, whereas re-parsing markdown
+    // (treesitter + cache clear) per token grows to O(N²) and freezes the TUI.
+    // The markdown variant is parsed once at turn_end and only then becomes
+    // visible.
+    const plainText = createText(ctx, formatThinkingMarkdown(visibleReasoning ?? ""), {
+        fg: theme.messageThinkingContentText,
+        wrapMode: "word",
+        visible: streamingReasoning && !!visibleReasoning,
+    });
+    refs.reasoningPlainText = plainText;
+    const markdown = createMarkdown(ctx, streamingReasoning ? "" : formatThinkingMarkdown(visibleReasoning ?? ""), subtleSyntaxStyle, {
+        streaming: false,
+        fg: theme.messageThinkingContentText,
+    });
+    markdown.visible = !streamingReasoning && !!visibleReasoning;
+    refs.reasoningMarkdown = markdown;
+    const reasoningBox = createBox(ctx, {
+        paddingLeft: 2,
+        marginTop: 1,
+        border: ["left"],
+        borderColor: theme.messageThinkingBorder,
+        flexDirection: "column",
+        flexShrink: 0,
+        visible: !!visibleReasoning,
+    }, [
+        createBox(ctx, {
             flexShrink: 0,
-        }, [markdown]));
-    }
-    if (!children.length)
-        return null;
-    return {
+        }, [labelText]),
+        plainText,
+        markdown,
+    ]);
+    refs.reasoningBox = reasoningBox;
+    children.push(reasoningBox);
+    const toolsBox = createBox(ctx, {
+        flexDirection: "column",
+        flexShrink: 0,
+        visible: tools.length > 0,
+    });
+    refs.toolsBox = toolsBox;
+    refs.toolEntries = new Map();
+    children.push(toolsBox);
+    const showAnswerDivider = tools.length > 0 && !!content;
+    const answerDividerText = createText(ctx, showAnswerDivider ? answerDividerStyledText() : new StyledText([fg(theme.textMuted)("")]), { wrapMode: "none" });
+    refs.answerDividerText = answerDividerText;
+    const answerDividerBox = createBox(ctx, {
+        paddingLeft: 3,
+        marginTop: 1,
+        flexShrink: 0,
+        visible: showAnswerDivider,
+    }, [answerDividerText]);
+    refs.answerDividerBox = answerDividerBox;
+    children.push(answerDividerBox);
+    const contentMarkdown = createMarkdown(ctx, content, syntaxStyle, {
+        streaming: message.streaming === true,
+        fg: theme.messageAssistantText,
+    });
+    refs.contentMarkdown = contentMarkdown;
+    const contentBox = createBox(ctx, {
+        paddingLeft: 3,
+        marginTop: 1,
+        flexDirection: "column",
+        flexShrink: 0,
+        visible: !!content,
+    }, [contentMarkdown]);
+    refs.contentBox = contentBox;
+    children.push(contentBox);
+    const cursorActive = message.streaming === true && !!content;
+    const contentCursorText = createText(ctx, "▌", { fg: theme.primary, wrapMode: "none" });
+    refs.contentCursorText = contentCursorText;
+    const contentCursorBox = createBox(ctx, {
+        paddingLeft: 3,
+        flexShrink: 0,
+        visible: cursorActive,
+    }, [contentCursorText]);
+    refs.contentCursorBox = contentCursorBox;
+    children.push(contentCursorBox);
+    const summaryString = formatTurnSummary(message);
+    const turnSummaryText = createText(ctx, summaryString ?? "", { fg: theme.textMuted, wrapMode: "none" });
+    refs.turnSummaryText = turnSummaryText;
+    const turnSummaryBox = createBox(ctx, {
+        paddingLeft: 3,
+        marginTop: 1,
+        flexShrink: 0,
+        visible: !!summaryString,
+    }, [turnSummaryText]);
+    refs.turnSummaryBox = turnSummaryBox;
+    children.push(turnSummaryBox);
+    const entry = {
         key,
         signature,
         node: createBox(ctx, { flexDirection: "column", flexShrink: 0 }, children),
         refs,
     };
+    updateAssistantToolEntries(entry, tools, {
+        syntaxStyle,
+        expandedWrites,
+        width,
+        onToggleWrite,
+    });
+    return entry;
+}
+function answerDividerStyledText() {
+    return new StyledText([
+        fg(theme.accent)("◆ "),
+        fg(theme.textMuted)(italic("Answer")),
+    ]);
 }
 function createCompactionCardEntry(ctx, message, key, signature, expanded, onToggle) {
     const refs = {};
@@ -5389,7 +5856,7 @@ function createTodoWriteRenderable(ctx, tool) {
             flexDirection: "column",
             flexShrink: 0,
         }, [
-            createText(ctx, `~ → Planning tasks...`, { fg: toolColor(tool) }),
+            createText(ctx, `→ Planning tasks...`, { fg: toolColor(tool) }),
         ]);
     }
     return createBox(ctx, {
@@ -5416,90 +5883,26 @@ function createTodoWriteRenderable(ctx, tool) {
         }),
     ]);
 }
-function createToolRenderable(ctx, tool, syntaxStyle, width = 80) {
+function createToolRenderable(ctx, tool, syntaxStyle, width = 80, writeExpanded = false, onToggleWrite) {
     if (tool.name === "question") {
         return createQuestionToolRenderable(ctx, tool);
     }
     if (tool.name === "todo_write") {
         return createTodoWriteRenderable(ctx, tool);
     }
-    const icon = tool.name === "bash" ? "$" : tool.name === "edit" || tool.name === "write" ? "✎" : "●";
-    const color = toolColor(tool);
-    const header = toolHeader(tool);
-    const diff = extractToolDiff(tool);
-    if (diff && !tool.isError && tool.name === "edit") {
-        return createBox(ctx, {
-            paddingLeft: 3,
-            marginTop: 1,
-            flexDirection: "column",
-            flexShrink: 0,
-        }, [
-            createText(ctx, new StyledText([
-                fg(color)(`${icon} ${displayToolName(tool.name)}`),
-                fg(theme.toolText)(header ? ` ${header}` : ""),
-            ])),
-            createBox(ctx, {
-                paddingLeft: 1,
-                marginTop: 1,
-                border: ["left"],
-                borderColor: theme.borderSubtle,
-                flexDirection: "column",
-                flexShrink: 0,
-            }, [createDiffRenderable(ctx, diff, toolPath(tool), syntaxStyle, width)]),
-        ]);
-    }
-    if (!tool.isError && tool.name === "write" && typeof tool.args?.content === "string" && isToolFinished(tool)) {
-        return createBox(ctx, {
-            paddingLeft: 3,
-            marginTop: 1,
-            flexDirection: "column",
-            flexShrink: 0,
-        }, [
-            createText(ctx, new StyledText([
-                fg(color)(`${icon} ${displayToolName(tool.name)}`),
-                fg(theme.toolText)(header ? ` ${header}` : ""),
-            ])),
-            createBox(ctx, {
-                paddingLeft: 1,
-                marginTop: 1,
-                border: ["left"],
-                borderColor: theme.borderSubtle,
-                flexDirection: "column",
-                flexShrink: 0,
-            }, [createCodeBlockRenderable(ctx, tool.args.content, toolPath(tool), syntaxStyle)]),
-        ]);
-    }
-    const chunks = [
-        fg(color)(`${isToolFinished(tool) ? "" : "~ "}${icon} ${displayToolName(tool.name)}`),
-    ];
-    if (header)
-        chunks.push(fg(theme.toolText)(` ${header}`));
-    if (tool.result) {
-        chunks.push(fg(theme.text)("\n"));
-        chunks.push(fg(theme.borderSubtle)("  "));
-        chunks.push(fg(tool.isError ? theme.toolError : theme.textMuted)(summarizeToolResult(tool)));
-        const preview = toolPreview(tool);
-        if (preview) {
-            for (const line of preview.lines) {
-                chunks.push(fg(theme.text)("\n"));
-                chunks.push(fg(theme.borderSubtle)("  "));
-                chunks.push(fg(theme.toolText)(line));
-            }
-            if (preview.omitted > 0) {
-                chunks.push(fg(theme.text)("\n"));
-                chunks.push(fg(theme.borderSubtle)("  "));
-                chunks.push(fg(theme.textMuted)(`+ ${preview.omitted} more`));
-            }
-        }
+    const renderer = findToolRenderer(tool);
+    if (renderer) {
+        return renderer.render({
+            ctx,
+            tool,
+            syntaxStyle,
+            width,
+            writeExpanded,
+            onToggleWrite,
+            helpers: createToolRenderHelpers(),
+        });
     }
-    return createBox(ctx, {
-        paddingLeft: 3,
-        marginTop: 1,
-        flexDirection: "column",
-        flexShrink: 0,
-    }, [
-        createText(ctx, new StyledText(chunks), { wrapMode: "word" }),
-    ]);
+    throw new Error(`No renderer for tool '${tool.name}'`);
 }
 function createQuestionToolRenderable(ctx, tool) {
     const questions = questionToolQuestions(tool);
@@ -5512,7 +5915,7 @@ function createQuestionToolRenderable(ctx, tool) {
             flexDirection: "column",
             flexShrink: 0,
         }, [
-            createText(ctx, `${isToolFinished(tool) ? "" : "~ "}→ ${rejected ? "Asked" : "Asking"} questions...`, {
+            createText(ctx, `→ ${rejected ? "Asked" : "Asking"} questions...`, {
                 fg: rejected ? theme.textMuted : toolColor(tool),
                 attributes: rejected ? TextAttributes.STRIKETHROUGH : undefined,
             }),
@@ -5558,16 +5961,27 @@ function renderTool(tool, syntaxStyle, width = 80) {
     if (tool.name === "question") {
         return renderQuestionTool(tool);
     }
-    const icon = tool.name === "bash" ? "$" : tool.name === "edit" || tool.name === "write" ? "✎" : "●";
+    const icon = toolStateIcon(tool);
     const color = toolColor(tool);
     const diff = extractToolDiff(tool);
     if (diff && !tool.isError && tool.name === "edit") {
         return h("box", { paddingLeft: 3, marginTop: 1, flexDirection: "column", flexShrink: 0 }, h("text", { fg: color }, `${icon} ${displayToolName(tool.name)}${toolHeader(tool) ? ` ${toolHeader(tool)}` : ""}`), h("box", { paddingLeft: 1, marginTop: 1, border: ["left"], borderColor: theme.borderSubtle, flexDirection: "column", flexShrink: 0 }, renderDiffContent(diff, toolPath(tool), syntaxStyle, width)));
     }
-    if (!tool.isError && tool.name === "write" && typeof tool.args?.content === "string" && isToolFinished(tool)) {
-        return h("box", { paddingLeft: 3, marginTop: 1, flexDirection: "column", flexShrink: 0 }, h("text", { fg: color }, `${icon} ${displayToolName(tool.name)}${toolHeader(tool) ? ` ${toolHeader(tool)}` : ""}`), h("box", { paddingLeft: 1, marginTop: 1, border: ["left"], borderColor: theme.borderSubtle, flexDirection: "column", flexShrink: 0 }, renderCodeBlockContent(tool.args.content, toolPath(tool), syntaxStyle)));
-    }
-    return h("box", { paddingLeft: 3, marginTop: 1, flexDirection: "column", flexShrink: 0 }, h("text", { fg: color }, `${isToolFinished(tool) ? "" : "~ "}${icon} ${displayToolName(tool.name)}${toolHeader(tool) ? ` ${toolHeader(tool)}` : ""}`), () => tool.result ? h("text", { fg: tool.isError ? theme.toolError : theme.textMuted, wrapMode: "word" }, toolSummaryWithPreview(tool)) : null);
+    if (isWritePreviewTool(tool)) {
+        const hasContent = typeof tool.args.content === "string";
+        const contentStr = hasContent ? String(tool.args.content) : "";
+        const preview = hasContent ? formatWritePreview(contentStr, false) : null;
+        const lineCount = hasContent
+            ? contentStr.split(/\r?\n/).length
+            : (tool.streamingNewlineCount ?? 0) + 1;
+        const summary = tool.result ?? `${isToolFinished(tool) ? "Prepared" : "Writing"} ${lineCount} lines to ${toolPath(tool) ?? "file"}`;
+        return h("box", { paddingLeft: 3, marginTop: 1, flexDirection: "column", flexShrink: 0 }, h("text", { fg: color }, `${icon} ${displayToolName(tool.name)}${toolHeader(tool) ? ` ${toolHeader(tool)}` : ""}`), h("box", { paddingLeft: 1, marginTop: 0, border: ["left"], borderColor: theme.borderSubtle, flexDirection: "column", flexShrink: 0 }, h("text", { fg: theme.textMuted }, `└ ${summary}`), preview ? renderCodeBlockContent(preview.content, toolPath(tool), syntaxStyle) : null, preview && preview.omittedLines > 0
+            ? h("text", { fg: theme.textMuted }, `... +${preview.omittedLines} lines (ctrl+o to expand)`)
+            : preview && preview.omittedChars > 0
+                ? h("text", { fg: theme.textMuted }, `... +${preview.omittedChars} chars (ctrl+o to expand)`)
+                : null));
+    }
+    return h("box", { paddingLeft: 3, marginTop: 1, flexDirection: "column", flexShrink: 0 }, h("text", { fg: color }, `${icon} ${displayToolName(tool.name)}${toolHeader(tool) ? ` ${toolHeader(tool)}` : ""}`), () => tool.result ? h("text", { fg: tool.isError ? theme.toolError : theme.textMuted, wrapMode: "word" }, toolSummaryWithPreview(tool)) : null);
 }
 function renderQuestionTool(tool) {
     const questions = questionToolQuestions(tool);
@@ -5577,7 +5991,7 @@ function renderQuestionTool(tool) {
         return h("box", { paddingLeft: 3, marginTop: 1, flexDirection: "column", flexShrink: 0 }, h("text", {
             fg: rejected ? theme.textMuted : toolColor(tool),
             attributes: rejected ? TextAttributes.STRIKETHROUGH : undefined,
-        }, `${isToolFinished(tool) ? "" : "~ "}→ ${rejected ? "Asked" : "Asking"} questions...`));
+        }, `→ ${rejected ? "Asked" : "Asking"} questions...`));
     }
     return h("box", {
         border: ["left"],
@@ -5842,11 +6256,9 @@ function formatDisplayContentParts(content, labelStart) {
 function reconstructDisplayMessages(agentMessages) {
     const result = [];
     for (const message of agentMessages) {
-        if (message.role === "system" || message.role === "tool")
+        if (message.role === "system" || message.role === "meta" || message.role === "tool")
             continue;
         if (message.role === "user") {
-            if (message.isMeta)
-                continue;
             result.push({
                 role: "user",
                 content: typeof message.content === "string"
@@ -5935,7 +6347,9 @@ function formatTranscript(messages, options) {
         if (visibleReasoning) {
             appendBlank();
             append("│  ", theme.messageThinkingBorder);
-            appendLine(truncate(formatThinkingMarkdown(visibleReasoning), 500), theme.messageThinkingText);
+            chunks.push(fg(theme.messageThinkingText)(italic("Thinking\n")));
+            append("│  ", theme.messageThinkingBorder);
+            appendLine(truncate(formatThinkingMarkdown(visibleReasoning), 500), theme.messageThinkingContentText);
         }
         if (message.status && !visibleReasoning && !message.content.trim() && !(message.toolCalls?.length)) {
             appendBlank();
@@ -5946,7 +6360,7 @@ function formatTranscript(messages, options) {
             appendBlank();
             const icon = tool.name === "bash" ? "$" : tool.name === "edit" || tool.name === "write" ? "✎" : "●";
             const color = toolColor(tool);
-            append(`   ${isToolFinished(tool) ? "" : "~ "}${icon} `, color);
+            append(`   ${icon} `, color);
             append(displayToolName(tool.name), color);
             const header = toolHeader(tool);
             if (header)
@@ -5996,7 +6410,7 @@ function renderHomeState(input) {
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
-    }, h("box", { flexDirection: "column", flexShrink: 0, width: "100%" }, h("text", { fg: theme.text }, ""), h("text", { fg: theme.text }, ""), ...HOME_LOGO.map((line) => h("text", { fg: theme.primary }, centerLine(line, width))), h("text", { fg: theme.text }, ""), h("text", { fg: theme.warning }, centerLine(`● Tip  ${input.tip}`, width)), cwd ? h("text", { fg: theme.textMuted }, centerLine(`  ${cwd}`, width)) : null));
+    }, h("box", { flexDirection: "column", flexShrink: 0, width: "100%" }, h("text", { fg: theme.text }, ""), h("text", { fg: theme.text }, ""), ...HOME_LOGO.map((line) => h("text", { fg: homeLogoColor(line.tone) }, centerLine(line.text || " ", width))), h("text", { fg: theme.text }, ""), h("text", { fg: theme.warning }, centerLine(`● Tip  ${input.tip}`, width)), cwd ? h("text", { fg: theme.textMuted }, centerLine(`  ${cwd}`, width)) : null));
 }
 function hasRenderableMessage(message, showThinking = true) {
     if (message.role === "error")
@@ -6172,6 +6586,11 @@ function displayToolName(name) {
         glob: "Glob",
         web_fetch: "WebFetch",
         web_search: "WebSearch",
+        subagent: "Subagent",
+        spawn_agent: "SpawnAgent",
+        wait_agent: "WaitAgent",
+        send_input: "SendInput",
+        close_agent: "CloseAgent",
         task: "Task",
         todo: "Todo",
         question: "Questions",
@@ -6180,6 +6599,20 @@ function displayToolName(name) {
 }
 function toolHeader(tool) {
     const args = tool.args || {};
+    if (tool.name === "subagent") {
+        if (typeof args.agent === "string")
+            return `(${args.agent})`;
+        if (Array.isArray(args.tasks))
+            return `(${args.tasks.length} tasks)`;
+    }
+    if (tool.name === "spawn_agent") {
+        const agent = args.agent_type ?? args.agent ?? "default";
+        return `(${agent})`;
+    }
+    if (tool.name === "wait_agent" || tool.name === "send_input" || tool.name === "close_agent") {
+        const agentId = args.agent_id ?? (Array.isArray(args.agent_ids) ? `${args.agent_ids.length} agents` : undefined);
+        return agentId ? `(${truncate(String(agentId), 64)})` : "";
+    }
     const value = args.path ?? args.command ?? args.pattern ?? args.url ?? args.query;
     return value ? `(${truncate(String(value).replace(/\n/g, " "), 64)})` : "";
 }
@@ -6225,8 +6658,11 @@ function filetype(filePath) {
     return ext ? map[ext] : undefined;
 }
 function summarizeToolResult(tool) {
-    if (!isToolFinished(tool))
-        return tool.status === "running" ? "running" : "pending";
+    if (!isToolFinished(tool)) {
+        if (tool.status === "running")
+            return "running";
+        return tool.streamingArgs ? "preparing" : "pending";
+    }
     if (tool.name === "question") {
         if (isQuestionRejected(tool))
             return "dismissed";
@@ -6237,14 +6673,47 @@ function summarizeToolResult(tool) {
     if (tool.isError)
         return truncate(result.split("\n").find(Boolean) || "error", 120);
     const lines = result.replace(/\r\n/g, "\n").split("\n").filter((line) => line.trim()).length;
+    const matches = typeof tool.metadata?.matches === "number" ? tool.metadata.matches : undefined;
+    if (tool.name === "read")
+        return "";
     if (tool.name === "edit")
         return "patched file";
     if (tool.name === "write")
         return "wrote file";
-    if (tool.name === "bash")
+    if (tool.name === "grep" || tool.name === "glob") {
+        if (matches !== undefined)
+            return `${matches} match${matches === 1 ? "" : "es"}`;
+        return lines ? `${lines} line${lines === 1 ? "" : "s"}` : "no matches";
+    }
+    if (tool.name === "bash") {
+        if (matches !== undefined)
+            return `${matches} match${matches === 1 ? "" : "es"}`;
         return lines ? `${lines} line${lines === 1 ? "" : "s"} output` : "done";
+    }
     return lines ? `${lines} line${lines === 1 ? "" : "s"}` : "done";
 }
+function toolStateIcon(tool) {
+    if (tool.isError || tool.status === "error")
+        return "✗";
+    if (!isToolFinished(tool)) {
+        if (tool.status === "running")
+            return "◐";
+        return "◌";
+    }
+    if (tool.name === "bash")
+        return "$";
+    if (tool.name === "edit")
+        return "✎";
+    if (tool.name === "write")
+        return "✎";
+    if (tool.name === "read")
+        return "▤";
+    if (tool.name === "grep" || tool.name === "glob")
+        return "⌕";
+    if (tool.name === "web_fetch" || tool.name === "web_search")
+        return "⌖";
+    return "●";
+}
 function toolSummaryWithPreview(tool) {
     const summary = `  ${summarizeToolResult(tool)}`;
     const preview = toolPreview(tool);
@@ -6259,7 +6728,7 @@ function toolSummaryWithPreview(tool) {
 function toolPreview(tool) {
     if (!isToolFinished(tool) || tool.isError || !tool.result)
         return undefined;
-    if (tool.name !== "read" && tool.name !== "glob")
+    if (tool.name !== "glob")
         return undefined;
     const lines = tool.result
         .replace(/\r\n/g, "\n")
@@ -6315,7 +6784,10 @@ function isToolFinished(tool) {
 function assistantStatusLabel(message) {
     if (message.status === "responding")
         return "Responding...";
-    return message.streaming ? "Thinking..." : "Thinking";
+    const elapsed = formatDuration(reasoningElapsedMs(message));
+    if (message.streaming)
+        return elapsed ? `Thinking ${elapsed}...` : "Thinking...";
+    return elapsed ? `Thought for ${elapsed}` : "Thinking";
 }
 function buildContextGauge(percent, barWidth) {
     const clamped = Math.max(0, Math.min(100, percent));
@@ -6346,9 +6818,74 @@ function formatContextRemaining(value) {
         return `${(value / 1_000).toFixed(1)}K`;
     return String(value);
 }
-function thinkingToggleLabel(expanded, streaming = false, spinnerFrame = "") {
-    const arrow = expanded ? "▼" : "▶";
-    return streaming && spinnerFrame ? `${spinnerFrame} ${arrow} Thinking` : `${arrow} Thinking`;
+function thinkingLabelContent(streaming = false, elapsedMs) {
+    const elapsed = formatDuration(elapsedMs);
+    const label = streaming
+        ? (elapsed ? `Thinking ${elapsed}...` : "Thinking...")
+        : (elapsed ? `Thought for ${elapsed}` : "Thought");
+    return new StyledText([
+        fg(theme.messageThinkingText)(italic(label)),
+    ]);
+}
+function formatDuration(ms) {
+    if (ms === undefined || !Number.isFinite(ms) || ms <= 0)
+        return "";
+    if (ms < 1000)
+        return `${Math.max(1, Math.round(ms))}ms`;
+    const seconds = ms / 1000;
+    if (seconds < 10)
+        return `${seconds.toFixed(1)}s`;
+    if (seconds < 60)
+        return `${Math.round(seconds)}s`;
+    let minutes = Math.floor(seconds / 60);
+    let remSec = Math.round(seconds - minutes * 60);
+    // Math.round can lift remSec to exactly 60 (e.g. 239.6s → 3m60s). Carry into minutes.
+    if (remSec >= 60) {
+        minutes += Math.floor(remSec / 60);
+        remSec = remSec % 60;
+    }
+    return remSec === 0 ? `${minutes}m` : `${minutes}m${remSec}s`;
+}
+function reasoningElapsedMs(message) {
+    if (message.turnStartedAt === undefined)
+        return undefined;
+    const end = !message.streaming ? (message.turnCompletedAt ?? Date.now()) : Date.now();
+    const diff = end - message.turnStartedAt;
+    return diff > 0 ? diff : undefined;
+}
+function toolElapsedMs(tool) {
+    if (tool.startedAt === undefined)
+        return undefined;
+    const end = tool.completedAt ?? (tool.status === "completed" || tool.status === "error" ? Date.now() : undefined);
+    if (end === undefined)
+        return undefined;
+    const diff = end - tool.startedAt;
+    return diff > 0 ? diff : undefined;
+}
+function turnElapsedMs(message) {
+    if (message.turnStartedAt === undefined)
+        return undefined;
+    const end = message.turnCompletedAt ?? Date.now();
+    const diff = end - message.turnStartedAt;
+    return diff > 0 ? diff : undefined;
+}
+function formatTurnSummary(message) {
+    const parts = [];
+    const elapsed = turnElapsedMs(message);
+    if (elapsed !== undefined)
+        parts.push(formatDuration(elapsed));
+    const usage = message.turnUsage;
+    if (usage) {
+        if (usage.promptTokens)
+            parts.push(`${formatCompactNumber(usage.promptTokens)}↑`);
+        if (usage.completionTokens)
+            parts.push(`${formatCompactNumber(usage.completionTokens)}↓`);
+        if (usage.reasoningTokens)
+            parts.push(`${formatCompactNumber(usage.reasoningTokens)}◇`);
+    }
+    if (!parts.length)
+        return undefined;
+    return `· ${parts.join(" · ")}`;
 }
 function truncate(value, max) {
     return value.length > max ? value.slice(0, Math.max(1, max - 1)).trimEnd() + "…" : value;