@bubblebrain-ai/bubble 0.0.52 → 0.0.54

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

@@ -1,966 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 { listBuiltinModels } from "../model-catalog.js";
-import { padVisual, truncateVisual } from "../text-display.js";
-import { hasTerminalMouseSequence } from "./terminal-mouse.js";
-import { getAvailableThinkingLevels, isThinkingOnlyLevels, isThinkingToggleModel, normalizeThinkingLevel } from "../provider-transform.js";
-export { padVisual, truncateVisual } from "../text-display.js";
-export function resolvePickerKeyAction(input, key) {
-    if (key.escape)
-        return "escape";
-    if (key.return)
-        return "enter";
-    if (key.upArrow)
-        return "up";
-    if (key.downArrow)
-        return "down";
-    if (key.backspace)
-        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))
-        return "up";
-    if (/^(?:O|\[[\d;:]*)B/.test(sequence))
-        return "down";
-    return undefined;
-}
-export function isPrintablePickerInput(input) {
-    if (!input)
-        return false;
-    if (hasTerminalMouseSequence(input))
-        return false;
-    if (input.startsWith("\x1b"))
-        return false;
-    if (isRawEscapeTail(input))
-        return false;
-    return !/[\x00-\x1f\x7f]/.test(input);
-}
-export function formatSkillPickerRow(skill, options) {
-    const width = Math.max(12, options.width);
-    const marker = options.selected ? "> " : "  ";
-    const nameBudget = Math.max(8, Math.min(28, Math.floor(width * 0.35)));
-    const name = truncateVisual(skill.name, nameBudget);
-    const nameCell = padVisual(name, nameBudget);
-    const description = (skill.description ?? "").replace(/\s+/g, " ").trim();
-    const row = description
-        ? `${marker}${nameCell}  ${description}`
-        : `${marker}${nameCell}`;
-    return padVisual(truncateVisual(row, width), width);
-}
-export const MODEL_PICKER_MAX_BODY_ROWS = 10;
-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));
-}
-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;
-}
-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";
-    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 = 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)));
-    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 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;
-}
-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";
-    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";
-        case "ultra":
-            return "maximum effort with delegation";
-        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, currentThinkingLevel, recent, onSelect, onCancel }) {
-    const theme = useTheme();
-    const { stdout } = useStdout();
-    const termHeight = stdout?.rows || 24;
-    const terminalColumns = stdout?.columns || 80;
-    const bodyRows = modelPickerBodyRows(termHeight);
-    const rowWidth = Math.max(36, Math.min(110, terminalColumns - 6));
-    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 [selectedId, setSelectedId] = useState(() => resolveSelectedModelId(buildLocalModelOptions(registry, current, recent), current));
-    const [phase, setPhase] = useState({ kind: "model" });
-    useEffect(() => {
-        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,
-                });
-            }
-            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;
-                });
-            })
-                .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;
-                });
-            });
-        }
-        return () => {
-            if (requestGenerationRef.current === generation)
-                requestGenerationRef.current++;
-        };
-    }, [registry, providerKey, refreshGeneration]);
-    const options = useMemo(() => {
-        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;
-        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") {
-                const level = levels[clampPickerIndex(phase.selectedIndex, levels.length)];
-                if (level)
-                    onSelect(phase.model.id, level);
-                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 (key.ctrl && (input.toLowerCase() === "r" || input === "\x12")) {
-            setRefreshGeneration((generation) => generation + 1);
-            return;
-        }
-        if (action === "escape") {
-            onCancel();
-            return;
-        }
-        if (action === "enter") {
-            const opt = selectedIndex >= 0 ? options[selectedIndex] : undefined;
-            if (opt && isModelOptionSelectable(opt)) {
-                if (shouldOpenEffortPicker(opt)) {
-                    setPhase({
-                        kind: "effort",
-                        model: opt,
-                        selectedIndex: preferredEffortIndex(opt, currentThinkingLevel),
-                    });
-                }
-                else {
-                    const level = opt.reasoningLevels[0];
-                    if (level)
-                        onSelect(opt.id, level);
-                }
-            }
-            return;
-        }
-        if (action === "up") {
-            setSelectedId((id) => moveModelSelection(options, id, -1));
-            return;
-        }
-        if (action === "down") {
-            setSelectedId((id) => moveModelSelection(options, id, 1));
-            return;
-        }
-        if (action === "backspace" || action === "delete") {
-            setQuery((q) => {
-                const next = q.slice(0, -1);
-                setSelectedId(undefined);
-                return next;
-            });
-            return;
-        }
-        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
-            setQuery((q) => {
-                const next = q + input;
-                setSelectedId(undefined);
-                return next;
-            });
-            return;
-        }
-    });
-    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((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: item.key,
-                row: formatModelPickerRow(item.option, {
-                    selected: isSelected,
-                    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 = 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 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();
-    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: isThinkingToggleOption(model),
-        }),
-        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, width }) {
-    const theme = useTheme();
-    const [cursorVisible, setCursorVisible] = useState(true);
-    useEffect(() => {
-        const t = setInterval(() => setCursorVisible((v) => !v), 500);
-        return () => clearInterval(t);
-    }, []);
-    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 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();
-    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;
-    }
-    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, {
-                ...modelOptionMetadata(encodeModel(provider.id, model.id), model, true),
-                group: provider.name,
-                providerBadge: provider.name,
-                available: true,
-                pending: false,
-            });
-        }
-    }
-    return opts;
-}
-function localModelsForProvider(registry, provider) {
-    const customModels = registry.getModelConfig().getCustomModels(provider.id);
-    if (customModels.length > 0)
-        return customModels;
-    const builtinProviderId = provider.id === "openai" && provider.authType === "oauth"
-        ? "openai-codex"
-        : provider.id;
-    return listBuiltinModels(builtinProviderId).map((model) => ({
-        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);
-}
-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);
-    return getAvailableThinkingLevels(providerId || "openai", modelId);
-}
-export function ProviderPicker({ providers, current, onSelect, onCancel, title, onHighlight }) {
-    const theme = useTheme();
-    const { stdout } = useStdout();
-    const termHeight = stdout?.rows || 24;
-    const maxVisible = Math.max(5, termHeight - 8);
-    const [selectedIndex, setSelectedIndex] = useState(() => {
-        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)
-            onHighlight?.(p.id);
-    }, [selectedIndex]);
-    useInput((input, key) => {
-        if (isKeyReleaseEvent(key))
-            return;
-        const action = resolvePickerKeyAction(input, key);
-        if (action === "escape") {
-            onCancel();
-            return;
-        }
-        if (action === "enter") {
-            const p = providers[selectedIndexRef.current];
-            if (p)
-                onSelect(p.id);
-            return;
-        }
-        if (action === "up") {
-            moveSelection((selectedIndexRef.current - 1 + providers.length) % providers.length);
-            return;
-        }
-        if (action === "down") {
-            moveSelection((selectedIndexRef.current + 1) % providers.length);
-            return;
-        }
-        if (isPrintablePickerInput(input) && input.length === 1 && /[a-z]/i.test(input)) {
-            const char = input.toLowerCase();
-            const from = selectedIndexRef.current;
-            for (let i = from + 1; i < providers.length; i++) {
-                if (providers[i].name.toLowerCase().startsWith(char)) {
-                    moveSelection(i);
-                    return;
-                }
-            }
-            for (let i = 0; i <= from; i++) {
-                if (providers[i].name.toLowerCase().startsWith(char)) {
-                    moveSelection(i);
-                    return;
-                }
-            }
-        }
-    });
-    const start = Math.max(0, Math.min(selectedIndex, providers.length - maxVisible));
-    const visible = providers.slice(start, start + maxVisible);
-    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));
-                }) })] }));
-}
-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();
-            return;
-        }
-        if (action === "enter") {
-            if (value.trim())
-                onSubmit(value.trim());
-            return;
-        }
-        if (action === "backspace" || action === "delete") {
-            setValue((v) => v.slice(0, -1));
-            return;
-        }
-        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
-            setValue((v) => v + input);
-        }
-    });
-    // Append pasted clipboard content directly into the key field. Without
-    // this the paste falls through to whichever other hook (InputBox's
-    // usePaste) is active, and the key ends up in the main input area.
-    usePaste((pasted) => {
-        const clean = pasted.replace(/[\r\n\t]/g, "").trim();
-        if (clean)
-            setValue((v) => v + clean);
-    });
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsxs(Text, { bold: true, color: theme.accent, children: ["Enter API Key for ", providerName] }), _jsx(Text, { color: theme.muted, children: "Paste or type the key \u00B7 Enter to submit \u00B7 Esc to cancel" }), _jsx(SearchField, { query: value.replace(/./g, "*"), placeholder: "Paste your key here..." })] }));
-}
-export function SkillPicker({ skills, onSelect, onCancel }) {
-    const theme = useTheme();
-    const { stdout } = useStdout();
-    const termHeight = stdout?.rows || 24;
-    const terminalColumns = stdout?.columns || 80;
-    const maxVisible = Math.max(5, termHeight - 8);
-    const rowWidth = Math.max(36, Math.min(96, terminalColumns - 6));
-    const [query, setQuery] = useState("");
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const options = useMemo(() => {
-        const q = query.trim().toLowerCase();
-        if (!q)
-            return skills;
-        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();
-            return;
-        }
-        if (action === "enter") {
-            const skill = options[selectedIndex];
-            if (skill)
-                onSelect(skill.name);
-            return;
-        }
-        if (action === "up") {
-            setSelectedIndex((i) => Math.max(0, i - 1));
-            return;
-        }
-        if (action === "down") {
-            setSelectedIndex((i) => Math.min(Math.max(0, options.length - 1), i + 1));
-            return;
-        }
-        if (action === "backspace" || action === "delete") {
-            setQuery((q) => {
-                const next = q.slice(0, -1);
-                setSelectedIndex(0);
-                return next;
-            });
-            return;
-        }
-        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
-            setQuery((q) => {
-                const next = q + input;
-                setSelectedIndex(0);
-                return next;
-            });
-        }
-    });
-    const maxStart = Math.max(0, options.length - maxVisible);
-    const start = Math.max(0, Math.min(maxStart, selectedIndex - Math.floor(maxVisible / 2)));
-    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 Skill" }), _jsx(SearchField, { query: query, placeholder: "Type to search skills..." }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter load \u00B7 Esc cancel \u00B7 Backspace clear" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [options.length === 0 && (_jsxs(Text, { color: theme.muted, children: ["No skills match \"", query, "\""] })), visible.map((skill, i) => {
-                        const actualIndex = start + i;
-                        const isSelected = actualIndex === selectedIndex;
-                        const row = formatSkillPickerRow(skill, { selected: isSelected, width: rowWidth });
-                        return (_jsx(Box, { children: _jsx(Text, { inverse: isSelected, color: isSelected ? theme.accent : undefined, bold: isSelected, children: row }) }, skill.name));
-                    })] })] }));
-}