@bastani/atomic 0.8.1 → 0.8.2

package/dist/modes/interactive/interactive-mode.js

@@ -9,7 +9,7 @@ import * as path from "node:path";
 import { getProviders, } from "@earendil-works/pi-ai";
 import { CombinedAutocompleteProvider, Container, fuzzyFilter, getCapabilities, hyperlink, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TUI, visibleWidth, } from "@earendil-works/pi-tui";
 import { spawn, spawnSync } from "child_process";
-import { APP_NAME, APP_TITLE, CHANGELOG_URL, ENV_OFFLINE, getAgentDir, getAuthPath, getDebugLogPath, getDocsPath, getShareViewerUrl, VERSION, } from "../../config.js";
+import { APP_NAME, APP_TITLE, CHANGELOG_URL, ENV_OFFLINE, getEnvValue, getAgentDir, getAuthPath, getDebugLogPath, getDocsPath, getShareViewerUrl, VERSION, } from "../../config.js";
 import { parseSkillBlock, } from "../../core/agent-session.js";
 import { pickWhimsicalWorkingMessage } from "./whimsical-messages.js";
 import { SessionImportFileNotFoundError, } from "../../core/agent-session-runtime.js";
@@ -37,18 +37,21 @@ import { AssistantMessageComponent } from "./components/assistant-message.js";
 import { BashExecutionComponent } from "./components/bash-execution.js";
 import { BorderedLoader } from "./components/bordered-loader.js";
 import { BranchSummaryMessageComponent } from "./components/branch-summary-message.js";
+import { chatEntriesFromAgentMessages, renderChatMessageEntry, } from "./components/chat-message-renderer.js";
+import { addChatTranscriptEntry } from "./components/chat-transcript.js";
 import { CompactionSummaryMessageComponent } from "./components/compaction-summary-message.js";
 import { CountdownTimer } from "./components/countdown-timer.js";
 import { CustomEditor } from "./components/custom-editor.js";
 import { CustomMessageComponent } from "./components/custom-message.js";
 import { DaxnutsComponent } from "./components/daxnuts.js";
+import { renderAtomicAnsiBanner } from "./components/atomic-banner.js";
 import { DynamicBorder } from "./components/dynamic-border.js";
 import { EarendilAnnouncementComponent } from "./components/earendil-announcement.js";
 import { ExtensionEditorComponent } from "./components/extension-editor.js";
 import { ExtensionInputComponent } from "./components/extension-input.js";
 import { ExtensionSelectorComponent } from "./components/extension-selector.js";
-import { FooterComponent } from "./components/footer.js";
-import { formatKeyText, keyDisplayText, keyHint, keyText, rawKeyHint, } from "./components/keybinding-hints.js";
+import { FooterComponent, UsageMeterComponent } from "./components/footer.js";
+import { formatKeyText, keyDisplayText, keyText, } from "./components/keybinding-hints.js";
 import { LoginDialogComponent } from "./components/login-dialog.js";
 import { ModelSelectorComponent } from "./components/model-selector.js";
 import { OAuthSelectorComponent, } from "./components/oauth-selector.js";
@@ -72,9 +75,14 @@ class ExpandableText extends Text {
         super(expanded ? getExpandedText() : getCollapsedText(), paddingX, paddingY);
         this.getCollapsedText = getCollapsedText;
         this.getExpandedText = getExpandedText;
+        this.expanded = expanded;
     }
     setExpanded(expanded) {
-        this.setText(expanded ? this.getExpandedText() : this.getCollapsedText());
+        this.expanded = expanded;
+        this.refresh();
+    }
+    refresh() {
+        this.setText(this.expanded ? this.getExpandedText() : this.getCollapsedText());
     }
 }
 const DEAD_TERMINAL_ERROR_CODES = new Set(["EIO", "EPIPE", "ENOTCONN"]);
@@ -218,7 +226,8 @@ export class InteractiveMode {
         this.editorContainer.addChild(this.editor);
         this.footerDataProvider = new FooterDataProvider(this.sessionManager.getCwd());
         this.footer = new FooterComponent(this.session, this.footerDataProvider);
-        this.footer.setAutoCompactEnabled(this.session.autoCompactionEnabled);
+        this.usageMeter = new UsageMeterComponent(this.session);
+        this.usageMeter.setAutoCompactEnabled(this.session.autoCompactionEnabled);
         // Load hide thinking block setting
         this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
         // Register themes from resource loader and initialize
@@ -385,43 +394,10 @@ export class InteractiveMode {
         this.fdPath = fdPath;
         // Add header container as first child
         this.ui.addChild(this.headerContainer);
-        // Add header with keybindings from config (unless silenced)
+        // Add the quiet startup identity (unless silenced). Resource details are
+        // disclosed separately in the chat canvas via the tools/resources toggle.
         if (this.options.verbose || !this.settingsManager.getQuietStartup()) {
-            const logo = theme.bold(theme.fg("accent", APP_NAME)) +
-                theme.fg("dim", ` v${this.version}`);
-            // Build startup instructions using keybinding hint helpers
-            const hint = (keybinding, description) => keyHint(keybinding, description);
-            const expandedInstructions = [
-                hint("app.interrupt", "to interrupt"),
-                hint("app.clear", "to clear"),
-                rawKeyHint(`${keyText("app.clear")} twice`, "to exit"),
-                hint("app.exit", "to exit (empty)"),
-                hint("app.suspend", "to suspend"),
-                keyHint("tui.editor.deleteToLineEnd", "to delete to end"),
-                hint("app.thinking.cycle", "to cycle thinking level"),
-                rawKeyHint(`${keyText("app.model.cycleForward")}/${keyText("app.model.cycleBackward")}`, "to cycle models"),
-                hint("app.model.select", "to select model"),
-                hint("app.tools.expand", "to expand tools"),
-                hint("app.thinking.toggle", "to expand thinking"),
-                hint("app.editor.external", "for external editor"),
-                rawKeyHint("/", "for commands"),
-                rawKeyHint("!", "to run bash"),
-                rawKeyHint("!!", "to run bash (no context)"),
-                hint("app.message.followUp", "to queue follow-up"),
-                hint("app.message.dequeue", "to edit all queued messages"),
-                hint("app.clipboard.pasteImage", "to paste image"),
-                rawKeyHint("drop files", "to attach"),
-            ].join("\n");
-            const compactInstructions = [
-                hint("app.interrupt", "interrupt"),
-                rawKeyHint(`${keyText("app.clear")}/${keyText("app.exit")}`, "clear/exit"),
-                rawKeyHint("/", "commands"),
-                rawKeyHint("!", "bash"),
-                hint("app.tools.expand", "more"),
-            ].join(theme.fg("muted", " · "));
-            const compactOnboarding = theme.fg("dim", `Press ${keyText("app.tools.expand")} to show full startup help and loaded resources.`);
-            const onboarding = theme.fg("dim", `Atomic is built with Pi. Pi can explain its own features and look up its docs. Ask it how to use or extend Pi.`);
-            this.builtInHeader = new ExpandableText(() => `${logo}\n${compactInstructions}\n${compactOnboarding}\n\n${onboarding}`, () => `${logo}\n${expandedInstructions}\n\n${onboarding}`, this.getStartupExpansionState(), 1, 0);
+            this.builtInHeader = new ExpandableText(() => this.getStartupIdentityText(), () => this.getStartupIdentityText(), this.getStartupExpansionState(), 1, 0);
             // Setup UI layout
             this.headerContainer.addChild(new Spacer(1));
             this.headerContainer.addChild(this.builtInHeader);
@@ -437,6 +413,7 @@ export class InteractiveMode {
         this.ui.addChild(this.statusContainer);
         this.renderWidgets(); // Initialize with default spacer
         this.ui.addChild(this.widgetContainerAbove);
+        this.ui.addChild(this.usageMeter);
         this.ui.addChild(this.editorContainer);
         this.ui.addChild(this.widgetContainerBelow);
         this.ui.addChild(this.footer);
@@ -547,7 +524,7 @@ export class InteractiveMode {
         }
     }
     async checkForPackageUpdates() {
-        if (process.env[ENV_OFFLINE]) {
+        if (getEnvValue(ENV_OFFLINE)) {
             return [];
         }
         try {
@@ -632,7 +609,7 @@ export class InteractiveMode {
         return undefined;
     }
     reportInstallTelemetry(version) {
-        if (process.env[ENV_OFFLINE]) {
+        if (getEnvValue(ENV_OFFLINE)) {
             return;
         }
         if (!isInstallTelemetryEnabled(this.settingsManager)) {
@@ -681,6 +658,25 @@ export class InteractiveMode {
         }
         return this.formatDisplayPath(absolutePath);
     }
+    getStartupIdentityText() {
+        const appLabel = APP_NAME.length > 0
+            ? `${APP_NAME[0].toUpperCase()}${APP_NAME.slice(1)}`
+            : "Atomic";
+        const title = `${theme.bold(theme.fg("text", appLabel))} ${theme.fg("muted", `v${this.version}`)}`;
+        const model = this.session.state.model;
+        const provider = model ? theme.fg("dim", `(${model.provider})`) : theme.fg("dim", "(no-provider)");
+        const thinking = model?.reasoning ? ` ${this.session.thinkingLevel || "off"}` : "";
+        const modelLine = `${provider} ${theme.fg("muted", `${model?.id ?? "no-model"}${thinking}`)}`;
+        const cwd = theme.fg("muted", this.formatDisplayPath(this.sessionManager.getCwd()));
+        const metaLines = [title, modelLine, cwd];
+        const markLines = this.getAtomicAnsiMarkLines();
+        return markLines
+            .map((line, index) => `${line}  ${metaLines[index] ?? ""}`.trimEnd())
+            .join("\n");
+    }
+    getAtomicAnsiMarkLines() {
+        return renderAtomicAnsiBanner(theme, this.session.thinkingLevel || "off");
+    }
     getStartupExpansionState() {
         return this.options.verbose || this.toolOutputExpanded;
     }
@@ -952,6 +948,63 @@ export class InteractiveMode {
         }
         return lines.join("\n");
     }
+    getResourceDiagnosticsTotal(values) {
+        return values.reduce((total, diagnostics) => total + diagnostics.length, 0);
+    }
+    formatResourceCount(count, singular, plural = `${singular}s`) {
+        if (count <= 0) {
+            return undefined;
+        }
+        return `${count} ${count === 1 ? singular : plural}`;
+    }
+    addResourceDisclosure(options) {
+        const contextLabels = options.contextFiles.map((contextFile) => this.formatContextPath(contextFile.path));
+        const promptCount = options.prompts.length + options.templates.length;
+        const summaryParts = [
+            contextLabels.length > 0 ? contextLabels.join(", ") : "context ready",
+            this.formatResourceCount(options.skills.length, "skill"),
+            this.formatResourceCount(promptCount, "prompt"),
+            this.formatResourceCount(options.extensions.length, "extension"),
+            this.formatResourceCount(options.themes.length, "theme"),
+            this.formatResourceCount(options.diagnosticsTotal, "issue"),
+        ].filter((part) => part !== undefined && part.length > 0);
+        const collapsed = `${theme.bold(theme.fg("muted", "RESOURCES"))} ${theme.fg("muted", summaryParts.join(" · "))}`;
+        const ok = theme.fg("success", "✓");
+        const pending = theme.fg("dim", "○");
+        const sep = theme.fg("dim", " · ");
+        const label = (value) => theme.bold(theme.fg("text", value.padEnd(10)));
+        const mutedList = (values, maxItems = 4) => {
+            if (values.length === 0) {
+                return theme.fg("dim", "none");
+            }
+            const shown = values.slice(0, maxItems).join(", ");
+            const suffix = values.length > maxItems ? `, +${values.length - maxItems}` : "";
+            return theme.fg("dim", `${shown}${suffix}`);
+        };
+        const extensionLabels = this.getCompactExtensionLabels([...options.extensions]);
+        const themeLabels = options.themes.map((loadedTheme) => loadedTheme.name ??
+            (loadedTheme.sourcePath
+                ? this.getCompactPathLabel(loadedTheme.sourcePath, undefined)
+                : "theme"));
+        const expandedSummary = [
+            `${ok} ${label("Ready")} ${contextLabels.length > 0 ? contextLabels.join(", ") : "context loaded"}`,
+            `${ok} ${label("Skills")} ${options.skills.length} available${sep}${mutedList(options.skills.map((skill) => skill.name))}`,
+            `${ok} ${label("Prompts")} ${promptCount} available${sep}${mutedList([
+                ...options.templates.map((template) => `/${template.name}`),
+                ...options.prompts.map((prompt) => prompt.name),
+            ])}`,
+            `${ok} ${label("Extensions")} ${options.extensions.length} available${sep}${mutedList(extensionLabels)}`,
+        ];
+        if (themeLabels.length > 0) {
+            expandedSummary.push(`${ok} ${label("Themes")} ${themeLabels.length} loaded${sep}${mutedList(themeLabels)}`);
+        }
+        if (options.diagnosticsTotal > 0) {
+            expandedSummary.push(`${pending} ${label("Issues")} ${options.diagnosticsTotal} noted${sep}${theme.fg("dim", "details below")}`);
+        }
+        const expanded = `${collapsed}\n${expandedSummary.join("\n")}${options.expandedBody.length > 0 ? `\n\n${options.expandedBody}` : ""}`;
+        this.chatContainer.addChild(new ExpandableText(() => collapsed, () => expanded, this.getStartupExpansionState(), 0, 0));
+        this.chatContainer.addChild(new Spacer(1));
+    }
     showLoadedResources(options) {
         const showListing = options?.force ||
             this.options.verbose ||
@@ -960,21 +1013,6 @@ export class InteractiveMode {
         if (!showListing && !showDiagnostics) {
             return;
         }
-        const sectionHeader = (name, color = "mdHeading") => theme.fg(color, `[${name}]`);
-        const formatCompactList = (items, options) => {
-            const labels = items
-                .map((item) => item.trim())
-                .filter((item) => item.length > 0);
-            if (options?.sort !== false) {
-                labels.sort((a, b) => a.localeCompare(b));
-            }
-            return theme.fg("dim", `  ${labels.join(", ")}`);
-        };
-        const addLoadedSection = (name, collapsedBody, expandedBody = collapsedBody, color = "mdHeading") => {
-            const section = new ExpandableText(() => `${sectionHeader(name, color)}\n${collapsedBody}`, () => `${sectionHeader(name, color)}\n${expandedBody}`, this.getStartupExpansionState(), 0, 0);
-            this.chatContainer.addChild(section);
-            this.chatContainer.addChild(new Spacer(1));
-        };
         const skillsResult = this.session.resourceLoader.getSkills();
         const promptsResult = this.session.resourceLoader.getPrompts();
         const themesResult = this.session.resourceLoader.getThemes();
@@ -1008,13 +1046,13 @@ export class InteractiveMode {
         }
         if (showListing) {
             const contextFiles = this.session.resourceLoader.getAgentsFiles().agentsFiles;
+            const templates = this.session.promptTemplates;
+            const customThemes = themesResult.themes.filter((t) => t.sourcePath);
+            const expandedSections = [];
             if (contextFiles.length > 0) {
-                this.chatContainer.addChild(new Spacer(1));
-                const contextList = contextFiles
-                    .map((f) => theme.fg("dim", `  ${this.formatDisplayPath(f.path)}`))
-                    .join("\n");
-                const contextCompactList = formatCompactList(contextFiles.map((contextFile) => this.formatContextPath(contextFile.path)), { sort: false });
-                addLoadedSection("Context", contextCompactList, contextList);
+                expandedSections.push(`${theme.bold(theme.fg("muted", "CONTEXT"))}\n${contextFiles
+                    .map((contextFile) => theme.fg("dim", `  ${this.formatDisplayPath(contextFile.path)}`))
+                    .join("\n")}`);
             }
             const skills = skillsResult.skills;
             if (skills.length > 0) {
@@ -1022,21 +1060,18 @@ export class InteractiveMode {
                     path: skill.filePath,
                     sourceInfo: skill.sourceInfo,
                 })));
-                const skillList = this.formatScopeGroups(groups, {
+                expandedSections.push(`${theme.bold(theme.fg("muted", "SKILLS"))}\n${this.formatScopeGroups(groups, {
                     formatPath: (item) => this.formatDisplayPath(item.path),
                     formatPackagePath: (item) => this.getShortPath(item.path, item.sourceInfo),
-                });
-                const skillCompactList = formatCompactList(skills.map((skill) => skill.name));
-                addLoadedSection("Skills", skillCompactList, skillList);
+                })}`);
             }
-            const templates = this.session.promptTemplates;
             if (templates.length > 0) {
                 const groups = this.buildScopeGroups(templates.map((template) => ({
                     path: template.filePath,
                     sourceInfo: template.sourceInfo,
                 })));
                 const templateByPath = new Map(templates.map((t) => [t.filePath, t]));
-                const templateList = this.formatScopeGroups(groups, {
+                expandedSections.push(`${theme.bold(theme.fg("muted", "PROMPTS"))}\n${this.formatScopeGroups(groups, {
                     formatPath: (item) => {
                         const template = templateByPath.get(item.path);
                         return template
@@ -1049,35 +1084,62 @@ export class InteractiveMode {
                             ? `/${template.name}`
                             : this.formatDisplayPath(item.path);
                     },
-                });
-                const promptCompactList = formatCompactList(templates.map((template) => `/${template.name}`));
-                addLoadedSection("Prompts", promptCompactList, templateList);
+                })}`);
+            }
+            const prompts = promptsResult.prompts;
+            if (prompts.length > 0) {
+                const groups = this.buildScopeGroups(prompts.map((prompt) => ({
+                    path: prompt.filePath,
+                    sourceInfo: prompt.sourceInfo,
+                })));
+                const promptByPath = new Map(prompts.map((prompt) => [prompt.filePath, prompt]));
+                expandedSections.push(`${theme.bold(theme.fg("muted", "PROMPTS"))}\n${this.formatScopeGroups(groups, {
+                    formatPath: (item) => promptByPath.get(item.path)?.name ?? this.formatDisplayPath(item.path),
+                    formatPackagePath: (item) => promptByPath.get(item.path)?.name ?? this.formatDisplayPath(item.path),
+                })}`);
             }
             if (extensions.length > 0) {
                 const groups = this.buildScopeGroups(extensions);
-                const extList = this.formatScopeGroups(groups, {
+                expandedSections.push(`${theme.bold(theme.fg("muted", "EXTENSIONS"))}\n${this.formatScopeGroups(groups, {
                     formatPath: (item) => this.formatExtensionDisplayPath(item.path),
                     formatPackagePath: (item) => this.formatExtensionDisplayPath(this.getShortPath(item.path, item.sourceInfo)),
-                });
-                const extensionCompactList = formatCompactList(this.getCompactExtensionLabels(extensions));
-                addLoadedSection("Extensions", extensionCompactList, extList, "mdHeading");
+                })}`);
             }
-            // Show loaded themes (excluding built-in)
-            const loadedThemes = themesResult.themes;
-            const customThemes = loadedThemes.filter((t) => t.sourcePath);
             if (customThemes.length > 0) {
                 const groups = this.buildScopeGroups(customThemes.map((loadedTheme) => ({
                     path: loadedTheme.sourcePath,
                     sourceInfo: loadedTheme.sourceInfo,
                 })));
-                const themeList = this.formatScopeGroups(groups, {
+                expandedSections.push(`${theme.bold(theme.fg("muted", "THEMES"))}\n${this.formatScopeGroups(groups, {
                     formatPath: (item) => this.formatDisplayPath(item.path),
                     formatPackagePath: (item) => this.getShortPath(item.path, item.sourceInfo),
+                })}`);
+            }
+            const extensionDiagnostics = [];
+            const extensionErrors = this.session.resourceLoader.getExtensions().errors;
+            for (const error of extensionErrors) {
+                extensionDiagnostics.push({
+                    type: "error",
+                    message: error.error,
+                    path: error.path,
                 });
-                const themeCompactList = formatCompactList(customThemes.map((loadedTheme) => loadedTheme.name ??
-                    this.getCompactPathLabel(loadedTheme.sourcePath, loadedTheme.sourceInfo)));
-                addLoadedSection("Themes", themeCompactList, themeList);
             }
+            extensionDiagnostics.push(...this.session.extensionRunner.getCommandDiagnostics(), ...this.getBuiltInCommandConflictDiagnostics(this.session.extensionRunner), ...this.session.extensionRunner.getShortcutDiagnostics());
+            this.addResourceDisclosure({
+                contextFiles,
+                skills,
+                prompts,
+                templates,
+                extensions,
+                themes: customThemes,
+                diagnosticsTotal: this.getResourceDiagnosticsTotal([
+                    skillsResult.diagnostics,
+                    promptsResult.diagnostics,
+                    extensionDiagnostics,
+                    themesResult.diagnostics,
+                ]),
+                expandedBody: this.options.verbose ? expandedSections.join("\n\n") : "",
+            });
         }
         if (showDiagnostics) {
             const skillDiagnostics = skillsResult.diagnostics;
@@ -1207,7 +1269,8 @@ export class InteractiveMode {
     }
     applyRuntimeSettings() {
         this.footer.setSession(this.session);
-        this.footer.setAutoCompactEnabled(this.session.autoCompactionEnabled);
+        this.usageMeter.setSession(this.session);
+        this.usageMeter.setAutoCompactEnabled(this.session.autoCompactionEnabled);
         this.footerDataProvider.setCwd(this.sessionManager.getCwd());
         this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
         this.ui.setShowHardwareCursor(this.settingsManager.getShowHardwareCursor());
@@ -1602,6 +1665,15 @@ export class InteractiveMode {
             },
             getToolsExpanded: () => this.toolOutputExpanded,
             setToolsExpanded: (expanded) => this.setToolsExpanded(expanded),
+            getChatRenderSettings: () => ({
+                hideThinkingBlock: this.hideThinkingBlock,
+                hiddenThinkingLabel: this.hiddenThinkingLabel,
+                toolOutputExpanded: this.toolOutputExpanded,
+                showImages: this.settingsManager.getShowImages(),
+                imageWidthCells: this.settingsManager.getImageWidthCells(),
+                getToolDefinition: (toolName) => this.getRegisteredToolDefinition(toolName),
+                getCustomMessageRenderer: (customType) => this.session.extensionRunner.getMessageRenderer(customType),
+            }),
         };
     }
     /**
@@ -2224,6 +2296,7 @@ export class InteractiveMode {
                 break;
             case "thinking_level_changed":
                 this.footer.invalidate();
+                this.refreshBuiltInHeader();
                 this.updateEditorBorderColor();
                 break;
             case "message_start":
@@ -2499,6 +2572,25 @@ export class InteractiveMode {
         this.lastStatusText = text;
         this.ui.requestRender();
     }
+    chatMessageRenderOptions() {
+        return {
+            ui: this.ui,
+            cwd: this.sessionManager.getCwd(),
+            markdownTheme: this.getMarkdownThemeWithSettings(),
+            hideThinkingBlock: this.hideThinkingBlock,
+            hiddenThinkingLabel: this.hiddenThinkingLabel,
+            toolOutputExpanded: this.toolOutputExpanded,
+            showImages: this.settingsManager.getShowImages(),
+            imageWidthCells: this.settingsManager.getImageWidthCells(),
+            getToolDefinition: (toolName) => this.getRegisteredToolDefinition(toolName),
+            getCustomMessageRenderer: (customType) => this.session.extensionRunner.getMessageRenderer(customType),
+        };
+    }
+    addRenderedChatEntry(entry) {
+        const component = renderChatMessageEntry(entry, this.chatMessageRenderOptions());
+        addChatTranscriptEntry(this.chatContainer, component, entry.role);
+        return component;
+    }
     addMessageToChat(message, options) {
         switch (message.role) {
             case "bashExecution": {
@@ -2585,64 +2677,22 @@ export class InteractiveMode {
      */
     renderSessionContext(sessionContext, options = {}) {
         this.pendingTools.clear();
-        const renderedPendingTools = new Map();
         if (options.updateFooter) {
             this.footer.invalidate();
             this.updateEditorBorderColor();
         }
-        for (const message of sessionContext.messages) {
-            // Assistant messages need special handling for tool calls
-            if (message.role === "assistant") {
-                this.addMessageToChat(message);
-                // Render tool call components
-                for (const content of message.content) {
-                    if (content.type === "toolCall") {
-                        const component = new ToolExecutionComponent(content.name, content.id, content.arguments, {
-                            showImages: this.settingsManager.getShowImages(),
-                            imageWidthCells: this.settingsManager.getImageWidthCells(),
-                        }, this.getRegisteredToolDefinition(content.name), this.ui, this.sessionManager.getCwd());
-                        component.setExpanded(this.toolOutputExpanded);
-                        this.chatContainer.addChild(component);
-                        if (message.stopReason === "aborted" ||
-                            message.stopReason === "error") {
-                            let errorMessage;
-                            if (message.stopReason === "aborted") {
-                                const retryAttempt = this.session.retryAttempt;
-                                errorMessage =
-                                    retryAttempt > 0
-                                        ? `Aborted after ${retryAttempt} retry attempt${retryAttempt > 1 ? "s" : ""}`
-                                        : "Operation aborted";
-                            }
-                            else {
-                                errorMessage = message.errorMessage || "Error";
-                            }
-                            component.updateResult({
-                                content: [{ type: "text", text: errorMessage }],
-                                isError: true,
-                            });
-                        }
-                        else {
-                            renderedPendingTools.set(content.id, component);
-                        }
-                    }
-                }
+        const entries = chatEntriesFromAgentMessages(sessionContext.messages);
+        for (const entry of entries) {
+            const component = this.addRenderedChatEntry(entry);
+            if (entry.kind === "tool" &&
+                entry.isPartial !== false &&
+                component instanceof ToolExecutionComponent) {
+                this.pendingTools.set(entry.toolCallId, component);
             }
-            else if (message.role === "toolResult") {
-                // Match tool results to pending tool components
-                const component = renderedPendingTools.get(message.toolCallId);
-                if (component) {
-                    component.updateResult(message);
-                    renderedPendingTools.delete(message.toolCallId);
-                }
-            }
-            else {
-                // All other messages use standard rendering
-                this.addMessageToChat(message, options);
+            if (options.populateHistory && entry.kind === "user") {
+                this.editor.addToHistory?.(entry.text);
             }
         }
-        for (const [toolCallId, component] of renderedPendingTools) {
-            this.pendingTools.set(toolCallId, component);
-        }
         this.ui.requestRender();
     }
     renderInitialMessages() {
@@ -2862,6 +2912,11 @@ export class InteractiveMode {
             this.showStatus(`Restored ${restored} queued message${restored > 1 ? "s" : ""} to editor`);
         }
     }
+    refreshBuiltInHeader() {
+        if (this.builtInHeader instanceof ExpandableText) {
+            this.builtInHeader.refresh();
+        }
+    }
     updateEditorBorderColor() {
         if (this.isBashMode) {
             this.editor.borderColor = theme.getBashModeBorderColor();
@@ -3243,7 +3298,7 @@ export class InteractiveMode {
             }, {
                 onAutoCompactChange: (enabled) => {
                     this.session.setAutoCompactionEnabled(enabled);
-                    this.footer.setAutoCompactEnabled(enabled);
+                    this.usageMeter.setAutoCompactEnabled(enabled);
                 },
                 onShowImagesChange: (enabled) => {
                     this.settingsManager.setShowImages(enabled);