@earendil-works/pi-coding-agent 0.83.0 → 0.84.0

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

@@ -6,7 +6,8 @@ import * as crypto from "node:crypto";
 import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
-import { CombinedAutocompleteProvider, Container, fuzzyFilter, getCapabilities, hyperlink, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TUI, visibleWidth, } from "@earendil-works/pi-tui";
+import * as TuiLayouts from "@earendil-works/pi-tui";
+import { CombinedAutocompleteProvider, Container, fuzzyFilter, getCapabilities, hyperlink, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TuiAltScreen, TuiMainScreen, visibleWidth, } from "@earendil-works/pi-tui";
 import chalk from "chalk";
 import { spawn, spawnSync } from "child_process";
 import { APP_NAME, APP_TITLE, CONFIG_DIR_NAME, getAgentDir, getAuthPath, getDebugLogPath, getDocsPath, getShareViewerUrl, VERSION, } from "../../config.js";
@@ -17,7 +18,8 @@ import { FooterDataProvider } from "../../core/footer-data-provider.js";
 import { configureHttpDispatcher, formatHttpIdleTimeoutMs } from "../../core/http-dispatcher.js";
 import { KeybindingsManager } from "../../core/keybindings.js";
 import { createCompactionSummaryMessage } from "../../core/messages.js";
-import { defaultModelPerProvider, findExactModelReferenceMatch, resolveModelScope, resolveModelScopeWithDiagnostics, } from "../../core/model-resolver.js";
+import { defaultModelPerProvider, findExactModelReferenceMatch, resolveModelScopeFromModels, } from "../../core/model-resolver.js";
+import { CredentialSynchronizationError } from "../../core/model-runtime.js";
 import { DefaultPackageManager } from "../../core/package-manager.js";
 import { formatMissingSessionCwdPrompt, MissingSessionCwdError } from "../../core/session-cwd.js";
 import { SessionManager, sessionEntryToContextMessages } from "../../core/session-manager.js";
@@ -29,6 +31,7 @@ import { getChangelogPath, getNewEntries, normalizeChangelogLinks, parseChangelo
 import { copyToClipboard, readClipboardText } from "../../utils/clipboard.js";
 import { extensionForImageMimeType, readClipboardImage } from "../../utils/clipboard-image.js";
 import { parseGitUrl } from "../../utils/git.js";
+import { openBrowser } from "../../utils/open-browser.js";
 import { getCwdRelativePath } from "../../utils/paths.js";
 import { getPiUserAgent } from "../../utils/pi-user-agent.js";
 import { killTrackedDetachedChildren } from "../../utils/shell.js";
@@ -52,6 +55,7 @@ import { ExtensionSelectorComponent } from "./components/extension-selector.js";
 import { FooterComponent, formatTokens } from "./components/footer.js";
 import { formatKeyText, keyDisplayText, keyHint, keyText, rawKeyHint } from "./components/keybinding-hints.js";
 import { LoginDialogComponent } from "./components/login-dialog.js";
+import { createMermaidMarkdownTransformer } from "./components/mermaid.js";
 import { ModelSelectorComponent } from "./components/model-selector.js";
 import { formatAuthSelectorProviderType, OAuthSelectorComponent, } from "./components/oauth-selector.js";
 import { ScopedModelsSelectorComponent } from "./components/scoped-models-selector.js";
@@ -161,11 +165,48 @@ function formatLoginProviderCompletionDescription(provider) {
     const authTypes = provider.authTypes.map(formatAuthSelectorProviderType).join("/");
     return provider.name === provider.id ? authTypes : `${provider.name} · ${authTypes}`;
 }
+/** Composition root for selecting the interactive terminal renderer. */
+export function createInteractiveTui(options) {
+    const terminal = options.terminal ?? new ProcessTerminal();
+    if (options.tuiMode === "fullscreen") {
+        return new TuiAltScreen(terminal, options.showHardwareCursor, options.logDirectory, { openUrl: openBrowser });
+    }
+    return new TuiMainScreen(terminal, options.showHardwareCursor, options.logDirectory);
+}
+/** Stable reference for components while InteractiveMode replaces the active renderer. */
+export function createInteractiveTuiReference(getTui) {
+    return new Proxy({}, {
+        get: (_target, property) => {
+            const tui = getTui();
+            const value = Reflect.get(tui, property, tui);
+            if (typeof value !== "function")
+                return value;
+            return (...args) => {
+                const tui = getTui();
+                const method = Reflect.get(tui, property, tui);
+                if (typeof method !== "function")
+                    throw new TypeError(`TUI property ${String(property)} is not callable`);
+                return Reflect.apply(method, tui, args);
+            };
+        },
+        set: (_target, property, value) => {
+            const tui = getTui();
+            return Reflect.set(tui, property, value, tui);
+        },
+        has: (_target, property) => Reflect.has(getTui(), property),
+        getPrototypeOf: () => Reflect.getPrototypeOf(getTui()),
+    });
+}
 export class InteractiveMode {
     runtimeHost;
+    renderer;
     ui;
+    mainScreenRenderState;
     loadedResourcesContainer;
     chatContainer;
+    documentContainer;
+    transcriptScrollView;
+    fullscreenLayoutRoot;
     pendingMessagesContainer;
     statusContainer;
     defaultEditor;
@@ -175,7 +216,10 @@ export class InteractiveMode {
     autocompleteProviderWrappers = [];
     fdPath;
     editorContainer;
+    activeSelectorToken;
+    activeSelectorDispose;
     footer;
+    footerContainer;
     footerDataProvider;
     // Stored so the same manager can be injected into custom editors, selectors, and extension UI.
     keybindings;
@@ -209,6 +253,10 @@ export class InteractiveMode {
     // Thinking block visibility state
     hideThinkingBlock = false;
     outputPad = 1;
+    mermaidMarkdownTransformer = createMermaidMarkdownTransformer({
+        getMode: () => this.settingsManager.getMermaidRenderingMode(),
+        theme,
+    });
     // Skill commands: command name -> skill file path
     skillCommands = new Map();
     // Agent subscription unsubscribe function
@@ -232,7 +280,7 @@ export class InteractiveMode {
     extensionSelector = undefined;
     extensionInput = undefined;
     extensionEditor = undefined;
-    extensionTerminalInputUnsubscribers = new Set();
+    extensionTerminalInputSubscriptions = new Set();
     // Extension widgets (components rendered above/below the editor)
     extensionWidgetsAbove = new Map();
     extensionWidgetsBelow = new Map();
@@ -264,7 +312,8 @@ export class InteractiveMode {
     }
     constructor(runtimeHost, options = {}) {
         this.runtimeHost = runtimeHost;
-        this.options = options;
+        const tuiMode = options.tuiMode ?? this.settingsManager.getTuiMode();
+        this.options = { ...options, tuiMode };
         this.autoTrustOnReloadCwd = options.autoTrustOnReloadCwd;
         this.runtimeHost.setBeforeSessionInvalidate(() => {
             this.resetExtensionUI();
@@ -273,11 +322,20 @@ export class InteractiveMode {
             await this.rebindCurrentSession({ renderBeforeBind: true });
         });
         this.version = VERSION;
-        this.ui = new TUI(new ProcessTerminal(), this.settingsManager.getShowHardwareCursor(), getAgentDir());
+        this.renderer = createInteractiveTui({
+            tuiMode,
+            showHardwareCursor: this.settingsManager.getShowHardwareCursor(),
+            logDirectory: getAgentDir(),
+        });
+        this.ui = createInteractiveTuiReference(() => this.renderer);
         this.ui.setClearOnShrink(this.settingsManager.getClearOnShrink());
         this.headerContainer = new Container();
         this.loadedResourcesContainer = new Container();
         this.chatContainer = new Container();
+        this.documentContainer = new Container();
+        this.documentContainer.addChild(this.headerContainer);
+        this.documentContainer.addChild(this.loadedResourcesContainer);
+        this.documentContainer.addChild(this.chatContainer);
         this.pendingMessagesContainer = new Container();
         this.statusContainer = new Container();
         this.widgetContainerAbove = new Container();
@@ -296,6 +354,8 @@ export class InteractiveMode {
         this.footerDataProvider = new FooterDataProvider(this.sessionManager.getCwd());
         this.footer = new FooterComponent(this.session, this.footerDataProvider);
         this.footer.setAutoCompactEnabled(this.session.autoCompactionEnabled);
+        this.footerContainer = new Container();
+        this.footerContainer.addChild(this.footer);
         // Load hide thinking block setting
         this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
         this.outputPad = this.settingsManager.getOutputPad();
@@ -351,11 +411,10 @@ export class InteractiveMode {
         }));
         const modelCommand = slashCommands.find((command) => command.name === "model");
         if (modelCommand) {
-            modelCommand.getArgumentCompletions = async (prefix) => {
-                // Get available models (scoped or from registry)
+            modelCommand.getArgumentCompletions = (prefix) => {
                 const models = this.session.scopedModels.length > 0
                     ? this.session.scopedModels.map((s) => s.model)
-                    : await this.session.modelRuntime.getAvailable();
+                    : this.session.modelRuntime.getAvailableSnapshot();
                 if (models.length === 0)
                     return null;
                 // Create items with provider/id format
@@ -456,6 +515,72 @@ export class InteractiveMode {
         }
         this.chatContainer.addChild(new DynamicBorder());
     }
+    mountInteractiveTui(tui, components) {
+        for (const component of components)
+            tui.addChild(component);
+        if (TuiLayouts.isViewportTUI(tui)) {
+            if (!this.fullscreenLayoutRoot)
+                throw new Error("Fullscreen layout is not initialized");
+            tui.setLayoutRoot(this.fullscreenLayoutRoot);
+        }
+    }
+    stopInteractiveTui() {
+        if (this.renderer.mode === "fullscreen") {
+            while (this.renderer.hasOverlayEntries)
+                this.renderer.hideOverlay();
+            this.switchTuiMode("regular", false, false);
+            this.renderer.renderNow();
+        }
+        this.ui.stop();
+    }
+    switchTuiMode(mode, restoreProgress = true, startRenderer = true) {
+        const previousUi = this.renderer;
+        if (mode === previousUi.mode)
+            return true;
+        if (previousUi.hasOverlayEntries)
+            return false;
+        const components = [...previousUi.children];
+        const focus = previousUi.getFocusedComponent();
+        const terminal = previousUi.terminal;
+        const showHardwareCursor = previousUi.getShowHardwareCursor();
+        const clearOnShrink = previousUi.getClearOnShrink();
+        const onDebug = previousUi.onDebug;
+        if (previousUi instanceof TuiMainScreen) {
+            this.mainScreenRenderState = previousUi.captureRenderState();
+        }
+        previousUi.stop({ preserveScreen: true });
+        previousUi.setFocus(null);
+        previousUi.clear();
+        if (TuiLayouts.isViewportTUI(previousUi))
+            previousUi.setLayoutRoot(undefined);
+        const nextUi = createInteractiveTui({
+            tuiMode: mode,
+            showHardwareCursor,
+            logDirectory: getAgentDir(),
+            terminal,
+        });
+        nextUi.setClearOnShrink(clearOnShrink);
+        nextUi.onDebug = onDebug;
+        if (nextUi instanceof TuiMainScreen && this.mainScreenRenderState) {
+            nextUi.restoreRenderState(this.mainScreenRenderState);
+        }
+        this.renderer = nextUi;
+        this.options.tuiMode = mode;
+        this.mountInteractiveTui(nextUi, components);
+        nextUi.invalidate();
+        nextUi.setFocus(focus);
+        if (!startRenderer)
+            return true;
+        nextUi.start();
+        this.themeController.rebindTui();
+        this.rebindExtensionTerminalInputListeners();
+        if (restoreProgress &&
+            this.settingsManager.getShowTerminalProgress() &&
+            (this.session.isStreaming || this.session.isCompacting)) {
+            terminal.setProgress(true);
+        }
+        return true;
+    }
     async init() {
         if (this.isInitialized)
             return;
@@ -479,18 +604,36 @@ export class InteractiveMode {
                 : "";
             console.log(theme.fg("dim", `Model scope: ${modelList}${cycleHint}`));
         }
-        // Add header container as first child. Populate it after applying theme settings.
-        // Keep loaded resources before chat so restored session messages never precede them.
-        this.ui.addChild(this.headerContainer);
-        this.ui.addChild(this.loadedResourcesContainer);
-        this.ui.addChild(this.chatContainer);
-        this.ui.addChild(this.pendingMessagesContainer);
-        this.ui.addChild(this.statusContainer);
+        // Keep one component tree and remount it when changing renderers.
         this.renderWidgets(); // Initialize with default spacer
-        this.ui.addChild(this.widgetContainerAbove);
-        this.ui.addChild(this.editorContainer);
-        this.ui.addChild(this.widgetContainerBelow);
-        this.ui.addChild(this.footer);
+        this.transcriptScrollView = new TuiLayouts.ScrollView(this.documentContainer, {
+            follow: "end",
+            primary: true,
+            overscroll: "chain",
+            scrollbar: this.settingsManager.getFullscreenScrollbar(),
+            scrollbarStyle: (text) => theme.bg("scrollbarThumb", text),
+        });
+        const dock = new TuiLayouts.VStack([
+            { component: this.pendingMessagesContainer, shrink: 1, minSize: 0 },
+            { component: this.statusContainer, shrink: 1, minSize: 0 },
+            { component: this.widgetContainerAbove, shrink: 1, minSize: 0 },
+            { component: this.editorContainer, shrink: 1, minSize: 3 },
+            { component: this.widgetContainerBelow, shrink: 1, minSize: 0 },
+            { component: this.footerContainer, shrink: 1, minSize: 1 },
+        ]);
+        this.fullscreenLayoutRoot = new TuiLayouts.VStack([
+            { component: this.transcriptScrollView, basis: 0, grow: 1, shrink: 1, minSize: 1 },
+            { component: dock, basis: "auto", grow: 0, shrink: 1, minSize: 1 },
+        ]);
+        this.mountInteractiveTui(this.renderer, [
+            this.documentContainer,
+            this.pendingMessagesContainer,
+            this.statusContainer,
+            this.widgetContainerAbove,
+            this.editorContainer,
+            this.widgetContainerBelow,
+            this.footerContainer,
+        ]);
         this.ui.setFocus(this.editor);
         this.setupKeyHandlers();
         this.setupEditorSubmitHandler();
@@ -582,10 +725,13 @@ export class InteractiveMode {
     async run() {
         await this.init();
         if (!process.env.PI_OFFLINE) {
+            const controller = new AbortController();
+            const timeout = setTimeout(() => controller.abort(), 15_000);
             void this.session.modelRuntime
-                .refresh()
+                .refresh({ signal: controller.signal })
                 .then(() => this.updateAvailableProviderCount())
-                .catch(() => { });
+                .catch(() => { })
+                .finally(() => clearTimeout(timeout));
         }
         // Start version check asynchronously
         checkForNewPiVersion(this.version).then((newRelease) => {
@@ -1288,8 +1434,12 @@ export class InteractiveMode {
         this.showLoadedResources({ force: false, showDiagnosticsWhenQuiet: true });
         this.showStartupNoticesIfNeeded();
     }
+    applyFullscreenScrollbarSetting() {
+        this.transcriptScrollView?.setScrollbar(this.settingsManager.getFullscreenScrollbar());
+    }
     applyRuntimeSettings() {
         configureHttpDispatcher(this.settingsManager.getHttpIdleTimeoutMs());
+        this.applyFullscreenScrollbarSetting();
         this.footer.setSession(this.session);
         this.footer.setAutoCompactEnabled(this.session.autoCompactionEnabled);
         this.footerDataProvider.setCwd(this.sessionManager.getCwd());
@@ -1353,6 +1503,9 @@ export class InteractiveMode {
     getRegisteredToolDefinition(toolName) {
         return this.session.getToolDefinition(toolName);
     }
+    getMarkdownTransformers() {
+        return [this.mermaidMarkdownTransformer, ...this.session.extensionRunner.getMarkdownTransformers()];
+    }
     /**
      * Set up keyboard shortcuts registered by extensions.
      */
@@ -1432,7 +1585,7 @@ export class InteractiveMode {
         this.activeStatusIndicator?.dispose();
         this.activeStatusIndicator = undefined;
         this.statusContainer.clear();
-        if (hadActiveStatusIndicator && this.ui.getClearOnShrink()) {
+        if (hadActiveStatusIndicator && this.options.tuiMode === "regular" && this.ui.getClearOnShrink()) {
             this.statusContainer.addChild(this.idleStatus);
         }
     }
@@ -1580,22 +1733,16 @@ export class InteractiveMode {
         if (this.customFooter?.dispose) {
             this.customFooter.dispose();
         }
-        // Remove current footer from UI
-        if (this.customFooter) {
-            this.ui.removeChild(this.customFooter);
-        }
-        else {
-            this.ui.removeChild(this.footer);
-        }
+        this.footerContainer.clear();
         if (factory) {
             // Create and add custom footer, passing the data provider
             this.customFooter = factory(this.ui, theme, this.footerDataProvider);
-            this.ui.addChild(this.customFooter);
+            this.footerContainer.addChild(this.customFooter);
         }
         else {
             // Restore built-in footer
             this.customFooter = undefined;
-            this.ui.addChild(this.footer);
+            this.footerContainer.addChild(this.footer);
         }
         this.ui.requestRender();
     }
@@ -1641,18 +1788,23 @@ export class InteractiveMode {
         this.ui.requestRender();
     }
     addExtensionTerminalInputListener(handler) {
-        const unsubscribe = this.ui.addInputListener(handler);
-        this.extensionTerminalInputUnsubscribers.add(unsubscribe);
+        const subscription = { handler, unsubscribe: this.ui.addInputListener(handler) };
+        this.extensionTerminalInputSubscriptions.add(subscription);
         return () => {
-            unsubscribe();
-            this.extensionTerminalInputUnsubscribers.delete(unsubscribe);
+            subscription.unsubscribe();
+            this.extensionTerminalInputSubscriptions.delete(subscription);
         };
     }
-    clearExtensionTerminalInputListeners() {
-        for (const unsubscribe of this.extensionTerminalInputUnsubscribers) {
-            unsubscribe();
+    rebindExtensionTerminalInputListeners() {
+        for (const subscription of this.extensionTerminalInputSubscriptions) {
+            subscription.unsubscribe();
+            subscription.unsubscribe = this.ui.addInputListener(subscription.handler);
         }
-        this.extensionTerminalInputUnsubscribers.clear();
+    }
+    clearExtensionTerminalInputListeners() {
+        for (const subscription of this.extensionTerminalInputSubscriptions)
+            subscription.unsubscribe();
+        this.extensionTerminalInputSubscriptions.clear();
     }
     /**
      * Create the ExtensionUIContext for extensions.
@@ -1747,6 +1899,7 @@ export class InteractiveMode {
                 this.hideExtensionSelector();
                 resolve(undefined);
             }, { tui: this.ui, timeout: opts?.timeout, onToggleToolsExpanded: () => this.toggleToolOutputExpansion() });
+            this.disposeActiveSelector();
             this.editorContainer.clear();
             this.editorContainer.addChild(this.extensionSelector);
             this.ui.setFocus(this.extensionSelector);
@@ -1798,6 +1951,7 @@ export class InteractiveMode {
                 this.hideExtensionInput();
                 resolve(undefined);
             }, { tui: this.ui, timeout: opts?.timeout });
+            this.disposeActiveSelector();
             this.editorContainer.clear();
             this.editorContainer.addChild(this.extensionInput);
             this.ui.setFocus(this.extensionInput);
@@ -1827,6 +1981,7 @@ export class InteractiveMode {
                 this.hideExtensionEditor();
                 resolve(undefined);
             }, undefined, this.settingsManager.getExternalEditorCommand());
+            this.disposeActiveSelector();
             this.editorContainer.clear();
             this.editorContainer.addChild(this.extensionEditor);
             this.ui.setFocus(this.extensionEditor);
@@ -1851,6 +2006,7 @@ export class InteractiveMode {
         this.editorComponentFactory = factory;
         // Save text from current editor before switching
         const currentText = this.editor.getText();
+        this.disposeActiveSelector();
         this.editorContainer.clear();
         if (factory) {
             // Create the custom editor with tui, theme, and keybindings
@@ -1867,6 +2023,9 @@ export class InteractiveMode {
             if (newEditor.setPaddingX !== undefined) {
                 newEditor.setPaddingX(this.defaultEditor.getPaddingX());
             }
+            if (newEditor.setAutocompleteMaxVisible !== undefined) {
+                newEditor.setAutocompleteMaxVisible(this.defaultEditor.getAutocompleteMaxVisible());
+            }
             // Set autocomplete if supported
             if (newEditor.setAutocompleteProvider && this.autocompleteProvider) {
                 newEditor.setAutocompleteProvider(this.autocompleteProvider);
@@ -1971,6 +2130,7 @@ export class InteractiveMode {
                     options?.onHandle?.(handle);
                 }
                 else {
+                    this.disposeActiveSelector();
                     this.editorContainer.clear();
                     this.editorContainer.addChild(component);
                     this.ui.setFocus(component);
@@ -2057,7 +2217,7 @@ export class InteractiveMode {
         this.defaultEditor.onAction("app.tools.expand", () => this.toggleToolOutputExpansion());
         this.defaultEditor.onAction("app.thinking.toggle", () => this.toggleThinkingBlockVisibility());
         this.defaultEditor.onAction("app.editor.external", () => void this.handleOpenExternalEditor());
-        this.defaultEditor.onAction("app.message.copy", () => void this.handleCopyCommand());
+        this.defaultEditor.onAction("app.message.copy", () => void this.handleCopyCommand({ flashConfirmation: true }));
         this.defaultEditor.onAction("app.message.followUp", () => this.handleFollowUp());
         this.defaultEditor.onAction("app.message.dequeue", () => this.handleDequeue());
         this.defaultEditor.onAction("app.session.new", () => this.handleClearCommand());
@@ -2345,17 +2505,17 @@ export class InteractiveMode {
                     this.ui.requestRender();
                 }
                 else if (event.message.role === "assistant") {
-                    this.streamingComponent = new AssistantMessageComponent(undefined, this.hideThinkingBlock, this.getMarkdownThemeWithSettings(), this.hiddenThinkingLabel, this.outputPad);
+                    this.streamingComponent = new AssistantMessageComponent(undefined, this.hideThinkingBlock, this.getMarkdownThemeWithSettings(), this.hiddenThinkingLabel, this.outputPad, this.getMarkdownTransformers());
                     this.streamingMessage = event.message;
                     this.chatContainer.addChild(this.streamingComponent);
-                    this.streamingComponent.updateContent(this.streamingMessage);
+                    this.streamingComponent.updateContent(this.streamingMessage, true);
                     this.ui.requestRender();
                 }
                 break;
             case "message_update":
                 if (this.streamingComponent && event.message.role === "assistant") {
                     this.streamingMessage = event.message;
-                    this.streamingComponent.updateContent(this.streamingMessage);
+                    this.streamingComponent.updateContent(this.streamingMessage, true);
                     for (const content of this.streamingMessage.content) {
                         if (content.type === "toolCall") {
                             if (!this.pendingTools.has(content.id)) {
@@ -2392,7 +2552,7 @@ export class InteractiveMode {
                                 : "Operation aborted";
                         this.streamingMessage.errorMessage = errorMessage;
                     }
-                    this.streamingComponent.updateContent(this.streamingMessage);
+                    this.streamingComponent.updateContent(this.streamingMessage, false);
                     if (this.streamingMessage.stopReason === "aborted" || this.streamingMessage.stopReason === "error") {
                         if (!errorMessage) {
                             errorMessage = this.streamingMessage.errorMessage || "Error";
@@ -2666,12 +2826,12 @@ export class InteractiveMode {
                         // Render user message separately if present
                         if (skillBlock.userMessage) {
                             this.chatContainer.addChild(new Spacer(1));
-                            const userComponent = new UserMessageComponent(skillBlock.userMessage, this.getMarkdownThemeWithSettings(), this.outputPad);
+                            const userComponent = new UserMessageComponent(skillBlock.userMessage, this.getMarkdownThemeWithSettings(), this.outputPad, this.getMarkdownTransformers());
                             this.chatContainer.addChild(userComponent);
                         }
                     }
                     else {
-                        const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings(), this.outputPad);
+                        const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings(), this.outputPad, this.getMarkdownTransformers());
                         this.chatContainer.addChild(userComponent);
                     }
                     if (options?.populateHistory) {
@@ -2681,7 +2841,7 @@ export class InteractiveMode {
                 break;
             }
             case "assistant": {
-                const assistantComponent = new AssistantMessageComponent(message, this.hideThinkingBlock, this.getMarkdownThemeWithSettings(), this.hiddenThinkingLabel, this.outputPad);
+                const assistantComponent = new AssistantMessageComponent(message, this.hideThinkingBlock, this.getMarkdownThemeWithSettings(), this.hiddenThinkingLabel, this.outputPad, this.getMarkdownTransformers());
                 this.chatContainer.addChild(assistantComponent);
                 break;
             }
@@ -3115,6 +3275,8 @@ export class InteractiveMode {
         this.setToolsExpanded(!this.toolOutputExpanded);
     }
     setToolsExpanded(expanded) {
+        if (expanded === this.toolOutputExpanded)
+            return;
         this.toolOutputExpanded = expanded;
         const activeHeader = this.customHeader ?? this.builtInHeader;
         if (isExpandable(activeHeader)) {
@@ -3170,7 +3332,7 @@ export class InteractiveMode {
     }
     showError(errorMessage) {
         this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Text(theme.fg("error", `Error: ${errorMessage}`), 1, 0));
+        this.chatContainer.addChild(new Text(theme.fg("error", `Error: ${errorMessage}`), this.outputPad, 0));
         this.ui.requestRender();
     }
     showWarning(warningMessage) {
@@ -3380,25 +3542,43 @@ export class InteractiveMode {
     // =========================================================================
     // Selectors
     // =========================================================================
+    disposeActiveSelector() {
+        const dispose = this.activeSelectorDispose;
+        this.activeSelectorToken = undefined;
+        this.activeSelectorDispose = undefined;
+        dispose?.();
+    }
     /**
      * Shows a selector component in place of the editor.
      * @param create Factory that receives a `done` callback and returns the component and focus target
      */
     showSelector(create) {
+        const token = {};
+        let dispose;
         const done = () => {
+            dispose?.();
+            if (this.activeSelectorToken !== token)
+                return;
+            this.activeSelectorToken = undefined;
+            this.activeSelectorDispose = undefined;
             this.editorContainer.clear();
             this.editorContainer.addChild(this.editor);
             this.ui.setFocus(this.editor);
         };
-        const { component, focus } = create(done);
+        const created = create(done);
+        dispose = created.dispose;
+        this.disposeActiveSelector();
+        this.activeSelectorToken = token;
+        this.activeSelectorDispose = dispose;
         this.editorContainer.clear();
-        this.editorContainer.addChild(component);
-        this.ui.setFocus(focus);
+        this.editorContainer.addChild(created.component);
+        this.ui.setFocus(created.focus);
         this.ui.requestRender();
     }
     showSettingsSelector() {
         this.showSelector((done) => {
-            const selector = new SettingsSelectorComponent({
+            let selector;
+            selector = new SettingsSelectorComponent({
                 autoCompact: this.session.autoCompactionEnabled,
                 showImages: this.settingsManager.getShowImages(),
                 imageWidthCells: this.settingsManager.getImageWidthCells(),
@@ -3415,6 +3595,7 @@ export class InteractiveMode {
                 terminalTheme: this.themeController.getTerminalTheme(),
                 availableThemes: getAvailableThemes(),
                 hideThinkingBlock: this.hideThinkingBlock,
+                mermaidRenderingMode: this.settingsManager.getMermaidRenderingMode(),
                 collapseChangelog: this.settingsManager.getCollapseChangelog(),
                 enableInstallTelemetry: this.settingsManager.getEnableInstallTelemetry(),
                 doubleEscapeAction: this.settingsManager.getDoubleEscapeAction(),
@@ -3428,6 +3609,8 @@ export class InteractiveMode {
                 quietStartup: this.settingsManager.getQuietStartup(),
                 clearOnShrink: this.settingsManager.getClearOnShrink(),
                 showTerminalProgress: this.settingsManager.getShowTerminalProgress(),
+                tuiMode: this.ui.mode,
+                fullscreenScrollbar: this.settingsManager.getFullscreenScrollbar(),
                 warnings: this.settingsManager.getWarnings(),
             }, {
                 onAutoCompactChange: (enabled) => {
@@ -3496,6 +3679,11 @@ export class InteractiveMode {
                     this.chatContainer.clear();
                     this.rebuildChatFromMessages();
                 },
+                onMermaidRenderingModeChange: (mode) => {
+                    this.settingsManager.setMermaidRenderingMode(mode);
+                    this.chatContainer.invalidate();
+                    this.ui.requestRender();
+                },
                 onShowCacheMissNoticesChange: (shown) => {
                     this.settingsManager.setShowCacheMissNotices(shown);
                     this.rebuildChatFromMessages();
@@ -3565,6 +3753,21 @@ export class InteractiveMode {
                 onShowTerminalProgressChange: (enabled) => {
                     this.settingsManager.setShowTerminalProgress(enabled);
                 },
+                onTuiModeChange: (mode) => {
+                    if (!this.switchTuiMode(mode)) {
+                        selector?.getSettingsList().updateValue("tui-mode", this.ui.mode);
+                        this.showStatus("Close active overlays before changing TUI mode");
+                        return;
+                    }
+                    this.settingsManager.setTuiMode(mode);
+                    if (!this.activeStatusIndicator)
+                        this.statusContainer.clear();
+                    this.showStatus(`TUI mode: ${mode}`);
+                },
+                onFullscreenScrollbarChange: (mode) => {
+                    this.settingsManager.setFullscreenScrollbar(mode);
+                    this.applyFullscreenScrollbarSetting();
+                },
                 onWarningsChange: (warnings) => {
                     this.settingsManager.setWarnings(warnings);
                 },
@@ -3599,20 +3802,37 @@ export class InteractiveMode {
         this.showModelSelector(searchTerm);
     }
     async findExactModelMatch(searchTerm) {
-        const models = await this.getModelCandidates();
-        return findExactModelReferenceMatch(searchTerm, models);
-    }
-    async getModelCandidates() {
-        if (this.session.scopedModels.length > 0) {
-            return this.session.scopedModels.map((scoped) => scoped.model);
-        }
+        const cachedModels = this.session.scopedModels.length > 0
+            ? this.session.scopedModels.map((scoped) => scoped.model)
+            : [...this.session.modelRuntime.getAvailableSnapshot()];
+        const cachedMatch = findExactModelReferenceMatch(searchTerm, cachedModels);
+        if (cachedMatch || this.session.scopedModels.length > 0)
+            return cachedMatch;
+        this.showStatus("Refreshing model catalogs…");
+        const controller = new AbortController();
+        let timedOut = false;
+        const timeout = setTimeout(() => {
+            timedOut = true;
+            controller.abort();
+        }, 15_000);
         try {
-            await this.session.modelRuntime.refresh();
-            return [...(await this.session.modelRuntime.getAvailable())];
+            const result = await this.session.modelRuntime.refresh({ signal: controller.signal });
+            if (result.aborted && timedOut) {
+                this.showWarning("Model refresh timed out; searching cached models.");
+            }
+            else if (result.errors.size > 0) {
+                this.showWarning(`Could not refresh ${[...result.errors.keys()].join(", ")}; searching cached models.`);
+            }
         }
-        catch {
-            return [];
+        catch (error) {
+            this.showWarning(timedOut
+                ? "Model refresh timed out; searching cached models."
+                : `Could not refresh model catalogs: ${error instanceof Error ? error.message : String(error)}`);
         }
+        finally {
+            clearTimeout(timeout);
+        }
+        return findExactModelReferenceMatch(searchTerm, [...this.session.modelRuntime.getAvailableSnapshot()]);
     }
     /** Update the footer's available provider count from the current snapshot without refreshing catalogs. */
     updateAvailableProviderCount() {
@@ -3714,73 +3934,67 @@ export class InteractiveMode {
                 done();
                 this.ui.requestRender();
             }, initialSearchInput);
-            return { component: selector, focus: selector };
+            return { component: selector, focus: selector, dispose: () => selector.dispose() };
         });
     }
-    async showModelsSelector() {
-        // Get all available models
-        await this.session.modelRuntime.refresh();
-        const allModels = [...(await this.session.modelRuntime.getAvailable())];
-        const allModelIds = new Set(allModels.map((model) => `${model.provider}/${model.id}`));
+    showModelsSelector() {
+        let availableModels = [...this.session.modelRuntime.getAvailableSnapshot()];
+        let availableModelIds = new Set(availableModels.map((model) => `${model.provider}/${model.id}`));
         const configuredPatterns = this.settingsManager.getEnabledModels();
         const sessionScopedModels = this.session.scopedModels;
-        if (allModels.length === 0 && !configuredPatterns?.length && sessionScopedModels.length === 0) {
-            this.showStatus("No models available");
-            return;
-        }
-        const configuredScope = configuredPatterns?.length
-            ? await resolveModelScopeWithDiagnostics(configuredPatterns, this.session.modelRuntime)
-            : undefined;
-        // Check if session has scoped models (from previous session-only changes or CLI --models)
-        const hasSessionScope = sessionScopedModels.length > 0;
-        // Build enabled model IDs from session state or settings
-        let currentEnabledIds = null;
-        if (hasSessionScope) {
-            // Use current session's scoped models
-            currentEnabledIds = sessionScopedModels.map((scoped) => `${scoped.model.provider}/${scoped.model.id}`);
-        }
-        else if (configuredScope) {
-            currentEnabledIds = configuredScope.scopedModels.map((scoped) => `${scoped.model.provider}/${scoped.model.id}`);
-        }
-        for (const diagnostic of configuredScope?.diagnostics ?? []) {
-            if (diagnostic.code !== "no-match")
-                continue;
-            currentEnabledIds ??= [];
-            if (!currentEnabledIds.includes(diagnostic.pattern))
-                currentEnabledIds.push(diagnostic.pattern);
-        }
-        // Helper to update session's scoped models (session-only, no persist)
-        const updateSessionModels = async (enabledIds) => {
+        const configuredEnabledIds = (models) => {
+            if (!configuredPatterns?.length)
+                return null;
+            const resolved = resolveModelScopeFromModels(configuredPatterns, models);
+            const ids = resolved.scopedModels.map((scoped) => `${scoped.model.provider}/${scoped.model.id}`);
+            for (const diagnostic of resolved.diagnostics) {
+                if (diagnostic.code === "no-match" && !ids.includes(diagnostic.pattern))
+                    ids.push(diagnostic.pattern);
+            }
+            return ids;
+        };
+        let currentEnabledIds = sessionScopedModels.length > 0
+            ? sessionScopedModels.map((scoped) => `${scoped.model.provider}/${scoped.model.id}`)
+            : configuredEnabledIds(availableModels);
+        let selectionChanged = false;
+        const updateSessionModels = (enabledIds) => {
             currentEnabledIds = enabledIds === null ? null : [...enabledIds];
-            const hasEnabledAvailableModel = enabledIds?.some((id) => allModelIds.has(id)) ?? false;
-            const allAvailableModelsEnabled = enabledIds !== null && [...allModelIds].every((id) => enabledIds.includes(id));
+            const hasEnabledAvailableModel = enabledIds?.some((id) => availableModelIds.has(id)) ?? false;
+            const allAvailableModelsEnabled = enabledIds !== null && [...availableModelIds].every((id) => enabledIds.includes(id));
             if (enabledIds && hasEnabledAvailableModel && !allAvailableModelsEnabled) {
-                const newScopedModels = await resolveModelScope(enabledIds, this.session.modelRuntime);
-                this.session.setScopedModels(newScopedModels.map((sm) => ({
-                    model: sm.model,
-                    thinkingLevel: sm.thinkingLevel,
+                const newScopedModels = resolveModelScopeFromModels(enabledIds, availableModels).scopedModels;
+                this.session.setScopedModels(newScopedModels.map((scoped) => ({
+                    model: scoped.model,
+                    thinkingLevel: scoped.thinkingLevel,
                 })));
             }
             else {
-                // All enabled or none enabled = no filter
                 this.session.setScopedModels([]);
             }
-            await this.updateAvailableProviderCount();
+            this.updateAvailableProviderCount();
             this.ui.requestRender();
         };
         this.showSelector((done) => {
+            let disposed = false;
+            let timedOut = false;
+            const controller = new AbortController();
+            const timeout = setTimeout(() => {
+                timedOut = true;
+                controller.abort();
+            }, 15_000);
             const selector = new ScopedModelsSelectorComponent({
-                allModels,
+                allModels: availableModels,
                 enabledModelIds: currentEnabledIds,
+                refreshStatus: "Refreshing model catalogs…",
             }, {
-                onChange: async (enabledIds) => {
-                    await updateSessionModels(enabledIds);
+                onChange: (enabledIds) => {
+                    selectionChanged = true;
+                    updateSessionModels(enabledIds);
                 },
                 onPersist: (enabledIds) => {
-                    // Persist to settings
                     const allEnabled = enabledIds !== null &&
-                        enabledIds.length === allModels.length &&
-                        enabledIds.every((id) => allModelIds.has(id));
+                        enabledIds.length === availableModels.length &&
+                        enabledIds.every((id) => availableModelIds.has(id));
                     const newPatterns = enabledIds === null || allEnabled ? undefined : enabledIds;
                     this.settingsManager.setEnabledModels(newPatterns ? [...newPatterns] : undefined);
                     this.showStatus("Model selection saved to settings");
@@ -3790,7 +4004,51 @@ export class InteractiveMode {
                     this.ui.requestRender();
                 },
             });
-            return { component: selector, focus: selector };
+            void this.session.modelRuntime
+                .refresh({ signal: controller.signal })
+                .then((result) => {
+                if (disposed)
+                    return;
+                availableModels = [...this.session.modelRuntime.getAvailableSnapshot()];
+                availableModelIds = new Set(availableModels.map((model) => `${model.provider}/${model.id}`));
+                if (!selectionChanged && sessionScopedModels.length === 0) {
+                    currentEnabledIds = configuredEnabledIds(availableModels);
+                    selector.updateModels(availableModels, currentEnabledIds);
+                }
+                else {
+                    selector.updateModels(availableModels);
+                }
+                if (currentEnabledIds !== null)
+                    updateSessionModels(currentEnabledIds);
+                if (result.aborted && timedOut) {
+                    selector.setRefreshStatus("Model refresh timed out; showing cached models.", "warning");
+                }
+                else if (result.errors.size > 0) {
+                    selector.setRefreshStatus(`Could not refresh ${[...result.errors.keys()].join(", ")}; showing cached models.`, "warning");
+                }
+                else {
+                    selector.setRefreshStatus("Model catalogs refreshed.", "success");
+                }
+                this.ui.requestRender();
+            })
+                .catch((error) => {
+                if (disposed)
+                    return;
+                selector.setRefreshStatus(timedOut
+                    ? "Model refresh timed out; showing cached models."
+                    : `Could not refresh model catalogs: ${error instanceof Error ? error.message : String(error)}`, "warning");
+                this.ui.requestRender();
+            })
+                .finally(() => clearTimeout(timeout));
+            return {
+                component: selector,
+                focus: selector,
+                dispose: () => {
+                    disposed = true;
+                    clearTimeout(timeout);
+                    controller.abort();
+                },
+            };
         });
     }
     showUserMessageSelector() {
@@ -4052,7 +4310,7 @@ export class InteractiveMode {
         return options.sort((a, b) => a.name.localeCompare(b.name));
     }
     async getLogoutProviderOptions() {
-        return (await this.session.modelRuntime.listCredentials())
+        return (await this.session.modelRuntime.listCredentials({ signal: AbortSignal.timeout(15_000) }))
             .map(({ providerId, type }) => ({
             id: providerId,
             name: this.session.modelRuntime.getProvider(providerId)?.name ?? providerId,
@@ -4070,7 +4328,6 @@ export class InteractiveMode {
             provider.name.toLowerCase() === normalizedProviderRef);
     }
     async handleLoginCommand(providerRef) {
-        await this.session.modelRuntime.getAvailable();
         if (!providerRef) {
             this.showLoginAuthTypeSelector();
             return;
@@ -4184,7 +4441,14 @@ export class InteractiveMode {
             this.showLoginAuthTypeSelector();
             return;
         }
-        const providerOptions = await this.getLogoutProviderOptions();
+        let providerOptions;
+        try {
+            providerOptions = await this.getLogoutProviderOptions();
+        }
+        catch (error) {
+            this.showError(`Could not read stored credentials: ${error instanceof Error ? error.message : String(error)}`);
+            return;
+        }
         if (providerOptions.length === 0) {
             this.showStatus("No stored credentials to remove. /logout only removes credentials saved by /login; environment variables and models.json config are unchanged.");
             return;
@@ -4197,7 +4461,9 @@ export class InteractiveMode {
                     return;
                 }
                 try {
-                    await this.session.modelRuntime.logout(providerOption.id);
+                    await this.session.modelRuntime.logout(providerOption.id, {
+                        signal: AbortSignal.timeout(15_000),
+                    });
                     await this.updateAvailableProviderCount();
                     const message = providerOption.authType === "oauth"
                         ? `Logged out of ${providerOption.name}`
@@ -4205,7 +4471,10 @@ export class InteractiveMode {
                     this.showStatus(message);
                 }
                 catch (error) {
-                    this.showError(`Logout failed: ${error instanceof Error ? error.message : String(error)}`);
+                    const message = error instanceof Error ? error.message : String(error);
+                    this.showError(error instanceof CredentialSynchronizationError
+                        ? `Credentials removed for ${providerOption.name}, but local model state could not be synchronized: ${message}`
+                        : `Logout failed: ${message}`);
                 }
             }, () => {
                 done();
@@ -4215,12 +4484,11 @@ export class InteractiveMode {
         });
     }
     async completeProviderAuthentication(providerId, providerName, authType, previousModel) {
-        await this.session.modelRuntime.getAvailable();
         const actionLabel = authType === "oauth" ? `Logged in to ${providerName}` : `Saved API key for ${providerName}`;
         let selectedModel;
         let selectionError;
         if (isUnknownModel(previousModel)) {
-            const availableModels = await this.session.modelRuntime.getAvailable();
+            const availableModels = this.session.modelRuntime.getAvailableSnapshot();
             const providerModels = availableModels.filter((model) => model.provider === providerId);
             if (!hasDefaultModelProvider(providerId)) {
                 selectionError = `${actionLabel}, but no default model is configured for provider "${providerId}". Use /model to select a model.`;
@@ -4263,6 +4531,25 @@ export class InteractiveMode {
                 void this.maybeWarnAboutAnthropicSubscriptionAuth();
             }
         }
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 15_000);
+        void this.session.modelRuntime
+            .refresh({ providers: [providerId], signal: controller.signal })
+            .then((result) => {
+            if (result.aborted) {
+                this.showWarning(`${actionLabel}, but its model catalog refresh timed out; using cached models.`);
+            }
+            else if (result.errors.size > 0) {
+                this.showWarning(`${actionLabel}, but its model catalog could not be refreshed; using cached models.`);
+            }
+            this.updateAvailableProviderCount();
+            this.footer.invalidate();
+            this.ui.requestRender();
+        })
+            .catch((error) => {
+            this.showWarning(`${actionLabel}, but its model catalog could not be refreshed: ${error instanceof Error ? error.message : String(error)}`);
+        })
+            .finally(() => clearTimeout(timeout));
     }
     showAmbientAuthDialog(providerOption) {
         const restoreEditor = () => {
@@ -4308,7 +4595,10 @@ export class InteractiveMode {
         catch (error) {
             restoreEditor();
             const errorMsg = error instanceof Error ? error.message : String(error);
-            if (errorMsg !== "Login cancelled") {
+            if (error instanceof CredentialSynchronizationError) {
+                this.showError(`Saved API key for ${providerName}, but local model state could not be synchronized: ${errorMsg}`);
+            }
+            else if (errorMsg !== "Login cancelled") {
                 this.showError(`Failed to save API key for ${providerName}: ${errorMsg}`);
             }
         }
@@ -4411,7 +4701,10 @@ export class InteractiveMode {
         catch (error) {
             restoreEditor();
             const errorMsg = error instanceof Error ? error.message : String(error);
-            if (errorMsg !== "Login cancelled") {
+            if (error instanceof CredentialSynchronizationError) {
+                this.showError(`Logged in to ${providerName}, but local model state could not be synchronized: ${errorMsg}`);
+            }
+            else if (errorMsg !== "Login cancelled") {
                 this.showError(`Failed to login to ${providerName}: ${errorMsg}`);
             }
         }
@@ -4462,7 +4755,6 @@ export class InteractiveMode {
         try {
             await this.session.reload({ beforeSessionStart: restoreChatBeforeSessionStart });
             restoreChatBeforeSessionStart();
-            configureHttpDispatcher(this.settingsManager.getHttpIdleTimeoutMs());
             this.keybindings.reload();
             const activeHeader = this.customHeader ?? this.builtInHeader;
             if (isExpandable(activeHeader)) {
@@ -4470,20 +4762,7 @@ export class InteractiveMode {
             }
             setRegisteredThemes(this.session.resourceLoader.getThemes().themes);
             await this.themeController.applyFromSettings();
-            const editorPaddingX = this.settingsManager.getEditorPaddingX();
-            const autocompleteMaxVisible = this.settingsManager.getAutocompleteMaxVisible();
-            this.defaultEditor.setPaddingX(editorPaddingX);
-            this.defaultEditor.setAutocompleteMaxVisible(autocompleteMaxVisible);
-            if (this.editor !== this.defaultEditor) {
-                this.editor.setPaddingX?.(editorPaddingX);
-                this.editor.setAutocompleteMaxVisible?.(autocompleteMaxVisible);
-            }
-            this.ui.setShowHardwareCursor(this.settingsManager.getShowHardwareCursor());
-            const clearOnShrink = this.settingsManager.getClearOnShrink();
-            this.ui.setClearOnShrink(clearOnShrink);
-            if (!clearOnShrink && !this.activeStatusIndicator) {
-                this.statusContainer.clear();
-            }
+            this.applyRuntimeSettings();
             this.setupAutocompleteProvider();
             const runner = this.session.extensionRunner;
             this.setupExtensionShortcuts(runner);
@@ -4679,7 +4958,7 @@ export class InteractiveMode {
             }
         }
     }
-    async handleCopyCommand() {
+    async handleCopyCommand(options = {}) {
         const text = this.session.getLastAssistantText();
         if (!text) {
             this.showError("No agent messages to copy yet.");
@@ -4687,7 +4966,12 @@ export class InteractiveMode {
         }
         try {
             await copyToClipboard(text);
-            this.showStatus("Copied last agent message to clipboard");
+            if (options.flashConfirmation && this.ui instanceof TuiAltScreen) {
+                this.ui.flash("Copied!");
+            }
+            else {
+                this.showStatus("Copied last agent message to clipboard");
+            }
         }
         catch (error) {
             this.showError(error instanceof Error ? error.message : String(error));
@@ -5050,6 +5334,7 @@ export class InteractiveMode {
         }
     }
     stop() {
+        this.disposeActiveSelector();
         if (this.settingsManager.getShowTerminalProgress()) {
             this.ui.terminal.setProgress(false);
         }
@@ -5062,7 +5347,7 @@ export class InteractiveMode {
             this.unsubscribe();
         }
         if (this.isInitialized) {
-            this.ui.stop();
+            this.stopInteractiveTui();
             this.isInitialized = false;
         }
         this.unregisterSignalHandlers();