[0]) => {
+ setBusy(key)
+ try {
+ const res = await apiClient.modelsAction(action)
+ if (res.status === 'success') {
+ await load()
+ flash(key, t('config_saved'))
+ } else {
+ flash(key, (res.message as string) || t('config_save_error'))
+ }
+ } catch {
+ flash(key, t('config_save_error'))
+ } finally {
+ setBusy('')
+ }
+ }
+
+ if (loading) {
+ return (
+
+
+ {t('skills_loading')}
+
+ )
+ }
+ if (!data) {
+ return {t('config_save_error')}
+ }
+
+ const caps = data.capabilities
+
+ return (
+
+
+
+ {/* Chat */}
+ run('chat', { action: 'set_capability', capability: 'chat', provider_id: p, model: m })}
+ />
+
+ {/* Vision */}
+ run('vision', { action: 'set_capability', capability: 'vision', provider_id: p, model: m })}
+ >
+
+
+
+ {/* Image */}
+ run('image', { action: 'set_capability', capability: 'image', provider_id: p, model: m })}
+ >
+
+
+
+ {/* ASR */}
+ run('asr', { action: 'set_capability', capability: 'asr', provider_id: p, model: m })}
+ />
+
+ {/* TTS — bespoke (voice + reply mode) */}
+
+ run('tts', { action: 'set_capability', capability: 'tts', provider_id: p, model: m, voice: v })
+ }
+ onSaveMode={(mode) => run('tts_mode', { action: 'set_voice_reply_mode', mode })}
+ modeStatus={statusMap.tts_mode}
+ modeBusy={busy === 'tts_mode'}
+ />
+
+ {/* Embedding */}
+ run('embedding', { action: 'set_capability', capability: 'embedding', provider_id: p, model: m })}
+ />
+
+ {/* Search — bespoke */}
+
+ run('search', { action: 'set_capability', capability: 'search', strategy, provider })
+ }
+ onSaveBochaKey={(key) => run('search_key', { action: 'set_search_credential', api_key: key })}
+ keyStatus={statusMap.search_key}
+ keyBusy={busy === 'search_key'}
+ />
+
+ )
+}
+
+// ============================================================
+// Layer 1 — vendor credentials
+// ============================================================
+
+interface VendorSectionProps {
+ data: ModelsData
+ onChanged: () => Promise
+ statusMap: Record
+ flash: (key: string, msg: string) => void
+}
+
+const VendorSection: React.FC = ({ data, onChanged }) => {
+ // Edit an existing built-in vendor.
+ const [editing, setEditing] = useState(null)
+ // Add flow: open the vendor modal with a provider picker.
+ const [adding, setAdding] = useState(false)
+ // Custom provider modal: 'new' to create, or a provider to edit.
+ const [customEditing, setCustomEditing] = useState(null)
+
+ const isCustomCard = (p: ModelProvider) => p.is_custom && !!p.custom_name
+ // Unified grid: configured built-ins + all custom provider cards (web parity).
+ const shown = data.providers.filter((p) => p.configured || isCustomCard(p))
+
+ return (
+ } title={t('models_vendors')} subtitle={t('models_vendors_sub')}>
+ {shown.length === 0 ? (
+
+
{t('models_no_vendor')}
+
+
+ {shown.map((p) =>
+ isCustomCard(p) ? (
+
setCustomEditing(p)} />
+ ) : (
+ setEditing(p)} />
+ )
+ )}
+
+
+ {
+ if (!keyDirty && MASK_RE.test(apiKey)) setApiKey('')
+ }}
+ onBlur={() => {
+ if (!keyDirty) setApiKey(effective?.api_key_masked || '')
+ }}
+ onChange={(e) => {
+ setApiKey(e.target.value)
+ setKeyDirty(true)
+ }}
+ />
+
+
+
+ {hasBase && (
+
+ setApiBase(e.target.value)}
+ placeholder={effective?.api_base_placeholder || 'https://...'}
+ />
+
+ )}
+
+ )
+}
+
+const CustomProviderModal: React.FC<{
+ target: ModelProvider | 'new' | null
+ onClose: () => void
+ onSaved: () => Promise
+}> = ({ target, onClose, onSaved }) => {
+ const editing = target && target !== 'new' ? target : null
+ const [name, setName] = useState('')
+ const [apiBase, setApiBase] = useState('')
+ const [apiKey, setApiKey] = useState('')
+ const [keyDirty, setKeyDirty] = useState(false)
+ const [saving, setSaving] = useState(false)
+
+ useEffect(() => {
+ if (!target) return
+ if (editing) {
+ setName(editing.custom_name || localizedLabel(editing.label))
+ setApiBase(editing.api_base || '')
+ setApiKey(editing.api_key_masked || '')
+ } else {
+ setName('')
+ setApiBase('')
+ setApiKey('')
+ }
+ setKeyDirty(false)
+ }, [target, editing])
+
+ if (!target) return null
+
+ const save = async () => {
+ if (!name.trim()) return
+ setSaving(true)
+ try {
+ const payload: {
+ action: 'set_custom_provider'
+ name: string
+ id?: string
+ api_base: string
+ api_key?: string
+ } = {
+ action: 'set_custom_provider',
+ name: name.trim(),
+ api_base: apiBase.trim(),
+ }
+ if (editing) payload.id = editing.custom_id
+ if (keyDirty && apiKey && !MASK_RE.test(apiKey)) payload.api_key = apiKey
+ await apiClient.modelsAction(payload)
+ await onSaved()
+ onClose()
+ } finally {
+ setSaving(false)
+ }
+ }
+
+ const remove = async () => {
+ if (!editing || !confirm(t('models_delete_confirm'))) return
+ setSaving(true)
+ try {
+ await apiClient.modelsAction({ action: 'delete_custom_provider', id: editing.custom_id || '' })
+ await onSaved()
+ onClose()
+ } finally {
+ setSaving(false)
+ }
+ }
+
+ return (
+
+ {editing && (
+
+ {t('models_delete')}
+
+ )}
+
+ {t('config_cancel')}
+
+
+ {saving ? : t('config_save')}
+
+
+ }
+ >
+
+ setName(e.target.value)} placeholder="My Provider" />
+
+
+ setApiBase(e.target.value)}
+ placeholder="https://...../v1"
+ />
+
+
+ {
+ if (!keyDirty && MASK_RE.test(apiKey)) setApiKey('')
+ }}
+ onChange={(e) => {
+ setApiKey(e.target.value)
+ setKeyDirty(true)
+ }}
+ />
+
+
+ )
+}
+
+// ============================================================
+// Bespoke capability cards
+// ============================================================
+
+const FallbackHint: React.FC<{ state: CapabilityState; data: ModelsData }> = ({ state, data }) => {
+ if (!state.fallback_provider && !state.fallback_model) return null
+ const label = providerLabel(data, state.fallback_provider || '')
+ return (
+
+ {t('models_fallback')}: {label} {state.fallback_model ? `· ${state.fallback_model}` : ''}
+
+ )
+}
+
+const TtsCard: React.FC<{
+ state: CapabilityState
+ data: ModelsData
+ busy: boolean
+ status?: string
+ onSaveVoice: (provider: string, model: string, voice: string) => void
+ onSaveMode: (mode: 'off' | 'voice_if_voice' | 'always') => void
+ modeStatus?: string
+ modeBusy: boolean
+}> = ({ state, data, busy, status, onSaveVoice, onSaveMode, modeStatus, modeBusy }) => {
+ const [provider, setProvider] = useState(state.current_provider || '')
+ const [model, setModel] = useState(state.current_model || '')
+ const [voice, setVoice] = useState(state.current_voice || '')
+ const [mode, setMode] = useState<'off' | 'voice_if_voice' | 'always'>(state.reply_mode || 'off')
+
+ const providerOptions = (state.providers || []).map((id) => ({ value: id, label: providerLabel(data, id) }))
+ const modelOptions = normEntries(state.provider_models?.[provider]).map((o) => ({
+ value: o.value,
+ label: o.value,
+ hint: o.hint,
+ }))
+ const voiceOptions = resolveVoices(provider, model, state.provider_voices).map((o) => ({
+ value: o.value,
+ label: o.value,
+ hint: o.hint,
+ }))
+
+ const handleProvider = (id: string) => {
+ setProvider(id)
+ const first = normEntries(state.provider_models?.[id])[0]
+ const fm = first?.value || ''
+ setModel(fm)
+ setVoice(resolveVoices(id, fm, state.provider_voices)[0]?.value || '')
+ }
+ const handleModel = (m: string) => {
+ setModel(m)
+ setVoice(resolveVoices(provider, m, state.provider_voices)[0]?.value || '')
+ }
+
+ return (
+ } title={t('models_cap_tts')} subtitle={t('models_cap_tts_sub')}>
+
+ {/* Reply mode — saved immediately */}
+
+ ({ value: m.value, label: t(m.key) }))}
+ onChange={(v) => {
+ const next = v as 'off' | 'voice_if_voice' | 'always'
+ setMode(next)
+ onSaveMode(next)
+ }}
+ disabled={modeBusy}
+ />
+ {modeStatus && {modeStatus}}
+
+
+ {mode !== 'off' && (
+ <>
+
+
+
+
+
+
+ {voiceOptions.length > 0 && (
+
+
+
+ )}
+
+
+ {status}
+
+
+
+
+ )}
+
+ {t('models_embedding_dim')}: {state.current_dim} · {t('models_embedding_rebuild_hint')}
+
+ )}
+
+)
+
+const SearchCard: React.FC<{
+ state: SearchCapabilityState
+ busy: boolean
+ status?: string
+ onSaveStrategy: (strategy: string, provider: string) => void
+ onSaveBochaKey: (key: string) => void
+ keyStatus?: string
+ keyBusy: boolean
+}> = ({ state, busy, status, onSaveStrategy, onSaveBochaKey, keyStatus, keyBusy }) => {
+ const [strategy, setStrategy] = useState(state.strategy || 'auto')
+ const [provider, setProvider] = useState(state.fixed_provider || state.current_provider || '')
+ const [bochaOpen, setBochaOpen] = useState(false)
+
+ const providerOptions = useMemo(
+ () => state.providers.map((p) => ({ value: p.id, label: localizedLabel(p.label) })),
+ [state.providers]
+ )
+ const bocha = state.providers.find((p) => p.id === 'bocha')
+
+ return (
+ } title={t('models_cap_search')} subtitle={t('models_cap_search_sub')}>
+
+
+
+
+ {strategy === 'fixed' && (
+
+
+
+ )}
+
+
+
+
+ {status}
+
+
+
+
+
+
+
{icon}
+
+
{title}
+ {subtitle &&
{subtitle}
}
+
+
+ {children}
+
+
+ {children}
+ {hint &&
{hint}
}
+
+
+ {open && (
+
+ {options.length === 0 && (
+
{t('models_no_options')}
+ )}
+ {options.map((o) => (
+
{
+ onChange(o.value)
+ setOpen(false)
+ }}
+ className={`px-3 py-2 text-sm cursor-pointer transition-colors ${
+ o.value === value ? 'bg-accent-soft text-accent' : 'text-content-secondary hover:bg-surface-2'
+ }`}
+ >
+
{o.label}
+ {o.hint &&
{o.hint}
}
+
+ ))}
+
+ )}
+
+ {status}
+
+
+)
+
+export const MASK_RE = /[*•]/
+
+export const Modal: React.FC<{
+ open: boolean
+ title: string
+ onClose: () => void
+ children: React.ReactNode
+ footer?: React.ReactNode
+}> = ({ open, title, onClose, children, footer }) => {
+ if (!open) return null
+ return (
+ {
+ if (e.target === e.currentTarget) onClose()
+ }}
+ >
+
+
+
{title}
+
+
+
{children}
+ {footer &&
{footer}
}
+
+