@mariozechner/pi-coding-agent 0.30.2 → 0.31.0

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

@@ -6,10 +6,10 @@ import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
 import { CombinedAutocompleteProvider, Container, Input, Loader, Markdown, ProcessTerminal, Spacer, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui";
-import { exec, spawnSync } from "child_process";
+import { exec, spawn, spawnSync } from "child_process";
 import { APP_NAME, getAuthPath, getDebugLogPath } from "../../config.js";
-import { isBashExecutionMessage } from "../../core/messages.js";
-import { getLatestCompactionEntry, SessionManager, SUMMARY_PREFIX, SUMMARY_SUFFIX, } from "../../core/session-manager.js";
+import { createCompactionSummaryMessage } from "../../core/messages.js";
+import { SessionManager } from "../../core/session-manager.js";
 import { loadSkills } from "../../core/skills.js";
 import { loadProjectContextFiles } from "../../core/system-prompt.js";
 import { getChangelogPath, parseChangelog } from "../../utils/changelog.js";
@@ -17,20 +17,28 @@ import { copyToClipboard } from "../../utils/clipboard.js";
 import { ArminComponent } from "./components/armin.js";
 import { AssistantMessageComponent } from "./components/assistant-message.js";
 import { BashExecutionComponent } from "./components/bash-execution.js";
-import { CompactionComponent } from "./components/compaction.js";
+import { BorderedLoader } from "./components/bordered-loader.js";
+import { BranchSummaryMessageComponent } from "./components/branch-summary-message.js";
+import { CompactionSummaryMessageComponent } from "./components/compaction-summary-message.js";
 import { CustomEditor } from "./components/custom-editor.js";
 import { DynamicBorder } from "./components/dynamic-border.js";
 import { FooterComponent } from "./components/footer.js";
+import { HookEditorComponent } from "./components/hook-editor.js";
 import { HookInputComponent } from "./components/hook-input.js";
+import { HookMessageComponent } from "./components/hook-message.js";
 import { HookSelectorComponent } from "./components/hook-selector.js";
 import { ModelSelectorComponent } from "./components/model-selector.js";
 import { OAuthSelectorComponent } from "./components/oauth-selector.js";
 import { SessionSelectorComponent } from "./components/session-selector.js";
 import { SettingsSelectorComponent } from "./components/settings-selector.js";
 import { ToolExecutionComponent } from "./components/tool-execution.js";
+import { TreeSelectorComponent } from "./components/tree-selector.js";
 import { UserMessageComponent } from "./components/user-message.js";
 import { UserMessageSelectorComponent } from "./components/user-message-selector.js";
-import { getAvailableThemes, getEditorTheme, getMarkdownTheme, onThemeChange, setTheme, theme } from "./theme/theme.js";
+import { getAvailableThemes, getEditorTheme, getMarkdownTheme, onThemeChange, setTheme, theme, } from "./theme/theme.js";
+function isExpandable(obj) {
+    return typeof obj === "object" && obj !== null && "setExpanded" in obj && typeof obj.setExpanded === "function";
+}
 export class InteractiveMode {
     setToolUIContext;
     session;
@@ -44,16 +52,18 @@ export class InteractiveMode {
     version;
     isInitialized = false;
     onInputCallback;
-    loadingAnimation = null;
+    loadingAnimation = undefined;
     lastSigintTime = 0;
     lastEscapeTime = 0;
-    changelogMarkdown = null;
+    changelogMarkdown = undefined;
+    // Status line tracking (for mutating immediately-sequential status updates)
+    lastStatusSpacer = undefined;
+    lastStatusText = undefined;
     // Streaming message tracking
-    streamingComponent = null;
+    streamingComponent = undefined;
+    streamingMessage = undefined;
     // Tool execution tracking: toolCallId -> component
     pendingTools = new Map();
-    // Track if this is the first user message (to skip spacer)
-    isFirstUserMessage = true;
     // Tool output expansion state
     toolOutputExpanded = false;
     // Thinking block visibility state
@@ -63,18 +73,19 @@ export class InteractiveMode {
     // Track if editor is in bash mode (text starts with !)
     isBashMode = false;
     // Track current bash execution component
-    bashComponent = null;
+    bashComponent = undefined;
     // Track pending bash components (shown in pending area, moved to chat on submit)
     pendingBashComponents = [];
     // Auto-compaction state
-    autoCompactionLoader = null;
+    autoCompactionLoader = undefined;
     autoCompactionEscapeHandler;
     // Auto-retry state
-    retryLoader = null;
+    retryLoader = undefined;
     retryEscapeHandler;
     // Hook UI state
-    hookSelector = null;
-    hookInput = null;
+    hookSelector = undefined;
+    hookInput = undefined;
+    hookEditor = undefined;
     // Custom tools for custom rendering
     customTools;
     // Convenience accessors
@@ -87,7 +98,7 @@ export class InteractiveMode {
     get settingsManager() {
         return this.session.settingsManager;
     }
-    constructor(session, version, changelogMarkdown = null, customTools = [], setToolUIContext = () => { }, fdPath = null) {
+    constructor(session, version, changelogMarkdown = undefined, customTools = [], setToolUIContext = () => { }, fdPath = undefined) {
         this.setToolUIContext = setToolUIContext;
         this.session = session;
         this.version = version;
@@ -100,18 +111,20 @@ export class InteractiveMode {
         this.editor = new CustomEditor(getEditorTheme());
         this.editorContainer = new Container();
         this.editorContainer.addChild(this.editor);
-        this.footer = new FooterComponent(session.state, session.modelRegistry);
+        this.footer = new FooterComponent(session);
         this.footer.setAutoCompactEnabled(session.autoCompactionEnabled);
         // Define slash commands for autocomplete
         const slashCommands = [
             { name: "settings", description: "Open settings menu" },
             { name: "model", description: "Select model (opens selector UI)" },
             { name: "export", description: "Export session to HTML file" },
+            { name: "share", description: "Share session as a secret GitHub gist" },
             { name: "copy", description: "Copy last agent message to clipboard" },
             { name: "session", description: "Show session info and stats" },
             { name: "changelog", description: "Show changelog entries" },
             { name: "hotkeys", description: "Show all keyboard shortcuts" },
             { name: "branch", description: "Create a new branch from a previous message" },
+            { name: "tree", description: "Navigate session tree (switch branches)" },
             { name: "login", description: "Login with OAuth provider" },
             { name: "logout", description: "Logout from OAuth provider" },
             { name: "new", description: "Start a new session" },
@@ -125,8 +138,13 @@ export class InteractiveMode {
             name: cmd.name,
             description: cmd.description,
         }));
+        // Convert hook commands to SlashCommand format
+        const hookCommands = (this.session.hookRunner?.getRegisteredCommands() ?? []).map((cmd) => ({
+            name: cmd.name,
+            description: cmd.description ?? "(hook command)",
+        }));
         // Setup autocomplete
-        const autocompleteProvider = new CombinedAutocompleteProvider([...slashCommands, ...fileSlashCommands], process.cwd(), fdPath);
+        const autocompleteProvider = new CombinedAutocompleteProvider([...slashCommands, ...fileSlashCommands, ...hookCommands], process.cwd(), fdPath);
         this.editor.setAutocompleteProvider(autocompleteProvider);
     }
     async init() {
@@ -267,33 +285,117 @@ export class InteractiveMode {
             this.chatContainer.addChild(new Text(theme.fg("muted", "Loaded custom tools:\n") + toolList, 0, 0));
             this.chatContainer.addChild(new Spacer(1));
         }
-        // Load session entries if any
-        const entries = this.session.sessionManager.getEntries();
-        // Set TUI-based UI context for custom tools
-        const uiContext = this.createHookUIContext();
+        // Create and set hook & tool UI context
+        const uiContext = {
+            select: (title, options) => this.showHookSelector(title, options),
+            confirm: (title, message) => this.showHookConfirm(title, message),
+            input: (title, placeholder) => this.showHookInput(title, placeholder),
+            notify: (message, type) => this.showHookNotify(message, type),
+            setStatus: (key, text) => this.setHookStatus(key, text),
+            custom: (factory) => this.showHookCustom(factory),
+            setEditorText: (text) => this.editor.setText(text),
+            getEditorText: () => this.editor.getText(),
+            editor: (title, prefill) => this.showHookEditor(title, prefill),
+            get theme() {
+                return theme;
+            },
+        };
         this.setToolUIContext(uiContext, true);
         // Notify custom tools of session start
-        await this.emitToolSessionEvent({
-            entries,
-            sessionFile: this.session.sessionFile,
-            previousSessionFile: null,
+        await this.emitCustomToolSessionEvent({
             reason: "start",
+            previousSessionFile: undefined,
         });
         const hookRunner = this.session.hookRunner;
         if (!hookRunner) {
             return; // No hooks loaded
         }
-        // Set UI context on hook runner
-        hookRunner.setUIContext(uiContext, true);
-        hookRunner.setSessionFile(this.session.sessionFile);
+        hookRunner.initialize({
+            getModel: () => this.session.model,
+            sendMessageHandler: (message, triggerTurn) => {
+                const wasStreaming = this.session.isStreaming;
+                this.session
+                    .sendHookMessage(message, triggerTurn)
+                    .then(() => {
+                    // For non-streaming cases with display=true, update UI
+                    // (streaming cases update via message_end event)
+                    if (!wasStreaming && message.display) {
+                        this.rebuildChatFromMessages();
+                    }
+                })
+                    .catch((err) => {
+                    this.showError(`Hook sendMessage failed: ${err instanceof Error ? err.message : String(err)}`);
+                });
+            },
+            appendEntryHandler: (customType, data) => {
+                this.sessionManager.appendCustomEntry(customType, data);
+            },
+            newSessionHandler: async (options) => {
+                // Stop any loading animation
+                if (this.loadingAnimation) {
+                    this.loadingAnimation.stop();
+                    this.loadingAnimation = undefined;
+                }
+                this.statusContainer.clear();
+                // Create new session
+                const success = await this.session.newSession({ parentSession: options?.parentSession });
+                if (!success) {
+                    return { cancelled: true };
+                }
+                // Call setup callback if provided
+                if (options?.setup) {
+                    await options.setup(this.sessionManager);
+                }
+                // Clear UI state
+                this.chatContainer.clear();
+                this.pendingMessagesContainer.clear();
+                this.streamingComponent = undefined;
+                this.streamingMessage = undefined;
+                this.pendingTools.clear();
+                this.chatContainer.addChild(new Spacer(1));
+                this.chatContainer.addChild(new Text(`${theme.fg("accent", "✓ New session started")}`, 1, 1));
+                this.ui.requestRender();
+                return { cancelled: false };
+            },
+            branchHandler: async (entryId) => {
+                const result = await this.session.branch(entryId);
+                if (result.cancelled) {
+                    return { cancelled: true };
+                }
+                // Update UI
+                this.chatContainer.clear();
+                this.renderInitialMessages();
+                this.editor.setText(result.selectedText);
+                this.showStatus("Branched to new session");
+                return { cancelled: false };
+            },
+            navigateTreeHandler: async (targetId, options) => {
+                const result = await this.session.navigateTree(targetId, { summarize: options?.summarize });
+                if (result.cancelled) {
+                    return { cancelled: true };
+                }
+                // Update UI
+                this.chatContainer.clear();
+                this.renderInitialMessages();
+                if (result.editorText) {
+                    this.editor.setText(result.editorText);
+                }
+                this.showStatus("Navigated to selected point");
+                return { cancelled: false };
+            },
+            isIdle: () => !this.session.isStreaming,
+            waitForIdle: () => this.session.agent.waitForIdle(),
+            abort: () => {
+                this.session.abort();
+            },
+            hasQueuedMessages: () => this.session.queuedMessageCount > 0,
+            uiContext,
+            hasUI: true,
+        });
         // Subscribe to hook errors
         hookRunner.onError((error) => {
             this.showHookError(error.hookPath, error.error);
         });
-        // Set up send handler for pi.send()
-        hookRunner.setSendHandler((text, attachments) => {
-            this.handleHookSend(text, attachments);
-        });
         // Show loaded hooks
         const hookPaths = hookRunner.getHookPaths();
         if (hookPaths.length > 0) {
@@ -301,23 +403,28 @@ export class InteractiveMode {
             this.chatContainer.addChild(new Text(theme.fg("muted", "Loaded hooks:\n") + hookList, 0, 0));
             this.chatContainer.addChild(new Spacer(1));
         }
-        // Emit session event
+        // Emit session_start event
         await hookRunner.emit({
-            type: "session",
-            entries,
-            sessionFile: this.session.sessionFile,
-            previousSessionFile: null,
-            reason: "start",
+            type: "session_start",
         });
     }
     /**
      * Emit session event to all custom tools.
      */
-    async emitToolSessionEvent(event) {
+    async emitCustomToolSessionEvent(event) {
         for (const { tool } of this.customTools.values()) {
             if (tool.onSession) {
                 try {
-                    await tool.onSession(event);
+                    await tool.onSession(event, {
+                        sessionManager: this.session.sessionManager,
+                        modelRegistry: this.session.modelRegistry,
+                        model: this.session.model,
+                        isIdle: () => !this.session.isStreaming,
+                        hasQueuedMessages: () => this.session.queuedMessageCount > 0,
+                        abort: () => {
+                            this.session.abort();
+                        },
+                    });
                 }
                 catch (err) {
                     this.showToolError(tool.name, err instanceof Error ? err.message : String(err));
@@ -334,15 +441,11 @@ export class InteractiveMode {
         this.ui.requestRender();
     }
     /**
-     * Create the UI context for hooks.
+     * Set hook status text in the footer.
      */
-    createHookUIContext() {
-        return {
-            select: (title, options) => this.showHookSelector(title, options),
-            confirm: (title, message) => this.showHookConfirm(title, message),
-            input: (title, placeholder) => this.showHookInput(title, placeholder),
-            notify: (message, type) => this.showHookNotify(message, type),
-        };
+    setHookStatus(key, text) {
+        this.footer.setHookStatus(key, text);
+        this.ui.requestRender();
     }
     /**
      * Show a selector for hooks.
@@ -354,7 +457,7 @@ export class InteractiveMode {
                 resolve(option);
             }, () => {
                 this.hideHookSelector();
-                resolve(null);
+                resolve(undefined);
             });
             this.editorContainer.clear();
             this.editorContainer.addChild(this.hookSelector);
@@ -368,7 +471,7 @@ export class InteractiveMode {
     hideHookSelector() {
         this.editorContainer.clear();
         this.editorContainer.addChild(this.editor);
-        this.hookSelector = null;
+        this.hookSelector = undefined;
         this.ui.setFocus(this.editor);
         this.ui.requestRender();
     }
@@ -389,7 +492,7 @@ export class InteractiveMode {
                 resolve(value);
             }, () => {
                 this.hideHookInput();
-                resolve(null);
+                resolve(undefined);
             });
             this.editorContainer.clear();
             this.editorContainer.addChild(this.hookInput);
@@ -403,7 +506,35 @@ export class InteractiveMode {
     hideHookInput() {
         this.editorContainer.clear();
         this.editorContainer.addChild(this.editor);
-        this.hookInput = null;
+        this.hookInput = undefined;
+        this.ui.setFocus(this.editor);
+        this.ui.requestRender();
+    }
+    /**
+     * Show a multi-line editor for hooks (with Ctrl+G support).
+     */
+    showHookEditor(title, prefill) {
+        return new Promise((resolve) => {
+            this.hookEditor = new HookEditorComponent(this.ui, title, prefill, (value) => {
+                this.hideHookEditor();
+                resolve(value);
+            }, () => {
+                this.hideHookEditor();
+                resolve(undefined);
+            });
+            this.editorContainer.clear();
+            this.editorContainer.addChild(this.hookEditor);
+            this.ui.setFocus(this.hookEditor);
+            this.ui.requestRender();
+        });
+    }
+    /**
+     * Hide the hook editor.
+     */
+    hideHookEditor() {
+        this.editorContainer.clear();
+        this.editorContainer.addChild(this.editor);
+        this.hookEditor = undefined;
         this.ui.setFocus(this.editor);
         this.ui.requestRender();
     }
@@ -421,6 +552,31 @@ export class InteractiveMode {
             this.showStatus(message);
         }
     }
+    /**
+     * Show a custom component with keyboard focus.
+     */
+    async showHookCustom(factory) {
+        const savedText = this.editor.getText();
+        return new Promise((resolve) => {
+            let component;
+            const close = (result) => {
+                component.dispose?.();
+                this.editorContainer.clear();
+                this.editorContainer.addChild(this.editor);
+                this.editor.setText(savedText);
+                this.ui.setFocus(this.editor);
+                this.ui.requestRender();
+                resolve(result);
+            };
+            Promise.resolve(factory(this.ui, theme, close)).then((c) => {
+                component = c;
+                this.editorContainer.clear();
+                this.editorContainer.addChild(component);
+                this.ui.setFocus(component);
+                this.ui.requestRender();
+            });
+        });
+    }
     /**
      * Show a hook error in the UI.
      */
@@ -433,19 +589,6 @@ export class InteractiveMode {
      * Handle pi.send() from hooks.
      * If streaming, queue the message. Otherwise, start a new agent loop.
      */
-    handleHookSend(text, attachments) {
-        if (this.session.isStreaming) {
-            // Queue the message for later (note: attachments are lost when queuing)
-            this.session.queueMessage(text);
-            this.updatePendingMessagesDisplay();
-        }
-        else {
-            // Start a new agent loop immediately
-            this.session.prompt(text, { attachments }).catch((err) => {
-                this.showError(err instanceof Error ? err.message : String(err));
-            });
-        }
-    }
     // =========================================================================
     // Key Handlers
     // =========================================================================
@@ -487,6 +630,8 @@ export class InteractiveMode {
         this.editor.onShiftTab = () => this.cycleThinkingLevel();
         this.editor.onCtrlP = () => this.cycleModel("forward");
         this.editor.onShiftCtrlP = () => this.cycleModel("backward");
+        // Global debug handler on TUI (works regardless of focus)
+        this.ui.onDebug = () => this.handleDebugCommand();
         this.editor.onCtrlL = () => this.showModelSelector();
         this.editor.onCtrlO = () => this.toggleToolOutputExpansion();
         this.editor.onCtrlT = () => this.toggleThinkingBlockVisibility();
@@ -520,6 +665,11 @@ export class InteractiveMode {
                 this.editor.setText("");
                 return;
             }
+            if (text === "/share") {
+                await this.handleShareCommand();
+                this.editor.setText("");
+                return;
+            }
             if (text === "/copy") {
                 this.handleCopyCommand();
                 this.editor.setText("");
@@ -545,6 +695,11 @@ export class InteractiveMode {
                 this.editor.setText("");
                 return;
             }
+            if (text === "/tree") {
+                this.showTreeSelector();
+                this.editor.setText("");
+                return;
+            }
             if (text === "/login") {
                 this.showOAuthSelector("login");
                 this.editor.setText("");
@@ -607,7 +762,20 @@ export class InteractiveMode {
             if (this.session.isCompacting) {
                 return;
             }
-            // Queue message if agent is streaming
+            // Hook commands always run immediately, even during streaming
+            // (if they need to interact with LLM, they use pi.sendMessage which handles queueing)
+            if (text.startsWith("/") && this.session.hookRunner) {
+                const spaceIndex = text.indexOf(" ");
+                const commandName = spaceIndex === -1 ? text.slice(1) : text.slice(1, spaceIndex);
+                const command = this.session.hookRunner.getCommand(commandName);
+                if (command) {
+                    this.editor.addToHistory(text);
+                    this.editor.setText("");
+                    await this.session.prompt(text);
+                    return;
+                }
+            }
+            // Queue regular messages if agent is streaming
             if (this.session.isStreaming) {
                 await this.session.queueMessage(text);
                 this.updatePendingMessagesDisplay();
@@ -627,14 +795,14 @@ export class InteractiveMode {
     }
     subscribeToAgent() {
         this.unsubscribe = this.session.subscribe(async (event) => {
-            await this.handleEvent(event, this.session.state);
+            await this.handleEvent(event);
         });
     }
-    async handleEvent(event, state) {
+    async handleEvent(event) {
         if (!this.isInitialized) {
             await this.init();
         }
-        this.footer.updateState(state);
+        this.footer.invalidate();
         switch (event.type) {
             case "agent_start":
                 if (this.loadingAnimation) {
@@ -646,7 +814,11 @@ export class InteractiveMode {
                 this.ui.requestRender();
                 break;
             case "message_start":
-                if (event.message.role === "user") {
+                if (event.message.role === "hookMessage") {
+                    this.addMessageToChat(event.message);
+                    this.ui.requestRender();
+                }
+                else if (event.message.role === "user") {
                     this.addMessageToChat(event.message);
                     this.editor.setText("");
                     this.updatePendingMessagesDisplay();
@@ -654,22 +826,24 @@ export class InteractiveMode {
                 }
                 else if (event.message.role === "assistant") {
                     this.streamingComponent = new AssistantMessageComponent(undefined, this.hideThinkingBlock);
+                    this.streamingMessage = event.message;
                     this.chatContainer.addChild(this.streamingComponent);
-                    this.streamingComponent.updateContent(event.message);
+                    this.streamingComponent.updateContent(this.streamingMessage);
                     this.ui.requestRender();
                 }
                 break;
             case "message_update":
                 if (this.streamingComponent && event.message.role === "assistant") {
-                    const assistantMsg = event.message;
-                    this.streamingComponent.updateContent(assistantMsg);
-                    for (const content of assistantMsg.content) {
+                    this.streamingMessage = event.message;
+                    this.streamingComponent.updateContent(this.streamingMessage);
+                    for (const content of this.streamingMessage.content) {
                         if (content.type === "toolCall") {
                             if (!this.pendingTools.has(content.id)) {
                                 this.chatContainer.addChild(new Text("", 0, 0));
                                 const component = new ToolExecutionComponent(content.name, content.arguments, {
                                     showImages: this.settingsManager.getShowImages(),
                                 }, this.customTools.get(content.name)?.tool, this.ui);
+                                component.setExpanded(this.toolOutputExpanded);
                                 this.chatContainer.addChild(component);
                                 this.pendingTools.set(content.id, component);
                             }
@@ -688,10 +862,12 @@ export class InteractiveMode {
                 if (event.message.role === "user")
                     break;
                 if (this.streamingComponent && event.message.role === "assistant") {
-                    const assistantMsg = event.message;
-                    this.streamingComponent.updateContent(assistantMsg);
-                    if (assistantMsg.stopReason === "aborted" || assistantMsg.stopReason === "error") {
-                        const errorMessage = assistantMsg.stopReason === "aborted" ? "Operation aborted" : assistantMsg.errorMessage || "Error";
+                    this.streamingMessage = event.message;
+                    this.streamingComponent.updateContent(this.streamingMessage);
+                    if (this.streamingMessage.stopReason === "aborted" || this.streamingMessage.stopReason === "error") {
+                        const errorMessage = this.streamingMessage.stopReason === "aborted"
+                            ? "Operation aborted"
+                            : this.streamingMessage.errorMessage || "Error";
                         for (const [, component] of this.pendingTools.entries()) {
                             component.updateResult({
                                 content: [{ type: "text", text: errorMessage }],
@@ -700,7 +876,14 @@ export class InteractiveMode {
                         }
                         this.pendingTools.clear();
                     }
-                    this.streamingComponent = null;
+                    else {
+                        // Args are now complete - trigger diff computation for edit tools
+                        for (const [, component] of this.pendingTools.entries()) {
+                            component.setArgsComplete();
+                        }
+                    }
+                    this.streamingComponent = undefined;
+                    this.streamingMessage = undefined;
                     this.footer.invalidate();
                 }
                 this.ui.requestRender();
@@ -710,6 +893,7 @@ export class InteractiveMode {
                     const component = new ToolExecutionComponent(event.toolName, event.args, {
                         showImages: this.settingsManager.getShowImages(),
                     }, this.customTools.get(event.toolName)?.tool, this.ui);
+                    component.setExpanded(this.toolOutputExpanded);
                     this.chatContainer.addChild(component);
                     this.pendingTools.set(event.toolCallId, component);
                     this.ui.requestRender();
@@ -736,12 +920,13 @@ export class InteractiveMode {
             case "agent_end":
                 if (this.loadingAnimation) {
                     this.loadingAnimation.stop();
-                    this.loadingAnimation = null;
+                    this.loadingAnimation = undefined;
                     this.statusContainer.clear();
                 }
                 if (this.streamingComponent) {
                     this.chatContainer.removeChild(this.streamingComponent);
-                    this.streamingComponent = null;
+                    this.streamingComponent = undefined;
+                    this.streamingMessage = undefined;
                 }
                 this.pendingTools.clear();
                 this.ui.requestRender();
@@ -773,7 +958,7 @@ export class InteractiveMode {
                 // Stop loader
                 if (this.autoCompactionLoader) {
                     this.autoCompactionLoader.stop();
-                    this.autoCompactionLoader = null;
+                    this.autoCompactionLoader = undefined;
                     this.statusContainer.clear();
                 }
                 // Handle result
@@ -784,11 +969,14 @@ export class InteractiveMode {
                     // Rebuild chat to show compacted state
                     this.chatContainer.clear();
                     this.rebuildChatFromMessages();
-                    // Add compaction component (same as manual /compact)
-                    const compactionComponent = new CompactionComponent(event.result.tokensBefore, event.result.summary);
-                    compactionComponent.setExpanded(this.toolOutputExpanded);
-                    this.chatContainer.addChild(compactionComponent);
-                    this.footer.updateState(this.session.state);
+                    // Add compaction component at bottom so user sees it without scrolling
+                    this.addMessageToChat({
+                        role: "compactionSummary",
+                        tokensBefore: event.result.tokensBefore,
+                        summary: event.result.summary,
+                        timestamp: Date.now(),
+                    });
+                    this.footer.invalidate();
                 }
                 this.ui.requestRender();
                 break;
@@ -816,7 +1004,7 @@ export class InteractiveMode {
                 // Stop loader
                 if (this.retryLoader) {
                     this.retryLoader.stop();
-                    this.retryLoader = null;
+                    this.retryLoader = undefined;
                     this.statusContainer.clear();
                 }
                 // Show error only on final failure (success shows normal response)
@@ -837,87 +1025,110 @@ export class InteractiveMode {
             : message.content.filter((c) => c.type === "text");
         return textBlocks.map((c) => c.text).join("");
     }
-    /** Show a status message in the chat */
+    /**
+     * Show a status message in the chat.
+     *
+     * If multiple status messages are emitted back-to-back (without anything else being added to the chat),
+     * we update the previous status line instead of appending new ones to avoid log spam.
+     */
     showStatus(message) {
-        this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+        const children = this.chatContainer.children;
+        const last = children.length > 0 ? children[children.length - 1] : undefined;
+        const secondLast = children.length > 1 ? children[children.length - 2] : undefined;
+        if (last && secondLast && last === this.lastStatusText && secondLast === this.lastStatusSpacer) {
+            this.lastStatusText.setText(theme.fg("dim", message));
+            this.ui.requestRender();
+            return;
+        }
+        const spacer = new Spacer(1);
+        const text = new Text(theme.fg("dim", message), 1, 0);
+        this.chatContainer.addChild(spacer);
+        this.chatContainer.addChild(text);
+        this.lastStatusSpacer = spacer;
+        this.lastStatusText = text;
         this.ui.requestRender();
     }
-    addMessageToChat(message) {
-        if (isBashExecutionMessage(message)) {
-            const component = new BashExecutionComponent(message.command, this.ui);
-            if (message.output) {
-                component.appendOutput(message.output);
+    addMessageToChat(message, options) {
+        switch (message.role) {
+            case "bashExecution": {
+                const component = new BashExecutionComponent(message.command, this.ui);
+                if (message.output) {
+                    component.appendOutput(message.output);
+                }
+                component.setComplete(message.exitCode, message.cancelled, message.truncated ? { truncated: true } : undefined, message.fullOutputPath);
+                this.chatContainer.addChild(component);
+                break;
             }
-            component.setComplete(message.exitCode, message.cancelled, message.truncated ? { truncated: true } : undefined, message.fullOutputPath);
-            this.chatContainer.addChild(component);
-            return;
-        }
-        if (message.role === "user") {
-            const textContent = this.getUserMessageText(message);
-            if (textContent) {
-                const userComponent = new UserMessageComponent(textContent, this.isFirstUserMessage);
-                this.chatContainer.addChild(userComponent);
-                this.isFirstUserMessage = false;
+            case "hookMessage": {
+                if (message.display) {
+                    const renderer = this.session.hookRunner?.getMessageRenderer(message.customType);
+                    this.chatContainer.addChild(new HookMessageComponent(message, renderer));
+                }
+                break;
+            }
+            case "compactionSummary": {
+                this.chatContainer.addChild(new Spacer(1));
+                const component = new CompactionSummaryMessageComponent(message);
+                component.setExpanded(this.toolOutputExpanded);
+                this.chatContainer.addChild(component);
+                break;
+            }
+            case "branchSummary": {
+                this.chatContainer.addChild(new Spacer(1));
+                const component = new BranchSummaryMessageComponent(message);
+                component.setExpanded(this.toolOutputExpanded);
+                this.chatContainer.addChild(component);
+                break;
+            }
+            case "user": {
+                const textContent = this.getUserMessageText(message);
+                if (textContent) {
+                    const userComponent = new UserMessageComponent(textContent);
+                    this.chatContainer.addChild(userComponent);
+                    if (options?.populateHistory) {
+                        this.editor.addToHistory(textContent);
+                    }
+                }
+                break;
+            }
+            case "assistant": {
+                const assistantComponent = new AssistantMessageComponent(message, this.hideThinkingBlock);
+                this.chatContainer.addChild(assistantComponent);
+                break;
+            }
+            case "toolResult": {
+                // Tool results are rendered inline with tool calls, handled separately
+                break;
+            }
+            default: {
+                const _exhaustive = message;
             }
-        }
-        else if (message.role === "assistant") {
-            const assistantComponent = new AssistantMessageComponent(message, this.hideThinkingBlock);
-            this.chatContainer.addChild(assistantComponent);
         }
     }
     /**
-     * Render messages to chat. Used for initial load and rebuild after compaction.
-     * @param messages Messages to render
+     * Render session context to chat. Used for initial load and rebuild after compaction.
+     * @param sessionContext Session context to render
      * @param options.updateFooter Update footer state
      * @param options.populateHistory Add user messages to editor history
      */
-    renderMessages(messages, options = {}) {
-        this.isFirstUserMessage = true;
+    renderSessionContext(sessionContext, options = {}) {
         this.pendingTools.clear();
         if (options.updateFooter) {
-            this.footer.updateState(this.session.state);
+            this.footer.invalidate();
             this.updateEditorBorderColor();
         }
-        const compactionEntry = getLatestCompactionEntry(this.sessionManager.getEntries());
-        for (const message of messages) {
-            if (isBashExecutionMessage(message)) {
+        for (const message of sessionContext.messages) {
+            // Assistant messages need special handling for tool calls
+            if (message.role === "assistant") {
                 this.addMessageToChat(message);
-                continue;
-            }
-            if (message.role === "user") {
-                const textContent = this.getUserMessageText(message);
-                if (textContent) {
-                    if (textContent.startsWith(SUMMARY_PREFIX) && compactionEntry) {
-                        const summary = textContent.slice(SUMMARY_PREFIX.length, -SUMMARY_SUFFIX.length);
-                        const component = new CompactionComponent(compactionEntry.tokensBefore, summary);
-                        component.setExpanded(this.toolOutputExpanded);
-                        this.chatContainer.addChild(component);
-                    }
-                    else {
-                        const userComponent = new UserMessageComponent(textContent, this.isFirstUserMessage);
-                        this.chatContainer.addChild(userComponent);
-                        this.isFirstUserMessage = false;
-                        if (options.populateHistory) {
-                            this.editor.addToHistory(textContent);
-                        }
-                    }
-                }
-            }
-            else if (message.role === "assistant") {
-                const assistantMsg = message;
-                const assistantComponent = new AssistantMessageComponent(assistantMsg, this.hideThinkingBlock);
-                this.chatContainer.addChild(assistantComponent);
-                for (const content of assistantMsg.content) {
+                // Render tool call components
+                for (const content of message.content) {
                     if (content.type === "toolCall") {
-                        const component = new ToolExecutionComponent(content.name, content.arguments, {
-                            showImages: this.settingsManager.getShowImages(),
-                        }, this.customTools.get(content.name)?.tool, this.ui);
+                        const component = new ToolExecutionComponent(content.name, content.arguments, { showImages: this.settingsManager.getShowImages() }, this.customTools.get(content.name)?.tool, this.ui);
+                        component.setExpanded(this.toolOutputExpanded);
                         this.chatContainer.addChild(component);
-                        if (assistantMsg.stopReason === "aborted" || assistantMsg.stopReason === "error") {
-                            const errorMessage = assistantMsg.stopReason === "aborted"
-                                ? "Operation aborted"
-                                : assistantMsg.errorMessage || "Error";
+                        if (message.stopReason === "aborted" || message.stopReason === "error") {
+                            const errorMessage = message.stopReason === "aborted" ? "Operation aborted" : message.errorMessage || "Error";
                             component.updateResult({ content: [{ type: "text", text: errorMessage }], isError: true });
                         }
                         else {
@@ -927,21 +1138,31 @@ export class InteractiveMode {
                 }
             }
             else if (message.role === "toolResult") {
+                // Match tool results to pending tool components
                 const component = this.pendingTools.get(message.toolCallId);
                 if (component) {
                     component.updateResult(message);
                     this.pendingTools.delete(message.toolCallId);
                 }
             }
+            else {
+                // All other messages use standard rendering
+                this.addMessageToChat(message, options);
+            }
         }
         this.pendingTools.clear();
         this.ui.requestRender();
     }
-    renderInitialMessages(state) {
-        this.renderMessages(state.messages, { updateFooter: true, populateHistory: true });
+    renderInitialMessages() {
+        // Get aligned messages and entries from session context
+        const context = this.sessionManager.buildSessionContext();
+        this.renderSessionContext(context, {
+            updateFooter: true,
+            populateHistory: true,
+        });
         // Show compaction info if session was compacted
-        const entries = this.sessionManager.getEntries();
-        const compactionCount = entries.filter((e) => e.type === "compaction").length;
+        const allEntries = this.sessionManager.getEntries();
+        const compactionCount = allEntries.filter((e) => e.type === "compaction").length;
         if (compactionCount > 0) {
             const times = compactionCount === 1 ? "1 time" : `${compactionCount} times`;
             this.showStatus(`Session compacted ${times}`);
@@ -956,7 +1177,9 @@ export class InteractiveMode {
         });
     }
     rebuildChatFromMessages() {
-        this.renderMessages(this.session.messages);
+        this.chatContainer.clear();
+        const context = this.sessionManager.buildSessionContext();
+        this.renderSessionContext(context);
     }
     // =========================================================================
     // Key handlers
@@ -977,21 +1200,18 @@ export class InteractiveMode {
     }
     /**
      * Gracefully shutdown the agent.
-     * Emits shutdown event to hooks, then exits.
+     * Emits shutdown event to hooks and tools, then exits.
      */
     async shutdown() {
         // Emit shutdown event to hooks
         const hookRunner = this.session.hookRunner;
-        if (hookRunner?.hasHandlers("session")) {
-            const entries = this.sessionManager.getEntries();
+        if (hookRunner?.hasHandlers("session_shutdown")) {
             await hookRunner.emit({
-                type: "session",
-                entries,
-                sessionFile: this.session.sessionFile,
-                previousSessionFile: null,
-                reason: "shutdown",
+                type: "session_shutdown",
             });
         }
+        // Emit shutdown event to custom tools
+        await this.session.emitCustomToolSessionEvent("shutdown");
         this.stop();
         process.exit(0);
     }
@@ -1018,11 +1238,11 @@ export class InteractiveMode {
     }
     cycleThinkingLevel() {
         const newLevel = this.session.cycleThinkingLevel();
-        if (newLevel === null) {
+        if (newLevel === undefined) {
             this.showStatus("Current model does not support thinking");
         }
         else {
-            this.footer.updateState(this.session.state);
+            this.footer.invalidate();
             this.updateEditorBorderColor();
             this.showStatus(`Thinking level: ${newLevel}`);
         }
@@ -1030,12 +1250,12 @@ export class InteractiveMode {
     async cycleModel(direction) {
         try {
             const result = await this.session.cycleModel(direction);
-            if (result === null) {
+            if (result === undefined) {
                 const msg = this.session.scopedModels.length > 0 ? "Only one model in scope" : "Only one model available";
                 this.showStatus(msg);
             }
             else {
-                this.footer.updateState(this.session.state);
+                this.footer.invalidate();
                 this.updateEditorBorderColor();
                 const thinkingStr = result.model.reasoning && result.thinkingLevel !== "off" ? ` (thinking: ${result.thinkingLevel})` : "";
                 this.showStatus(`Switched to ${result.model.name || result.model.id}${thinkingStr}`);
@@ -1048,13 +1268,7 @@ export class InteractiveMode {
     toggleToolOutputExpansion() {
         this.toolOutputExpanded = !this.toolOutputExpanded;
         for (const child of this.chatContainer.children) {
-            if (child instanceof ToolExecutionComponent) {
-                child.setExpanded(this.toolOutputExpanded);
-            }
-            else if (child instanceof CompactionComponent) {
-                child.setExpanded(this.toolOutputExpanded);
-            }
-            else if (child instanceof BashExecutionComponent) {
+            if (isExpandable(child)) {
                 child.setExpanded(this.toolOutputExpanded);
             }
         }
@@ -1063,13 +1277,15 @@ export class InteractiveMode {
     toggleThinkingBlockVisibility() {
         this.hideThinkingBlock = !this.hideThinkingBlock;
         this.settingsManager.setHideThinkingBlock(this.hideThinkingBlock);
-        for (const child of this.chatContainer.children) {
-            if (child instanceof AssistantMessageComponent) {
-                child.setHideThinkingBlock(this.hideThinkingBlock);
-            }
-        }
+        // Rebuild chat from session messages
         this.chatContainer.clear();
         this.rebuildChatFromMessages();
+        // If streaming, re-add the streaming component with updated visibility and re-render
+        if (this.streamingComponent && this.streamingMessage) {
+            this.streamingComponent.setHideThinkingBlock(this.hideThinkingBlock);
+            this.streamingComponent.updateContent(this.streamingMessage);
+            this.chatContainer.addChild(this.streamingComponent);
+        }
         this.showStatus(`Thinking blocks: ${this.hideThinkingBlock ? "hidden" : "visible"}`);
     }
     openExternalEditor() {
@@ -1207,7 +1423,7 @@ export class InteractiveMode {
                 },
                 onThinkingLevelChange: (level) => {
                     this.session.setThinkingLevel(level);
-                    this.footer.updateState(this.session.state);
+                    this.footer.invalidate();
                     this.updateEditorBorderColor();
                 },
                 onThemeChange: (themeName) => {
@@ -1252,7 +1468,7 @@ export class InteractiveMode {
             const selector = new ModelSelectorComponent(this.ui, this.session.model, this.settingsManager, this.session.modelRegistry, this.session.scopedModels, async (model) => {
                 try {
                     await this.session.setModel(model);
-                    this.footer.updateState(this.session.state);
+                    this.footer.invalidate();
                     this.updateEditorBorderColor();
                     done();
                     this.showStatus(`Model: ${model.id}`);
@@ -1275,8 +1491,8 @@ export class InteractiveMode {
             return;
         }
         this.showSelector((done) => {
-            const selector = new UserMessageSelectorComponent(userMessages.map((m) => ({ index: m.entryIndex, text: m.text })), async (entryIndex) => {
-                const result = await this.session.branch(entryIndex);
+            const selector = new UserMessageSelectorComponent(userMessages.map((m) => ({ id: m.entryId, text: m.text })), async (entryId) => {
+                const result = await this.session.branch(entryId);
                 if (result.cancelled) {
                     // Hook cancelled the branch
                     done();
@@ -1284,8 +1500,7 @@ export class InteractiveMode {
                     return;
                 }
                 this.chatContainer.clear();
-                this.isFirstUserMessage = true;
-                this.renderInitialMessages(this.session.state);
+                this.renderInitialMessages();
                 this.editor.setText(result.selectedText);
                 done();
                 this.showStatus("Branched to new session");
@@ -1296,6 +1511,86 @@ export class InteractiveMode {
             return { component: selector, focus: selector.getMessageList() };
         });
     }
+    showTreeSelector() {
+        const tree = this.sessionManager.getTree();
+        const realLeafId = this.sessionManager.getLeafId();
+        // Find the visible leaf for display (skip metadata entries like labels)
+        let visibleLeafId = realLeafId;
+        while (visibleLeafId) {
+            const entry = this.sessionManager.getEntry(visibleLeafId);
+            if (!entry)
+                break;
+            if (entry.type !== "label" && entry.type !== "custom")
+                break;
+            visibleLeafId = entry.parentId ?? null;
+        }
+        if (tree.length === 0) {
+            this.showStatus("No entries in session");
+            return;
+        }
+        this.showSelector((done) => {
+            const selector = new TreeSelectorComponent(tree, visibleLeafId, this.ui.terminal.rows, async (entryId) => {
+                // Selecting the visible leaf is a no-op (already there)
+                if (entryId === visibleLeafId) {
+                    done();
+                    this.showStatus("Already at this point");
+                    return;
+                }
+                // Ask about summarization
+                done(); // Close selector first
+                const wantsSummary = await this.showHookConfirm("Summarize branch?", "Create a summary of the branch you're leaving?");
+                // Set up escape handler and loader if summarizing
+                let summaryLoader;
+                const originalOnEscape = this.editor.onEscape;
+                if (wantsSummary) {
+                    this.editor.onEscape = () => {
+                        this.session.abortBranchSummary();
+                    };
+                    this.chatContainer.addChild(new Spacer(1));
+                    summaryLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), "Summarizing branch... (esc to cancel)");
+                    this.statusContainer.addChild(summaryLoader);
+                    this.ui.requestRender();
+                }
+                try {
+                    const result = await this.session.navigateTree(entryId, { summarize: wantsSummary });
+                    if (result.aborted) {
+                        // Summarization aborted - re-show tree selector
+                        this.showStatus("Branch summarization cancelled");
+                        this.showTreeSelector();
+                        return;
+                    }
+                    if (result.cancelled) {
+                        this.showStatus("Navigation cancelled");
+                        return;
+                    }
+                    // Update UI
+                    this.chatContainer.clear();
+                    this.renderInitialMessages();
+                    if (result.editorText) {
+                        this.editor.setText(result.editorText);
+                    }
+                    this.showStatus("Navigated to selected point");
+                }
+                catch (error) {
+                    this.showError(error instanceof Error ? error.message : String(error));
+                }
+                finally {
+                    if (summaryLoader) {
+                        summaryLoader.stop();
+                        this.statusContainer.clear();
+                    }
+                    this.editor.onEscape = originalOnEscape;
+                }
+            }, () => {
+                done();
+                this.ui.requestRender();
+            }, (entryId, label) => {
+                this.sessionManager.appendLabelChange(entryId, label);
+                this.ui.requestRender();
+            });
+            return { component: selector, focus: selector };
+        });
+    }
     showSessionSelector() {
         this.showSelector((done) => {
             const sessions = SessionManager.list(this.sessionManager.getCwd(), this.sessionManager.getSessionDir());
@@ -1315,19 +1610,19 @@ export class InteractiveMode {
         // Stop loading animation
         if (this.loadingAnimation) {
             this.loadingAnimation.stop();
-            this.loadingAnimation = null;
+            this.loadingAnimation = undefined;
         }
         this.statusContainer.clear();
         // Clear UI state
         this.pendingMessagesContainer.clear();
-        this.streamingComponent = null;
+        this.streamingComponent = undefined;
+        this.streamingMessage = undefined;
         this.pendingTools.clear();
         // Switch session via AgentSession (emits hook and tool session events)
         await this.session.switchSession(sessionPath);
         // Clear and re-render the chat
         this.chatContainer.clear();
-        this.isFirstUserMessage = true;
-        this.renderInitialMessages(this.session.state);
+        this.renderInitialMessages();
         this.showStatus("Resumed session");
     }
     async showOAuthSelector(mode) {
@@ -1348,8 +1643,9 @@ export class InteractiveMode {
                         await this.session.modelRegistry.authStorage.login(providerId, {
                             onAuth: (info) => {
                                 this.chatContainer.addChild(new Spacer(1));
-                                this.chatContainer.addChild(new Text(theme.fg("accent", "Opening browser to:"), 1, 0));
-                                this.chatContainer.addChild(new Text(theme.fg("accent", info.url), 1, 0));
+                                // Use OSC 8 hyperlink escape sequence for clickable link
+                                const hyperlink = `\x1b]8;;${info.url}\x07Click here to login\x1b]8;;\x07`;
+                                this.chatContainer.addChild(new Text(theme.fg("accent", hyperlink), 1, 0));
                                 if (info.instructions) {
                                     this.chatContainer.addChild(new Spacer(1));
                                     this.chatContainer.addChild(new Text(theme.fg("warning", info.instructions), 1, 0));
@@ -1435,6 +1731,93 @@ export class InteractiveMode {
             this.showError(`Failed to export session: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
+    async handleShareCommand() {
+        // Check if gh is available and logged in
+        try {
+            const authResult = spawnSync("gh", ["auth", "status"], { encoding: "utf-8" });
+            if (authResult.status !== 0) {
+                this.showError("GitHub CLI is not logged in. Run 'gh auth login' first.");
+                return;
+            }
+        }
+        catch {
+            this.showError("GitHub CLI (gh) is not installed. Install it from https://cli.github.com/");
+            return;
+        }
+        // Export to a temp file
+        const tmpFile = path.join(os.tmpdir(), "session.html");
+        try {
+            this.session.exportToHtml(tmpFile);
+        }
+        catch (error) {
+            this.showError(`Failed to export session: ${error instanceof Error ? error.message : "Unknown error"}`);
+            return;
+        }
+        // Show cancellable loader, replacing the editor
+        const loader = new BorderedLoader(this.ui, theme, "Creating gist...");
+        this.editorContainer.clear();
+        this.editorContainer.addChild(loader);
+        this.ui.setFocus(loader);
+        this.ui.requestRender();
+        const restoreEditor = () => {
+            loader.dispose();
+            this.editorContainer.clear();
+            this.editorContainer.addChild(this.editor);
+            this.ui.setFocus(this.editor);
+            try {
+                fs.unlinkSync(tmpFile);
+            }
+            catch {
+                // Ignore cleanup errors
+            }
+        };
+        // Create a secret gist asynchronously
+        let proc = null;
+        loader.onAbort = () => {
+            proc?.kill();
+            restoreEditor();
+            this.showStatus("Share cancelled");
+        };
+        try {
+            const result = await new Promise((resolve) => {
+                proc = spawn("gh", ["gist", "create", "--public=false", tmpFile]);
+                let stdout = "";
+                let stderr = "";
+                proc.stdout?.on("data", (data) => {
+                    stdout += data.toString();
+                });
+                proc.stderr?.on("data", (data) => {
+                    stderr += data.toString();
+                });
+                proc.on("close", (code) => resolve({ stdout, stderr, code }));
+            });
+            if (loader.signal.aborted)
+                return;
+            restoreEditor();
+            if (result.code !== 0) {
+                const errorMsg = result.stderr?.trim() || "Unknown error";
+                this.showError(`Failed to create gist: ${errorMsg}`);
+                return;
+            }
+            // Extract gist ID from the URL returned by gh
+            // gh returns something like: https://gist.github.com/username/GIST_ID
+            const gistUrl = result.stdout?.trim();
+            const gistId = gistUrl?.split("/").pop();
+            if (!gistId) {
+                this.showError("Failed to parse gist ID from gh output");
+                return;
+            }
+            // Create the preview URL
+            const previewUrl = `https://shittycodingagent.ai/session?${gistId}`;
+            this.showStatus(`Share URL: ${previewUrl}\nGist: ${gistUrl}`);
+        }
+        catch (error) {
+            if (!loader.signal.aborted) {
+                restoreEditor();
+                this.showError(`Failed to create gist: ${error instanceof Error ? error.message : "Unknown error"}`);
+            }
+        }
+    }
     handleCopyCommand() {
         const text = this.session.getLastAssistantText();
         if (!text) {
@@ -1542,17 +1925,17 @@ export class InteractiveMode {
         // Stop loading animation
         if (this.loadingAnimation) {
             this.loadingAnimation.stop();
-            this.loadingAnimation = null;
+            this.loadingAnimation = undefined;
         }
         this.statusContainer.clear();
-        // Reset via session (emits hook and tool session events)
-        await this.session.reset();
+        // New session via session (emits hook and tool session events)
+        await this.session.newSession();
         // Clear UI state
         this.chatContainer.clear();
         this.pendingMessagesContainer.clear();
-        this.streamingComponent = null;
+        this.streamingComponent = undefined;
+        this.streamingMessage = undefined;
         this.pendingTools.clear();
-        this.isFirstUserMessage = true;
         this.chatContainer.addChild(new Spacer(1));
         this.chatContainer.addChild(new Text(`${theme.fg("accent", "✓ New session started")}`, 1, 1));
         this.ui.requestRender();
@@ -1614,11 +1997,11 @@ export class InteractiveMode {
         }
         catch (error) {
             if (this.bashComponent) {
-                this.bashComponent.setComplete(null, false);
+                this.bashComponent.setComplete(undefined, false);
             }
             this.showError(`Bash command failed: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
-        this.bashComponent = null;
+        this.bashComponent = undefined;
         this.ui.requestRender();
     }
     async handleCompactCommand(customInstructions) {
@@ -1634,7 +2017,7 @@ export class InteractiveMode {
         // Stop loading animation
         if (this.loadingAnimation) {
             this.loadingAnimation.stop();
-            this.loadingAnimation = null;
+            this.loadingAnimation = undefined;
         }
         this.statusContainer.clear();
         // Set up escape handler during compaction
@@ -1651,13 +2034,11 @@ export class InteractiveMode {
         try {
             const result = await this.session.compact(customInstructions);
             // Rebuild UI
-            this.chatContainer.clear();
             this.rebuildChatFromMessages();
-            // Add compaction component
-            const compactionComponent = new CompactionComponent(result.tokensBefore, result.summary);
-            compactionComponent.setExpanded(this.toolOutputExpanded);
-            this.chatContainer.addChild(compactionComponent);
-            this.footer.updateState(this.session.state);
+            // Add compaction component at bottom so user sees it without scrolling
+            const msg = createCompactionSummaryMessage(result.summary, result.tokensBefore, new Date().toISOString());
+            this.addMessageToChat(msg);
+            this.footer.invalidate();
         }
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
@@ -1677,7 +2058,7 @@ export class InteractiveMode {
     stop() {
         if (this.loadingAnimation) {
             this.loadingAnimation.stop();
-            this.loadingAnimation = null;
+            this.loadingAnimation = undefined;
         }
         this.footer.dispose();
         if (this.unsubscribe) {