@bhooai/nexus-cli 2.0.7 → 2.0.8

package/templates/base/apps/admin/src/pages/Plugins.tsx

@@ -1,36 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { getPlugins } from '../api.js';
-import { PageHead } from '../components/ui/PageHead.js';
-import { PageHero } from '../components/ui/PageHero.js';
-
-export function Plugins() {
-  const [data, setData] = useState<{ pages: any[]; slots: Record<string, any[]> } | null>(null);
-  useEffect(() => { getPlugins().then(setData).catch(() => {}); }, []);
-  if (!data) return <p className="text-slate-400">Loading…</p>;
-  return (
-    <div className="space-y-6">
-      <PageHead title="Plugins" />
-      <PageHero kicker="EXTENSION GALLERY" title={<>Extend Nexus, <em>effortlessly.</em></>} desc="Every admin page, slot and surface that plugin modules register — a living index of what's available to your build." glyph="puzzle" art="grid" />
-      <div className="glass-card space-y-4">
-        <h3 className="glass-h3">Admin pages</h3>
-        <ul className="space-y-1">
-          {data.pages.map((p) => (
-            <li key={p.path} className="flex items-center gap-2 font-mono text-sm text-slate-200">
-              <span className="chip">{p.group ?? 'Plugins'}</span> {p.title} —{' '}
-              <a href={p.path} target="_blank" rel="noreferrer" className="text-slate-400 underline decoration-dotted underline-offset-4 transition-colors hover:text-sky-300">
-                {p.path}
-              </a>
-            </li>
-          ))}
-          {!data.pages.length && <li className="text-sm text-slate-500">No plugin pages registered.</li>}
-        </ul>
-        {Object.keys(data.slots).length > 0 && (
-          <>
-            <h3 className="glass-h3">Slots</h3>
-            <pre className="glass-code overflow-auto p-3">{JSON.stringify(data.slots, null, 2)}</pre>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/templates/base/apps/admin/src/pages/Processes.tsx

@@ -1,67 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { getServices, controlService, getServiceLogs, type ServiceState } from '../api.js';
-import { Icon } from '../icons.js';
-import { PageHead } from '../components/ui/PageHead.js';
-import { PageHero } from '../components/ui/PageHero.js';
-
-export function Processes() {
-  const [services, setServices] = useState<ServiceState[]>([]);
-  const [logs, setLogs] = useState<Record<string, string[]>>({});
-  const [sel, setSel] = useState<string | null>(null);
-
-  const refresh = async () => {
-    try { setServices(await getServices()); } catch { setServices([]); }
-  };
-  useEffect(() => { refresh(); const t = setInterval(refresh, 3000); return () => clearInterval(t); }, []);
-
-  const showLogs = async (name: string) => {
-    setSel(name);
-    setLogs({ ...logs, [name]: await getServiceLogs(name) });
-  };
-
-  const color = (s: string) => (s === 'running' ? 'text-emerald-400' : s === 'errored' ? 'text-rose-400' : 'text-slate-400');
-
-  return (
-    <div className="space-y-6">
-      <PageHead title="Processes">
-        <button onClick={refresh} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh</button>
-      </PageHead>
-      <PageHero kicker="SERVICE CONTROL PLANE" title={<>Your services, <em>in check.</em></>} desc="Every backend, frontend and AI process the supervisor is tending — live status, uptime, PID and one-click control." glyph="server" art="bars" />
-      <div className="glass-panel overflow-hidden p-2">
-        <table className="glass-table">
-          <thead><tr className="text-slate-400"><th>Service</th><th className="text-center">Status</th><th className="text-center">PID</th><th className="text-center">Uptime</th><th className="text-center">Actions</th></tr></thead>
-          <tbody>
-            {services.map((s) => (
-              <tr key={s.name}>
-                <td className="font-mono text-slate-200">{s.name}</td>
-                <td className={`text-center ${color(s.status)}`}>
-                  <span className="inline-flex items-center gap-2">
-                    <span className={`inline-block h-2 w-2 rounded-full ${s.status === 'running' ? 'bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.9)]' : s.status === 'errored' ? 'bg-rose-500' : 'bg-slate-500'}`} />
-                    {s.status}
-                  </span>
-                </td>
-                <td className="text-center text-slate-400">{s.pid ?? '—'}</td>
-                <td className="text-center text-slate-400">{s.startedAt ? `${Math.round((Date.now() - s.startedAt) / 1000)}s` : '—'}</td>
-                <td className="text-center">
-                  <span className="inline-flex gap-1.5">
-                    <button onClick={() => controlService('start', s.name)} className="glass-chip-btn">start</button>
-                    <button onClick={() => controlService('stop', s.name)} className="glass-chip-btn-danger">stop</button>
-                    <button onClick={() => controlService('restart', s.name)} className="glass-chip-btn">restart</button>
-                    <button onClick={() => showLogs(s.name)} className="glass-chip-btn">logs</button>
-                  </span>
-                </td>
-              </tr>
-            ))}
-            {!services.length && <tr><td colSpan={5} className="py-8 text-center text-slate-500">No services reported by the supervisor.</td></tr>}
-          </tbody>
-        </table>
-      </div>
-      {sel && (
-        <div className="glass-card space-y-2">
-          <h3 className="glass-h3">{sel} logs</h3>
-          <pre className="glass-code max-h-80 overflow-auto p-3">{((logs[sel] ?? []).join('\n')) || '— empty —'}</pre>
-        </div>
-      )}
-    </div>
-  );
-}

package/templates/base/apps/admin/src/pages/Schema.tsx

@@ -1,130 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { getDatabases, createCollection, generateSchema, getAiStatus, type DatabaseInfo, type GeneratedSchema, type AiStatus } from '../api.js';
-import { useAdminAlert } from '../alertCenter.js';
-import { PageHead } from '../components/ui/PageHead.js';
-import { PageHero } from '../components/ui/PageHero.js';
-
-export function Schema() {
-  const [prompt, setPrompt] = useState('');
-  const [databases, setDatabases] = useState<DatabaseInfo[]>([]);
-  const [db, setDb] = useState('');
-  const [result, setResult] = useState<GeneratedSchema | null>(null);
-  const [edited, setEdited] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [msg, setMsg] = useAdminAlert('schema');
-  const [aiStatus, setAiStatus] = useState<AiStatus | null>(null);
-  const [aiErr, setAiErr] = useState('');
-
-  useEffect(() => { getDatabases().then((d) => setDatabases(d.databases ?? [])).catch(() => {}); }, []);
-
-  const checkAi = async () => {
-    setAiErr('');
-    try { setAiStatus(await getAiStatus()); } catch (e: any) { setAiErr(String(e?.message ?? e)); }
-  };
-  useEffect(() => { checkAi(); }, []);
-
-  const generate = async () => {
-    if (!prompt.trim()) { setMsg('Describe the data you want to model, e.g. "products with a name, price and category".'); return; }
-    setBusy(true); setMsg('');
-    try {
-      const g = await generateSchema(prompt);
-      setResult(g);
-      setEdited(JSON.stringify(g.jsonSchema, null, 2));
-      setMsg(`Schema generated (${g.model}) — review and create.`);
-    } catch (e: any) { setMsg(`Generation failed: ${e?.message ?? e} — check the AI status below (is the AI server running on :8000?).`); }
-    finally { setBusy(false); }
-  };
-
-  const create = async () => {
-    setMsg('');
-    let schema: unknown;
-    try { schema = JSON.parse(edited); } catch { setMsg('Edited schema is not valid JSON.'); return; }
-    const target = db || databases[0]?.name;
-    if (!target) { setMsg('Create a database first (Databases tab), then pick it here.'); return; }
-    try {
-      await createCollection(target, { name: result?.collection ?? 'ai_schema', jsonSchema: schema });
-      setMsg(`Created collection "${result?.collection ?? 'ai_schema'}" in "${target}" with the validator attached.`);
-    } catch (e: any) { setMsg(`Create failed: ${e?.message ?? e}`); }
-  };
-
-  return (
-    <div className="space-y-6">
-      <PageHead title="AI Schema Creation" />
-      <PageHero kicker="AI WORKSPACE" title={<>Schemas, <em>born from language.</em></>} desc="Describe the data you need in plain English and let the model return a validated MongoDB schema you can review before it's live." glyph="sparkles" art="bolt" />
-      <p className="text-sm text-slate-400">Describe the data in plain English — the AI returns a MongoDB <code className="rounded bg-white/10 px-1 font-mono text-xs">$jsonSchema</code> validator plus a field list, which you review and create as a validator-protected collection.</p>
-
-      <section className="glass-card space-y-3">
-        <div className="flex items-center justify-between">
-          <h3 className="glass-h3">AI provider status</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) reachable` : 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>}
-      </section>
-
-      <div className="glass-card space-y-3">
-        <div className="flex items-center justify-between">
-          <h3 className="glass-h3">Describe your collection</h3>
-          <span className="inline-flex items-center gap-1.5 rounded-full border border-indigo-300/30 bg-indigo-400/10 px-2.5 py-1 text-[0.6rem] font-semibold uppercase tracking-wider text-indigo-300"><i className="dot-ok" /> AI auto</span>
-        </div>
-        <textarea className="glass-code h-32 w-full p-3 text-sm" placeholder='e.g. "a products collection with name, price (number), in-stock flag, category from a fixed enum, created date and an optional description"' value={prompt} onChange={(e) => setPrompt(e.target.value)} />
-        <div className="flex flex-wrap items-center gap-2">
-          <label className="mr-1.5 text-sm text-slate-400">Database</label>
-          <select className="glass-input w-48 !py-1.5 text-sm" value={db} onChange={(e) => setDb(e.target.value)}>
-            <option value="" className="bg-slate-900">{databases.length ? 'pick a database…' : 'no databases yet'}</option>
-            {databases.map((d) => <option key={d.name} value={d.name} className="bg-slate-900">{d.name}</option>)}
-          </select>
-          <span className="text-xs text-slate-500">Provider &amp; model auto-selected on the AI server.</span>
-          <button onClick={generate} disabled={busy} className="glass-btn-primary ml-auto">{busy ? 'Generating…' : 'Generate with AI'}</button>
-        </div>
-      </div>
-
-      {result && (
-        <div className="space-y-3">
-          <div className="glass-card space-y-3">
-            <h3 className="glass-h3">Generated schema — <span className="font-mono text-indigo-300">{result.collection}</span></h3>
-            <div className="max-h-48 overflow-auto rounded-xl border border-white/10">
-              <table className="glass-table">
-                <thead><tr><th>Field</th><th>Type</th><th className="text-center">Required</th><th className="text-center">Unique</th><th>Description</th></tr></thead>
-                <tbody>
-                  {result.fields.map((f) => (
-                    <tr key={f.name}>
-                      <td className="font-mono text-slate-200">{f.name}</td>
-                      <td className="text-slate-300">{f.type}</td>
-                      <td className="text-center text-emerald-400">{f.required ? '✓' : ''}</td>
-                      <td className="text-center text-indigo-300">{f.unique ? '✓' : ''}</td>
-                      <td className="text-slate-400">{f.description ?? ''}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            <div>
-              <h4 className="glass-h3 mb-2">$jsonSchema validator <span className="ml-1 font-normal normal-case text-slate-500">(editable before creating)</span></h4>
-              <textarea className="glass-code h-56 w-full p-3 text-xs" value={edited} onChange={(e) => setEdited(e.target.value)} spellCheck={false} />
-            </div>
-            <button onClick={create} className="glass-btn-success">Create collection with validator</button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/templates/base/apps/admin/src/pages/Users.tsx

@@ -1,144 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { getUsers, getRoles, putUserRoles, type UserRecord, type RoleDefinition } from '../api.js';
-import { useAdminAlert } from '../alertCenter.js';
-import { PageHead } from '../components/ui/PageHead.js';
-import { PageHero } from '../components/ui/PageHero.js';
-
-export function Users({ currentUserEmail }: { currentUserEmail?: string }) {
-  const [data, setData] = useState<{ users: UserRecord[] } | null>(null);
-  const [roles, setRoles] = useState<RoleDefinition[]>([]);
-  const [msg, setMsg] = useAdminAlert('users');
-  const [editing, setEditing] = useState<UserRecord | null>(null);
-  const [draft, setDraft] = useState<string[]>([]);
-  const [busy, setBusy] = useState(false);
-
-  const reload = useCallback(async () => {
-    try {
-      const [u, r] = await Promise.all([getUsers(), getRoles()]);
-      setData(u);
-      setRoles(r?.roles ?? []);
-    } catch (e: any) {
-      setMsg({ kind: 'err', text: `Could not load users or roles: ${e?.message ?? 'unknown error'}` });
-    }
-  }, []);
-
-  useEffect(() => { void reload(); }, [reload]);
-
-  const openEditor = (u: UserRecord) => { setEditing(u); setDraft([...(u.roles ?? [])]); setMsg(null); };
-  const toggleRole = (id: string) => setDraft((d) => (d.includes(id) ? d.filter((r) => r !== id) : [...d, id]));
-
-  const saveRoles = async () => {
-    if (!editing) return;
-    if (!draft.length) { setMsg({ kind: 'err', text: 'A user must keep at least one role.' }); return; }
-    setBusy(true);
-    try {
-      await putUserRoles(editing._id, draft);
-      setMsg({ kind: 'ok', text: `Saved roles for ${editing.email}.` });
-      setEditing(null);
-      await reload();
-    } catch (e: any) {
-      const raw = String(e?.message ?? 'Update failed');
-      const clean = raw.replace(/^.*\/admin\/users[^\s]*\s*\d+\s*/i, '').trim();
-      setMsg({ kind: 'err', text: clean || 'Update failed.' });
-    } finally { setBusy(false); }
-  };
-
-  const roleDef = (id: string) => roles.find((r) => r.id === id);
-  const roleChip = (id: string) => {
-    const def = roleDef(id);
-    const accent = def?.accent ?? '#8ba0bd';
-    return <span key={id} className="role-chip" style={{ color: accent, borderColor: `${accent}66`, background: `${accent}1a` }}>{def?.icon ?? '◌'} {def?.label ?? id}</span>;
-  };
-
-  if (!data) return <p className="text-slate-400">Loading…</p>;
-
-  return (
-    <div className="space-y-6">
-      <PageHead title="Users & Roles" />
-      <PageHero kicker="ACCESS & PERMISSIONS" title={<>Your team, <em>in control.</em></>} desc="Every account that can reach this Nexus surface — with role grants and restrictions applied in one built-in permission catalog." glyph="users" art="people" />
-
-      <div className="glass-panel overflow-hidden p-2">
-        <table className="glass-table">
-          <thead><tr><th>Email</th><th className="text-center">Name</th><th>Roles</th><th className="text-center">Verified</th><th className="text-right">Actions</th></tr></thead>
-          <tbody>
-            {data.users.map((u) => (
-              <tr key={String(u._id)}>
-                <td className="text-slate-200">{u.email}{u.email === currentUserEmail && <span className="you-tag">you</span>}</td>
-                <td className="text-slate-300">{u.name ?? '—'}</td>
-                <td>
-                  {(u.roles ?? []).map(roleChip)}
-                  {!(u.roles ?? []).length && '—'}
-                </td>
-                <td className="text-center text-emerald-400">{u.emailVerified ? '✓' : <span className="text-slate-500">—</span>}</td>
-                <td className="text-right"><button className="glass-chip-btn" onClick={() => openEditor(u)}>â—ˆ Edit roles</button></td>
-              </tr>
-            ))}
-            {!data.users.length && <tr><td colSpan={5} className="py-8 text-center text-slate-500">No users registered.</td></tr>}
-          </tbody>
-        </table>
-      </div>
-
-      <div className="role-catalog">
-        {roles.map((r) => (
-          <div className="role-box" key={r.id} style={{ ['--role-accent' as string]: r.accent }}>
-            <div className="role-box-head">
-              <span className="role-box-icon" style={{ color: r.accent }}>{r.icon}</span>
-              <div>
-                <strong style={{ color: r.accent }}>{r.label}</strong>
-                <code className="role-box-id">{r.id}</code>
-              </div>
-            </div>
-            <p className="role-box-desc">{r.description}</p>
-            <div className="role-section">
-              <span className="role-section-title is-can">✓ Can do</span>
-              <ul className="role-list">
-                {r.grants.map((g) => <li key={g.label}><b>{g.label}</b><span>{g.detail}</span></li>)}
-              </ul>
-            </div>
-            <div className="role-section">
-              <span className="role-section-title is-no">✕ Restricted from</span>
-              <ul className="role-list">
-                {r.restricts.map((g) => <li key={g.label}><b>{g.label}</b><span>{g.detail}</span></li>)}
-              </ul>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {editing && (
-        <div className="confirm-overlay" onClick={() => !busy && setEditing(null)}>
-          <div className="confirm-dialog role-dialog" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
-            <div className="confirm-dialog-head">
-              <span className="confirm-dialog-mark">â—Ž</span>
-              <strong>Edit roles · {editing.email}</strong>
-              <button className="confirm-dialog-close" onClick={() => !busy && setEditing(null)} aria-label="Close">×</button>
-            </div>
-            <p className="confirm-dialog-message">Choose which roles this account holds — every selected role applies.</p>
-            <div className="role-options">
-              {roles.map((r) => {
-                const on = draft.includes(r.id);
-                return (
-                  <button key={r.id} type="button" className={`role-option${on ? ' is-on' : ''}`} style={{ ['--role-accent' as string]: r.accent }} onClick={() => toggleRole(r.id)}>
-                    <span className="role-option-icon" style={{ color: r.accent }}>{on ? '✓' : r.icon}</span>
-                    <span className="role-option-text">
-                      <b>{r.label}</b>
-                      <small>{r.description}</small>
-                    </span>
-                    <span className="role-option-check">{on ? '✓' : ''}</span>
-                  </button>
-                );
-              })}
-            </div>
-            {editing.email === currentUserEmail && (
-              <p className="role-hint">Editing your own account — removing <b>Administrator</b> from yourself is blocked server-side.</p>
-            )}
-            <div className="confirm-dialog-actions">
-              <button className="glass-chip-btn" onClick={() => setEditing(null)} disabled={busy}>Cancel</button>
-              <button className="glass-chip-btn-danger confirm-dialog-primary" onClick={saveRoles} disabled={busy}>{busy ? 'Saving…' : 'Save roles'}</button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,150 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { POPULAR_PROVIDERS, PRESET_BY_ID } from '../../lib/constants.js';
-import type { ProviderPreset } from '../../lib/types.js';
-
-export function AddProviderDialog({ value, onChange, onSubmit, onCancel, busy }: {
-  value: { id: string; label: string; baseUrl: string; apiKey: string; defaultModel: string };
-  onChange: (v: { id: string; label: string; baseUrl: string; apiKey: string; defaultModel: string }) => void;
-  onSubmit: () => void;
-  onCancel: () => void;
-  busy: boolean;
-}) {
-  const [presetId, setPresetId] = useState('');
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onCancel(); };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [onCancel]);
-
-  // Track which field the user is actively editing so we don't clobber their
-  // manual input when the preset changes the model list.
-  const preset = presetId ? PRESET_BY_ID[presetId] : undefined;
-
-  const applyPreset = (id: string) => {
-    setPresetId(id);
-    if (!id) return; // "— select —"
-    if (id === 'other') {
-      // Clear fields for a fully custom provider; user fills everything.
-      onChange({ id: '', label: '', baseUrl: '', apiKey: value.apiKey, defaultModel: '' });
-      return;
-    }
-    const p = PRESET_BY_ID[id];
-    if (p) {
-      onChange({ ...value, id: p.id, label: p.label, baseUrl: p.baseUrl, defaultModel: p.defaultModel });
-    }
-  };
-
-  const missing = {
-    id: !value.id.trim(),
-    label: !value.label.trim(),
-    baseUrl: !value.baseUrl.trim(),
-  };
-
-  return (
-    <div className="provider-modal-backdrop" onClick={onCancel}>
-      <div className="provider-modal space-y-4" onClick={(e) => e.stopPropagation()}>
-        <div className="flex items-center justify-between">
-          <h3 className="glass-h3">Add custom provider</h3>
-          <button onClick={onCancel} className="glass-chip-btn text-xs">✕</button>
-        </div>
-
-        <div className="space-y-3">
-          {/* Preset selector — pick a popular provider or "Other" */}
-          <label className="block">
-            <span className="admin-overline">Choose a provider</span>
-            <select
-              className="glass-input mt-1 text-sm"
-              value={presetId}
-              onChange={(e) => applyPreset(e.target.value)}
-            >
-              <option value="" className="bg-slate-900">— select —</option>
-              {POPULAR_PROVIDERS.map((p) => (
-                <option key={p.id} value={p.id} className="bg-slate-900">{p.label}</option>
-              ))}
-              <option value="other" className="bg-slate-900">Other (custom)</option>
-            </select>
-            <span className="text-[10px] text-slate-500">Selecting a provider autofills the fields below — all editable.</span>
-          </label>
-
-          <label className="block">
-            <span className="admin-overline">Provider ID <span className="text-rose-400">*</span></span>
-            <input
-              className={`glass-input mt-1 text-sm font-mono ${missing.id ? '!border-amber-500/50' : ''}`}
-              placeholder="e.g. myai"
-              value={value.id}
-              onChange={(e) => onChange({ ...value, id: e.target.value })}
-            />
-            {missing.id && <span className="text-[10px] text-amber-400">required — lowercase, no spaces</span>}
-          </label>
-
-          <label className="block">
-            <span className="admin-overline">Label <span className="text-rose-400">*</span></span>
-            <input
-              className={`glass-input mt-1 text-sm ${missing.label ? '!border-amber-500/50' : ''}`}
-              placeholder="e.g. My AI Service"
-              value={value.label}
-              onChange={(e) => onChange({ ...value, label: e.target.value })}
-            />
-            {missing.label && <span className="text-[10px] text-amber-400">required</span>}
-          </label>
-
-          <label className="block">
-            <span className="admin-overline">Base URL <span className="text-rose-400">*</span></span>
-            <input
-              className={`glass-input mt-1 text-sm font-mono ${missing.baseUrl ? '!border-amber-500/50' : ''}`}
-              placeholder="https://api.example.com/v1"
-              value={value.baseUrl}
-              onChange={(e) => onChange({ ...value, baseUrl: e.target.value })}
-            />
-            {missing.baseUrl && <span className="text-[10px] text-amber-400">required</span>}
-          </label>
-
-          <label className="block">
-            <span className="admin-overline">API key <span className="text-slate-500">(optional)</span></span>
-            <input
-              className="glass-input mt-1 text-sm"
-              type="password"
-              placeholder="paste API key"
-              value={value.apiKey}
-              onChange={(e) => onChange({ ...value, apiKey: e.target.value })}
-            />
-          </label>
-
-          {/* Default model — text input + a "pick from popular" select */}
-          <label className="block">
-            <span className="admin-overline">Default model <span className="text-slate-500">(optional)</span></span>
-            <input
-              className="glass-input mt-1 text-sm font-mono"
-              placeholder="e.g. gpt-4o-mini"
-              value={value.defaultModel}
-              onChange={(e) => onChange({ ...value, defaultModel: e.target.value })}
-            />
-          </label>
-          {preset && preset.models.length > 0 && (
-            <label className="block">
-              <span className="admin-overline">…or pick a model</span>
-              <select
-                className="glass-input mt-1 text-sm font-mono"
-                value=""
-                onChange={(e) => { if (e.target.value) onChange({ ...value, defaultModel: e.target.value }); }}
-              >
-                <option value="" className="bg-slate-900">{preset.models.length} popular model{preset.models.length === 1 ? '' : 's'} — click to use</option>
-                {preset.models.map((m) => (
-                  <option key={m} value={m} className="bg-slate-900">{m}</option>
-                ))}
-              </select>
-            </label>
-          )}
-        </div>
-
-        <div className="flex justify-end gap-2 pt-2 border-t border-sky-400/20">
-          <button onClick={onCancel} disabled={busy} className="glass-chip-btn">Cancel</button>
-          <button onClick={onSubmit} disabled={busy || missing.id || missing.label || missing.baseUrl} className="glass-btn-primary !py-1.5 text-sm">
-            {busy ? 'Adding…' : '+ Add provider'}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,31 +0,0 @@
-import React, { useState } from 'react';
-import { Icon } from '../../icons.js';
-import type { ToggleStyle } from '../../lib/types.js';
-import { PageHead } from '../../components/ui/PageHead.js';
-import { PageHero } from '../../components/ui/PageHero.js';
-import { AiSettings } from './AiSettings.js';
-import { AiProviders } from './AiProviders.js';
-import { AiChatPlayground } from './AiChatPlayground.js';
-
-export function AiAgents({ toggle }: { toggle: ToggleStyle }) {
-  const [aiTab, setAiTab] = useState<'settings' | 'providers' | 'chat'>('settings');
-  return (
-    <div className="space-y-6">
-      <PageHead title="AI Agents" />
-      <PageHero kicker="AI WORKSPACE" title={<>Agents, <em>at your command.</em></>} desc="Manage AI settings, configure providers with API keys, and test agents with a live chat playground." glyph="sparkles" art="spark" />
-
-      {/* Sub-tab nav */}
-      <div className="workspace-tabs">
-        {([['settings', 'AI Settings', 'settings'], ['providers', 'AI Providers', 'grid'], ['chat', 'Chat Playground', 'message']] as const).map(([id, label, icon]) => (
-          <button key={id} onClick={() => setAiTab(id)} className={aiTab === id ? 'is-active' : ''}>
-            <span className="mr-1.5"><Icon name={icon} size={13} /></span>{label}
-          </button>
-        ))}
-      </div>
-
-      {aiTab === 'settings' && <AiSettings />}
-      {aiTab === 'providers' && <AiProviders toggle={toggle} />}
-      {aiTab === 'chat' && <AiChatPlayground />}
-    </div>
-  );
-}