@sheason/pi-coding-agent 0.74.1-sheason.0 → 0.78.0-sheason.0.6.0-alpha.2

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

@@ -7,14 +7,17 @@ import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
 import { getProviders, } from "@sheason/pi-ai";
-import { CombinedAutocompleteProvider, Container, fuzzyFilter, getCapabilities, hyperlink, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TUI, visibleWidth, } from "@sheason/pi-tui";
+import { CombinedAutocompleteProvider, Container, fuzzyFilter, getCapabilities, hyperlink, Loader, Markdown, matchesKey, ProcessTerminal, SelectList, Spacer, setKeybindings, Text, TruncatedText, TUI, visibleWidth, } from "@sheason/pi-tui";
+import chalk from "chalk";
 import { spawn, spawnSync } from "child_process";
 import { APP_NAME, APP_TITLE, getAgentDir, getAuthPath, getDebugLogPath, getDocsPath, getShareViewerUrl, VERSION, } from "../../config.js";
-import { parseSkillBlock } from "../../core/agent-session.js";
+import { parseSkillBlock, } from "../../core/agent-session.js";
 import { SessionImportFileNotFoundError } from "../../core/agent-session-runtime.js";
+import { ExtensionRunner as ExtensionRunnerImpl } from "../../core/extensions/runner.js";
 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 { createCompactionSummaryMessage } from "../../core/messages.js";
 import { defaultModelPerProvider, findExactModelReferenceMatch, resolveModelScope } from "../../core/model-resolver.js";
 import { DefaultPackageManager } from "../../core/package-manager.js";
 import { BUILT_IN_PROVIDER_DISPLAY_NAMES } from "../../core/provider-display-names.js";
@@ -31,6 +34,7 @@ import { getPiUserAgent } from "../../utils/pi-user-agent.js";
 import { killTrackedDetachedChildren } from "../../utils/shell.js";
 import { ensureTool } from "../../utils/tools-manager.js";
 import { checkForNewPiVersion } from "../../utils/version-check.js";
+import { loadRemoteClientExtensions } from "../connect/client-extension-sync.js";
 import { ArminComponent } from "./components/armin.js";
 import { AssistantMessageComponent } from "./components/assistant-message.js";
 import { BashExecutionComponent } from "./components/bash-execution.js";
@@ -46,7 +50,7 @@ import { EarendilAnnouncementComponent } from "./components/earendil-announcemen
 import { ExtensionEditorComponent } from "./components/extension-editor.js";
 import { ExtensionInputComponent } from "./components/extension-input.js";
 import { ExtensionSelectorComponent } from "./components/extension-selector.js";
-import { FooterComponent } from "./components/footer.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 { ModelSelectorComponent } from "./components/model-selector.js";
@@ -59,7 +63,7 @@ import { ToolExecutionComponent } from "./components/tool-execution.js";
 import { TreeSelectorComponent } from "./components/tree-selector.js";
 import { UserMessageComponent } from "./components/user-message.js";
 import { UserMessageSelectorComponent } from "./components/user-message-selector.js";
-import { getAvailableThemes, getAvailableThemesWithPaths, getEditorTheme, getMarkdownTheme, getThemeByName, initTheme, onThemeChange, setRegisteredThemes, setTheme, setThemeInstance, stopThemeWatcher, Theme, theme, } from "./theme/theme.js";
+import { getAvailableThemes, getAvailableThemesWithPaths, getEditorTheme, getMarkdownTheme, getSelectListTheme, getThemeByName, initTheme, onThemeChange, setRegisteredThemes, setTheme, setThemeInstance, stopThemeWatcher, Theme, theme, } from "./theme/theme.js";
 function isExpandable(obj) {
     return typeof obj === "object" && obj !== null && "setExpanded" in obj && typeof obj.setExpanded === "function";
 }
@@ -90,6 +94,27 @@ function isAnthropicSubscriptionAuthKey(apiKey) {
 function isUnknownModel(model) {
     return !!model && model.provider === "unknown" && model.id === "unknown" && model.api === "unknown";
 }
+function quoteIfNeeded(value) {
+    if (value.length > 0 && !/[^a-zA-Z0-9_\-./~:@]/.test(value)) {
+        return value;
+    }
+    return `'${value.replace(/'/g, `'\\''`)}'`;
+}
+export function formatResumeCommand(sessionManager) {
+    if (!process.stdout.isTTY)
+        return undefined;
+    if (!sessionManager.isPersisted())
+        return undefined;
+    const sessionFile = sessionManager.getSessionFile();
+    if (!sessionFile || !fs.existsSync(sessionFile))
+        return undefined;
+    const args = [APP_NAME];
+    if (!sessionManager.usesDefaultSessionDir()) {
+        args.push("--session-dir", quoteIfNeeded(sessionManager.getSessionDir()));
+    }
+    args.push("--session", sessionManager.getSessionId());
+    return args.join(" ");
+}
 function hasDefaultModelProvider(providerId) {
     return providerId in defaultModelPerProvider;
 }
@@ -105,7 +130,6 @@ export function isApiKeyLoginProvider(providerId, oauthProviderIds, builtInProvi
     return !oauthProviderIds.has(providerId);
 }
 export class InteractiveMode {
-    options;
     runtimeHost;
     ui;
     chatContainer;
@@ -125,6 +149,7 @@ export class InteractiveMode {
     version;
     isInitialized = false;
     onInputCallback;
+    pendingUserInputs = [];
     loadingAnimation = undefined;
     workingMessage = undefined;
     workingVisible = true;
@@ -176,6 +201,8 @@ export class InteractiveMode {
     extensionInput = undefined;
     extensionEditor = undefined;
     extensionTerminalInputUnsubscribers = new Set();
+    // Client-side extension runner for connect mode (undefined in local mode)
+    _clientExtensionRunner = undefined;
     // Extension widgets (components rendered above/below the editor)
     extensionWidgetsAbove = new Map();
     extensionWidgetsBelow = new Map();
@@ -189,31 +216,61 @@ export class InteractiveMode {
     builtInHeader = undefined;
     // Custom header from extension (undefined = use built-in header)
     customHeader = undefined;
-    // Convenience accessors
+    options;
+    /** Proxy for connect mode — when set, core operations go through the proxy */
+    proxy;
+    /** Set the proxy after construction (used by connect mode for late binding) */
+    setProxy(proxy) {
+        this.proxy = proxy;
+    }
+    // Convenience accessors — return undefined when runtimeHost is not set (connect mode)
     get session() {
-        return this.runtimeHost.session;
+        return this.runtimeHost?.session;
     }
     get agent() {
-        return this.session.agent;
+        return this.session?.agent;
     }
     get sessionManager() {
-        return this.session.sessionManager;
+        return this.session?.sessionManager;
     }
     get settingsManager() {
-        return this.session.settingsManager;
+        return this.session?.settingsManager;
+    }
+    // Safe accessors that return defaults in connect mode
+    get showTerminalProgress() {
+        return this.runtimeHost ? this.settingsManager.getShowTerminalProgress() : false;
+    }
+    get showImages() {
+        return this.runtimeHost ? this.settingsManager.getShowImages() : false;
+    }
+    get imageWidthCells() {
+        return this.runtimeHost ? this.settingsManager.getImageWidthCells() : 80;
+    }
+    get currentCwd() {
+        return this.runtimeHost ? this.sessionManager.getCwd() : process.cwd();
     }
     constructor(runtimeHost, options = {}) {
-        this.options = options;
         this.runtimeHost = runtimeHost;
-        this.runtimeHost.setBeforeSessionInvalidate(() => {
-            this.resetExtensionUI();
-        });
-        this.runtimeHost.setRebindSession(async () => {
-            await this.rebindCurrentSession();
-        });
+        this.options = options;
+        this.proxy = options.proxy;
+        // Only register runtime callbacks when NOT using proxy (connect mode)
+        if (this.runtimeHost) {
+            this.runtimeHost.setBeforeSessionInvalidate(() => {
+                this.resetExtensionUI();
+            });
+            this.runtimeHost.setRebindSession(async () => {
+                await this.rebindCurrentSession();
+            });
+        }
         this.version = VERSION;
-        this.ui = new TUI(new ProcessTerminal(), this.settingsManager.getShowHardwareCursor());
-        this.ui.setClearOnShrink(this.settingsManager.getClearOnShrink());
+        // In connect mode (proxy set), use defaults for UI setup since session/settingsManager
+        // are not available. In normal mode, read from settingsManager.
+        const showHardwareCursor = this.runtimeHost ? this.settingsManager.getShowHardwareCursor() : false;
+        const clearOnShrink = this.runtimeHost ? this.settingsManager.getClearOnShrink() : true;
+        const editorPaddingX = this.runtimeHost ? this.settingsManager.getEditorPaddingX() : 0;
+        const autocompleteMaxVisible = this.runtimeHost ? this.settingsManager.getAutocompleteMaxVisible() : 8;
+        this.ui = new TUI(new ProcessTerminal(), showHardwareCursor);
+        this.ui.setClearOnShrink(clearOnShrink);
         this.headerContainer = new Container();
         this.chatContainer = new Container();
         this.pendingMessagesContainer = new Container();
@@ -222,8 +279,6 @@ export class InteractiveMode {
         this.widgetContainerBelow = new Container();
         this.keybindings = KeybindingsManager.create();
         setKeybindings(this.keybindings);
-        const editorPaddingX = this.settingsManager.getEditorPaddingX();
-        const autocompleteMaxVisible = this.settingsManager.getAutocompleteMaxVisible();
         this.defaultEditor = new CustomEditor(this.ui, getEditorTheme(), this.keybindings, {
             paddingX: editorPaddingX,
             autocompleteMaxVisible,
@@ -231,14 +286,19 @@ export class InteractiveMode {
         this.editor = this.defaultEditor;
         this.editorContainer = new Container();
         this.editorContainer.addChild(this.editor);
-        this.footerDataProvider = new FooterDataProvider(this.sessionManager.getCwd());
-        this.footer = new FooterComponent(this.session, this.footerDataProvider);
-        this.footer.setAutoCompactEnabled(this.session.autoCompactionEnabled);
+        this.footerDataProvider = new FooterDataProvider(this.runtimeHost ? this.sessionManager.getCwd() : process.cwd());
+        this.footer = new FooterComponent(this.runtimeHost ? this.session : undefined, this.footerDataProvider);
+        this.footer.setAutoCompactEnabled(this.runtimeHost ? this.session.autoCompactionEnabled : false);
         // Load hide thinking block setting
-        this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
+        this.hideThinkingBlock = this.runtimeHost ? this.settingsManager.getHideThinkingBlock() : false;
         // Register themes from resource loader and initialize
-        setRegisteredThemes(this.session.resourceLoader.getThemes().themes);
-        initTheme(this.settingsManager.getTheme(), true);
+        if (this.runtimeHost) {
+            setRegisteredThemes(this.session.resourceLoader.getThemes().themes);
+            initTheme(this.settingsManager.getTheme(), true);
+        }
+        else {
+            initTheme("dark", true);
+        }
     }
     getAutocompleteSourceTag(sourceInfo) {
         if (!sourceInfo) {
@@ -319,8 +379,7 @@ export class InteractiveMode {
         }));
         // Convert extension commands to SlashCommand format
         const builtinCommandNames = new Set(slashCommands.map((c) => c.name));
-        const extensionCommands = this.session.extensionRunner
-            .getRegisteredCommands()
+        const extensionCommands = this.session.extensionRunner.getRegisteredCommands()
             .filter((cmd) => !builtinCommandNames.has(cmd.name))
             .map((cmd) => ({
             name: cmd.invocationName,
@@ -353,6 +412,57 @@ export class InteractiveMode {
             this.editor.setAutocompleteProvider?.(provider);
         }
     }
+    /** Set up autocomplete for connect mode with a reduced command set */
+    setupConnectModeAutocomplete() {
+        // Fire-and-forget: fetch commands from server, build dynamic autocomplete.
+        // Falls back to builtin-only if the fetch fails.
+        void this._fetchAndSetConnectModeAutocomplete();
+    }
+    async _fetchAndSetConnectModeAutocomplete() {
+        try {
+            const commands = await this.proxy.fetchCommands();
+            this._applyConnectModeAutocomplete(commands);
+        }
+        catch {
+            this._applyConnectModeAutocompleteFallback();
+        }
+    }
+    _applyConnectModeAutocomplete(commands) {
+        const slashCommands = commands.map((cmd) => ({
+            name: cmd.name,
+            description: cmd.description,
+            ...(cmd.argumentHint && { argumentHint: cmd.argumentHint }),
+        }));
+        const provider = new CombinedAutocompleteProvider(slashCommands, this.currentCwd);
+        this.autocompleteProvider = provider;
+        this.defaultEditor.setAutocompleteProvider(provider);
+    }
+    _applyConnectModeAutocompleteFallback() {
+        const fallbackCommands = [
+            { name: "settings", description: "Open settings menu" },
+            {
+                name: "model",
+                description: "Switch model (e.g. /model provider/model-id)",
+                argumentHint: "<provider/model-id>",
+            },
+            { name: "compact", description: "Manually compact the session context" },
+            { name: "new", description: "Start a new session" },
+            { name: "fork", description: "Create a new fork from a previous user message" },
+            { name: "tree", description: "Navigate session tree (switch branches)" },
+            { name: "clone", description: "Duplicate the current session at the current position" },
+            { name: "resume", description: "Resume a different session" },
+            { name: "name", description: "Set session display name" },
+            { name: "copy", description: "Copy last agent message to clipboard" },
+            { name: "reload", description: "Reload keybindings, extensions, skills, prompts, and themes" },
+            { name: "hotkeys", description: "Show all keyboard shortcuts" },
+            { name: "changelog", description: "Show changelog entries" },
+            { name: "session", description: "Show session info and stats" },
+            { name: "quit", description: "Quit" },
+        ];
+        const provider = new CombinedAutocompleteProvider(fallbackCommands, this.currentCwd);
+        this.autocompleteProvider = provider;
+        this.defaultEditor.setAutocompleteProvider(provider);
+    }
     showStartupNoticesIfNeeded() {
         if (this.startupNoticesShown) {
             return;
@@ -384,49 +494,81 @@ export class InteractiveMode {
             return;
         this.registerSignalHandlers();
         // Load changelog (only show new entries, skip for resumed sessions)
-        this.changelogMarkdown = this.getChangelogForDisplay();
+        // In connect mode, skip changelog since we don't have a local session
+        if (this.runtimeHost) {
+            this.changelogMarkdown = this.getChangelogForDisplay();
+        }
         // Ensure fd and rg are available (downloads if missing, adds to PATH via getBinDir)
         // Both are needed: fd for autocomplete, rg for grep tool and bash commands
         const [fdPath] = await Promise.all([ensureTool("fd"), ensureTool("rg")]);
         this.fdPath = fdPath;
+        if (this.runtimeHost &&
+            this.session.scopedModels.length > 0 &&
+            (this.options.verbose || !this.settingsManager.getQuietStartup())) {
+            const modelList = this.session.scopedModels.map((sm) => {
+                const thinkingStr = sm.thinkingLevel ? `:${sm.thinkingLevel}` : "";
+                return `${sm.model.id}${thinkingStr}`;
+            }).join(", ");
+            const cycleKeys = this.keybindings.getKeys("app.model.cycleForward");
+            const cycleHint = cycleKeys.length > 0
+                ? theme.fg("muted", ` (${formatKeyText(cycleKeys.join("/"), { capitalize: true })} to cycle)`)
+                : "";
+            console.log(theme.fg("dim", `Model scope: ${modelList}${cycleHint}`));
+        }
         // Add header container as first child
         this.ui.addChild(this.headerContainer);
         // Add header with keybindings from config (unless silenced)
-        if (this.options.verbose || !this.settingsManager.getQuietStartup()) {
-            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 = [
-                hint("app.interrupt", "to interrupt"),
-                hint("app.clear", "to clear"),
-                rawKeyHint(`${keyText("app.clear")} twice`, "to exit"),
-                hint("app.exit", "to exit (empty)"),
-                hint("app.suspend", "to suspend"),
-                keyHint("tui.editor.deleteToLineEnd", "to delete to end"),
-                hint("app.thinking.cycle", "to cycle thinking level"),
-                rawKeyHint(`${keyText("app.model.cycleForward")}/${keyText("app.model.cycleBackward")}`, "to cycle models"),
-                hint("app.model.select", "to select model"),
-                hint("app.tools.expand", "to expand tools"),
-                hint("app.thinking.toggle", "to expand thinking"),
-                hint("app.editor.external", "for external editor"),
-                rawKeyHint("/", "for commands"),
-                rawKeyHint("!", "to run bash"),
-                rawKeyHint("!!", "to run bash (no context)"),
-                hint("app.message.followUp", "to queue follow-up"),
-                hint("app.message.dequeue", "to edit all queued messages"),
-                hint("app.clipboard.pasteImage", "to paste image"),
-                rawKeyHint("drop files", "to attach"),
-            ].join("\n");
-            const compactInstructions = [
-                hint("app.interrupt", "interrupt"),
-                rawKeyHint(`${keyText("app.clear")}/${keyText("app.exit")}`, "clear/exit"),
-                rawKeyHint("/", "commands"),
-                rawKeyHint("!", "bash"),
-                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", `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);
+        // In connect mode, always show header since we don't have settingsManager
+        const showHeader = this.runtimeHost ? this.options.verbose || !this.settingsManager.getQuietStartup() : true;
+        if (showHeader) {
+            const bannerData = this.options.banner;
+            if (bannerData) {
+                // Connect mode: render banner from structured data sent by server
+                const logo = theme.bold(theme.fg("accent", bannerData.appName)) + theme.fg("dim", ` v${bannerData.version}`);
+                const renderHint = (hint) => theme.fg("dim", hint.key) + theme.fg("muted", ` ${hint.description}`);
+                const expandedInstructions = bannerData.expandedHints.map(renderHint).join("\n");
+                const compactInstructions = bannerData.compactHints.map(renderHint).join(theme.fg("muted", " · "));
+                const compactOnboarding = theme.fg("dim", bannerData.compactOnboarding);
+                const onboarding = theme.fg("dim", bannerData.onboarding);
+                this.builtInHeader = new ExpandableText(() => `${logo}\n${compactInstructions}\n${compactOnboarding}\n\n${onboarding}`, () => `${logo}\n${expandedInstructions}\n\n${onboarding}`, this.getStartupExpansionState(), 1, 0);
+            }
+            else {
+                // Local mode: generate banner from keybindings + theme
+                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 = [
+                    hint("app.interrupt", "to interrupt"),
+                    hint("app.clear", "to clear"),
+                    rawKeyHint(`${keyText("app.clear")} twice`, "to exit"),
+                    hint("app.exit", "to exit (empty)"),
+                    hint("app.suspend", "to suspend"),
+                    keyHint("tui.editor.deleteToLineEnd", "to delete to end"),
+                    hint("app.thinking.cycle", "to cycle thinking level"),
+                    rawKeyHint(`${keyText("app.model.cycleForward")}/${keyText("app.model.cycleBackward")}`, "to cycle models"),
+                    hint("app.model.select", "to select model"),
+                    hint("app.tools.expand", "to expand tools"),
+                    hint("app.thinking.toggle", "to expand thinking"),
+                    hint("app.editor.external", "for external editor"),
+                    rawKeyHint("/", "for commands"),
+                    rawKeyHint("!", "to run bash"),
+                    rawKeyHint("!!", "to run bash (no context)"),
+                    hint("app.message.followUp", "to queue follow-up"),
+                    hint("app.message.dequeue", "to edit all queued messages"),
+                    hint("app.clipboard.pasteImage", "to paste image"),
+                    rawKeyHint("drop files", "to attach"),
+                ].join("\n");
+                const compactInstructions = [
+                    hint("app.interrupt", "interrupt"),
+                    rawKeyHint(`${keyText("app.clear")}/${keyText("app.exit")}`, "clear/exit"),
+                    rawKeyHint("/", "commands"),
+                    rawKeyHint("!", "bash"),
+                    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", `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));
             this.headerContainer.addChild(this.builtInHeader);
@@ -437,6 +579,50 @@ export class InteractiveMode {
             this.builtInHeader = new Text("", 0, 0);
             this.headerContainer.addChild(this.builtInHeader);
         }
+        // In connect mode, render loaded resources from banner data into chat container
+        if (this.options.banner) {
+            const banner = this.options.banner;
+            // Loaded resource sections
+            for (const section of banner.loadedResources) {
+                const sectionHeader = theme.fg("mdHeading", `[${section.name}]`);
+                const compactBody = theme.fg("dim", `  ${section.compactList}`);
+                const expandedBody = theme.fg("dim", section.expandedList
+                    .split("\n")
+                    .map((l) => `  ${l}`)
+                    .join("\n"));
+                const expandable = new ExpandableText(() => `${sectionHeader}\n${compactBody}`, () => `${sectionHeader}\n${expandedBody}`, this.getStartupExpansionState(), 0, 0);
+                this.chatContainer.addChild(expandable);
+                this.chatContainer.addChild(new Spacer(1));
+            }
+            // Diagnostics (Skill conflicts, Prompt conflicts, etc.)
+            for (const diag of banner.diagnostics) {
+                const lines = [];
+                for (const entry of diag.entries) {
+                    if (entry.type === "collision" && entry.collision) {
+                        const c = entry.collision;
+                        lines.push(`  "${c.name}" collision:`);
+                        lines.push(`    ✓ auto (${c.winnerSource ?? "local"}) ${c.winnerPath}`);
+                        lines.push(`    ✗ ${c.loserPath} (skipped)`);
+                    }
+                    else {
+                        lines.push(`  ${entry.message}`);
+                    }
+                }
+                if (lines.length > 0) {
+                    this.chatContainer.addChild(new Text(`${theme.fg("warning", `[${diag.label}]`)}\n${lines.join("\n")}`, 0, 0));
+                    this.chatContainer.addChild(new Spacer(1));
+                }
+            }
+            // What's New (changelog)
+            if (banner.changelogMarkdown) {
+                this.chatContainer.addChild(new DynamicBorder());
+                this.chatContainer.addChild(new Text(theme.bold(theme.fg("accent", "What's New")), 1, 0));
+                this.chatContainer.addChild(new Spacer(1));
+                this.chatContainer.addChild(new Markdown(banner.changelogMarkdown.trim(), 1, 0, this.getMarkdownThemeWithSettings()));
+                this.chatContainer.addChild(new Spacer(1));
+                this.chatContainer.addChild(new DynamicBorder());
+            }
+        }
         this.ui.addChild(this.chatContainer);
         this.ui.addChild(this.pendingMessagesContainer);
         this.ui.addChild(this.statusContainer);
@@ -452,9 +638,42 @@ export class InteractiveMode {
         this.ui.start();
         this.isInitialized = true;
         // Initialize extensions first so resources are shown before messages
-        await this.rebindCurrentSession();
+        if (this.runtimeHost) {
+            await this.rebindCurrentSession();
+        }
+        else if (this.proxy) {
+            this.subscribeToAgent();
+            // Set initial footer snapshot from proxy
+            const snapshot = this.proxy.getSnapshot();
+            this.footer.setSnapshot(snapshot);
+            this.footerDataProvider.setCwd(snapshot.cwd);
+            this.footerDataProvider.setAvailableProviderCount(snapshot.availableProviderCount);
+            // If agent is already streaming, create the working loader
+            // (agent_start event fired before we subscribed)
+            if (snapshot.isStreaming) {
+                this.loadingAnimation = this.createWorkingLoader();
+                this.statusContainer.addChild(this.loadingAnimation);
+            }
+            // Apply remote settings to editor
+            if (snapshot.remoteSettings) {
+                const paddingX = snapshot.remoteSettings.editorPaddingX;
+                this.defaultEditor.setPaddingX(paddingX);
+                if (this.editor !== this.defaultEditor) {
+                    this.editor.setPaddingX?.(paddingX);
+                }
+            }
+            // Set up autocomplete for connect mode with a reduced command set
+            this.setupConnectModeAutocomplete();
+            // Load client-side extensions for UI (shortcuts, widgets, status, etc.)
+            await this.bindConnectModeExtensions();
+        }
         // Render initial messages AFTER showing loaded resources
-        this.renderInitialMessages();
+        if (this.runtimeHost) {
+            this.renderInitialMessages();
+        }
+        else if (this.proxy) {
+            this.renderInitialMessages();
+        }
         // Set up theme file watcher
         onThemeChange(() => {
             this.ui.invalidate();
@@ -466,19 +685,27 @@ export class InteractiveMode {
             this.ui.requestRender();
         });
         // Initialize available provider count for footer display
-        await this.updateAvailableProviderCount();
+        // In connect mode, skip since we don't have a model registry
+        if (this.runtimeHost) {
+            await this.updateAvailableProviderCount();
+        }
     }
     /**
      * Update terminal title with session name and cwd.
      */
     updateTerminalTitle() {
-        const cwdBasename = path.basename(this.sessionManager.getCwd());
-        const sessionName = this.sessionManager.getSessionName();
-        if (sessionName) {
-            this.ui.terminal.setTitle(`${APP_TITLE} - ${sessionName} - ${cwdBasename}`);
+        const cwdBasename = path.basename(this.currentCwd);
+        if (this.runtimeHost) {
+            const sessionName = this.sessionManager.getSessionName();
+            if (sessionName) {
+                this.ui.terminal.setTitle(`${APP_TITLE} - ${sessionName} - ${cwdBasename}`);
+            }
+            else {
+                this.ui.terminal.setTitle(`${APP_TITLE} - ${cwdBasename}`);
+            }
         }
         else {
-            this.ui.terminal.setTitle(`${APP_TITLE} - ${cwdBasename}`);
+            this.ui.terminal.setTitle(`${APP_TITLE} (connect) - ${cwdBasename}`);
         }
     }
     /**
@@ -487,51 +714,64 @@ export class InteractiveMode {
      */
     async run() {
         await this.init();
-        // Start version check asynchronously
-        checkForNewPiVersion(this.version).then((newVersion) => {
-            if (newVersion) {
-                this.showNewVersionNotification(newVersion);
-            }
-        });
-        // Start package update check asynchronously
-        this.checkForPackageUpdates().then((updates) => {
-            if (updates.length > 0) {
-                this.showPackageUpdateNotification(updates);
-            }
-        });
-        // Check tmux keyboard setup asynchronously
-        this.checkTmuxKeyboardSetup().then((warning) => {
-            if (warning) {
-                this.showWarning(warning);
-            }
-        });
+        // Start version check asynchronously (skip in connect mode)
+        if (this.runtimeHost) {
+            checkForNewPiVersion(this.version).then((newRelease) => {
+                if (newRelease) {
+                    this.showNewVersionNotification(newRelease);
+                }
+            });
+            // Start package update check asynchronously
+            this.checkForPackageUpdates().then((updates) => {
+                if (updates.length > 0) {
+                    this.showPackageUpdateNotification(updates);
+                }
+            });
+            // Check tmux keyboard setup asynchronously
+            this.checkTmuxKeyboardSetup().then((warning) => {
+                if (warning) {
+                    this.showWarning(warning);
+                }
+            });
+        }
         // Show startup warnings
         const { migratedProviders, modelFallbackMessage, initialMessage, initialImages, initialMessages } = this.options;
         if (migratedProviders && migratedProviders.length > 0) {
             this.showWarning(`Migrated credentials to auth.json: ${migratedProviders.join(", ")}`);
         }
-        const modelsJsonError = this.session.modelRegistry.getError();
-        if (modelsJsonError) {
-            this.showError(`models.json error: ${modelsJsonError}`);
+        if (this.runtimeHost) {
+            const modelsJsonError = this.session.modelRegistry.getError();
+            if (modelsJsonError) {
+                this.showError(`models.json error: ${modelsJsonError}`);
+            }
         }
         if (modelFallbackMessage) {
             this.showWarning(modelFallbackMessage);
         }
-        void this.maybeWarnAboutAnthropicSubscriptionAuth();
+        if (this.runtimeHost) {
+            void this.maybeWarnAboutAnthropicSubscriptionAuth();
+        }
         // Process initial messages
         if (initialMessage) {
             try {
-                await this.session.prompt(initialMessage, { images: initialImages });
+                if (this.proxy) {
+                    // Proxy uses a different image format; convert or skip images
+                    await this.proxy.prompt(initialMessage);
+                }
+                else {
+                    await this.session.prompt(initialMessage, { images: initialImages });
+                }
             }
             catch (error) {
                 const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
                 this.showError(errorMessage);
             }
         }
+        const cmdTarget = this.proxy ?? this.session;
         if (initialMessages) {
             for (const message of initialMessages) {
                 try {
-                    await this.session.prompt(message);
+                    await cmdTarget.prompt(message);
                 }
                 catch (error) {
                     const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
@@ -543,7 +783,7 @@ export class InteractiveMode {
         while (true) {
             const userInput = await this.getUserInput();
             try {
-                await this.session.prompt(userInput);
+                await cmdTarget.prompt(userInput);
             }
             catch (error) {
                 const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
@@ -654,7 +894,7 @@ export class InteractiveMode {
     getMarkdownThemeWithSettings() {
         return {
             ...getMarkdownTheme(),
-            codeBlockIndent: this.settingsManager.getCodeBlockIndent(),
+            codeBlockIndent: this.runtimeHost ? this.settingsManager.getCodeBlockIndent() : "  ",
         };
     }
     // =========================================================================
@@ -1092,6 +1332,9 @@ export class InteractiveMode {
         const uiContext = this.createExtensionUIContext();
         await this.session.bindExtensions({
             uiContext,
+            abortHandler: () => {
+                this.restoreQueuedMessagesToEditor({ abort: true });
+            },
             commandContextActions: {
                 waitForIdle: () => this.session.agent.waitForIdle(),
                 newSession: async (options) => {
@@ -1169,7 +1412,94 @@ export class InteractiveMode {
         this.showLoadedResources({ force: false, showDiagnosticsWhenQuiet: true });
         this.showStartupNoticesIfNeeded();
     }
+    /**
+     * Load and bind client-side extensions for connect mode.
+     * Extensions run with a real UI context but stub session/model access.
+     * Tool and event registrations are no-ops (handled by the server).
+     */
+    async bindConnectModeExtensions() {
+        if (!this.proxy)
+            return;
+        const snapshot = this.proxy.getSnapshot();
+        const remoteClientExtensionsUrl = this.options.remoteClientExtensionsUrl;
+        if (!remoteClientExtensionsUrl)
+            return;
+        try {
+            const cwd = snapshot.cwd || process.cwd();
+            // Load server-synchronized client extensions. Connect mode intentionally
+            // does not load local extension paths; the server is the source of truth.
+            const result = await loadRemoteClientExtensions(remoteClientExtensionsUrl, cwd, this.options.remoteClientExtensionHeaders);
+            if (result.extensions.length === 0)
+                return;
+            const runner = ExtensionRunnerImpl.createClientSide(result.extensions, result.runtime, cwd);
+            // Bind core actions — most are no-ops since the server handles them.
+            // Only UI-facing actions need real implementations.
+            runner.bindCore({
+                sendMessage: () => { },
+                sendUserMessage: () => { },
+                appendEntry: () => { },
+                setSessionName: () => { },
+                getSessionName: () => undefined,
+                setLabel: () => { },
+                getActiveTools: () => [],
+                getAllTools: () => [],
+                setActiveTools: () => { },
+                refreshTools: () => { },
+                getCommands: () => [],
+                setModel: () => Promise.resolve(false),
+                getThinkingLevel: () => "medium",
+                setThinkingLevel: () => { },
+            }, {
+                getModel: () => undefined,
+                isIdle: () => true,
+                getSignal: () => undefined,
+                abort: () => {
+                    this.proxy.abort();
+                },
+                hasPendingMessages: () => false,
+                shutdown: () => {
+                    void this.shutdown();
+                },
+                getContextUsage: () => undefined,
+                compact: () => { },
+                getSystemPrompt: () => "",
+            }, {
+                registerProvider: () => { },
+                unregisterProvider: () => { },
+            });
+            // Bind command context — delegate to proxy
+            runner.bindCommandContext({
+                waitForIdle: () => Promise.resolve(),
+                newSession: async () => {
+                    await this.proxy.newSession();
+                    return { cancelled: false };
+                },
+                fork: async () => {
+                    await this.proxy.fork();
+                    return { cancelled: false };
+                },
+                navigateTree: async () => ({ cancelled: false }),
+                switchSession: async () => ({ cancelled: false }),
+                reload: async () => {
+                    await this.proxy.reload();
+                },
+            });
+            // Set the real UI context so extensions can interact with the TUI
+            const uiContext = this.createExtensionUIContext();
+            runner.setUIContext(uiContext);
+            // Set up extension shortcuts
+            this.setupExtensionShortcuts(runner);
+            this._clientExtensionRunner = runner;
+            // Emit session_start so extensions can initialize their UI
+            await runner.emit({ type: "session_start", reason: "startup" });
+        }
+        catch (err) {
+            // Non-fatal: extensions are best-effort in connect mode
+            process.stderr.write(`[connect] Failed to load client-side extensions: ${err instanceof Error ? err.message : String(err)}\n`);
+        }
+    }
     applyRuntimeSettings() {
+        configureHttpDispatcher(this.settingsManager.getHttpIdleTimeoutMs());
         this.footer.setSession(this.session);
         this.footer.setAutoCompactEnabled(this.session.autoCompactionEnabled);
         this.footerDataProvider.setCwd(this.sessionManager.getCwd());
@@ -1215,7 +1545,7 @@ export class InteractiveMode {
      * Get a registered tool definition by name (for custom rendering).
      */
     getRegisteredToolDefinition(toolName) {
-        return this.session.getToolDefinition(toolName);
+        return this.session?.getToolDefinition(toolName);
     }
     /**
      * Set up keyboard shortcuts registered by extensions.
@@ -1234,7 +1564,9 @@ export class InteractiveMode {
             model: this.session.model,
             isIdle: () => !this.session.isStreaming,
             signal: this.session.agent.signal,
-            abort: () => this.session.abort(),
+            abort: () => {
+                this.restoreQueuedMessagesToEditor({ abort: true });
+            },
             hasPendingMessages: () => this.session.pendingMessageCount > 0,
             shutdown: () => {
                 this.shutdownRequested = true;
@@ -1397,6 +1729,11 @@ export class InteractiveMode {
             this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${keyText("app.interrupt")} to interrupt)`);
         }
         this.setHiddenThinkingLabel();
+        // Invalidate client-side extension runner (connect mode)
+        if (this._clientExtensionRunner) {
+            this._clientExtensionRunner.invalidate("Session replaced — extension context is stale");
+            this._clientExtensionRunner = undefined;
+        }
     }
     // Maximum total widget lines to prevent viewport overflow
     static MAX_WIDGET_LINES = 10;
@@ -1509,8 +1846,54 @@ export class InteractiveMode {
     }
     /**
      * Create the ExtensionUIContext for extensions.
+     * In connect mode (proxy set), returns a headless implementation that rejects interactive dialogs.
      */
     createExtensionUIContext() {
+        // Connect mode: real UI for non-interactive operations, defaults for dialogs
+        if (this.proxy) {
+            return {
+                // Interactive dialogs — select is real TUI, others return defaults
+                select: (title, options, opts) => this.showExtensionSelector(title, options, opts),
+                confirm: () => Promise.resolve(false),
+                input: () => Promise.resolve(undefined),
+                custom: () => Promise.resolve(undefined),
+                editor: () => Promise.resolve(undefined),
+                // Non-interactive UI — real TUI implementations
+                notify: (message, type) => this.showExtensionNotify(message, type),
+                onTerminalInput: (handler) => this.addExtensionTerminalInputListener(handler),
+                setStatus: (key, text) => this.setExtensionStatus(key, text),
+                setWorkingMessage: (message) => {
+                    this.workingMessage = message;
+                    if (this.loadingAnimation) {
+                        this.loadingAnimation.setMessage(message ?? this.defaultWorkingMessage);
+                    }
+                },
+                setWorkingVisible: (visible) => this.setWorkingVisible(visible),
+                setWorkingIndicator: (options) => this.setWorkingIndicator(options),
+                setHiddenThinkingLabel: (label) => this.setHiddenThinkingLabel(label),
+                setWidget: (key, content, options) => this.setExtensionWidget(key, content, options),
+                setFooter: (factory) => this.setExtensionFooter(factory),
+                setHeader: (factory) => this.setExtensionHeader(factory),
+                setTitle: (title) => this.ui.terminal.setTitle(title),
+                pasteToEditor: (text) => this.editor.handleInput(`\x1b[200~${text}\x1b[201~`),
+                setEditorText: (text) => this.editor.setText(text),
+                getEditorText: () => this.editor.getExpandedText?.() ?? this.editor.getText(),
+                addAutocompleteProvider: (factory) => {
+                    this.autocompleteProviderWrappers.push(factory);
+                    this.setupAutocompleteProvider();
+                },
+                setEditorComponent: (factory) => this.setCustomEditorComponent(factory),
+                getEditorComponent: () => this.editorComponentFactory,
+                get theme() {
+                    return theme;
+                },
+                getAllThemes: () => [],
+                getTheme: () => undefined,
+                setTheme: () => ({ success: false }),
+                getToolsExpanded: () => this.toolOutputExpanded,
+                setToolsExpanded: (expanded) => this.setToolsExpanded(expanded),
+            };
+        }
         return {
             select: (title, options, opts) => this.showExtensionSelector(title, options, opts),
             confirm: (title, message, opts) => this.showExtensionConfirm(title, message, opts),
@@ -1855,11 +2238,18 @@ export class InteractiveMode {
         // Set up handlers on defaultEditor - they use this.editor for text access
         // so they work correctly regardless of which editor is active
         this.defaultEditor.onEscape = () => {
-            if (this.session.isStreaming) {
+            const isStreaming = this.proxy ? this.proxy.isStreaming : this.session.isStreaming;
+            const isBashRunning = this.proxy ? this.proxy.isBashRunning : this.session.isBashRunning;
+            if (isStreaming) {
                 this.restoreQueuedMessagesToEditor({ abort: true });
             }
-            else if (this.session.isBashRunning) {
-                this.session.abortBash();
+            else if (isBashRunning) {
+                if (this.proxy) {
+                    this.proxy.abortBash();
+                }
+                else {
+                    this.session.abortBash();
+                }
             }
             else if (this.isBashMode) {
                 this.editor.setText("");
@@ -1868,7 +2258,7 @@ export class InteractiveMode {
             }
             else if (!this.editor.getText().trim()) {
                 // Double-escape with empty editor triggers /tree, /fork, or nothing based on setting
-                const action = this.settingsManager.getDoubleEscapeAction();
+                const action = this.settingsManager?.getDoubleEscapeAction() ?? "tree";
                 if (action !== "none") {
                     const now = Date.now();
                     if (now - this.lastEscapeTime < 500) {
@@ -1923,7 +2313,16 @@ export class InteractiveMode {
             if (!image) {
                 return;
             }
-            // Write to temp file
+            if (this.proxy) {
+                // Connect mode: send as base64 data URL via prompt images
+                const base64 = Buffer.from(image.bytes).toString("base64");
+                const dataUrl = `data:${image.mimeType};base64,${base64}`;
+                const text = this.editor.getText().trim() || "Look at this image";
+                await this.proxy.prompt(text, { images: [{ url: dataUrl, mediaType: image.mimeType }] });
+                this.editor.setText("");
+                return;
+            }
+            // Local mode: write to temp file and insert path
             const tmpDir = os.tmpdir();
             const ext = extensionForImageMimeType(image.mimeType) ?? "png";
             const fileName = `pi-clipboard-${crypto.randomUUID()}.${ext}`;
@@ -1942,6 +2341,13 @@ export class InteractiveMode {
             text = text.trim();
             if (!text)
                 return;
+            // In connect mode, handle commands via proxy
+            if (this.proxy) {
+                if (text.startsWith("/")) {
+                    await this.handleConnectModeCommand(text);
+                    return;
+                }
+            }
             // Handle commands
             if (text === "/settings") {
                 this.showSettingsSelector();
@@ -2067,6 +2473,11 @@ export class InteractiveMode {
             }
             // Handle bash command (! for normal, !! for excluded from context)
             if (text.startsWith("!")) {
+                if (this.proxy) {
+                    this.showWarning("Bash commands are not supported in connect mode.");
+                    this.editor.setText(text);
+                    return;
+                }
                 const isExcluded = text.startsWith("!!");
                 const command = isExcluded ? text.slice(2).trim() : text.slice(1).trim();
                 if (command) {
@@ -2083,8 +2494,8 @@ export class InteractiveMode {
                 }
             }
             // Queue input during compaction (extension commands execute immediately)
-            if (this.session.isCompacting) {
-                if (this.isExtensionCommand(text)) {
+            if (this.proxy ? this.proxy.isCompacting : this.session.isCompacting) {
+                if (!this.proxy && this.isExtensionCommand(text)) {
                     this.editor.addToHistory?.(text);
                     this.editor.setText("");
                     await this.session.prompt(text);
@@ -2096,10 +2507,15 @@ export class InteractiveMode {
             }
             // If streaming, use prompt() with steer behavior
             // This handles extension commands (execute immediately), prompt template expansion, and queueing
-            if (this.session.isStreaming) {
+            if (this.proxy ? this.proxy.isStreaming : this.session.isStreaming) {
                 this.editor.addToHistory?.(text);
                 this.editor.setText("");
-                await this.session.prompt(text, { streamingBehavior: "steer" });
+                if (this.proxy) {
+                    this.proxy.steer(text);
+                }
+                else {
+                    await this.session.prompt(text, { streamingBehavior: "steer" });
+                }
                 this.updatePendingMessagesDisplay();
                 this.ui.requestRender();
                 return;
@@ -2110,11 +2526,117 @@ export class InteractiveMode {
             if (this.onInputCallback) {
                 this.onInputCallback(text);
             }
+            else {
+                this.pendingUserInputs.push(text);
+            }
             this.editor.addToHistory?.(text);
         };
     }
+    /** Handle slash commands in connect mode */
+    async handleConnectModeCommand(text) {
+        this.editor.setText("");
+        const cmd = text.split(" ")[0];
+        const arg = text.slice(cmd.length + 1).trim() || undefined;
+        switch (cmd) {
+            case "/quit":
+                await this.shutdown();
+                break;
+            case "/compact":
+                await this.proxy.compact();
+                break;
+            case "/model":
+                if (arg) {
+                    this.proxy.setModel(arg);
+                    this.showStatus(`Model: ${arg}`);
+                }
+                else {
+                    this.showConnectModeModelSelector();
+                }
+                break;
+            case "/scoped-models":
+                this.showConnectModeScopedModelsSelector();
+                break;
+            case "/settings":
+                this.showConnectModeSettingsSelector();
+                break;
+            case "/export":
+                this.showStatus("Not available in connect mode");
+                break;
+            case "/import":
+                this.showStatus("Not available in connect mode");
+                break;
+            case "/share":
+                this.showStatus("Not available in connect mode");
+                break;
+            case "/login":
+                this.showStatus("Not available in connect mode — configure auth on the server");
+                break;
+            case "/logout":
+                this.showStatus("Not available in connect mode — configure auth on the server");
+                break;
+            case "/new":
+                await this.proxy.newSession();
+                // UI reset is handled by the session_replaced event
+                break;
+            case "/fork":
+                this.showConnectModeForkSelector();
+                break;
+            case "/tree":
+                this.showConnectModeTreeSelector();
+                break;
+            case "/clone":
+                await this.proxy.fork();
+                // UI reset is handled by the session_replaced event
+                break;
+            case "/resume":
+                this.showConnectModeSessionSelector();
+                break;
+            case "/name":
+                if (arg) {
+                    this.proxy.renameSession(arg);
+                    this.showStatus(`Session renamed to: ${arg}`);
+                }
+                else {
+                    this.showWarning("Usage: /name <session-name>");
+                }
+                break;
+            case "/copy":
+                this.handleConnectModeCopy();
+                break;
+            case "/reload":
+                await this.proxy.reload();
+                this.setupConnectModeAutocomplete();
+                this.showStatus("Reloaded");
+                break;
+            case "/hotkeys":
+                this.handleHotkeysCommand();
+                break;
+            case "/changelog":
+                this.handleChangelogCommand();
+                break;
+            case "/session":
+                this.showConnectModeSessionInfo();
+                break;
+            default: {
+                // Check client-side extension runner first
+                if (this._clientExtensionRunner) {
+                    const cmdName = cmd.startsWith("/") ? cmd.slice(1) : cmd;
+                    const resolvedCmd = this._clientExtensionRunner.getCommand(cmdName);
+                    if (resolvedCmd) {
+                        const ctx = this._clientExtensionRunner.createCommandContext();
+                        await resolvedCmd.handler(arg ?? "", ctx);
+                        break;
+                    }
+                }
+                // Non-builtin commands (skill, prompt template, extension) are sent as prompts.
+                // The server's agent-session handles skill expansion and prompt template resolution.
+                await this.proxy.prompt(text);
+            }
+        }
+    }
     subscribeToAgent() {
-        this.unsubscribe = this.session.subscribe(async (event) => {
+        const eventSource = this.proxy ?? this.session;
+        this.unsubscribe = eventSource.subscribe(async (event) => {
             await this.handleEvent(event);
         });
     }
@@ -2126,7 +2648,7 @@ export class InteractiveMode {
         switch (event.type) {
             case "agent_start":
                 this.pendingTools.clear();
-                if (this.settingsManager.getShowTerminalProgress()) {
+                if (this.showTerminalProgress) {
                     this.ui.terminal.setProgress(true);
                 }
                 // Restore main escape handler if retry handler is still active
@@ -2189,9 +2711,9 @@ export class InteractiveMode {
                         if (content.type === "toolCall") {
                             if (!this.pendingTools.has(content.id)) {
                                 const component = new ToolExecutionComponent(content.name, content.id, content.arguments, {
-                                    showImages: this.settingsManager.getShowImages(),
-                                    imageWidthCells: this.settingsManager.getImageWidthCells(),
-                                }, this.getRegisteredToolDefinition(content.name), this.ui, this.sessionManager.getCwd());
+                                    showImages: this.showImages,
+                                    imageWidthCells: this.imageWidthCells,
+                                }, this.getRegisteredToolDefinition(content.name), this.ui, this.currentCwd);
                                 component.setExpanded(this.toolOutputExpanded);
                                 this.chatContainer.addChild(component);
                                 this.pendingTools.set(content.id, component);
@@ -2214,7 +2736,7 @@ export class InteractiveMode {
                     this.streamingMessage = event.message;
                     let errorMessage;
                     if (this.streamingMessage.stopReason === "aborted") {
-                        const retryAttempt = this.session.retryAttempt;
+                        const retryAttempt = this.runtimeHost ? this.session.retryAttempt : 0;
                         errorMessage =
                             retryAttempt > 0
                                 ? `Aborted after ${retryAttempt} retry attempt${retryAttempt > 1 ? "s" : ""}`
@@ -2250,9 +2772,9 @@ export class InteractiveMode {
                 let component = this.pendingTools.get(event.toolCallId);
                 if (!component) {
                     component = new ToolExecutionComponent(event.toolName, event.toolCallId, event.args, {
-                        showImages: this.settingsManager.getShowImages(),
-                        imageWidthCells: this.settingsManager.getImageWidthCells(),
-                    }, this.getRegisteredToolDefinition(event.toolName), this.ui, this.sessionManager.getCwd());
+                        showImages: this.showImages,
+                        imageWidthCells: this.imageWidthCells,
+                    }, this.getRegisteredToolDefinition(event.toolName), this.ui, this.currentCwd);
                     component.setExpanded(this.toolOutputExpanded);
                     this.chatContainer.addChild(component);
                     this.pendingTools.set(event.toolCallId, component);
@@ -2279,7 +2801,7 @@ export class InteractiveMode {
                 break;
             }
             case "agent_end":
-                if (this.settingsManager.getShowTerminalProgress()) {
+                if (this.showTerminalProgress) {
                     this.ui.terminal.setProgress(false);
                 }
                 if (this.loadingAnimation) {
@@ -2296,14 +2818,70 @@ export class InteractiveMode {
                 await this.checkShutdownRequested();
                 this.ui.requestRender();
                 break;
+            case "turn_stats": {
+                const { tps, output, input, cacheRead, cacheWrite, total, duration } = event;
+                const parts = [];
+                if (output > 0) {
+                    parts.push(`TPS ${tps.toFixed(1)} tok/s`);
+                }
+                parts.push(`out ${formatTokens(output)}`);
+                parts.push(`in ${formatTokens(input)}`);
+                if (cacheRead > 0 || cacheWrite > 0) {
+                    parts.push(`cache r/w ${formatTokens(cacheRead)}/${formatTokens(cacheWrite)}`);
+                }
+                parts.push(`total ${formatTokens(total)}`);
+                parts.push(`${duration.toFixed(1)}s`);
+                this.showStatus(parts.join(", "));
+                break;
+            }
+            case "session_replaced": {
+                // Server session was replaced (new/resume/fork) — reset UI and render new session
+                this.chatContainer.clear();
+                this.pendingMessagesContainer.clear();
+                this.compactionQueuedMessages = [];
+                this.pendingTools.clear();
+                if (this.loadingAnimation) {
+                    this.loadingAnimation.stop();
+                    this.loadingAnimation = undefined;
+                }
+                this.statusContainer.clear();
+                this.streamingComponent = undefined;
+                this.streamingMessage = undefined;
+                // Reset extension UI and reload client-side extensions
+                this.resetExtensionUI();
+                // Update footer with new session state
+                const snapshot = this.proxy.getSnapshot();
+                this.footer.setSnapshot(snapshot);
+                this.footerDataProvider.setCwd(snapshot.cwd);
+                this.footerDataProvider.setAvailableProviderCount(snapshot.availableProviderCount);
+                // Re-bind client-side extensions for the new session
+                void this.bindConnectModeExtensions();
+                // Render messages from the new session
+                this.renderInitialMessages();
+                // Show confirmation
+                const label = event.reason === "new"
+                    ? "New session started"
+                    : event.reason === "resume"
+                        ? "Session resumed"
+                        : "Forked to new session";
+                this.chatContainer.addChild(new Spacer(1));
+                this.chatContainer.addChild(new Text(theme.fg("accent", `✓ ${label}`), 1, 1));
+                this.ui.requestRender();
+                break;
+            }
             case "compaction_start": {
-                if (this.settingsManager.getShowTerminalProgress()) {
+                if (this.showTerminalProgress) {
                     this.ui.terminal.setProgress(true);
                 }
                 // Keep editor active; submissions are queued during compaction.
                 this.autoCompactionEscapeHandler = this.defaultEditor.onEscape;
                 this.defaultEditor.onEscape = () => {
-                    this.session.abortCompaction();
+                    if (this.proxy) {
+                        this.proxy.abort();
+                    }
+                    else {
+                        this.session.abortCompaction();
+                    }
                 };
                 this.statusContainer.clear();
                 const cancelHint = `(${keyText("app.interrupt")} to cancel)`;
@@ -2316,7 +2894,7 @@ export class InteractiveMode {
                 break;
             }
             case "compaction_end": {
-                if (this.settingsManager.getShowTerminalProgress()) {
+                if (this.showTerminalProgress) {
                     this.ui.terminal.setProgress(false);
                 }
                 if (this.autoCompactionEscapeHandler) {
@@ -2355,11 +2933,33 @@ export class InteractiveMode {
                 this.ui.requestRender();
                 break;
             }
+            case "state_update": {
+                // Update footer snapshot for connect mode
+                if (this.proxy && event.snapshot) {
+                    const currentSnapshot = this.proxy.getSnapshot();
+                    const merged = { ...currentSnapshot, ...event.snapshot };
+                    this.footer.setSnapshot(merged);
+                    if (event.snapshot.cwd !== undefined) {
+                        this.footerDataProvider.setCwd(event.snapshot.cwd);
+                    }
+                    if (event.snapshot.availableProviderCount !== undefined) {
+                        this.footerDataProvider.setAvailableProviderCount(event.snapshot.availableProviderCount);
+                    }
+                }
+                this.footer.invalidate();
+                this.ui.requestRender();
+                break;
+            }
             case "auto_retry_start": {
                 // Set up escape to abort retry
                 this.retryEscapeHandler = this.defaultEditor.onEscape;
                 this.defaultEditor.onEscape = () => {
-                    this.session.abortRetry();
+                    if (this.proxy) {
+                        this.proxy.abort();
+                    }
+                    else {
+                        this.session.abortRetry();
+                    }
                 };
                 // Show retry indicator
                 this.statusContainer.clear();
@@ -2404,12 +3004,9 @@ export class InteractiveMode {
     getUserMessageText(message) {
         if (message.role !== "user")
             return "";
-        return this.getTextContent(message.content);
-    }
-    getTextContent(content) {
-        const textBlocks = typeof content === "string"
-            ? [{ type: "text", text: content }]
-            : content.filter((c) => c.type === "text");
+        const textBlocks = typeof message.content === "string"
+            ? [{ type: "text", text: message.content }]
+            : message.content.filter((c) => c.type === "text");
         return textBlocks.map((c) => c.text).join("");
     }
     /**
@@ -2436,21 +3033,24 @@ export class InteractiveMode {
         this.ui.requestRender();
     }
     addMessageToChat(message, options) {
-        const renderMessage = message;
-        switch (renderMessage.role) {
+        switch (message.role) {
             case "bashExecution": {
-                const component = new BashExecutionComponent(renderMessage.command, this.ui, renderMessage.excludeFromContext);
-                if (renderMessage.output) {
-                    component.appendOutput(renderMessage.output);
+                const component = new BashExecutionComponent(message.command, this.ui, message.excludeFromContext);
+                if (message.output) {
+                    component.appendOutput(message.output);
                 }
-                component.setComplete(renderMessage.exitCode, renderMessage.cancelled, renderMessage.truncated ? { truncated: true } : undefined, renderMessage.fullOutputPath);
+                component.setComplete(message.exitCode, message.cancelled, message.truncated ? { truncated: true } : undefined, message.fullOutputPath);
                 this.chatContainer.addChild(component);
                 break;
             }
             case "custom": {
-                if (renderMessage.display) {
-                    const renderer = this.session.extensionRunner.getMessageRenderer(renderMessage.customType);
-                    const component = new CustomMessageComponent(renderMessage, renderer, this.getMarkdownThemeWithSettings());
+                if (message.display) {
+                    if (this.chatContainer.children.length > 0) {
+                        this.chatContainer.addChild(new Spacer(1));
+                    }
+                    const renderer = this.session?.extensionRunner.getMessageRenderer(message.customType) ??
+                        this._clientExtensionRunner?.getMessageRenderer(message.customType);
+                    const component = new CustomMessageComponent(message, renderer, this.getMarkdownThemeWithSettings());
                     component.setExpanded(this.toolOutputExpanded);
                     this.chatContainer.addChild(component);
                 }
@@ -2458,20 +3058,20 @@ export class InteractiveMode {
             }
             case "compactionSummary": {
                 this.chatContainer.addChild(new Spacer(1));
-                const component = new CompactionSummaryMessageComponent(renderMessage, this.getMarkdownThemeWithSettings());
+                const component = new CompactionSummaryMessageComponent(message, this.getMarkdownThemeWithSettings());
                 component.setExpanded(this.toolOutputExpanded);
                 this.chatContainer.addChild(component);
                 break;
             }
             case "branchSummary": {
                 this.chatContainer.addChild(new Spacer(1));
-                const component = new BranchSummaryMessageComponent(renderMessage, this.getMarkdownThemeWithSettings());
+                const component = new BranchSummaryMessageComponent(message, this.getMarkdownThemeWithSettings());
                 component.setExpanded(this.toolOutputExpanded);
                 this.chatContainer.addChild(component);
                 break;
             }
             case "user": {
-                const textContent = this.getUserMessageText(renderMessage);
+                const textContent = this.getUserMessageText(message);
                 if (textContent) {
                     if (this.chatContainer.children.length > 0) {
                         this.chatContainer.addChild(new Spacer(1));
@@ -2498,25 +3098,8 @@ export class InteractiveMode {
                 }
                 break;
             }
-            case "user-with-attachments": {
-                const textContent = this.getTextContent(renderMessage.content);
-                if (textContent) {
-                    if (this.chatContainer.children.length > 0) {
-                        this.chatContainer.addChild(new Spacer(1));
-                    }
-                    const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings());
-                    this.chatContainer.addChild(userComponent);
-                    if (options?.populateHistory) {
-                        this.editor.addToHistory?.(textContent);
-                    }
-                }
-                break;
-            }
-            case "artifact": {
-                break;
-            }
             case "assistant": {
-                const assistantComponent = new AssistantMessageComponent(renderMessage, this.hideThinkingBlock, this.getMarkdownThemeWithSettings(), this.hiddenThinkingLabel);
+                const assistantComponent = new AssistantMessageComponent(message, this.hideThinkingBlock, this.getMarkdownThemeWithSettings(), this.hiddenThinkingLabel);
                 this.chatContainer.addChild(assistantComponent);
                 break;
             }
@@ -2525,7 +3108,7 @@ export class InteractiveMode {
                 break;
             }
             default: {
-                const _exhaustive = renderMessage;
+                const _exhaustive = message;
             }
         }
     }
@@ -2550,15 +3133,15 @@ export class InteractiveMode {
                 for (const content of message.content) {
                     if (content.type === "toolCall") {
                         const component = new ToolExecutionComponent(content.name, content.id, content.arguments, {
-                            showImages: this.settingsManager.getShowImages(),
-                            imageWidthCells: this.settingsManager.getImageWidthCells(),
-                        }, this.getRegisteredToolDefinition(content.name), this.ui, this.sessionManager.getCwd());
+                            showImages: this.showImages,
+                            imageWidthCells: this.imageWidthCells,
+                        }, this.getRegisteredToolDefinition(content.name), this.ui, this.sessionManager?.getCwd() ?? this.currentCwd);
                         component.setExpanded(this.toolOutputExpanded);
                         this.chatContainer.addChild(component);
                         if (message.stopReason === "aborted" || message.stopReason === "error") {
                             let errorMessage;
                             if (message.stopReason === "aborted") {
-                                const retryAttempt = this.session.retryAttempt;
+                                const retryAttempt = this.session?.retryAttempt ?? 0;
                                 errorMessage =
                                     retryAttempt > 0
                                         ? `Aborted after ${retryAttempt} retry attempt${retryAttempt > 1 ? "s" : ""}`
@@ -2594,6 +3177,11 @@ export class InteractiveMode {
         this.ui.requestRender();
     }
     renderInitialMessages() {
+        if (this.proxy) {
+            // Connect mode: render from proxy messages directly
+            this.renderSessionContext({ messages: [...this.proxy.messages], thinkingLevel: "", model: null }, { updateFooter: true, populateHistory: true });
+            return;
+        }
         // Get aligned messages and entries from session context
         const context = this.sessionManager.buildSessionContext();
         this.renderSessionContext(context, {
@@ -2609,6 +3197,10 @@ export class InteractiveMode {
         }
     }
     async getUserInput() {
+        const queuedInput = this.pendingUserInputs.shift();
+        if (queuedInput !== undefined) {
+            return queuedInput;
+        }
         return new Promise((resolve) => {
             this.onInputCallback = (text) => {
                 this.onInputCallback = undefined;
@@ -2618,8 +3210,13 @@ export class InteractiveMode {
     }
     rebuildChatFromMessages() {
         this.chatContainer.clear();
-        const context = this.sessionManager.buildSessionContext();
-        this.renderSessionContext(context);
+        if (this.proxy) {
+            this.renderSessionContext({ messages: [...this.proxy.messages], thinkingLevel: "", model: null });
+        }
+        else {
+            const context = this.sessionManager.buildSessionContext();
+            this.renderSessionContext(context);
+        }
     }
     // =========================================================================
     // Key handlers
@@ -2644,16 +3241,44 @@ export class InteractiveMode {
      * repaint the final frame while the process is exiting.
      */
     isShuttingDown = false;
-    async shutdown() {
+    async shutdown(options) {
         if (this.isShuttingDown)
             return;
         this.isShuttingDown = true;
         this.unregisterSignalHandlers();
+        if (options?.fromSignal) {
+            // Signal-triggered shutdown (SIGTERM/SIGHUP). Emit extension cleanup
+            // (session_shutdown) BEFORE touching the terminal. Extension teardown
+            // such as removing sockets does not write to the tty, so it must not be
+            // skipped if a later terminal-restore write fails on a dead or stalled
+            // terminal. If the terminal is gone, the restore writes below emit EIO,
+            // which the stdout/stderr error handler turns into emergencyTerminalExit;
+            // the render loop is already idle, so this cannot hot-spin (see #4144).
+            await this.runtimeHost.dispose();
+            await this.ui.terminal.drainInput(1000);
+            this.stop();
+            process.exit(0);
+        }
+        // Interactive quit (Ctrl+D, Ctrl+C, /quit, extension shutdown()). Stop the
+        // TUI before emitting shutdown events so extension UI cleanup cannot repaint
+        // the final frame while the process is exiting.
         // Drain any in-flight Kitty key release events before stopping.
         // This prevents escape sequences from leaking to the parent shell over slow SSH.
         await this.ui.terminal.drainInput(1000);
         this.stop();
-        await this.runtimeHost.dispose();
+        if (this.runtimeHost) {
+            await this.runtimeHost.dispose();
+            const sessionManager = this.sessionManager;
+            if (sessionManager) {
+                const resumeCommand = formatResumeCommand(sessionManager);
+                if (resumeCommand) {
+                    process.stdout.write(`${chalk.dim("To resume this session:")} ${resumeCommand}\n`);
+                }
+            }
+        }
+        else if (this.proxy && "dispose" in this.proxy) {
+            this.proxy.dispose();
+        }
         process.exit(0);
     }
     emergencyTerminalExit() {
@@ -2712,11 +3337,12 @@ export class InteractiveMode {
         }
         for (const signal of signals) {
             const handler = () => {
-                if (signal === "SIGHUP") {
-                    this.emergencyTerminalExit();
-                }
+                // SIGHUP no longer hard-exits: graceful shutdown emits session_shutdown
+                // first, then attempts terminal restore. A genuinely dead terminal
+                // surfaces as an EIO on the restore writes, which the stdout/stderr
+                // error handler converts into emergencyTerminalExit (see #4144, #5080).
                 killTrackedDetachedChildren();
-                void this.shutdown();
+                void this.shutdown({ fromSignal: true });
             };
             process.prependListener(signal, handler);
             this.signalCleanupHandlers.push(() => process.off(signal, handler));
@@ -2797,7 +3423,12 @@ export class InteractiveMode {
         if (this.session.isStreaming) {
             this.editor.addToHistory?.(text);
             this.editor.setText("");
-            await this.session.prompt(text, { streamingBehavior: "followUp" });
+            if (this.proxy) {
+                this.proxy.followUp(text);
+            }
+            else {
+                await this.session.prompt(text, { streamingBehavior: "followUp" });
+            }
             this.updatePendingMessagesDisplay();
             this.ui.requestRender();
         }
@@ -2821,12 +3452,18 @@ export class InteractiveMode {
             this.editor.borderColor = theme.getBashModeBorderColor();
         }
         else {
-            const level = this.session.thinkingLevel || "off";
+            const level = this.proxy ? this.proxy.thinkingLevel : this.session?.thinkingLevel || "off";
             this.editor.borderColor = theme.getThinkingBorderColor(level);
         }
         this.ui.requestRender();
     }
     cycleThinkingLevel() {
+        // Connect mode: no local session — route through the proxy. The proxy is
+        // fire-and-forget; the resulting state change arrives via SSE.
+        if (!this.session) {
+            this.proxy.cycleThinkingLevel(1);
+            return;
+        }
         const newLevel = this.session.cycleThinkingLevel();
         if (newLevel === undefined) {
             this.showStatus("Current model does not support thinking");
@@ -2839,9 +3476,19 @@ export class InteractiveMode {
     }
     async cycleModel(direction) {
         try {
-            const result = await this.session.cycleModel(direction);
+            let result;
+            if (this.session) {
+                result = await this.session.cycleModel(direction);
+            }
+            else {
+                // Connect mode: no local session — route through the proxy. The
+                // proxy is fire-and-forget and returns void; the actual model
+                // change is reflected via SSE.
+                this.proxy.cycleModel(direction === "forward" ? 1 : -1);
+            }
             if (result === undefined) {
-                const msg = this.session.scopedModels.length > 0 ? "Only one model in scope" : "Only one model available";
+                const scopedCount = this.session?.scopedModels.length ?? 0;
+                const msg = scopedCount > 0 ? "Only one model in scope" : "Only one model available";
                 this.showStatus(msg);
             }
             else {
@@ -2886,7 +3533,7 @@ export class InteractiveMode {
         }
         this.showStatus(`Thinking blocks: ${this.hideThinkingBlock ? "hidden" : "visible"}`);
     }
-    openExternalEditor() {
+    async openExternalEditor() {
         // Determine editor (respect $VISUAL, then $EDITOR)
         const editorCmd = process.env.VISUAL || process.env.EDITOR;
         if (!editorCmd) {
@@ -2902,13 +3549,20 @@ export class InteractiveMode {
             this.ui.stop();
             // Split by space to support editor arguments (e.g., "code --wait")
             const [editor, ...editorArgs] = editorCmd.split(" ");
-            // Spawn editor synchronously with inherited stdio for interactive editing
-            const result = spawnSync(editor, [...editorArgs, tmpFile], {
-                stdio: "inherit",
-                shell: process.platform === "win32",
+            process.stdout.write(`Launching external editor: ${editorCmd}\nPi will resume when the editor exits.\n`);
+            // Do not use spawnSync here. On Windows, synchronous child_process calls can keep
+            // Node/libuv's console input read active after ui.stop() pauses stdin, racing
+            // vim/nvim for the console input buffer until Ctrl+C cancels the pending read.
+            const status = await new Promise((resolve) => {
+                const child = spawn(editor, [...editorArgs, tmpFile], {
+                    stdio: "inherit",
+                    shell: process.platform === "win32",
+                });
+                child.on("error", () => resolve(null));
+                child.on("close", (code) => resolve(code));
             });
             // On successful exit (status 0), replace editor content
-            if (result.status === 0) {
+            if (status === 0) {
                 const newContent = fs.readFileSync(tmpFile, "utf-8").replace(/\n$/, "");
                 this.editor.setText(newContent);
             }
@@ -2938,6 +3592,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 Spacer(1));
         this.ui.requestRender();
     }
     showWarning(warningMessage) {
@@ -2945,17 +3600,26 @@ export class InteractiveMode {
         this.chatContainer.addChild(new Text(theme.fg("warning", `Warning: ${warningMessage}`), 1, 0));
         this.ui.requestRender();
     }
-    showNewVersionNotification(newVersion) {
+    showNewVersionNotification(release) {
         const action = theme.fg("accent", `${APP_NAME} update`);
-        const updateInstruction = theme.fg("muted", `New version ${newVersion} is available. Run `) + action;
-        const changelogUrl = "https://github.com/earendil-works/pi-mono/blob/main/packages/coding-agent/CHANGELOG.md";
+        const updateInstruction = theme.fg("muted", `New version ${release.version} is available. Run `) + action;
+        const changelogUrl = "https://pi.dev/changelog";
         const changelogLink = getCapabilities().hyperlinks
             ? hyperlink(theme.fg("accent", "open changelog"), changelogUrl)
             : theme.fg("accent", changelogUrl);
         const changelogLine = theme.fg("muted", "Changelog: ") + changelogLink;
+        const note = release.note?.trim();
         this.chatContainer.addChild(new Spacer(1));
         this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("warning", "Update Available"))}\n${updateInstruction}\n${changelogLine}`, 1, 0));
+        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("warning", "Update Available"))}\n${updateInstruction}`, 1, 0));
+        if (note) {
+            this.chatContainer.addChild(new Spacer(1));
+            this.chatContainer.addChild(new Markdown(note, 1, 0, this.getMarkdownThemeWithSettings(), {
+                color: (text) => theme.fg("muted", text),
+            }));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+        this.chatContainer.addChild(new Text(changelogLine, 1, 0));
         this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
         this.ui.requestRender();
     }
@@ -2974,13 +3638,15 @@ export class InteractiveMode {
      * Combines session queue and compaction queue.
      */
     getAllQueuedMessages() {
+        const steeringSource = this.proxy ? this.proxy.steeringMessages : this.session.getSteeringMessages();
+        const followUpSource = this.proxy ? this.proxy.followUpMessages : this.session.getFollowUpMessages();
         return {
             steering: [
-                ...this.session.getSteeringMessages(),
+                ...steeringSource,
                 ...this.compactionQueuedMessages.filter((msg) => msg.mode === "steer").map((msg) => msg.text),
             ],
             followUp: [
-                ...this.session.getFollowUpMessages(),
+                ...followUpSource,
                 ...this.compactionQueuedMessages.filter((msg) => msg.mode === "followUp").map((msg) => msg.text),
             ],
         };
@@ -2990,7 +3656,9 @@ export class InteractiveMode {
      * Clears both session queue and compaction queue.
      */
     clearAllQueues() {
-        const { steering, followUp } = this.session.clearQueue();
+        const sessionQueued = this.proxy
+            ? { steering: [...this.proxy.steeringMessages], followUp: [...this.proxy.followUpMessages] }
+            : this.session.clearQueue();
         const compactionSteering = this.compactionQueuedMessages
             .filter((msg) => msg.mode === "steer")
             .map((msg) => msg.text);
@@ -2999,8 +3667,8 @@ export class InteractiveMode {
             .map((msg) => msg.text);
         this.compactionQueuedMessages = [];
         return {
-            steering: [...steering, ...compactionSteering],
-            followUp: [...followUp, ...compactionFollowUp],
+            steering: [...sessionQueued.steering, ...compactionSteering],
+            followUp: [...sessionQueued.followUp, ...compactionFollowUp],
         };
     }
     updatePendingMessagesDisplay() {
@@ -3027,7 +3695,7 @@ export class InteractiveMode {
         if (allQueued.length === 0) {
             this.updatePendingMessagesDisplay();
             if (options?.abort) {
-                this.agent.abort();
+                (this.proxy ?? this.session).abort();
             }
             return 0;
         }
@@ -3037,7 +3705,7 @@ export class InteractiveMode {
         this.editor.setText(combinedText);
         this.updatePendingMessagesDisplay();
         if (options?.abort) {
-            this.agent.abort();
+            (this.proxy ?? this.session).abort();
         }
         return allQueued.length;
     }
@@ -3051,6 +3719,8 @@ export class InteractiveMode {
     isExtensionCommand(text) {
         if (!text.startsWith("/"))
             return false;
+        if (!this.session)
+            return false;
         const extensionRunner = this.session.extensionRunner;
         const spaceIndex = text.indexOf(" ");
         const commandName = spaceIndex === -1 ? text.slice(1) : text.slice(1, spaceIndex);
@@ -3064,11 +3734,31 @@ export class InteractiveMode {
         this.compactionQueuedMessages = [];
         this.updatePendingMessagesDisplay();
         const restoreQueue = (error) => {
-            this.session.clearQueue();
+            if (this.session) {
+                this.session.clearQueue();
+            }
             this.compactionQueuedMessages = queuedMessages;
             this.updatePendingMessagesDisplay();
             this.showError(`Failed to send queued message${queuedMessages.length > 1 ? "s" : ""}: ${error instanceof Error ? error.message : String(error)}`);
         };
+        // Connect mode: send all queued messages through the proxy
+        if (this.proxy) {
+            try {
+                for (const message of queuedMessages) {
+                    if (message.mode === "followUp") {
+                        this.proxy.followUp(message.text);
+                    }
+                    else {
+                        this.proxy.steer(message.text);
+                    }
+                }
+                this.updatePendingMessagesDisplay();
+            }
+            catch (error) {
+                restoreQueue(error);
+            }
+            return;
+        }
         try {
             if (options?.willRetry) {
                 // When retry is pending, queue messages for the retry turn
@@ -3164,6 +3854,7 @@ export class InteractiveMode {
                 steeringMode: this.session.steeringMode,
                 followUpMode: this.session.followUpMode,
                 transport: this.settingsManager.getTransport(),
+                httpIdleTimeoutMs: this.settingsManager.getHttpIdleTimeoutMs(),
                 thinkingLevel: this.session.thinkingLevel,
                 availableThinkingLevels: this.session.getAvailableThinkingLevels(),
                 currentTheme: this.settingsManager.getTheme() || "dark",
@@ -3221,6 +3912,11 @@ export class InteractiveMode {
                     this.settingsManager.setTransport(transport);
                     this.session.agent.transport = transport;
                 },
+                onHttpIdleTimeoutMsChange: (timeoutMs) => {
+                    this.settingsManager.setHttpIdleTimeoutMs(timeoutMs);
+                    configureHttpDispatcher(timeoutMs);
+                    this.showStatus(`HTTP idle timeout: ${formatHttpIdleTimeoutMs(timeoutMs)}`);
+                },
                 onThinkingLevelChange: (level) => {
                     this.session.setThinkingLevel(level);
                     this.footer.invalidate();
@@ -3465,6 +4161,10 @@ export class InteractiveMode {
         });
     }
     showUserMessageSelector() {
+        if (!this.session) {
+            this.showStatus("Fork selector not available in connect mode");
+            return;
+        }
         const userMessages = this.session.getUserMessagesForForking();
         if (userMessages.length === 0) {
             this.showStatus("No messages to fork from");
@@ -3517,6 +4217,10 @@ export class InteractiveMode {
         }
     }
     showTreeSelector(initialSelectedId) {
+        if (!this.sessionManager) {
+            this.showStatus("Tree selector not available in connect mode");
+            return;
+        }
         const tree = this.sessionManager.getTree();
         const realLeafId = this.sessionManager.getLeafId();
         const initialFilterMode = this.settingsManager.getTreeFilterMode();
@@ -3620,7 +4324,9 @@ export class InteractiveMode {
     }
     showSessionSelector() {
         this.showSelector((done) => {
-            const selector = new SessionSelectorComponent((onProgress) => SessionManager.list(this.sessionManager.getCwd(), this.sessionManager.getSessionDir(), onProgress), SessionManager.listAll, async (sessionPath) => {
+            const selector = new SessionSelectorComponent((onProgress) => SessionManager.list(this.sessionManager.getCwd(), this.sessionManager.getSessionDir(), onProgress), (onProgress) => this.sessionManager.usesDefaultSessionDir()
+                ? SessionManager.listAll(onProgress)
+                : SessionManager.listAll(this.sessionManager.getSessionDir(), onProgress), async (sessionPath) => {
                 done();
                 await this.handleResumeSession(sessionPath);
             }, () => {
@@ -3642,6 +4348,343 @@ export class InteractiveMode {
             return { component: selector, focus: selector };
         });
     }
+    /** Show settings selector in connect mode using remote settings from snapshot */
+    showConnectModeSettingsSelector() {
+        const snapshot = this.proxy.getSnapshot();
+        const rs = snapshot.remoteSettings;
+        this.showSelector((done) => {
+            const selector = new SettingsSelectorComponent({
+                autoCompact: rs.autoCompact,
+                showImages: rs.showImages,
+                imageWidthCells: rs.imageWidthCells,
+                autoResizeImages: rs.autoResizeImages,
+                blockImages: rs.blockImages,
+                enableSkillCommands: rs.enableSkillCommands,
+                steeringMode: rs.steeringMode,
+                followUpMode: rs.followUpMode,
+                transport: rs.transport,
+                httpIdleTimeoutMs: rs.httpIdleTimeoutMs,
+                thinkingLevel: rs.thinkingLevel,
+                availableThinkingLevels: [...rs.availableThinkingLevels],
+                currentTheme: rs.currentTheme,
+                availableThemes: [...rs.availableThemes],
+                hideThinkingBlock: rs.hideThinkingBlock,
+                collapseChangelog: rs.collapseChangelog,
+                enableInstallTelemetry: rs.enableInstallTelemetry,
+                doubleEscapeAction: rs.doubleEscapeAction,
+                treeFilterMode: rs.treeFilterMode,
+                showHardwareCursor: rs.showHardwareCursor,
+                editorPaddingX: rs.editorPaddingX,
+                autocompleteMaxVisible: rs.autocompleteMaxVisible,
+                quietStartup: rs.quietStartup,
+                clearOnShrink: rs.clearOnShrink,
+                showTerminalProgress: rs.showTerminalProgress,
+                warnings: rs.warnings,
+            }, {
+                onAutoCompactChange: (enabled) => {
+                    this.proxy.setAutoCompactEnabled(enabled);
+                    this.footer.setAutoCompactEnabled(enabled);
+                },
+                onShowImagesChange: (v) => {
+                    this.proxy.updateSettings({ showImages: v });
+                },
+                onImageWidthCellsChange: (v) => {
+                    this.proxy.updateSettings({ imageWidthCells: v });
+                },
+                onAutoResizeImagesChange: (v) => {
+                    this.proxy.updateSettings({ autoResizeImages: v });
+                },
+                onBlockImagesChange: (v) => {
+                    this.proxy.updateSettings({ blockImages: v });
+                },
+                onEnableSkillCommandsChange: (enabled) => {
+                    this.proxy.updateSettings({ enableSkillCommands: enabled });
+                },
+                onSteeringModeChange: (mode) => {
+                    this.proxy.setSteeringMode(mode);
+                },
+                onFollowUpModeChange: (mode) => {
+                    this.proxy.setFollowUpMode(mode);
+                },
+                onTransportChange: (v) => {
+                    this.proxy.updateSettings({ transport: v });
+                },
+                onHttpIdleTimeoutMsChange: (v) => {
+                    this.proxy.updateSettings({ httpIdleTimeoutMs: v });
+                },
+                onThinkingLevelChange: (level) => {
+                    this.proxy.setThinkingLevel(level);
+                    this.footer.invalidate();
+                    this.updateEditorBorderColor();
+                },
+                onThemeChange: (v) => {
+                    this.proxy.updateSettings({ theme: v });
+                },
+                onHideThinkingBlockChange: (v) => {
+                    this.proxy.updateSettings({ hideThinkingBlock: v });
+                },
+                onCollapseChangelogChange: (v) => {
+                    this.proxy.updateSettings({ collapseChangelog: v });
+                },
+                onEnableInstallTelemetryChange: (v) => {
+                    this.proxy.updateSettings({ enableInstallTelemetry: v });
+                },
+                onDoubleEscapeActionChange: (v) => {
+                    this.proxy.updateSettings({ doubleEscapeAction: v });
+                },
+                onTreeFilterModeChange: (v) => {
+                    this.proxy.updateSettings({ treeFilterMode: v });
+                },
+                onShowHardwareCursorChange: (v) => {
+                    this.proxy.updateSettings({ showHardwareCursor: v });
+                },
+                onEditorPaddingXChange: (v) => {
+                    this.proxy.updateSettings({ editorPaddingX: v });
+                },
+                onAutocompleteMaxVisibleChange: (v) => {
+                    this.proxy.updateSettings({ autocompleteMaxVisible: v });
+                },
+                onQuietStartupChange: (v) => {
+                    this.proxy.updateSettings({ quietStartup: v });
+                },
+                onClearOnShrinkChange: (v) => {
+                    this.proxy.updateSettings({ clearOnShrink: v });
+                },
+                onShowTerminalProgressChange: (v) => {
+                    this.proxy.updateSettings({ showTerminalProgress: v });
+                },
+                onWarningsChange: (v) => {
+                    this.proxy.updateSettings({ warnings: v });
+                },
+                onCancel: done,
+            });
+            return { component: selector, focus: selector };
+        });
+    }
+    /** Show model selector in connect mode */
+    async showConnectModeModelSelector() {
+        try {
+            const models = await this.proxy.fetchModels();
+            if (models.length === 0) {
+                this.showStatus("No models available");
+                return;
+            }
+            const currentModelId = this.proxy.model;
+            const items = models.map((m) => ({
+                value: `${m.provider}/${m.id}`,
+                label: `${m.id} [${m.provider}]`,
+                description: m.name,
+            }));
+            this.showSelector((done) => {
+                const selectList = new SelectList(items, Math.min(items.length, Math.floor(this.ui.terminal.rows / 2)), getSelectListTheme(), { minPrimaryColumnWidth: 20, maxPrimaryColumnWidth: 48 });
+                // Preselect current model
+                const currentIndex = items.findIndex((item) => item.value === currentModelId || item.label === currentModelId);
+                if (currentIndex !== -1) {
+                    selectList.setSelectedIndex(currentIndex);
+                }
+                selectList.onSelect = (item) => {
+                    const modelId = item.value;
+                    this.proxy.setModel(modelId);
+                    done();
+                    this.showStatus(`Model: ${modelId}`);
+                };
+                selectList.onCancel = () => {
+                    done();
+                    this.ui.requestRender();
+                };
+                const container = new Container();
+                container.addChild(new DynamicBorder());
+                container.addChild(new Spacer(1));
+                container.addChild(new Text(theme.fg("muted", "Select a model"), 0, 0));
+                container.addChild(new Spacer(1));
+                container.addChild(selectList);
+                container.addChild(new DynamicBorder());
+                return { component: container, focus: selectList };
+            });
+        }
+        catch (e) {
+            this.showError(`Failed to fetch models: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    }
+    /** Show scoped models selector in connect mode */
+    async showConnectModeScopedModelsSelector() {
+        try {
+            const items = await this.proxy.fetchModels();
+            if (items.length === 0) {
+                this.showStatus("No models available");
+                return;
+            }
+            const snapshot = this.proxy.getSnapshot();
+            const enabledModelIds = snapshot.scopedModelIds;
+            // `ModelItemData` is now field-compatible with `Model<any>` (see
+            // core/agent-session-proxy.ts), so the only gap is the strict
+            // structural mismatch on `compat?` (optional) and `headers?` (optional)
+            // and the union-typed `api` field. A two-step cast skips those
+            // without touching upstream's strict `ModelsConfig.allModels` type.
+            // TODO: upstream `ScopedModelsSelectorComponent` should accept
+            // `ModelItemData` (or a `ModelDisplay` alias) directly.
+            const allModels = items;
+            this.showSelector((done) => {
+                const selector = new ScopedModelsSelectorComponent({ allModels, enabledModelIds }, {
+                    onChange: (ids) => {
+                        this.proxy.setScopedModels(ids);
+                    },
+                    onPersist: (ids) => {
+                        // Mirror upstream: null or full coverage = clear filter.
+                        const patterns = ids === null || ids.length === allModels.length ? undefined : ids;
+                        this.proxy.setEnabledModels(patterns ? [...patterns] : undefined);
+                        this.showStatus("Model selection saved to settings");
+                    },
+                    onCancel: () => {
+                        done();
+                        this.ui.requestRender();
+                    },
+                });
+                return { component: selector, focus: selector };
+            });
+        }
+        catch (e) {
+            this.showError(`Failed to fetch models: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    }
+    /** Show fork selector in connect mode */
+    async showConnectModeForkSelector() {
+        try {
+            const messages = await this.proxy.fetchUserMessages();
+            if (messages.length === 0) {
+                this.showStatus("No messages to fork from");
+                return;
+            }
+            this.showSelector((done) => {
+                const selector = new UserMessageSelectorComponent(messages.map((m) => ({ id: m.id, text: m.text })), async (entryId) => {
+                    try {
+                        await this.proxy.fork(entryId);
+                        done();
+                        this.showStatus("Forked to new session");
+                    }
+                    catch (error) {
+                        done();
+                        this.showError(error instanceof Error ? error.message : String(error));
+                    }
+                }, () => {
+                    done();
+                    this.ui.requestRender();
+                });
+                return { component: selector, focus: selector.getMessageList() };
+            });
+        }
+        catch (e) {
+            this.showError(`Failed to fetch messages: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    }
+    /** Show tree selector in connect mode */
+    async showConnectModeTreeSelector() {
+        try {
+            const treeData = await this.proxy.fetchTree();
+            if (treeData.length === 0) {
+                this.showStatus("No entries in session");
+                return;
+            }
+            const nodes = this._convertTreeDataToNodes(treeData);
+            this.showSelector((done) => {
+                const selector = new TreeSelectorComponent(nodes, null, this.ui.terminal.rows, async (entryId) => {
+                    try {
+                        await this.proxy.fork(entryId);
+                        done();
+                        this.showStatus("Navigated to branch");
+                    }
+                    catch (error) {
+                        done();
+                        this.showError(error instanceof Error ? error.message : String(error));
+                    }
+                }, () => {
+                    done();
+                    this.ui.requestRender();
+                }, (entryId, label) => {
+                    this.proxy.setLabel(entryId, label);
+                });
+                return { component: selector, focus: selector };
+            });
+        }
+        catch (e) {
+            this.showError(`Failed to fetch tree: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    }
+    /** Convert wire-format TreeNodeData to SessionTreeNode for TreeSelectorComponent */
+    _convertTreeDataToNodes(data) {
+        return data.map((node) => ({
+            entry: { id: node.id, type: node.type, parentId: node.parentId, timestamp: node.timestamp },
+            children: this._convertTreeDataToNodes(node.children),
+            label: node.label,
+        }));
+    }
+    /** Show session selector in connect mode */
+    showConnectModeSessionSelector() {
+        this.showSelector((done) => {
+            const selector = new SessionSelectorComponent(async (_onProgress) => {
+                const sessions = await this.proxy.getSessions();
+                return sessions.map((s) => ({
+                    path: s.path,
+                    id: s.id,
+                    cwd: s.cwd,
+                    name: s.name,
+                    parentSessionPath: s.parentSessionPath,
+                    created: new Date(s.created),
+                    modified: new Date(s.modified),
+                    messageCount: s.messageCount,
+                    firstMessage: s.firstMessage,
+                    allMessagesText: "",
+                }));
+            }, async () => [], async (sessionPath) => {
+                try {
+                    await this.proxy.switchSession(sessionPath);
+                    done();
+                    this.showStatus("Switched session");
+                }
+                catch (error) {
+                    done();
+                    this.showError(error instanceof Error ? error.message : String(error));
+                }
+            }, () => {
+                done();
+                this.ui.requestRender();
+            }, () => {
+                void this.shutdown();
+            }, () => this.ui.requestRender());
+            return { component: selector, focus: selector };
+        });
+    }
+    /** Copy last agent message in connect mode */
+    handleConnectModeCopy() {
+        const msgs = this.proxy.messages;
+        const lastAssistant = [...msgs].reverse().find((m) => m.role === "assistant");
+        if (!lastAssistant) {
+            this.showStatus("No assistant message to copy");
+            return;
+        }
+        const text = lastAssistant.content
+            .filter((p) => p.type === "text")
+            .map((p) => p.text)
+            .join("\n");
+        if (text) {
+            void copyToClipboard(text);
+            this.showStatus("Copied to clipboard");
+        }
+    }
+    /** Show session info in connect mode */
+    showConnectModeSessionInfo() {
+        const snapshot = this.proxy.getSnapshot();
+        const parts = [
+            `Model: ${snapshot.model}`,
+            `Session: ${snapshot.sessionName ?? "(unnamed)"}`,
+            `File: ${snapshot.sessionFile ?? "N/A"}`,
+            `CWD: ${snapshot.cwd}`,
+            `Messages: ${snapshot.messages.length}`,
+            `Context: ${snapshot.contextUsage.percent !== null ? `${snapshot.contextUsage.percent.toFixed(1)}%` : "?"} / ${snapshot.contextUsage.contextWindow}`,
+            `Tokens: ↑${snapshot.tokenUsage.input} ↓${snapshot.tokenUsage.output} $${snapshot.tokenUsage.cost.toFixed(3)}`,
+        ];
+        this.showStatus(parts.join("  •  "));
+    }
     async handleResumeSession(sessionPath, options) {
         if (this.loadingAnimation) {
             this.loadingAnimation.stop();
@@ -3923,9 +4966,7 @@ export class InteractiveMode {
         });
     }
     async showLoginDialog(providerId, providerName) {
-        const providerInfo = this.session.modelRegistry.authStorage
-            .getOAuthProviders()
-            .find((provider) => provider.id === providerId);
+        const providerInfo = this.session.modelRegistry.authStorage.getOAuthProviders().find((provider) => provider.id === providerId);
         const previousModel = this.session.model;
         // Providers that use callback servers (can paste redirect URL)
         const usesCallbackServer = providerInfo?.usesCallbackServer ?? false;
@@ -3973,12 +5014,12 @@ export class InteractiveMode {
                             }
                         });
                     }
-                    else if (providerId === "github-copilot") {
-                        // GitHub Copilot polls after onAuth
-                        dialog.showWaiting("Waiting for browser authentication...");
-                    }
                     // For Anthropic: onPrompt is called immediately after
                 },
+                onDeviceCode: (info) => {
+                    dialog.showDeviceCode(info);
+                    dialog.showWaiting("Waiting for authentication...");
+                },
                 onPrompt: async (prompt) => {
                     return dialog.showPrompt(prompt.message, prompt.placeholder);
                 },
@@ -4035,6 +5076,7 @@ export class InteractiveMode {
         };
         try {
             await this.session.reload();
+            configureHttpDispatcher(this.settingsManager.getHttpIdleTimeoutMs());
             this.keybindings.reload();
             const activeHeader = this.customHeader ?? this.builtInHeader;
             if (isExpandable(activeHeader)) {
@@ -4610,7 +5652,7 @@ export class InteractiveMode {
     }
     stop() {
         this.unregisterSignalHandlers();
-        if (this.settingsManager.getShowTerminalProgress()) {
+        if (this.settingsManager?.getShowTerminalProgress()) {
             this.ui.terminal.setProgress(false);
         }
         if (this.loadingAnimation) {