@astralyn/pi 0.87.0 → 0.87.2

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

@@ -8,7 +8,7 @@ import * as os from "node:os";
 import * as path from "node:path";
 import { isRetryableAssistantError, } from "@earendil-works/pi-ai/compat";
 import * as TuiLayouts from "@earendil-works/pi-tui";
-import { CombinedAutocompleteProvider, Container, fuzzyFilter, Markdown, matchesKey, Spacer, setCapabilityOverrides, setKeybindings, Text, TruncatedText, TuiAltScreen, TuiMainScreen, visibleWidth, } from "@earendil-works/pi-tui";
+import { CombinedAutocompleteProvider, Container, fuzzyFilter, getCapabilities, hyperlink, Markdown, matchesKey, Spacer, setCapabilityOverrides, setKeybindings, Text, TruncatedText, TuiAltScreen, TuiMainScreen, visibleWidth, } from "@earendil-works/pi-tui";
 import chalk from "chalk";
 import { spawn } from "child_process";
 import { APP_NAME, APP_TITLE, CONFIG_DIR_NAME, getAgentDir, getAuthPath, getDebugLogPath, getDocsPath, INSTALL_TELEMETRY_URL, UPDATE_CHANGELOG_HINT, VERSION, } from "../../config.js";
@@ -39,6 +39,7 @@ import { parseGitUrl } from "../../utils/git.js";
 import { getCwdRelativePath } from "../../utils/paths.js";
 import { getPiUserAgent } from "../../utils/pi-user-agent.js";
 import { killTrackedDetachedChildren } from "../../utils/shell.js";
+import { loadAllHighlightLanguages } from "../../utils/syntax-highlight.js";
 import { ensureTool } from "../../utils/tools-manager.js";
 import { checkForNewPiVersion } from "../../utils/version-check.js";
 import { reportBug } from "./bug-report.js";
@@ -58,7 +59,7 @@ import { ExtensionEditorComponent } from "./components/extension-editor.js";
 import { ExtensionInputComponent } from "./components/extension-input.js";
 import { ExtensionSelectorComponent } from "./components/extension-selector.js";
 import { FooterComponent, formatTokens } from "./components/footer.js";
-import { formatKeyText, keyDisplayText, keyHint, keyLabel, keyText, rawKeyHint, } from "./components/keybinding-hints.js";
+import { formatKeyText, keyDisplayText, keyHint, keyText, rawKeyHint } from "./components/keybinding-hints.js";
 import { LoginDialogComponent } from "./components/login-dialog.js";
 import { createMermaidMarkdownTransformer } from "./components/mermaid.js";
 import { ModelSelectorComponent } from "./components/model-selector.js";
@@ -70,17 +71,18 @@ import { SkillInvocationMessageComponent } from "./components/skill-invocation-m
 import { BranchSummaryStatusIndicator, CompactionStatusIndicator, IdleStatus, RetryStatusIndicator, WorkingStatusIndicator, } from "./components/status-indicator.js";
 import { ThinkingSelectorComponent } from "./components/thinking-selector.js";
 import { ToolExecutionComponent } from "./components/tool-execution.js";
-import { ToolGroupComponent } from "./components/tool-group.js";
 import { TreeSelectorComponent } from "./components/tree-selector.js";
 import { TrustSelectorComponent } from "./components/trust-selector.js";
 import { UserMessageComponent } from "./components/user-message.js";
 import { UserMessageSelectorComponent } from "./components/user-message-selector.js";
+import { InteractiveEditorHost } from "./editor-host.js";
 import { editInExternalEditor } from "./external-editor.js";
 import { refreshModelCatalogs } from "./model-catalog-refresh.js";
 import { getModelSearchText } from "./model-search.js";
 import { shareSession } from "./session-share.js";
 import { getAvailableThemes, getAvailableThemesWithPaths, getEditorTheme, getMarkdownTheme, getThemeByName, onThemeChange, setRegisteredThemes, stopThemeWatcher, Theme, theme, } from "./theme/theme.js";
 import { InteractiveThemeController } from "./theme/theme-controller.js";
+import { appendToolRow, disposeChatRows, isToolChatComponent, PendingToolMap, ToolChatContainer, toolDetachHint, } from "./tool-chat.js";
 import { createInteractiveTui, createInteractiveTuiReference } from "./tui-renderer.js";
 export { createInteractiveTui, createInteractiveTuiReference } from "./tui-renderer.js";
 function isWorkingStatusEditor(editor) {
@@ -207,10 +209,6 @@ function formatLoginProviderCompletionDescription(provider) {
     const authTypes = provider.authTypes.map(formatAuthSelectorProviderType).join("/");
     return provider.name === provider.id ? authTypes : `${provider.name} · ${authTypes}`;
 }
-/** Chat children that host tool presentation and share image display settings. */
-function isToolChatComponent(child) {
-    return child instanceof ToolExecutionComponent || child instanceof ToolGroupComponent;
-}
 export class InteractiveMode {
     // Convenience accessors
     get session() {
@@ -252,7 +250,19 @@ export class InteractiveMode {
         this.entriesRenderedByBoundaryCompaction = new Set();
         this.streamingMessage = undefined;
         // Tool execution tracking: toolCallId -> component
-        this.pendingTools = new Map();
+        this.pendingTools = new PendingToolMap();
+        this.editorHost = new InteractiveEditorHost({
+            isSessionCommand: (name) => this.session.extensionRunner.getCommand(name) !== undefined ||
+                this.session.promptTemplates.some((template) => template.name === name) ||
+                this.skillCommands.has(name),
+            getEditor: () => this.editor,
+            getFocusedComponent: () => this.renderer.getFocusedComponent(),
+            hasOverlay: () => this.ui.hasOverlay(),
+            addTerminalInputListener: (handler) => this.addExtensionTerminalInputListener(handler),
+            setEditorText: (text) => this.editor.setText(text),
+            requestRender: () => this.ui.requestRender(),
+            showError: (message) => this.showError(message),
+        });
         // Tool output expansion state
         this.toolOutputExpanded = false;
         // Thinking block visibility state
@@ -281,7 +291,6 @@ export class InteractiveMode {
         this.extensionSelector = undefined;
         this.extensionInput = undefined;
         this.extensionEditor = undefined;
-        this.extensionEditorSubmitHandlers = new Set();
         this.extensionTerminalInputSubscriptions = new Set();
         // Extension widgets (components rendered above/below the editor)
         this.extensionWidgetsAbove = new Map();
@@ -326,7 +335,7 @@ export class InteractiveMode {
         this.ui.setClearOnShrink(this.settingsManager.getClearOnShrink());
         this.headerContainer = new Container();
         this.loadedResourcesContainer = new Container();
-        this.chatContainer = new Container();
+        this.chatContainer = new ToolChatContainer();
         this.documentContainer = new Container();
         this.documentContainer.addChild(this.headerContainer);
         this.documentContainer.addChild(this.loadedResourcesContainer);
@@ -585,7 +594,6 @@ export class InteractiveMode {
             return true;
         nextUi.start();
         this.themeController.rebindTui();
-        this.setupBackgroundInputListener();
         this.rebindExtensionTerminalInputListeners();
         if (restoreProgress &&
             this.settingsManager.getShowTerminalProgress() &&
@@ -722,6 +730,14 @@ export class InteractiveMode {
         });
         // Initialize available provider count for footer display
         await this.updateAvailableProviderCount();
+        // Flush the completed startup state before loading the remaining syntax grammars.
+        this.ui.renderNow();
+        void loadAllHighlightLanguages().then(() => {
+            if (!this.isInitialized)
+                return;
+            this.ui.invalidate();
+            this.ui.requestRender();
+        });
     }
     /**
      * Update terminal title with session name and cwd.
@@ -923,15 +939,14 @@ export class InteractiveMode {
         return undefined;
     }
     reportInstallTelemetry(version) {
-        if (!INSTALL_TELEMETRY_URL) {
-            return;
-        }
         if (process.env.PI_OFFLINE) {
             return;
         }
         if (!isInstallTelemetryEnabled(this.settingsManager)) {
             return;
         }
+        if (!INSTALL_TELEMETRY_URL)
+            return;
         void fetch(`${INSTALL_TELEMETRY_URL}?version=${encodeURIComponent(version)}`, {
             headers: {
                 "User-Agent": getPiUserAgent(version),
@@ -1438,7 +1453,7 @@ export class InteractiveMode {
                     if (result.cancelled) {
                         return { cancelled: true };
                     }
-                    this.clearChat();
+                    this.chatContainer.clear();
                     this.renderInitialMessages();
                     if (result.editorText && !this.editor.getText().trim()) {
                         this.editor.setText(result.editorText);
@@ -1575,32 +1590,14 @@ export class InteractiveMode {
             return;
         this.suggestBugReport();
     }
-    disposeChatToolComponents() {
-        for (const child of this.chatContainer.children) {
-            const disposable = child;
-            if (typeof disposable.dispose === "function") {
-                disposable.dispose();
-            }
-        }
-    }
-    clearChat() {
-        this.disposeChatToolComponents();
-        this.chatContainer.clear();
-    }
-    clearPendingTools() {
-        for (const component of this.pendingTools.values()) {
-            component.dispose();
-        }
-        this.pendingTools.clear();
-    }
     renderCurrentSessionState() {
         this.loadedResourcesContainer.clear();
-        this.clearChat();
+        this.chatContainer.clear();
         this.pendingMessagesContainer.clear();
         this.compactionQueuedMessages = [];
         this.streamingComponent = undefined;
         this.streamingMessage = undefined;
-        this.clearPendingTools();
+        this.pendingTools.clear();
         this.renderInitialMessages();
     }
     /**
@@ -1613,39 +1610,6 @@ export class InteractiveMode {
     getRegisteredToolDefinition(toolName) {
         return withBuiltInRenderers(toolName, this.session.getToolDefinition(toolName));
     }
-    createToolExecutionComponent(toolName, toolCallId, args) {
-        const component = new ToolExecutionComponent(toolName, toolCallId, args, {
-            showImages: this.settingsManager.getShowImages(),
-            imageWidthCells: this.settingsManager.getImageWidthCells(),
-            detachHint: {
-                // Everything BackgroundService.detachForeground() can move: shell tools and subagents.
-                isDetachable: (name) => name === "bash" || name === "powershell" || name === "subagent",
-                keyLabel: () => keyLabel("app.backgroundTasks.detach", { keybindings: this.keybindings }),
-            },
-        }, this.getRegisteredToolDefinition(toolName), this.ui, this.sessionManager.getCwd());
-        component.setExpanded(this.toolOutputExpanded);
-        return component;
-    }
-    appendToolExecutionComponent(component) {
-        const toolGroup = component.toolGroup?.trim();
-        if (!toolGroup) {
-            this.chatContainer.addChild(component);
-            return;
-        }
-        const children = this.chatContainer.children;
-        const lastChild = children[children.length - 1];
-        if (lastChild instanceof ToolGroupComponent && lastChild.toolGroup === toolGroup) {
-            lastChild.addTool(component);
-            return;
-        }
-        if (lastChild instanceof ToolExecutionComponent && lastChild.toolGroup?.trim() === toolGroup) {
-            const group = new ToolGroupComponent(toolGroup, [lastChild, component]);
-            group.setExpanded(this.toolOutputExpanded);
-            children[children.length - 1] = group;
-            return;
-        }
-        this.chatContainer.addChild(component);
-    }
     getMarkdownTransformers() {
         return [this.mermaidMarkdownTransformer, ...this.session.extensionRunner.getMarkdownTransformers()];
     }
@@ -1801,7 +1765,7 @@ export class InteractiveMode {
         this.renderWidgets();
     }
     resetExtensionUI() {
-        this.extensionEditorSubmitHandlers.clear();
+        this.editorHost.clear();
         if (this.extensionSelector) {
             this.hideExtensionSelector();
         }
@@ -1920,19 +1884,8 @@ export class InteractiveMode {
         }
         this.ui.requestRender();
     }
-    addExtensionTerminalInputListener(handler, options) {
-        const scopedHandler = (data) => {
-            if (options?.scope === "editor") {
-                const editor = this.editor;
-                if (this.renderer.getFocusedComponent() !== editor ||
-                    this.ui.hasOverlay() ||
-                    editor.isShowingAutocomplete?.()) {
-                    return undefined;
-                }
-            }
-            return handler(data);
-        };
-        const subscription = { handler: scopedHandler, unsubscribe: this.ui.addInputListener(scopedHandler) };
+    addExtensionTerminalInputListener(handler) {
+        const subscription = { handler, unsubscribe: this.ui.addInputListener(handler) };
         this.extensionTerminalInputSubscriptions.add(subscription);
         return () => {
             subscription.unsubscribe();
@@ -1973,11 +1926,8 @@ export class InteractiveMode {
             confirm: (title, message, opts) => this.showExtensionConfirm(title, message, opts),
             input: (title, placeholder, opts) => this.showExtensionInput(title, placeholder, opts),
             notify: (message, type) => this.showExtensionNotify(message, type),
-            onTerminalInput: (handler, options) => this.addExtensionTerminalInputListener(handler, options),
-            onEditorSubmit: (handler) => {
-                this.extensionEditorSubmitHandlers.add(handler);
-                return () => this.extensionEditorSubmitHandlers.delete(handler);
-            },
+            onTerminalInput: (handler) => this.addExtensionTerminalInputListener(handler),
+            editorHost: this.editorHost,
             setStatus: (key, text) => this.setExtensionStatus(key, text),
             setWorkingMessage: (message) => {
                 this.workingMessage = message;
@@ -1996,10 +1946,6 @@ export class InteractiveMode {
             pasteToEditor: (text) => this.editor.handleInput(`\x1b[200~${text}\x1b[201~`),
             setEditorText: (text) => this.editor.setText(text),
             getEditorText: () => this.editor.getExpandedText?.() ?? this.editor.getText(),
-            getEditorCursor: () => {
-                const editor = this.editor;
-                return editor.getCursor?.();
-            },
             editor: (title, prefill) => this.showExtensionEditor(title, prefill),
             addAutocompleteProvider: (factory) => {
                 this.autocompleteProviderWrappers.push(factory);
@@ -2332,24 +2278,10 @@ export class InteractiveMode {
         }
         this.ui.requestRender();
     }
-    setupBackgroundInputListener() {
-        this.backgroundInputUnsubscribe?.();
-        this.backgroundInputUnsubscribe = this.ui.addInputListener((data) => {
-            if (!this.keybindings.matches(data, "app.backgroundTasks.detach"))
-                return undefined;
-            if (this.isShuttingDown)
-                return { consume: true };
-            const count = this.session.background.detachForeground();
-            // Nothing can move: let the key fall through to editor bindings instead of
-            // spending it on a "nothing happened" status line.
-            if (count === 0)
-                return undefined;
-            this.showStatus(`Moved ${count} execution${count === 1 ? "" : "s"} to the background. Use /bg to manage tasks.`);
-            return { consume: true };
-        });
-    }
+    // =========================================================================
+    // Key Handlers
+    // =========================================================================
     setupKeyHandlers() {
-        this.setupBackgroundInputListener();
         // Set up handlers on defaultEditor - they use this.editor for text access
         // so they work correctly regardless of which editor is active
         this.defaultEditor.onEscape = () => {
@@ -2461,240 +2393,203 @@ export class InteractiveMode {
         this.showStatus("Startup is still in progress");
     }
     setupEditorSubmitHandler() {
-        this.defaultEditor.onSubmit = (text) => this.handleEditorSubmit(text, "steer");
-    }
-    classifyEditorSubmit(text) {
-        if (text.startsWith("!"))
-            return "bash";
-        if (!text.startsWith("/"))
-            return "prompt";
-        const name = text.slice(1).split(/\s/, 1)[0];
-        return BUILTIN_SLASH_COMMANDS.some((command) => command.name === name) ||
-            ["debug", "arminsayshi", "dementedelves"].includes(name) ||
-            this.session.extensionRunner.getCommand(name) ||
-            this.session.promptTemplates.some((template) => template.name === name) ||
-            this.skillCommands.has(name)
-            ? "command"
-            : "prompt";
-    }
-    interceptEditorSubmit(text, mode) {
-        if (this.extensionEditorSubmitHandlers.size === 0)
-            return false;
-        const event = { text, mode, kind: this.classifyEditorSubmit(text) };
-        for (const handler of this.extensionEditorSubmitHandlers) {
-            try {
-                const result = handler(event);
-                if (!result?.handled)
-                    continue;
-                this.editor.setText(result.editorText ?? "");
-                this.ui.requestRender();
-                return true;
+        this.defaultEditor.onSubmit = async (text) => {
+            text = text.trim();
+            if (!text)
+                return;
+            if (this.editorHost.intercept(text, "steer"))
+                return;
+            // Handle commands
+            if (text === "/settings") {
+                this.showSettingsSelector();
+                this.editor.setText("");
+                return;
             }
-            catch (error) {
-                // A failed interceptor must not accidentally send private input to the main agent.
-                this.editor.setText(text);
-                this.showError(`Editor submit handler failed: ${error instanceof Error ? error.message : String(error)}`);
-                return true;
+            if (text === "/scoped-models") {
+                this.editor.setText("");
+                await this.showModelsSelector();
+                return;
             }
-        }
-        return false;
-    }
-    async handleEditorSubmit(text, mode) {
-        text = text.trim();
-        if (!text)
-            return;
-        if (this.interceptEditorSubmit(text, mode))
-            return;
-        // Handle commands
-        if (text === "/settings") {
-            this.showSettingsSelector();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/scoped-models") {
-            this.editor.setText("");
-            await this.showModelsSelector();
-            return;
-        }
-        if (text === "/model" || text.startsWith("/model ")) {
-            const searchTerm = text.startsWith("/model ") ? text.slice(7).trim() : undefined;
-            this.editor.setText("");
-            await this.handleModelCommand(searchTerm);
-            return;
-        }
-        if (text === "/thinking" || text.startsWith("/thinking ")) {
-            const searchTerm = text.startsWith("/thinking ") ? text.slice(10).trim() : undefined;
-            this.editor.setText("");
-            this.handleThinkingCommand(searchTerm);
-            return;
-        }
-        if (text === "/export" || text.startsWith("/export ")) {
-            await this.handleExportCommand(text);
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/import" || text.startsWith("/import ")) {
-            await this.handleImportCommand(text);
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/share") {
-            await this.handleShareCommand();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/bug" || text.startsWith("/bug ")) {
-            const hint = text.slice("/bug".length).trim();
-            this.editor.setText("");
-            await this.handleBugCommand(hint ? hint : undefined);
-            return;
-        }
-        if (text === "/copy") {
-            await this.handleCopyCommand();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/name" || text.startsWith("/name ")) {
-            this.handleNameCommand(text);
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/session") {
-            this.handleSessionCommand();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/changelog") {
-            this.handleChangelogCommand();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/hotkeys") {
-            this.handleHotkeysCommand();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/fork") {
-            this.showUserMessageSelector();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/clone") {
-            this.editor.setText("");
-            await this.handleCloneCommand();
-            return;
-        }
-        if (text === "/tree") {
-            this.showTreeSelector();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/trust") {
-            this.showTrustSelector();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/login" || text.startsWith("/login ")) {
-            const providerRef = text.startsWith("/login ") ? text.slice(7).trim() : undefined;
-            this.editor.setText("");
-            await this.handleLoginCommand(providerRef);
-            return;
-        }
-        if (text === "/logout") {
-            this.showOAuthSelector("logout");
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/new") {
-            this.editor.setText("");
-            await this.handleClearCommand();
-            return;
-        }
-        if (text === "/compact" || text.startsWith("/compact ")) {
-            const customInstructions = text.startsWith("/compact ") ? text.slice(9).trim() : undefined;
-            this.editor.setText("");
-            await this.handleCompactCommand(customInstructions);
-            return;
-        }
-        if (text === "/reload") {
-            this.editor.setText("");
-            await this.handleReloadCommand();
-            return;
-        }
-        if (text === "/debug") {
-            this.handleDebugCommand();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/arminsayshi") {
-            this.handleArminSaysHi();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/dementedelves") {
-            this.handleDementedDelves();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/resume") {
-            this.showSessionSelector();
-            this.editor.setText("");
-            return;
-        }
-        if (text === "/quit") {
-            this.editor.setText("");
-            await this.shutdown();
-            return;
-        }
-        // Handle bash command (! for normal, !! for excluded from context)
-        if (text.startsWith("!")) {
-            const isExcluded = text.startsWith("!!");
-            const command = isExcluded ? text.slice(2).trim() : text.slice(1).trim();
-            if (command) {
-                if (this.session.isBashRunning) {
-                    this.showWarning("A bash command is already running. Press Esc to cancel it first.");
-                    this.editor.setText(text);
+            if (text === "/model" || text.startsWith("/model ")) {
+                const searchTerm = text.startsWith("/model ") ? text.slice(7).trim() : undefined;
+                this.editor.setText("");
+                await this.handleModelCommand(searchTerm);
+                return;
+            }
+            if (text === "/thinking" || text.startsWith("/thinking ")) {
+                const searchTerm = text.startsWith("/thinking ") ? text.slice(10).trim() : undefined;
+                this.editor.setText("");
+                this.handleThinkingCommand(searchTerm);
+                return;
+            }
+            if (text === "/export" || text.startsWith("/export ")) {
+                await this.handleExportCommand(text);
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/import" || text.startsWith("/import ")) {
+                await this.handleImportCommand(text);
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/share") {
+                await this.handleShareCommand();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/bug" || text.startsWith("/bug ")) {
+                const hint = text.slice("/bug".length).trim();
+                this.editor.setText("");
+                await this.handleBugCommand(hint ? hint : undefined);
+                return;
+            }
+            if (text === "/copy") {
+                await this.handleCopyCommand();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/name" || text.startsWith("/name ")) {
+                this.handleNameCommand(text);
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/session") {
+                this.handleSessionCommand();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/changelog") {
+                this.handleChangelogCommand();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/hotkeys") {
+                this.handleHotkeysCommand();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/fork") {
+                this.showUserMessageSelector();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/clone") {
+                this.editor.setText("");
+                await this.handleCloneCommand();
+                return;
+            }
+            if (text === "/tree") {
+                this.showTreeSelector();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/trust") {
+                this.showTrustSelector();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/login" || text.startsWith("/login ")) {
+                const providerRef = text.startsWith("/login ") ? text.slice(7).trim() : undefined;
+                this.editor.setText("");
+                await this.handleLoginCommand(providerRef);
+                return;
+            }
+            if (text === "/logout") {
+                this.showOAuthSelector("logout");
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/new") {
+                this.editor.setText("");
+                await this.handleClearCommand();
+                return;
+            }
+            if (text === "/compact" || text.startsWith("/compact ")) {
+                const customInstructions = text.startsWith("/compact ") ? text.slice(9).trim() : undefined;
+                this.editor.setText("");
+                await this.handleCompactCommand(customInstructions);
+                return;
+            }
+            if (text === "/reload") {
+                this.editor.setText("");
+                await this.handleReloadCommand();
+                return;
+            }
+            if (text === "/debug") {
+                this.handleDebugCommand();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/arminsayshi") {
+                this.handleArminSaysHi();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/dementedelves") {
+                this.handleDementedDelves();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/resume") {
+                this.showSessionSelector();
+                this.editor.setText("");
+                return;
+            }
+            if (text === "/quit") {
+                this.editor.setText("");
+                await this.shutdown();
+                return;
+            }
+            // Handle bash command (! for normal, !! for excluded from context)
+            if (text.startsWith("!")) {
+                const isExcluded = text.startsWith("!!");
+                const command = isExcluded ? text.slice(2).trim() : text.slice(1).trim();
+                if (command) {
+                    if (this.session.isBashRunning) {
+                        this.showWarning("A bash command is already running. Press Esc to cancel it first.");
+                        this.editor.setText(text);
+                        return;
+                    }
+                    this.editor.addToHistory?.(text);
+                    await this.handleBashCommand(command, isExcluded);
+                    this.isBashMode = false;
+                    this.updateEditorBorderColor();
                     return;
                 }
-                this.editor.addToHistory?.(text);
-                await this.handleBashCommand(command, isExcluded);
-                this.isBashMode = false;
-                this.updateEditorBorderColor();
+            }
+            // Queue input during compaction (extension commands execute immediately)
+            if (this.session.isCompacting) {
+                if (this.isExtensionCommand(text)) {
+                    this.editor.addToHistory?.(text);
+                    this.editor.setText("");
+                    await this.session.prompt(text);
+                }
+                else {
+                    this.queueCompactionMessage(text, "steer");
+                }
                 return;
             }
-        }
-        // Queue input during compaction (extension commands execute immediately)
-        if (this.session.isCompacting) {
-            if (this.isExtensionCommand(text)) {
+            // If streaming, use prompt() with steer behavior
+            // This handles extension commands (execute immediately), prompt template expansion, and queueing
+            if (this.session.isStreaming) {
                 this.editor.addToHistory?.(text);
                 this.editor.setText("");
-                await this.session.prompt(text);
+                await this.session.prompt(text, { streamingBehavior: "steer" });
+                this.updatePendingMessagesDisplay();
+                this.ui.requestRender();
+                return;
+            }
+            // Normal message submission
+            // First, move any pending bash components to chat
+            this.flushPendingBashComponents();
+            if (this.onInputCallback) {
+                this.onInputCallback(text);
             }
             else {
-                this.queueCompactionMessage(text, mode);
+                this.pendingUserInputs.push(text);
             }
-            return;
-        }
-        // If streaming, use prompt() with steer behavior
-        // This handles extension commands (execute immediately), prompt template expansion, and queueing
-        if (this.session.isStreaming) {
             this.editor.addToHistory?.(text);
-            this.editor.setText("");
-            await this.session.prompt(text, { streamingBehavior: mode });
-            this.updatePendingMessagesDisplay();
-            this.ui.requestRender();
-            return;
-        }
-        // Normal message submission
-        // First, move any pending bash components to chat
-        this.flushPendingBashComponents();
-        if (this.onInputCallback) {
-            this.onInputCallback(text);
-        }
-        else {
-            this.pendingUserInputs.push(text);
-        }
-        this.editor.addToHistory?.(text);
+        };
     }
     subscribeToAgent() {
         this.unsubscribe = this.session.subscribe(async (event) => {
@@ -2708,7 +2603,7 @@ export class InteractiveMode {
         this.footer.invalidate();
         switch (event.type) {
             case "agent_start":
-                this.clearPendingTools();
+                this.pendingTools.clear();
                 // Restore main escape handler if retry handler is still active
                 // (retry success event fires later, but we need main handler now)
                 if (this.retryEscapeHandler) {
@@ -2808,8 +2703,13 @@ export class InteractiveMode {
                     for (const content of this.streamingMessage.content) {
                         if (content.type === "toolCall") {
                             if (!this.pendingTools.has(content.id)) {
-                                const component = this.createToolExecutionComponent(content.name, content.id, content.arguments);
-                                this.appendToolExecutionComponent(component);
+                                const component = new ToolExecutionComponent(content.name, content.id, content.arguments, {
+                                    showImages: this.settingsManager.getShowImages(),
+                                    imageWidthCells: this.settingsManager.getImageWidthCells(),
+                                    detachHint: toolDetachHint(this.keybindings),
+                                }, this.getRegisteredToolDefinition(content.name), this.ui, this.sessionManager.getCwd());
+                                component.setExpanded(this.toolOutputExpanded);
+                                appendToolRow(this.chatContainer, component, this.toolOutputExpanded);
                                 this.pendingTools.set(content.id, component);
                             }
                             else {
@@ -2871,8 +2771,13 @@ export class InteractiveMode {
             case "tool_execution_start": {
                 let component = this.pendingTools.get(event.toolCallId);
                 if (!component) {
-                    component = this.createToolExecutionComponent(event.toolName, event.toolCallId, event.args);
-                    this.appendToolExecutionComponent(component);
+                    component = new ToolExecutionComponent(event.toolName, event.toolCallId, event.args, {
+                        showImages: this.settingsManager.getShowImages(),
+                        imageWidthCells: this.settingsManager.getImageWidthCells(),
+                        detachHint: toolDetachHint(this.keybindings),
+                    }, this.getRegisteredToolDefinition(event.toolName), this.ui, this.sessionManager.getCwd());
+                    component.setExpanded(this.toolOutputExpanded);
+                    appendToolRow(this.chatContainer, component, this.toolOutputExpanded);
                     this.pendingTools.set(event.toolCallId, component);
                 }
                 component.markExecutionStarted();
@@ -2906,7 +2811,7 @@ export class InteractiveMode {
                     this.streamingComponent = undefined;
                     this.streamingMessage = undefined;
                 }
-                this.clearPendingTools();
+                this.pendingTools.clear();
                 this.ui.requestRender();
                 break;
             case "agent_settled":
@@ -2947,7 +2852,7 @@ export class InteractiveMode {
                     if (entries[0]?.type !== "compaction") {
                         throw new Error("Completed compaction is missing from the session context");
                     }
-                    this.clearChat();
+                    this.chatContainer.clear();
                     // The latest compaction is prepended for model context; append it below at its chronological position.
                     this.renderSessionEntries(entries.slice(1));
                     this.addMessageToChat(createCompactionSummaryMessage(event.result.summary, event.result.tokensBefore, new Date().toISOString()));
@@ -3165,7 +3070,7 @@ export class InteractiveMode {
         }
     }
     renderSessionItems(items, options = {}) {
-        this.clearPendingTools();
+        this.pendingTools.clear();
         const renderedPendingTools = new Map();
         // Cache misses are not persisted, unlike successful cache-warming usage.
         // Re-derive them and inject them after the assistant messages that paid for them.
@@ -3196,8 +3101,13 @@ export class InteractiveMode {
                 // Render tool call components
                 for (const content of message.content) {
                     if (content.type === "toolCall") {
-                        const component = this.createToolExecutionComponent(content.name, content.id, content.arguments);
-                        this.appendToolExecutionComponent(component);
+                        const component = new ToolExecutionComponent(content.name, content.id, content.arguments, {
+                            showImages: this.settingsManager.getShowImages(),
+                            imageWidthCells: this.settingsManager.getImageWidthCells(),
+                            detachHint: toolDetachHint(this.keybindings),
+                        }, this.getRegisteredToolDefinition(content.name), this.ui, this.sessionManager.getCwd());
+                        component.setExpanded(this.toolOutputExpanded);
+                        appendToolRow(this.chatContainer, component, this.toolOutputExpanded);
                         if (message.stopReason === "aborted" || message.stopReason === "error") {
                             let errorMessage;
                             if (message.stopReason === "aborted") {
@@ -3383,7 +3293,7 @@ export class InteractiveMode {
         });
     }
     rebuildChatFromMessages() {
-        this.clearChat();
+        this.chatContainer.clear();
         this.renderSessionEntries(this.sessionManager.buildContextEntries());
     }
     // =========================================================================
@@ -3571,8 +3481,34 @@ export class InteractiveMode {
         const text = (this.editor.getExpandedText?.() ?? this.editor.getText()).trim();
         if (!text)
             return;
-        this.editor.setText("");
-        await this.handleEditorSubmit(text, "followUp");
+        if (this.editorHost.intercept(text, "followUp"))
+            return;
+        // Queue input during compaction (extension commands execute immediately)
+        if (this.session.isCompacting) {
+            if (this.isExtensionCommand(text)) {
+                this.editor.addToHistory?.(text);
+                this.editor.setText("");
+                await this.session.prompt(text);
+            }
+            else {
+                this.queueCompactionMessage(text, "followUp");
+            }
+            return;
+        }
+        // Alt+Enter queues a follow-up message (waits until agent finishes)
+        // This handles extension commands (execute immediately), prompt template expansion, and queueing
+        if (this.session.isStreaming) {
+            this.editor.addToHistory?.(text);
+            this.editor.setText("");
+            await this.session.prompt(text, { streamingBehavior: "followUp" });
+            this.updatePendingMessagesDisplay();
+            this.ui.requestRender();
+        }
+        // If not streaming, Alt+Enter acts like regular Enter (trigger onSubmit)
+        else if (this.editor.onSubmit) {
+            this.editor.setText("");
+            this.editor.onSubmit(text);
+        }
     }
     handleDequeue() {
         const restored = this.restoreQueuedMessagesToEditor();
@@ -3697,7 +3633,13 @@ export class InteractiveMode {
     showNewVersionNotification(release) {
         const action = theme.fg("accent", `${APP_NAME} update`);
         const updateInstruction = theme.fg("muted", `New version ${release.version} is available. Run `) + action;
-        const changelogLine = theme.fg("muted", UPDATE_CHANGELOG_HINT);
+        const changelogUrl = "https://pi.dev/changelog";
+        const changelogLink = getCapabilities().hyperlinks
+            ? hyperlink(theme.fg("accent", changelogUrl), changelogUrl)
+            : theme.fg("accent", changelogUrl);
+        const changelogLine = UPDATE_CHANGELOG_HINT
+            ? theme.fg("muted", UPDATE_CHANGELOG_HINT)
+            : theme.fg("muted", "Changelog: ") + changelogLink;
         const note = release.note?.trim();
         this.chatContainer.addChild(new Spacer(1));
         this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
@@ -3905,15 +3847,8 @@ export class InteractiveMode {
     showSelector(create) {
         const token = {};
         let dispose;
-        let disposed = false;
-        const disposeOnce = () => {
-            if (disposed)
-                return;
-            disposed = true;
-            dispose?.();
-        };
         const done = () => {
-            disposeOnce();
+            dispose?.();
             if (this.activeSelectorToken !== token)
                 return;
             this.activeSelectorToken = undefined;
@@ -3923,10 +3858,17 @@ export class InteractiveMode {
             this.ui.setFocus(this.editor);
         };
         const created = create(done);
-        dispose = created.dispose;
+        const release = created.dispose;
+        let released = false;
+        dispose = () => {
+            if (released)
+                return;
+            released = true;
+            release?.();
+        };
         this.disposeActiveSelector();
         this.activeSelectorToken = token;
-        this.activeSelectorDispose = disposeOnce;
+        this.activeSelectorDispose = dispose;
         this.editorContainer.clear();
         this.editorContainer.addChild(created.component);
         this.ui.setFocus(created.focus);
@@ -4613,7 +4555,7 @@ export class InteractiveMode {
                         return;
                     }
                     // Update UI
-                    this.clearChat();
+                    this.chatContainer.clear();
                     this.renderInitialMessages();
                     if (result.editorText && !this.editor.getText().trim()) {
                         this.editor.setText(result.editorText);
@@ -5754,9 +5696,6 @@ export class InteractiveMode {
         }
     }
     stop(fullscreenExitOutput = this.settingsManager.getFullscreenExitOutput()) {
-        this.extensionEditorSubmitHandlers.clear();
-        this.backgroundInputUnsubscribe?.();
-        this.backgroundInputUnsubscribe = undefined;
         this.disposeActiveSelector();
         if (this.settingsManager.getShowTerminalProgress()) {
             this.ui.terminal.setProgress(false);
@@ -5764,8 +5703,9 @@ export class InteractiveMode {
         this.clearStatusIndicator();
         this.themeController.disableAutoSync();
         this.clearExtensionTerminalInputListeners();
-        this.clearPendingTools();
-        this.disposeChatToolComponents();
+        this.editorHost.clear();
+        this.pendingTools.clear();
+        disposeChatRows(this.chatContainer);
         this.footer.dispose();
         this.footerDataProvider.dispose();
         if (this.unsubscribe) {