import React, { useState, useEffect, useCallback } from "react"; import { Box, Text, useInput, useStdout } from "ink"; import type { GooseClient, ProviderInventoryEntryDto } from "@aaif/goose-sdk"; import { CRANBERRY, TEAL, GOLD, TEXT_PRIMARY, TEXT_DIM, RULE_COLOR, } from "./colors.js"; import { Spinner, SPINNER_FRAMES } from "./components/Spinner.js"; import { ErrorScreen } from "./components/ErrorScreen.js"; import { ProviderSelector, ProviderConfigurator } from "./onboarding.js"; const LOAD_MODELS_TIMEOUT_MS = 30000; type Phase = | "loading" | "select_provider" | "configure" | "loading_models" | "select_model" | "saving" | "error"; export type ConfigureIntent = "provider" | "model"; interface ConfigureProps { client: GooseClient; sessionId: string; width: number; height: number; onComplete: () => void; onCancel: () => void; initialIntent?: ConfigureIntent; } interface ModelSelectorProps { provider: ProviderInventoryEntryDto; height: number; onSelect: (model: string) => void; onBack: () => void; } const ModelSelector = React.memo(function ModelSelector({ provider, height, onSelect, onBack, }: ModelSelectorProps) { const [loading, setLoading] = useState(true); const [models, setModels] = useState([]); const [selectedIdx, setSelectedIdx] = useState(0); const [searchQuery, setSearchQuery] = useState(""); const [manualEntry, setManualEntry] = useState(false); const { stdout } = useStdout(); const columns = stdout?.columns ?? 80; useEffect(() => { const availableModels = provider.models.map((model) => model.id); setModels(availableModels); const defaultIdx = availableModels.findIndex((model) => model === provider.defaultModel); setSelectedIdx(defaultIdx >= 0 ? defaultIdx : 0); setLoading(false); }, [provider.models, provider.defaultModel]); const filtered = (() => { if (!searchQuery) return models; const q = searchQuery.toLowerCase(); return models.filter((m) => m.toLowerCase().includes(q)); })(); const maxWidth = Math.min(columns - 4, 80); const HEADER_HEIGHT = 2; const SEARCH_BOX_HEIGHT = 3; const FOOTER_HEIGHT = 3; const CHROME_HEIGHT = HEADER_HEIGHT + SEARCH_BOX_HEIGHT + FOOTER_HEIGHT + 4; const listHeight = Math.max(height - CHROME_HEIGHT, 3); const [scrollOffset, setScrollOffset] = useState(0); useEffect(() => { if (selectedIdx < scrollOffset) { setScrollOffset(selectedIdx); } else if (selectedIdx >= scrollOffset + listHeight) { setScrollOffset(selectedIdx - listHeight + 1); } }, [selectedIdx, scrollOffset, listHeight]); useInput((ch, key) => { if (key.escape) { if (manualEntry) { setManualEntry(false); setSearchQuery(""); return; } if (searchQuery) { setSearchQuery(""); setSelectedIdx(0); setScrollOffset(0); return; } onBack(); return; } if (manualEntry) { if (key.return) { if (searchQuery.trim()) { onSelect(searchQuery.trim()); } return; } if (key.backspace || key.delete) { setSearchQuery((q) => q.slice(0, -1)); return; } if (ch && ch.length === 1 && !key.ctrl && !key.meta) { setSearchQuery((q) => q + ch); } return; } if (key.upArrow) { setSelectedIdx((i) => Math.max(i - 1, 0)); return; } if (key.downArrow) { setSelectedIdx((i) => Math.min(i + 1, filtered.length - 1)); return; } if (key.return) { const m = filtered[selectedIdx]; if (m) onSelect(m); return; } if (key.backspace || key.delete) { setSearchQuery((q) => q.slice(0, -1)); setSelectedIdx(0); setScrollOffset(0); return; } if (ch === "m" && !searchQuery) { setManualEntry(true); return; } if (ch && ch.length === 1 && !key.ctrl && !key.meta) { setSearchQuery((q) => q + ch); setSelectedIdx(0); setScrollOffset(0); } }); if (loading) { return ( ◆ Select model ◆ Loading models for {provider.providerName}… ); } if (models.length === 0) { return ( ◆ Select model ◆ ⚠ No models available This provider does not currently expose any models in inventory. m manual entry · esc back ); } if (manualEntry) { const inputWidth = Math.min(60, maxWidth - 4); const displayText = searchQuery || "type model name…"; const truncatedText = displayText.length > inputWidth - 6 ? displayText.slice(0, inputWidth - 9) + "…" : displayText; return ( ◆ Enter model name ◆ Type a model identifier for {provider.providerName} {"❯ "} {truncatedText} enter confirm · esc cancel ); } const visible = filtered.slice(scrollOffset, scrollOffset + listHeight); const searchBoxWidth = Math.min(60, maxWidth - 4); return ( {/* Header */} ◆ Select model ◆ Choose a model for {provider.providerName} {/* Search Bar */} {"❯ "} {searchQuery || "search models…"} {/* Model List */} {filtered.length === 0 ? ( No matching models ) : ( <> {scrollOffset > 0 && ( ▲ {scrollOffset} more above )} {visible.map((model, vi) => { const idx = vi + scrollOffset; const active = idx === selectedIdx; const isDefault = model === provider.defaultModel; const modelWidth = maxWidth - 8; const truncatedModel = model.length > modelWidth ? model.slice(0, modelWidth - 1) + "…" : model; return ( {active ? "▸ " : " "} {truncatedModel} {isDefault && (default)} ); })} {scrollOffset + listHeight < filtered.length && ( ▼ {filtered.length - scrollOffset - listHeight} more below )} )} {/* Footer */} ↑↓ navigate · enter select · m manual · esc back ); }); export default function ConfigureScreen({ client, sessionId, width, height, onComplete, onCancel, initialIntent, }: ConfigureProps) { const [phase, setPhase] = useState("loading"); const [providers, setProviders] = useState([]); const [selectedProvider, setSelectedProvider] = useState(null); const [errorMsg, setErrorMsg] = useState(""); const [spinIdx, setSpinIdx] = useState(0); const [fetchKey, setFetchKey] = useState(0); useEffect(() => { const t = setInterval( () => setSpinIdx((i) => (i + 1) % SPINNER_FRAMES.length), 300, ); return () => clearInterval(t); }, []); useEffect(() => { let cancelled = false; (async () => { try { const resp = await client.goose.GooseProvidersList({ providerIds: [] }); if (cancelled) return; const sorted = [...resp.entries].sort((a, b) => { const aP = a.providerType === "Preferred" ? 0 : 1; const bP = b.providerType === "Preferred" ? 0 : 1; if (aP !== bP) return aP - bP; return a.providerName.localeCompare(b.providerName); }); setProviders(sorted); if (initialIntent === "model") { try { const cfg = await client.goose.GooseConfigRead({ key: "GOOSE_PROVIDER" }); if (cancelled) return; const current = sorted.find((p) => p.providerId === cfg.value); if (current) { setSelectedProvider(current); setPendingConfigValues({}); setPhase("select_model"); return; } } catch { // fall through to provider selector } } if (!cancelled) setPhase("select_provider"); } catch (e: unknown) { if (!cancelled) { setErrorMsg(e instanceof Error ? e.message : String(e)); setPhase("error"); } } })(); return () => { cancelled = true; }; }, [client, fetchKey, initialIntent]); const applyProviderModel = useCallback( async ( provider: ProviderInventoryEntryDto, model: string, configValues: Record, ) => { setPhase("saving"); try { for (const [key, value] of Object.entries(configValues)) { const configKey = provider.configKeys.find((k) => k.name === key); if (configKey?.secret) { await client.goose.GooseSecretUpsert({ key, value }); } else { await client.goose.GooseConfigUpsert({ key, value }); } } await client.goose.GooseConfigUpsert({ key: "GOOSE_PROVIDER", value: provider.providerId, }); await client.goose.GooseConfigUpsert({ key: "GOOSE_MODEL", value: model }); await client.setSessionConfigOption({ sessionId, configId: "provider", value: provider.providerId, }); await client.setSessionConfigOption({ sessionId, configId: "model", value: model, }); onComplete(); } catch (e: unknown) { setErrorMsg(e instanceof Error ? e.message : String(e)); setPhase("error"); } }, [client, sessionId, onComplete], ); const [pendingConfigValues, setPendingConfigValues] = useState>({}); const handleProviderSelected = useCallback( (provider: ProviderInventoryEntryDto) => { const keys = provider.configKeys.filter( (k) => k.required && !k.oauthFlow && !k.deviceCodeFlow, ); setSelectedProvider(provider); if (keys.length > 0 && !provider.configured) { setPhase("configure"); } else { setPendingConfigValues({}); setPhase("select_model"); } }, [], ); const handleConfigComplete = useCallback( (values: Record) => { if (!selectedProvider) return; setPendingConfigValues(values); setPhase("select_model"); }, [selectedProvider], ); const handleModelSelected = useCallback( (model: string) => { if (!selectedProvider) return; applyProviderModel(selectedProvider, model, pendingConfigValues); }, [selectedProvider, pendingConfigValues, applyProviderModel], ); const handleRetry = useCallback(() => { setErrorMsg(""); setFetchKey((k) => k + 1); setPhase("loading"); }, []); if (phase === "loading" || phase === "loading_models" || phase === "saving") { const label = phase === "loading" ? "Loading providers…" : phase === "loading_models" ? "Loading models…" : "Applying changes…"; return ( ◆ Configure provider ◆ {label} ); } if (phase === "error") { return ( ◆ Configure provider ◆ ); } if (phase === "configure" && selectedProvider) { return ( { setSelectedProvider(null); setPhase("select_provider"); }} /> ); } if (phase === "select_model" && selectedProvider) { return ( { if (initialIntent === "model") { onCancel(); } else { setPhase("select_provider"); } }} /> ); } return ( ); }