@humain/terminal 0.0.1 → 0.0.3-beta.0

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

@@ -6,10 +6,11 @@ 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, ENV_OFFLINE, getAgentDir, getAuthPath, getChangelogUrl, getDebugLogPath, getDocsPath, getInstallTelemetryUrl, getShareViewerUrl, VERSION, } from "../../config.js";
+import { APP_NAME, APP_TITLE, CONFIG_DIR_NAME, getAgentDir, getAuthPath, getDebugLogPath, getDocsPath, getShareViewerUrl, VERSION, } from "../../config.js";
 import { parseSkillBlock } from "../../core/agent-session.js";
 import { SessionImportFileNotFoundError } from "../../core/agent-session-runtime.js";
 import { CACHE_TTL_MS, collectCacheMisses, computeCacheWaste, detectCacheMiss, } from "../../core/cache-stats.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,8 @@ 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";
 import { ensureTool } from "../../utils/tools-manager.js";
@@ -44,12 +48,14 @@ import { CustomEntryComponent } from "./components/custom-entry.js";
 import { CustomMessageComponent } from "./components/custom-message.js";
 import { DaxnutsComponent } from "./components/daxnuts.js";
 import { DynamicBorder } from "./components/dynamic-border.js";
+import { EarendilAnnouncementComponent } from "./components/earendil-announcement.js";
 import { ExtensionEditorComponent } from "./components/extension-editor.js";
 import { ExtensionInputComponent } from "./components/extension-input.js";
 import { ExtensionSelectorComponent } from "./components/extension-selector.js";
 import { FooterComponent, 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";
@@ -159,11 +165,58 @@ 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,
+            onRightClickPaste: options.onRightClickPaste,
+        });
+    }
+    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;
+            let methodTui = tui;
+            let method = value;
+            return (...args) => {
+                const currentTui = getTui();
+                if (currentTui !== methodTui) {
+                    const currentMethod = Reflect.get(currentTui, property, currentTui);
+                    if (typeof currentMethod !== "function") {
+                        throw new TypeError(`TUI property ${String(property)} is not callable`);
+                    }
+                    methodTui = currentTui;
+                    method = currentMethod;
+                }
+                return Reflect.apply(method, methodTui, 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;
@@ -173,7 +226,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;
@@ -207,6 +263,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
@@ -230,7 +290,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();
@@ -245,6 +305,9 @@ export class InteractiveMode {
     // Custom header from extension (undefined = use built-in header)
     customHeader = undefined;
     options;
+    onRightClickPaste = () => {
+        void this.handleRightClickPaste();
+    };
     autoTrustOnReloadCwd;
     themeController;
     // Convenience accessors
@@ -262,7 +325,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();
@@ -271,11 +335,21 @@ 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(),
+            onRightClickPaste: this.onRightClickPaste,
+        });
+        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();
@@ -294,6 +368,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();
@@ -349,11 +425,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
@@ -454,6 +529,73 @@ 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,
+            onRightClickPaste: this.onRightClickPaste,
+        });
+        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;
@@ -477,18 +619,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();
@@ -498,7 +658,7 @@ export class InteractiveMode {
         await this.themeController.applyFromSettings();
         // Add header with keybindings from config (unless silenced)
         if (this.options.verbose || !this.settingsManager.getQuietStartup()) {
-            const logo = theme.fg("accent", APP_TITLE) + theme.fg("dim", ` v${this.version}`);
+            const logo = theme.bold(theme.fg("accent", APP_NAME)) + theme.fg("dim", ` v${this.version}`);
             // Build startup instructions using keybinding hint helpers
             const hint = (keybinding, description) => keyHint(keybinding, description);
             const expandedInstructions = [
@@ -530,7 +690,7 @@ export class InteractiveMode {
                 hint("app.tools.expand", "more"),
             ].join(theme.fg("muted", " · "));
             const compactOnboarding = theme.fg("dim", `Press ${keyText("app.tools.expand")} to show full startup help and loaded resources.`);
-            const onboarding = theme.fg("dim", `${APP_TITLE} can explain its own features, model profiles, and package resources.`);
+            const onboarding = theme.fg("dim", `Pi can explain its own features and look up its docs. Ask it how to use or extend Pi.`);
             this.builtInHeader = new ExpandableText(() => `${logo}\n${compactInstructions}\n${compactOnboarding}\n\n${onboarding}`, () => `${logo}\n${expandedInstructions}\n\n${onboarding}`, this.getStartupExpansionState(), 1, 0);
             // Setup UI layout
             this.headerContainer.addChild(new Spacer(1));
@@ -580,10 +740,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) => {
@@ -620,7 +783,7 @@ export class InteractiveMode {
         if (modelsJsonError) {
             this.showError(`models.json error: ${modelsJsonError}`);
         }
-        if (modelFallbackMessage && !this.isNoModelsAvailableMessage(modelFallbackMessage)) {
+        if (modelFallbackMessage) {
             this.showWarning(modelFallbackMessage);
         }
         void this.maybeWarnAboutAnthropicSubscriptionAuth();
@@ -658,7 +821,7 @@ export class InteractiveMode {
         }
     }
     async checkForPackageUpdates() {
-        if (process.env[ENV_OFFLINE]) {
+        if (process.env.PI_OFFLINE) {
             return [];
         }
         try {
@@ -711,7 +874,7 @@ export class InteractiveMode {
             return "tmux extended-keys is off. Modified Enter keys may not work. Add `set -g extended-keys on` to ~/.tmux.conf and restart tmux.";
         }
         if (extendedKeysFormat === "xterm") {
-            return `tmux extended-keys-format is xterm. ${APP_TITLE} works best with csi-u. Add \`set -g extended-keys-format csi-u\` to ~/.tmux.conf and restart tmux.`;
+            return "tmux extended-keys-format is xterm. Pi works best with csi-u. Add `set -g extended-keys-format csi-u` to ~/.tmux.conf and restart tmux.";
         }
         return undefined;
     }
@@ -742,13 +905,13 @@ export class InteractiveMode {
         return undefined;
     }
     reportInstallTelemetry(version) {
-        if (process.env[ENV_OFFLINE]) {
+        if (process.env.PI_OFFLINE) {
             return;
         }
         if (!isInstallTelemetryEnabled(this.settingsManager)) {
             return;
         }
-        void fetch(getInstallTelemetryUrl(version), {
+        void fetch(`https://pi.dev/api/report-install?version=${encodeURIComponent(version)}`, {
             headers: {
                 "User-Agent": getPiUserAgent(version),
             },
@@ -763,20 +926,6 @@ export class InteractiveMode {
             codeBlockIndent: this.settingsManager.getCodeBlockIndent(),
         };
     }
-    isNoModelsAvailableMessage(message) {
-        return message?.startsWith("No models available.") ?? false;
-    }
-    getNoModelsStartupNotice() {
-        if (!this.isNoModelsAvailableMessage(this.options.modelFallbackMessage)) {
-            return undefined;
-        }
-        return [
-            theme.bold(theme.fg("warning", "Model setup required")),
-            `${theme.fg("muted", "No models are available yet. Run ")}${theme.bold("/login")}${theme.fg("muted", " to add a provider.")}`,
-            `${theme.fg("dim", "Then use ")}${theme.bold("/model")}${theme.fg("dim", " if you want to switch models.")}`,
-            `${theme.fg("dim", "Docs: ")}${theme.fg("accent", "docs/providers.md")}${theme.fg("dim", ", ")}${theme.fg("accent", "docs/models.md")}`,
-        ].join("\n");
-    }
     // =========================================================================
     // Extension System
     // =========================================================================
@@ -794,6 +943,15 @@ export class InteractiveMode {
         result = result.replace(/\/index\.ts$/, "").replace(/\/index\.js$/, "");
         return result;
     }
+    formatContextPath(p) {
+        const cwd = path.resolve(this.sessionManager.getCwd());
+        const absolutePath = path.isAbsolute(p) ? path.resolve(p) : path.resolve(cwd, p);
+        const relativePath = getCwdRelativePath(absolutePath, cwd);
+        if (relativePath !== undefined) {
+            return relativePath;
+        }
+        return this.formatDisplayPath(absolutePath);
+    }
     getStartupExpansionState() {
         return this.options.verbose || this.toolOutputExpanded;
     }
@@ -830,43 +988,92 @@ export class InteractiveMode {
         }
         return this.formatDisplayPath(fullPath);
     }
-    stripNpmPackageVersion(packageSpec) {
-        if (packageSpec.startsWith("@")) {
-            const versionStart = packageSpec.indexOf("@", packageSpec.indexOf("/") + 1);
-            return versionStart === -1 ? packageSpec : packageSpec.slice(0, versionStart);
+    getCompactPathLabel(resourcePath, sourceInfo) {
+        const shortPath = this.getShortPath(resourcePath, sourceInfo);
+        const normalizedPath = shortPath.replace(/\\/g, "/");
+        const segments = normalizedPath.split("/").filter((segment) => segment.length > 0 && segment !== "~");
+        if (segments.length > 0) {
+            return segments[segments.length - 1];
         }
-        const versionStart = packageSpec.indexOf("@");
-        return versionStart === -1 ? packageSpec : packageSpec.slice(0, versionStart);
+        return shortPath;
     }
-    stripLegacyPackagePrefix(packageName) {
-        const scopedMatch = /^(@[^/]+)\/(.+)$/.exec(packageName);
-        if (scopedMatch) {
-            return `${scopedMatch[1]}/${this.stripLegacyPackagePrefix(scopedMatch[2])}`;
-        }
-        const sanitized = packageName.replace(/^pi[-_]/, "");
-        return sanitized || packageName;
-    }
-    getPackageSourceName(source) {
+    getCompactPackageSourceLabel(sourceInfo) {
+        const source = sourceInfo?.source ?? "";
         if (source.startsWith("npm:")) {
-            return this.stripLegacyPackagePrefix(this.stripNpmPackageVersion(source.slice("npm:".length)));
+            return source.slice("npm:".length) || source;
         }
         const gitSource = parseGitUrl(source);
-        if (gitSource?.path) {
-            return gitSource.path
-                .split("/")
-                .map((segment, index, segments) => index === segments.length - 1 ? this.stripLegacyPackagePrefix(segment) : segment)
-                .join("/");
+        if (gitSource) {
+            return gitSource.path || source;
         }
         return source;
     }
-    getDisplaySourceLabel(source) {
-        if (source.startsWith("npm:")) {
-            return `npm:${this.getPackageSourceName(source)}`;
-        }
-        if (source.startsWith("git:")) {
-            return `git:${this.getPackageSourceName(source)}`;
+    getCompactExtensionLabel(resourcePath, sourceInfo) {
+        if (!this.isPackageSource(sourceInfo)) {
+            return this.getCompactPathLabel(resourcePath, sourceInfo);
+        }
+        const sourceLabel = this.getCompactPackageSourceLabel(sourceInfo);
+        if (!sourceLabel) {
+            return this.getCompactPathLabel(resourcePath, sourceInfo);
+        }
+        const shortPath = this.getShortPath(resourcePath, sourceInfo).replace(/\\/g, "/");
+        const packagePath = shortPath.startsWith("extensions/") ? shortPath.slice("extensions/".length) : shortPath;
+        const parsedPath = path.posix.parse(packagePath);
+        if (parsedPath.name === "index") {
+            return !parsedPath.dir || parsedPath.dir === "." ? sourceLabel : `${sourceLabel}:${parsedPath.dir}`;
+        }
+        return `${sourceLabel}:${packagePath}`;
+    }
+    getCompactDisplayPathSegments(resourcePath) {
+        return this.formatDisplayPath(resourcePath)
+            .replace(/\\/g, "/")
+            .split("/")
+            .filter((segment) => segment.length > 0 && segment !== "~");
+    }
+    getCompactNonPackageExtensionLabel(resourcePath, index, allPaths) {
+        const segments = allPaths[index]?.segments;
+        if (!segments || segments.length === 0) {
+            return this.getCompactPathLabel(resourcePath);
+        }
+        for (let segmentCount = 1; segmentCount <= segments.length; segmentCount += 1) {
+            const candidate = segments.slice(-segmentCount).join("/");
+            const isUnique = allPaths.every((item, itemIndex) => {
+                if (itemIndex === index) {
+                    return true;
+                }
+                return item.segments.slice(-segmentCount).join("/") !== candidate;
+            });
+            if (isUnique) {
+                return candidate;
+            }
         }
-        return source;
+        return segments.join("/");
+    }
+    getCompactExtensionLabels(extensions) {
+        const nonPackageExtensions = extensions
+            .map((extension) => {
+            const segments = this.getCompactDisplayPathSegments(extension.path);
+            const lastSegment = segments[segments.length - 1];
+            if (segments.length > 1 && (lastSegment === "index.ts" || lastSegment === "index.js")) {
+                segments.pop();
+            }
+            return {
+                path: extension.path,
+                sourceInfo: extension.sourceInfo,
+                segments,
+            };
+        })
+            .filter((extension) => !this.isPackageSource(extension.sourceInfo));
+        return extensions.map((extension) => {
+            if (this.isPackageSource(extension.sourceInfo)) {
+                return this.getCompactExtensionLabel(extension.path, extension.sourceInfo);
+            }
+            const nonPackageIndex = nonPackageExtensions.findIndex((item) => item.path === extension.path);
+            if (nonPackageIndex === -1) {
+                return this.getCompactPathLabel(extension.path, extension.sourceInfo);
+            }
+            return this.getCompactNonPackageExtensionLabel(extension.path, nonPackageIndex, nonPackageExtensions);
+        });
     }
     getDisplaySourceInfo(sourceInfo) {
         const source = sourceInfo?.source ?? "local";
@@ -887,7 +1094,7 @@ export class InteractiveMode {
             return { label: "path", scopeLabel: scope === "temporary" ? "temp" : undefined, color: "muted" };
         }
         const scopeLabel = scope === "user" ? "user" : scope === "project" ? "project" : scope === "temporary" ? "temp" : undefined;
-        return { label: this.getDisplaySourceLabel(source), scopeLabel, color: "accent" };
+        return { label: source, scopeLabel, color: "accent" };
     }
     getScopeGroup(sourceInfo) {
         const source = sourceInfo?.source ?? "local";
@@ -935,7 +1142,7 @@ export class InteractiveMode {
             }
             const sortedPackages = Array.from(group.packages.entries()).sort(([a], [b]) => a.localeCompare(b));
             for (const [source, items] of sortedPackages) {
-                lines.push(`    ${theme.fg("mdLink", this.getDisplaySourceLabel(source))}`);
+                lines.push(`    ${theme.fg("mdLink", source)}`);
                 const sortedPackagePaths = [...items].sort((a, b) => a.path.localeCompare(b.path));
                 for (const item of sortedPackagePaths) {
                     lines.push(theme.fg("dim", `      ${options.formatPackagePath(item, source)}`));
@@ -1011,24 +1218,22 @@ export class InteractiveMode {
         this.loadedResourcesContainer.clear();
         const showListing = options?.force || this.options.verbose || !this.settingsManager.getQuietStartup();
         const showDiagnostics = showListing || options?.showDiagnosticsWhenQuiet === true;
-        const noModelsStartupNotice = this.getNoModelsStartupNotice();
-        if (!showListing && !showDiagnostics && !noModelsStartupNotice) {
+        if (!showListing && !showDiagnostics) {
             return;
         }
         const sectionHeader = (name, color = "mdHeading") => theme.fg(color, `[${name}]`);
-        const formatCountSummary = (count, singular, plural = `${singular}s`) => theme.fg("dim", `  ${count} ${count === 1 ? singular : plural}`);
+        const formatCompactList = (items, options) => {
+            const labels = items.map((item) => item.trim()).filter((item) => item.length > 0);
+            if (options?.sort !== false) {
+                labels.sort((a, b) => a.localeCompare(b));
+            }
+            return theme.fg("dim", `  ${labels.join(", ")}`);
+        };
         const addLoadedSection = (name, collapsedBody, expandedBody = collapsedBody, color = "mdHeading") => {
             const section = new ExpandableText(() => `${sectionHeader(name, color)}\n${collapsedBody}`, () => `${sectionHeader(name, color)}\n${expandedBody}`, this.getStartupExpansionState(), 0, 0);
             this.loadedResourcesContainer.addChild(section);
             this.loadedResourcesContainer.addChild(new Spacer(1));
         };
-        if (noModelsStartupNotice) {
-            this.loadedResourcesContainer.addChild(new Spacer(1));
-            this.loadedResourcesContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-            this.loadedResourcesContainer.addChild(new Text(noModelsStartupNotice, 1, 0));
-            this.loadedResourcesContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-            this.loadedResourcesContainer.addChild(new Spacer(1));
-        }
         const skillsResult = this.session.resourceLoader.getSkills();
         const promptsResult = this.session.resourceLoader.getPrompts();
         const themesResult = this.session.resourceLoader.getThemes();
@@ -1062,13 +1267,18 @@ export class InteractiveMode {
             }
         }
         if (showListing) {
-            const contextFiles = this.session.resourceLoader.getAgentsFiles().agentsFiles;
+            const systemPromptSource = this.session.resourceLoader.getSystemPromptSource();
+            const contextFiles = [
+                ...(systemPromptSource ? [systemPromptSource] : []),
+                ...this.session.resourceLoader.getAppendSystemPromptSources(),
+                ...this.session.resourceLoader.getAgentsFiles().agentsFiles,
+            ];
             if (contextFiles.length > 0) {
                 this.loadedResourcesContainer.addChild(new Spacer(1));
                 const contextList = contextFiles
                     .map((f) => theme.fg("dim", `  ${this.formatDisplayPath(f.path)}`))
                     .join("\n");
-                const contextCompactList = formatCountSummary(contextFiles.length, "context file");
+                const contextCompactList = formatCompactList(contextFiles.map((contextFile) => this.formatContextPath(contextFile.path)), { sort: false });
                 addLoadedSection("Context", contextCompactList, contextList);
             }
             const skills = skillsResult.skills;
@@ -1078,7 +1288,7 @@ export class InteractiveMode {
                     formatPath: (item) => this.formatDisplayPath(item.path),
                     formatPackagePath: (item) => this.getShortPath(item.path, item.sourceInfo),
                 });
-                const skillCompactList = formatCountSummary(skills.length, "skill");
+                const skillCompactList = formatCompactList(skills.map((skill) => skill.name));
                 addLoadedSection("Skills", skillCompactList, skillList);
             }
             const templates = this.session.promptTemplates;
@@ -1095,7 +1305,7 @@ export class InteractiveMode {
                         return template ? `/${template.name}` : this.formatDisplayPath(item.path);
                     },
                 });
-                const promptCompactList = formatCountSummary(templates.length, "prompt");
+                const promptCompactList = formatCompactList(templates.map((template) => `/${template.name}`));
                 addLoadedSection("Prompts", promptCompactList, templateList);
             }
             if (extensions.length > 0) {
@@ -1104,7 +1314,7 @@ export class InteractiveMode {
                     formatPath: (item) => this.formatExtensionDisplayPath(item.path),
                     formatPackagePath: (item) => this.formatExtensionDisplayPath(this.getShortPath(item.path, item.sourceInfo)),
                 });
-                const extensionCompactList = formatCountSummary(extensions.length, "extension");
+                const extensionCompactList = formatCompactList(this.getCompactExtensionLabels(extensions));
                 addLoadedSection("Extensions", extensionCompactList, extList, "mdHeading");
             }
             // Show loaded themes (excluding built-in)
@@ -1119,7 +1329,7 @@ export class InteractiveMode {
                     formatPath: (item) => this.formatDisplayPath(item.path),
                     formatPackagePath: (item) => this.getShortPath(item.path, item.sourceInfo),
                 });
-                const themeCompactList = formatCountSummary(customThemes.length, "theme");
+                const themeCompactList = formatCompactList(customThemes.map((loadedTheme) => loadedTheme.name ?? this.getCompactPathLabel(loadedTheme.sourcePath, loadedTheme.sourceInfo)));
                 addLoadedSection("Themes", themeCompactList, themeList);
             }
         }
@@ -1239,8 +1449,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());
@@ -1262,16 +1476,19 @@ export class InteractiveMode {
         }
     }
     async rebindCurrentSession(options = {}) {
+        const session = this.session;
         this.unsubscribe?.();
         this.unsubscribe = undefined;
         this.applyRuntimeSettings();
         if (options.renderBeforeBind) {
             this.renderCurrentSessionState();
             this.subscribeToAgent();
-            await this.bindCurrentSessionExtensions();
         }
-        else {
-            await this.bindCurrentSessionExtensions();
+        await this.bindCurrentSessionExtensions();
+        if (this.session !== session) {
+            return;
+        }
+        if (!options.renderBeforeBind) {
             this.subscribeToAgent();
         }
         await this.updateAvailableProviderCount();
@@ -1301,6 +1518,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.
      */
@@ -1317,6 +1537,7 @@ export class InteractiveMode {
             sessionManager: this.sessionManager,
             modelRegistry: extensionRunner.getModelRegistry(),
             model: this.session.model,
+            scopedModels: this.session.scopedModels,
             thinkingLevel: this.session.thinkingLevel,
             isIdle: () => this.session.isIdle,
             isProjectTrusted: () => this.settingsManager.isProjectTrusted(),
@@ -1379,7 +1600,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);
         }
     }
@@ -1527,22 +1748,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();
     }
@@ -1588,18 +1803,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.
@@ -1694,6 +1914,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);
@@ -1745,6 +1966,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);
@@ -1774,6 +1996,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);
@@ -1798,6 +2021,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
@@ -1814,6 +2038,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);
@@ -1918,6 +2145,7 @@ export class InteractiveMode {
                     options?.onHandle?.(handle);
                 }
                 else {
+                    this.disposeActiveSelector();
                     this.editorContainer.clear();
                     this.editorContainer.addChild(component);
                     this.ui.setFocus(component);
@@ -2004,7 +2232,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());
@@ -2024,13 +2252,29 @@ export class InteractiveMode {
             void this.handleClipboardPaste();
         };
     }
+    async handleRightClickPaste() {
+        const target = this.renderer.getFocusedComponent();
+        const handleInput = target?.handleInput;
+        if (!target || !handleInput)
+            return;
+        try {
+            const text = await readClipboardText();
+            if (!text || this.renderer.getFocusedComponent() !== target)
+                return;
+            handleInput.call(target, `\x1b[200~${text}\x1b[201~`);
+            this.ui.requestRender();
+        }
+        catch {
+            // Silently ignore clipboard errors (may not have permission, etc.)
+        }
+    }
     async handleClipboardPaste() {
         try {
             const image = await readClipboardImage();
             if (image) {
                 const tmpDir = os.tmpdir();
                 const ext = extensionForImageMimeType(image.mimeType) ?? "png";
-                const fileName = `humain-terminal-clipboard-${crypto.randomUUID()}.${ext}`;
+                const fileName = `pi-clipboard-${crypto.randomUUID()}.${ext}`;
                 const filePath = path.join(tmpDir, fileName);
                 fs.writeFileSync(filePath, Buffer.from(image.bytes));
                 this.editor.insertTextAtCursor?.(filePath);
@@ -2166,6 +2410,11 @@ export class InteractiveMode {
                 this.editor.setText("");
                 return;
             }
+            if (text === "/dementedelves") {
+                this.handleDementedDelves();
+                this.editor.setText("");
+                return;
+            }
             if (text === "/resume") {
                 this.showSessionSelector();
                 this.editor.setText("");
@@ -2287,17 +2536,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)) {
@@ -2334,7 +2583,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";
@@ -2608,12 +2857,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) {
@@ -2623,7 +2872,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;
             }
@@ -2775,7 +3024,7 @@ export class InteractiveMode {
         if (this.chatContainer.children.length > 0) {
             this.chatContainer.addChild(new Spacer(1));
         }
-        this.chatContainer.addChild(new Text(theme.fg("warning", `This project is not trusted. Project ${CONFIG_DIR_NAME} resources and packages are ignored. Use /trust to save a trust decision, then restart ${APP_NAME}.`), 1, 0));
+        this.chatContainer.addChild(new Text(theme.fg("warning", `This project is not trusted. Project ${CONFIG_DIR_NAME} resources and packages are ignored. Use /trust to save a trust decision, then restart pi.`), 1, 0));
     }
     async getUserInput() {
         const queuedInput = this.pendingUserInputs.shift();
@@ -2888,7 +3137,7 @@ export class InteractiveMode {
             this.ui.stop();
         }
         catch { }
-        console.error(`${APP_NAME} exiting due to uncaughtException:`);
+        console.error("pi exiting due to uncaughtException:");
         console.error(error);
         process.exit(1);
     }
@@ -2930,7 +3179,7 @@ export class InteractiveMode {
         this.signalCleanupHandlers.push(() => process.stderr.off("error", terminalErrorHandler));
         // Restore the terminal before the process dies on any uncaught throw.
         // Without this, an unhandled exception from extension code (or anywhere
-        // in the terminal agent) leaves the terminal in raw mode with no cursor.
+        // in pi) leaves the terminal in raw mode with no cursor.
         const uncaughtExceptionHandler = (error) => this.uncaughtCrash(error);
         process.prependListener("uncaughtException", uncaughtExceptionHandler);
         this.signalCleanupHandlers.push(() => process.off("uncaughtException", uncaughtExceptionHandler));
@@ -3057,6 +3306,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)) {
@@ -3069,7 +3320,7 @@ export class InteractiveMode {
                 }
             }
         }
-        this.ui.requestRender();
+        this.showStatus(`Tool output: ${expanded ? "expanded" : "collapsed"}`);
     }
     toggleThinkingBlockVisibility() {
         this.hideThinkingBlock = !this.hideThinkingBlock;
@@ -3112,7 +3363,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) {
@@ -3123,7 +3374,7 @@ export class InteractiveMode {
     showNewVersionNotification(release) {
         const action = theme.fg("accent", `${APP_NAME} update`);
         const updateInstruction = theme.fg("muted", `New version ${release.version} is available. Run `) + action;
-        const changelogUrl = getChangelogUrl();
+        const changelogUrl = "https://pi.dev/changelog";
         const changelogLink = getCapabilities().hyperlinks
             ? hyperlink(theme.fg("accent", changelogUrl), changelogUrl)
             : theme.fg("accent", changelogUrl);
@@ -3322,25 +3573,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(),
@@ -3357,6 +3626,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(),
@@ -3370,6 +3640,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) => {
@@ -3438,6 +3710,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();
@@ -3507,6 +3784,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);
                 },
@@ -3541,20 +3833,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() {
@@ -3626,7 +3935,7 @@ export class InteractiveMode {
                 onSelect: (selection) => {
                     trustStore.setMany(selection.updates);
                     done();
-                    this.showStatus(`Saved trust decision: ${selection.trusted ? "trusted" : "untrusted"}. Restart ${APP_NAME} for this to take effect.`);
+                    this.showStatus(`Saved trust decision: ${selection.trusted ? "trusted" : "untrusted"}. Restart pi for this to take effect.`);
                 },
                 onCancel: () => {
                     done();
@@ -3656,73 +3965,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");
@@ -3732,7 +4035,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() {
@@ -3794,7 +4141,7 @@ export class InteractiveMode {
         this.showSelector((done) => {
             const selector = new TreeSelectorComponent(tree, realLeafId, this.ui.terminal.rows, async (entryId) => {
                 // Selecting the current leaf is a no-op (already there)
-                if (entryId === realLeafId) {
+                if (entryId === this.sessionManager.getLeafId()) {
                     done();
                     this.showStatus("Already at this point");
                     return;
@@ -3829,6 +4176,11 @@ export class InteractiveMode {
                         break;
                     }
                 }
+                // The user committed to navigating: stop the active response first.
+                if (this.session.isStreaming) {
+                    this.restoreQueuedMessagesToEditor();
+                    await this.session.abort();
+                }
                 // Set up escape handler and status indicator if summarizing
                 let showingSummaryIndicator = false;
                 const originalOnEscape = this.defaultEditor.onEscape;
@@ -3989,7 +4341,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,
@@ -4007,7 +4359,6 @@ export class InteractiveMode {
             provider.name.toLowerCase() === normalizedProviderRef);
     }
     async handleLoginCommand(providerRef) {
-        await this.session.modelRuntime.getAvailable();
         if (!providerRef) {
             this.showLoginAuthTypeSelector();
             return;
@@ -4121,7 +4472,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;
@@ -4134,7 +4492,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}`
@@ -4142,7 +4502,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();
@@ -4152,12 +4515,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.`;
@@ -4200,6 +4562,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 = () => {
@@ -4245,7 +4626,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}`);
             }
         }
@@ -4348,7 +4732,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}`);
             }
         }
@@ -4399,7 +4786,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)) {
@@ -4407,20 +4793,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);
@@ -4616,7 +4989,7 @@ export class InteractiveMode {
             }
         }
     }
-    async handleCopyCommand() {
+    async handleCopyCommand(options = {}) {
         const text = this.session.getLastAssistantText();
         if (!text) {
             this.showError("No agent messages to copy yet.");
@@ -4624,7 +4997,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));
@@ -4897,6 +5275,11 @@ export class InteractiveMode {
         this.chatContainer.addChild(new ArminComponent(this.ui));
         this.ui.requestRender();
     }
+    handleDementedDelves() {
+        this.chatContainer.addChild(new Spacer(1));
+        this.chatContainer.addChild(new EarendilAnnouncementComponent());
+        this.ui.requestRender();
+    }
     handleDaxnuts() {
         this.chatContainer.addChild(new Spacer(1));
         this.chatContainer.addChild(new DaxnutsComponent(this.ui));
@@ -4982,6 +5365,7 @@ export class InteractiveMode {
         }
     }
     stop() {
+        this.disposeActiveSelector();
         if (this.settingsManager.getShowTerminalProgress()) {
             this.ui.terminal.setProgress(false);
         }
@@ -4994,7 +5378,7 @@ export class InteractiveMode {
             this.unsubscribe();
         }
         if (this.isInitialized) {
-            this.ui.stop();
+            this.stopInteractiveTui();
             this.isInitialized = false;
         }
         this.unregisterSignalHandlers();