@bubblebrain-ai/bubble 0.0.35 → 0.0.37

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef } 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 { 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";
@@ -22,10 +22,17 @@ export function resolvePickerKeyAction(input, key) {
         return "backspace";
     if (key.delete)
         return "delete";
+    // Batched chunks: slow ptys (web-terminal bridges, SSH, paste) can deliver
+    // several keys in ONE input event, in which case ink sets no key flags at
+    // all ("\r/quit\r" arrives with return=false). Act on the chunk's leading
+    // key instead of swallowing it — exact-match anchors would drop the whole
+    // chunk.
+    if (input.startsWith("\r") || input.startsWith("\n"))
+        return "enter";
     const sequence = normalizeEscapeSequence(input);
-    if (/^(?:O|\[[\d;:]*)A$/.test(sequence))
+    if (/^(?:O|\[[\d;:]*)A/.test(sequence))
         return "up";
-    if (/^(?:O|\[[\d;:]*)B$/.test(sequence))
+    if (/^(?:O|\[[\d;:]*)B/.test(sequence))
         return "down";
     return undefined;
 }
@@ -53,7 +60,8 @@ export function formatSkillPickerRow(skill, options) {
     return padVisual(truncateVisual(row, width), width);
 }
 export const MODEL_PICKER_MAX_BODY_ROWS = 10;
-export const MODEL_PICKER_CHROME_ROWS = 13;
+export const MODEL_PICKER_CHROME_ROWS = 14;
+export const MODEL_PICKER_RECENT_FAMILY_LIMIT = 3;
 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));
@@ -78,24 +86,98 @@ export function padPickerRows(rows, bodyRows, width) {
     }
     return padded;
 }
+export function modelPickerRecentKey(recent) {
+    return recent.join("\u0000");
+}
+/**
+ * Returns a provider-scoped family key for model ordering.
+ *
+ * Keep this deliberately conservative: suffixes such as `mini`, `codex`,
+ * `spark`, or `highspeed` often describe distinct products rather than
+ * interchangeable siblings. The Codex Sol/Terra/Luna trio is the one family
+ * whose relationship is explicitly declared by the provider catalog.
+ */
+export function modelPickerFamilyKey(provider, modelId) {
+    const isCodexOAuth = provider.id === "openai-codex"
+        || (provider.id === "openai" && provider.authType === "oauth");
+    if (isCodexOAuth) {
+        const match = /^(gpt-\d+(?:\.\d+)+)-(sol|terra|luna)$/i.exec(modelId);
+        if (match)
+            return `${provider.id}:${match[1].toLowerCase()}:sol-terra-luna`;
+    }
+    return `${provider.id}:${modelId}`;
+}
+export function buildModelPickerDisplayItems(options) {
+    const items = [];
+    let previousGroup;
+    let headerIndex = 0;
+    for (const option of options) {
+        if (option.group !== previousGroup) {
+            previousGroup = option.group;
+            items.push({
+                kind: "header",
+                key: `header:${headerIndex++}:${option.group}`,
+                label: option.group,
+            });
+        }
+        items.push({ kind: "model", key: option.id, option });
+    }
+    return items;
+}
+export function resolveModelPickerDisplayIndex(items, selectedId) {
+    if (selectedId) {
+        const selectedIndex = items.findIndex((item) => item.kind === "model" && item.option.id === selectedId);
+        if (selectedIndex >= 0)
+            return selectedIndex;
+    }
+    const firstModelIndex = items.findIndex((item) => item.kind === "model");
+    return firstModelIndex >= 0 ? firstModelIndex : 0;
+}
+export function filterAndRankModelPickerOptions(options, query) {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized)
+        return [...options];
+    return options
+        .map((option, index) => {
+        const { modelId } = decodeModel(option.id);
+        const fields = [option.label, modelId, option.id, option.providerBadge]
+            .map((value) => value.toLowerCase());
+        const rank = fields.some((value) => value === normalized)
+            ? 0
+            : fields.some((value) => value.startsWith(normalized))
+                ? 1
+                : fields.some((value) => value.includes(normalized))
+                    ? 2
+                    : Number.POSITIVE_INFINITY;
+        return { option, index, rank };
+    })
+        .filter((entry) => Number.isFinite(entry.rank))
+        .sort((left, right) => left.rank - right.rank || left.index - right.index)
+        .map((entry) => entry.option);
+}
 function isThinkingToggleOption(option) {
     const decoded = decodeModel(option.id);
     return isThinkingToggleModel(decoded.providerId || option.providerBadge, decoded.modelId);
 }
 export function formatReasoningLevelsLabel(levels, asToggle = false) {
+    if (levels.length === 0)
+        return "checking";
     if (isThinkingOnlyLevels(levels))
         return "on";
     if (asToggle)
         return "thinking on/off";
-    const normalized = levels.length > 0 ? levels : ["off"];
-    return normalized.join("/");
+    return levels.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, isThinkingToggleOption(option));
+    const effort = option.pending
+        ? "checking"
+        : (option.available === false || option.reasoningLevels.length === 0)
+            ? "unavailable"
+            : formatReasoningLevelsLabel(option.reasoningLevels, isThinkingToggleOption(option));
     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)));
@@ -127,6 +209,14 @@ export function formatNoModelResultsRow(query, width) {
     return padVisual(truncateVisual(row, rowWidth), rowWidth);
 }
 export function preferredEffortIndex(option, currentThinkingLevel) {
+    const currentIndex = option.reasoningLevels.indexOf(currentThinkingLevel);
+    if (currentIndex >= 0)
+        return currentIndex;
+    if (option.defaultReasoningLevel) {
+        const defaultIndex = option.reasoningLevels.indexOf(option.defaultReasoningLevel);
+        if (defaultIndex >= 0)
+            return defaultIndex;
+    }
     const preferred = normalizeThinkingLevel(currentThinkingLevel, option.reasoningLevels);
     const index = option.reasoningLevels.indexOf(preferred);
     return index >= 0 ? index : 0;
@@ -134,6 +224,46 @@ export function preferredEffortIndex(option, currentThinkingLevel) {
 export function shouldOpenEffortPicker(option) {
     return option.reasoningLevels.length > 1;
 }
+export function isModelOptionSelectable(option) {
+    return option.available && !option.pending && option.reasoningLevels.length > 0;
+}
+export function resolveSelectedModelId(options, selectedId) {
+    if (selectedId) {
+        const selected = options.find((option) => option.id === selectedId);
+        if (selected && isModelOptionSelectable(selected))
+            return selected.id;
+    }
+    return options.find(isModelOptionSelectable)?.id;
+}
+export function moveModelSelection(options, selectedId, direction) {
+    const selectableIndexes = options
+        .map((option, index) => isModelOptionSelectable(option) ? index : -1)
+        .filter((index) => index >= 0);
+    if (selectableIndexes.length === 0)
+        return undefined;
+    const currentIndex = options.findIndex((option) => option.id === selectedId);
+    if (currentIndex < 0) {
+        return options[direction > 0 ? selectableIndexes[0] : selectableIndexes[selectableIndexes.length - 1]]?.id;
+    }
+    const target = direction > 0
+        ? selectableIndexes.find((index) => index > currentIndex)
+        : [...selectableIndexes].reverse().find((index) => index < currentIndex);
+    return options[target ?? currentIndex]?.id ?? selectedId;
+}
+export function reconcileModelPickerPhase(phase, options, currentThinkingLevel) {
+    if (phase.kind !== "effort")
+        return phase;
+    const latest = options.find((option) => option.id === phase.model.id);
+    if (!latest || !isModelOptionSelectable(latest))
+        return { kind: "model" };
+    const selectedLevel = phase.model.reasoningLevels[phase.selectedIndex];
+    const selectedIndex = selectedLevel && latest.reasoningLevels.includes(selectedLevel)
+        ? latest.reasoningLevels.indexOf(selectedLevel)
+        : preferredEffortIndex(latest, currentThinkingLevel);
+    if (selectedIndex === phase.selectedIndex && sameModelOptionMetadata(phase.model, latest))
+        return phase;
+    return { kind: "effort", model: latest, selectedIndex };
+}
 function effortDescription(level, asToggle) {
     if (asToggle)
         return level === "off" ? "thinking disabled" : "thinking enabled";
@@ -152,6 +282,8 @@ function effortDescription(level, asToggle) {
             return "extra high reasoning";
         case "max":
             return "maximum provider effort";
+        case "ultra":
+            return "maximum effort with delegation";
         default:
             return "reasoning effort";
     }
@@ -169,81 +301,97 @@ export function ModelPicker({ registry, current, currentThinkingLevel, recent, o
     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 recentKey = modelPickerRecentKey(recent);
+    const enabledSnapshot = registry.getEnabled().filter((provider) => isUserVisibleProvider(provider.id));
+    const providerKey = enabledSnapshot
+        .map((provider) => [
+        provider.id,
+        provider.name,
+        provider.baseURL,
+        provider.authType ?? "",
+        provider.protocol ?? "",
+    ].join("\u0000"))
+        .join("\u0001");
+    const enabledProviders = useMemo(() => registry.getEnabled().filter((provider) => isUserVisibleProvider(provider.id)), [registry, providerKey]);
+    const localModelsByProvider = useMemo(() => new Map(enabledProviders.map((provider) => [
+        provider.id,
+        localModelsForProvider(registry, provider),
+    ])), [registry, providerKey]);
+    const [discoveries, setDiscoveries] = useState(() => new Map());
+    const [refreshGeneration, setRefreshGeneration] = useState(0);
+    const requestGenerationRef = useRef(0);
+    const rawOptions = useMemo(() => buildMergedModelOptions({
+        providers: enabledProviders,
+        localModelsByProvider,
+        discoveries,
+        current,
+        recent,
+    }), [enabledProviders, localModelsByProvider, discoveries, current, recentKey]);
     const [query, setQuery] = useState("");
-    const [selectedIndex, setSelectedIndex] = useState(() => preferredModelIndex(buildLocalModelOptions(registry, current, recent), current));
+    const [selectedId, setSelectedId] = useState(() => resolveSelectedModelId(buildLocalModelOptions(registry, current, recent), current));
     const [phase, setPhase] = useState({ kind: "model" });
     useEffect(() => {
-        let cancelled = false;
-        const localOptions = buildLocalModelOptions(registry, current, recent);
-        setRawOptions(localOptions);
-        setSelectedIndex(preferredModelIndex(localOptions, current));
-        async function refreshRemote() {
-            const enabled = registry.getEnabled();
-            const opts = [];
-            const seen = new Set();
-            // Recent first
-            for (const m of recent.slice(0, 5)) {
-                const { providerId } = decodeModel(m);
-                const provider = enabled.find((p) => p.id === providerId);
-                appendModelOption(opts, seen, {
-                    id: m,
-                    label: displayModel(m),
-                    group: "Recent",
-                    providerBadge: provider?.name || providerId || "",
+        const generation = ++requestGenerationRef.current;
+        setDiscoveries((previous) => {
+            const next = new Map();
+            for (const provider of enabledProviders) {
+                const prior = previous.get(provider.id);
+                next.set(provider.id, {
+                    status: "pending",
+                    models: prior?.models ?? [],
+                    source: prior?.source,
+                    authoritative: prior?.authoritative ?? false,
                 });
             }
-            const visibleProviders = enabled.filter((item) => isUserVisibleProvider(item.id));
-            const discovered = await Promise.all(visibleProviders.map(async (provider) => {
-                try {
-                    return { provider, models: await registry.listModels(provider) };
-                }
-                catch {
-                    return { provider, models: localModelsForProvider(registry, provider) };
-                }
-            }));
-            for (const { provider, models } of discovered) {
-                for (const m of models) {
-                    appendModelOption(opts, seen, {
-                        id: encodeModel(m.providerId, m.id),
-                        label: m.name,
-                        group: provider.name,
-                        providerBadge: provider.name,
-                    });
-                }
-            }
-            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 || "",
-                    reasoningLevels: reasoningLevelsForModel(current),
+            return next;
+        });
+        for (const provider of enabledProviders) {
+            void discoverModelsForPicker(registry, provider, refreshGeneration > 0)
+                .then((result) => {
+                if (requestGenerationRef.current !== generation)
+                    return;
+                setDiscoveries((previous) => {
+                    const next = new Map(previous);
+                    next.set(provider.id, { status: "complete", ...result });
+                    return next;
                 });
-            }
-            if (!cancelled) {
-                setRawOptions(opts);
-                setSelectedIndex((index) => {
-                    const currentIndex = preferredModelIndex(opts, current);
-                    return index === preferredModelIndex(localOptions, current)
-                        ? currentIndex
-                        : clampPickerIndex(index, opts.length);
+            })
+                .catch((error) => {
+                if (requestGenerationRef.current !== generation)
+                    return;
+                setDiscoveries((previous) => {
+                    const next = new Map(previous);
+                    next.set(provider.id, {
+                        status: "complete",
+                        models: localModelsByProvider.get(provider.id) ?? [],
+                        source: "fallback",
+                        authoritative: false,
+                        error: error instanceof Error ? error.message : String(error),
+                    });
+                    return next;
                 });
-            }
+            });
         }
-        void refreshRemote();
         return () => {
-            cancelled = true;
+            if (requestGenerationRef.current === generation)
+                requestGenerationRef.current++;
         };
-    }, [registry, current, recent]);
+    }, [registry, providerKey, refreshGeneration]);
     const options = useMemo(() => {
-        if (!query.trim())
-            return rawOptions;
-        const q = query.toLowerCase();
-        return rawOptions.filter((opt) => opt.label.toLowerCase().includes(q) || opt.providerBadge.toLowerCase().includes(q));
+        return filterAndRankModelPickerOptions(rawOptions, query);
     }, [rawOptions, query]);
+    const resolvedSelectedId = resolveSelectedModelId(options, selectedId);
+    const selectedIndex = resolvedSelectedId
+        ? options.findIndex((option) => option.id === resolvedSelectedId)
+        : -1;
+    useEffect(() => {
+        if (selectedId !== resolvedSelectedId)
+            setSelectedId(resolvedSelectedId);
+    }, [selectedId, resolvedSelectedId]);
+    useEffect(() => {
+        setPhase((currentPhase) => reconcileModelPickerPhase(currentPhase, rawOptions, currentThinkingLevel));
+    }, [rawOptions, currentThinkingLevel]);
+    const discoveryStatus = formatModelDiscoveryStatus(enabledProviders, discoveries);
     useInput((input, key) => {
         if (isKeyReleaseEvent(key))
             return;
@@ -255,7 +403,9 @@ export function ModelPicker({ registry, current, currentThinkingLevel, recent, o
                 return;
             }
             if (action === "enter") {
-                onSelect(phase.model.id, levels[clampPickerIndex(phase.selectedIndex, levels.length)] ?? "off");
+                const level = levels[clampPickerIndex(phase.selectedIndex, levels.length)];
+                if (level)
+                    onSelect(phase.model.id, level);
                 return;
             }
             if (action === "up") {
@@ -272,13 +422,17 @@ export function ModelPicker({ registry, current, currentThinkingLevel, recent, o
             }
             return;
         }
+        if (key.ctrl && (input.toLowerCase() === "r" || input === "\x12")) {
+            setRefreshGeneration((generation) => generation + 1);
+            return;
+        }
         if (action === "escape") {
             onCancel();
             return;
         }
         if (action === "enter") {
-            const opt = options[clampPickerIndex(selectedIndex, options.length)];
-            if (opt) {
+            const opt = selectedIndex >= 0 ? options[selectedIndex] : undefined;
+            if (opt && isModelOptionSelectable(opt)) {
                 if (shouldOpenEffortPicker(opt)) {
                     setPhase({
                         kind: "effort",
@@ -287,23 +441,25 @@ export function ModelPicker({ registry, current, currentThinkingLevel, recent, o
                     });
                 }
                 else {
-                    onSelect(opt.id, opt.reasoningLevels[0] ?? "off");
+                    const level = opt.reasoningLevels[0];
+                    if (level)
+                        onSelect(opt.id, level);
                 }
             }
             return;
         }
         if (action === "up") {
-            setSelectedIndex((i) => clampPickerIndex(i - 1, options.length));
+            setSelectedId((id) => moveModelSelection(options, id, -1));
             return;
         }
         if (action === "down") {
-            setSelectedIndex((i) => clampPickerIndex(i + 1, options.length));
+            setSelectedId((id) => moveModelSelection(options, id, 1));
             return;
         }
         if (action === "backspace" || action === "delete") {
             setQuery((q) => {
                 const next = q.slice(0, -1);
-                setSelectedIndex(0);
+                setSelectedId(undefined);
                 return next;
             });
             return;
@@ -311,47 +467,60 @@ export function ModelPicker({ registry, current, currentThinkingLevel, recent, o
         if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
             setQuery((q) => {
                 const next = q + input;
-                setSelectedIndex(0);
+                setSelectedId(undefined);
                 return next;
             });
             return;
         }
     });
-    const safeSelectedIndex = clampPickerIndex(selectedIndex, options.length);
-    const start = pickerWindowStart(safeSelectedIndex, options.length, bodyRows);
-    const visible = options.slice(start, start + bodyRows);
+    const displayItems = buildModelPickerDisplayItems(options);
+    const safeSelectedDisplayIndex = resolveModelPickerDisplayIndex(displayItems, resolvedSelectedId);
+    const start = pickerWindowStart(safeSelectedDisplayIndex, displayItems.length, bodyRows);
+    const visible = displayItems.slice(start, start + bodyRows);
     const rawModelRows = options.length === 0
         ? [{
                 key: "no-results",
                 row: formatNoModelResultsRow(query, rowWidth),
                 selected: false,
+                header: false,
             }]
-        : visible.map((opt, i) => {
-            const actualIndex = start + i;
-            const isSelected = actualIndex === safeSelectedIndex;
+        : visible.map((item) => {
+            if (item.kind === "header") {
+                return {
+                    key: item.key,
+                    row: padVisual(truncateVisual(`  ${item.label}`, rowWidth), rowWidth),
+                    selected: false,
+                    header: true,
+                };
+            }
+            const isSelected = item.option.id === resolvedSelectedId;
             return {
-                key: opt.id,
-                row: formatModelPickerRow(opt, {
+                key: item.key,
+                row: formatModelPickerRow(item.option, {
                     selected: isSelected,
-                    current: opt.id === current,
+                    current: item.option.id === current,
                     width: rowWidth,
                 }),
                 selected: isSelected,
+                header: false,
             };
         });
     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,
+        header: rawModelRows[index]?.header ?? false,
     }));
-    const highlightedOption = options[clampPickerIndex(selectedIndex, options.length)];
-    const enterAction = highlightedOption && shouldOpenEffortPicker(highlightedOption)
-        ? (isThinkingToggleOption(highlightedOption) ? "choose mode" : "choose effort")
-        : "select";
+    const highlightedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
+    const enterAction = highlightedOption
+        ? (shouldOpenEffortPicker(highlightedOption)
+            ? (isThinkingToggleOption(highlightedOption) ? "choose mode" : "choose effort")
+            : "select")
+        : "wait";
     const effortTitle = phase.kind === "effort" && isThinkingToggleOption(phase.model)
         ? "Select Thinking Mode"
         : "Select Reasoning Effort";
-    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" ? effortTitle : "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 }), _jsxs(Text, { color: theme.muted, children: ["\u2191/\u2193 navigate \u00B7 Enter ", enterAction, " \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))) })] }));
+    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" ? effortTitle : "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 }), _jsxs(Text, { color: theme.muted, children: ["\u2191/\u2193 navigate \u00B7 Enter ", enterAction, " \u00B7 Esc cancel \u00B7 Ctrl+R retry"] }), _jsx(Box, { height: 1, overflow: "hidden", children: _jsx(Text, { color: discoveryStatus.hasError ? theme.warning : theme.muted, children: discoveryStatus.text || " " }) })] })), phase.kind === "model" && _jsx(Box, { flexDirection: "column", height: bodyRows, overflow: "hidden", marginTop: 1, children: modelRows.map(({ key, row, selected, header }) => (_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(Text, { color: selected ? theme.accent : (header || key === "no-results" ? theme.muted : undefined), bold: selected || header, children: row }) }, key))) })] }));
 }
 function EffortPickerView({ model, selectedIndex, bodyRows, rowWidth, }) {
     const theme = useTheme();
@@ -388,40 +557,124 @@ function SearchField({ query, placeholder, width }) {
     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();
+    const providers = registry.getEnabled().filter((provider) => isUserVisibleProvider(provider.id));
+    const localModelsByProvider = new Map(providers.map((provider) => [
+        provider.id,
+        localModelsForProvider(registry, provider),
+    ]));
+    return buildMergedModelOptions({
+        providers,
+        localModelsByProvider,
+        discoveries: new Map(),
+        current,
+        recent,
+    });
+}
+export function buildMergedModelOptions(input) {
     const opts = [];
     const seen = new Set();
-    for (const model of recent.slice(0, 5)) {
-        const { providerId } = decodeModel(model);
-        const provider = enabled.find((item) => item.id === providerId);
-        appendModelOption(opts, seen, {
-            id: model,
-            label: displayModel(model),
-            group: "Recent",
-            providerBadge: provider?.name || providerId || "",
-        });
+    const providerById = new Map(input.providers.map((provider) => [provider.id, provider]));
+    const effectiveModelsByProvider = new Map(input.providers.map((provider) => {
+        const localModels = input.localModelsByProvider.get(provider.id) ?? [];
+        const discovery = input.discoveries.get(provider.id);
+        return [provider.id, effectiveProviderModels(localModels, discovery)];
+    }));
+    const promotedFamilies = new Set();
+    const promotedRecentProviderIds = [];
+    const familyKeyForId = (id) => {
+        const { providerId, modelId } = decodeModel(id);
+        const provider = providerId ? providerById.get(providerId) : undefined;
+        return provider
+            ? modelPickerFamilyKey(provider, modelId)
+            : `unknown:${id}`;
+    };
+    const appendPinned = (id, group) => {
+        appendModelOption(opts, seen, pinnedModelOption({
+            id,
+            group,
+            providers: input.providers,
+            localModelsByProvider: input.localModelsByProvider,
+            discoveries: input.discoveries,
+        }));
+    };
+    const appendFamily = (seedId, group) => {
+        const { providerId, modelId } = decodeModel(seedId);
+        const provider = providerId ? providerById.get(providerId) : undefined;
+        if (!provider) {
+            appendPinned(seedId, group);
+            return;
+        }
+        const familyKey = modelPickerFamilyKey(provider, modelId);
+        const familyModels = (effectiveModelsByProvider.get(provider.id) ?? [])
+            .filter((model) => modelPickerFamilyKey(provider, model.id) === familyKey);
+        for (const model of familyModels) {
+            appendModelOption(opts, seen, {
+                ...modelOptionMetadata(encodeModel(provider.id, model.id), model, true),
+                group,
+                providerBadge: provider.name,
+                available: true,
+                pending: false,
+            });
+        }
+        // Keep an exact Current/Recent pin visible even when an authoritative
+        // catalog no longer contains it. It remains unavailable and never causes
+        // local siblings to be reintroduced.
+        if (!familyModels.some((model) => model.id === modelId))
+            appendPinned(seedId, group);
+    };
+    if (input.current) {
+        appendPinned(input.current, "Current");
+        const currentFamilyKey = familyKeyForId(input.current);
+        promotedFamilies.add(currentFamilyKey);
+        appendFamily(input.current, "Current");
+    }
+    let recentFamilyCount = 0;
+    for (const recentId of [...new Set(input.recent)]) {
+        if (!recentId || recentId === input.current)
+            continue;
+        const familyKey = familyKeyForId(recentId);
+        if (promotedFamilies.has(familyKey)) {
+            // A previously promoted family may not contain this exact Recent model
+            // in an authoritative catalog. Preserve that pin as unavailable; when
+            // it is present, exact-ID deduplication makes this a no-op.
+            appendPinned(recentId, "Recent");
+            continue;
+        }
+        promotedFamilies.add(familyKey);
+        recentFamilyCount += 1;
+        const { providerId } = decodeModel(recentId);
+        if (providerId && providerById.has(providerId) && !promotedRecentProviderIds.includes(providerId)) {
+            promotedRecentProviderIds.push(providerId);
+        }
+        appendFamily(recentId, "Recent");
+        if (recentFamilyCount >= MODEL_PICKER_RECENT_FAMILY_LIMIT)
+            break;
     }
-    for (const provider of enabled.filter((item) => isUserVisibleProvider(item.id))) {
-        for (const model of localModelsForProvider(registry, provider)) {
+    const orderedProviderIds = [];
+    const addProviderId = (providerId) => {
+        if (providerId && providerById.has(providerId) && !orderedProviderIds.includes(providerId)) {
+            orderedProviderIds.push(providerId);
+        }
+    };
+    addProviderId(decodeModel(input.current).providerId);
+    for (const providerId of promotedRecentProviderIds)
+        addProviderId(providerId);
+    for (const provider of input.providers)
+        addProviderId(provider.id);
+    for (const providerId of orderedProviderIds) {
+        const provider = providerById.get(providerId);
+        if (!provider)
+            continue;
+        for (const model of effectiveModelsByProvider.get(provider.id) ?? []) {
             appendModelOption(opts, seen, {
-                id: encodeModel(model.providerId, model.id),
-                label: model.name,
+                ...modelOptionMetadata(encodeModel(provider.id, model.id), model, true),
                 group: provider.name,
                 providerBadge: provider.name,
+                available: true,
+                pending: false,
             });
         }
     }
-    if (current && !seen.has(current)) {
-        const { providerId } = decodeModel(current);
-        const provider = enabled.find((item) => item.id === providerId);
-        opts.unshift({
-            id: current,
-            label: displayModel(current),
-            group: "Current",
-            providerBadge: provider?.name || providerId || "",
-            reasoningLevels: reasoningLevelsForModel(current),
-        });
-    }
     return opts;
 }
 function localModelsForProvider(registry, provider) {
@@ -435,20 +688,104 @@ function localModelsForProvider(registry, provider) {
         id: model.id,
         name: model.name,
         providerId: provider.id,
+        reasoningLevels: model.reasoningLevels,
+        defaultReasoningLevel: model.defaultReasoningLevel,
+        contextWindow: model.contextWindow,
+        toolOutputTokenLimit: model.toolOutputTokenLimit,
     }));
 }
 function appendModelOption(options, seen, option) {
     if (seen.has(option.id))
         return;
     seen.add(option.id);
-    options.push({
-        ...option,
-        reasoningLevels: option.reasoningLevels ?? reasoningLevelsForModel(option.id),
-    });
+    options.push(option);
 }
-function preferredModelIndex(options, current) {
-    const idx = options.findIndex((option) => option.id === current);
-    return idx >= 0 ? idx : 0;
+function pinnedModelOption(input) {
+    const { providerId, modelId } = decodeModel(input.id);
+    const provider = input.providers.find((item) => item.id === providerId);
+    if (!provider) {
+        return {
+            ...modelOptionMetadata(input.id, undefined, false),
+            group: input.group,
+            providerBadge: providerId || "",
+            available: false,
+            pending: false,
+        };
+    }
+    const local = input.localModelsByProvider.get(provider.id) ?? [];
+    const discovery = input.discoveries.get(provider.id);
+    const discoveredModel = discovery?.models.find((model) => model.id === modelId);
+    const localModel = local.find((model) => model.id === modelId);
+    const metadata = discoveredModel ?? localModel;
+    const hasKnownMetadata = !!metadata;
+    let available = hasKnownMetadata;
+    let pending = false;
+    if (!discovery || discovery.status === "pending") {
+        pending = !hasKnownMetadata;
+    }
+    else if (discovery.authoritative) {
+        available = !!discoveredModel;
+    }
+    return {
+        ...modelOptionMetadata(input.id, metadata, hasKnownMetadata),
+        group: input.group,
+        providerBadge: provider.name,
+        available,
+        pending,
+    };
+}
+function effectiveProviderModels(localModels, discovery) {
+    if (!discovery)
+        return localModels;
+    if (discovery.authoritative)
+        return discovery.models;
+    return discovery.models.length > 0 ? discovery.models : localModels;
+}
+function modelOptionMetadata(id, rawModel, known) {
+    const model = rawModel;
+    const reasoningLevels = model?.reasoningLevels
+        ? [...model.reasoningLevels]
+        : (known ? reasoningLevelsForModel(id) : []);
+    const defaultReasoningLevel = model?.defaultReasoningLevel
+        && reasoningLevels.includes(model.defaultReasoningLevel)
+        ? model.defaultReasoningLevel
+        : undefined;
+    return {
+        id,
+        label: model?.name || displayModel(id),
+        reasoningLevels,
+        defaultReasoningLevel,
+        contextWindow: model?.contextWindow,
+        toolOutputTokenLimit: model?.toolOutputTokenLimit,
+    };
+}
+async function discoverModelsForPicker(registry, provider, forceRefresh) {
+    return registry.discoverModels(provider, { forceRefresh });
+}
+export function formatModelDiscoveryStatus(providers, discoveries) {
+    if (providers.some((provider) => discoveries.get(provider.id)?.status !== "complete")) {
+        return { text: "Refreshing model catalog…", hasError: false };
+    }
+    const failed = providers.filter((provider) => discoveries.get(provider.id)?.error);
+    if (failed.length > 0) {
+        const names = failed.slice(0, 2).map((provider) => provider.name).join(", ");
+        const suffix = failed.length > 2 ? ` +${failed.length - 2}` : "";
+        return { text: `Showing fallback models for ${names}${suffix} · Ctrl+R retry`, hasError: true };
+    }
+    return { text: "", hasError: false };
+}
+function sameModelOptionMetadata(left, right) {
+    return left.id === right.id
+        && left.label === right.label
+        && left.group === right.group
+        && left.providerBadge === right.providerBadge
+        && left.defaultReasoningLevel === right.defaultReasoningLevel
+        && left.contextWindow === right.contextWindow
+        && left.toolOutputTokenLimit === right.toolOutputTokenLimit
+        && left.available === right.available
+        && left.pending === right.pending
+        && left.reasoningLevels.length === right.reasoningLevels.length
+        && left.reasoningLevels.every((level, index) => level === right.reasoningLevels[index]);
 }
 function reasoningLevelsForModel(model) {
     const { providerId, modelId } = decodeModel(model);
@@ -463,6 +800,16 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title,
         const idx = providers.findIndex((p) => p.id === current);
         return idx >= 0 ? idx : 0;
     });
+    // Authoritative selection lives in a ref, mutated synchronously by the
+    // input handler; state only mirrors it for display. Slow ptys (web-terminal
+    // bridges) can deliver several key events before React commits a re-render,
+    // and a state-only selection would leave the handler closure stale — Enter
+    // would then select the pre-batch highlight.
+    const selectedIndexRef = useRef(selectedIndex);
+    const moveSelection = (next) => {
+        selectedIndexRef.current = next;
+        setSelectedIndex(next);
+    };
     useEffect(() => {
         const p = providers[selectedIndex];
         if (p)
@@ -477,30 +824,31 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title,
             return;
         }
         if (action === "enter") {
-            const p = providers[selectedIndex];
+            const p = providers[selectedIndexRef.current];
             if (p)
                 onSelect(p.id);
             return;
         }
         if (action === "up") {
-            setSelectedIndex((i) => Math.max(0, i - 1));
+            moveSelection((selectedIndexRef.current - 1 + providers.length) % providers.length);
             return;
         }
         if (action === "down") {
-            setSelectedIndex((i) => Math.min(providers.length - 1, i + 1));
+            moveSelection((selectedIndexRef.current + 1) % providers.length);
             return;
         }
         if (isPrintablePickerInput(input) && input.length === 1 && /[a-z]/i.test(input)) {
             const char = input.toLowerCase();
-            for (let i = selectedIndex + 1; i < providers.length; i++) {
+            const from = selectedIndexRef.current;
+            for (let i = from + 1; i < providers.length; i++) {
                 if (providers[i].name.toLowerCase().startsWith(char)) {
-                    setSelectedIndex(i);
+                    moveSelection(i);
                     return;
                 }
             }
-            for (let i = 0; i <= selectedIndex; i++) {
+            for (let i = 0; i <= from; i++) {
                 if (providers[i].name.toLowerCase().startsWith(char)) {
-                    setSelectedIndex(i);
+                    moveSelection(i);
                     return;
                 }
             }
@@ -508,7 +856,12 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title,
     });
     const start = Math.max(0, Math.min(selectedIndex, providers.length - maxVisible));
     const visible = providers.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: title || "Select Provider" }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel \u00B7 type letter to jump" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: visible.map((p, i) => {
+    return (
+    // backgroundColor lives on the picker's OWN root box, below its state:
+    // a canvas toggle (theme preview across a forced-theme mismatch) then
+    // reshapes only this stateless output subtree. On an ancestor wrapper it
+    // would remount the whole picker and reset selectedIndex mid-navigation.
+    _jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, backgroundColor: theme.background, children: [_jsx(Text, { bold: true, color: theme.accent, children: title || "Select Provider" }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel \u00B7 type letter to jump" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: visible.map((p, i) => {
                     const actualIndex = start + i;
                     const isSelected = actualIndex === selectedIndex;
                     return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", p.name, p.id === current ? " (current)" : "", !p.enabled ? " [disabled]" : ""] }) }, p.id));