@bhooai/nexus-cli 2.0.7 → 2.0.9

package/templates/base/apps/admin/src/pages/ai/AiChatPlayground.tsx

@@ -1,208 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Icon } from '../../icons.js';
-import {
-  getAdminConfig, getAiStatus, getAiModels, aiChatStream, getAiProviders,
-  type AdminConfig, type AiStatus, type AiModelInfo, type AiChatMessage, type AiProviderView,
-} from '../../api.js';
-import { useAdminAlert } from '../../alertCenter.js';
-
-export function AiChatPlayground() {
-  const [config, setConfig] = useState<AdminConfig | null>(null);
-  const [providers, setProviders] = useState<AiProviderView[]>([]);
-  const [aiStatus, setAiStatus] = useState<AiStatus | null>(null);
-  const [models, setModels] = useState<AiModelInfo[]>([]);
-  const [model, setModel] = useState('');
-  const [provider, setProvider] = useState('');
-  const [systemPrompt, setSystemPrompt] = useState('You are a helpful assistant.');
-  const [input, setInput] = useState('');
-  const [messages, setMessages] = useState<AiChatMessage[]>([]);
-  const [streaming, setStreaming] = useState(false);
-  const [streamText, setStreamText] = useState('');
-  const [msg, setMsg] = useAdminAlert('ai-playground');
-  const [modelsLoaded, setModelsLoaded] = useState(false);
-  const [loadedFor, setLoadedFor] = useState('');
-  const loadModelsRef = useRef<(p: string) => Promise<void>>(async () => {});
-  const checkAiRef = useRef<() => Promise<void>>(async () => {});
-
-  useEffect(() => {
-    getAdminConfig().then((c) => { setConfig(c); const a = c?.config?.ai as { schemaModel?: string; defaultProvider?: string } | undefined; setModel((x) => x || (a?.schemaModel ?? 'llama3:latest')); }).catch(() => {});
-    getAiProviders().then((r) => {
-      setProviders(r.providers ?? []);
-      // Auto-select the first enabled provider, then load its models.
-      const firstEnabled = (r.providers ?? []).find((p) => p.enabled);
-      if (firstEnabled) {
-        setProvider(firstEnabled.id);
-        setModel(firstEnabled.defaultModel ?? 'llama3:latest');
-        // Load its models once the provider state lands.
-        setTimeout(() => { void loadModelsRef.current(firstEnabled.id); }, 0);
-      } else {
-        // No enabled provider — fall back to the AI server's own detection.
-        void checkAiRef.current();
-      }
-    }).catch(() => { void checkAiRef.current(); });
-  }, []);
-
-  const checkAi = async () => {
-    try {
-      const s = await getAiStatus();
-      setAiStatus(s);
-      // Auto-select ollama if it's the only provider available on the AI server
-      if (s.ollama?.ok && s.ollama.detail?.models?.length && !provider) {
-        setProvider('ollama');
-        setModel(s.ollama.detail.models[0] ?? 'llama3:latest');
-      }
-      // Load models for the current (or resolved) provider.
-      const prov = provider || (s.autoResolvesTo ?? 'ollama');
-      await loadModels(prov);
-    } catch { /* non-fatal */ }
-  };
-
-  const loadModels = async (p: string) => {
-    setProvider(p);
-    // Find the provider's default model
-    const pv = providers.find((x) => x.id === p);
-    if (pv?.defaultModel || modelsLoaded) setModel((cur) => pv?.defaultModel ?? cur);
-    try {
-      const m = await getAiModels(p);
-      setModels(m?.data ?? []);
-      setModelsLoaded(true);
-      setLoadedFor(p);
-      const err = m?.error;
-      if (err) setMsg(`Models unavailable for "${p}": ${err}`);
-      else setMsg('');
-    } catch (e: any) {
-      setModels([]);
-      setModelsLoaded(false);
-      setLoadedFor('');
-      setMsg(`Could not load models for "${p}": ${e?.message ?? e}`);
-    }
-  };
-  loadModelsRef.current = loadModels;
-  checkAiRef.current = () => checkAi();
-
-  const send = async () => {
-    if (!input.trim() || streaming) return;
-    // Resolve the actual provider to send to the AI server
-    const effectiveProvider = provider || aiStatus?.autoResolvesTo || 'ollama';
-    const effectiveModel = model || models[0]?.id || 'llama3:latest';
-
-    const userMsg: AiChatMessage = { role: 'user', content: input.trim() };
-    const chatMsgs: AiChatMessage[] = [];
-    if (systemPrompt.trim()) chatMsgs.push({ role: 'system', content: systemPrompt.trim() });
-    chatMsgs.push(...messages, userMsg);
-    setMessages((m) => [...m, userMsg]);
-    setInput('');
-    setStreaming(true);
-    setStreamText('');
-    setMsg('');
-    let acc = '';
-    try {
-      await aiChatStream(effectiveModel, chatMsgs, effectiveProvider, (chunk) => {
-        acc += chunk;
-        setStreamText(acc);
-      });
-      if (!acc) { setMsg('AI returned an empty response. Check that the model is available and the AI server is running.'); }
-      else { setMessages((m) => [...m, { role: 'assistant', content: acc }]); }
-      setStreamText('');
-    } catch (e: any) {
-      const errMsg = String(e?.message ?? e);
-      setMsg(`Chat failed: ${errMsg}`);
-      if (acc) setMessages((m) => [...m, { role: 'assistant', content: acc }]);
-      setStreamText('');
-    } finally {
-      setStreaming(false);
-    }
-  };
-
-  const clearChat = () => { setMessages([]); setStreamText(''); setMsg(''); };
-  const sendOnEnter = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } };
-
-  const modelOptions = models.map((m) => m.id);
-  const enabledProviders = providers.filter((p) => p.enabled);
-  const ai = config?.config?.ai as { serverUrl: string; timeoutMs: number; defaultProvider: string; schemaModel: string } | undefined;
-
-  // Build provider options: enabled config providers + any from AI server status
-  const providerOptions: { id: string; label: string }[] = [];
-  if (enabledProviders.length) {
-    enabledProviders.forEach((p) => providerOptions.push({ id: p.id, label: p.label }));
-  } else {
-    // Fall back to AI server's known providers
-    if (aiStatus?.aiServer?.ok) providerOptions.push({ id: 'ollama', label: 'Ollama' });
-    if (aiStatus?.openai?.ok) providerOptions.push({ id: 'openai', label: 'OpenAI' });
-  }
-
-  return (
-    <div className="space-y-4">
-
-      <section className="glass-card space-y-4">
-        <div className="flex items-center justify-between">
-          <h3 className="glass-h3">Chat playground</h3>
-          <div className="flex gap-2">
-            <button onClick={checkAi} disabled={streaming} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh models</button>
-            <button onClick={clearChat} disabled={streaming} className="glass-chip-btn">clear</button>
-          </div>
-        </div>
-
-        {/* Controls */}
-        <div className="flex flex-wrap items-center gap-3">
-          <label className="text-xs text-slate-400">Provider
-            <select className="glass-input w-44 !py-1.5 text-sm" value={provider} onChange={(e) => loadModels(e.target.value)}>
-              {!provider && <option value="" className="bg-slate-900">— select —</option>}
-              {providerOptions.map((p) => <option key={p.id} value={p.id} className="bg-slate-900">{p.label}</option>)}
-            </select>
-          </label>
-          <label className="text-xs text-slate-400">Model
-            <input className="glass-input w-52 !py-1.5 font-mono text-sm" value={model} onChange={(e) => setModel(e.target.value)} placeholder="e.g. llama3:latest" />
-          </label>
-          <select
-            className="glass-input w-48 !py-1.5 text-sm"
-            value=""
-            onChange={(e) => { const v = e.target.value; if (v) setModel(v); }}
-            disabled={!modelOptions.length}
-            title={modelOptions.length ? `Available models for "${loadedFor || provider}"` : 'No models — click refresh models'}
-          >
-            <option value="" className="bg-slate-900">{modelOptions.length ? `${modelOptions.length} available for "${loadedFor || provider}"` : 'no models loaded'}</option>
-            {modelOptions.map((m) => <option key={m} value={m} className="bg-slate-900">{m}</option>)}
-          </select>
-        </div>
-
-        {!provider && (
-          <p className="text-xs text-amber-400"><Icon name="warning" size={12} className="mb-0.5 mr-1 inline" /> Select a provider above. If no providers are listed, go to the AI Providers tab and enable one, or click "refresh models" to detect the AI server's available providers.</p>
-        )}
-
-        {/* System prompt */}
-        <div>
-          <label className="text-xs text-slate-400">System prompt</label>
-          <textarea className="glass-code mt-1 h-16 w-full p-2 text-sm" value={systemPrompt} onChange={(e) => setSystemPrompt(e.target.value)} placeholder="Set the assistant's behaviour…" />
-        </div>
-
-        {/* Chat messages */}
-        <div className="glass-code max-h-96 min-h-[200px] space-y-3 overflow-y-auto p-3 text-sm">
-          {messages.length === 0 && !streamText && <p className="text-slate-500">Start a conversation by typing below.</p>}
-          {messages.map((m, i) => (
-            <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-              <div className={`max-w-[80%] rounded-xl px-3 py-2 ${m.role === 'user' ? 'bg-indigo-500/20 text-slate-100' : m.role === 'assistant' ? 'bg-emerald-500/15 text-slate-100' : 'bg-slate-700/30 text-slate-400'}`}>
-                <span className="mb-1 block text-[10px] uppercase tracking-wider opacity-60">{m.role}</span>
-                <span className="whitespace-pre-wrap">{m.content}</span>
-              </div>
-            </div>
-          ))}
-          {streaming && (
-            <div className="flex justify-start">
-              <div className="max-w-[80%] rounded-xl bg-emerald-500/15 px-3 py-2 text-slate-100">
-                <span className="mb-1 block text-[10px] uppercase tracking-wider opacity-60">assistant <span className="animate-pulse">…</span></span>
-                <span className="whitespace-pre-wrap">{streamText}<span className="animate-pulse">â–‹</span></span>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Input */}
-        <div className="flex gap-2">
-          <textarea className="glass-code flex-1 h-12 p-2 text-sm" value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={sendOnEnter} placeholder="Type a message…  (Enter to send, Shift+Enter for newline)" disabled={streaming} />
-          <button onClick={send} disabled={streaming || !input.trim()} className="glass-btn-primary shrink-0">{streaming ? '…' : 'Send'}</button>
-        </div>
-      </section>
-    </div>
-  );
-}

package/templates/base/apps/admin/src/pages/ai/AiProviders.tsx

@@ -1,276 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Icon } from '../../icons.js';
-import { SafeGotoLink } from '@bhooai/nexus-safe-goto';
-import {
-  getAiProviders, updateAiProvider, addAiProvider, deleteAiProvider, testAiProvider,
-  type AiProviderView, type AiProviderPersistence, type AiProviderTestResult,
-} from '../../api.js';
-import { useAdminAlert } from '../../alertCenter.js';
-import type { ToggleStyle, ProviderFilter } from '../../lib/types.js';
-import { BUILTIN_PROVIDER_IDS } from '../../lib/constants.js';
-import { ProviderGroup } from './ProviderGroup.js';
-import { AddProviderDialog } from './AddProviderDialog.js';
-import { ProviderKeyDialog } from './ProviderKeyDialog.js';
-
-export function AiProviders({ toggle }: { toggle: ToggleStyle }) {
-  const [providers, setProviders] = useState<AiProviderView[]>([]);
-  const [busy, setBusy] = useState(false);
-  const [msg, setMsg] = useAdminAlert('ai-providers');
-  const [showAdd, setShowAdd] = useState(false);
-  const [newProvider, setNewProvider] = useState({ id: '', label: '', baseUrl: '', apiKey: '', defaultModel: '' });
-  const [query, setQuery] = useState('');
-  const [filter, setFilter] = useState<ProviderFilter>('enabled');
-  const [testingId, setTestingId] = useState<string | null>(null);
-  const [testResults, setTestResults] = useState<Record<string, AiProviderTestResult>>({});
-  const [keyEditorProvider, setKeyEditorProvider] = useState<AiProviderView | null>(null);
-  const [keyDraft, setKeyDraft] = useState('');
-  const [switchAnim, setSwitchAnim] = useState<Record<string, 'out' | 'in' | null>>({});
-
-  useEffect(() => { loadProviders(); }, []);
-
-  const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms));
-
-  const loadProviders = async () => {
-    try { const r = await getAiProviders(); setProviders(r.providers ?? []); } catch { /* non-fatal */ }
-  };
-
-  const persistenceNote = (persistence?: AiProviderPersistence): string => {
-    if (!persistence) return '';
-    const missing = [
-      !persistence.runtime ? 'nexus.runtime.json' : '',
-      !persistence.database ? 'MongoDB' : '',
-    ].filter(Boolean);
-    return missing.length ? ` Persistence failed: ${missing.join(' and ')}.` : '';
-  };
-
-  const openKeyEditor = (provider: AiProviderView) => {
-    setKeyEditorProvider(provider);
-    setKeyDraft('');
-  };
-
-  const closeKeyEditor = () => {
-    if (busy) return;
-    setKeyEditorProvider(null);
-    setKeyDraft('');
-  };
-
-  const saveKeyFromEditor = async () => {
-    if (!keyEditorProvider || !keyDraft.trim()) return;
-    const saved = await saveApiKey(keyEditorProvider, keyDraft);
-    if (saved) {
-      setKeyEditorProvider(null);
-      setKeyDraft('');
-    }
-  };
-
-  const toggleProvider = async (p: AiProviderView) => {
-    setMsg('');
-    setBusy(true);
-    setSwitchAnim((prev) => ({ ...prev, [p.id]: 'out' }));
-    await wait(280);
-    try {
-      const result = await updateAiProvider(p.id, { enabled: !p.enabled });
-      setProviders((current) => current.map((item) => item.id === p.id ? result.provider : item));
-      setSwitchAnim((prev) => ({ ...prev, [p.id]: 'in' }));
-      setMsg(`${p.label} ${result.provider.enabled ? 'enabled' : 'disabled'}.${persistenceNote(result.persistence)}`);
-    }
-    catch (e: any) {
-      setSwitchAnim((prev) => { const next = { ...prev }; delete next[p.id]; return next; });
-      setMsg(`Failed: ${e?.message ?? e}`);
-    }
-    finally {
-      setBusy(false);
-      await wait(420);
-      setSwitchAnim((prev) => { const next = { ...prev }; delete next[p.id]; return next; });
-    }
-  };
-
-  const saveApiKey = async (p: AiProviderView, key: string): Promise<boolean> => {
-    if (!key.trim()) return false;
-    setBusy(true);
-    try {
-      const result = await updateAiProvider(p.id, { apiKey: key.trim() });
-      // Update only the provider that changed. Refreshing the whole collection
-      // here can replace the visible 20-provider list with a stale/empty read
-      // while the backend is persisting the key.
-      setProviders((current) => current.map((item) => item.id === p.id ? result.provider : item));
-      setMsg(`${p.label} API key saved.${persistenceNote(result.persistence)}`);
-      return true;
-    } catch (e: any) {
-      setMsg(`Failed: ${e?.message ?? e}`);
-      return false;
-    } finally { setBusy(false); }
-  };
-
-  const saveDefaultModel = async (p: AiProviderView, m: string) => {
-    setBusy(true);
-    try {
-      const result = await updateAiProvider(p.id, { defaultModel: m.trim() });
-      setProviders((current) => current.map((item) => item.id === p.id ? result.provider : item));
-      setMsg(`${p.label} model saved.${persistenceNote(result.persistence)}`);
-    }
-    catch (e: any) { setMsg(`Failed: ${e?.message ?? e}`); }
-    finally { setBusy(false); }
-  };
-
-  const addProvider = async () => {
-    if (!newProvider.id.trim() || !newProvider.label.trim() || !newProvider.baseUrl.trim()) { setMsg('id, label and baseUrl are required'); return; }
-    setBusy(true);
-    try {
-      const result = await addAiProvider({ id: newProvider.id.trim().toLowerCase(), label: newProvider.label.trim(), baseUrl: newProvider.baseUrl.trim(), apiKey: newProvider.apiKey.trim() || undefined, defaultModel: newProvider.defaultModel.trim() || undefined, enabled: true });
-      setProviders((current) => [...current, result.provider]);
-      setShowAdd(false);
-      setNewProvider({ id: '', label: '', baseUrl: '', apiKey: '', defaultModel: '' });
-      setMsg(`Provider added.${persistenceNote(result.persistence)}`);
-    } catch (e: any) { setMsg(`Failed: ${e?.message ?? e}`); }
-    finally { setBusy(false); }
-  };
-
-  const removeProvider = async (id: string) => {
-    setBusy(true);
-    try {
-      const result = await deleteAiProvider(id);
-      setProviders((current) => current.filter((item) => item.id !== id));
-      setTestResults((prev) => { const next = { ...prev }; delete next[id]; return next; });
-      setMsg(`Provider removed.${persistenceNote(result.persistence)}`);
-    }
-    catch (e: any) { setMsg(`Failed: ${e?.message ?? e}`); }
-    finally { setBusy(false); }
-  };
-
-  const testProvider = async (p: AiProviderView) => {
-    setTestingId(p.id);
-    setMsg('');
-    try {
-      const result = await testAiProvider(p.id);
-      setTestResults((prev) => ({ ...prev, [p.id]: result }));
-      if (result.ok) setMsg(`${p.label}: reachable — ${result.modelCount ?? 0} model(s).`);
-      else setMsg(`${p.label}: ${result.error ?? 'unreachable'}.`);
-    } catch (e: any) {
-      setTestResults((prev) => ({ ...prev, [p.id]: { ok: false, provider: p.id, error: String(e?.message ?? e), checkedAt: new Date().toISOString() } }));
-      setMsg(`${p.label}: ${e?.message ?? e}`);
-    } finally {
-      setTestingId(null);
-    }
-  };
-
-  // Search + filter logic.
-  const matchesQuery = (p: AiProviderView) => {
-    if (!query.trim()) return true;
-    const q = query.toLowerCase();
-    return p.id.toLowerCase().includes(q) || p.label.toLowerCase().includes(q);
-  };
-
-  const enabled = providers.filter((p) => matchesQuery(p) && p.enabled && BUILTIN_PROVIDER_IDS.has(p.id));
-  const disabled = providers.filter((p) => matchesQuery(p) && !p.enabled && BUILTIN_PROVIDER_IDS.has(p.id));
-  const custom = providers.filter((p) => matchesQuery(p) && !BUILTIN_PROVIDER_IDS.has(p.id));
-
-  const groups: Array<{ id: string; label: string; icon: string; items: AiProviderView[] }> = [];
-  if (filter === 'all' || filter === 'enabled') {
-    if (enabled.length) groups.push({ id: 'enabled', label: 'Enabled', icon: '●', items: enabled });
-  }
-  if (filter === 'all' || filter === 'disabled') {
-    if (disabled.length) groups.push({ id: 'disabled', label: 'Disabled', icon: 'â—‹', items: disabled });
-  }
-  if (filter === 'all' || filter === 'custom') {
-    if (custom.length) groups.push({ id: 'custom', label: 'Custom', icon: '✚', items: custom });
-  }
-
-  const filterPills: Array<[ProviderFilter, string, number]> = [
-    ['all', 'All', providers.length],
-    ['enabled', 'Enabled', enabled.length],
-    ['disabled', 'Disabled', disabled.length],
-    ['custom', 'Custom', custom.length],
-  ];
-
-  return (
-    <div className="space-y-4">
-
-      {/* Header */}
-      <section className="glass-card space-y-3">
-        <div className="flex items-center justify-between">
-          <h3 className="glass-h3">AI providers ({providers.length})</h3>
-          <div className="flex gap-2">
-            <button onClick={loadProviders} disabled={busy} className="glass-chip-btn">refresh</button>
-            <button onClick={() => setShowAdd(true)} disabled={busy} className="glass-chip-btn">+ add provider</button>
-          </div>
-        </div>
-
-        {/* Filter bar */}
-        <div className="provider-filter-bar">
-          <div className="relative flex-1 sm:w-64">
-            <span className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500"><Icon name="search" size={13} /></span>
-            <input
-              className="glass-input !py-1.5 text-sm w-full sm:w-64 pl-8"
-              placeholder="Search providers…"
-              type="search"
-              autoComplete="off"
-              autoCapitalize="none"
-              autoCorrect="off"
-              spellCheck={false}
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-            />
-          </div>
-          <div className="flex flex-wrap gap-1.5">
-            {filterPills.map(([id, label, count]) => (
-              <button
-                key={id}
-                onClick={() => setFilter(id)}
-                className={filter === id ? 'glass-btn-primary !py-1 !px-2.5 text-xs' : 'glass-chip-btn'}
-              >
-                {label} <span className="ml-1 opacity-60">{count}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Groups */}
-        {groups.length === 0 && (
-          <p className="text-xs text-slate-500 py-4 text-center">
-            {providers.length === 0 ? 'No providers configured.' : 'No providers match your search/filter.'}
-          </p>
-        )}
-        {groups.map((g) => (
-          <ProviderGroup
-            key={g.id}
-            label={g.label}
-            icon={g.icon}
-            items={g.items}
-            toggle={toggle}
-            switchAnim={switchAnim}
-            busy={busy}
-            testingId={testingId}
-            testResults={testResults}
-            onToggle={toggleProvider}
-            onSaveModel={saveDefaultModel}
-            onRemove={removeProvider}
-            onTest={testProvider}
-            onOpenKey={openKeyEditor}
-          />
-        ))}
-      </section>
-
-      {/* Add provider modal */}
-      {showAdd && (
-        <AddProviderDialog
-          value={newProvider}
-          onChange={setNewProvider}
-          onSubmit={addProvider}
-          onCancel={() => setShowAdd(false)}
-          busy={busy}
-        />
-      )}
-      {keyEditorProvider && (
-        <ProviderKeyDialog
-          provider={keyEditorProvider}
-          value={keyDraft}
-          onChange={setKeyDraft}
-          onSave={saveKeyFromEditor}
-          onCancel={closeKeyEditor}
-          busy={busy}
-        />
-      )}
-    </div>
-  );
-}

package/templates/base/apps/admin/src/pages/ai/AiSettings.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { getAdminConfig, getAiStatus, type AdminConfig, type AiStatus } from '../../api.js';
-import { useAdminAlert } from '../../alertCenter.js';
-
-export function AiSettings() {
-  const [config, setConfig] = useState<AdminConfig | null>(null);
-  const [aiStatus, setAiStatus] = useState<AiStatus | null>(null);
-  const [aiErr, setAiErr] = useState('');
-  const [msg, setMsg] = useAdminAlert('ai-settings');
-
-  useEffect(() => {
-    getAdminConfig().then((c) => setConfig(c)).catch(() => {});
-    checkAi();
-  }, []);
-
-  const checkAi = async () => {
-    setAiErr('');
-    try { setAiStatus(await getAiStatus()); }
-    catch (e: any) { setAiErr(String(e?.message ?? e)); }
-  };
-
-  const ai = config?.config?.ai as { serverUrl: string; timeoutMs: number; defaultProvider: string; schemaModel: string } | undefined;
-
-  return (
-    <div className="space-y-4">
-
-      <section className="glass-card space-y-3">
-        <h3 className="glass-h3">AI configuration</h3>
-        {ai ? (
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
-            {([
-              ['Server URL', ai.serverUrl],
-              ['Timeout', `${(ai.timeoutMs / 1000).toFixed(0)}s`],
-              ['Default provider', ai.defaultProvider],
-              ['Schema model', ai.schemaModel],
-            ] as const).map(([label, value]) => (
-              <div key={label} className="glass rounded-xl px-3 py-2">
-                <span className="admin-overline">{label}</span>
-                <code className="block mt-1 truncate font-mono text-sm text-slate-200">{value}</code>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="text-xs text-slate-500">Loading settings…</p>
-        )}
-      </section>
-
-      <section className="glass-card space-y-3">
-        <div className="flex items-center justify-between">
-          <h3 className="glass-h3">AI server health</h3>
-          <button onClick={checkAi} className="glass-chip-btn">re-check</button>
-        </div>
-        {aiErr && <p className="text-xs text-rose-400">{aiErr}</p>}
-        <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
-          {aiStatus ? (
-            <>
-              {([
-                ['AI server', aiStatus.aiServer, aiStatus.aiServer.detail ? `health: ${aiStatus.aiServer.detail.status ?? 'unknown'}` : undefined],
-                ['Ollama', aiStatus.ollama, aiStatus.ollama.detail?.modelCount != null ? `${aiStatus.ollama.detail.modelCount} model(s)` : undefined],
-              ] as const).map(([label, s, detail]) => (
-                <div key={label} className="glass flex items-center gap-2 rounded-xl px-3 py-2 text-sm">
-                  <span className={s.ok ? 'dot-ok' : 'dot-bad'} />
-                  <span className="font-medium text-slate-200">{label}</span>
-                  <span className={`text-xs ${s.ok ? 'text-emerald-400' : 'text-rose-400'}`}>{s.ok ? (detail ?? 'ok') : (s.error ?? 'down')}</span>
-                </div>
-              ))}
-            </>
-          ) : (
-            <p className="col-span-3 text-xs text-slate-500">No status yet{aiErr ? '' : ' — run a check'}.</p>
-          )}
-        </div>
-        {aiStatus && <p className="text-xs text-slate-500">"auto" currently resolves to <span className="font-mono text-slate-300">{aiStatus.autoResolvesTo}</span> on the AI server.</p>}
-        {aiStatus?.aiServer?.detail?.providers && (
-          <div className="flex flex-wrap gap-2">
-            <span className="text-xs text-slate-500">Available providers on AI server:</span>
-            {aiStatus.aiServer.detail.providers.map((p) => (
-              <span key={p} className="glass-chip text-xs">{p}</span>
-            ))}
-          </div>
-        )}
-      </section>
-    </div>
-  );
-}