@bubblebrain-ai/bubble 0.0.1 → 0.0.2

package/dist/tui/run.js

@@ -1,6 +1,7 @@
 import { BoxRenderable, CodeRenderable, createCliRenderer, DiffRenderable, getTreeSitterClient, MarkdownRenderable, LineNumberRenderable, StyledText, RGBA, fg, bg, bold, dim, TextAttributes, TextRenderable, } from "@opentui/core";
-import { createComponent, createElement, insert, render, spread, useKeyboard, useTerminalDimensions, } from "@opentui/solid";
+import { createComponent, createElement, insert, render, spread, useKeyboard, useRenderer, useSelectionHandler, useTerminalDimensions, } from "@opentui/solid";
 import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { AgentAbortError } from "../agent.js";
 import { BUILTIN_PROVIDERS, decodeModel, displayModel, isUserVisibleProvider } from "../provider-registry.js";
 import { listBuiltinModels } from "../model-catalog.js";
 import { calculateUsageCost } from "../model-pricing.js";
@@ -12,14 +13,17 @@ import { sidebarMcpRowsFromStates, renderMcpRowMarker } from "./sidebar-mcp.js";
 import { expandAtMentions, filterFileSuggestions, findAtContext, listProjectFiles } from "./file-mentions.js";
 import { compactDisplayMessages } from "./display-history.js";
 import { createMarkdownSyntaxStyle, createSubtleMarkdownSyntaxStyle } from "./markdown-theme.js";
-import { getNextPermissionMode } from "../permission/mode.js";
+import { getNextPermissionMode, PERMISSION_MODE_INFO } from "../permission/mode.js";
 import { getContextBudget } from "../context/budget.js";
 import { getLspService } from "../lsp/index.js";
 import { inferBashPrefix } from "../approval/session-cache.js";
 import { createFrames } from "./opencode-spinner.js";
+import { copyTextToClipboard } from "./clipboard.js";
 import { readGitSidebarState } from "./sidebar-state.js";
 import { isModeCycleKeyEvent, isModeCycleSequence, isModifiedEnterSequence, PROMPT_TEXTAREA_KEYBINDINGS, } from "./prompt-keybindings.js";
+import { keyNameFromEvent, keyNameFromSequence } from "./global-key-router.js";
 const treeSitterClient = getTreeSitterClient();
+const PROMPT_HISTORY_LIMIT = 100;
 const PROVIDER_PRIORITY = new Map([
     ["openai", 0],
     ["deepseek", 1],
@@ -104,7 +108,7 @@ const HOME_LOGO = [
 ];
 const HOME_TIPS = [
     "Type @ followed by a filename to attach file context",
-    "Press Tab to cycle Build and Plan modes",
+    "Press Shift+Tab to cycle Build, Plan, and Bypass modes",
     "Type / or press Ctrl+P to open commands",
     "Use /compact to summarize long sessions near context limits",
     "Shift+Enter or Ctrl+J inserts a newline in your prompt",
@@ -158,8 +162,8 @@ export async function runTui(agent, args, options = {}) {
         let renderer;
         let syntaxStyle;
         let subtleSyntaxStyle;
-        let rawModeCycleHandler;
-        let rawQuestionHandler;
+        let rawGlobalKeyHandler;
+        let rawMouseSelectionHandler;
         const exit = () => {
             try {
                 renderer?.destroy();
@@ -181,20 +185,29 @@ export async function runTui(agent, args, options = {}) {
                 exitOnCtrlC: false,
                 useKittyKeyboard: {},
                 prependInputHandlers: [
-                    (sequence) => rawQuestionHandler?.(sequence) || rawModeCycleHandler?.(sequence) || false,
+                    (sequence) => rawGlobalKeyHandler?.(sequence) || false,
                 ],
                 autoFocus: true,
                 useMouse: true,
                 openConsoleOnError: false,
                 backgroundColor: theme.background,
             });
-            const setRawModeCycleHandler = (handler) => {
-                rawModeCycleHandler = handler;
+            const setRawGlobalKeyHandler = (handler) => {
+                rawGlobalKeyHandler = handler;
             };
-            const setRawQuestionHandler = (handler) => {
-                rawQuestionHandler = handler;
+            const setRawMouseSelectionHandler = (handler) => {
+                rawMouseSelectionHandler = handler;
             };
-            await render(() => h(OpenTuiApp, { agent, args, options, onExit: exit, syntaxStyle, subtleSyntaxStyle, setRawModeCycleHandler, setRawQuestionHandler }), renderer);
+            const processSingleMouseEvent = renderer.processSingleMouseEvent;
+            if (typeof processSingleMouseEvent === "function") {
+                renderer.processSingleMouseEvent = (event) => {
+                    const handled = processSingleMouseEvent.call(renderer, event);
+                    if (handled)
+                        rawMouseSelectionHandler?.(event);
+                    return handled;
+                };
+            }
+            await render(() => h(OpenTuiApp, { agent, args, options, onExit: exit, syntaxStyle, subtleSyntaxStyle, setRawGlobalKeyHandler, setRawMouseSelectionHandler }), renderer);
         }
         catch (error) {
             syntaxStyle?.destroy();
@@ -223,6 +236,7 @@ function isColorValue(value) {
         || value === "none";
 }
 function OpenTuiApp(props) {
+    const renderer = useRenderer();
     const dimensions = useTerminalDimensions();
     const registry = props.options.registry;
     const skills = props.options.skillRegistry;
@@ -245,13 +259,24 @@ function OpenTuiApp(props) {
     const homeTip = HOME_TIPS[Math.floor(Math.random() * HOME_TIPS.length)] ?? HOME_TIPS[0];
     const homePrompt = HOME_PROMPTS[Math.floor(Math.random() * HOME_PROMPTS.length)] ?? HOME_PROMPTS[0];
     let promptText = "";
+    let promptHistory = displayMessages
+        .filter((message) => message.role === "user" && message.content !== "(multimedia)")
+        .map((message) => message.content)
+        .slice(-PROMPT_HISTORY_LIMIT);
+    let promptHistoryIndex;
+    let promptHistoryDraft = "";
     const [isRunning, setIsRunning] = createSignal(false);
+    let activeRun;
+    let nextRunId = 0;
     const [showThinking, setShowThinking] = createSignal(true);
     let streamingDisplay;
     let sidebarLspSyncTimer;
     const [todos, setTodos] = createSignal(props.agent.getTodos());
     const [mode, setMode] = createSignal(props.agent.mode);
     const [notice, setNotice] = createSignal("");
+    let copyToastClearTimer;
+    let copyToastRoot;
+    let copyToastText;
     const [sessionActive, setSessionActive] = createSignal(false);
     const [sidebarTick, setSidebarTick] = createSignal(0);
     // Sidebar MCP section collapsed state. Persisted across sidebarTick bumps,
@@ -260,6 +285,7 @@ function OpenTuiApp(props) {
     const lspService = props.options.lspService ?? getLspService(props.args.cwd, props.options.settingsManager?.getMerged().lsp);
     const [lspStatuses, setLspStatuses] = createSignal(lspService.status());
     const [sidebarUsage, setSidebarUsage] = createSignal({
+        contextTokens: 0,
         promptTokens: 0,
         completionTokens: 0,
         promptCacheHitTokens: 0,
@@ -282,6 +308,8 @@ function OpenTuiApp(props) {
     let homePromptRef;
     let sessionPromptRef;
     let scrollbox;
+    let transcriptScrollFollowing = true;
+    let transcriptScrollInitialized = false;
     let rootBox;
     let sidebarShell;
     let transcriptHost;
@@ -367,15 +395,211 @@ function OpenTuiApp(props) {
     const activePrompt = () => isHomeSurfaceActive()
         ? homePromptRef ?? sessionPromptRef
         : sessionPromptRef ?? homePromptRef;
+    function setPromptText(value) {
+        promptText = value;
+        const prompt = activePrompt();
+        if (!prompt)
+            return;
+        prompt.setText(value);
+        prompt.cursorOffset = value.length;
+        prompt.focus();
+    }
+    function resetPromptHistoryBrowse() {
+        promptHistoryIndex = undefined;
+        promptHistoryDraft = "";
+    }
+    function rememberPromptHistory(input) {
+        const value = input.trimEnd();
+        if (!value.trim())
+            return;
+        promptHistory.push(value);
+        if (promptHistory.length > PROMPT_HISTORY_LIMIT) {
+            promptHistory = promptHistory.slice(-PROMPT_HISTORY_LIMIT);
+        }
+        resetPromptHistoryBrowse();
+    }
+    function canBrowsePromptHistory(direction) {
+        if (promptHistoryIndex !== undefined)
+            return true;
+        const prompt = activePrompt();
+        const text = prompt?.plainText ?? promptText;
+        if (!text)
+            return true;
+        const cursor = prompt?.logicalCursor;
+        if (!cursor)
+            return true;
+        if (direction === "up")
+            return cursor.row === 0;
+        return cursor.row >= text.split("\n").length - 1;
+    }
+    function browsePromptHistory(direction) {
+        if (!promptHistory.length)
+            return false;
+        if (!canBrowsePromptHistory(direction))
+            return false;
+        if (direction === "up") {
+            if (promptHistoryIndex === undefined) {
+                promptHistoryDraft = readPromptText() || promptText;
+                promptHistoryIndex = promptHistory.length - 1;
+            }
+            else {
+                promptHistoryIndex = Math.max(0, promptHistoryIndex - 1);
+            }
+            setPromptText(promptHistory[promptHistoryIndex] ?? "");
+            return true;
+        }
+        if (promptHistoryIndex === undefined)
+            return false;
+        if (promptHistoryIndex < promptHistory.length - 1) {
+            promptHistoryIndex += 1;
+            setPromptText(promptHistory[promptHistoryIndex] ?? "");
+        }
+        else {
+            setPromptText(promptHistoryDraft);
+            resetPromptHistoryBrowse();
+        }
+        return true;
+    }
+    function handlePromptHistoryKey(event) {
+        if (event.shift || event.ctrl || event.meta || event.super || event.hyper)
+            return false;
+        const name = keyNameFromEvent(event);
+        if (name !== "up" && name !== "down")
+            return false;
+        if (!browsePromptHistory(name))
+            return false;
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        return true;
+    }
+    function blurInputsForModal() {
+        homePromptRef?.blur();
+        sessionPromptRef?.blur();
+        questionCustomInput?.blur();
+        providerDialogInput?.blur();
+    }
+    function focusApprovalPanel() {
+        setTimeout(() => {
+            if (pendingApproval() || pendingPlan())
+                approvalRoot?.focus();
+        }, 0);
+    }
+    function focusQuestionPanel() {
+        setTimeout(() => {
+            const state = pendingQuestion();
+            if (!state || state.editing)
+                return;
+            questionRoot?.focus();
+        }, 0);
+    }
+    function restorePromptAfterModal() {
+        setTimeout(() => {
+            if (!activeModalKeyOwner())
+                activePrompt()?.focus();
+        }, 0);
+    }
     const activeComposerShell = () => isHomeSurfaceActive()
         ? homeComposerShell ?? sessionComposerShell
         : sessionComposerShell ?? homeComposerShell;
     onCleanup(() => {
         uiDisposed = true;
+        if (copyToastClearTimer)
+            clearTimeout(copyToastClearTimer);
         promptModeLabels.clear();
         promptModelLabels.clear();
         footerModeBadge = undefined;
     });
+    function showCopyToast(toast, ttl = 2200) {
+        if (copyToastClearTimer)
+            clearTimeout(copyToastClearTimer);
+        const sidebarOffset = sidebarVisible() ? SESSION_SIDEBAR_WIDTH : 0;
+        const mainAreaWidth = Math.max(20, dimensions().width - sidebarOffset - 4);
+        const color = toast.variant === "success"
+            ? theme.success
+            : toast.variant === "error"
+                ? theme.error
+                : toast.variant === "warning"
+                    ? theme.warning
+                    : theme.info;
+        const width = Math.max(24, Math.min(60, Math.min(mainAreaWidth, toast.message.length + 6)));
+        if (copyToastRoot) {
+            copyToastRoot.visible = true;
+            copyToastRoot.width = width;
+            copyToastRoot.right = sidebarOffset + 2;
+            copyToastRoot.borderColor = color;
+        }
+        if (copyToastText) {
+            copyToastText.fg = theme.text;
+            safeSetText(copyToastText, toast.message);
+        }
+        renderer.requestRender();
+        copyToastClearTimer = setTimeout(() => {
+            if (copyToastRoot)
+                copyToastRoot.visible = false;
+            renderer.requestRender();
+            copyToastClearTimer = undefined;
+        }, ttl);
+    }
+    async function copySelectionText(text) {
+        const now = Date.now();
+        if (!text.trim())
+            return;
+        if (text === lastCopiedSelection && now - lastCopiedSelectionAt < 350)
+            return;
+        const serial = ++selectionCopySerial;
+        let copied = false;
+        try {
+            await copyTextToClipboard(text);
+            copied = true;
+        }
+        catch {
+            try {
+                copied = renderer.copyToClipboardOSC52(text);
+            }
+            catch {
+                copied = false;
+            }
+        }
+        if (serial !== selectionCopySerial)
+            return;
+        if (copied) {
+            lastCopiedSelection = text;
+            lastCopiedSelectionAt = Date.now();
+            showCopyToast({ message: "Copied to clipboard", variant: "info" });
+        }
+        else {
+            showCopyToast({ message: "Failed to copy selection", variant: "error" }, 3000);
+        }
+    }
+    function isInsideRenderable(renderable, container) {
+        if (!container)
+            return false;
+        let current = renderable;
+        while (current) {
+            if (current === container)
+                return true;
+            current = current.parent;
+        }
+        return false;
+    }
+    function getOpenTuiSelectionText(selection) {
+        const selectedRenderables = Array.isArray(selection?.selectedRenderables)
+            ? [...selection.selectedRenderables]
+            : undefined;
+        if (!selectedRenderables?.length) {
+            return typeof selection?.getSelectedText === "function" ? selection.getSelectedText() : "";
+        }
+        return selectedRenderables
+            .filter((renderable) => !renderable.isDestroyed && !isInsideRenderable(renderable, sidebarShell))
+            .sort((a, b) => {
+            if (a.y !== b.y)
+                return a.y - b.y;
+            return a.x - b.x;
+        })
+            .map((renderable) => typeof renderable.getSelectedText === "function" ? renderable.getSelectedText() : "")
+            .filter(Boolean)
+            .join("\n");
+    }
     const readPromptText = () => {
         try {
             return activePrompt()?.plainText ?? "";
@@ -422,10 +646,13 @@ function OpenTuiApp(props) {
         setSidebarText(sidebarTokenText, `${formatCompactNumber(context.tokens)} tokens`);
         setSidebarText(sidebarPercentText, `${context.percent}% used`);
         if (sidebarGaugeText) {
-            sidebarGaugeText.content = buildColoredGauge(context.percent, 30);
+            sidebarGaugeText.content = buildContextGauge(context.percent, 30);
+            sidebarGaugeText.requestRender();
         }
         if (sidebarGaugeLabelText) {
-            sidebarGaugeLabelText.content = buildGaugeLabel(context.percent);
+            sidebarGaugeLabelText.content = buildGaugeLabel(context.percent, context.remainingTokens);
+            sidebarGaugeLabelText.fg = context.percent >= 80 ? theme.error : context.percent >= 60 ? theme.warning : theme.success;
+            sidebarGaugeLabelText.requestRender();
         }
         setSidebarText(sidebarUsageText, context.turns > 0
             ? `${formatCompactNumber(context.promptTokens)} in · ${formatCompactNumber(context.completionTokens)} out`
@@ -517,7 +744,7 @@ function OpenTuiApp(props) {
     }
     const promptModeTitle = () => mode() === "plan" ? "Plan" : "Build";
     const promptModeBadge = () => promptModeBadgeContent(mode());
-    const footerModeText = () => mode() !== "default" ? `  ${mode()} · tab` : "";
+    const footerModeText = () => footerPermissionModeText(mode());
     function syncModeChrome() {
         if (uiDisposed)
             return;
@@ -525,8 +752,11 @@ function OpenTuiApp(props) {
             if (!safeSetText(label, promptModeBadge()))
                 promptModeLabels.delete(label);
         }
-        if (footerModeBadge && !safeSetText(footerModeBadge, footerModeText()))
-            footerModeBadge = undefined;
+        if (footerModeBadge) {
+            footerModeBadge.fg = permissionModeColor(mode());
+            if (!safeSetText(footerModeBadge, footerModeText()))
+                footerModeBadge = undefined;
+        }
         safeRequestRender(homeComposerShell);
         safeRequestRender(sessionComposerShell);
         safeRequestRender(rootBox);
@@ -567,10 +797,10 @@ function OpenTuiApp(props) {
     const cycleMode = () => {
         if (picker || pendingPlan())
             return false;
-        const next = getNextPermissionMode(props.agent.mode, { bypassEnabled: props.options.bypassEnabled });
+        const next = getNextPermissionMode(props.agent.mode);
         props.agent.setMode(next);
         setMode(next);
-        setNotice(`Mode: ${next === "plan" ? "Plan" : "Build"}`);
+        setNotice(`Mode: ${permissionModeBadgeLabel(next)}`);
         redrawDock();
         syncPromptSurfaces();
         syncModeChrome();
@@ -584,9 +814,6 @@ function OpenTuiApp(props) {
         return true;
     };
     const cycleModeFromRawSequence = (sequence) => {
-        const rawKey = keyNameFromSequence(sequence);
-        if (rawKey && handleApprovalNavigation(rawKey))
-            return true;
         if (!isModeCycleSequence(sequence))
             return false;
         return cycleMode();
@@ -599,40 +826,7 @@ function OpenTuiApp(props) {
             ? ["Allow once", "Allow always", "Reject"]
             : ["Allow once", "Reject"];
     };
-    const keyNameFromSequence = (sequence) => {
-        if (!sequence)
-            return "";
-        if (sequence === "\x1b[D" || /^\x1b\[[0-9;]*D$/.test(sequence))
-            return "left";
-        if (sequence === "\x1b[C" || /^\x1b\[[0-9;]*C$/.test(sequence))
-            return "right";
-        if (sequence === "\x1b[A" || /^\x1b\[[0-9;]*A$/.test(sequence))
-            return "up";
-        if (sequence === "\x1b[B" || /^\x1b\[[0-9;]*B$/.test(sequence))
-            return "down";
-        if (sequence === "\r" || sequence === "\n")
-            return "enter";
-        if (sequence === "\x1b")
-            return "escape";
-        return "";
-    };
-    const keyNameFromEvent = (event) => {
-        const rawName = String(event.name || event.key || event.input || "").toLowerCase();
-        if (rawName === "arrowleft" || rawName === "left_arrow")
-            return "left";
-        if (rawName === "arrowright" || rawName === "right_arrow")
-            return "right";
-        if (rawName === "arrowup" || rawName === "up_arrow")
-            return "up";
-        if (rawName === "arrowdown" || rawName === "down_arrow")
-            return "down";
-        if (rawName === "return")
-            return "enter";
-        if (rawName === "esc")
-            return "escape";
-        return rawName || keyNameFromSequence(event.raw || event.sequence);
-    };
-    const questionKeyNameFromSequence = (sequence) => {
+    const modalKeyNameFromSequence = (sequence) => {
         const name = keyNameFromSequence(sequence);
         if (name)
             return name;
@@ -652,12 +846,16 @@ function OpenTuiApp(props) {
     const rejectPendingPlan = (plan) => {
         setPendingPlan(undefined);
         setApprovalOptionIdx(0);
+        forceApprovalUI();
+        restorePromptAfterModal();
         plan.resolve({ action: "reject", reason: "Rejected by user." });
     };
     const resolvePendingPlanSelection = (plan) => {
         const sel = approvalOptionIdx();
         setPendingPlan(undefined);
         setApprovalOptionIdx(0);
+        forceApprovalUI();
+        restorePromptAfterModal();
         if (sel === 0) {
             plan.resolve({ action: "approve", plan: plan.plan });
         }
@@ -710,6 +908,7 @@ function OpenTuiApp(props) {
         setPendingApproval(undefined);
         setApprovalOptionIdx(0);
         forceApprovalUI();
+        restorePromptAfterModal();
         if (choice === "Allow once") {
             approval.resolve({ action: "approve" });
             return true;
@@ -722,7 +921,7 @@ function OpenTuiApp(props) {
         approval.resolve({ action: "reject", feedback: "Rejected by user." });
         return true;
     };
-    const handleApprovalNavigation = (name, preventOnly = false) => {
+    const handleApprovalNavigation = (name, preventOnly = false, shift = false) => {
         const approval = pendingApproval();
         if (approval) {
             const opts = approvalOptionsFor(approval.request);
@@ -734,6 +933,10 @@ function OpenTuiApp(props) {
                 moveApprovalOption(1, opts.length);
                 return true;
             }
+            if (name === "tab") {
+                moveApprovalOption(shift ? -1 : 1, opts.length);
+                return true;
+            }
             if (name === "enter") {
                 if (!preventOnly)
                     resolveApprovalSelection();
@@ -745,6 +948,7 @@ function OpenTuiApp(props) {
                     setPendingApproval(undefined);
                     setApprovalOptionIdx(0);
                     forceApprovalUI();
+                    restorePromptAfterModal();
                     approval.resolve({ action: "reject", feedback: "Rejected by user." });
                 }
                 return true;
@@ -760,6 +964,10 @@ function OpenTuiApp(props) {
                 moveApprovalOption(1, PLAN_OPTIONS.length);
                 return true;
             }
+            if (name === "tab") {
+                moveApprovalOption(shift ? -1 : 1, PLAN_OPTIONS.length);
+                return true;
+            }
             if (name === "enter") {
                 if (!preventOnly)
                     resolvePendingPlanSelection(plan);
@@ -775,7 +983,7 @@ function OpenTuiApp(props) {
     };
     const handleApprovalKey = (event) => {
         const name = keyNameFromEvent(event);
-        if (handleApprovalNavigation(name)) {
+        if (handleApprovalNavigation(name, false, !!event.shift)) {
             event.preventDefault?.();
             event.stopPropagation?.();
             return true;
@@ -787,6 +995,8 @@ function OpenTuiApp(props) {
         const plan = pendingPlan();
         syncPromptSurfaces();
         const prompt = activePrompt();
+        if (approval || plan)
+            blurInputsForModal();
         if (prompt) {
             if (approval) {
                 const options = approvalOptionsFor(approval.request);
@@ -803,6 +1013,8 @@ function OpenTuiApp(props) {
         }
         redrawDock();
         redrawApprovalPanel();
+        if (approval || plan)
+            focusApprovalPanel();
         redrawTranscript();
     };
     function questionStateFromRequest(request) {
@@ -851,15 +1063,67 @@ function OpenTuiApp(props) {
             questionSyncTimers.add(timer);
         }
     }
+    function transcriptMaxScrollTop() {
+        if (!scrollbox)
+            return 0;
+        return Math.max(0, scrollbox.scrollHeight - scrollbox.viewport.height);
+    }
+    function isTranscriptAtBottom() {
+        if (!scrollbox)
+            return true;
+        return scrollbox.scrollTop >= transcriptMaxScrollTop() - 1;
+    }
+    function updateTranscriptScrollFollowingFromPosition() {
+        if (!scrollbox)
+            return;
+        transcriptScrollFollowing = isTranscriptAtBottom();
+        transcriptScrollInitialized = true;
+    }
+    function shouldFollowTranscriptBeforeUpdate() {
+        if (!scrollbox)
+            return transcriptScrollFollowing;
+        if (!transcriptScrollInitialized)
+            return true;
+        transcriptScrollFollowing = isTranscriptAtBottom();
+        return transcriptScrollFollowing;
+    }
+    function scrollTranscriptToBottom() {
+        if (!scrollbox)
+            return;
+        scrollbox.scrollTo(scrollbox.scrollHeight);
+        transcriptScrollFollowing = true;
+        transcriptScrollInitialized = true;
+    }
+    function scheduleTranscriptScrollAfterUpdate(shouldFollow, delay = 50) {
+        setTimeout(() => {
+            if (!scrollbox)
+                return;
+            if (shouldFollow && transcriptScrollFollowing) {
+                scrollTranscriptToBottom();
+            }
+            else {
+                updateTranscriptScrollFollowingFromPosition();
+            }
+        }, delay);
+    }
+    function handleTranscriptMouseScroll() {
+        setTimeout(updateTranscriptScrollFollowingFromPosition, 0);
+    }
     function syncQuestionUI(focusCustom = false) {
         redrawQuestionPanel();
         syncPromptSurfaces();
+        const question = pendingQuestion();
+        if (question)
+            blurInputsForModal();
         redrawDock();
         rootBox?.requestRender();
         scrollbox?.requestRender();
         if (focusCustom) {
             setTimeout(() => questionCustomInput?.focus(), 0);
         }
+        else if (question) {
+            focusQuestionPanel();
+        }
     }
     function updateQuestionState(updater, focusCustom = false) {
         setPendingQuestion((current) => current ? updater(current) : undefined);
@@ -1095,17 +1359,49 @@ function OpenTuiApp(props) {
         }
         return false;
     }
-    function handleQuestionRawSequence(sequence) {
-        const state = pendingQuestion();
-        if (!state || pendingApproval())
+    function activeModalKeyOwner() {
+        if (pendingApproval() || pendingPlan())
+            return "approval";
+        if (pendingQuestion())
+            return "question";
+        if (providerDialog)
+            return "provider";
+        if (picker)
+            return "picker";
+        return undefined;
+    }
+    function routeModalKey(event) {
+        const owner = activeModalKeyOwner();
+        if (!owner)
             return false;
-        const name = questionKeyNameFromSequence(sequence);
-        if (!name)
+        switch (owner) {
+            case "approval":
+                return handleApprovalKey(event);
+            case "question":
+                return handleQuestionKey(event);
+            case "provider":
+                return handleProviderDialogKey(event);
+            case "picker":
+                return handlePickerKey(event);
+        }
+    }
+    function shouldModalSwallowUnhandledKey(owner) {
+        if (owner === "approval")
+            return true;
+        if (owner === "question") {
+            const state = pendingQuestion();
+            return !state?.editing || isQuestionConfirmTab(state);
+        }
+        return false;
+    }
+    function routeModalRawSequence(sequence) {
+        const owner = activeModalKeyOwner();
+        if (!owner)
             return false;
-        if (state.editing && !isQuestionConfirmTab(state) && name !== "escape" && name !== "enter") {
+        const name = modalKeyNameFromSequence(sequence);
+        if (!name)
             return false;
-        }
-        return handleQuestionKey({
+        const handled = routeModalKey({
             name,
             key: name,
             input: sequence,
@@ -1115,11 +1411,13 @@ function OpenTuiApp(props) {
             preventDefault() { },
             stopPropagation() { },
         });
+        return handled || shouldModalSwallowUnhandledKey(owner);
     }
     const installInteractiveHandlers = () => {
         if (props.options.planHandlerRef) {
             props.options.planHandlerRef.current = (plan) => new Promise((resolve) => {
                 setPendingPlan({ plan, resolve });
+                blurInputsForModal();
                 forceApprovalUI();
             });
         }
@@ -1129,6 +1427,7 @@ function OpenTuiApp(props) {
                 picker = undefined;
                 providerDialog = undefined;
                 setPendingApproval({ request, resolve });
+                blurInputsForModal();
                 forceApprovalUI();
             });
         }
@@ -1162,8 +1461,7 @@ function OpenTuiApp(props) {
             onCleanup(unsubscribeQuestion);
             syncFirstPendingQuestion();
         }
-        props.setRawModeCycleHandler?.(cycleModeFromRawSequence);
-        props.setRawQuestionHandler?.(handleQuestionRawSequence);
+        props.setRawGlobalKeyHandler?.(routeGlobalRawSequence);
         const unsubscribeLsp = lspService.onStatusChange(() => {
             syncSidebarLsp();
         });
@@ -1172,12 +1470,11 @@ function OpenTuiApp(props) {
         refreshGitSidebar();
         setTimeout(() => {
             activePrompt()?.focus();
-            scrollbox?.scrollTo(scrollbox.scrollHeight);
+            scrollTranscriptToBottom();
         }, 25);
     });
     onCleanup(() => {
-        props.setRawModeCycleHandler?.(undefined);
-        props.setRawQuestionHandler?.(undefined);
+        props.setRawGlobalKeyHandler?.(undefined);
         if (sidebarLspSyncTimer)
             clearInterval(sidebarLspSyncTimer);
         for (const timer of questionSyncTimers)
@@ -1189,66 +1486,38 @@ function OpenTuiApp(props) {
         if (props.options.approvalHandlerRef)
             props.options.approvalHandlerRef.current = undefined;
     });
-    useKeyboard((event) => {
-        const name = String(event.name || "").toLowerCase();
-        if (event.ctrl && name === "c") {
-            void requestExit();
-            return;
-        }
-        // Ctrl+Shift+M opens the MCP reconnect picker. Shift is required because
-        // bare Ctrl+M is Enter on most terminals (historical TTY mapping).
-        if (event.ctrl && event.shift && name === "m") {
-            openMcpReconnectPicker();
-            event.preventDefault?.();
-            return;
-        }
-        if (handleApprovalKey(event))
-            return;
-        if (handleQuestionKey(event))
+    let lastCopiedSelection = "";
+    let lastCopiedSelectionAt = 0;
+    let selectionCopySerial = 0;
+    let rawSelectionStart;
+    useSelectionHandler((selection) => {
+        if (selection.isDragging)
             return;
-        if (handleProviderDialogKey(event))
-            return;
-        if (handlePickerKey(event))
+        const selectedText = getOpenTuiSelectionText(selection);
+        void copySelectionText(selectedText);
+    });
+    function handleRawMouseSelection(event) {
+        if (event.button !== 0)
             return;
-        const plan = pendingPlan();
-        if (plan) {
-            if (name === "left" || name === "right" || name === "h" || name === "l") {
-                const opts = PLAN_OPTIONS;
-                const idx = approvalOptionIdx();
-                const next = name === "left" || name === "h"
-                    ? (idx - 1 + opts.length) % opts.length
-                    : (idx + 1) % opts.length;
-                setApprovalOptionIdx(next);
-                forceApprovalUI();
-                event.preventDefault?.();
-                return;
-            }
-            if (name === "return" || name === "enter") {
-                const sel = approvalOptionIdx();
-                setPendingPlan(undefined);
-                setApprovalOptionIdx(0);
-                if (sel === 0) {
-                    plan.resolve({ action: "approve", plan: plan.plan });
-                }
-                else {
-                    plan.resolve({ action: "reject", reason: "Rejected by user." });
-                }
-            }
-            if (name === "escape") {
-                setPendingPlan(undefined);
-                setApprovalOptionIdx(0);
-                plan.resolve({ action: "reject", reason: "Rejected by user." });
-            }
-            event.preventDefault?.();
+        if (event.type === "down") {
+            rawSelectionStart = { x: event.x, y: event.y };
             return;
         }
-        if (cycleModeFromKey(event))
+        if (event.type !== "up")
             return;
-        if (event.ctrl && name === "p" && !picker && !isRunning()) {
-            openCommandPalette();
-            event.preventDefault?.();
+        const start = rawSelectionStart;
+        rawSelectionStart = undefined;
+        if (!start || (start.x === event.x && start.y === event.y))
             return;
-        }
+        const selection = renderer.getSelection();
+        if (!selection || selection.isDragging)
+            return;
+        void copySelectionText(getOpenTuiSelectionText(selection));
+    }
+    props.setRawMouseSelectionHandler?.(handleRawMouseSelection);
+    onCleanup(() => props.setRawMouseSelectionHandler?.(undefined));
+    useKeyboard((event) => {
+        routeGlobalKeyEvent(event);
     }, {});
     function currentTranscriptMessages(extra) {
         return compactDisplayMessages(extra ? [...displayMessages, extra] : displayMessages);
@@ -1298,6 +1567,74 @@ function OpenTuiApp(props) {
             // Keep the agent loop alive even if a renderable is already gone.
         }
     }
+    function beginAgentRun() {
+        const run = { id: ++nextRunId, abortController: new AbortController() };
+        activeRun = run;
+        setRunningState(true);
+        return run;
+    }
+    function finishAgentRun(run) {
+        if (activeRun?.id === run.id)
+            activeRun = undefined;
+        setRunningState(false);
+    }
+    function cancelActiveAgentRun() {
+        if (!activeRun || activeRun.abortController.signal.aborted)
+            return false;
+        activeRun.abortController.abort(new AgentAbortError("Agent run cancelled by user."));
+        setNotice("Agent run cancelled");
+        redrawDock();
+        return true;
+    }
+    function preventGlobalKey(event) {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+    }
+    function routeRunningCancel(name, event) {
+        if (name !== "escape")
+            return false;
+        if (!cancelActiveAgentRun())
+            return false;
+        if (event)
+            preventGlobalKey(event);
+        return true;
+    }
+    function routeGlobalRawSequence(sequence) {
+        const name = keyNameFromSequence(sequence);
+        if (routeRunningCancel(name))
+            return true;
+        if (routeModalRawSequence(sequence))
+            return true;
+        if (cycleModeFromRawSequence(sequence))
+            return true;
+        return false;
+    }
+    function routeGlobalKeyEvent(event) {
+        const name = keyNameFromEvent(event);
+        if (event.ctrl && name === "c") {
+            void requestExit();
+            return true;
+        }
+        if (routeRunningCancel(name, event))
+            return true;
+        // Ctrl+Shift+M opens the MCP reconnect picker. Shift is required because
+        // bare Ctrl+M is Enter on most terminals (historical TTY mapping).
+        if (event.ctrl && event.shift && name === "m") {
+            openMcpReconnectPicker();
+            event.preventDefault?.();
+            return true;
+        }
+        if (routeModalKey(event))
+            return true;
+        if (cycleModeFromKey(event))
+            return true;
+        if (event.ctrl && name === "p" && !picker && !isRunning()) {
+            openCommandPalette();
+            event.preventDefault?.();
+            return true;
+        }
+        return false;
+    }
     function transcriptOptions() {
         return {
             cwd: props.args.cwd,
@@ -1371,28 +1708,22 @@ function OpenTuiApp(props) {
         }, PROMPT_SCANNER_INTERVAL_MS);
     }
     function redrawTranscript(extra, baseMessages = displayMessages) {
+        const shouldFollow = shouldFollowTranscriptBeforeUpdate();
         streamingDisplay = extra;
         const nextMessages = compactDisplayMessages(extra ? [...baseMessages, extra] : baseMessages);
         syncSessionMessages(nextMessages);
         rootBox?.requestRender();
         scrollbox?.requestRender();
-        setTimeout(() => {
-            if (!scrollbox)
-                return;
-            if (nextMessages.length <= 3) {
-                scrollbox.scrollTo(0);
-                return;
-            }
-            scrollbox.scrollTo(scrollbox.scrollHeight);
-        }, 50);
+        scheduleTranscriptScrollAfterUpdate(shouldFollow);
     }
     createEffect(() => {
+        const shouldFollow = shouldFollowTranscriptBeforeUpdate();
         dimensions();
         sessionActive();
         syncSidebarChrome();
         redrawQuestionPanel();
         scrollbox?.requestRender();
-        setTimeout(() => scrollbox?.scrollTo(scrollbox.scrollHeight), 50);
+        scheduleTranscriptScrollAfterUpdate(shouldFollow);
     });
     function redrawDock() {
         if (dock) {
@@ -1479,6 +1810,8 @@ function OpenTuiApp(props) {
             return buildProviderConnectItems();
         if (step === "auth")
             return providerId ? buildPickerItems("provider-auth", providerId) : [];
+        if (step === "skills")
+            return buildSkillItems();
         if (step === "models") {
             const modelItems = buildPickerItems("model", providerId);
             if (modelItems.length || providerId)
@@ -1634,17 +1967,19 @@ function OpenTuiApp(props) {
                     gutter.fg = active ? activeText : providerDialogGutterColor(row.item.gutter ?? (isCurrentModelItem(row.item) ? "●" : undefined));
                 }
                 if (label) {
-                    label.content = truncate(row.item.label, 37);
+                    label.content = truncate(row.item.label, providerDialogLabelWidth(state));
                     label.fg = active ? activeText : isCurrentModelItem(row.item) ? theme.primary : theme.text;
                 }
                 if (detail) {
                     const detailText = state.query.trim() && state.step === "models"
                         ? row.item.category ?? row.item.detail ?? ""
                         : row.item.detail ?? "";
-                    detail.content = truncate(detailText, providerDialogDetailWidth());
+                    detail.width = providerDialogDetailWidth(state);
+                    detail.content = truncate(detailText, providerDialogDetailWidth(state));
                     detail.fg = active ? activeText : theme.textMuted;
                 }
                 if (footer) {
+                    footer.width = providerDialogFooterWidth(state);
                     footer.content = row.item.footer ?? "";
                     footer.fg = active ? activeText : theme.textMuted;
                 }
@@ -1659,6 +1994,8 @@ function OpenTuiApp(props) {
     function providerDialogTitleFor(state) {
         if (state.step === "providers")
             return "Connect a provider";
+        if (state.step === "skills")
+            return "Select skill";
         const provider = providerDisplayName(state.providerId);
         if (state.step === "auth")
             return `${provider} auth method`;
@@ -1677,6 +2014,8 @@ function OpenTuiApp(props) {
             const connect = state.providerId ? "" : " · ctrl+o providers";
             return `↑/↓ move · enter select · esc close${connect}${count}`;
         }
+        if (state.step === "skills")
+            return `↑/↓ move · enter insert · esc close${count}`;
         const escLabel = state.step === "providers" ? "esc close" : "esc back";
         return `↑/↓ move · enter select · ${escLabel}${count}`;
     }
@@ -1689,8 +2028,14 @@ function OpenTuiApp(props) {
             return theme.warning;
         return theme.textMuted;
     }
-    function providerDialogDetailWidth() {
-        return 16;
+    function providerDialogLabelWidth(state) {
+        return state.step === "skills" ? 22 : 37;
+    }
+    function providerDialogDetailWidth(state) {
+        return state.step === "skills" ? 26 : 16;
+    }
+    function providerDialogFooterWidth(state) {
+        return state.step === "skills" ? 9 : 8;
     }
     function isCurrentModelItem(item) {
         return item.value === props.agent.model || item.detail?.includes("current");
@@ -1755,7 +2100,7 @@ function OpenTuiApp(props) {
             else if (state.step === "key") {
                 openProviderDialog(state.providerId && registry.supportsOAuth(state.providerId) ? "auth" : "providers", state.providerId);
             }
-            else if (state.step === "models") {
+            else if (state.step === "models" || state.step === "skills") {
                 closeProviderDialog();
             }
             else {
@@ -1885,6 +2230,11 @@ function OpenTuiApp(props) {
             }
             closeProviderDialog();
             await executeSlash(item.command);
+            return;
+        }
+        if (state.step === "skills") {
+            closeProviderDialog();
+            insertSkillPrompt(item.value);
         }
     }
     function ensureProviderConfiguredForKey(providerId) {
@@ -2262,6 +2612,8 @@ function OpenTuiApp(props) {
     const clearMessages = () => {
         displayMessages = [];
         streamingDisplay = undefined;
+        promptHistory = [];
+        resetPromptHistoryBrowse();
         redrawTranscript(undefined, []);
     };
     async function submitPrompt() {
@@ -2275,9 +2627,7 @@ function OpenTuiApp(props) {
         }
         const plan = pendingPlan();
         if (plan) {
-            setPendingPlan(undefined);
-            setApprovalOptionIdx(0);
-            plan.resolve({ action: "approve", plan: plan.plan });
+            resolvePendingPlanSelection(plan);
             return;
         }
         if (isRunning())
@@ -2294,6 +2644,7 @@ function OpenTuiApp(props) {
             return;
         activePrompt()?.clear();
         promptText = "";
+        resetPromptHistoryBrowse();
         if (picker?.kind === "key") {
             const providerId = picker.providerId;
             const after = picker.after;
@@ -2310,9 +2661,15 @@ function OpenTuiApp(props) {
         }
         if (input.startsWith("/") && !/\s/.test(input)) {
             const query = input.slice(1).toLowerCase();
-            const matches = slashRegistry.list().filter((command) => command.name.toLowerCase().startsWith(query));
+            const matches = slashCandidates().filter((command) => command.name.toLowerCase().startsWith(query));
             if (matches.length === 1) {
-                await executeSlash(`/${matches[0].name}`);
+                const match = matches[0];
+                if (match.source === "skill") {
+                    insertSkillPrompt(match.name);
+                }
+                else {
+                    await executeSlash(`/${match.name}`);
+                }
                 return;
             }
             if (matches.length > 1) {
@@ -2332,6 +2689,10 @@ function OpenTuiApp(props) {
     function onPromptContentChange(value) {
         const nextValue = typeof value === "string" ? value : readPromptText();
         promptText = nextValue;
+        if (promptHistoryIndex !== undefined
+            && nextValue !== (promptHistory[promptHistoryIndex] ?? "")) {
+            resetPromptHistoryBrowse();
+        }
         if (providerDialog)
             return;
         if (picker?.kind === "key")
@@ -2432,25 +2793,39 @@ function OpenTuiApp(props) {
         activePrompt()?.focus();
         redrawDock();
     }
-    function buildSlashItems(query = "") {
-        const normalizedQuery = query.trim().toLowerCase();
-        const commands = [
+    function slashCandidates() {
+        const skillCommands = skills.summaries().map((skill) => ({
+            name: skill.name,
+            description: skill.description,
+            source: "skill",
+            sourceLabel: skill.source,
+        }));
+        return [
             ...LOCAL_SLASH_COMMANDS.map((c) => ({ ...c, source: "builtin" })),
+            ...skillCommands,
             ...slashRegistry.list(),
         ];
+    }
+    function buildSlashItems(query = "") {
+        const normalizedQuery = query.trim().toLowerCase();
+        const commands = slashCandidates();
         const matches = slashCommandMatches(commands, normalizedQuery);
         return matches.map(({ command }) => {
             const isMcp = command.source === "mcp";
-            const badge = isMcp ? " :mcp" : "";
+            const isSkill = command.source === "skill";
+            const badge = isMcp ? " :mcp" : isSkill ? " :skill" : "";
             const label = `/${command.name}${badge}`;
             const detail = isMcp && command.sourceLabel
                 ? `[${command.sourceLabel}] ${command.description}`
-                : command.description;
+                : isSkill && command.sourceLabel
+                    ? `[${command.sourceLabel}] ${command.description}`
+                    : command.description;
             return {
                 label,
                 detail,
                 value: command.name,
                 command: `/${command.name}`,
+                action: isSkill ? "insert-skill" : undefined,
             };
         });
     }
@@ -2575,6 +2950,12 @@ function OpenTuiApp(props) {
         prompt.cursorOffset = next.length;
         closePicker();
     }
+    function insertSkillPrompt(skillName) {
+        closePicker();
+        resetPromptHistoryBrowse();
+        setPromptText(`/${skillName} `);
+        redrawDock();
+    }
     async function handleInput(input) {
         setNotice("");
         if (input.startsWith("/")) {
@@ -2671,6 +3052,10 @@ function OpenTuiApp(props) {
             openProviderDialog(kind === "provider-auth" ? "auth" : "providers", providerId);
             return;
         }
+        if (kind === "skill") {
+            openProviderDialog("skills");
+            return;
+        }
         if (kind === "key") {
             picker = {
                 kind: "key",
@@ -2710,6 +3095,10 @@ function OpenTuiApp(props) {
             applyFileSuggestion(item.value);
             return;
         }
+        if (item.action === "insert-skill" || (picker?.kind === "select" && picker.mode === "skill")) {
+            insertSkillPrompt(item.value);
+            return;
+        }
         if (picker?.kind === "select" && picker.mode === "slash") {
             activePrompt()?.clear();
             closePicker();
@@ -2796,6 +3185,8 @@ function OpenTuiApp(props) {
             return [];
         if (kind === "mcp-reconnect")
             return buildMcpReconnectItems();
+        if (kind === "skill")
+            return buildSkillItems();
         if (kind === "model") {
             const items = [];
             for (const provider of registry.getEnabled()) {
@@ -2909,6 +3300,25 @@ function OpenTuiApp(props) {
             command: `/logout ${provider.id}`,
         }));
     }
+    function buildSkillItems() {
+        return skills.summaries().map((skill) => {
+            const tags = skill.tags && skill.tags.length > 0 ? ` · ${skill.tags.join(", ")}` : "";
+            const category = skill.source === "project"
+                ? "Project skills"
+                : skill.source === "configured"
+                    ? "Configured skills"
+                    : "User skills";
+            return {
+                label: skill.name,
+                detail: `${skill.description}${tags}`,
+                value: skill.name,
+                command: `/${skill.name}`,
+                action: "insert-skill",
+                category,
+                footer: skill.source,
+            };
+        });
+    }
     function buildProviderConnectItems() {
         const configuredProviders = registry.getConfigured();
         const configured = new Map(configuredProviders.map((provider) => [provider.id, provider]));
@@ -3002,17 +3412,19 @@ function OpenTuiApp(props) {
             addMessage("error", "No model selected. Use /model after /login or provider setup.");
             return;
         }
+        rememberPromptHistory(displayInput);
         const nextMessages = [...displayMessages, { role: "user", content: displayInput }];
         displayMessages = nextMessages;
         streamingDisplay = undefined;
         redrawTranscript(undefined, nextMessages);
-        setRunningState(true);
+        const run = beginAgentRun();
         let assistantContent = "";
         let assistantReasoning = "";
         const toolCalls = [];
         let runError;
+        let runCancelled = false;
         try {
-            for await (const event of props.agent.run(actualInput, props.args.cwd)) {
+            for await (const event of props.agent.run(actualInput, props.args.cwd, { abortSignal: run.abortController.signal })) {
                 if (event.type === "turn_start") {
                     assistantContent = "";
                     assistantReasoning = "";
@@ -3092,6 +3504,7 @@ function OpenTuiApp(props) {
                 else if (event.type === "turn_end") {
                     if (event.usage) {
                         setSidebarUsage((current) => ({
+                            contextTokens: event.usage.promptTokens || current.contextTokens,
                             promptTokens: current.promptTokens + event.usage.promptTokens,
                             completionTokens: current.completionTokens + event.usage.completionTokens,
                             promptCacheHitTokens: current.promptCacheHitTokens + (event.usage.promptCacheHitTokens ?? 0),
@@ -3121,13 +3534,16 @@ function OpenTuiApp(props) {
             }
         }
         catch (error) {
-            runError = error?.message || String(error);
+            runCancelled = error instanceof AgentAbortError || run.abortController.signal.aborted || error?.name === "AbortError";
+            if (!runCancelled) {
+                runError = error?.message || String(error);
+            }
         }
         finally {
             pendingApprovalRef = undefined;
             setPendingApproval(undefined);
             setApprovalOptionIdx(0);
-            setRunningState(false);
+            finishAgentRun(run);
             streamingDisplay = undefined;
             if (runError) {
                 const errorMessage = runError;
@@ -3135,6 +3551,11 @@ function OpenTuiApp(props) {
                 displayMessages = nextMessages;
                 redrawTranscript(undefined, nextMessages);
             }
+            else if (runCancelled) {
+                if (!notice())
+                    setNotice("Agent run cancelled");
+                redrawTranscript();
+            }
             else {
                 redrawTranscript();
             }
@@ -3145,24 +3566,20 @@ function OpenTuiApp(props) {
         }
     }
     function promptUiKeyDown(event) {
-        if (handleApprovalKey(event))
-            return true;
-        if (handleQuestionKey(event))
-            return true;
-        const name = String(event.name || "").toLowerCase();
-        const plan = pendingPlan();
-        if (plan && (name === "left" || name === "right" || name === "h" || name === "l")) {
-            const idx = approvalOptionIdx();
-            const next = name === "left" || name === "h"
-                ? (idx - 1 + PLAN_OPTIONS.length) % PLAN_OPTIONS.length
-                : (idx + 1) % PLAN_OPTIONS.length;
-            setApprovalOptionIdx(next);
-            forceApprovalUI();
-            event.preventDefault?.();
+        if (routeRunningCancel(keyNameFromEvent(event), event))
             return true;
+        const modalOwner = activeModalKeyOwner();
+        if (modalOwner) {
+            if (routeModalKey(event) || shouldModalSwallowUnhandledKey(modalOwner)) {
+                event.preventDefault?.();
+                event.stopPropagation?.();
+                return true;
+            }
         }
         if (cycleModeFromKey(event))
             return true;
+        if (handlePromptHistoryKey(event))
+            return true;
         return false;
     }
     function renderComposer() {
@@ -3267,6 +3684,8 @@ function OpenTuiApp(props) {
                 redrawQuestionPanel();
             },
             visible: false,
+            focusable: true,
+            onKeyDown: handleQuestionKey,
             position: "absolute",
             left: 2,
             right: 2,
@@ -3680,7 +4099,7 @@ function OpenTuiApp(props) {
                     flexShrink: 0,
                     ref: (ref) => {
                         sidebarGaugeLabelText = ref;
-                        ref.content = buildGaugeLabel(context.percent);
+                        ref.content = buildGaugeLabel(context.percent, context.remainingTokens);
                     },
                 }),
                 h("text", {
@@ -3873,6 +4292,13 @@ function OpenTuiApp(props) {
             ? getContextBudget(providerId, modelId, props.agent.messages)
             : undefined;
         const usage = sidebarUsage();
+        const contextTokens = usage.contextTokens || (budget?.estimatedTokens ?? 0);
+        const contextPercent = budget?.contextWindow
+            ? Math.min(100, Math.round((contextTokens / budget.contextWindow) * 100))
+            : Math.round(budget?.percent ?? 0);
+        const remainingTokens = budget?.contextWindow !== undefined
+            ? Math.max(0, budget.contextWindow - contextTokens)
+            : undefined;
         const tokenUsage = {
             promptTokens: usage.promptTokens,
             completionTokens: usage.completionTokens,
@@ -3883,8 +4309,9 @@ function OpenTuiApp(props) {
         };
         const cost = providerId && modelId ? calculateUsageCost(providerId, modelId, tokenUsage) : undefined;
         return {
-            tokens: budget?.estimatedTokens ?? 0,
-            percent: Math.round(budget?.percent ?? 0),
+            tokens: contextTokens,
+            percent: contextPercent,
+            remainingTokens,
             promptTokens: usage.promptTokens,
             completionTokens: usage.completionTokens,
             reasoningTokens: usage.reasoningTokens,
@@ -3914,6 +4341,7 @@ function OpenTuiApp(props) {
                 ref: (ref) => { scrollbox = ref; },
                 stickyScroll: true,
                 stickyStart: "bottom",
+                onMouseScroll: handleTranscriptMouseScroll,
                 flexGrow: 1,
                 minHeight: 0,
             }, h("box", { height: 1 }), h("box", {
@@ -3925,7 +4353,8 @@ function OpenTuiApp(props) {
                     updateTranscriptHost(ref, transcriptState, currentTranscriptMessages(streamingDisplay), transcriptOptions(), props.syntaxStyle, props.subtleSyntaxStyle);
                     syncThinkingSpinner();
                     syncPromptSurfaces(isNewHost);
-                    setTimeout(() => scrollbox?.scrollTo(scrollbox.scrollHeight), 0);
+                    if (isNewHost)
+                        scheduleTranscriptScrollAfterUpdate(transcriptScrollFollowing, 0);
                 },
                 flexDirection: "column",
                 flexShrink: 0,
@@ -3935,6 +4364,8 @@ function OpenTuiApp(props) {
             }, notice()) : null, renderQuestionPanelHost(), h("box", {
                 ref: (ref) => { approvalRoot = ref; },
                 visible: !!approval,
+                focusable: true,
+                onKeyDown: handleApprovalKey,
                 position: "absolute",
                 left: 2,
                 right: 2,
@@ -4046,9 +4477,38 @@ function OpenTuiApp(props) {
                 ref: (ref) => { approvalOptionTexts[index] = ref; },
                 fg: theme.textMuted,
                 content: "",
-            })))), h("box", { flexDirection: "row", gap: 2, flexShrink: 0 }, h("text", { fg: theme.text }, "⇆ ", h("span", { fg: theme.textMuted }, "select")), h("text", { fg: theme.text }, "enter ", h("span", { fg: theme.textMuted }, "confirm")), h("text", { fg: theme.text }, "esc ", h("span", { fg: theme.textMuted }, "reject")))))),
+            })))), h("box", { flexDirection: "row", gap: 2, flexShrink: 0 }, h("text", { fg: theme.text }, "⇆/tab ", h("span", { fg: theme.textMuted }, "select")), h("text", { fg: theme.text }, "enter ", h("span", { fg: theme.textMuted }, "confirm")), h("text", { fg: theme.text }, "esc ", h("span", { fg: theme.textMuted }, "reject")))))),
         ]);
     }
+    function renderNoticeOverlay() {
+        return h("box", {
+            ref: (ref) => {
+                copyToastRoot = ref;
+                ref.visible = false;
+            },
+            visible: false,
+            position: "absolute",
+            top: 2,
+            right: sidebarVisible() ? SESSION_SIDEBAR_WIDTH + 2 : 2,
+            zIndex: 4000,
+            flexDirection: "column",
+            alignItems: "flex-start",
+            width: 24,
+            paddingLeft: 2,
+            paddingRight: 2,
+            paddingTop: 1,
+            paddingBottom: 1,
+            backgroundColor: theme.backgroundPanel,
+            border: ["left", "right"],
+            borderColor: theme.info,
+        }, h("text", {
+            ref: (ref) => { copyToastText = ref; },
+            fg: theme.text,
+            wrapMode: "word",
+            width: "100%",
+            content: "",
+        }));
+    }
     return h("box", {
         ref: (ref) => { rootBox = ref; },
         flexDirection: "column",
@@ -4080,6 +4540,7 @@ function OpenTuiApp(props) {
             registerModeBadge: registerFooterModeBadge,
         }),
         renderProviderDialog(),
+        renderNoticeOverlay(),
     ]);
 }
 function renderPrompt(input) {
@@ -4988,9 +5449,9 @@ function renderFooter(input) {
         idleFg: theme.textMuted,
         runningFg: theme.primary,
     }), h("text", {
-        fg: theme.warning,
+        fg: permissionModeColor(input.mode()),
         ref: input.registerModeBadge,
-    }, input.mode() !== "default" ? `  ${input.mode()} · tab` : ""), h("box", { flexGrow: 1 }));
+    }, footerPermissionModeText(input.mode())), h("box", { flexGrow: 1 }));
 }
 function pickerTitle(kind, providerId) {
     switch (kind) {
@@ -5012,6 +5473,8 @@ function pickerTitle(kind, providerId) {
             return "Select Login Provider";
         case "logout":
             return "Select Logout Provider";
+        case "skill":
+            return "Skills";
         case "slash":
             return "Commands";
         case "file":
@@ -5447,13 +5910,37 @@ function contrastText(color) {
     return luminance > 160 ? "#000000" : "#ffffff";
 }
 function promptModeBadgeContent(mode) {
-    const isPlan = mode === "plan";
-    const color = isPlan ? theme.accent : theme.primary;
-    const label = isPlan ? "Plan" : "Build";
+    const color = permissionModeColor(mode);
+    const label = permissionModeBadgeLabel(mode);
     return new StyledText([
         bg(color)(fg(contrastText(color))(bold(` ${label} `))),
     ]);
 }
+function permissionModeBadgeLabel(mode) {
+    switch (mode) {
+        case "default": return "Build";
+        case "plan": return "Plan";
+        case "bypassPermissions": return "Bypass";
+    }
+}
+function footerPermissionModeText(mode) {
+    const info = PERMISSION_MODE_INFO[mode];
+    if (mode === "default")
+        return "  mode: build · shift+tab plan";
+    if (mode === "plan")
+        return "  mode: plan · shift+tab bypass";
+    return `  mode: ${info.shortTitle} · shift+tab build`;
+}
+function permissionModeColor(mode) {
+    const info = PERMISSION_MODE_INFO[mode];
+    switch (info.color) {
+        case "accent": return theme.accent;
+        case "success": return theme.success;
+        case "warning": return theme.warning;
+        case "error": return theme.error;
+        case "muted": return theme.primary;
+    }
+}
 function toolColor(tool) {
     if (tool.isError)
         return theme.toolError;
@@ -5622,18 +6109,6 @@ function assistantStatusLabel(message) {
         return "Responding...";
     return message.streaming ? "Thinking..." : "Thinking";
 }
-function buildColoredGauge(percent, barWidth) {
-    const clamped = Math.max(0, Math.min(100, percent));
-    const filled = Math.round((clamped / 100) * barWidth);
-    const empty = barWidth - filled;
-    const gaugeColor = clamped >= 80 ? theme.error : clamped >= 60 ? theme.warning : theme.success;
-    const chunks = [];
-    if (filled > 0)
-        chunks.push(fg(gaugeColor)("█".repeat(filled)));
-    if (empty > 0)
-        chunks.push(fg(theme.borderSubtle)("░".repeat(empty)));
-    return new StyledText(chunks);
-}
 function buildContextGauge(percent, barWidth) {
     const clamped = Math.max(0, Math.min(100, percent));
     const filled = Math.round((clamped / 100) * barWidth);
@@ -5642,17 +6117,27 @@ function buildContextGauge(percent, barWidth) {
     const space = empty > 0 ? "░".repeat(empty) : "";
     return `${block}${space}`;
 }
-function buildGaugeLabel(percent) {
+function buildGaugeLabel(percent, remainingTokens) {
+    const remaining = remainingTokens === undefined ? "" : ` · ${formatContextRemaining(remainingTokens)} left`;
     if (percent >= 95)
-        return "⚠ Compact imminent";
+        return `⚠ Compact imminent${remaining}`;
     if (percent >= 80)
-        return "⚠ Approaching limit";
+        return `⚠ Approaching limit${remaining}`;
     if (percent >= 60)
-        return "● Context growing";
+        return `● Context growing${remaining}`;
     if (percent > 0)
-        return "○ Available";
+        return `○ Available${remaining}`;
     return "○ Empty";
 }
+function formatContextRemaining(value) {
+    if (value >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(2)}M`;
+    if (value >= 100_000)
+        return `${Math.round(value / 1_000)}K`;
+    if (value >= 1_000)
+        return `${(value / 1_000).toFixed(1)}K`;
+    return String(value);
+}
 function thinkingToggleLabel(expanded, streaming = false, spinnerFrame = "") {
     const arrow = expanded ? "▼" : "▶";
     return streaming && spinnerFrame ? `${spinnerFrame} ${arrow} Thinking` : `${arrow} Thinking`;