diff --git a/canvas/src/components/MissingKeysModal.tsx b/canvas/src/components/MissingKeysModal.tsx index 91346776..701a451e 100644 --- a/canvas/src/components/MissingKeysModal.tsx +++ b/canvas/src/components/MissingKeysModal.tsx @@ -1,14 +1,18 @@ "use client"; -import { useState, useEffect, useCallback, useRef } from "react"; +import { useState, useEffect, useCallback, useRef, useMemo } from "react"; import { api } from "@/lib/api"; -import { getKeyLabel } from "@/lib/deploy-preflight"; +import { + getKeyLabel, + getRuntimeProviders, + type ProviderChoice, +} from "@/lib/deploy-preflight"; interface Props { open: boolean; missingKeys: string[]; runtime: string; - /** Called when user adds all keys and wants to proceed with deploy. */ + /** Called when user adds all required keys and wants to proceed with deploy. */ onKeysAdded: () => void; /** Called when user cancels the deploy. */ onCancel: () => void; @@ -27,6 +31,24 @@ interface KeyEntry { error: string | null; } +/** + * MissingKeysModal + * ---------------- + * Two rendering modes, picked automatically from the runtime: + * + * 1. PROVIDER-PICKER mode — when `getRuntimeProviders(runtime)` returns + * ≥2 alternatives. The modal shows a radio list of supported + * providers first ("Hermes supports OpenRouter / OpenAI / Nous + * native — pick one") and only the chosen provider's env input + * below. Saving that one key satisfies the deploy. + * + * 2. LEGACY all-keys mode — when the runtime has <2 provider + * alternatives, or the caller supplied multiple unrelated keys. + * Renders one input per `missingKeys` entry; all must be saved + * before deploy. Preserves the pre-provider-picker contract so + * callers that pass unrelated-key lists (e.g. a workspace that + * needs an LLM key AND a separate tool key) keep working. + */ export function MissingKeysModal({ open, missingKeys, @@ -35,12 +57,291 @@ export function MissingKeysModal({ onCancel, onOpenSettings, workspaceId, +}: Props) { + const providers: ProviderChoice[] = useMemo( + () => getRuntimeProviders(runtime), + [runtime], + ); + + // Picker mode activates only when we have a real provider list with + // genuine alternatives. If the runtime is unknown (providers=[]) or + // has a single forced provider, fall back to the legacy all-keys UX. + const pickerMode = providers.length > 1; + + if (pickerMode) { + return ( + + ); + } + + return ( + + ); +} + +// ----------------------------------------------------------------------------- +// Provider-picker mode — one-of-N providers, save one, deploy. +// ----------------------------------------------------------------------------- + +function ProviderPickerModal({ + open, + providers, + runtime, + onKeysAdded, + onCancel, + onOpenSettings, + workspaceId, +}: { + open: boolean; + providers: ProviderChoice[]; + runtime: string; + onKeysAdded: () => void; + onCancel: () => void; + onOpenSettings?: () => void; + workspaceId?: string; +}) { + const [selectedId, setSelectedId] = useState(providers[0].id); + const [value, setValue] = useState(""); + const [saving, setSaving] = useState(false); + const [saved, setSaved] = useState(false); + const [error, setError] = useState(null); + const firstInputRef = useRef(null); + + useEffect(() => { + if (!open) return; + setSelectedId(providers[0].id); + setValue(""); + setSaving(false); + setSaved(false); + setError(null); + }, [open, providers]); + + useEffect(() => { + if (!open) return; + const raf = requestAnimationFrame(() => firstInputRef.current?.focus()); + return () => cancelAnimationFrame(raf); + }, [open, selectedId]); + + useEffect(() => { + if (!open) return; + const handler = (e: KeyboardEvent) => { + if (e.key === "Escape") onCancel(); + }; + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); + }, [open, onCancel]); + + const selected = providers.find((p) => p.id === selectedId) ?? providers[0]; + + const handleSave = useCallback(async () => { + if (!value.trim()) return; + setSaving(true); + setError(null); + try { + if (workspaceId) { + await api.put(`/workspaces/${workspaceId}/secrets`, { + key: selected.envVar, + value: value.trim(), + }); + } else { + await api.put("/settings/secrets", { + key: selected.envVar, + value: value.trim(), + }); + } + setSaved(true); + } catch (e) { + setError(e instanceof Error ? e.message : "Failed to save"); + } finally { + setSaving(false); + } + }, [selected, value, workspaceId]); + + if (!open) return null; + + const runtimeLabel = runtime.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()); + + return ( +
+ + ); +} + +// ----------------------------------------------------------------------------- +// Legacy all-keys mode — every missingKey rendered as its own input, +// all must save before deploy. Kept for single-provider runtimes + +// callers that pass unrelated-key lists (old contract). +// ----------------------------------------------------------------------------- + +function AllKeysModal({ + open, + missingKeys, + runtime, + onKeysAdded, + onCancel, + onOpenSettings, + workspaceId, }: Props) { const [entries, setEntries] = useState([]); const [globalError, setGlobalError] = useState(null); const firstInputRef = useRef(null); - // Initialize entries when modal opens or missingKeys change useEffect(() => { if (!open) return; setEntries( @@ -56,14 +357,12 @@ export function MissingKeysModal({ setGlobalError(null); }, [open, missingKeys]); - // Focus first input when modal opens useEffect(() => { if (!open) return; - const raf = requestAnimationFrame(() => { - firstInputRef.current?.focus(); - }); + const raf = requestAnimationFrame(() => firstInputRef.current?.focus()); return () => cancelAnimationFrame(raf); }, [open]); + useEffect(() => { if (!open) return; const handler = (e: KeyboardEvent) => { @@ -90,7 +389,6 @@ export function MissingKeysModal({ updateEntry(index, { saving: true, error: null }); try { - // Save to global scope by default (available to all workspaces) if (workspaceId) { await api.put(`/workspaces/${workspaceId}/secrets`, { key: entry.key, @@ -135,31 +433,19 @@ export function MissingKeysModal({ return (
- {/* Backdrop */} -