@bubblebrain-ai/bubble 0.0.24 → 0.0.26

package/dist/tui-ink/model-picker.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { Box, Text, useInput, usePaste, useStdout } from "ink";
+import { isKeyReleaseEvent } from "./key-events.js";
 import { useTheme } from "./theme.js";
 import { encodeModel, decodeModel, displayModel, isUserVisibleProvider } from "../provider-registry.js";
 import { listBuiltinModels } from "../model-catalog.js";
 import { padVisual, truncateVisual } from "../text-display.js";
+import { hasTerminalMouseSequence } from "./terminal-mouse.js";
+import { getAvailableThinkingLevels, normalizeThinkingLevel } from "../provider-transform.js";
 export { padVisual, truncateVisual } from "../text-display.js";
 export function resolvePickerKeyAction(input, key) {
     if (key.escape)
@@ -29,6 +32,8 @@ export function resolvePickerKeyAction(input, key) {
 export function isPrintablePickerInput(input) {
     if (!input)
         return false;
+    if (hasTerminalMouseSequence(input))
+        return false;
     if (input.startsWith("\x1b"))
         return false;
     if (isRawEscapeTail(input))
@@ -47,20 +52,128 @@ export function formatSkillPickerRow(skill, options) {
         : `${marker}${nameCell}`;
     return padVisual(truncateVisual(row, width), width);
 }
+export const MODEL_PICKER_MAX_BODY_ROWS = 10;
+export const MODEL_PICKER_CHROME_ROWS = 13;
+export function modelPickerBodyRows(termHeight) {
+    const rows = Number.isFinite(termHeight) ? Math.floor(termHeight) : 24;
+    return Math.max(1, Math.min(MODEL_PICKER_MAX_BODY_ROWS, rows - MODEL_PICKER_CHROME_ROWS));
+}
+export function clampPickerIndex(index, length) {
+    if (length <= 0)
+        return 0;
+    return Math.max(0, Math.min(length - 1, index));
+}
+export function pickerWindowStart(selectedIndex, length, visibleRows) {
+    const rows = Math.max(1, Math.floor(visibleRows));
+    const safeIndex = clampPickerIndex(selectedIndex, length);
+    const maxStart = Math.max(0, length - rows);
+    return Math.max(0, Math.min(maxStart, safeIndex - Math.floor(rows / 2)));
+}
+export function padPickerRows(rows, bodyRows, width) {
+    const rowCount = Math.max(1, Math.floor(bodyRows));
+    const rowWidth = Math.max(1, Math.floor(width));
+    const padded = rows.slice(0, rowCount).map((row) => padVisual(truncateVisual(row, rowWidth), rowWidth));
+    while (padded.length < rowCount) {
+        padded.push(padVisual("", rowWidth));
+    }
+    return padded;
+}
+// MiniMax models expose thinking as a binary on/off switch (the API's `thinking`
+// param is disabled|adaptive — there's no graded effort), so render the "on"
+// level as on/off instead of our internal "medium". Scoped to MiniMax only —
+// other 2-level models (e.g. GLM toggles) keep their effort labels.
+function isMiniMaxToggleModel(modelId) {
+    return modelId.toLowerCase().includes("minimax");
+}
+export function formatReasoningLevelsLabel(levels, asToggle = false) {
+    const normalized = levels.length > 0 ? levels : ["off"];
+    if (asToggle)
+        return "thinking on/off";
+    return `effort ${normalized.join("/")}`;
+}
+export function formatModelPickerRow(option, options) {
+    const width = Math.max(24, options.width);
+    const marker = options.selected ? "> " : "  ";
+    const label = option.label.replace(/\s+/g, " ").trim();
+    const provider = option.providerBadge.replace(/\s+/g, " ").trim();
+    const effort = formatReasoningLevelsLabel(option.reasoningLevels, isMiniMaxToggleModel(option.id));
+    const current = options.current ? " ●" : "";
+    const providerWidth = Math.max(6, Math.min(16, Math.floor(width * 0.18)));
+    const effortWidth = Math.max(12, Math.min(30, Math.floor(width * 0.32)));
+    const labelWidth = Math.max(6, width - marker.length - providerWidth - effortWidth - 4 - current.length);
+    const row = [
+        marker,
+        padVisual(truncateVisual(label, labelWidth), labelWidth),
+        "  ",
+        padVisual(truncateVisual(provider, providerWidth), providerWidth),
+        "  ",
+        truncateVisual(effort, effortWidth),
+        current,
+    ].join("");
+    return padVisual(truncateVisual(row, width), width);
+}
+export function formatEffortPickerRow(level, options) {
+    const width = Math.max(24, options.width);
+    const marker = options.selected ? "> " : "  ";
+    const name = options.asToggle ? (level === "off" ? "off" : "on") : level;
+    const row = `${marker}${name}  ${effortDescription(level, options.asToggle)}`;
+    return padVisual(truncateVisual(row, width), width);
+}
+export function formatNoModelResultsRow(query, width) {
+    const rowWidth = Math.max(24, width);
+    const normalizedQuery = query.replace(/\s+/g, " ").trim();
+    const row = normalizedQuery
+        ? `  No models match "${normalizedQuery}"`
+        : "  No models available";
+    return padVisual(truncateVisual(row, rowWidth), rowWidth);
+}
+export function preferredEffortIndex(option, currentThinkingLevel) {
+    const preferred = normalizeThinkingLevel(currentThinkingLevel, option.reasoningLevels);
+    const index = option.reasoningLevels.indexOf(preferred);
+    return index >= 0 ? index : 0;
+}
+export function shouldOpenEffortPicker(option) {
+    return option.reasoningLevels.length > 1;
+}
+function effortDescription(level, asToggle) {
+    if (asToggle)
+        return level === "off" ? "thinking disabled" : "thinking enabled";
+    switch (level) {
+        case "off":
+            return "no reasoning effort";
+        case "minimal":
+            return "fastest reasoning";
+        case "low":
+            return "light reasoning";
+        case "medium":
+            return "balanced reasoning";
+        case "high":
+            return "deeper reasoning";
+        case "xhigh":
+            return "extra high reasoning";
+        case "max":
+            return "maximum provider effort";
+        default:
+            return "reasoning effort";
+    }
+}
 function normalizeEscapeSequence(input) {
     return input.startsWith("\x1b") ? input.slice(1) : input;
 }
 function isRawEscapeTail(input) {
     return /^(?:O[ABCDHF]|\[[\d;:]*[A-Za-z~])$/.test(input);
 }
-export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
+export function ModelPicker({ registry, current, currentThinkingLevel, recent, onSelect, onCancel }) {
     const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
-    const maxVisible = Math.max(5, termHeight - 10);
+    const terminalColumns = stdout?.columns || 80;
+    const bodyRows = modelPickerBodyRows(termHeight);
+    const rowWidth = Math.max(36, Math.min(110, terminalColumns - 6));
     const [rawOptions, setRawOptions] = useState(() => buildLocalModelOptions(registry, current, recent));
     const [query, setQuery] = useState("");
     const [selectedIndex, setSelectedIndex] = useState(() => preferredModelIndex(buildLocalModelOptions(registry, current, recent), current));
+    const [phase, setPhase] = useState({ kind: "model" });
     useEffect(() => {
         let cancelled = false;
         const localOptions = buildLocalModelOptions(registry, current, recent);
@@ -103,13 +216,21 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
             if (current && !seen.has(current)) {
                 const { providerId } = decodeModel(current);
                 const provider = enabled.find((p) => p.id === providerId);
-                opts.unshift({ id: current, label: displayModel(current), group: "Current", providerBadge: provider?.name || providerId || "" });
+                opts.unshift({
+                    id: current,
+                    label: displayModel(current),
+                    group: "Current",
+                    providerBadge: provider?.name || providerId || "",
+                    reasoningLevels: reasoningLevelsForModel(current),
+                });
             }
             if (!cancelled) {
                 setRawOptions(opts);
                 setSelectedIndex((index) => {
                     const currentIndex = preferredModelIndex(opts, current);
-                    return index === preferredModelIndex(localOptions, current) ? currentIndex : Math.min(index, Math.max(0, opts.length - 1));
+                    return index === preferredModelIndex(localOptions, current)
+                        ? currentIndex
+                        : clampPickerIndex(index, opts.length);
                 });
             }
         }
@@ -125,23 +246,59 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
         return rawOptions.filter((opt) => opt.label.toLowerCase().includes(q) || opt.providerBadge.toLowerCase().includes(q));
     }, [rawOptions, query]);
     useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
         const action = resolvePickerKeyAction(input, key);
+        if (phase.kind === "effort") {
+            const levels = phase.model.reasoningLevels;
+            if (action === "escape" || action === "backspace" || action === "delete") {
+                setPhase({ kind: "model" });
+                return;
+            }
+            if (action === "enter") {
+                onSelect(phase.model.id, levels[clampPickerIndex(phase.selectedIndex, levels.length)] ?? "off");
+                return;
+            }
+            if (action === "up") {
+                setPhase((currentPhase) => currentPhase.kind === "effort"
+                    ? { ...currentPhase, selectedIndex: clampPickerIndex(currentPhase.selectedIndex - 1, levels.length) }
+                    : currentPhase);
+                return;
+            }
+            if (action === "down") {
+                setPhase((currentPhase) => currentPhase.kind === "effort"
+                    ? { ...currentPhase, selectedIndex: clampPickerIndex(currentPhase.selectedIndex + 1, levels.length) }
+                    : currentPhase);
+                return;
+            }
+            return;
+        }
         if (action === "escape") {
             onCancel();
             return;
         }
         if (action === "enter") {
-            const opt = options[selectedIndex];
-            if (opt)
-                onSelect(opt.id);
+            const opt = options[clampPickerIndex(selectedIndex, options.length)];
+            if (opt) {
+                if (shouldOpenEffortPicker(opt)) {
+                    setPhase({
+                        kind: "effort",
+                        model: opt,
+                        selectedIndex: preferredEffortIndex(opt, currentThinkingLevel),
+                    });
+                }
+                else {
+                    onSelect(opt.id, opt.reasoningLevels[0] ?? "off");
+                }
+            }
             return;
         }
         if (action === "up") {
-            setSelectedIndex((i) => Math.max(0, i - 1));
+            setSelectedIndex((i) => clampPickerIndex(i - 1, options.length));
             return;
         }
         if (action === "down") {
-            setSelectedIndex((i) => Math.min(options.length - 1, i + 1));
+            setSelectedIndex((i) => clampPickerIndex(i + 1, options.length));
             return;
         }
         if (action === "backspace" || action === "delete") {
@@ -161,22 +318,68 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
             return;
         }
     });
-    const start = Math.max(0, Math.min(selectedIndex, options.length - maxVisible));
-    const visible = options.slice(start, start + maxVisible);
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Select Model" }), _jsx(SearchField, { query: query, placeholder: "Type to search models..." }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel \u00B7 Backspace clear" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [options.length === 0 && (_jsxs(Text, { color: theme.muted, children: ["No models match \"", query, "\""] })), visible.map((opt, i) => {
-                        const actualIndex = start + i;
-                        const isSelected = actualIndex === selectedIndex;
-                        return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", opt.label] }), _jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: theme.muted, dimColor: true, children: opt.providerBadge }) }), opt.id === current && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: theme.accent, children: "\u25CF" }) }))] }, opt.id));
-                    })] })] }));
+    const safeSelectedIndex = clampPickerIndex(selectedIndex, options.length);
+    const start = pickerWindowStart(safeSelectedIndex, options.length, bodyRows);
+    const visible = options.slice(start, start + bodyRows);
+    const rawModelRows = options.length === 0
+        ? [{
+                key: "no-results",
+                row: formatNoModelResultsRow(query, rowWidth),
+                selected: false,
+            }]
+        : visible.map((opt, i) => {
+            const actualIndex = start + i;
+            const isSelected = actualIndex === safeSelectedIndex;
+            return {
+                key: opt.id,
+                row: formatModelPickerRow(opt, {
+                    selected: isSelected,
+                    current: opt.id === current,
+                    width: rowWidth,
+                }),
+                selected: isSelected,
+            };
+        });
+    const modelRows = padPickerRows(rawModelRows.map((row) => row.row), bodyRows, rowWidth).map((row, index) => ({
+        key: rawModelRows[index]?.key ?? `blank-${index}`,
+        row,
+        selected: rawModelRows[index]?.selected ?? false,
+    }));
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: phase.kind === "effort" ? "Select Reasoning Effort" : "Select Model" }), phase.kind === "effort" ? (_jsx(EffortPickerView, { model: phase.model, selectedIndex: phase.selectedIndex, bodyRows: bodyRows, rowWidth: rowWidth })) : (_jsxs(_Fragment, { children: [_jsx(SearchField, { query: query, placeholder: "Type to search models...", width: rowWidth }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter choose effort \u00B7 Esc cancel \u00B7 Backspace clear" })] })), phase.kind === "model" && _jsx(Box, { flexDirection: "column", height: bodyRows, overflow: "hidden", marginTop: 1, children: modelRows.map(({ key, row, selected }) => (_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(Text, { color: selected ? theme.accent : (key === "no-results" ? theme.muted : undefined), bold: selected, children: row }) }, key))) })] }));
+}
+function EffortPickerView({ model, selectedIndex, bodyRows, rowWidth, }) {
+    const theme = useTheme();
+    const safeSelectedIndex = clampPickerIndex(selectedIndex, model.reasoningLevels.length);
+    const rawRows = model.reasoningLevels.map((level, index) => ({
+        key: level,
+        row: formatEffortPickerRow(level, {
+            selected: index === safeSelectedIndex,
+            width: rowWidth,
+            asToggle: isMiniMaxToggleModel(model.id),
+        }),
+        selected: index === safeSelectedIndex,
+    }));
+    const effortRows = padPickerRows(rawRows.map((row) => row.row), bodyRows, rowWidth).map((row, index) => ({
+        key: rawRows[index]?.key ?? `blank-${index}`,
+        row,
+        selected: rawRows[index]?.selected ?? false,
+    }));
+    const modelDetail = padVisual(truncateVisual(`${model.label} · ${model.providerBadge}`, rowWidth), rowWidth);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(Text, { color: theme.muted, children: modelDetail }) }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc back" }), _jsx(Box, { flexDirection: "column", height: bodyRows, overflow: "hidden", marginTop: 1, children: effortRows.map(({ key, row, selected }) => (_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(Text, { color: selected ? theme.accent : undefined, bold: selected, children: row }) }, key))) })] }));
 }
-function SearchField({ query, placeholder }) {
+function SearchField({ query, placeholder, width }) {
     const theme = useTheme();
     const [cursorVisible, setCursorVisible] = useState(true);
     useEffect(() => {
         const t = setInterval(() => setCursorVisible((v) => !v), 500);
         return () => clearInterval(t);
     }, []);
-    return (_jsxs(Box, { marginTop: 1, marginBottom: 1, children: [_jsx(Text, { color: theme.accent, children: "❯ " }), _jsx(Text, { children: query }), _jsx(Text, { color: theme.accent, inverse: cursorVisible, children: " " }), !query && _jsxs(Text, { color: theme.muted, dimColor: true, children: [" ", placeholder] })] }));
+    const contentBudget = width ? Math.max(1, width - 3) : undefined;
+    const visibleQuery = contentBudget ? truncateVisual(query, contentBudget) : query;
+    const visiblePlaceholder = !query
+        ? (contentBudget ? truncateVisual(` ${placeholder}`, contentBudget) : ` ${placeholder}`)
+        : "";
+    return (_jsxs(Box, { height: 1, overflow: "hidden", marginTop: 1, children: [_jsx(Text, { color: theme.accent, children: "❯ " }), _jsx(Text, { children: visibleQuery }), _jsx(Text, { color: theme.accent, inverse: cursorVisible, children: " " }), visiblePlaceholder && _jsx(Text, { color: theme.muted, dimColor: true, children: visiblePlaceholder })] }));
 }
 export function buildLocalModelOptions(registry, current, recent) {
     const enabled = registry.getEnabled();
@@ -210,6 +413,7 @@ export function buildLocalModelOptions(registry, current, recent) {
             label: displayModel(current),
             group: "Current",
             providerBadge: provider?.name || providerId || "",
+            reasoningLevels: reasoningLevelsForModel(current),
         });
     }
     return opts;
@@ -231,12 +435,19 @@ function appendModelOption(options, seen, option) {
     if (seen.has(option.id))
         return;
     seen.add(option.id);
-    options.push(option);
+    options.push({
+        ...option,
+        reasoningLevels: option.reasoningLevels ?? reasoningLevelsForModel(option.id),
+    });
 }
 function preferredModelIndex(options, current) {
     const idx = options.findIndex((option) => option.id === current);
     return idx >= 0 ? idx : 0;
 }
+function reasoningLevelsForModel(model) {
+    const { providerId, modelId } = decodeModel(model);
+    return getAvailableThinkingLevels(providerId || "openai", modelId);
+}
 export function ProviderPicker({ providers, current, onSelect, onCancel, title }) {
     const theme = useTheme();
     const { stdout } = useStdout();
@@ -247,6 +458,8 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title }
         return idx >= 0 ? idx : 0;
     });
     useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
         const action = resolvePickerKeyAction(input, key);
         if (action === "escape") {
             onCancel();
@@ -294,6 +507,8 @@ export function KeyPicker({ providerName, onSubmit, onCancel }) {
     const theme = useTheme();
     const [value, setValue] = useState("");
     useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
         const action = resolvePickerKeyAction(input, key);
         if (action === "escape") {
             onCancel();
@@ -338,6 +553,8 @@ export function SkillPicker({ skills, onSelect, onCancel }) {
         return skills.filter((skill) => skill.name.toLowerCase().includes(q) || skill.description.toLowerCase().includes(q));
     }, [query, skills]);
     useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
         const action = resolvePickerKeyAction(input, key);
         if (action === "escape") {
             onCancel();

package/dist/tui-ink/plan-confirm.js

@@ -1,14 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, Text, useInput } from "ink";
+import { isKeyReleaseEvent } from "./key-events.js";
 import { useTheme } from "./theme.js";
 import { MarkdownContent } from "./markdown.js";
+import { stripTerminalMouseSequences } from "./terminal-mouse.js";
 export function PlanConfirm({ initialPlan, onApprove, onReject }) {
     const theme = useTheme();
     const [stage, setStage] = useState("view");
     const [draft, setDraft] = useState(initialPlan);
     const [cursor, setCursor] = useState(initialPlan.length);
     useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
+        const strippedMouseInput = stripTerminalMouseSequences(input);
+        if (strippedMouseInput !== input) {
+            if (!strippedMouseInput)
+                return;
+            input = strippedMouseInput;
+        }
         if (stage === "view") {
             if (key.escape || input === "n" || input === "N") {
                 onReject();

package/dist/tui-ink/question-dialog.js

@@ -1,7 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Box, Text, useInput } from "ink";
+import { isKeyReleaseEvent } from "./key-events.js";
 import { useTheme } from "./theme.js";
+import { stripTerminalMouseSequences } from "./terminal-mouse.js";
 export function QuestionDialog({ request, onSubmit, onCancel }) {
     const theme = useTheme();
     const [index, setIndex] = useState(0);
@@ -13,17 +15,27 @@ export function QuestionDialog({ request, onSubmit, onCancel }) {
     const canUseCustom = question?.custom !== false;
     const isMultiple = question?.multiple === true;
     const totalTabs = request.questions.length;
+    // The "Custom: type to answer" row is the last navigable item (when custom is
+    // allowed), so Up/Down can reach and highlight it just like an option.
+    const customIndex = canUseCustom ? options.length : -1;
+    const navCount = options.length + (canUseCustom ? 1 : 0);
+    const isCustomSelected = canUseCustom && selected === customIndex;
     const currentAnswer = useMemo(() => answers[index] ?? [], [answers, index]);
     const commitQuestion = () => {
-        const option = options[selected]?.label;
         const customAnswer = custom.trim();
-        const nextAnswer = customAnswer
-            ? [customAnswer]
+        // Submit what is actually selected: the Custom row submits the typed text;
+        // an option row submits that option (a stale custom buffer no longer wins).
+        const nextAnswer = isCustomSelected
+            ? customAnswer
+                ? [customAnswer]
+                : []
             : isMultiple
                 ? currentAnswer
-                : option
-                    ? [option]
-                    : [];
+                : options[selected]?.label
+                    ? [options[selected].label]
+                    : customAnswer
+                        ? [customAnswer]
+                        : [];
         const nextAnswers = answers.map((answer, i) => i === index ? nextAnswer : answer);
         if (index < request.questions.length - 1) {
             setAnswers(nextAnswers);
@@ -51,6 +63,14 @@ export function QuestionDialog({ request, onSubmit, onCancel }) {
         }));
     };
     useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
+        const strippedMouseInput = stripTerminalMouseSequences(input);
+        if (strippedMouseInput !== input) {
+            if (!strippedMouseInput)
+                return;
+            input = strippedMouseInput;
+        }
         if (key.escape) {
             onCancel();
             return;
@@ -72,11 +92,24 @@ export function QuestionDialog({ request, onSubmit, onCancel }) {
             return;
         }
         if (key.downArrow) {
-            setSelected((i) => Math.min(Math.max(0, options.length - 1), i + 1));
+            setSelected((i) => Math.min(Math.max(0, navCount - 1), i + 1));
+            return;
+        }
+        // Tab toggles a checkbox; only meaningful while an option row is selected.
+        if (key.tab) {
+            if (!isCustomSelected)
+                toggleCurrentOption();
             return;
         }
-        if (key.tab || input === " ") {
-            toggleCurrentOption();
+        if (input === " ") {
+            // Space toggles the highlighted option, but on the Custom row it types a
+            // literal space into the answer instead of swallowing the keystroke.
+            if (isCustomSelected) {
+                setCustom((value) => value + " ");
+            }
+            else {
+                toggleCurrentOption();
+            }
             return;
         }
         if (key.return) {
@@ -87,7 +120,10 @@ export function QuestionDialog({ request, onSubmit, onCancel }) {
             setCustom((value) => value.slice(0, -1));
             return;
         }
+        // Any printable key starts/continues the custom answer and moves the
+        // highlight onto the Custom row, so typing and arrow navigation agree.
         if (canUseCustom && input && !key.ctrl && !key.meta) {
+            setSelected(customIndex);
             setCustom((value) => value + input);
         }
     });
@@ -95,5 +131,5 @@ export function QuestionDialog({ request, onSubmit, onCancel }) {
                     const isSelected = optionIndex === selected;
                     const isChecked = currentAnswer.includes(option.label);
                     return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", isMultiple ? `[${isChecked ? "x" : " "}] ` : "", option.label] }), option.description && (_jsx(Box, { marginLeft: 4, children: _jsx(Text, { color: theme.muted, dimColor: true, children: option.description }) }))] }, `${option.label}-${optionIndex}`));
-                }) }), canUseCustom && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: custom ? undefined : theme.muted, children: ["Custom: ", custom || "type to answer..."] }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "\u2191\u2193 choose \u00B7 Tab/Space toggle \u00B7 Enter submit \u00B7 Esc dismiss" }) })] }));
+                }) }), canUseCustom && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: isCustomSelected ? theme.accent : custom ? undefined : theme.muted, children: [isCustomSelected ? "> " : "  ", "Custom: ", custom || "type to answer…"] }) })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.muted, children: ["\u2191\u2193 choose \u00B7 ", isMultiple ? "Space toggle · " : "", "type for Custom \u00B7 Enter submit \u00B7 Esc dismiss"] }) })] }));
 }

package/dist/tui-ink/run.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { Agent } from "../agent.js";
 import type { CliArgs } from "../cli.js";
 import type { SessionManager } from "../session.js";
@@ -23,9 +24,14 @@ export interface RunTuiOptions {
     questionController?: QuestionController;
     bashAllowlist?: BashAllowlist;
     settingsManager?: SettingsManager;
+    switchSession?: (sessionFile: string) => {
+        manager: SessionManager;
+    } | {
+        error: string;
+    };
     lspService?: LspService;
     mcpManager?: McpManager;
-    /** Accepted for compatibility with the shared options bag; the goal feature is OpenTUI-only. */
+    /** Shared with the model-facing goal tools and the Ink auto-continuation loop. */
     goalStore?: import("../goal/store.js").GoalStore;
     themeMode?: ThemeMode;
     themeOverrides?: Record<string, string>;
@@ -38,7 +44,10 @@ export interface RunTuiOptions {
     bypassEnabled?: boolean;
     /** One-line "update available" notice rendered under the welcome banner version. */
     updateNotice?: string;
+    /** Late update notice refresh surfaced after startup without restarting Ink. */
+    updateNoticeRefresh?: Promise<string | null>;
     /** External lifecycle hooks, threaded into slash-command execution. */
     hookController?: ExternalHookController;
 }
+export declare function createInkAppElement(agent: Agent, args: CliArgs, options: RunTuiOptions, onExit: (summary: ExitSummary) => void): React.ReactElement;
 export declare function runTui(agent: Agent, args: CliArgs, options?: RunTuiOptions): Promise<ExitSummary | undefined>;

package/dist/tui-ink/run.js

@@ -1,26 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "ink";
 import { App } from "./app.js";
-import { MOUSE_REPORTING_DISABLE } from "./terminal-mouse.js";
-// DECSET 1007: terminals translate the mouse wheel into Up/Down arrow keys
-// while the alternate screen is active. Mouse reporting stays OFF on purpose
-// so plain drag-select and copy keep their native terminal behavior; the
-// composer classifies wheel-synthesized arrows vs real key presses.
-const ALTERNATE_SCROLL_ENABLE = "\x1b[?1007h";
-const ALTERNATE_SCROLL_DISABLE = "\x1b[?1007l";
 import { warmHighlighter } from "./code-highlight.js";
+export function createInkAppElement(agent, args, options, onExit) {
+    return (_jsx(App, { agent: agent, args: args, sessionManager: options.sessionManager, switchSession: options.switchSession, createProvider: options.createProvider, registry: options.registry, skillRegistry: options.skillRegistry, planHandlerRef: options.planHandlerRef, approvalHandlerRef: options.approvalHandlerRef, questionController: options.questionController, bashAllowlist: options.bashAllowlist, settingsManager: options.settingsManager, lspService: options.lspService, mcpManager: options.mcpManager, goalStore: options.goalStore, themeMode: options.themeMode, themeOverrides: options.themeOverrides, detectedTheme: options.detectedTheme, onThemeModeChange: options.onThemeModeChange, flushMemory: options.flushMemory, runMemoryCompaction: options.runMemoryCompaction, runMemorySummary: options.runMemorySummary, runMemoryRefresh: options.runMemoryRefresh, bypassEnabled: options.bypassEnabled, updateNotice: options.updateNotice, updateNoticeRefresh: options.updateNoticeRefresh, hookController: options.hookController, onExit: onExit }));
+}
 /**
- * Best-effort terminal restore for abnormal exits. DECSET mouse modes are
- * global terminal state — if the process dies without disabling them, the
- * user's shell receives \x1b[<35;… garbage on every mouse move. The alt-screen
- * and cursor writes are defensive duplicates of Ink's own teardown (idempotent
- * when Ink already ran; load-bearing when it didn't).
+ * Best-effort terminal restore for abnormal exits. Bubble renders into the
+ * primary screen (no alt-screen, no mouse reporting) so the transcript flows
+ * into the terminal's native scrollback — there is no global mouse/alt-screen
+ * state to undo. We only make sure the cursor is visible again, mirroring
+ * Ink's own teardown (idempotent when Ink already ran; load-bearing when it
+ * didn't).
  */
 function restoreTerminal() {
     if (!process.stdout.isTTY)
         return;
     try {
-        process.stdout.write(ALTERNATE_SCROLL_DISABLE + MOUSE_REPORTING_DISABLE + "\x1b[?1049l\x1b[?25h");
+        process.stdout.write("\x1b[?25h");
     }
     catch {
         // stdout may already be destroyed during shutdown
@@ -49,15 +46,15 @@ export async function runTui(agent, args, options = {}) {
     };
     process.on("uncaughtException", onFatalError);
     process.on("SIGTERM", onSigterm);
-    const instance = render(_jsx(App, { agent: agent, args: args, sessionManager: options.sessionManager, createProvider: options.createProvider, registry: options.registry, skillRegistry: options.skillRegistry, planHandlerRef: options.planHandlerRef, approvalHandlerRef: options.approvalHandlerRef, questionController: options.questionController, bashAllowlist: options.bashAllowlist, settingsManager: options.settingsManager, lspService: options.lspService, mcpManager: options.mcpManager, themeMode: options.themeMode, themeOverrides: options.themeOverrides, detectedTheme: options.detectedTheme, onThemeModeChange: options.onThemeModeChange, flushMemory: options.flushMemory, runMemoryCompaction: options.runMemoryCompaction, runMemorySummary: options.runMemorySummary, runMemoryRefresh: options.runMemoryRefresh, bypassEnabled: options.bypassEnabled, updateNotice: options.updateNotice, hookController: options.hookController, onExit: (summary) => {
-            // The app already called useApp().exit() inside requestExit, which
-            // triggers Ink's own unmount + TTY restore. waitUntilExit() below is
-            // the canonical signal that we're done — we deliberately do *not*
-            // call instance.unmount() again here to avoid double-teardown
-            // warnings on React 19. We capture the summary and render it after
-            // teardown so it lands in the real shell scrollback (Claude-Code style).
-            exitSummary = summary;
-        } }), {
+    const instance = render(createInkAppElement(agent, args, options, (summary) => {
+        // The app already called useApp().exit() inside requestExit, which
+        // triggers Ink's own unmount + TTY restore. waitUntilExit() below is
+        // the canonical signal that we're done — we deliberately do *not*
+        // call instance.unmount() again here to avoid double-teardown
+        // warnings on React 19. We capture the summary and render it after
+        // teardown so it lands in the real shell scrollback (Claude-Code style).
+        exitSummary = summary;
+    }), {
         // Bubble owns Ctrl+C so it can route both raw ETX and kitty keyboard
         // Ctrl+C through App.requestExit(). Ink's default only exits reliably
         // for raw "\x03"; with kitty keyboard it can swallow the parsed
@@ -65,33 +62,21 @@ export async function runTui(agent, args, options = {}) {
         exitOnCtrlC: false,
         kittyKeyboard: {
             mode: "enabled",
-            // reportEventTypes lets the composer tell real arrow-key presses
-            // (kitty-enhanced, carry eventType) apart from the bare arrow
-            // sequences terminals synthesize for wheel scrolling in alternate
-            // screen — see the classifier in input-box.tsx.
+            // reportEventTypes keeps release events out of text input.
             flags: ["disambiguateEscapeCodes", "reportEventTypes"],
         },
-        // The whole point of the Ink migration: render into the 1049 alternate
-        // screen so streaming repaints never touch the user's shell scrollback.
-        // Ink degrades this to false automatically when stdout is not a TTY.
-        alternateScreen: true,
+        // Render into the primary screen (NOT the 1049 alternate screen): settled
+        // transcript rows are committed once via Ink's <Static> region so they
+        // flow into the terminal's native scrollback. That gives flicker-free
+        // native scroll + text selection + copy (and tmux copy-mode) for free,
+        // and frees the arrow keys for composer history. Only the streaming tail
+        // and the composer live in the repainting region at the bottom.
+        alternateScreen: false,
     });
-    // Enable alternate-scroll after render() so it follows alt-screen entry:
-    // the wheel arrives as Up/Down arrows, while plain drag-select and copy
-    // keep their native terminal behavior (no mouse reporting).
-    if (process.stdout.isTTY) {
-        process.stdout.write(ALTERNATE_SCROLL_ENABLE);
-    }
     try {
         await instance.waitUntilExit();
     }
     finally {
-        // Reset scroll translation before anything is printed to the primary
-        // screen; Ink has already left the alt screen by the time
-        // waitUntilExit() resolves.
-        if (process.stdout.isTTY) {
-            process.stdout.write(ALTERNATE_SCROLL_DISABLE);
-        }
         process.off("uncaughtException", onFatalError);
         process.off("SIGTERM", onSigterm);
     }