@tianmucreations/jeeves 0.2.0

package/dist/components/ModelPicker.js

@@ -0,0 +1,457 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import Fuse from 'fuse.js';
+import { session, useSession } from '../state/session.js';
+import { isToolCapable } from '../models/filter.js';
+import { compactContext, compactPrice, isFastModel, resolveCurated, cleanModelName, } from '../models/registry.js';
+import { setFavorites, setRecents, setDefaultModel, setDefaultProvider } from '../platform/config.js';
+import { summariseHistory } from '../agent/context.js';
+import { hasCredentialsFor, PROVIDER_ROWS } from '../providers/index.js';
+import { listLocalOllamaModels, isOllamaOnline } from '../providers/ollama.js';
+import { ZAI_MODELS } from '../providers/zai.js';
+import { resetStickySession } from '../providers/openrouter.js';
+const TABS = ['favorites', 'recent', 'all', 'tools'];
+const TAB_LABELS = {
+    favorites: 'Favorites',
+    recent: 'Recent',
+    all: 'All',
+    tools: 'Tool-capable',
+};
+// The calm first step uses the shared provider list; keys live in the OS keychain (Phase 7).
+const PROVIDER_ORDER = ['openrouter', 'zai', 'anthropic', 'openai', 'google', 'x-ai', 'groq', 'mistral', 'ollama'];
+const PROVIDER_LABELS = {
+    openrouter: 'OpenRouter',
+    zai: 'Z.ai',
+    anthropic: 'Anthropic',
+    openai: 'OpenAI',
+    google: 'Google',
+    'x-ai': 'xAI',
+    groq: 'Groq',
+    mistral: 'Mistral',
+    ollama: 'Ollama',
+};
+function providerLabel(provider) {
+    return PROVIDER_LABELS[provider] ?? provider;
+}
+function groupModels(models) {
+    const groups = new Map();
+    for (const model of models) {
+        const list = groups.get(model.provider);
+        if (list) {
+            list.push(model);
+        }
+        else {
+            groups.set(model.provider, [model]);
+        }
+    }
+    return groups;
+}
+function orderedProviders(groups) {
+    const rest = [...groups.keys()].filter((provider) => !PROVIDER_ORDER.includes(provider)).sort();
+    return [...PROVIDER_ORDER.filter((provider) => groups.has(provider)), ...rest];
+}
+function column(text, width) {
+    return text.length >= width ? text.slice(0, width - 1) + '…' : text.padEnd(width);
+}
+function rowText(model) {
+    return (column(model.name, 30) +
+        column(model.provider, 11) +
+        column(compactContext(model.contextLength), 7) +
+        column(compactPrice(model.promptPrice, model.completionPrice, model.priceLabel), 20) +
+        (isToolCapable(model) ? '✓' : '✗') +
+        (isFastModel(model) ? ' »' : ''));
+}
+function poolFor(tab, models, favorites, recents) {
+    const byId = new Map(models.map((model) => [model.id, model]));
+    if (tab === 'favorites')
+        return favorites.map((id) => byId.get(id)).filter((m) => m !== undefined);
+    if (tab === 'recent')
+        return recents.map((id) => byId.get(id)).filter((m) => m !== undefined);
+    if (tab === 'tools')
+        return models.filter(isToolCapable);
+    return models;
+}
+function fuzzyMatch(pool, query) {
+    if (!query)
+        return pool;
+    const fuse = new Fuse(pool, { keys: ['name', 'id'], threshold: 0.4, ignoreLocation: true });
+    return fuse.search(query).map((result) => result.item);
+}
+// The cursor skips group headers; back, show-all, and model rows are all selectable.
+function resolveIndex(items, cursor) {
+    const start = cursor < 0 ? 0 : cursor;
+    for (let i = start; i < items.length; i++) {
+        if (items[i].kind !== 'header')
+            return i;
+    }
+    for (let i = Math.min(start, items.length - 1); i >= 0; i--) {
+        if (items[i].kind !== 'header')
+            return i;
+    }
+    return -1;
+}
+function stepItem(items, from, delta) {
+    let i = from;
+    do {
+        i += delta;
+    } while (i >= 0 && i < items.length && items[i].kind === 'header');
+    return i >= 0 && i < items.length ? i : from;
+}
+export function ModelPicker({ rows, columns }) {
+    const s = useSession();
+    const [step, setStep] = useState('providers');
+    // The remembered provider starts highlighted so one Enter continues where you left off.
+    const [providerCursor, setProviderCursor] = useState(() => {
+        const remembered = PROVIDER_ROWS.findIndex((row) => row.id === session.providerId);
+        return remembered >= 0 ? remembered : 0;
+    });
+    const [providerChoice, setProviderChoice] = useState('openrouter');
+    const [ollamaOnline, setOllamaOnline] = useState(null);
+    const [ollamaModels, setOllamaModels] = useState(null);
+    const [tab, setTab] = useState('all');
+    const [query, setQuery] = useState('');
+    const [cursor, setCursor] = useState(0);
+    const [phase, setPhase] = useState('browse');
+    const [pending, setPending] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        void isOllamaOnline().then((online) => {
+            if (!cancelled)
+                setOllamaOnline(online);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const catalog = providerChoice === 'ollama' ? (ollamaModels ?? []) : providerChoice === 'zai' ? ZAI_MODELS : s.models;
+    const listHeight = Math.max(1, rows - 5);
+    const items = useMemo(() => {
+        if (step === 'curated') {
+            const picks = resolveCurated(catalog);
+            const flat = [{ kind: 'back' }, { kind: 'header', label: 'Recommended' }];
+            for (const pick of picks) {
+                flat.push({ kind: 'model', model: pick.model, blurb: pick.blurb });
+            }
+            flat.push({ kind: 'header', label: '──────────' }, { kind: 'show-all' });
+            return flat;
+        }
+        if (step === 'full') {
+            const pool = poolFor(tab, catalog, s.favorites, s.recents);
+            const matched = fuzzyMatch(pool, query);
+            const flat = [{ kind: 'back' }];
+            if (providerChoice === 'ollama') {
+                flat.push({ kind: 'header', label: 'Ollama (local)' });
+                for (const model of matched)
+                    flat.push({ kind: 'model', model });
+            }
+            else {
+                const groups = groupModels(matched);
+                for (const provider of orderedProviders(groups)) {
+                    flat.push({ kind: 'header', label: providerLabel(provider) });
+                    for (const model of groups.get(provider) ?? []) {
+                        flat.push({ kind: 'model', model });
+                    }
+                }
+            }
+            return flat;
+        }
+        return [];
+    }, [step, tab, query, catalog, s.favorites, s.recents, providerChoice]);
+    const resolved = resolveIndex(items, cursor);
+    const half = Math.floor(listHeight / 2);
+    const start = Math.max(0, Math.min(items.length - listHeight, resolved - half));
+    const visible = items.slice(start, start + listHeight);
+    const highlighted = resolved >= 0 && items[resolved]?.kind === 'model' ? items[resolved].model : null;
+    function providerEnabled(rowId) {
+        if (rowId === 'openrouter')
+            return hasCredentialsFor('openrouter');
+        if (rowId === 'zai')
+            return hasCredentialsFor('zai');
+        if (rowId === 'ollama')
+            return ollamaOnline === true;
+        return false;
+    }
+    function providerHint(rowId) {
+        if (rowId === 'ollama') {
+            return ollamaOnline === null ? 'checking…' : 'not running - start the Ollama app';
+        }
+        return 'add key with /keys';
+    }
+    function enterModelStep(forProvider) {
+        setProviderChoice(forProvider);
+        setQuery('');
+        setTab('all');
+        // Big catalogs get the curated shortlist first; small ones go straight to the full list.
+        const big = forProvider === 'openrouter' ? s.models.length > 8 : false;
+        if (big) {
+            // The remembered model starts highlighted so one Enter accepts it.
+            const picks = resolveCurated(s.models);
+            const remembered = picks.findIndex((pick) => pick.model.id === s.model);
+            setCursor(remembered >= 0 ? 2 + remembered : 1);
+        }
+        else {
+            setCursor(1);
+        }
+        setStep(big ? 'curated' : 'full');
+    }
+    function chooseProvider() {
+        const row = PROVIDER_ROWS[providerCursor];
+        if (!row)
+            return;
+        if (row.id === 'openrouter') {
+            if (!hasCredentialsFor('openrouter'))
+                return;
+            enterModelStep('openrouter');
+        }
+        else if (row.id === 'zai') {
+            if (!hasCredentialsFor('zai'))
+                return;
+            enterModelStep('zai');
+        }
+        else if (row.id === 'ollama') {
+            if (ollamaOnline !== true)
+                return;
+            enterModelStep('ollama');
+            void listLocalOllamaModels()
+                .then(setOllamaModels)
+                .catch(() => setOllamaModels([]));
+        }
+    }
+    function goBack() {
+        if (step === 'full' && providerChoice === 'openrouter') {
+            setQuery('');
+            setCursor(1);
+            setStep('curated');
+        }
+        else if (step === 'curated' || step === 'full') {
+            setStep('providers');
+        }
+    }
+    function backLabel() {
+        return step === 'full' && providerChoice === 'openrouter' ? '← Back to recommended' : '← Back to providers';
+    }
+    function applyModel(model) {
+        const provider = providerChoice;
+        s.setProvider(provider);
+        s.setModel(model.id);
+        setDefaultProvider(provider);
+        setDefaultModel(model.id);
+        const updatedRecents = [model.id, ...s.recents.filter((id) => id !== model.id)].slice(0, 10);
+        s.setRecents(updatedRecents);
+        setRecents(updatedRecents);
+    }
+    function toggleFavorite() {
+        if (!highlighted)
+            return;
+        const updated = s.favorites.includes(highlighted.id)
+            ? s.favorites.filter((id) => id !== highlighted.id)
+            : [...s.favorites, highlighted.id];
+        s.setFavorites(updated);
+        setFavorites(updated);
+    }
+    function selectHighlighted() {
+        if (resolved < 0)
+            return;
+        const current = items[resolved];
+        if (!current || current.kind === 'header')
+            return;
+        if (current.kind === 'back') {
+            goBack();
+            return;
+        }
+        if (current.kind === 'show-all') {
+            setStep('full');
+            setQuery('');
+            setTab('all');
+            setCursor(1);
+            return;
+        }
+        const model = current.model;
+        if (model.id === s.model && providerChoice === s.providerId) {
+            s.closePicker();
+            return;
+        }
+        if (!isToolCapable(model)) {
+            setPending(model);
+            setPhase('tool-warning');
+            return;
+        }
+        if (s.history.length > 0) {
+            setPending(model);
+            setPhase('switch-confirm');
+            return;
+        }
+        applyModel(model);
+        s.addNotice(`Switched to ${model.name}.`);
+        s.closePicker();
+    }
+    useInput((input, key) => {
+        if (phase === 'tool-warning') {
+            if (key.return) {
+                if (pending) {
+                    applyModel(pending);
+                    s.addNotice('Chat-only mode - this model cannot call tools.');
+                }
+                s.closePicker();
+            }
+            else if (key.escape) {
+                setPhase('browse');
+            }
+            return;
+        }
+        if (phase === 'switch-confirm') {
+            if (input === 'k') {
+                if (pending) {
+                    applyModel(pending);
+                    s.addNotice(`Switched to ${pending.name} - conversation kept.`);
+                }
+                s.closePicker();
+            }
+            else if (input === 's') {
+                if (pending) {
+                    applyModel(pending);
+                    s.addNotice(`Switched to ${pending.name} - summarising the conversation.`);
+                }
+                s.closePicker();
+                void summariseHistory();
+            }
+            else if (input === 'f') {
+                if (pending) {
+                    applyModel(pending);
+                    s.addNotice(`Switched to ${pending.name} - starting fresh.`);
+                }
+                s.setHistory([]);
+                resetStickySession();
+                s.closePicker();
+            }
+            else if (key.escape) {
+                setPhase('browse');
+            }
+            return;
+        }
+        if (step === 'providers') {
+            if (key.escape) {
+                s.closePicker();
+                return;
+            }
+            if (key.upArrow) {
+                setProviderCursor((current) => Math.max(0, current - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setProviderCursor((current) => Math.min(PROVIDER_ROWS.length - 1, current + 1));
+                return;
+            }
+            if (key.return) {
+                chooseProvider();
+                return;
+            }
+            return;
+        }
+        if (key.escape) {
+            goBack();
+            return;
+        }
+        if (key.upArrow) {
+            setCursor(stepItem(items, resolved, -1));
+            return;
+        }
+        if (key.downArrow) {
+            setCursor(stepItem(items, resolved, 1));
+            return;
+        }
+        if (key.return) {
+            selectHighlighted();
+            return;
+        }
+        if (key.tab && step === 'full') {
+            const next = TABS[(TABS.indexOf(tab) + 1) % TABS.length];
+            setTab(next);
+            setCursor(1);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            if (step === 'full')
+                setQuery((current) => current.slice(0, -1));
+            setCursor(1);
+            return;
+        }
+        if (input === '+') {
+            toggleFavorite();
+            return;
+        }
+        if (!input || key.ctrl || key.meta)
+            return;
+        if (step === 'full') {
+            setQuery((current) => current + input);
+            setCursor(1);
+        }
+    });
+    if (step === 'providers') {
+        return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsx(Text, { dimColor: true, children: "Choose an AI provider" }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: PROVIDER_ROWS.map((row, index) => {
+                        const enabled = providerEnabled(row.id);
+                        const selected = index === providerCursor;
+                        return (_jsxs(Text, { inverse: selected, dimColor: !enabled && !selected, children: [column(' ' + row.label, 16), enabled ? _jsx(Text, { dimColor: true, children: row.description }) : _jsx(Text, { children: providerHint(row.id) })] }, row.id));
+                    }) }), _jsx(Text, { dimColor: true, children: "\u2191\u2193 move \u00B7 Enter choose \u00B7 Esc close" })] }));
+    }
+    if (step === 'curated') {
+        const picks = resolveCurated(catalog);
+        const hint = `↑↓ move · + favorite · Enter select · Esc back`;
+        return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsx(Box, { flexGrow: 1, flexDirection: "column", justifyContent: "center", minHeight: listHeight, children: s.models.length === 0 ? (_jsxs(Text, { dimColor: true, children: [_jsx(Spinner, { type: "dots" }), " Loading the model list\u2026"] })) : (visible.map((item, index) => {
+                        const absoluteIndex = start + index;
+                        const selected = absoluteIndex === resolved;
+                        if (item.kind === 'header') {
+                            return (_jsx(Text, { dimColor: true, children: item.label ? `${item.label}` : '' }, `h${absoluteIndex}`));
+                        }
+                        if (item.kind === 'back') {
+                            return (_jsx(Text, { inverse: selected, dimColor: !selected, children: backLabel() }, "back"));
+                        }
+                        if (item.kind === 'show-all') {
+                            return (_jsxs(Text, { inverse: selected, dimColor: !selected, children: ["Show all ", catalog.length, " models \u2192"] }, "showall"));
+                        }
+                        const tools = isToolCapable(item.model) ? '✓' : '✗';
+                        return (_jsxs(Text, { inverse: selected, children: [' ', cleanModelName(item.model.name), ' ', _jsxs(Text, { dimColor: true, children: ["\u2014 ", compactContext(item.model.contextLength), " ctx \u2014 ", item.blurb ?? '', " \u2014 ", tools, " tools"] })] }, `m${item.model.id}`));
+                    })) }), _jsx(Text, { dimColor: true, children: hint })] }));
+    }
+    const emptyMessage = providerChoice === 'ollama'
+        ? ollamaModels === null
+            ? 'Loading local models…'
+            : ollamaModels.length === 0
+                ? 'Could not reach Ollama - is the app still running?'
+                : ''
+        : s.models.length === 0 && s.modelsNote
+            ? s.modelsNote
+            : s.models.length === 0
+                ? 'Loading the model list…'
+                : items.length <= 1
+                    ? query
+                        ? `No models match "${query}".`
+                        : tab === 'favorites'
+                            ? 'No favorites yet - highlight a model and press +'
+                            : tab === 'recent'
+                                ? 'No recently used models yet.'
+                                : 'No models.'
+                    : '';
+    const hint = phase === 'tool-warning'
+        ? `This model can't call tools, so reading files and running commands won't work.  Enter: continue in chat-only mode · Esc: pick another`
+        : phase === 'switch-confirm'
+            ? `Keep this conversation (k) · Summarise it first (s) · Start fresh (f) · Esc: cancel`
+            : `Tab list · ↑↓ move · type to search · + favorite · Enter select · Esc back`;
+    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsxs(Text, { dimColor: true, children: [providerLabel(providerChoice), " \u2014 all models"] }), _jsx(Box, { children: TABS.map((name) => (_jsxs(React.Fragment, { children: [_jsxs(Text, { inverse: name === tab, dimColor: name !== tab, children: [' ', TAB_LABELS[name], " (", catalog.length && name === 'tools' ? catalog.filter(isToolCapable).length : name === 'all' ? catalog.length : poolFor(name, catalog, s.favorites, s.recents).length, ")", ' '] }), _jsx(Text, { children: " " })] }, name))) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "search: " }), _jsx(Text, { children: query }), _jsx(Text, { dimColor: true, children: query ? '' : 'type to filter' })] }), _jsx(Text, { dimColor: true, children: "context in tokens \u00B7 prices per million tokens \u00B7 \u2713 tools \u00B7 \u00BB fast" }), _jsx(Box, { flexDirection: "column", height: listHeight, children: emptyMessage ? (_jsxs(Text, { dimColor: true, children: [_jsx(Spinner, { type: "dots" }), " ", emptyMessage] })) : (visible.map((item, index) => {
+                    const absoluteIndex = start + index;
+                    if (item.kind === 'header') {
+                        return (_jsx(Text, { dimColor: true, children: `── ${item.label} ──` }, `h${absoluteIndex}`));
+                    }
+                    if (item.kind === 'back') {
+                        const selected = absoluteIndex === resolved;
+                        return (_jsx(Text, { inverse: selected, dimColor: !selected, children: backLabel() }, "back"));
+                    }
+                    if (item.kind === 'show-all') {
+                        return null;
+                    }
+                    const selected = absoluteIndex === resolved;
+                    return (_jsx(Text, { inverse: selected, wrap: "truncate-end", children: rowText(item.model) }, `m${item.model.id}`));
+                })) }), _jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: hint }), _jsx(Text, { dimColor: true, children: s.modelsNote })] })] }));
+}