@bubblebrain-ai/bubble 0.0.35 → 0.0.37

package/dist/tui-ink/app.js

@@ -32,13 +32,13 @@ import { QuestionDialog } from "./question-dialog.js";
 import { FeedbackDialog } from "./feedback-dialog.js";
 import { collectFeedback } from "../feedback/collect.js";
 import { isKeyReleaseEvent } from "./key-events.js";
-import { errorMessage, formatModelSwitchError, switchAgentModel } from "../tui/model-switch.js";
+import { errorMessage, formatModelSwitchError, modelSwitchTarget, switchAgentModel } from "../tui/model-switch.js";
 import { formatImageUserDisplayText, nextImageDisplayLabelStart } from "../tui/image-display.js";
 import { decideStartingSubmitFingerprint, submitPayloadFingerprint } from "./submit-dedupe.js";
 import { isQueuedInputForCurrentSession, queuedAndPendingDisplayKeys, } from "./input-queue.js";
 import { SessionPicker } from "./session-picker.js";
 import { SubagentInspector } from "./subagent-inspector.js";
-import { collectSubagentGroups, subagentSummary } from "./subagent-view.js";
+import { accumulateLiveSubagentUpdate, collectSubagentGroups, mergeToolMetadata, pruneSettledLiveSubagentTools, subagentSummary } from "./subagent-view.js";
 import { sessionDisplayName } from "../tui/session-display.js";
 import { parseGoalCommand } from "../goal/command.js";
 import { continuationPrompt, initialPrompt } from "../goal/prompts.js";
@@ -47,9 +47,21 @@ import { goalCompleteNotice, goalIndicatorLine, goalSummaryText } from "../goal/
 import { tokenUsageTotal } from "../goal/usage.js";
 import { formatInternalContextBlock } from "../agent/internal-reminder-sanitizer.js";
 import { collectUsageStatsBundle, formatStatsPanelBody, rangeLabel } from "../stats/usage.js";
+import { GrokRuntimeError } from "../external-runtime/grok-errors.js";
+import { GROK_LOCAL_SLASH_COMMANDS, classifyGrokInput, isGrokLocalSlashCommand, } from "../external-runtime/grok-input-policy.js";
+import { GROK_SUBSCRIPTION_PROVIDER_ID, isGrokSubscriptionProviderId, withGrokSubscriptionProvider, } from "../external-runtime/grok-provider.js";
+import { classifyExternalRuntimeBinding, stopExternalRuntimeForSessionSwitch, } from "../external-runtime/session-policy.js";
 import os from "node:os";
-function buildTips(agent, registry) {
+import { rmSync } from "node:fs";
+function buildTips(agent, registry, grokActive = false) {
     const tips = [];
+    if (grokActive) {
+        return [
+            "Grok Subscription is active with workspace tools and Bubble approvals",
+            "Use /model to choose the Grok model and reasoning effort",
+            "Use /logout grok to return to a fresh native session",
+        ];
+    }
     const hasProvider = registry.getEnabled().length > 0;
     if (!hasProvider) {
         tips.push("Run /login or /provider --add to configure a model");
@@ -189,33 +201,6 @@ function parsePartialArgs(buffer, previous) {
     }
     return result;
 }
-function mergeToolMetadata(current, incoming) {
-    if (!incoming)
-        return current;
-    if (current?.kind !== "subagent" || incoming.kind !== "subagent") {
-        return incoming;
-    }
-    const currentSubagents = Array.isArray(current.subagents) ? current.subagents : [];
-    const incomingSubagents = Array.isArray(incoming.subagents) ? incoming.subagents : [];
-    const byId = new Map();
-    for (const item of currentSubagents) {
-        const subAgentId = typeof item === "object" && item !== null && "subAgentId" in item
-            ? String(item.subAgentId)
-            : "";
-        byId.set(subAgentId || `current:${byId.size}`, item);
-    }
-    for (const item of incomingSubagents) {
-        const subAgentId = typeof item === "object" && item !== null && "subAgentId" in item
-            ? String(item.subAgentId)
-            : "";
-        byId.set(subAgentId || `incoming:${byId.size}`, item);
-    }
-    return {
-        ...current,
-        ...incoming,
-        subagents: [...byId.values()],
-    };
-}
 /**
  * Coerce a freshly-constructed DisplayMessage into one that carries a stable
  * `key`. Centralizes the safety net so callers don't have to remember to call
@@ -238,8 +223,13 @@ export const INK_LOCAL_SLASH_COMMANDS = [
         description: "Set/manage an autonomous goal (/goal <objective>|clear|pause|resume|edit)",
     },
 ];
-export function App({ agent, args, sessionManager: initialSessionManager, switchSession, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, themeMode: initialThemeMode, themeOverrides, detectedTheme, onThemeModeChange, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, goalStore, bypassEnabled, updateNotice, updateNoticeRefresh, hookController, onExit }) {
+export function App({ agent, args, sessionManager: initialSessionManager, switchSession, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, themeMode: initialThemeMode, themeOverrides, detectedTheme, onThemeModeChange, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, goalStore, bypassEnabled, updateNotice, updateNoticeRefresh, hookController, externalRuntime, onExit }) {
     const [sessionManager, setSessionManager] = useState(initialSessionManager);
+    const [externalRuntimeBinding, setExternalRuntimeBinding] = useState(() => initialSessionManager?.getMetadata().externalRuntime);
+    const sessionManagerRef = useRef(sessionManager);
+    sessionManagerRef.current = sessionManager;
+    const externalRuntimeBindingRef = useRef(externalRuntimeBinding);
+    externalRuntimeBindingRef.current = externalRuntimeBinding;
     const [themeMode, setThemeMode] = useState(initialThemeMode ?? "auto");
     // `detectedTheme` is captured once at startup in main.ts. We keep it in state
     // so future re-detection (e.g. if a user runs `/theme auto` after switching
@@ -276,9 +266,27 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
     const [streamingReasoning, setStreamingReasoning] = useState("");
     const [streamingTools, setStreamingTools] = useState([]);
     const [streamingParts, setStreamingParts] = useState([]);
+    // Background-child updates that outlived their launching tool call's
+    // streaming round (toolCalls is cleared on every turn_start): keyed by the
+    // launching call id, they feed the inspector as synthetic tool calls so
+    // traces stay live e.g. while a wait_workflow blocks. The version counter
+    // triggers recompute since the ref mutates in place.
+    const liveSubagentToolsRef = useRef(new Map());
+    const [liveSubagentVersion, setLiveSubagentVersion] = useState(0);
+    // Transcript-reset paths (/clear, session switch, /rewind) must drop the
+    // accumulator too, or ghost subagent groups from the wiped conversation keep
+    // feeding the entry line and inspector for the rest of the process.
+    const clearLiveSubagentTools = useCallback(() => {
+        if (liveSubagentToolsRef.current.size === 0)
+            return;
+        liveSubagentToolsRef.current.clear();
+        setLiveSubagentVersion((version) => version + 1);
+    }, []);
     // Live subagent groups for the inspector opened from the subagent entry line;
     // recomputed each render so it reflects members as their events stream into the transcript.
-    const subagentGroups = useMemo(() => collectSubagentGroups(messages, streamingTools), [messages, streamingTools]);
+    const subagentGroups = useMemo(() => collectSubagentGroups(messages, [...streamingTools, ...liveSubagentToolsRef.current.values()]), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [messages, streamingTools, liveSubagentVersion]);
     const subagentMembers = useMemo(() => subagentGroups.flatMap((g) => g.members), [subagentGroups]);
     // Down-arrow from the composer focuses the subagent entry line; Enter then
     // opens the inspector, Esc/Up returns to the composer (Claude Code parity).
@@ -310,6 +318,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
     const [pendingQuestion, setPendingQuestion] = useState(null);
     const [pendingFeedback, setPendingFeedback] = useState(null);
     const [pickerMode, setPickerMode] = useState(null);
+    const [grokModels, setGrokModels] = useState([]);
     const [statsPanel, setStatsPanel] = useState(null);
     const [cursorResetEpoch, setCursorResetEpoch] = useState(0);
     const [composerDraft, setComposerDraft] = useState(null);
@@ -333,7 +342,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
     const [staticGeneration, setStaticGeneration] = useState(0);
     const reprintTranscript = useCallback(() => {
         if (process.stdout.isTTY) {
-            process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
+            process.stdout.write("\x1b[0m\x1b[2J\x1b[3J\x1b[H");
         }
         setStaticGeneration((generation) => generation + 1);
     }, []);
@@ -349,6 +358,9 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
     const startingSubmitFingerprintRef = useRef(null);
     const [startingSubmitFingerprint, setStartingSubmitFingerprint] = useState(null);
     const nextRunIdRef = useRef(0);
+    // Invalidates late external-runtime events whenever the Bubble session or
+    // runtime binding changes. Native Agent events retain their existing path.
+    const externalRuntimeGenerationRef = useRef(0);
     // Set true the moment /quit is invoked so we can hide dynamic UI (composer,
     // waiting indicator, footer) before Ink snapshots its final frame into the
     // shell scrollback. Without this, the last visible "> " input row stays
@@ -374,6 +386,15 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         cwd: args.cwd,
         skillPaths: userConfig.getSkillPaths(),
     });
+    const externalRuntimeBindingKind = classifyExternalRuntimeBinding(externalRuntimeBinding);
+    const externalSessionBound = externalRuntimeBindingKind !== "none";
+    const grokSessionBound = externalRuntimeBindingKind === "grok";
+    const unsupportedExternalSessionBound = externalRuntimeBindingKind === "unsupported";
+    const refreshExternalRuntimeBinding = useCallback((manager) => {
+        const next = (manager ?? sessionManagerRef.current)?.getMetadata().externalRuntime;
+        externalRuntimeBindingRef.current = next;
+        setExternalRuntimeBinding(next);
+    }, []);
     useEffect(() => {
         setCurrentUpdateNotice(updateNotice);
     }, [updateNotice]);
@@ -572,6 +593,10 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
             return;
         }
         if (key.ctrl && key.shift && input.toLowerCase() === "m" && !pickerMode) {
+            if (externalSessionBound) {
+                addMessage("assistant", "MCP is unavailable in external runtime sessions (no Bubble workspace access).");
+                return;
+            }
             if (!mcpManager || mcpManager.getStates().length === 0) {
                 addMessage("assistant", "No MCP servers configured.");
             }
@@ -596,6 +621,35 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         }
         // Ctrl+R: cycle thinking level (formerly Shift+Tab)
         if (isCtrlLetterInput(input, key, "r") && !pickerMode) {
+            if (externalSessionBound) {
+                if (!grokSessionBound || !externalRuntime) {
+                    addMessage("assistant", "The external runtime manages its own model and reasoning settings.");
+                    return;
+                }
+                const bound = externalRuntimeBindingRef.current;
+                void (bound?.sessionId
+                    ? externalRuntime.hydrateSession(bound.sessionId, bound.modelId, bound.reasoningEffort)
+                    : Promise.resolve()).then(async () => await externalRuntime.listModels()).then(async (models) => {
+                    const current = externalRuntime.getModelSelection();
+                    const model = models.find((candidate) => candidate.id === current.modelId);
+                    if (!model || model.reasoningLevels.length < 2) {
+                        addMessage("assistant", `${current.modelId ?? "The current Grok model"} has no alternate reasoning effort.`);
+                        return;
+                    }
+                    const index = Math.max(0, model.reasoningLevels.indexOf(current.reasoningEffort));
+                    const next = model.reasoningLevels[(index + 1) % model.reasoningLevels.length];
+                    const selection = await externalRuntime.setModel(model.id, next);
+                    const manager = sessionManagerRef.current;
+                    const binding = manager?.getMetadata().externalRuntime;
+                    if (manager && binding && isGrokSubscriptionProviderId(binding.id)) {
+                        manager.updateMetadata({ externalRuntime: { ...binding, ...selection } });
+                        manager.appendMarker("thinking_level_switch", selection.reasoningEffort);
+                        refreshExternalRuntimeBinding(manager);
+                    }
+                    addMessage("assistant", `Grok reasoning effort set to ${selection.reasoningEffort}.`);
+                }).catch((error) => addMessage("error", `Failed to switch Grok reasoning: ${errorMessage(error)}`));
+                return;
+            }
             const modelParts = agent.model.includes(":")
                 ? agent.model.split(":")
                 : [agent.providerId || safeRegistry.getDefault()?.id || "openai", agent.model];
@@ -689,7 +743,8 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         // messages alone leaves a stale To-Do list on screen. /clear already reset
         // the agent's todos; mirror that into the UI (same as session switch).
         setTodos(agent.getTodos());
-    }, [resetTranscript, agent]);
+        clearLiveSubagentTools();
+    }, [resetTranscript, agent, clearLiveSubagentTools]);
     // Render a placeholder user row for input waiting to enter the run.
     const addStatusUserMessage = useCallback((content, status) => {
         const key = nextDisplayMessageKey("user");
@@ -708,7 +763,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         return { ...payload, imageDisplayStart };
     }, []);
     const submitDisplayText = useCallback((payload) => (formatImageUserDisplayText(payload.displayText ?? payload.text, payload.images.length, payload.imageDisplayStart)), []);
-    const currentSessionFile = useCallback(() => sessionManager?.getSessionFile(), [sessionManager]);
+    const currentSessionFile = useCallback(() => sessionManagerRef.current?.getSessionFile(), []);
     const queueInput = useCallback((payload) => {
         const preparedPayload = prepareSubmitDisplay(payload);
         const displayKey = addStatusUserMessage(submitDisplayText(preparedPayload), "queued");
@@ -728,6 +783,19 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         setPendingSteerCount(pendingSteersRef.current.size);
     }, [addStatusUserMessage, currentSessionFile, prepareSubmitDisplay, queueInput, submitDisplayText]);
     const openPicker = useCallback((mode, providerId) => {
+        if (mode === "model" && grokSessionBound && externalRuntime) {
+            setStatsPanel(null);
+            setGrokModels([]);
+            setPickerMode("grok-model");
+            const bound = externalRuntimeBindingRef.current;
+            void (bound?.sessionId
+                ? externalRuntime.hydrateSession(bound.sessionId, bound.modelId, bound.reasoningEffort)
+                : Promise.resolve()).then(async () => await externalRuntime.listModels()).then(setGrokModels).catch((error) => {
+                addMessage("error", `Failed to load Grok models: ${errorMessage(error)}`);
+                setPickerMode(null);
+            });
+            return;
+        }
         if (mode === "key") {
             setKeyProviderId(providerId ?? null);
         }
@@ -736,11 +804,36 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         }
         setStatsPanel(null);
         setPickerMode(mode);
-    }, []);
+    }, [addMessage, externalRuntime, grokSessionBound]);
     const closePicker = useCallback(() => {
         setPickerMode(null);
         setCursorResetEpoch((epoch) => epoch + 1);
     }, []);
+    const handleGrokModelSelect = useCallback((encoded) => {
+        if (!externalRuntime)
+            return;
+        const run = async () => {
+            const parsed = JSON.parse(encoded);
+            const boundSessionId = externalRuntimeBindingRef.current?.sessionId;
+            if (boundSessionId)
+                await externalRuntime.hydrateSession(boundSessionId);
+            const selection = await externalRuntime.setModel(parsed.modelId, parsed.reasoningEffort);
+            const manager = sessionManagerRef.current;
+            const binding = manager?.getMetadata().externalRuntime;
+            if (manager && binding && isGrokSubscriptionProviderId(binding.id)) {
+                manager.updateMetadata({ externalRuntime: { ...binding, ...selection } });
+                manager.appendMarker("model_switch", selection.modelId ?? parsed.modelId);
+                manager.appendMarker("thinking_level_switch", selection.reasoningEffort);
+                refreshExternalRuntimeBinding(manager);
+            }
+            addMessage("assistant", `Grok model switched to ${selection.modelId ?? parsed.modelId}${selection.reasoningEffort !== "off" ? ` (${selection.reasoningEffort})` : ""}.`);
+            closePicker();
+        };
+        void run().catch((error) => {
+            addMessage("error", `Failed to switch Grok model: ${errorMessage(error)}`);
+            closePicker();
+        });
+    }, [addMessage, closePicker, externalRuntime, refreshExternalRuntimeBinding]);
     const fillComposer = useCallback((text) => {
         setComposerDraft((current) => ({
             text,
@@ -790,23 +883,8 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         setStatsPanel(null);
         setCursorResetEpoch((epoch) => epoch + 1);
     }, []);
-    const handleSessionSelect = useCallback((sessionFile) => {
-        if (!switchSession) {
-            addMessage("error", "Session switching is not available in this mode.");
-            closePicker();
-            return;
-        }
-        if (activeAbortRef.current) {
-            addMessage("error", "Stop the current run before switching sessions.");
-            closePicker();
-            return;
-        }
-        const result = switchSession(sessionFile);
-        if ("error" in result) {
-            addMessage("error", `Failed to switch session: ${result.error}`);
-            closePicker();
-            return;
-        }
+    const applySessionSwitch = useCallback((result, notice) => {
+        externalRuntimeGenerationRef.current += 1;
         const queuedDisplayKeys = queuedAndPendingDisplayKeys(queuedInputsRef.current, pendingSteersRef.current.values());
         queuedInputsRef.current = [];
         pendingSteersRef.current.clear();
@@ -815,27 +893,122 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         setPendingSteerCount(0);
         setStartingSubmit(null);
         clearComposerDraft();
+        sessionManagerRef.current = result.manager;
         setSessionManager(result.manager);
+        const nextExternalBinding = result.manager.getMetadata().externalRuntime;
+        externalRuntimeBindingRef.current = nextExternalBinding;
+        setExternalRuntimeBinding(nextExternalBinding);
         setTodos(agent.getTodos());
+        clearLiveSubagentTools();
         resetTranscript(() => [
             ...reconstructDisplayMessages(agent.messages).filter((message) => !queuedDisplayKeys.has(message.key ?? "")),
-            withMessageKey({ role: "assistant", content: `⤷ Resumed session: ${sessionDisplayName(result.manager)}` }),
+            ...(notice ? [withMessageKey({ role: "assistant", content: notice })] : []),
         ]);
         closePicker();
-    }, [addMessage, agent, clearComposerDraft, closePicker, setStartingSubmit, switchSession, resetTranscript]);
+        return result.manager;
+    }, [agent, clearComposerDraft, clearLiveSubagentTools, closePicker, resetTranscript, setStartingSubmit]);
+    const prepareFreshSession = useCallback((metadata) => {
+        const fresh = SessionManager.createFresh(args.cwd);
+        try {
+            if (metadata && Object.keys(metadata).length > 0) {
+                fresh.updateMetadata(metadata);
+            }
+            return fresh;
+        }
+        catch (error) {
+            rmSync(fresh.getSessionFile(), { force: true });
+            throw error;
+        }
+    }, [args.cwd]);
+    const commitFreshSession = useCallback((fresh) => {
+        if (!switchSession) {
+            rmSync(fresh.getSessionFile(), { force: true });
+            throw new Error("Starting a fresh session is not available in this mode.");
+        }
+        const result = switchSession(fresh.getSessionFile());
+        if ("error" in result) {
+            rmSync(fresh.getSessionFile(), { force: true });
+            throw new Error(result.error);
+        }
+        return applySessionSwitch(result);
+    }, [applySessionSwitch, switchSession]);
+    const startFreshSession = useCallback(async (metadata) => {
+        return commitFreshSession(prepareFreshSession(metadata));
+    }, [commitFreshSession, prepareFreshSession]);
+    const transitionToNative = useCallback(async () => {
+        if (!externalSessionBound)
+            return sessionManagerRef.current;
+        const candidate = prepareFreshSession();
+        externalRuntimeGenerationRef.current += 1;
+        const boundSessionId = externalRuntimeBinding?.sessionId;
+        try {
+            // Validate/prepare the native provider before calling this function.
+            // The external sidecar must be fully stopped before the new Bubble
+            // session is committed. If commit then fails, the old binding remains
+            // authoritative and the reusable manager will lazy-load it next time.
+            await stopExternalRuntimeForSessionSwitch(externalRuntime, boundSessionId);
+            return commitFreshSession(candidate);
+        }
+        catch (error) {
+            rmSync(candidate.getSessionFile(), { force: true });
+            throw error;
+        }
+    }, [commitFreshSession, externalRuntime, externalRuntimeBinding?.sessionId, externalSessionBound, prepareFreshSession]);
+    const handleSessionSelect = useCallback((sessionFile) => {
+        const run = async () => {
+            if (!switchSession) {
+                addMessage("error", "Session switching is not available in this mode.");
+                closePicker();
+                return;
+            }
+            if (activeAbortRef.current) {
+                addMessage("error", "Stop the current run before switching sessions.");
+                closePicker();
+                return;
+            }
+            if (externalSessionBound) {
+                externalRuntimeGenerationRef.current += 1;
+                const boundSessionId = externalRuntimeBinding?.sessionId;
+                await stopExternalRuntimeForSessionSwitch(externalRuntime, boundSessionId);
+            }
+            const result = switchSession(sessionFile);
+            if ("error" in result) {
+                addMessage("error", `Failed to switch session: ${result.error}`);
+                closePicker();
+                return;
+            }
+            applySessionSwitch(result, `⤷ Resumed session: ${sessionDisplayName(result.manager)}`);
+        };
+        void run().catch((error) => {
+            addMessage("error", `Failed to switch session: ${errorMessage(error)}`);
+            closePicker();
+        });
+    }, [activeAbortRef, addMessage, applySessionSwitch, closePicker, externalRuntime, externalRuntimeBinding?.sessionId, externalSessionBound, switchSession]);
     const handleModelSelect = useCallback((model, selectedThinkingLevel) => {
         const run = async () => {
+            const target = modelSwitchTarget(model, agent.providerId || safeRegistry.getDefault()?.id);
+            await safeRegistry.prepareProvider(target.providerId);
+            const targetProvider = safeRegistry.getConfigured().find((item) => item.id === target.providerId);
+            if (!targetProvider?.apiKey || !createProvider) {
+                throw new Error(`Provider ${target.providerId} is not configured or has no active credentials.`);
+            }
+            // Construct once as a side-effect-free preflight before stopping Grok.
+            // switchAgentModel constructs the committed instance after the fresh
+            // native session has been installed.
+            const preparedProvider = createProvider(target.providerId, targetProvider.apiKey, targetProvider.baseURL);
+            const targetSessionManager = await transitionToNative();
             const nextThinkingLevel = await switchAgentModel({
                 model,
                 agent,
                 registry: safeRegistry,
                 createProvider,
+                preparedProvider,
                 workingDir: args.cwd,
                 systemPromptOptions: agent.getSystemPromptToolOptions(),
                 thinkingLevel: selectedThinkingLevel,
                 rememberModel: (nextModel) => userConfig.pushRecentModel(nextModel),
                 setThinkingLevel,
-                sessionManager,
+                sessionManager: targetSessionManager,
             });
             // Binary thinking toggles and thinking-only models use internal level
             // placeholders; do not present those placeholders as real effort grades.
@@ -854,7 +1027,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
             addMessage("error", formatModelSwitchError(model, error));
             closePicker();
         });
-    }, [agent, addMessage, closePicker, sessionManager, userConfig, safeRegistry, createProvider]);
+    }, [agent, addMessage, closePicker, sessionManager, transitionToNative, userConfig, safeRegistry, createProvider]);
     const handleThemeHighlight = useCallback((mode) => {
         setThemeMode(mode);
     }, []);
@@ -868,58 +1041,15 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         setThemeMode(themePickerRevertRef.current);
         closePicker();
     }, [closePicker]);
-    const handleProviderSelect = useCallback((providerId) => {
-        const run = async () => {
-            await safeRegistry.prepareProvider(providerId);
-            const configured = safeRegistry.getConfigured();
-            const p = configured.find((x) => x.id === providerId);
-            const builtin = BUILTIN_PROVIDERS.find((x) => x.id === providerId);
-            if (!p && !builtin) {
-                addMessage("error", `Provider ${providerId} not found.`);
-                closePicker();
-                return;
-            }
-            if (!p?.apiKey) {
-                if (!p && builtin) {
-                    safeRegistry.addProvider(providerId, "");
-                }
-                safeRegistry.setDefault(providerId);
-                setKeyProviderId(providerId);
-                setPickerMode("key");
-                return;
-            }
-            safeRegistry.setDefault(providerId);
-            agent.setProvider(createProvider(providerId, p.apiKey, p.baseURL));
-            agent.providerId = providerId;
-            addMessage("assistant", `Switched to provider ${p.name}. Use /model to pick a model.`);
-            closePicker();
-        };
-        void run().catch((error) => {
-            addMessage("error", `Failed to switch provider ${providerId}: ${errorMessage(error)}`);
-            closePicker();
-        });
-    }, [addMessage, agent, closePicker, createProvider, safeRegistry]);
-    const handleProviderAddSelect = useCallback((providerId) => {
-        const ok = safeRegistry.addProvider(providerId, "");
-        if (!ok) {
-            addMessage("error", `Provider ${providerId} could not be added.`);
-            closePicker();
-            return;
-        }
-        safeRegistry.setDefault(providerId);
-        setKeyProviderId(providerId);
-        setPickerMode("key");
-    }, [addMessage, closePicker, safeRegistry]);
-    const handleLoginProviderSelect = useCallback(async (providerId) => {
+    const executeProviderCommand = useCallback(async (command) => {
         closePicker();
-        const command = `/login ${providerId}`;
         const { handled, result } = await slashRegistry.execute(command, {
             agent,
             addMessage,
             clearMessages,
             cwd: args.cwd,
-            exit: () => { requestExit(); },
-            sessionManager,
+            exit: requestExit,
+            sessionManager: sessionManagerRef.current,
             createProvider: createProvider ?? (() => {
                 throw new Error("Provider creation not available");
             }),
@@ -943,67 +1073,157 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
             getResolvedTheme: () => themeResolved,
             setThemeMode: applyThemeMode,
             openStats: openStatsPanel,
+            externalRuntime,
+            startFreshSession,
+            transitionToNative,
+            onExternalRuntimeChange: refreshExternalRuntimeBinding,
         });
-        if (handled && result) {
+        if (handled && result)
             addMessage("assistant", result);
-        }
-    }, [agent, addMessage, clearMessages, closePicker, createProvider, exit, fillComposer, openPicker, openSessionPicker, openRewindPicker, openStatsPanel, safeRegistry, sessionManager]);
-    const handleLogoutProviderSelect = useCallback(async (providerId) => {
-        closePicker();
-        const command = `/logout ${providerId}`;
-        const { handled, result } = await slashRegistry.execute(command, {
-            agent,
-            addMessage,
-            clearMessages,
-            cwd: args.cwd,
-            exit: () => { requestExit(); },
-            sessionManager,
-            createProvider: createProvider ?? (() => {
+    }, [
+        addMessage,
+        agent,
+        applyThemeMode,
+        args.cwd,
+        bashAllowlist,
+        clearMessages,
+        closePicker,
+        createProvider,
+        externalRuntime,
+        fillComposer,
+        flushMemory,
+        hookController,
+        lspService,
+        mcpManager,
+        openFeedback,
+        openPicker,
+        openRewindPicker,
+        openSessionPicker,
+        openStatsPanel,
+        refreshExternalRuntimeBinding,
+        requestExit,
+        runMemoryCompaction,
+        runMemoryRefresh,
+        runMemorySummary,
+        safeRegistry,
+        safeSkillRegistry,
+        settingsManager,
+        startFreshSession,
+        themeMode,
+        themeResolved,
+        transitionToNative,
+    ]);
+    const handleProviderSelect = useCallback((providerId) => {
+        const run = async () => {
+            if (isGrokSubscriptionProviderId(providerId)) {
+                if (grokSessionBound) {
+                    closePicker();
+                    return;
+                }
+                await executeProviderCommand(`/provider --set ${GROK_SUBSCRIPTION_PROVIDER_ID}`);
+                return;
+            }
+            await safeRegistry.prepareProvider(providerId);
+            const configured = safeRegistry.getConfigured();
+            const p = configured.find((x) => x.id === providerId);
+            const builtin = BUILTIN_PROVIDERS.find((x) => x.id === providerId);
+            if (!p && !builtin) {
+                addMessage("error", `Provider ${providerId} not found.`);
+                closePicker();
+                return;
+            }
+            if (!p?.apiKey) {
+                if (!p && builtin) {
+                    safeRegistry.addProvider(providerId, "");
+                }
+                setKeyProviderId(providerId);
+                setPickerMode("key");
+                return;
+            }
+            if (!createProvider)
                 throw new Error("Provider creation not available");
-            }),
-            openPicker,
-            openSessionPicker,
-            openRewindPicker,
-            openFeedback,
-            fillComposer,
-            registry: safeRegistry,
-            skillRegistry: safeSkillRegistry,
-            bashAllowlist,
-            settingsManager,
-            lspService,
-            mcpManager,
-            hookController,
-            flushMemory,
-            runMemoryCompaction,
-            runMemorySummary,
-            runMemoryRefresh,
-            getThemeMode: () => themeMode,
-            getResolvedTheme: () => themeResolved,
-            setThemeMode: applyThemeMode,
-            openStats: openStatsPanel,
+            // Construct the target before stopping a Grok sidecar. A bad provider
+            // configuration must leave the current external session untouched.
+            const nextProvider = createProvider(providerId, p.apiKey, p.baseURL);
+            await transitionToNative();
+            agent.setProvider(nextProvider);
+            agent.providerId = providerId;
+            try {
+                safeRegistry.setDefault(providerId);
+            }
+            catch (error) {
+                addMessage("error", `Switched providers, but could not remember the default: ${errorMessage(error)}`);
+            }
+            addMessage("assistant", `Switched to provider ${p.name}. Use /model to pick a model.`);
+            closePicker();
+        };
+        void run().catch((error) => {
+            addMessage("error", `Failed to switch provider ${providerId}: ${errorMessage(error)}`);
+            closePicker();
         });
-        if (handled && result) {
-            addMessage("assistant", result);
-        }
-    }, [agent, addMessage, clearMessages, closePicker, createProvider, exit, fillComposer, openPicker, openSessionPicker, openRewindPicker, openStatsPanel, safeRegistry, sessionManager]);
+    }, [addMessage, agent, closePicker, createProvider, executeProviderCommand, grokSessionBound, safeRegistry, transitionToNative]);
+    const handleProviderAddSelect = useCallback((providerId) => {
+        const run = async () => {
+            if (isGrokSubscriptionProviderId(providerId)) {
+                await executeProviderCommand(`/provider --add ${GROK_SUBSCRIPTION_PROVIDER_ID}`);
+                return;
+            }
+            const ok = safeRegistry.addProvider(providerId, "");
+            if (!ok) {
+                addMessage("error", `Provider ${providerId} could not be added.`);
+                closePicker();
+                return;
+            }
+            setKeyProviderId(providerId);
+            setPickerMode("key");
+        };
+        void run().catch((error) => {
+            addMessage("error", `Failed to add provider ${providerId}: ${errorMessage(error)}`);
+            closePicker();
+        });
+    }, [addMessage, closePicker, executeProviderCommand, safeRegistry]);
+    const handleLoginProviderSelect = useCallback((providerId) => {
+        void executeProviderCommand(`/login ${providerId}`).catch((error) => {
+            addMessage("error", `Failed to log in to ${providerId}: ${errorMessage(error)}`);
+        });
+    }, [addMessage, executeProviderCommand]);
+    const handleLogoutProviderSelect = useCallback((providerId) => {
+        void executeProviderCommand(`/logout ${providerId}`).catch((error) => {
+            addMessage("error", `Failed to log out of ${providerId}: ${errorMessage(error)}`);
+        });
+    }, [addMessage, executeProviderCommand]);
     const handleKeySubmit = useCallback((key) => {
-        const targetId = keyProviderId || safeRegistry.getDefault()?.id;
-        if (!targetId) {
-            addMessage("error", "No provider selected.");
+        const run = async () => {
+            const targetId = keyProviderId || safeRegistry.getDefault()?.id;
+            if (!targetId) {
+                addMessage("error", "No provider selected.");
+                closePicker();
+                setKeyProviderId(null);
+                return;
+            }
+            safeRegistry.updateProviderKey(targetId, key);
+            const p = safeRegistry.getConfigured().find((x) => x.id === targetId);
+            if (p && createProvider) {
+                const nextProvider = createProvider(targetId, key, p.baseURL);
+                await transitionToNative();
+                agent.setProvider(nextProvider);
+                agent.providerId = targetId;
+                try {
+                    safeRegistry.setDefault(targetId);
+                }
+                catch (error) {
+                    addMessage("error", `API key saved, but could not remember the default: ${errorMessage(error)}`);
+                }
+            }
+            addMessage("assistant", `API key updated for ${p?.name || targetId} to ${maskKey(key)}.`);
             closePicker();
             setKeyProviderId(null);
-            return;
-        }
-        safeRegistry.updateProviderKey(targetId, key);
-        const p = safeRegistry.getConfigured().find((x) => x.id === targetId);
-        if (p && createProvider) {
-            agent.setProvider(createProvider(targetId, key, p.baseURL));
-            agent.providerId = targetId;
-        }
-        addMessage("assistant", `API key updated for ${p?.name || targetId} to ${maskKey(key)}.`);
-        closePicker();
-        setKeyProviderId(null);
-    }, [addMessage, agent, closePicker, createProvider, keyProviderId, safeRegistry]);
+        };
+        void run().catch((error) => {
+            addMessage("error", `Failed to update provider key: ${errorMessage(error)}`);
+            closePicker();
+        });
+    }, [addMessage, agent, closePicker, createProvider, keyProviderId, safeRegistry, transitionToNative]);
     const handleSubmit = useCallback(async (payload) => {
         const initialPayload = typeof payload === "string" ? { text: payload, images: [] } : payload;
         const input = initialPayload.text;
@@ -1019,6 +1239,13 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                 requestExit();
                 return;
             }
+            if (externalSessionBound) {
+                // External ACP turns do not support Bubble's boundary steer
+                // protocol. Preserve ordering by sending every additional input to
+                // the next turn instead.
+                queueInput(initialPayload);
+                return;
+            }
             const steerEligible = !displayInput.trim().startsWith("/") &&
                 !input.includes("@") &&
                 images.length === 0;
@@ -1030,6 +1257,21 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
             }
             return;
         }
+        const grokInputDecision = externalSessionBound
+            ? classifyGrokInput({ text: input, imageCount: images.length })
+            : undefined;
+        if (grokInputDecision?.kind === "blocked") {
+            addMessage("error", grokInputDecision.message);
+            return;
+        }
+        if (grokInputDecision?.kind === "prompt" && unsupportedExternalSessionBound) {
+            addMessage("error", "This session has an unsupported external runtime binding. Native tools and providers are disabled; use /session, /provider, or /model to enter a fresh native session.");
+            return;
+        }
+        if (grokInputDecision?.kind === "prompt" && grokSessionBound && !externalRuntime) {
+            addMessage("error", "This session belongs to Grok Subscription, but its runtime is unavailable in this TUI. Use /model, /provider, or /session to enter a fresh native session.");
+            return;
+        }
         const submitFingerprint = submitPayloadFingerprint(initialPayload);
         const startingDecision = decideStartingSubmitFingerprint(startingSubmitFingerprintRef.current, submitFingerprint);
         if (startingDecision === "ignore")
@@ -1043,23 +1285,50 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         try {
             const runAgentInput = async (actualInput, displayInput, attachedImages = [], runOptions = {}) => {
                 const runSessionFile = currentSessionFile();
-                const activeProviderId = agent.providerId || safeRegistry.getDefault()?.id;
-                const hasActiveProvider = !!activeProviderId && safeRegistry.getEnabled().some((provider) => provider.id === activeProviderId);
-                if (!hasActiveProvider) {
-                    addMessage("error", "No provider configured. Use /login for ChatGPT or /provider --add <id> before sending a prompt.");
-                    if (runOptions.goalRun && goalStore?.snapshot()?.status === "active") {
-                        goalStore.pause();
-                        addMessage("assistant", stopReasonNotice("error"));
+                const runSessionManager = sessionManagerRef.current;
+                const runExternalRuntime = isGrokSubscriptionProviderId(externalRuntimeBindingRef.current?.id);
+                const externalSessionId = runExternalRuntime
+                    ? externalRuntimeBindingRef.current?.sessionId
+                    : undefined;
+                const externalModelId = runExternalRuntime
+                    ? externalRuntimeBindingRef.current?.modelId ?? "subscription-default"
+                    : undefined;
+                const externalGeneration = runExternalRuntime
+                    ? ++externalRuntimeGenerationRef.current
+                    : undefined;
+                const isCurrentExternalRun = () => !runExternalRuntime || (externalRuntimeGenerationRef.current === externalGeneration
+                    && currentSessionFile() === runSessionFile
+                    && isGrokSubscriptionProviderId(externalRuntimeBindingRef.current?.id)
+                    && externalRuntimeBindingRef.current?.sessionId === externalSessionId);
+                if (runExternalRuntime) {
+                    if (!externalRuntime || typeof actualInput !== "string" || !externalSessionId || !runSessionManager) {
+                        addMessage("error", "Grok subscription session binding is unavailable. Start a fresh session with /login grok.");
+                        return;
+                    }
+                    const boundModelId = externalRuntimeBindingRef.current?.modelId;
+                    if (boundModelId) {
+                        await externalRuntime.hydrateSession(externalSessionId, boundModelId, externalRuntimeBindingRef.current?.reasoningEffort);
                     }
-                    return;
                 }
-                if (!agent.model) {
-                    addMessage("error", "No model selected. Use /model after /login or provider setup.");
-                    if (runOptions.goalRun && goalStore?.snapshot()?.status === "active") {
-                        goalStore.pause();
-                        addMessage("assistant", stopReasonNotice("error"));
+                else {
+                    const activeProviderId = agent.providerId || safeRegistry.getDefault()?.id;
+                    const hasActiveProvider = !!activeProviderId && safeRegistry.getEnabled().some((provider) => provider.id === activeProviderId);
+                    if (!hasActiveProvider) {
+                        addMessage("error", "No provider configured. Use /login for ChatGPT or /provider --add <id> before sending a prompt.");
+                        if (runOptions.goalRun && goalStore?.snapshot()?.status === "active") {
+                            goalStore.pause();
+                            addMessage("assistant", stopReasonNotice("error"));
+                        }
+                        return;
+                    }
+                    if (!agent.model) {
+                        addMessage("error", "No model selected. Use /model after /login or provider setup.");
+                        if (runOptions.goalRun && goalStore?.snapshot()?.status === "active") {
+                            goalStore.pause();
+                            addMessage("assistant", stopReasonNotice("error"));
+                        }
+                        return;
                     }
-                    return;
                 }
                 const displayContent = formatImageUserDisplayText(displayInput, attachedImages.length, runOptions.imageDisplayStart);
                 if (!runOptions.hidden) {
@@ -1070,6 +1339,9 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                     // The new user row commits to native scrollback; the terminal keeps
                     // the prompt in view, so there is no app-side "snap to bottom" to do.
                 }
+                if (runExternalRuntime) {
+                    runSessionManager.appendMessage({ role: "user", content: actualInput });
+                }
                 setIsRunning(true);
                 runStartRef.current = Date.now();
                 setStreamingContent("");
@@ -1084,6 +1356,13 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                 let runErrored = false;
                 const toolCalls = [];
                 const assistantParts = [];
+                // Entries whose members all reached a final status are now covered by
+                // the settled transcript; drop them so the accumulator stays bounded
+                // across a long session. Running entries survive — for a workflow
+                // spanning turns they are the only live view of its members.
+                if (pruneSettledLiveSubagentTools(liveSubagentToolsRef.current)) {
+                    setLiveSubagentVersion((version) => version + 1);
+                }
                 const abortController = new AbortController();
                 activeAbortRef.current = abortController;
                 setStartingSubmit(null);
@@ -1117,7 +1396,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                     toolCalls.length > 0 ||
                     assistantParts.length > 0);
                 const commitAssistantMessage = (taskElapsedMs) => {
-                    if (!hasAssistantOutput())
+                    if (!hasAssistantOutput() || !isCurrentExternalRun())
                         return;
                     const currentParts = snapshotDisplayParts(assistantParts);
                     const currentToolCalls = [...toolCalls];
@@ -1143,6 +1422,16 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                         msg.taskElapsedMs = taskElapsedMs;
                     }
                     updateDisplayMessages((prev) => [...prev, msg]);
+                    if (runExternalRuntime) {
+                        runSessionManager.appendMessage({
+                            role: "assistant",
+                            content: partContent,
+                            ...(assistantReasoning ? { reasoning: assistantReasoning } : {}),
+                            providerId: "grok",
+                            model: "grok-subscription",
+                            modelId: externalModelId,
+                        });
+                    }
                 };
                 const clearAssistantStream = () => {
                     // A timer firing after this reset would resurrect the just-committed
@@ -1158,10 +1447,33 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                     assistantParts.length = 0;
                 };
                 try {
-                    for await (const event of agent.run(actualInput, args.cwd, {
-                        abortSignal: abortController.signal,
-                        inputController,
-                    })) {
+                    const eventStream = runExternalRuntime
+                        ? externalRuntime.run(actualInput, {
+                            sessionId: externalSessionId,
+                            signal: abortController.signal,
+                            generation: externalGeneration,
+                        })
+                        : agent.run(actualInput, args.cwd, {
+                            abortSignal: abortController.signal,
+                            inputController,
+                        });
+                    for await (const event of eventStream) {
+                        if (runExternalRuntime) {
+                            if (!isCurrentExternalRun()) {
+                                abortController.abort(new AgentAbortError("Stale Grok runtime generation."));
+                                break;
+                            }
+                            if (event.type !== "turn_start"
+                                && event.type !== "text_delta"
+                                && event.type !== "reasoning_delta"
+                                && event.type !== "tool_start"
+                                && event.type !== "tool_update"
+                                && event.type !== "tool_end"
+                                && event.type !== "turn_end") {
+                                await externalRuntime.cancel(externalSessionId).catch(() => undefined);
+                                throw new GrokRuntimeError("policy_violation", "Grok emitted an unsupported external runtime event.");
+                            }
+                        }
                         switch (event.type) {
                             case "turn_start":
                                 // A fresh provider call is starting. Everything worth keeping
@@ -1268,6 +1580,15 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                                     setStreamingTools([...toolCalls]);
                                     syncStreamingParts();
                                 }
+                                else if (accumulateLiveSubagentUpdate(liveSubagentToolsRef.current, {
+                                    id: event.id,
+                                    name: event.name,
+                                    metadata: event.update.metadata,
+                                })) {
+                                    // The launching call already settled out of this round's
+                                    // toolCalls; absorbed into the live accumulator instead.
+                                    setLiveSubagentVersion((version) => version + 1);
+                                }
                                 break;
                             }
                             case "todos_updated": {
@@ -1352,15 +1673,23 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                     }
                 }
                 catch (err) {
-                    commitAssistantMessage();
-                    if (err instanceof AgentAbortError || err?.name === "AbortError") {
+                    const staleExternalRun = runExternalRuntime && !isCurrentExternalRun();
+                    if (!staleExternalRun)
+                        commitAssistantMessage();
+                    const cancelledError = err instanceof AgentAbortError
+                        || err?.name === "AbortError"
+                        || (err instanceof GrokRuntimeError && err.code === "cancelled");
+                    if (staleExternalRun) {
+                        runCancelled = true;
+                    }
+                    else if (cancelledError) {
                         runCancelled = true;
                         // commitAssistantMessage already appended the partial answer; the
                         // interrupt is otherwise a pure append (the partial + a "Interrupted"
                         // row). Off a multiplexer, append just the interrupt row so settled
                         // history is never reprinted — no flash. Under tmux/screen, fall back
                         // to the full reprint that rebuilds from the canonical agent.messages.
-                        if (isMultiplexedTerminal()) {
+                        if (!runExternalRuntime && isMultiplexedTerminal()) {
                             resetTranscript(() => reconstructDisplayMessages(agent.messages));
                         }
                         else {
@@ -1378,7 +1707,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                         runErrored = true;
                         updateDisplayMessages((prev) => [
                             ...prev,
-                            withMessageKey({ role: "error", content: err.message }),
+                            withMessageKey({ role: "error", content: errorMessage(err) }),
                         ]);
                     }
                 }
@@ -1390,6 +1719,23 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                     const cancelled = abortController.signal.aborted;
                     if (cancelled)
                         runCancelled = true;
+                    if (runExternalRuntime && runCancelled) {
+                        // External ACP owns its own conversation state, so Bubble persists
+                        // an explicit boundary for its local transcript. Without this,
+                        // a partial response looks successfully completed after resume.
+                        runSessionManager.appendMessage({
+                            role: "assistant",
+                            content: INTERRUPTED_ASSISTANT_CONTENT,
+                            error: {
+                                name: "MessageAbortedError",
+                                message: "Assistant response was interrupted by the user.",
+                                aborted: true,
+                            },
+                            providerId: "grok",
+                            model: "grok-subscription",
+                            modelId: externalModelId,
+                        });
+                    }
                     for (const leftover of inputController.clear()) {
                         const steer = pendingSteersRef.current.get(leftover.id);
                         pendingSteersRef.current.delete(leftover.id);
@@ -1408,25 +1754,32 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                             sessionFile: steer?.sessionFile ?? runSessionFile,
                         });
                     }
-                    setPendingSteerCount(0);
-                    setQueuedCount(queuedInputsRef.current.length);
+                    const ownsCurrentUiGeneration = !runExternalRuntime || isCurrentExternalRun();
+                    if (ownsCurrentUiGeneration) {
+                        setPendingSteerCount(0);
+                        setQueuedCount(queuedInputsRef.current.length);
+                    }
                     if (inputControllerRef.current === inputController)
                         inputControllerRef.current = null;
                     if (activeAbortRef.current === abortController)
                         activeAbortRef.current = null;
-                    setIsRunning(false);
-                    runStartRef.current = null;
-                    setStreamingContent("");
-                    setStreamingReasoning("");
-                    setStreamingTools([]);
-                    setStreamingParts([]);
-                    maybeContinueGoal({
-                        runCancelled,
-                        runErrored,
-                        isGoalRun: !!runOptions.goalRun,
-                        runTokens: goalRunTokens,
-                        usageReported: goalRunUsageReported,
-                    });
+                    if (ownsCurrentUiGeneration) {
+                        setIsRunning(false);
+                        runStartRef.current = null;
+                        setStreamingContent("");
+                        setStreamingReasoning("");
+                        setStreamingTools([]);
+                        setStreamingParts([]);
+                    }
+                    if (!runExternalRuntime) {
+                        maybeContinueGoal({
+                            runCancelled,
+                            runErrored,
+                            isGoalRun: !!runOptions.goalRun,
+                            runTokens: goalRunTokens,
+                            usageReported: goalRunUsageReported,
+                        });
+                    }
                 }
             };
             const kickGoalTurn = (prompt, visibleInput) => {
@@ -1553,7 +1906,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
             };
             // Slash commands and skill invocations drop any attached images —
             // they're meant for pure command routing.
-            if (displayInput.startsWith("/")) {
+            if (input.trimStart().startsWith("/")) {
                 // Fast-path `/quit` and `/exit` before slash-registry / skill
                 // resolution. This guarantees a literal "/quit" always exits even if
                 // a skill or alias of the same name is later registered. The
@@ -1564,14 +1917,16 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                     requestExit();
                     return;
                 }
-                if (/^\/goal(?:\s|$)/.test(input.trim())) {
-                    await handleGoalCommand(input);
-                    return;
-                }
-                const skillInvocation = parseSkillInvocation(input, safeSkillRegistry);
-                if (skillInvocation) {
-                    await runAgentInput(skillInvocation.actualPrompt, displayInput);
-                    return;
+                if (!externalSessionBound) {
+                    if (/^\/goal(?:\s|$)/.test(input.trim())) {
+                        await handleGoalCommand(input);
+                        return;
+                    }
+                    const skillInvocation = parseSkillInvocation(input, safeSkillRegistry);
+                    if (skillInvocation) {
+                        await runAgentInput(skillInvocation.actualPrompt, displayInput);
+                        return;
+                    }
                 }
                 const { handled, result, inject } = await slashRegistry.execute(input, {
                     agent,
@@ -1604,6 +1959,10 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                     setThemeMode: applyThemeMode,
                     openStats: openStatsPanel,
                     compactionProgress: setCompaction,
+                    externalRuntime,
+                    startFreshSession,
+                    transitionToNative,
+                    onExternalRuntimeChange: refreshExternalRuntimeBinding,
                 });
                 if (handled) {
                     if (agent.mode !== permissionMode) {
@@ -1627,7 +1986,9 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                         }
                         else if (result.startsWith("⏪")) {
                             // /rewind truncated agent.messages — rebuild the transcript from
-                            // the rewound state before appending the summary.
+                            // the rewound state before appending the summary. Subagents
+                            // rewound out of history must not linger in the live accumulator.
+                            clearLiveSubagentTools();
                             resetTranscript(() => [
                                 ...reconstructDisplayMessages(agent.messages),
                                 { role: "assistant", content: result },
@@ -1642,6 +2003,14 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                     }
                     return;
                 }
+                if (externalSessionBound) {
+                    addMessage("error", "That command is unavailable in this external runtime session.");
+                    return;
+                }
+            }
+            if (grokSessionBound) {
+                await runAgentInput(input, displayInput);
+                return;
             }
             const expansion = await expandAtMentions(input, args.cwd);
             if (expansion.missing.length > 0) {
@@ -1667,7 +2036,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                 setStartingSubmit(null);
             }
         }
-    }, [addMessage, agent, args.cwd, openPicker, openSessionPicker, openRewindPicker, openStatsPanel, createProvider, currentSessionFile, fillComposer, prepareSubmitDisplay, safeRegistry, safeSkillRegistry, updateDisplayMessages, queueInput, submitSteer, requestExit, setStartingSubmit]);
+    }, [addMessage, agent, args.cwd, openPicker, openSessionPicker, openRewindPicker, openStatsPanel, createProvider, currentSessionFile, externalRuntime, externalRuntimeBinding, externalSessionBound, fillComposer, grokSessionBound, prepareSubmitDisplay, refreshExternalRuntimeBinding, safeRegistry, safeSkillRegistry, startFreshSession, transitionToNative, unsupportedExternalSessionBound, updateDisplayMessages, queueInput, submitSteer, requestExit, setStartingSubmit]);
     // Drain the queue once the run ends and no modal needs the user first.
     // The placeholder row is removed right before resubmitting — handleSubmit
     // renders the message again as a regular user row.
@@ -1699,7 +2068,9 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
         const timer = setTimeout(drainQueuedInput, 0);
         return () => clearTimeout(timer);
     }, [isRunning, queuedCount, startingSubmitFingerprint, pendingPlan, pendingApproval, pendingQuestion, pendingFeedback, pickerMode, statsPanel, drainQueuedInput]);
-    const currentProviderId = agent.providerId || safeRegistry.getDefault()?.id;
+    const currentProviderId = externalSessionBound
+        ? (grokSessionBound ? GROK_SUBSCRIPTION_PROVIDER_ID : undefined)
+        : agent.providerId || safeRegistry.getDefault()?.id;
     const keyTarget = keyProviderId
         ? safeRegistry.getConfigured().find((p) => p.id === keyProviderId)
         : safeRegistry.getDefault();
@@ -1726,8 +2097,14 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
     const showThinkingLabel = Boolean(thinkingLevel)
         && thinkingLevel !== "off"
         && (isThinkingToggle || isThinkingOnly || availableThinkingLevels.length > 2);
-    const welcomeBannerNode = showWelcome ? (_jsx(WelcomeBanner, { terminalColumns: terminalColumns, tips: buildTips(agent, safeRegistry), updateNotice: currentUpdateNotice, cwd: friendlyCwd(args.cwd), sessionLabel: sessionBasename(currentSessionFile()), providerId: agent.providerId || safeRegistry.getDefault()?.id, modelId: agent.apiModel, modelLabel: agent.model ? displayModel(agent.model) : undefined, thinkingLabel: showThinkingLabel ? thinkingLevel : undefined })) : null;
-    const commandPaletteItems = useMemo(() => buildCommandPaletteItems(safeSkillRegistry), [safeSkillRegistry]);
+    const welcomeBannerNode = showWelcome ? (_jsx(WelcomeBanner, { terminalColumns: terminalColumns, tips: buildTips(agent, safeRegistry, grokSessionBound), updateNotice: currentUpdateNotice, cwd: friendlyCwd(args.cwd), sessionLabel: sessionBasename(currentSessionFile()), providerId: grokSessionBound ? "grok" : externalSessionBound ? undefined : agent.providerId || safeRegistry.getDefault()?.id, modelId: grokSessionBound ? externalRuntimeBinding?.modelId : externalSessionBound ? undefined : agent.apiModel, modelLabel: externalSessionBound
+            ? (grokSessionBound
+                ? `Grok Subscription${externalRuntimeBinding?.modelId ? ` · ${externalRuntimeBinding.modelId}` : ""}`
+                : "Unsupported external runtime · recovery-only mode")
+            : agent.model ? displayModel(agent.model) : undefined, thinkingLabel: grokSessionBound
+            ? externalRuntimeBinding?.reasoningEffort
+            : !externalSessionBound && showThinkingLabel ? thinkingLevel : undefined })) : null;
+    const commandPaletteItems = useMemo(() => buildCommandPaletteItems(safeSkillRegistry, externalSessionBound), [externalSessionBound, safeSkillRegistry]);
     const mcpReconnectItems = useMemo(() => buildMcpReconnectItems(mcpManager), [mcpManager]);
     // No fixed-height frame: settled rows flow into the terminal's native
     // scrollback via <Static>, and only the dynamic bottom stack (streaming
@@ -1735,7 +2112,14 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
     // to its content keeps the composer pinned just below the latest output the
     // way ordinary shell programs do.
     const mainWidth = Math.max(40, terminalColumns);
-    return (_jsx(ThemeProvider, { value: palette, children: _jsxs(Box, { flexDirection: "column", width: mainWidth, backgroundColor: palette.background, children: [_jsx(MessageList, { messages: messages, streamingContent: streamingContent, streamingReasoning: streamingReasoning, streamingTools: streamingTools, streamingParts: streamingParts, terminalColumns: mainWidth, showThinking: showThinking, verboseTrace: verboseTrace, pendingApproval: approvalHint, nowTick: nowTick, welcomeBanner: welcomeBannerNode, staticGeneration: staticGeneration, paddingX: 1, maxStreamRows: Math.max(6, terminalRows - 10) }), pickerMode === "model" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ModelPicker, { registry: safeRegistry, current: agent.model, currentThinkingLevel: thinkingLevel, recent: userConfig.getRecentModels(), onSelect: handleModelSelect, onCancel: closePicker }) })), pickerMode === "provider" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+    return (_jsx(ThemeProvider, { value: palette, children: _jsxs(Box, { flexDirection: "column", width: mainWidth, children: [_jsx(MessageList, { messages: messages, streamingContent: streamingContent, streamingReasoning: streamingReasoning, streamingTools: streamingTools, streamingParts: streamingParts, terminalColumns: mainWidth, showThinking: showThinking, verboseTrace: verboseTrace, pendingApproval: approvalHint, nowTick: nowTick, welcomeBanner: welcomeBannerNode, staticGeneration: staticGeneration, paddingX: 1, maxStreamRows: Math.max(6, terminalRows - 10) }), pickerMode === "grok-model" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: grokModels.length === 0 ? (_jsx(Text, { children: "Loading Grok subscription models\u2026" })) : (_jsx(ProviderPicker, { title: "Select Grok Model and Reasoning", providers: grokModels.flatMap((model) => model.reasoningLevels.map((effort) => ({
+                            id: JSON.stringify({ modelId: model.id, reasoningEffort: effort }),
+                            name: `${model.name}${effort === "off" ? "" : ` · ${effort}`}`,
+                            enabled: true,
+                        }))), current: JSON.stringify({
+                            modelId: externalRuntimeBinding?.modelId,
+                            reasoningEffort: externalRuntimeBinding?.reasoningEffort ?? "high",
+                        }), onSelect: handleGrokModelSelect, onCancel: closePicker })) })), pickerMode === "model" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ModelPicker, { registry: safeRegistry, current: agent.model, currentThinkingLevel: thinkingLevel, recent: userConfig.getRecentModels(), onSelect: handleModelSelect, onCancel: closePicker }) })), pickerMode === "provider" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: withGrokSubscriptionProvider(BUILTIN_PROVIDERS
                             .filter((p) => isUserVisibleProvider(p.id))
                             .map((p) => {
                             const configured = safeRegistry.getConfigured().find((item) => item.id === p.id);
@@ -1745,13 +2129,21 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                                 name: `${p.name} [${configuredLabel}]`,
                                 enabled: true,
                             };
-                        }), current: currentProviderId, onSelect: handleProviderSelect, onCancel: closePicker }) })), pickerMode === "provider-add" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                        })), current: currentProviderId, onSelect: handleProviderSelect, onCancel: closePicker }) })), pickerMode === "provider-add" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: withGrokSubscriptionProvider(BUILTIN_PROVIDERS
                             .filter((p) => isUserVisibleProvider(p.id))
-                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleProviderAddSelect, onCancel: closePicker, title: "Add Provider" }) })), pickerMode === "login" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                            .map((p) => ({ id: p.id, name: p.name, enabled: true }))), current: currentProviderId, onSelect: handleProviderAddSelect, onCancel: closePicker, title: "Add Provider" }) })), pickerMode === "login" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: 
+                        // The native grok provider is OAuth-capable, so it appears via
+                        // supportsOAuth like OpenAI — no extra hardcoded row.
+                        BUILTIN_PROVIDERS
                             .filter((p) => isUserVisibleProvider(p.id) && safeRegistry.supportsOAuth(p.id))
-                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLoginProviderSelect, onCancel: closePicker, title: "Select Login Provider" }) })), pickerMode === "logout" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: safeRegistry.getConfigured()
-                            .filter((p) => safeRegistry.getAuthStorage().has(p.id))
-                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLogoutProviderSelect, onCancel: closePicker, title: "Select Logout Provider" }) })), pickerMode === "key" && keyTarget && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(KeyPicker, { providerName: keyTarget.name, onSubmit: handleKeySubmit, onCancel: () => {
+                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLoginProviderSelect, onCancel: closePicker, title: "Select Login Provider" }) })), pickerMode === "logout" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: [
+                            ...safeRegistry.getConfigured()
+                                .filter((p) => safeRegistry.getAuthStorage().has(p.id))
+                                .map((p) => ({ id: p.id, name: p.name, enabled: true })),
+                            ...(grokSessionBound
+                                ? [{ id: GROK_SUBSCRIPTION_PROVIDER_ID, name: "Grok Subscription [local login]", enabled: true }]
+                                : []),
+                        ], current: currentProviderId, onSelect: handleLogoutProviderSelect, onCancel: closePicker, title: "Select Logout Provider" }) })), pickerMode === "key" && keyTarget && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(KeyPicker, { providerName: keyTarget.name, onSubmit: handleKeySubmit, onCancel: () => {
                             closePicker();
                             setKeyProviderId(null);
                         } }) })), pickerMode === "skill" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(SkillPicker, { skills: safeSkillRegistry.summaries(), onSelect: (name) => {
@@ -1808,27 +2200,49 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                             else if (result.kind === "error") {
                                 addMessage("error", `Feedback failed: ${result.message}`);
                             }
-                        } }) })), !isExiting && compaction && (_jsx(Box, { flexShrink: 0, backgroundColor: palette.background, children: _jsx(CompactionProgressCard, { progress: compaction }) })), !isExiting && isRunning && !pickerMode && !statsPanel && !pendingPlan && !pendingApproval && !pendingQuestion && !pendingFeedback && (_jsx(Box, { paddingX: 1, paddingBottom: 1, flexShrink: 0, backgroundColor: palette.background, children: _jsx(WaitingIndicator, { tools: streamingTools, hasStreamingText: streamingContent.length > 0, hasStreamingReasoning: streamingReasoning.length > 0, streamedChars: streamingContent.length + streamingReasoning.length, nowTick: nowTick, pendingSteerCount: pendingSteerCount, queuedCount: queuedCount }) })), !isExiting && !pickerMode && !statsPanel && (_jsx(Box, { paddingBottom: 1, flexShrink: 0, backgroundColor: palette.background, children: _jsx(InputBox, { onSubmit: handleSubmit, onQueue: isRunning ? queueInput : undefined, onArrowDownAtBottom: () => {
+                        } }) })), !isExiting && compaction && (_jsx(Box, { flexShrink: 0, backgroundColor: palette.background, children: _jsx(CompactionProgressCard, { progress: compaction }) })), !isExiting && isRunning && !pickerMode && !statsPanel && !pendingPlan && !pendingApproval && !pendingQuestion && !pendingFeedback && (
+                // The streaming tail supplies its own bottom margin once it has
+                // visible output, but right after a prompt is sent the tail renders
+                // nothing and the spinner would hug the user's message bubble — give
+                // it a top gap only in that empty-tail state to avoid double spacing.
+                _jsx(Box, { paddingX: 1, paddingBottom: 1, paddingTop: streamingParts.length === 0
+                        && streamingContent.length === 0
+                        && streamingTools.length === 0
+                        && (streamingReasoning.length === 0 || !(showThinking || verboseTrace))
+                        ? 1
+                        : 0, flexShrink: 0, backgroundColor: palette.background, children: _jsx(WaitingIndicator, { tools: streamingTools, hasStreamingText: streamingContent.length > 0, hasStreamingReasoning: streamingReasoning.length > 0, streamedChars: streamingContent.length + streamingReasoning.length, nowTick: nowTick, pendingSteerCount: pendingSteerCount, queuedCount: queuedCount }) })), !isExiting && !pickerMode && !statsPanel && (_jsx(Box, { paddingBottom: 1, flexShrink: 0, backgroundColor: palette.background, children: _jsx(InputBox, { onSubmit: handleSubmit, onQueue: isRunning ? queueInput : undefined, onArrowDownAtBottom: () => {
                             if (subagentMembers.length > 0 && !pickerMode)
                                 setSubagentEntryFocused(true);
-                        }, disabled: !!pendingPlan || !!pendingApproval || !!pendingQuestion || !!pendingFeedback || !!statsPanel || subagentEntryFocused, cursorResetEpoch: cursorResetEpoch, draftText: composerDraft?.text, draftEpoch: composerDraft?.epoch, onDraftApplied: clearComposerDraft, skillRegistry: safeSkillRegistry, localSlashCommands: [...INK_LOCAL_SLASH_COMMANDS], terminalColumns: mainWidth, cwd: args.cwd, sessionFile: currentSessionFile(), nextImageLabelStart: nextImageDisplayLabelStartRef.current }) })), !isExiting && !pickerMode && !statsPanel && !pendingPlan && !pendingApproval && !pendingQuestion && !pendingFeedback && subagentMembers.length > 0 && (_jsxs(Box, { paddingX: 1, flexShrink: 0, backgroundColor: palette.background, children: [_jsx(Text, { bold: subagentEntryFocused, color: subagentEntryFocused ? palette.accent : palette.toolName, children: subagentEntryFocused ? "> ↳ " : "  ↳ " }), _jsxs(Text, { color: subagentEntryFocused ? palette.accent : palette.muted, children: [subagentMembers.length, " subagent", subagentMembers.length === 1 ? "" : "s", " \u00B7 ", subagentSummary(subagentMembers), " \u00B7 "] }), _jsx(Text, { color: palette.accent, children: subagentEntryFocused ? "Enter open · Esc back" : "↓ to inspect traces" })] })), !isExiting && (_jsx(Box, { flexShrink: 0, children: _jsx(FooterBar, { data: buildFooterData({ mode: permissionMode, goalLine }) }) }))] }) }));
+                        }, disabled: !!pendingPlan || !!pendingApproval || !!pendingQuestion || !!pendingFeedback || !!statsPanel || subagentEntryFocused, cursorResetEpoch: cursorResetEpoch, draftText: composerDraft?.text, draftEpoch: composerDraft?.epoch, onDraftApplied: clearComposerDraft, skillRegistry: externalSessionBound ? undefined : safeSkillRegistry, localSlashCommands: externalSessionBound ? [] : [...INK_LOCAL_SLASH_COMMANDS], allowedSlashCommands: unsupportedExternalSessionBound ? GROK_LOCAL_SLASH_COMMANDS : undefined, allowWorkspaceMentions: !unsupportedExternalSessionBound, allowImageAttachments: !externalSessionBound, terminalColumns: mainWidth, cwd: args.cwd, sessionFile: currentSessionFile(), nextImageLabelStart: nextImageDisplayLabelStartRef.current }) })), !isExiting && !pickerMode && !statsPanel && !pendingPlan && !pendingApproval && !pendingQuestion && !pendingFeedback && subagentMembers.length > 0 && (_jsxs(Box, { paddingX: 1, flexShrink: 0, children: [_jsx(Text, { bold: subagentEntryFocused, color: subagentEntryFocused ? palette.accent : palette.toolName, children: subagentEntryFocused ? "> ↳ " : "  ↳ " }), _jsxs(Text, { color: subagentEntryFocused ? palette.accent : palette.muted, children: [subagentMembers.length, " subagent", subagentMembers.length === 1 ? "" : "s", " \u00B7 ", subagentSummary(subagentMembers), " \u00B7 "] }), _jsx(Text, { color: palette.accent, children: subagentEntryFocused ? "Enter open · Esc back" : "↓ to inspect traces" })] })), !isExiting && (_jsx(Box, { flexShrink: 0, children: _jsx(FooterBar, { data: buildFooterData({
+                            mode: permissionMode,
+                            goalLine: externalSessionBound ? undefined : goalLine,
+                            runtimeLabel: externalSessionBound
+                                ? (grokSessionBound
+                                    ? `Grok Subscription${externalRuntimeBinding?.modelId ? ` · ${externalRuntimeBinding.modelId}` : ""}${externalRuntimeBinding?.reasoningEffort && externalRuntimeBinding.reasoningEffort !== "off" ? ` · ${externalRuntimeBinding.reasoningEffort}` : ""} · workspace`
+                                    : "Unsupported external runtime · recovery-only")
+                                : undefined,
+                        }) }) }))] }) }));
 }
-function buildCommandPaletteItems(skillRegistry) {
+function buildCommandPaletteItems(skillRegistry, grokSessionBound = false) {
     const items = new Map();
     const add = (item) => {
         const key = `${item.action ?? "command"}:${item.value}`;
         if (!items.has(key))
             items.set(key, item);
     };
-    for (const command of INK_LOCAL_SLASH_COMMANDS) {
-        add({
-            label: `/${command.name}`,
-            detail: command.description,
-            value: command.name,
-            command: `/${command.name}`,
-        });
+    if (!grokSessionBound) {
+        for (const command of INK_LOCAL_SLASH_COMMANDS) {
+            add({
+                label: `/${command.name}`,
+                detail: command.description,
+                value: command.name,
+                command: `/${command.name}`,
+            });
+        }
     }
     for (const command of slashRegistry.list()) {
+        if (grokSessionBound && !isGrokLocalSlashCommand(command.name))
+            continue;
         const source = command.source === "mcp" ? " :mcp" : "";
         const sourceLabel = command.sourceLabel ? `[${command.sourceLabel}] ` : "";
         add({
@@ -1838,14 +2252,16 @@ function buildCommandPaletteItems(skillRegistry) {
             command: `/${command.name}`,
         });
     }
-    for (const skill of skillRegistry.summaries()) {
-        add({
-            label: `/${skill.name} :skill`,
-            detail: `[${skill.source}] ${skill.description}`,
-            value: skill.name,
-            command: `/${skill.name}`,
-            action: "insert-skill",
-        });
+    if (!grokSessionBound) {
+        for (const skill of skillRegistry.summaries()) {
+            add({
+                label: `/${skill.name} :skill`,
+                detail: `[${skill.source}] ${skill.description}`,
+                value: skill.name,
+                command: `/${skill.name}`,
+                action: "insert-skill",
+            });
+        }
     }
     return [...items.values()];
 }