@apholdings/jensen-code 0.0.3 → 0.0.5

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

@@ -67,21 +67,27 @@ export class InteractiveMode {
     header;
     /** Container that normally hosts the prompt/editor, but may be replaced by selectors or extension UI. */
     editorContainer;
+    promptAreaComponent;
+    promptWidgetsVisible = true;
     footer;
     footerDataProvider;
     keybindings;
     version;
     isInitialized = false;
+    initializing = null;
     onInputCallback;
     loadingAnimation = undefined;
     pendingWorkingMessage = undefined;
     defaultWorkingMessage = "Working...";
+    startupUiGateActive = true;
+    deferredStartupNotices = [];
     lastSigintTime = 0;
     lastEscapeTime = 0;
     changelogMarkdown = undefined;
     // Status line tracking (for mutating immediately-sequential status updates)
     lastStatusSpacer = undefined;
     lastStatusText = undefined;
+    statusComponent = undefined;
     // Streaming message tracking
     streamingComponent = undefined;
     streamingMessage = undefined;
@@ -113,6 +119,13 @@ export class InteractiveMode {
     compactionQueuedMessages = [];
     // Shutdown state
     shutdownRequested = false;
+    // Epoch hardening
+    uiEpoch = 0;
+    sessionEpoch = 0;
+    isInitialMessagesRendered = false;
+    // Visual region ownership
+    statusOwner = undefined;
+    promptOwner = undefined;
     // Extension UI state
     extensionSelector = undefined;
     extensionInput = undefined;
@@ -163,7 +176,8 @@ export class InteractiveMode {
             getThinkingLevel: () => this.session.thinkingLevel || "off",
             keybindings: this.keybindings,
         });
-        this.header = new Header();
+        this.footerDataProvider = new FooterDataProvider();
+        this.header = new Header(this.session, this.footerDataProvider);
         const editorPaddingX = this.settingsManager.getEditorPaddingX();
         const autocompleteMaxVisible = this.settingsManager.getAutocompleteMaxVisible();
         this.defaultEditor = new CustomEditor(this.ui, getEditorTheme(), this.keybindings, {
@@ -177,7 +191,7 @@ export class InteractiveMode {
         this.editor = this.defaultEditor;
         this.editorContainer = new Container();
         this.editorContainer.addChild(this.editor);
-        this.footerDataProvider = new FooterDataProvider();
+        this.promptAreaComponent = this.editor;
         this.footer = new FooterComponent(session, this.footerDataProvider);
         this.footer.setAutoCompactEnabled(session.autoCompactionEnabled);
         // Load hide thinking block setting
@@ -343,10 +357,44 @@ export class InteractiveMode {
         this.chatContainer.addChild(helpContainer);
         this.ui.requestRender();
     }
-    resetSessionUiState(renderInitialMessages = false) {
+    resetInteractiveSessionUI(renderInitialMessages = false) {
+        // Invalidate all stale async callbacks
+        this.uiEpoch++;
+        this.sessionEpoch++;
+        this.isInitialMessagesRendered = false;
+        // Stop all loaders
+        if (this.loadingAnimation) {
+            this.loadingAnimation.dispose();
+            this.loadingAnimation = undefined;
+        }
+        if (this.autoCompactionLoader) {
+            this.autoCompactionLoader.dispose();
+            this.autoCompactionLoader = undefined;
+        }
+        if (this.retryLoader) {
+            this.retryLoader.dispose();
+            this.retryLoader = undefined;
+        }
+        // Clean up any transient prompt UI
+        if (this.extensionSelector) {
+            this.extensionSelector.dispose();
+            this.extensionSelector = undefined;
+        }
+        if (this.extensionInput) {
+            this.extensionInput.dispose();
+            this.extensionInput = undefined;
+        }
+        if (this.extensionEditor) {
+            this.extensionEditor = undefined;
+        }
+        this.ui.hideOverlay();
         this.clearChatContainer();
         this.pendingMessagesContainer.clear();
+        this.clearStatusOwner({ requestRender: false });
+        // Force empty the status container directly in case there are other elements left behind
         this.statusContainer.clear();
+        this.statusComponent = undefined;
+        this.restoreCanonicalEditor({ requestRender: false, text: "" });
         this.compactionQueuedMessages = [];
         this.streamingComponent = undefined;
         this.streamingMessage = undefined;
@@ -355,7 +403,8 @@ export class InteractiveMode {
         this.bashComponent = undefined;
         this.pendingWorkingMessage = undefined;
         this.isBashMode = false;
-        this.editor.setText("");
+        // Ensure clean widget state
+        this.renderWidgets(false);
         this.updatePromptChrome();
         if (renderInitialMessages) {
             this.renderInitialMessages();
@@ -365,96 +414,114 @@ export class InteractiveMode {
     async init() {
         if (this.isInitialized)
             return;
-        // Load changelog (only show new entries, skip for resumed sessions)
-        this.changelogMarkdown = this.getChangelogForDisplay();
-        // Ensure fd and rg are available (downloads if missing, adds to PATH via getBinDir)
-        // Both are needed: fd for autocomplete, rg for grep tool and bash commands
-        const [fdPath] = await Promise.all([ensureTool("fd"), ensureTool("rg")]);
-        this.fdPath = fdPath;
-        // Add header container as first child
-        this.ui.addChild(this.headerContainer);
-        // Always show the branded header/logo, even when quietStartup is enabled
-        this.headerContainer.addChild(this.header);
-        this.headerContainer.addChild(new Spacer(1));
-        // Add startup instructions only when not silenced
-        if (this.options.verbose || !this.settingsManager.getQuietStartup()) {
-            const instructions = this.buildStartupInstructionsText();
-            this.builtInHeader = new Text(instructions, 1, 0);
-            this.headerContainer.addChild(this.builtInHeader);
-            this.headerContainer.addChild(new Spacer(1));
-            // Add changelog if provided
-            if (this.changelogMarkdown) {
-                this.headerContainer.addChild(new DynamicBorder());
-                if (this.settingsManager.getCollapseChangelog()) {
-                    const versionMatch = this.changelogMarkdown.match(/##\s+\[?(\d+\.\d+\.\d+)\]?/);
-                    const latestVersion = versionMatch ? versionMatch[1] : this.version;
-                    const condensedText = `Updated to v${latestVersion}. Use ${theme.bold("/changelog")} to view full changelog.`;
-                    this.headerContainer.addChild(new Text(condensedText, 1, 0));
+        if (this.initializing)
+            return this.initializing;
+        this.initializing = (async () => {
+            try {
+                if (this.isInitialized)
+                    return;
+                // Load changelog (only show new entries, skip for resumed sessions)
+                this.changelogMarkdown = this.getChangelogForDisplay();
+                // Ensure fd and rg are available (downloads if missing, adds to PATH via getBinDir)
+                // Both are needed: fd for autocomplete, rg for grep tool and bash commands
+                const [fdPath] = await Promise.all([ensureTool("fd"), ensureTool("rg")]);
+                this.fdPath = fdPath;
+                // Add containers only if they're not already children
+                const addIfMissing = (parent, child) => {
+                    if (!parent.children.includes(child)) {
+                        parent.addChild(child);
+                    }
+                };
+                // Add header container as first child
+                addIfMissing(this.ui, this.headerContainer);
+                // Always show the branded header/logo, even when quietStartup is enabled
+                addIfMissing(this.headerContainer, this.header);
+                addIfMissing(this.headerContainer, new Spacer(1));
+                // Add startup instructions only when not silenced
+                if (this.options.verbose || !this.settingsManager.getQuietStartup()) {
+                    const instructions = this.buildStartupInstructionsText();
+                    this.builtInHeader = new Text(instructions, 1, 0);
+                    addIfMissing(this.headerContainer, this.builtInHeader);
+                    addIfMissing(this.headerContainer, new Spacer(1));
+                    // Add changelog if provided
+                    if (this.changelogMarkdown) {
+                        addIfMissing(this.headerContainer, new DynamicBorder());
+                        if (this.settingsManager.getCollapseChangelog()) {
+                            const versionMatch = this.changelogMarkdown.match(/##\s+\[?(\d+\.\d+\.\d+)\]?/);
+                            const latestVersion = versionMatch ? versionMatch[1] : this.version;
+                            const condensedText = `Updated to v${latestVersion}. Use ${theme.bold("/changelog")} to view full changelog.`;
+                            addIfMissing(this.headerContainer, new Text(condensedText, 1, 0));
+                        }
+                        else {
+                            addIfMissing(this.headerContainer, new Text(theme.bold(theme.fg("accent", "What's New")), 1, 0));
+                            addIfMissing(this.headerContainer, new Spacer(1));
+                            addIfMissing(this.headerContainer, new Markdown(this.changelogMarkdown.trim(), 1, 0, this.getMarkdownThemeWithSettings()));
+                            addIfMissing(this.headerContainer, new Spacer(1));
+                        }
+                        addIfMissing(this.headerContainer, new DynamicBorder());
+                    }
                 }
                 else {
-                    this.headerContainer.addChild(new Text(theme.bold(theme.fg("accent", "What's New")), 1, 0));
-                    this.headerContainer.addChild(new Spacer(1));
-                    this.headerContainer.addChild(new Markdown(this.changelogMarkdown.trim(), 1, 0, this.getMarkdownThemeWithSettings()));
-                    this.headerContainer.addChild(new Spacer(1));
+                    // Quiet startup: keep the logo visible, but suppress instruction text
+                    this.builtInHeader = new Text("", 0, 0);
+                    addIfMissing(this.headerContainer, this.builtInHeader);
+                    if (this.changelogMarkdown) {
+                        addIfMissing(this.headerContainer, new Spacer(1));
+                        const versionMatch = this.changelogMarkdown.match(/##\s+\[?(\d+\.\d+\.\d+)\]?/);
+                        const latestVersion = versionMatch ? versionMatch[1] : this.version;
+                        const condensedText = `Updated to v${latestVersion}. Use ${theme.bold("/changelog")} to view full changelog.`;
+                        addIfMissing(this.headerContainer, new Text(condensedText, 1, 0));
+                    }
                 }
-                this.headerContainer.addChild(new DynamicBorder());
+                addIfMissing(this.ui, this.chatContainer);
+                addIfMissing(this.ui, this.pendingMessagesContainer);
+                addIfMissing(this.ui, this.statusContainer);
+                this.renderWidgets(); // Initialize with default spacer
+                // The prompt area consists of an optional widget strip, the editor, and a bottom widget strip.
+                // Extensions should use ctx.ui.setWidget(..., { placement: "aboveEditor" }) for the top strip.
+                addIfMissing(this.ui, this.widgetContainerAbove);
+                addIfMissing(this.ui, this.editorContainer);
+                addIfMissing(this.ui, this.widgetContainerBelow);
+                addIfMissing(this.ui, this.footer);
+                this.ui.setFocus(this.editor);
+                this.updatePromptChrome();
+                this.setupKeyHandlers();
+                this.setupEditorSubmitHandler();
+                // Initialize extensions first so resources are shown before messages
+                await this.initExtensions();
+                // Render initial messages AFTER showing loaded resources
+                this.renderInitialMessages();
+                // Start the UI
+                this.ui.start();
+                this.isInitialized = true;
+                // Set terminal title
+                this.updateTerminalTitle();
+                // Subscribe to agent events
+                this.subscribeToAgent();
+                this.windowFocusChangeUnsubscribe = this.ui.onWindowFocusChange(() => {
+                    this.updatePromptChrome();
+                });
+                this.focusTargetChangeUnsubscribe = this.ui.onFocusTargetChange(() => {
+                    this.updatePromptChrome();
+                });
+                // Set up theme file watcher
+                onThemeChange(() => {
+                    this.ui.invalidate();
+                    this.updatePromptChrome();
+                    this.ui.requestRender();
+                });
+                // Set up git branch watcher (uses provider instead of footer)
+                this.footerDataProvider.onBranchChange(() => {
+                    this.ui.requestRender();
+                });
+                // Initialize available provider count for footer display
+                await this.updateAvailableProviderCount();
             }
-        }
-        else {
-            // Quiet startup: keep the logo visible, but suppress instruction text
-            this.builtInHeader = new Text("", 0, 0);
-            this.headerContainer.addChild(this.builtInHeader);
-            if (this.changelogMarkdown) {
-                this.headerContainer.addChild(new Spacer(1));
-                const versionMatch = this.changelogMarkdown.match(/##\s+\[?(\d+\.\d+\.\d+)\]?/);
-                const latestVersion = versionMatch ? versionMatch[1] : this.version;
-                const condensedText = `Updated to v${latestVersion}. Use ${theme.bold("/changelog")} to view full changelog.`;
-                this.headerContainer.addChild(new Text(condensedText, 1, 0));
-            }
-        }
-        this.ui.addChild(this.chatContainer);
-        this.ui.addChild(this.pendingMessagesContainer);
-        this.ui.addChild(this.statusContainer);
-        this.renderWidgets(); // Initialize with default spacer
-        // The prompt area consists of an optional widget strip, the editor, and a bottom widget strip.
-        // Extensions should use ctx.ui.setWidget(..., { placement: "aboveEditor" }) for the top strip.
-        this.ui.addChild(this.widgetContainerAbove);
-        this.ui.addChild(this.editorContainer);
-        this.ui.addChild(this.widgetContainerBelow);
-        this.ui.addChild(this.footer);
-        this.ui.setFocus(this.editor);
-        this.updatePromptChrome();
-        this.setupKeyHandlers();
-        this.setupEditorSubmitHandler();
-        // Initialize extensions first so resources are shown before messages
-        await this.initExtensions();
-        // Render initial messages AFTER showing loaded resources
-        this.renderInitialMessages();
-        // Start the UI
-        this.ui.start();
-        this.isInitialized = true;
-        // Set terminal title
-        this.updateTerminalTitle();
-        // Subscribe to agent events
-        this.subscribeToAgent();
-        this.windowFocusChangeUnsubscribe = this.ui.onWindowFocusChange(() => {
-            this.updatePromptChrome();
-        });
-        this.focusTargetChangeUnsubscribe = this.ui.onFocusTargetChange(() => {
-            this.updatePromptChrome();
-        });
-        // Set up theme file watcher
-        onThemeChange(() => {
-            this.ui.invalidate();
-            this.updatePromptChrome();
-            this.ui.requestRender();
-        });
-        // Set up git branch watcher (uses provider instead of footer)
-        this.footerDataProvider.onBranchChange(() => {
-            this.ui.requestRender();
-        });
-        // Initialize available provider count for footer display
-        await this.updateAvailableProviderCount();
+            finally {
+                this.initializing = null;
+            }
+        })();
+        return this.initializing;
     }
     /**
      * Update terminal title with session name and cwd.
@@ -929,22 +996,23 @@ export class InteractiveMode {
                 waitForIdle: () => this.session.agent.waitForIdle(),
                 newSession: async (options) => {
                     if (this.loadingAnimation) {
-                        this.loadingAnimation.stop();
+                        this.loadingAnimation.dispose();
                         this.loadingAnimation = undefined;
                     }
-                    this.statusContainer.clear();
+                    this.clearStatusOwner({ requestRender: false });
                     // Delegate to AgentSession (handles setup + agent state sync)
                     const success = await this.session.newSession(options);
                     if (!success) {
                         return { cancelled: true };
                     }
-                    this.resetSessionUiState(true);
+                    this.resetInteractiveSessionUI(true);
                     this.ui.requestRender();
                     return { cancelled: false };
                 },
                 fork: async (entryId) => {
+                    const capturedEpoch = this.sessionEpoch;
                     const result = await this.session.fork(entryId);
-                    if (result.cancelled) {
+                    if (result.cancelled || this.sessionEpoch !== capturedEpoch) {
                         return { cancelled: true };
                     }
                     this.clearChatContainer();
@@ -954,13 +1022,14 @@ export class InteractiveMode {
                     return { cancelled: false };
                 },
                 navigateTree: async (targetId, options) => {
+                    const capturedEpoch = this.sessionEpoch;
                     const result = await this.session.navigateTree(targetId, {
                         summarize: options?.summarize,
                         customInstructions: options?.customInstructions,
                         replaceInstructions: options?.replaceInstructions,
                         label: options?.label,
                     });
-                    if (result.cancelled) {
+                    if (result.cancelled || this.sessionEpoch !== capturedEpoch) {
                         return { cancelled: true };
                     }
                     this.clearChatContainer();
@@ -1140,17 +1209,143 @@ export class InteractiveMode {
             this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${appKey(this.keybindings, "interrupt")} to interrupt)`);
         }
     }
+    setPromptWidgetsVisible(visible) {
+        if (this.promptWidgetsVisible === visible) {
+            return;
+        }
+        this.promptWidgetsVisible = visible;
+        if (visible) {
+            this.renderWidgets(false);
+            return;
+        }
+        this.widgetContainerAbove.clear();
+        this.widgetContainerBelow.clear();
+    }
+    mountPromptOwner(component, owner, options) {
+        const focus = options?.focus ?? component;
+        const showWidgets = options?.showWidgets ?? false;
+        const requestRender = options?.requestRender ?? true;
+        const isMounted = this.promptAreaComponent === component &&
+            this.editorContainer.children.length === 1 &&
+            this.editorContainer.children[0] === component;
+        if (!isMounted) {
+            this.promptOwner = owner;
+            this.editorContainer.clear();
+            this.editorContainer.addChild(component);
+            this.promptAreaComponent = component;
+        }
+        if (process.env.NODE_ENV !== "production") {
+            if (this.editorContainer.children.length > 1) {
+                throw new Error("Invariant violation: Multiple prompt owners mounted");
+            }
+        }
+        this.setPromptWidgetsVisible(showWidgets);
+        if (this.ui.getFocusedComponent() !== focus) {
+            this.ui.setFocus(focus);
+        }
+        if (requestRender) {
+            this.ui.requestRender();
+        }
+    }
+    restoreCanonicalEditor(options) {
+        if (options?.owner !== undefined && this.promptOwner !== options.owner) {
+            return;
+        }
+        if (options?.text !== undefined) {
+            this.editor.setText(options.text);
+        }
+        const editorComponent = this.editor;
+        const isMounted = this.promptAreaComponent === editorComponent &&
+            this.editorContainer.children.length === 1 &&
+            this.editorContainer.children[0] === editorComponent;
+        if (!isMounted) {
+            this.promptOwner = undefined;
+            this.editorContainer.clear();
+            this.editorContainer.addChild(editorComponent);
+            this.promptAreaComponent = editorComponent;
+        }
+        if (process.env.NODE_ENV !== "production") {
+            if (this.editorContainer.children.length > 1) {
+                throw new Error("Invariant violation: Multiple prompt owners mounted");
+            }
+            if (this.promptAreaComponent !== editorComponent) {
+                throw new Error("Invariant violation: restoreCanonicalEditor mounted non-canonical editor");
+            }
+        }
+        this.setPromptWidgetsVisible(true);
+        if (options?.focus ?? true) {
+            this.ui.setFocus(editorComponent);
+        }
+        if (options?.requestRender ?? true) {
+            this.ui.requestRender();
+        }
+    }
+    mountStatusOwner(component, owner, options) {
+        const requestRender = options?.requestRender ?? true;
+        const isMounted = this.statusComponent === component &&
+            this.statusContainer.children.length === 1 &&
+            this.statusContainer.children[0] === component;
+        if (!isMounted) {
+            this.statusOwner = owner;
+            this.statusContainer.clear();
+            this.statusContainer.addChild(component);
+            this.statusComponent = component;
+        }
+        if (process.env.NODE_ENV !== "production") {
+            if (this.statusContainer.children.length > 1) {
+                throw new Error("Invariant violation: Multiple status owners mounted");
+            }
+        }
+        if (requestRender) {
+            this.ui.requestRender();
+        }
+    }
+    mountStatusLoader(loader, options) {
+        const row = new Container();
+        row.addChild(new Spacer(1));
+        row.addChild(loader);
+        this.mountStatusOwner(row, loader, options);
+    }
+    clearStatusOwner(options) {
+        if (options?.owner !== undefined && this.statusOwner !== options.owner) {
+            return;
+        }
+        const requestRender = options?.requestRender ?? true;
+        if (this.statusComponent !== undefined || this.statusContainer.children.length > 0) {
+            this.statusOwner = undefined;
+            this.statusContainer.clear();
+            this.statusComponent = undefined;
+        }
+        if (process.env.NODE_ENV !== "production") {
+            if (this.statusContainer.children.length > 0) {
+                throw new Error("Invariant violation: Status container not empty after clear");
+            }
+        }
+        if (requestRender) {
+            this.ui.requestRender();
+        }
+    }
     // Maximum total widget lines to prevent viewport overflow
     static MAX_WIDGET_LINES = 10;
     /**
      * Render all extension widgets to the widget container.
      */
-    renderWidgets() {
+    renderWidgets(requestRender = true) {
         if (!this.widgetContainerAbove || !this.widgetContainerBelow)
             return;
+        if (!this.promptWidgetsVisible) {
+            this.widgetContainerAbove.clear();
+            this.widgetContainerBelow.clear();
+            if (requestRender) {
+                this.ui.requestRender();
+            }
+            return;
+        }
         this.renderWidgetContainer(this.widgetContainerAbove, this.extensionWidgetsAbove, true, true, this.topBar);
         this.renderWidgetContainer(this.widgetContainerBelow, this.extensionWidgetsBelow, false, false);
-        this.ui.requestRender();
+        if (requestRender) {
+            this.ui.requestRender();
+        }
     }
     renderWidgetContainer(container, widgets, spacerWhenEmpty, leadingSpacer, builtInComponent) {
         container.clear();
@@ -1163,7 +1358,7 @@ export class InteractiveMode {
             return;
         }
         if (leadingSpacer) {
-            container.addChild(new Spacer(0));
+            container.addChild(new Spacer(1));
         }
         if (builtInComponent) {
             container.addChild(builtInComponent);
@@ -1252,14 +1447,44 @@ export class InteractiveMode {
      * Create the ExtensionUIContext for extensions.
      */
     createExtensionUIContext() {
+        const capturedUiEpoch = this.uiEpoch;
+        const capturedSessionEpoch = this.sessionEpoch;
+        const guard = (fn) => {
+            return ((...args) => {
+                if (this.uiEpoch !== capturedUiEpoch || this.sessionEpoch !== capturedSessionEpoch) {
+                    return undefined;
+                }
+                return fn(...args);
+            });
+        };
         return {
-            select: (title, options, opts) => this.showExtensionSelector(title, options, opts),
-            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) => this.addExtensionTerminalInputListener(handler),
-            setStatus: (key, text) => this.setExtensionStatus(key, text),
-            setWorkingMessage: (message) => {
+            select: (title, options, opts) => {
+                if (this.uiEpoch !== capturedUiEpoch || this.sessionEpoch !== capturedSessionEpoch) {
+                    return Promise.resolve(undefined);
+                }
+                return this.showExtensionSelector(title, options, opts);
+            },
+            confirm: (title, message, opts) => {
+                if (this.uiEpoch !== capturedUiEpoch || this.sessionEpoch !== capturedSessionEpoch) {
+                    return Promise.resolve(false);
+                }
+                return this.showExtensionConfirm(title, message, opts);
+            },
+            input: (title, placeholder, opts) => {
+                if (this.uiEpoch !== capturedUiEpoch || this.sessionEpoch !== capturedSessionEpoch) {
+                    return Promise.resolve(undefined);
+                }
+                return this.showExtensionInput(title, placeholder, opts);
+            },
+            notify: guard((message, type) => this.showExtensionNotify(message, type)),
+            onTerminalInput: (handler) => {
+                if (this.uiEpoch !== capturedUiEpoch || this.sessionEpoch !== capturedSessionEpoch) {
+                    return () => { };
+                }
+                return this.addExtensionTerminalInputListener(handler);
+            },
+            setStatus: guard((key, text) => this.setExtensionStatus(key, text)),
+            setWorkingMessage: guard((message) => {
                 if (this.loadingAnimation) {
                     if (message) {
                         this.loadingAnimation.setMessage(message);
@@ -1272,23 +1497,41 @@ export class InteractiveMode {
                     // Queue message for when loadingAnimation is created (handles agent_start race)
                     this.pendingWorkingMessage = message;
                 }
+            }),
+            setWidget: guard((key, content, options) => this.setExtensionWidget(key, content, options)),
+            setFooter: guard((factory) => this.setExtensionFooter(factory)),
+            setHeader: guard((factory) => this.setExtensionHeader(factory)),
+            setTitle: guard((title) => this.ui.terminal.setTitle(title)),
+            custom: (factory, options) => {
+                if (this.uiEpoch !== capturedUiEpoch || this.sessionEpoch !== capturedSessionEpoch) {
+                    return Promise.resolve(undefined);
+                }
+                return this.showExtensionCustom(factory, options);
+            },
+            pasteToEditor: guard((text) => this.editor.handleInput(`\x1b[200~${text}\x1b[201~`)),
+            setEditorText: guard((text) => this.editor.setText(text)),
+            getEditorText: () => {
+                if (this.uiEpoch !== capturedUiEpoch || this.sessionEpoch !== capturedSessionEpoch) {
+                    return "";
+                }
+                return this.editor.getText();
             },
-            setWidget: (key, content, options) => this.setExtensionWidget(key, content, options),
-            setFooter: (factory) => this.setExtensionFooter(factory),
-            setHeader: (factory) => this.setExtensionHeader(factory),
-            setTitle: (title) => this.ui.terminal.setTitle(title),
-            custom: (factory, options) => this.showExtensionCustom(factory, options),
-            pasteToEditor: (text) => this.editor.handleInput(`\x1b[200~${text}\x1b[201~`),
-            setEditorText: (text) => this.editor.setText(text),
-            getEditorText: () => this.editor.getText(),
-            editor: (title, prefill) => this.showExtensionEditor(title, prefill),
-            setEditorComponent: (factory) => this.setCustomEditorComponent(factory),
+            editor: (title, prefill) => {
+                if (this.uiEpoch !== capturedUiEpoch || this.sessionEpoch !== capturedSessionEpoch) {
+                    return Promise.resolve(undefined);
+                }
+                return this.showExtensionEditor(title, prefill);
+            },
+            setEditorComponent: guard((factory) => this.setCustomEditorComponent(factory)),
             get theme() {
                 return theme;
             },
             getAllThemes: () => getAvailableThemesWithPaths(),
             getTheme: (name) => getThemeByName(name),
             setTheme: (themeOrName) => {
+                if (this.uiEpoch !== capturedUiEpoch || this.sessionEpoch !== capturedSessionEpoch) {
+                    return { success: false, error: "Stale context" };
+                }
                 if (themeOrName instanceof Theme) {
                     setThemeInstance(themeOrName);
                     this.ui.requestRender();
@@ -1304,48 +1547,55 @@ export class InteractiveMode {
                 return result;
             },
             getToolsExpanded: () => this.toolOutputExpanded,
-            setToolsExpanded: (expanded) => this.setToolsExpanded(expanded),
+            setToolsExpanded: guard((expanded) => this.setToolsExpanded(expanded)),
         };
     }
     /**
      * Show a selector for extensions.
      */
     showExtensionSelector(title, options, opts) {
+        const capturedEpoch = this.uiEpoch;
         return new Promise((resolve) => {
             if (opts?.signal?.aborted) {
                 resolve(undefined);
                 return;
             }
             const onAbort = () => {
+                if (this.uiEpoch !== capturedEpoch) {
+                    resolve(undefined);
+                    return;
+                }
                 this.hideExtensionSelector();
                 resolve(undefined);
             };
             opts?.signal?.addEventListener("abort", onAbort, { once: true });
             this.extensionSelector = new ExtensionSelectorComponent(title, options, (option) => {
                 opts?.signal?.removeEventListener("abort", onAbort);
-                this.hideExtensionSelector();
+                if (this.uiEpoch !== capturedEpoch) {
+                    resolve(undefined);
+                    return;
+                }
+                this.hideExtensionSelector(this.extensionSelector);
                 resolve(option);
             }, () => {
                 opts?.signal?.removeEventListener("abort", onAbort);
-                this.hideExtensionSelector();
+                if (this.uiEpoch !== capturedEpoch) {
+                    resolve(undefined);
+                    return;
+                }
+                this.hideExtensionSelector(this.extensionSelector);
                 resolve(undefined);
             }, { tui: this.ui, timeout: opts?.timeout });
-            this.editorContainer.clear();
-            this.editorContainer.addChild(this.extensionSelector);
-            this.ui.setFocus(this.extensionSelector);
-            this.ui.requestRender();
+            this.mountPromptOwner(this.extensionSelector, this.extensionSelector);
         });
     }
     /**
      * Hide the extension selector.
      */
-    hideExtensionSelector() {
+    hideExtensionSelector(owner) {
         this.extensionSelector?.dispose();
-        this.editorContainer.clear();
-        this.editorContainer.addChild(this.editor);
         this.extensionSelector = undefined;
-        this.ui.setFocus(this.editor);
-        this.ui.requestRender();
+        this.restoreCanonicalEditor({ owner });
     }
     /**
      * Show a confirmation dialog for extensions.
@@ -1358,69 +1608,79 @@ export class InteractiveMode {
      * Show a text input for extensions.
      */
     showExtensionInput(title, placeholder, opts) {
+        const capturedEpoch = this.uiEpoch;
         return new Promise((resolve) => {
             if (opts?.signal?.aborted) {
                 resolve(undefined);
                 return;
             }
             const onAbort = () => {
-                this.hideExtensionInput();
+                if (this.uiEpoch !== capturedEpoch) {
+                    resolve(undefined);
+                    return;
+                }
+                this.hideExtensionInput(this.extensionInput);
                 resolve(undefined);
             };
             opts?.signal?.addEventListener("abort", onAbort, { once: true });
             this.extensionInput = new ExtensionInputComponent(title, placeholder, (value) => {
                 opts?.signal?.removeEventListener("abort", onAbort);
-                this.hideExtensionInput();
+                if (this.uiEpoch !== capturedEpoch) {
+                    resolve(undefined);
+                    return;
+                }
+                this.hideExtensionInput(this.extensionInput);
                 resolve(value);
             }, () => {
                 opts?.signal?.removeEventListener("abort", onAbort);
-                this.hideExtensionInput();
+                if (this.uiEpoch !== capturedEpoch) {
+                    resolve(undefined);
+                    return;
+                }
+                this.hideExtensionInput(this.extensionInput);
                 resolve(undefined);
             }, { tui: this.ui, timeout: opts?.timeout });
-            this.editorContainer.clear();
-            this.editorContainer.addChild(this.extensionInput);
-            this.ui.setFocus(this.extensionInput);
-            this.ui.requestRender();
+            this.mountPromptOwner(this.extensionInput, this.extensionInput);
         });
     }
     /**
      * Hide the extension input.
      */
-    hideExtensionInput() {
+    hideExtensionInput(owner) {
         this.extensionInput?.dispose();
-        this.editorContainer.clear();
-        this.editorContainer.addChild(this.editor);
         this.extensionInput = undefined;
-        this.ui.setFocus(this.editor);
-        this.ui.requestRender();
+        this.restoreCanonicalEditor({ owner });
     }
     /**
      * Show a multi-line editor for extensions (with Ctrl+G support).
      */
     showExtensionEditor(title, prefill) {
+        const capturedEpoch = this.uiEpoch;
         return new Promise((resolve) => {
             this.extensionEditor = new ExtensionEditorComponent(this.ui, this.keybindings, title, prefill, (value) => {
-                this.hideExtensionEditor();
+                if (this.uiEpoch !== capturedEpoch) {
+                    resolve(undefined);
+                    return;
+                }
+                this.hideExtensionEditor(this.extensionEditor);
                 resolve(value);
             }, () => {
-                this.hideExtensionEditor();
+                if (this.uiEpoch !== capturedEpoch) {
+                    resolve(undefined);
+                    return;
+                }
+                this.hideExtensionEditor(this.extensionEditor);
                 resolve(undefined);
             });
-            this.editorContainer.clear();
-            this.editorContainer.addChild(this.extensionEditor);
-            this.ui.setFocus(this.extensionEditor);
-            this.ui.requestRender();
+            this.mountPromptOwner(this.extensionEditor, this.extensionEditor);
         });
     }
     /**
      * Hide the extension editor.
      */
-    hideExtensionEditor() {
-        this.editorContainer.clear();
-        this.editorContainer.addChild(this.editor);
+    hideExtensionEditor(owner) {
         this.extensionEditor = undefined;
-        this.ui.setFocus(this.editor);
-        this.ui.requestRender();
+        this.restoreCanonicalEditor({ owner });
     }
     /**
      * Set a custom editor component from an extension.
@@ -1429,7 +1689,6 @@ export class InteractiveMode {
     setCustomEditorComponent(factory) {
         // Save text from current editor before switching
         const currentText = this.editor.getText();
-        this.editorContainer.clear();
         if (factory) {
             // Create the custom editor with tui, theme, and keybindings
             const newEditor = factory(this.ui, getEditorTheme(), this.keybindings);
@@ -1473,8 +1732,7 @@ export class InteractiveMode {
             this.defaultEditor.setText(currentText);
             this.editor = this.defaultEditor;
         }
-        this.editorContainer.addChild(this.editor);
-        this.ui.setFocus(this.editor);
+        this.restoreCanonicalEditor({ requestRender: false });
         this.updatePromptChrome();
     }
     /**
@@ -1493,22 +1751,24 @@ export class InteractiveMode {
     }
     /** Show a custom component with keyboard focus. Overlay mode renders on top of existing content. */
     async showExtensionCustom(factory, options) {
+        const capturedEpoch = this.uiEpoch;
         const savedText = this.editor.getText();
         const isOverlay = options?.overlay ?? false;
+        let component;
         const restoreEditor = () => {
-            this.editorContainer.clear();
-            this.editorContainer.addChild(this.editor);
-            this.editor.setText(savedText);
-            this.ui.setFocus(this.editor);
-            this.ui.requestRender();
+            this.restoreCanonicalEditor({ text: savedText, owner: component });
         };
         return new Promise((resolve, reject) => {
-            let component;
             let closed = false;
             const close = (result) => {
                 if (closed)
                     return;
                 closed = true;
+                if (this.uiEpoch !== capturedEpoch) {
+                    // We're stale, just resolve the promise to avoid leaks, but don't mutate UI
+                    resolve(result);
+                    return;
+                }
                 if (isOverlay)
                     this.ui.hideOverlay();
                 else
@@ -1526,6 +1786,14 @@ export class InteractiveMode {
                 .then((c) => {
                 if (closed)
                     return;
+                if (this.uiEpoch !== capturedEpoch) {
+                    closed = true;
+                    try {
+                        c?.dispose?.();
+                    }
+                    catch { }
+                    return; // Do not mount if epoch changed
+                }
                 component = c;
                 if (isOverlay) {
                     // Resolve overlay options - can be static or dynamic function
@@ -1545,10 +1813,7 @@ export class InteractiveMode {
                     options?.onHandle?.(handle);
                 }
                 else {
-                    this.editorContainer.clear();
-                    this.editorContainer.addChild(component);
-                    this.ui.setFocus(component);
-                    this.ui.requestRender();
+                    this.mountPromptOwner(component, component);
                 }
             })
                 .catch((err) => {
@@ -1841,9 +2106,13 @@ export class InteractiveMode {
         });
     }
     async handleEvent(event) {
+        const capturedEpoch = this.sessionEpoch;
         if (!this.isInitialized) {
             await this.init();
         }
+        if (this.sessionEpoch !== capturedEpoch) {
+            return; // Stale event from previous session/epoch
+        }
         this.footer.invalidate();
         switch (event.type) {
             case "agent_start":
@@ -1854,15 +2123,20 @@ export class InteractiveMode {
                     this.retryEscapeHandler = undefined;
                 }
                 if (this.retryLoader) {
-                    this.retryLoader.stop();
+                    this.retryLoader.dispose();
                     this.retryLoader = undefined;
                 }
                 if (this.loadingAnimation) {
-                    this.loadingAnimation.stop();
+                    this.loadingAnimation.dispose();
+                    const oldLoader = this.loadingAnimation;
+                    this.loadingAnimation = undefined;
+                    this.clearStatusOwner({ requestRender: false, owner: oldLoader });
+                }
+                else {
+                    this.clearStatusOwner({ requestRender: false });
                 }
-                this.statusContainer.clear();
                 this.loadingAnimation = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), this.defaultWorkingMessage);
-                this.statusContainer.addChild(this.loadingAnimation);
+                this.mountStatusLoader(this.loadingAnimation, { requestRender: false });
                 // Apply any pending working message queued before loader existed
                 if (this.pendingWorkingMessage !== undefined) {
                     if (this.pendingWorkingMessage) {
@@ -1875,14 +2149,29 @@ export class InteractiveMode {
             case "message_start":
                 if (event.message.role === "custom") {
                     this.addMessageToChat(event.message);
+                    if (this.loadingAnimation || this.statusContainer.children.length > 0) {
+                        this.ui.invalidate();
+                    }
                     this.ui.requestRender();
                 }
                 else if (event.message.role === "user") {
                     this.addMessageToChat(event.message);
                     this.updatePendingMessagesDisplay();
+                    if (this.loadingAnimation || this.statusContainer.children.length > 0) {
+                        this.ui.invalidate();
+                    }
                     this.ui.requestRender();
                 }
                 else if (event.message.role === "assistant") {
+                    // Check if we already have a streaming component for this message to prevent duplicates
+                    if (this.streamingComponent && this.streamingMessage === event.message) {
+                        return;
+                    }
+                    // If we have a different streaming component, something is wrong, but let's at least not leak it
+                    if (this.streamingComponent) {
+                        this.chatContainer.removeChild(this.streamingComponent);
+                        this.streamingComponent = undefined;
+                    }
                     this.streamingComponent = new AssistantMessageComponent(undefined, this.hideThinkingBlock, this.getMarkdownThemeWithSettings());
                     this.streamingMessage = event.message;
                     this.chatContainer.addChild(this.streamingComponent);
@@ -1985,9 +2274,10 @@ export class InteractiveMode {
             }
             case "agent_end":
                 if (this.loadingAnimation) {
-                    this.loadingAnimation.stop();
+                    this.loadingAnimation.dispose();
+                    const oldLoader = this.loadingAnimation;
                     this.loadingAnimation = undefined;
-                    this.statusContainer.clear();
+                    this.clearStatusOwner({ requestRender: false, owner: oldLoader });
                 }
                 if (this.streamingComponent) {
                     this.chatContainer.removeChild(this.streamingComponent);
@@ -1996,7 +2286,13 @@ export class InteractiveMode {
                 }
                 this.pendingTools.clear();
                 await this.checkShutdownRequested();
-                this.ui.requestRender();
+                if (this.startupUiGateActive) {
+                    this.startupUiGateActive = false;
+                    this.flushDeferredStartupNotices();
+                }
+                else {
+                    this.ui.requestRender();
+                }
                 break;
             case "auto_compaction_start": {
                 // Keep editor active; submissions are queued during compaction.
@@ -2005,11 +2301,16 @@ export class InteractiveMode {
                 this.defaultEditor.onEscape = () => {
                     this.session.abortCompaction();
                 };
+                // Stop loading animation
+                if (this.loadingAnimation) {
+                    this.loadingAnimation.dispose();
+                    this.loadingAnimation = undefined;
+                }
+                this.clearStatusOwner({ requestRender: false });
                 // Show compacting indicator with reason
-                this.statusContainer.clear();
                 const reasonText = event.reason === "overflow" ? "Context overflow detected, " : "";
                 this.autoCompactionLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), `${reasonText}Auto-compacting... (${appKey(this.keybindings, "interrupt")} to cancel)`);
-                this.statusContainer.addChild(this.autoCompactionLoader);
+                this.mountStatusLoader(this.autoCompactionLoader, { requestRender: false });
                 this.ui.requestRender();
                 break;
             }
@@ -2021,9 +2322,10 @@ export class InteractiveMode {
                 }
                 // Stop loader
                 if (this.autoCompactionLoader) {
-                    this.autoCompactionLoader.stop();
+                    this.autoCompactionLoader.dispose();
+                    const oldLoader = this.autoCompactionLoader;
                     this.autoCompactionLoader = undefined;
-                    this.statusContainer.clear();
+                    this.clearStatusOwner({ requestRender: false, owner: oldLoader });
                 }
                 // Handle result
                 if (event.aborted) {
@@ -2057,11 +2359,16 @@ export class InteractiveMode {
                 this.defaultEditor.onEscape = () => {
                     this.session.abortRetry();
                 };
+                // Stop loading animation
+                if (this.loadingAnimation) {
+                    this.loadingAnimation.dispose();
+                    this.loadingAnimation = undefined;
+                }
+                this.clearStatusOwner({ requestRender: false });
                 // Show retry indicator
-                this.statusContainer.clear();
                 const delaySeconds = Math.round(event.delayMs / 1000);
                 this.retryLoader = new Loader(this.ui, (spinner) => theme.fg("warning", spinner), (text) => theme.fg("muted", text), `Retrying (${event.attempt}/${event.maxAttempts}) in ${delaySeconds}s... (${appKey(this.keybindings, "interrupt")} to cancel)`);
-                this.statusContainer.addChild(this.retryLoader);
+                this.mountStatusLoader(this.retryLoader, { requestRender: false });
                 this.ui.requestRender();
                 break;
             }
@@ -2073,9 +2380,10 @@ export class InteractiveMode {
                 }
                 // Stop loader
                 if (this.retryLoader) {
-                    this.retryLoader.stop();
+                    this.retryLoader.dispose();
+                    const oldLoader = this.retryLoader;
                     this.retryLoader = undefined;
-                    this.statusContainer.clear();
+                    this.clearStatusOwner({ requestRender: false, owner: oldLoader });
                 }
                 // Show error only on final failure (success shows normal response)
                 if (!event.success) {
@@ -2101,7 +2409,9 @@ export class InteractiveMode {
      * 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) {
+    showStatus(message, ownerEpoch) {
+        if (ownerEpoch !== undefined && this.sessionEpoch !== ownerEpoch)
+            return;
         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;
@@ -2251,6 +2561,9 @@ export class InteractiveMode {
         this.ui.requestRender();
     }
     renderInitialMessages() {
+        if (this.isInitialMessagesRendered)
+            return;
+        this.isInitialMessagesRendered = true;
         // Get aligned messages and entries from session context
         const context = this.sessionManager.buildSessionContext();
         this.renderSessionContext(context, {
@@ -2354,6 +2667,7 @@ export class InteractiveMode {
         const text = (this.editor.getExpandedText?.() ?? this.editor.getText()).trim();
         if (!text)
             return;
+        const capturedEpoch = this.sessionEpoch;
         // Queue input during compaction (extension commands execute immediately)
         if (this.session.isCompacting) {
             if (this.isExtensionCommand(text)) {
@@ -2372,6 +2686,8 @@ export class InteractiveMode {
             this.editor.addToHistory?.(text);
             this.editor.setText("");
             await this.session.prompt(text, { streamingBehavior: "followUp" });
+            if (this.sessionEpoch !== capturedEpoch)
+                return;
             this.updatePendingMessagesDisplay();
             this.ui.requestRender();
         }
@@ -2435,8 +2751,11 @@ export class InteractiveMode {
         }
     }
     async cycleModel(direction) {
+        const capturedEpoch = this.sessionEpoch;
         try {
             const result = await this.session.cycleModel(direction);
+            if (this.sessionEpoch !== capturedEpoch)
+                return;
             if (result === undefined) {
                 const msg = this.session.scopedModels.length > 0 ? "Only one model in scope" : "Only one model available";
                 this.showStatus(msg);
@@ -2449,6 +2768,8 @@ export class InteractiveMode {
             }
         }
         catch (error) {
+            if (this.sessionEpoch !== capturedEpoch)
+                return;
             this.showError(error instanceof Error ? error.message : String(error));
         }
     }
@@ -2527,26 +2848,54 @@ export class InteractiveMode {
         this.editor.setText("");
         this.ui.requestRender();
     }
-    showError(errorMessage) {
+    showError(errorMessage, ownerEpoch) {
+        if (ownerEpoch !== undefined && this.sessionEpoch !== ownerEpoch)
+            return;
         this.chatContainer.addChild(new Spacer(1));
         this.chatContainer.addChild(new Text(theme.fg("error", `Error: ${errorMessage}`), 1, 0));
         this.ui.requestRender();
     }
-    showWarning(warningMessage) {
-        this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Text(theme.fg("warning", `Warning: ${warningMessage}`), 1, 0));
+    enqueueStartupNotice(notice) {
+        if (this.startupUiGateActive) {
+            this.deferredStartupNotices.push(notice);
+            return;
+        }
+        notice();
+        this.ui.requestRender();
+    }
+    flushDeferredStartupNotices() {
+        if (this.deferredStartupNotices.length === 0) {
+            return;
+        }
+        const notices = [...this.deferredStartupNotices];
+        this.deferredStartupNotices = [];
+        for (const notice of notices) {
+            notice();
+        }
+        this.ui.invalidate();
         this.ui.requestRender();
     }
-    showNewVersionNotification(newVersion) {
+    showWarning(warningMessage, ownerEpoch) {
+        if (ownerEpoch !== undefined && this.sessionEpoch !== ownerEpoch)
+            return;
+        this.enqueueStartupNotice(() => {
+            this.chatContainer.addChild(new Spacer(1));
+            this.chatContainer.addChild(new Text(theme.fg("warning", `Warning: ${warningMessage}`), 1, 0));
+        });
+    }
+    showNewVersionNotification(newVersion, ownerEpoch) {
+        if (ownerEpoch !== undefined && this.sessionEpoch !== ownerEpoch)
+            return;
         const action = theme.fg("accent", getUpdateInstruction(PACKAGE_NAME));
         const updateInstruction = theme.fg("muted", `New version ${newVersion} is available. `) + action;
         const changelogUrl = theme.fg("accent", "https://github.com/apholdings/jensen-code/blob/main/packages/coding-agent/CHANGELOG.md");
         const changelogLine = theme.fg("muted", "Changelog: ") + changelogUrl;
-        this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("warning", "Update Available"))}\n${updateInstruction}\n${changelogLine}`, 1, 0));
-        this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-        this.ui.requestRender();
+        this.enqueueStartupNotice(() => {
+            this.chatContainer.addChild(new Spacer(1));
+            this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
+            this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("warning", "Update Available"))}\n${updateInstruction}\n${changelogLine}`, 1, 0));
+            this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
+        });
     }
     /**
      * Get all queued messages (read-only).
@@ -2641,10 +2990,13 @@ export class InteractiveMode {
         if (this.compactionQueuedMessages.length === 0) {
             return;
         }
+        const capturedEpoch = this.sessionEpoch;
         const queuedMessages = [...this.compactionQueuedMessages];
         this.compactionQueuedMessages = [];
         this.updatePendingMessagesDisplay();
         const restoreQueue = (error) => {
+            if (this.sessionEpoch !== capturedEpoch)
+                return;
             this.session.clearQueue();
             this.compactionQueuedMessages = queuedMessages;
             this.updatePendingMessagesDisplay();
@@ -2654,6 +3006,8 @@ export class InteractiveMode {
             if (options?.willRetry) {
                 // When retry is pending, queue messages for the retry turn
                 for (const message of queuedMessages) {
+                    if (this.sessionEpoch !== capturedEpoch)
+                        return;
                     if (this.isExtensionCommand(message.text)) {
                         await this.session.prompt(message.text);
                     }
@@ -2664,7 +3018,9 @@ export class InteractiveMode {
                         await this.session.steer(message.text);
                     }
                 }
-                this.updatePendingMessagesDisplay();
+                if (this.sessionEpoch === capturedEpoch) {
+                    this.updatePendingMessagesDisplay();
+                }
                 return;
             }
             // Find first non-extension-command message to use as prompt
@@ -2672,6 +3028,8 @@ export class InteractiveMode {
             if (firstPromptIndex === -1) {
                 // All extension commands - execute them all
                 for (const message of queuedMessages) {
+                    if (this.sessionEpoch !== capturedEpoch)
+                        return;
                     await this.session.prompt(message.text);
                 }
                 return;
@@ -2681,14 +3039,20 @@ export class InteractiveMode {
             const firstPrompt = queuedMessages[firstPromptIndex];
             const rest = queuedMessages.slice(firstPromptIndex + 1);
             for (const message of preCommands) {
+                if (this.sessionEpoch !== capturedEpoch)
+                    return;
                 await this.session.prompt(message.text);
             }
+            if (this.sessionEpoch !== capturedEpoch)
+                return;
             // Send first prompt (starts streaming)
             const promptPromise = this.session.prompt(firstPrompt.text).catch((error) => {
                 restoreQueue(error);
             });
             // Queue remaining messages
             for (const message of rest) {
+                if (this.sessionEpoch !== capturedEpoch)
+                    return;
                 if (this.isExtensionCommand(message.text)) {
                     await this.session.prompt(message.text);
                 }
@@ -2699,7 +3063,9 @@ export class InteractiveMode {
                     await this.session.steer(message.text);
                 }
             }
-            this.updatePendingMessagesDisplay();
+            if (this.sessionEpoch === capturedEpoch) {
+                this.updatePendingMessagesDisplay();
+            }
             void promptPromise;
         }
         catch (error) {
@@ -2722,16 +3088,14 @@ export class InteractiveMode {
      * @param create Factory that receives a `done` callback and returns the component and focus target
      */
     showSelector(create) {
+        const capturedEpoch = this.uiEpoch;
         const done = () => {
-            this.editorContainer.clear();
-            this.editorContainer.addChild(this.editor);
-            this.ui.setFocus(this.editor);
+            if (this.uiEpoch !== capturedEpoch)
+                return;
+            this.restoreCanonicalEditor({ requestRender: false, owner: component });
         };
         const { component, focus } = create(done);
-        this.editorContainer.clear();
-        this.editorContainer.addChild(component);
-        this.ui.setFocus(focus);
-        this.ui.requestRender();
+        this.mountPromptOwner(component, component, { focus });
     }
     showSettingsSelector() {
         this.showSelector((done) => {
@@ -2870,16 +3234,23 @@ export class InteractiveMode {
             this.showModelSelector();
             return;
         }
+        const capturedEpoch = this.sessionEpoch;
         const model = await this.findExactModelMatch(searchTerm);
+        if (this.sessionEpoch !== capturedEpoch)
+            return;
         if (model) {
             try {
                 await this.session.setModel(model);
+                if (this.sessionEpoch !== capturedEpoch)
+                    return;
                 this.footer.invalidate();
                 this.updatePromptChrome();
                 // this.showStatus(`Model: ${model.id}`);
                 this.checkDaxnutsEasterEgg(model);
             }
             catch (error) {
+                if (this.sessionEpoch !== capturedEpoch)
+                    return;
                 this.showError(error instanceof Error ? error.message : String(error));
             }
             return;
@@ -3140,7 +3511,7 @@ export class InteractiveMode {
                     };
                     this.chatContainer.addChild(new Spacer(1));
                     summaryLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), `Summarizing branch... (${appKey(this.keybindings, "interrupt")} to cancel)`);
-                    this.statusContainer.addChild(summaryLoader);
+                    this.mountStatusLoader(summaryLoader, { requestRender: false });
                     this.ui.requestRender();
                 }
                 try {
@@ -3171,8 +3542,8 @@ export class InteractiveMode {
                 }
                 finally {
                     if (summaryLoader) {
-                        summaryLoader.stop();
-                        this.statusContainer.clear();
+                        summaryLoader.dispose();
+                        this.clearStatusOwner({ requestRender: false, owner: summaryLoader });
                     }
                     this.defaultEditor.onEscape = originalOnEscape;
                 }
@@ -3213,16 +3584,16 @@ export class InteractiveMode {
     async handleResumeSession(sessionPath) {
         // Stop loading animation
         if (this.loadingAnimation) {
-            this.loadingAnimation.stop();
+            this.loadingAnimation.dispose();
             this.loadingAnimation = undefined;
         }
-        this.statusContainer.clear();
+        this.clearStatusOwner({ requestRender: false });
         // Clear UI state
         this.pendingMessagesContainer.clear();
         this.compactionQueuedMessages = [];
         // Switch session via AgentSession (emits extension session events)
         await this.session.switchSession(sessionPath);
-        this.resetSessionUiState(true);
+        this.resetInteractiveSessionUI(true);
         this.showStatus("Resumed session");
     }
     async showOAuthSelector(mode) {
@@ -3273,10 +3644,7 @@ export class InteractiveMode {
             // Completion handled below
         });
         // Show dialog in editor container
-        this.editorContainer.clear();
-        this.editorContainer.addChild(dialog);
-        this.ui.setFocus(dialog);
-        this.ui.requestRender();
+        this.mountPromptOwner(dialog, dialog);
         // Promise for manual code input (racing with callback server)
         let manualCodeResolve;
         let manualCodeReject;
@@ -3285,11 +3653,11 @@ export class InteractiveMode {
             manualCodeReject = reject;
         });
         // Restore editor helper
+        const capturedEpoch = this.uiEpoch;
         const restoreEditor = () => {
-            this.editorContainer.clear();
-            this.editorContainer.addChild(this.editor);
-            this.ui.setFocus(this.editor);
-            this.ui.requestRender();
+            if (this.uiEpoch !== capturedEpoch)
+                return;
+            this.restoreCanonicalEditor({ owner: dialog });
         };
         try {
             await this.session.modelRegistry.authStorage.login(providerId, {
@@ -3331,10 +3699,14 @@ export class InteractiveMode {
             restoreEditor();
             this.session.modelRegistry.refresh();
             await this.updateAvailableProviderCount();
+            if (this.uiEpoch !== capturedEpoch)
+                return;
             this.showStatus(`Logged in to ${providerName}. Credentials saved to ${getAuthPath()}`);
         }
         catch (error) {
             restoreEditor();
+            if (this.uiEpoch !== capturedEpoch)
+                return;
             const errorMsg = error instanceof Error ? error.message : String(error);
             if (errorMsg !== "Login cancelled") {
                 this.showError(`Failed to login to ${providerName}: ${errorMsg}`);
@@ -3358,19 +3730,20 @@ export class InteractiveMode {
             cancellable: false,
         });
         const previousEditor = this.editor;
-        this.editorContainer.clear();
-        this.editorContainer.addChild(loader);
-        this.ui.setFocus(loader);
-        this.ui.requestRender();
-        const dismissLoader = (editor) => {
+        this.mountPromptOwner(loader, loader);
+        const capturedEpoch = this.uiEpoch;
+        const dismissLoader = (_editor) => {
             loader.dispose();
-            this.editorContainer.clear();
-            this.editorContainer.addChild(editor);
-            this.ui.setFocus(editor);
-            this.ui.requestRender();
+            if (this.uiEpoch !== capturedEpoch)
+                return;
+            this.restoreCanonicalEditor({ owner: loader });
         };
         try {
             await this.session.reload();
+            if (this.uiEpoch !== capturedEpoch) {
+                loader.dispose();
+                return;
+            }
             setRegisteredThemes(this.session.resourceLoader.getThemes().themes);
             this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
             const themeName = this.settingsManager.getTheme();
@@ -3408,6 +3781,10 @@ export class InteractiveMode {
             this.showStatus("Reloaded extensions, skills, prompts, themes");
         }
         catch (error) {
+            if (this.uiEpoch !== capturedEpoch) {
+                loader.dispose();
+                return;
+            }
             dismissLoader(previousEditor);
             this.showError(`Reload failed: ${error instanceof Error ? error.message : String(error)}`);
         }
@@ -3415,11 +3792,16 @@ export class InteractiveMode {
     async handleExportCommand(text) {
         const parts = text.split(/\s+/);
         const outputPath = parts.length > 1 ? parts[1] : undefined;
+        const capturedEpoch = this.uiEpoch;
         try {
             const filePath = await this.session.exportToHtml(outputPath);
+            if (this.uiEpoch !== capturedEpoch)
+                return;
             this.showStatus(`Session exported to: ${filePath}`);
         }
         catch (error) {
+            if (this.uiEpoch !== capturedEpoch)
+                return;
             this.showError(`Failed to export session: ${error instanceof Error ? error.message : "Unknown error"}`);
         }
     }
@@ -3436,26 +3818,28 @@ export class InteractiveMode {
             this.showError("GitHub CLI (gh) is not installed. Install it from https://cli.github.com/");
             return;
         }
+        const capturedEpoch = this.uiEpoch;
         // Export to a temp file
         const tmpFile = path.join(os.tmpdir(), "session.html");
         try {
             await this.session.exportToHtml(tmpFile);
+            if (this.uiEpoch !== capturedEpoch)
+                return;
         }
         catch (error) {
+            if (this.uiEpoch !== capturedEpoch)
+                return;
             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();
+        this.mountPromptOwner(loader, loader);
         const restoreEditor = () => {
             loader.dispose();
-            this.editorContainer.clear();
-            this.editorContainer.addChild(this.editor);
-            this.ui.setFocus(this.editor);
+            if (this.uiEpoch !== capturedEpoch)
+                return;
+            this.restoreCanonicalEditor({ requestRender: false, owner: loader });
             try {
                 fs.unlinkSync(tmpFile);
             }
@@ -3468,6 +3852,8 @@ export class InteractiveMode {
         loader.onAbort = () => {
             proc?.kill();
             restoreEditor();
+            if (this.uiEpoch !== capturedEpoch)
+                return;
             this.showStatus("Share cancelled");
         };
         try {
@@ -3485,6 +3871,8 @@ export class InteractiveMode {
             });
             if (loader.signal.aborted)
                 return;
+            if (this.uiEpoch !== capturedEpoch)
+                return;
             restoreEditor();
             if (result.code !== 0) {
                 const errorMsg = result.stderr?.trim() || "Unknown error";
@@ -3506,6 +3894,8 @@ export class InteractiveMode {
         catch (error) {
             if (!loader.signal.aborted) {
                 restoreEditor();
+                if (this.uiEpoch !== capturedEpoch)
+                    return;
                 this.showError(`Failed to create gist: ${error instanceof Error ? error.message : "Unknown error"}`);
             }
         }
@@ -3724,14 +4114,12 @@ export class InteractiveMode {
         this.ui.requestRender();
     }
     async handleClearCommand() {
-        // Stop loading animation
-        if (this.loadingAnimation) {
-            this.loadingAnimation.stop();
-            this.loadingAnimation = undefined;
-        }
         // New session via session (emits extension session events)
-        await this.session.newSession();
-        this.resetSessionUiState();
+        const success = await this.session.newSession();
+        if (!success) {
+            return;
+        }
+        this.resetInteractiveSessionUI(true);
         this.ui.requestRender();
     }
     handleDebugCommand() {
@@ -3777,6 +4165,7 @@ export class InteractiveMode {
         }
     }
     async handleBashCommand(command, excludeFromContext = false) {
+        const capturedEpoch = this.sessionEpoch;
         const extensionRunner = this.session.extensionRunner;
         // Emit user_bash event to let extensions intercept
         const eventResult = extensionRunner
@@ -3787,6 +4176,8 @@ export class InteractiveMode {
                 cwd: process.cwd(),
             })
             : undefined;
+        if (this.sessionEpoch !== capturedEpoch)
+            return;
         // If extension returned a full result, use it directly
         if (eventResult?.result) {
             const result = eventResult.result;
@@ -3825,16 +4216,22 @@ export class InteractiveMode {
         this.ui.requestRender();
         try {
             const result = await this.session.executeBash(command, (chunk) => {
+                if (this.sessionEpoch !== capturedEpoch)
+                    return;
                 if (this.bashComponent) {
                     this.bashComponent.appendOutput(chunk);
                     this.ui.requestRender();
                 }
             }, { excludeFromContext, operations: eventResult?.operations });
+            if (this.sessionEpoch !== capturedEpoch)
+                return;
             if (this.bashComponent) {
                 this.bashComponent.setComplete(result.exitCode, result.cancelled, result.truncated ? { truncated: true, content: result.output } : undefined, result.fullOutputPath);
             }
         }
         catch (error) {
+            if (this.sessionEpoch !== capturedEpoch)
+                return;
             if (this.bashComponent) {
                 this.bashComponent.setComplete(undefined, false);
             }
@@ -3853,12 +4250,13 @@ export class InteractiveMode {
         await this.executeCompaction(customInstructions, false);
     }
     async executeCompaction(customInstructions, isAuto = false) {
+        const capturedEpoch = this.sessionEpoch;
         // Stop loading animation
         if (this.loadingAnimation) {
-            this.loadingAnimation.stop();
+            this.loadingAnimation.dispose();
             this.loadingAnimation = undefined;
         }
-        this.statusContainer.clear();
+        this.clearStatusOwner({ requestRender: false });
         // Set up escape handler during compaction
         const originalOnEscape = this.defaultEditor.onEscape;
         this.defaultEditor.onEscape = () => {
@@ -3869,11 +4267,13 @@ export class InteractiveMode {
         const cancelHint = `(${appKey(this.keybindings, "interrupt")} to cancel)`;
         const label = isAuto ? `Auto-compacting context... ${cancelHint}` : `Compacting context... ${cancelHint}`;
         const compactingLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), label);
-        this.statusContainer.addChild(compactingLoader);
+        this.mountStatusLoader(compactingLoader, { requestRender: false });
         this.ui.requestRender();
         let result;
         try {
             result = await this.session.compact(customInstructions);
+            if (this.sessionEpoch !== capturedEpoch)
+                return undefined;
             // Rebuild UI
             this.rebuildChatFromMessages();
             // Add compaction component at bottom so user sees it without scrolling
@@ -3882,6 +4282,8 @@ export class InteractiveMode {
             this.footer.invalidate();
         }
         catch (error) {
+            if (this.sessionEpoch !== capturedEpoch)
+                return undefined;
             const message = error instanceof Error ? error.message : String(error);
             if (message === "Compaction cancelled" || (error instanceof Error && error.name === "AbortError")) {
                 this.showError("Compaction cancelled");
@@ -3891,18 +4293,30 @@ export class InteractiveMode {
             }
         }
         finally {
-            compactingLoader.stop();
-            this.statusContainer.clear();
-            this.defaultEditor.onEscape = originalOnEscape;
+            if (this.sessionEpoch === capturedEpoch) {
+                compactingLoader.dispose();
+                this.clearStatusOwner({ requestRender: false, owner: compactingLoader });
+                this.defaultEditor.onEscape = originalOnEscape;
+            }
+        }
+        if (this.sessionEpoch === capturedEpoch) {
+            void this.flushCompactionQueue({ willRetry: false });
         }
-        void this.flushCompactionQueue({ willRetry: false });
         return result;
     }
     stop() {
         if (this.loadingAnimation) {
-            this.loadingAnimation.stop();
+            this.loadingAnimation.dispose();
             this.loadingAnimation = undefined;
         }
+        if (this.autoCompactionLoader) {
+            this.autoCompactionLoader.dispose();
+            this.autoCompactionLoader = undefined;
+        }
+        if (this.retryLoader) {
+            this.retryLoader.dispose();
+            this.retryLoader = undefined;
+        }
         this.clearExtensionTerminalInputListeners();
         this.footer.dispose();
         this.footerDataProvider.dispose();