@bubblebrain-ai/bubble 0.0.3 → 0.0.5

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,11 @@ 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 { getNextPermissionMode, PERMISSION_MODE_INFO } from "../permission/mode.js";
 import { getContextBudget } from "../context/budget.js";
 import { getLspService } from "../lsp/index.js";
@@ -20,6 +25,7 @@ import { inferBashPrefix } from "../approval/session-cache.js";
 import { createFrames } from "./opencode-spinner.js";
 import { copyTextToClipboard } from "./clipboard.js";
 import { readGitSidebarState } from "./sidebar-state.js";
+import { buildImageContentPartsFromLabels, imageAttachmentLabelPattern, resolveComposerImagePaths, resolveImageInput, } from "./image-paste.js";
 import { isModeCycleKeyEvent, isModeCycleSequence, isModifiedEnterSequence, PROMPT_TEXTAREA_KEYBINDINGS, } from "./prompt-keybindings.js";
 import { keyNameFromEvent, keyNameFromSequence } from "./global-key-router.js";
 const treeSitterClient = getTreeSitterClient();
@@ -54,6 +60,7 @@ const DEFAULT_THEME = {
     messageAssistantText: "#eeeeee",
     messageAssistantAccent: "#fab283",
     messageThinkingText: "#8b949e",
+    messageThinkingContentText: "#6e7681",
     messageThinkingBorder: "#282828",
     toolText: "#a6acb8",
     toolPending: "#fab283",
@@ -102,10 +109,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",
@@ -263,6 +291,10 @@ function OpenTuiApp(props) {
         .filter((message) => message.role === "user" && message.content !== "(multimedia)")
         .map((message) => message.content)
         .slice(-PROMPT_HISTORY_LIMIT);
+    let nextImageAttachmentIndex = nextImageLabelIndex(displayMessages);
+    const pendingImageAttachments = new Map();
+    let composerImageResolutionSeq = 0;
+    let applyingComposerImageReplacement = false;
     let promptHistoryIndex;
     let promptHistoryDraft = "";
     const [isRunning, setIsRunning] = createSignal(false);
@@ -313,20 +345,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;
@@ -1519,7 +1547,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)
@@ -1663,6 +1690,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))
@@ -1683,12 +1720,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();
             },
@@ -1703,52 +1740,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();
@@ -2728,6 +2774,9 @@ function OpenTuiApp(props) {
     function onPromptContentChange(value) {
         const nextValue = typeof value === "string" ? value : readPromptText();
         promptText = nextValue;
+        if (!applyingComposerImageReplacement) {
+            void applyComposerImagePathReplacement(nextValue);
+        }
         if (promptHistoryIndex !== undefined
             && nextValue !== (promptHistory[promptHistoryIndex] ?? "")) {
             resetPromptHistoryBrowse();
@@ -2995,8 +3044,62 @@ function OpenTuiApp(props) {
         setPromptText(`/${skillName} `);
         redrawDock();
     }
+    async function applyComposerImagePathReplacement(snapshot) {
+        const seq = ++composerImageResolutionSeq;
+        const result = await resolveComposerImagePaths(snapshot, { labelStart: nextImageAttachmentIndex });
+        if (seq !== composerImageResolutionSeq)
+            return;
+        if (result.attachments.length === 0)
+            return;
+        if ((readPromptText() || promptText) !== snapshot)
+            return;
+        for (const attachment of result.attachments) {
+            pendingImageAttachments.set(attachment.label, attachment);
+        }
+        nextImageAttachmentIndex = Math.max(nextImageAttachmentIndex, result.nextLabelIndex);
+        applyingComposerImageReplacement = true;
+        try {
+            setPromptText(result.text);
+        }
+        finally {
+            applyingComposerImageReplacement = false;
+        }
+    }
+    async function expandTextParts(parts) {
+        const expandedParts = [];
+        for (const part of parts) {
+            if (part.type !== "text") {
+                expandedParts.push(part);
+                continue;
+            }
+            const expansion = await expandAtMentions(part.text, props.args.cwd);
+            if (expansion.missing.length)
+                addMessage("error", `Could not resolve @mention: ${expansion.missing.join(", ")}`);
+            for (const skipped of expansion.skipped)
+                addMessage("error", `Skipped @${skipped.path}: ${skipped.reason}`);
+            expandedParts.push({ type: "text", text: expansion.text });
+        }
+        return expandedParts;
+    }
     async function handleInput(input) {
         setNotice("");
+        const labeledInput = buildImageContentPartsFromLabels(input, pendingImageAttachments);
+        if (labeledInput.actualInput) {
+            await runAgentInput(await expandTextParts(labeledInput.actualInput), labeledInput.displayInput);
+            for (const label of labeledInput.usedLabels)
+                pendingImageAttachments.delete(label);
+            return;
+        }
+        const imageInput = await resolveImageInput(input, { labelStart: nextImageAttachmentIndex });
+        for (const error of imageInput.errors)
+            addMessage("error", `Skipped image: ${error}`);
+        if (imageInput.attachments.length > 0) {
+            await runAgentInput(await expandTextParts(imageInput.actualInput), imageInput.displayInput);
+            nextImageAttachmentIndex += imageInput.attachments.length;
+            return;
+        }
+        if (imageInput.imagePathCount > 0)
+            return;
         if (input.startsWith("/")) {
             const skillInvocation = parseSkillInvocation(input, skills);
             if (skillInvocation) {
@@ -3016,12 +3119,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();
@@ -3071,7 +3169,9 @@ function OpenTuiApp(props) {
                 const isCompactResult = result.startsWith("✓ Compaction complete");
                 if (isCompactResult) {
                     setNotice(result);
-                    redrawTranscript();
+                    displayMessages = reconstructDisplayMessages(props.agent.messages);
+                    streamingDisplay = undefined;
+                    redrawTranscript(undefined, displayMessages);
                     setTimeout(() => setNotice(""), 4000);
                 }
                 else {
@@ -3461,6 +3561,8 @@ function OpenTuiApp(props) {
         let assistantContent = "";
         let assistantReasoning = "";
         const toolCalls = [];
+        let currentTurnHasToolCall = false;
+        let turnStartedAt;
         let runError;
         let runCancelled = false;
         try {
@@ -3469,46 +3571,72 @@ function OpenTuiApp(props) {
                     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;
+                }
+                else if (event.type === "reasoning_delta") {
+                    assistantReasoning += event.content;
                     redrawTranscript({
                         role: "assistant",
-                        content: assistantContent,
+                        content: "",
                         reasoning: assistantReasoning || undefined,
                         toolCalls: toolCalls.length ? [...toolCalls] : undefined,
-                        status: "responding",
+                        status: "thinking",
                         streaming: true,
+                        turnStartedAt,
                     });
                 }
-                else if (event.type === "reasoning_delta") {
-                    assistantReasoning += event.content;
+                else if (event.type === "tool_call_start") {
+                    currentTurnHasToolCall = true;
                     redrawTranscript({
                         role: "assistant",
-                        content: assistantContent,
+                        content: "",
                         reasoning: assistantReasoning || undefined,
                         toolCalls: toolCalls.length ? [...toolCalls] : undefined,
-                        status: "thinking",
+                        status: toolCalls.length ? undefined : "thinking",
                         streaming: true,
+                        turnStartedAt,
                     });
                 }
+                else if (event.type === "tool_call_delta") {
+                    currentTurnHasToolCall = true;
+                }
+                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;
+                    const now = Date.now();
+                    const existing = toolCalls.find((item) => item.id === event.id);
+                    if (existing) {
+                        existing.args = event.args;
+                        existing.streamingArgs = false;
+                        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") {
@@ -3518,12 +3646,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") {
@@ -3532,6 +3662,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);
@@ -3558,9 +3712,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]
@@ -3570,6 +3727,7 @@ function OpenTuiApp(props) {
                     assistantContent = "";
                     assistantReasoning = "";
                     toolCalls.length = 0;
+                    turnStartedAt = undefined;
                     streamingDisplay = undefined;
                 }
             }
@@ -3672,7 +3830,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) => {
@@ -4417,7 +4575,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);
@@ -4756,19 +4913,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);
@@ -4847,12 +5016,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;
         }
@@ -4860,7 +5040,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);
@@ -4903,34 +5083,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 || " ";
@@ -4954,21 +5123,150 @@ 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;
     }
     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.reasoningToggleText.content = visibleReasoning
+            ? thinkingLabelContent(message.streaming === true, reasoningElapsedMs(message))
+            : new StyledText([fg(theme.messageThinkingText)("")]);
     }
     if (entry.refs.reasoningMarkdown) {
-        entry.refs.reasoningMarkdown.content = showThinking ? formatThinkingMarkdown(message.reasoning?.trim() ?? "") : "";
-        entry.refs.reasoningMarkdown.streaming = message.streaming === true;
+        syncMarkdownRenderable(entry.refs.reasoningMarkdown, formatThinkingMarkdown(visibleReasoning), message.streaming === true);
+    }
+    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 = []) {
@@ -4992,6 +5290,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,
@@ -5011,6 +5310,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,
@@ -5073,6 +5453,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,
@@ -5084,14 +5482,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 = {};
@@ -5136,7 +5534,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);
@@ -5144,70 +5542,121 @@ 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;
+    refs.reasoningStreaming = message.streaming === true;
+    const markdown = createMarkdown(ctx, formatThinkingMarkdown(visibleReasoning ?? ""), subtleSyntaxStyle, {
+        streaming: message.streaming === true,
+        fg: theme.messageThinkingContentText,
+    });
+    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]),
+        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 = {};
@@ -5325,7 +5774,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, {
@@ -5352,90 +5801,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);
@@ -5448,7 +5833,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,
             }),
@@ -5494,16 +5879,22 @@ 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)));
+    if (isWritePreviewTool(tool)) {
+        const preview = formatWritePreview(tool.args.content, false);
+        const summary = tool.result ?? `${isToolFinished(tool) ? "Prepared" : "Writing"} ${tool.args.content.split(/\r?\n/).length} 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}`), renderCodeBlockContent(preview.content, toolPath(tool), syntaxStyle), preview.omittedLines > 0
+            ? h("text", { fg: theme.textMuted }, `... +${preview.omittedLines} lines (ctrl+o to expand)`)
+            : 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 }, `${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);
+    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);
@@ -5513,7 +5904,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"],
@@ -5744,15 +6135,49 @@ function toSelectOption(item) {
         value: item.value,
     };
 }
+function nextImageLabelIndex(messages) {
+    let max = 0;
+    for (const message of messages) {
+        for (const match of message.content.matchAll(imageAttachmentLabelPattern())) {
+            max = Math.max(max, Number(match[1] ?? 0));
+        }
+    }
+    return max + 1;
+}
+function imageExtensionFromUrl(url) {
+    const mediaMatch = url.match(/^data:image\/([^;,]+)/i);
+    const media = mediaMatch?.[1]?.toLowerCase();
+    if (media === "jpeg")
+        return "jpg";
+    if (media === "png" || media === "webp" || media === "gif" || media === "bmp")
+        return media;
+    const pathMatch = url.match(/\.([a-z0-9]+)(?:[?#].*)?$/i);
+    return pathMatch?.[1]?.toLowerCase() || "png";
+}
+function formatDisplayContentParts(content, labelStart) {
+    const text = content
+        .filter((part) => part.type === "text")
+        .map((part) => part.text)
+        .join("\n")
+        .trim();
+    let imageIndex = labelStart;
+    const imageLines = content
+        .filter((part) => part.type === "image_url")
+        .map((part) => `[image#${imageIndex++}.${imageExtensionFromUrl(part.image_url.url)}]`);
+    return [text, ...imageLines].filter(Boolean).join("\n") || "(multimedia)";
+}
 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" ? message.content : "(multimedia)" });
+            result.push({
+                role: "user",
+                content: typeof message.content === "string"
+                    ? message.content
+                    : formatDisplayContentParts(message.content, nextImageLabelIndex(result)),
+            });
             continue;
         }
         const toolCalls = [];
@@ -5835,7 +6260,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();
@@ -5846,7 +6273,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)
@@ -5896,7 +6323,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")
@@ -6072,6 +6499,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",
@@ -6080,6 +6512,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)})` : "";
 }
@@ -6125,8 +6571,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";
@@ -6137,14 +6586,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);
@@ -6159,7 +6641,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")
@@ -6215,7 +6697,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));
@@ -6246,9 +6731,69 @@ 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`;
+    const minutes = Math.floor(seconds / 60);
+    const remSec = Math.round(seconds - minutes * 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;