@markusylisiurunen/tau 0.1.38 → 0.1.40

package/dist/app.js

@@ -20,22 +20,16 @@ import { ToolRegistry } from "./tools/registry.js";
 import { createTaskToolDefinition } from "./tools/task.js";
 import { createWriteToolDefinition } from "./tools/write.js";
 import { REASONING_LEVELS, } from "./types.js";
-import { AppIntroComponent } from "./ui/app_intro.js";
-import { AssistantMessageComponent } from "./ui/assistant_message.js";
-import { renderBashAborted, renderBashBlocked, renderBashExecution, renderBashRunning, } from "./ui/bash_execution.js";
+import { buildBashAbortedView, buildBashBlockedView, buildBashExecutionView, buildBashRunningView, } from "./ui/bash_execution.js";
 import { ChatContainerComponent } from "./ui/chat_container.js";
 import { CustomEditor } from "./ui/custom_editor.js";
-import { renderEditBlocked, renderEditSuccess, renderWriteBlocked, renderWriteSuccess, } from "./ui/file_execution.js";
+import { buildEditBlockedView, buildEditSuccessView, buildWriteBlockedView, buildWriteSuccessView, } from "./ui/file_execution.js";
 import { FooterComponent } from "./ui/footer.js";
 import { QueuedMessagesComponent } from "./ui/queued_messages.js";
-import { renderGrepBlocked, renderGrepFinished, renderGrepRunning, renderListBlocked, renderListSuccess, renderReadBlocked, renderReadSuccess, } from "./ui/restricted_execution.js";
-import { SessionDividerComponent } from "./ui/session_divider.js";
-import { SessionSummaryComponent } from "./ui/session_summary.js";
+import { buildGrepBlockedView, buildGrepFinishedView, buildGrepRunningView, buildListBlockedView, buildListSuccessView, buildReadBlockedView, buildReadSuccessView, } from "./ui/restricted_execution.js";
 import { getFileAutocompleteToken, SlashAutocompleteProvider } from "./ui/slash_autocomplete.js";
-import { SystemMessageComponent } from "./ui/system_message.js";
-import { renderTaskBlocked, renderTaskFinished, renderTaskRunning } from "./ui/task_execution.js";
+import { buildTaskBlockedView, buildTaskFinishedView, buildTaskRunningView, } from "./ui/task_execution.js";
 import { createUiTheme } from "./ui/theme.js";
-import { UserMessageComponent } from "./ui/user_message.js";
 import { buildBaseSystemPrompt, buildEnvironmentTag, buildProjectContextBlock, buildSkillsIndexBlock, findAgentsFilesFromCwdToHome, formatRiskLevelChangeNotice, } from "./utils/context.js";
 import { formatHistoryForCompression } from "./utils/fork.js";
 import { formatAdaptiveNumber, formatCwd, formatTokenWindow } from "./utils/format.js";
@@ -58,7 +52,6 @@ export class ChatApp {
     repoRoot;
     initialUserMessage;
     config;
-    assistantComponents = [];
     engine;
     runningBashComponents = new Map();
     runningTaskComponents = new Map();
@@ -142,11 +135,11 @@ export class ChatApp {
         });
         this.uiTheme = createUiTheme("ansi");
         this.ui = new TUI(createAppTerminal());
-        this.chatContainer = new ChatContainerComponent();
+        this.chatContainer = new ChatContainerComponent(this.uiTheme);
         this.chatContainer.setCompactToolUi(this.compactToolUi);
         this.footer = new FooterComponent(this.uiTheme, this.ui);
         this.queuedMessages = new QueuedMessagesComponent(this.uiTheme, this.queuedUserMessages);
-        this.editor = new CustomEditor(this.uiTheme.editorTheme);
+        this.editor = new CustomEditor(this.uiTheme);
         this.setupUI();
         this.setupEditor();
     }
@@ -156,7 +149,12 @@ export class ChatApp {
         this.ui.addChild(this.queuedMessages);
         this.ui.addChild(this.editor);
         this.ui.addChild(this.footer);
-        this.chatContainer.addMessage(new AppIntroComponent(this.uiTheme, "tau", APP_VERSION, buildHelpText(this.agentsFiles, this.skills)));
+        this.chatContainer.addMessage({
+            type: "app_intro",
+            appName: "tau",
+            version: APP_VERSION,
+            helpText: buildHelpText(this.agentsFiles, this.skills),
+        });
         this.ui.setFocus(this.editor);
         this.updateFooter();
         this.updateEditorBorderColor();
@@ -244,13 +242,11 @@ export class ChatApp {
         const cwd = formatCwd(process.cwd());
         const personaName = this.currentPersona.label || this.currentPersona.id;
         this.footer.setStatus({
-            cwd,
             contextUsage,
             sessionCost,
-            personaLabel: personaName,
-            reasoningLabel,
             riskLevel: this.riskLevel,
         });
+        this.updateEditorHeader(cwd, personaName, reasoningLabel);
         this.ui.requestRender();
     }
     updateEditorBorderColor() {
@@ -264,19 +260,30 @@ export class ChatApp {
         else {
             this.editor.borderColor = this.uiTheme.editorBorderForReasoning(this.currentPersona.settings.reasoning);
         }
+        this.updateEditorHeader();
         this.ui.requestRender();
     }
+    updateEditorHeader(cwd = formatCwd(process.cwd()), personaName = this.currentPersona.label || this.currentPersona.id, reasoningLabel = this.currentPersona.settings.reasoning ?? "none") {
+        if (this.isBashMode) {
+            this.editor.setHeader("bash", "", { leftStyle: this.editor.borderColor });
+            return;
+        }
+        if (this.isMemoryMode) {
+            this.editor.setHeader("memoize", "", { leftStyle: this.editor.borderColor });
+            return;
+        }
+        this.editor.setHeader(cwd, `${personaName} (${reasoningLabel})`);
+    }
     addSystemMessage(text, kind) {
-        this.chatContainer.addMessage(new SystemMessageComponent(this.uiTheme, text, kind));
+        this.chatContainer.addMessage({ type: "system", text, kind });
         this.ui.requestRender();
     }
     addUserMessage(text, opts) {
-        this.chatContainer.addMessage(new UserMessageComponent(this.uiTheme, text, opts));
-        this.ui.requestRender();
-    }
-    addAssistantComponent(component) {
-        this.chatContainer.addMessage(component);
-        this.assistantComponents.push(component);
+        this.chatContainer.addMessage({
+            type: "user",
+            text,
+            isMemoryMode: opts?.isMemoryMode,
+        });
         this.ui.requestRender();
     }
     // Context & Cost Tracking -----------------------------------------------------------------------
@@ -286,13 +293,13 @@ export class ChatApp {
             ? this.getContextWindowForLastTurn(last)
             : this.currentPersona.model.contextWindow;
         const { input, read, write, output } = this.getSessionTotals();
-        const stats = `i${formatTokenWindow(input)} r${formatTokenWindow(read)} w${formatTokenWindow(write)} o${formatTokenWindow(output)}`;
+        const stats = `↑${formatTokenWindow(input)} ↓${formatTokenWindow(output)} cache ${formatTokenWindow(read)}/${formatTokenWindow(write)}`;
         const promptTokensSent = last
             ? (last.usage?.input ?? 0) + (last.usage?.cacheRead ?? 0) + (last.usage?.cacheWrite ?? 0)
             : 0;
         const percent = windowTokens > 0 ? (promptTokensSent / windowTokens) * 100 : 0;
         const percentStr = `${formatAdaptiveNumber(percent, 1, 3)}%`;
-        return `${stats} ${percentStr}/${formatTokenWindow(windowTokens)}`;
+        return `${stats} · ${percentStr}/${formatTokenWindow(windowTokens)}`;
     }
     getSessionCostString() {
         let total = 0;
@@ -442,9 +449,6 @@ export class ChatApp {
     // User Actions ----------------------------------------------------------------------------------
     toggleThinkingVisibility() {
         this.showThinking = !this.showThinking;
-        this.assistantComponents.forEach((c) => {
-            c.setThinkingVisibility(this.showThinking);
-        });
         this.chatContainer.setThinkingVisibility(this.showThinking);
         const message = this.showThinking
             ? "thoughts visible (ctrl+t to hide)"
@@ -699,13 +703,12 @@ export class ChatApp {
     }
     clearSession() {
         this.engine.reset();
-        this.assistantComponents = [];
         this.runningBashComponents.clear();
         this.runningTaskComponents.clear();
         this.taskEvents.clear();
         this.subagentCostTotal = 0;
         this.expandedFilesInCurrentPrompt.clear();
-        this.chatContainer.addMessage(new SessionDividerComponent(this.uiTheme, "new session"));
+        this.chatContainer.addMessage({ type: "session_divider", label: "new session" });
         this.isBashMode = false;
         this.isMemoryMode = false;
         this.previousSessionSummary = undefined;
@@ -835,14 +838,16 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
         this.previousSessionSummary = previousSessionContext;
         // Reset the session state but preserve history with divider and summary
         this.engine.reset();
-        this.assistantComponents = [];
         this.runningBashComponents.clear();
         this.runningTaskComponents.clear();
         this.taskEvents.clear();
         this.subagentCostTotal = 0;
         this.expandedFilesInCurrentPrompt.clear();
-        this.chatContainer.addMessage(new SessionDividerComponent(this.uiTheme, "new session"));
-        this.chatContainer.addMessage(new SessionSummaryComponent(this.uiTheme, this.previousSessionSummary));
+        this.chatContainer.addMessage({ type: "session_divider", label: "new session" });
+        this.chatContainer.addMessage({
+            type: "session_summary",
+            summary: this.previousSessionSummary,
+        });
         this.isBashMode = false;
         this.isMemoryMode = false;
         // Rebuild environment tag and system prompt with the new summary and current risk level
@@ -1045,18 +1050,16 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
                 if (currentAssistant)
                     return currentAssistant;
                 currentAssistant = {
-                    component: new AssistantMessageComponent(this.uiTheme, undefined, this.showThinking),
                     inserted: false,
+                    model: { type: "assistant_partial", text: "", thinking: "" },
                 };
                 return currentAssistant;
             };
-            const ensureAssistantInserted = () => {
-                const state = ensureCurrentAssistant();
+            const ensureAssistantInserted = (state) => {
                 if (state.inserted)
                     return;
                 state.inserted = true;
-                this.addAssistantComponent(state.component);
-                state.component.setThinkingVisibility(this.showThinking);
+                state.id = this.chatContainer.addMessage(state.model);
             };
             for await (const event of this.engine.processTurn(this.currentTurnAbort.signal)) {
                 if (this.currentTurnAbort.signal.aborted)
@@ -1064,34 +1067,39 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
                 switch (event.type) {
                     case "assistant_start":
                         currentAssistant = {
-                            component: new AssistantMessageComponent(this.uiTheme, undefined, this.showThinking),
                             inserted: false,
+                            model: { type: "assistant_partial", text: "", thinking: "" },
                         };
                         break;
                     case "assistant_partial": {
                         const state = ensureCurrentAssistant();
                         const { snapshot } = event;
+                        const model = {
+                            type: "assistant_partial",
+                            text: snapshot.hasTextStarted ? snapshot.text : "",
+                            thinking: snapshot.thinking,
+                        };
+                        state.model = model;
                         const shouldInsert = snapshot.hasTextStarted || (this.showThinking && snapshot.hasAnyThinking);
                         if (shouldInsert && !state.inserted) {
-                            ensureAssistantInserted();
+                            ensureAssistantInserted(state);
                         }
-                        if (state.inserted) {
-                            // Capture visibility state before update
-                            const wasVisible = state.component.hasVisibleText;
-                            state.component.updatePartial(snapshot.hasTextStarted ? snapshot.text : "", snapshot.thinking);
-                            // If component became visible (e.g. text started after thoughts were hidden),
-                            // rebuild the container to show it
-                            if (!wasVisible && state.component.hasVisibleText) {
-                                this.chatContainer.rebuild();
-                            }
+                        if (state.inserted && state.id) {
+                            this.chatContainer.updateMessage(state.id, model);
                             this.ui.requestRender();
                         }
                         break;
                     }
                     case "assistant_final": {
-                        ensureAssistantInserted();
-                        ensureCurrentAssistant().component.updateFromMessage(event.message);
-                        this.chatContainer.rebuild();
+                        const state = ensureCurrentAssistant();
+                        const model = { type: "assistant", message: event.message };
+                        state.model = model;
+                        if (!state.inserted) {
+                            ensureAssistantInserted(state);
+                        }
+                        if (state.id) {
+                            this.chatContainer.updateMessage(state.id, model);
+                        }
                         this.updateFooter();
                         this.ui.requestRender();
                         currentAssistant = undefined;
@@ -1100,7 +1108,10 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
                     case "tool_ui": {
                         const uiEvent = event.uiEvent;
                         if (uiEvent.type === "bash_started") {
-                            this.chatContainer.addToolMessage((compact) => renderBashRunning(this.uiTheme, uiEvent.command, compact), uiEvent.toolCallId);
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildBashRunningView(this.uiTheme, uiEvent.command),
+                            }, uiEvent.toolCallId);
                             this.runningBashComponents.set(uiEvent.toolCallId, {
                                 command: uiEvent.command,
                             });
@@ -1108,7 +1119,10 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
                         }
                         else if (uiEvent.type === "bash_execution") {
                             const running = this.runningBashComponents.get(uiEvent.toolCallId);
-                            this.chatContainer.replaceToolMessage(uiEvent.toolCallId, (compact) => renderBashExecution(this.uiTheme, uiEvent.command, uiEvent.exitCode, uiEvent.truncationInfo, compact));
+                            this.chatContainer.replaceMessage(uiEvent.toolCallId, {
+                                type: "tool",
+                                view: buildBashExecutionView(this.uiTheme, uiEvent.command, uiEvent.exitCode, uiEvent.truncationInfo, uiEvent.durationMs),
+                            });
                             if (running) {
                                 this.runningBashComponents.delete(uiEvent.toolCallId);
                             }
@@ -1117,13 +1131,19 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
                         else if (uiEvent.type === "bash_blocked") {
                             if (uiEvent.toolCallId) {
                                 const running = this.runningBashComponents.get(uiEvent.toolCallId);
-                                this.chatContainer.replaceToolMessage(uiEvent.toolCallId, (compact) => renderBashBlocked(this.uiTheme, uiEvent.command, uiEvent.reason, compact));
+                                this.chatContainer.replaceMessage(uiEvent.toolCallId, {
+                                    type: "tool",
+                                    view: buildBashBlockedView(this.uiTheme, uiEvent.command, uiEvent.reason),
+                                });
                                 if (running) {
                                     this.runningBashComponents.delete(uiEvent.toolCallId);
                                 }
                             }
                             else {
-                                this.chatContainer.addToolMessage((compact) => renderBashBlocked(this.uiTheme, uiEvent.command, uiEvent.reason, compact));
+                                this.chatContainer.addMessage({
+                                    type: "tool",
+                                    view: buildBashBlockedView(this.uiTheme, uiEvent.command, uiEvent.reason),
+                                });
                             }
                             this.ui.requestRender();
                         }
@@ -1133,10 +1153,13 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
                             }
                             const kind = uiEvent.kind ?? "task";
                             const subagentName = uiEvent.name.trim() || undefined;
-                            this.chatContainer.addToolMessage((compact) => renderTaskRunning(this.uiTheme, uiEvent.title, [], 0, 0, 0, compact, {
-                                kind,
-                                subagentName,
-                            }), uiEvent.toolCallId);
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildTaskRunningView(this.uiTheme, uiEvent.title, [], 0, 0, 0, {
+                                    kind,
+                                    subagentName,
+                                }),
+                            }, uiEvent.toolCallId);
                             this.runningTaskComponents.set(uiEvent.toolCallId, {
                                 kind,
                                 name: subagentName,
@@ -1165,14 +1188,20 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
                                 running.turns = uiEvent.turns;
                                 running.toolCalls = uiEvent.toolCalls;
                             }
-                            this.chatContainer.replaceToolMessage(uiEvent.toolCallId, (compact) => renderTaskRunning(this.uiTheme, uiEvent.title, events, uiEvent.costTotal, uiEvent.turns, uiEvent.toolCalls, compact, { kind, subagentName }));
+                            this.chatContainer.replaceMessage(uiEvent.toolCallId, {
+                                type: "tool",
+                                view: buildTaskRunningView(this.uiTheme, uiEvent.title, events, uiEvent.costTotal, uiEvent.turns, uiEvent.toolCalls, { kind, subagentName }),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "task_finished") {
                             const running = this.runningTaskComponents.get(uiEvent.toolCallId);
                             const kind = uiEvent.kind ?? running?.kind ?? "task";
                             const subagentName = uiEvent.name.trim() || undefined;
-                            this.chatContainer.replaceToolMessage(uiEvent.toolCallId, (compact) => renderTaskFinished(this.uiTheme, uiEvent.title, uiEvent.costTotal, uiEvent.turns, uiEvent.toolCalls, uiEvent.status, uiEvent.finalOutput, compact, { kind, subagentName }));
+                            this.chatContainer.replaceMessage(uiEvent.toolCallId, {
+                                type: "tool",
+                                view: buildTaskFinishedView(this.uiTheme, uiEvent.title, uiEvent.costTotal, uiEvent.turns, uiEvent.toolCalls, uiEvent.status, uiEvent.finalOutput, { kind, subagentName }),
+                            });
                             this.runningTaskComponents.delete(uiEvent.toolCallId);
                             this.taskEvents.delete(uiEvent.toolCallId);
                             this.subagentCostTotal += uiEvent.costTotal;
@@ -1184,63 +1213,102 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
                             const kind = uiEvent.kind ?? running?.kind ?? "task";
                             const subagentName = uiEvent.name?.trim() || undefined;
                             if (running) {
-                                this.chatContainer.replaceToolMessage(uiEvent.toolCallId, (compact) => renderTaskBlocked(this.uiTheme, uiEvent.title, uiEvent.reason, compact, {
-                                    kind,
-                                    subagentName,
-                                }));
+                                this.chatContainer.replaceMessage(uiEvent.toolCallId, {
+                                    type: "tool",
+                                    view: buildTaskBlockedView(this.uiTheme, uiEvent.title, uiEvent.reason, {
+                                        kind,
+                                        subagentName,
+                                    }),
+                                });
                             }
                             else {
-                                this.chatContainer.addToolMessage((compact) => renderTaskBlocked(this.uiTheme, uiEvent.title, uiEvent.reason, compact, {
-                                    kind,
-                                    subagentName,
-                                }), uiEvent.toolCallId);
+                                this.chatContainer.addMessage({
+                                    type: "tool",
+                                    view: buildTaskBlockedView(this.uiTheme, uiEvent.title, uiEvent.reason, {
+                                        kind,
+                                        subagentName,
+                                    }),
+                                }, uiEvent.toolCallId);
                             }
                             this.runningTaskComponents.delete(uiEvent.toolCallId);
                             this.taskEvents.delete(uiEvent.toolCallId);
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "write_success") {
-                            this.chatContainer.addToolMessage((compact) => renderWriteSuccess(this.uiTheme, uiEvent.path, uiEvent.bytes, uiEvent.lines, uiEvent.content, compact));
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildWriteSuccessView(this.uiTheme, uiEvent.path, uiEvent.bytes, uiEvent.lines, uiEvent.content),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "write_blocked") {
-                            this.chatContainer.addToolMessage((compact) => renderWriteBlocked(this.uiTheme, uiEvent.path, uiEvent.reason, compact));
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildWriteBlockedView(this.uiTheme, uiEvent.path, uiEvent.reason),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "edit_success") {
-                            this.chatContainer.addToolMessage((compact) => renderEditSuccess(this.uiTheme, uiEvent.path, uiEvent.oldLength, uiEvent.newLength, uiEvent.oldText, uiEvent.newText, compact));
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildEditSuccessView(this.uiTheme, uiEvent.path, uiEvent.oldLength, uiEvent.newLength, uiEvent.oldText, uiEvent.newText),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "edit_blocked") {
-                            this.chatContainer.addToolMessage((compact) => renderEditBlocked(this.uiTheme, uiEvent.path, uiEvent.reason, compact));
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildEditBlockedView(this.uiTheme, uiEvent.path, uiEvent.reason),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "read_success") {
-                            this.chatContainer.addToolMessage((compact) => renderReadSuccess(this.uiTheme, uiEvent.path, uiEvent.startLine, uiEvent.endLine, uiEvent.content, uiEvent.modelTruncation, compact));
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildReadSuccessView(this.uiTheme, uiEvent.path, uiEvent.startLine, uiEvent.endLine, uiEvent.content, uiEvent.modelTruncation),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "read_blocked") {
-                            this.chatContainer.addToolMessage((compact) => renderReadBlocked(this.uiTheme, uiEvent.path, uiEvent.reason, compact));
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildReadBlockedView(this.uiTheme, uiEvent.path, uiEvent.reason),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "list_success") {
-                            this.chatContainer.addToolMessage((compact) => renderListSuccess(this.uiTheme, uiEvent.path, uiEvent.offset, uiEvent.limit, uiEvent.total, uiEvent.returned, uiEvent.entries, compact));
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildListSuccessView(this.uiTheme, uiEvent.path, uiEvent.offset, uiEvent.limit, uiEvent.total, uiEvent.returned, uiEvent.entries),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "list_blocked") {
-                            this.chatContainer.addToolMessage((compact) => renderListBlocked(this.uiTheme, uiEvent.path, uiEvent.reason, compact));
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildListBlockedView(this.uiTheme, uiEvent.path, uiEvent.reason),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "grep_started") {
-                            this.chatContainer.addToolMessage((compact) => renderGrepRunning(this.uiTheme, uiEvent.pattern, compact), uiEvent.toolCallId);
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildGrepRunningView(this.uiTheme, uiEvent.pattern),
+                            }, uiEvent.toolCallId);
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "grep_finished") {
-                            this.chatContainer.replaceToolMessage(uiEvent.toolCallId, (compact) => renderGrepFinished(this.uiTheme, uiEvent.pattern, uiEvent.status, uiEvent.exitCode, uiEvent.stdout, uiEvent.stderr, uiEvent.captureTruncated, compact));
+                            this.chatContainer.replaceMessage(uiEvent.toolCallId, {
+                                type: "tool",
+                                view: buildGrepFinishedView(this.uiTheme, uiEvent.pattern, uiEvent.status, uiEvent.exitCode, uiEvent.stdout, uiEvent.stderr, uiEvent.captureTruncated),
+                            });
                             this.ui.requestRender();
                         }
                         else if (uiEvent.type === "grep_blocked") {
-                            this.chatContainer.addToolMessage((compact) => renderGrepBlocked(this.uiTheme, uiEvent.pattern, uiEvent.reason, compact), uiEvent.toolCallId);
+                            this.chatContainer.addMessage({
+                                type: "tool",
+                                view: buildGrepBlockedView(this.uiTheme, uiEvent.pattern, uiEvent.reason),
+                            }, uiEvent.toolCallId);
                             this.ui.requestRender();
                         }
                         break;
@@ -1262,11 +1330,17 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
             const wasAborted = this.currentTurnAbort?.signal.aborted ?? false;
             const reason = wasAborted ? "aborted" : "interrupted";
             for (const [id, running] of this.runningBashComponents.entries()) {
-                this.chatContainer.replaceToolMessage(id, (compact) => renderBashAborted(this.uiTheme, running.command, reason, compact));
+                this.chatContainer.replaceMessage(id, {
+                    type: "tool",
+                    view: buildBashAbortedView(this.uiTheme, running.command, reason),
+                });
             }
             const taskStatus = wasAborted ? "aborted" : "error";
             for (const [id, running] of this.runningTaskComponents.entries()) {
-                this.chatContainer.replaceToolMessage(id, (compact) => renderTaskFinished(this.uiTheme, running.title, running.costTotal, running.turns, running.toolCalls, taskStatus, reason, compact, { kind: running.kind, subagentName: running.name }));
+                this.chatContainer.replaceMessage(id, {
+                    type: "tool",
+                    view: buildTaskFinishedView(this.uiTheme, running.title, running.costTotal, running.turns, running.toolCalls, taskStatus, reason, { kind: running.kind, subagentName: running.name }),
+                });
             }
             this.footer.stop();
             this.isStreaming = false;
@@ -1283,12 +1357,17 @@ Write plain prose, no formatting. Be thorough enough that the reader can resume
     async runBashCommand(command, opts) {
         this.isStreaming = true;
         try {
+            const startedAt = Date.now();
             const { stdout, stderr, exitCode, truncated: captureTruncated, } = await executeBashTool(command, { cwd: opts?.cwd });
+            const durationMs = Math.max(0, Date.now() - startedAt);
             const truncationInfo = prepareBashOutput(stdout, stderr, captureTruncated, {
                 stdout: { maxLines: BASH_USER_MAX_STDOUT_LINES, maxTokens: BASH_USER_MAX_STDOUT_TOKENS },
                 stderr: { maxLines: BASH_USER_MAX_STDERR_LINES, maxTokens: BASH_USER_MAX_STDERR_TOKENS },
             });
-            this.chatContainer.addMessage(renderBashExecution(this.uiTheme, command, exitCode, truncationInfo, false));
+            this.chatContainer.addMessage({
+                type: "tool",
+                view: buildBashExecutionView(this.uiTheme, command, exitCode, truncationInfo, durationMs, "you ran", 12, 12),
+            });
             this.engine.addUserText(formatBashUserMessageText({ command, truncationInfo }));
             this.ui.requestRender();
         }