@bhooai/nexus-cli 2.0.6 → 2.0.7

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

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import { getMetrics, getRequestSeries, getRequestLogs, type RequestSeries, type RequestLogEntry, type RequestSeriesRange } from '../api.js';
+import { PageHead } from '../components/ui/PageHead.js';
+import { PageHero } from '../components/ui/PageHero.js';
+import { RequestSeriesChart } from './monitoring/RequestSeriesChart.js';
+
+const SERIES_OPTIONS: Array<{ id: RequestSeriesRange; label: string }> = [
+  { id: 'today', label: 'Today' },
+  { id: '5d', label: '5 days' },
+  { id: 'week', label: 'Week' },
+  { id: 'month', label: 'Month' },
+  { id: 'year', label: 'Year' },
+];
+
+export function Monitoring() {
+  const [data, setData] = useState<any>(null);
+  const [series, setSeries] = useState<RequestSeries | null>(null);
+  const [logs, setLogs] = useState<RequestLogEntry[]>([]);
+  const [range, setRange] = useState<RequestSeriesRange>('today');
+  useEffect(() => {
+    getMetrics().then(setData).catch(() => {});
+    const t = setInterval(() => getMetrics().then(setData).catch(() => {}), 5000);
+    return () => clearInterval(t);
+  }, []);
+  useEffect(() => {
+    let alive = true;
+    const load = async () => {
+      try { const s = await getRequestSeries(range); if (alive) setSeries(s); } catch { if (alive) setSeries(null); }
+    };
+    void load();
+    const intervalMs = range === 'today' ? 5000 : range === '5d' ? 30000 : 60000;
+    const t = setInterval(load, intervalMs);
+    return () => { alive = false; clearInterval(t); };
+  }, [range]);
+  useEffect(() => {
+    getRequestLogs().then(setLogs).catch(() => {});
+    const t = setInterval(() => getRequestLogs().then(setLogs).catch(() => {}), 5000);
+    return () => clearInterval(t);
+  }, []);
+  if (!data) return <p className="text-slate-400">Loading…</p>;
+  return (
+    <div className="space-y-6">
+      <PageHead title="Monitoring" />
+      <PageHero kicker="LIVE TELEMETRY" title={<>Watch the whole <em>machine.</em></>} desc="A calm, self-refreshing readout of the backend heartbeat — uptime, PID and request traffic without the noise." glyph="activity" art="coins" />
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
+        <div className="glass-card"><div className="glass-h3">Uptime</div><div className="mt-2 text-3xl font-bold text-slate-100">{Math.round(data.uptime ?? 0)}<span className="ml-1 text-sm font-normal text-slate-400">s</span></div></div>
+        <div className="glass-card"><div className="glass-h3">PID</div><div className="mt-2 font-mono text-3xl font-bold text-slate-100">{data.pid}</div></div>
+        <div className="glass-card"><div className="glass-h3">HTTP requests</div><div className="mt-2 text-2xl font-bold text-indigo-300">{(() => { const v = data.metrics?.http_requests_total?.values; return v ? Object.values(v).reduce((a: number, b) => a + Number(b ?? 0), 0) : '—'; })()}</div></div>
+      </div>
+      <div className="glass-card">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <h3 className="glass-h3">Request traffic</h3>
+          <div className="series-tabs">
+            {SERIES_OPTIONS.map((o) => (
+              <button key={o.id} type="button" className={range === o.id ? 'is-active' : ''} onClick={() => setRange(o.id)}>{o.label}</button>
+            ))}
+          </div>
+        </div>
+        <RequestSeriesChart series={series} />
+      </div>
+      <div className="glass-card">
+        <h3 className="glass-h3 mb-3">Recent requests</h3>
+        {logs.length ? (
+          <div className="req-log-table-wrap">
+            <table className="glass-table req-log-table">
+              <thead><tr className="text-slate-400"><th>Time</th><th>Method</th><th>Path</th><th className="text-center">Status</th><th className="text-right">Dur</th><th>IP</th><th>Referer</th></tr></thead>
+              <tbody>
+                {logs.map((r, i) => (
+                  <tr key={i}>
+                    <td className="req-td-time">{new Date(r.time).toLocaleTimeString()}</td>
+                    <td className={`req-method req-method-${String(r.method).toLowerCase()}`}>{r.method}</td>
+                    <td className="req-td-path" title={r.url ?? r.path}>{r.url ?? r.path}</td>
+                    <td className={`text-center req-status ${r.status >= 500 ? 'req-status-err' : r.status >= 400 ? 'req-status-warn' : ''}`}>{r.status}</td>
+                    <td className="text-right req-td-dur">{r.durationMs}ms</td>
+                    <td className="req-td-ip">{r.ip ?? '—'}</td>
+                    <td className="req-td-ref" title={r.referer}>{r.referer ?? '—'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p className="text-sm text-slate-400">No requests logged yet.</p>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,108 @@
+import React, { useState, useEffect, useRef } from 'react';
+import type { Tab } from '../lib/types.js';
+import { friendlyPreflightError, preflightAddress } from '../lib/utils.js';
+import { getMetrics, getServices, runPreflight, type ServiceState, type PreflightReport } from '../api.js';
+import { Icon } from '../icons.js';
+import { PageHead } from '../components/ui/PageHead.js';
+import { TrafficChart } from './overview/TrafficChart.js';
+
+export function Overview({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
+  const [metrics, setMetrics] = useState<any>(null);
+  const [services, setServices] = useState<ServiceState[]>([]);
+  const [preflight, setPreflight] = useState<PreflightReport | null>(null);
+  const [preflightBusy, setPreflightBusy] = useState(false);
+  const [preflightErr, setPreflightErr] = useState('');
+  const [traffic, setTraffic] = useState<number[]>([]);
+  const prevTotal = useRef<number | null>(null);
+  useEffect(() => {
+    const load = async () => {
+      try { setMetrics(await getMetrics()); } catch { setMetrics(null); }
+      try { setServices(await getServices()); } catch { setServices([]); }
+    };
+    load();
+    const timer = setInterval(load, 5000);
+    return () => clearInterval(timer);
+  }, []);
+  useEffect(() => {
+    if (!metrics?.metrics?.http_requests_total?.values) return;
+    const values = metrics.metrics.http_requests_total.values as Record<string, number>;
+    const total = Object.values(values).reduce((sum: number, value) => sum + Number(value ?? 0), 0);
+    const prev = prevTotal.current;
+    prevTotal.current = total;
+    if (prev == null) return;
+    const delta = total - prev;
+    if (delta < 0) return;
+    setTraffic((t) => [...t, delta].slice(-20));
+  }, [metrics]);
+  const running = services.filter((service) => service.status === 'running').length;
+  const requests = metrics?.metrics?.http_requests_total?.values;
+  const requestCount = requests ? Object.values(requests).reduce((sum: number, value) => sum + Number(value ?? 0), 0) : 0;
+  const runChecks = async () => {
+    setPreflightBusy(true);
+    setPreflightErr('');
+    try {
+      setPreflight(await runPreflight());
+    } catch (e: any) {
+      setPreflight(null);
+      setPreflightErr(e?.message || 'Preflight request failed');
+    }
+    setPreflightBusy(false);
+  };
+  return (
+    <div className="admin-view-stack">
+      <PageHead title="Project Overview"><button onClick={() => onNavigate('processes')} className="workspace-action">Open services <span>→</span></button></PageHead>
+      <div className="overview-hero"><div><span className="admin-overline">GOOD MORNING, ADMIN</span><h1>Your project is <em>in orbit.</em></h1><p>One calm surface for the services, configuration, data, and AI that power your Nexus application.</p></div><div className="hero-orbit-art"><span /><i /><b /><strong>NX</strong></div></div>
+      <div className="overview-stat-grid"><div className="overview-stat"><span>ACTIVE SERVICES</span><strong>{running}<small>/{services.length || 4}</small></strong><b className="stat-good">● running now</b></div><div className="overview-stat"><span>HTTP REQUESTS</span><strong>{requestCount || '—'}</strong><b>since boot</b></div><div className="overview-stat"><span>UPTIME</span><strong>{metrics ? `${Math.round((metrics.uptime ?? 0) / 60)}m` : '—'}</strong><b>backend process</b></div><div className="overview-stat"><span>ENVIRONMENT</span><strong>DEV</strong><b className="stat-violet">local workspace</b></div></div>
+      <section className="workspace-panel live-traffic-panel"><div className="panel-title-row"><div><span className="admin-overline">HTTP REQUESTS</span><h3>Live traffic</h3></div><span className="live-badge"><i className="status-dot good" /> LIVE</span></div><TrafficChart samples={traffic} total={requestCount} last={traffic.length ? traffic[traffic.length - 1] : 0} onNavigate={onNavigate} /></section>
+      <div className="overview-columns"><section className="workspace-panel"><div className="panel-title-row"><div><span className="admin-overline">PROJECT SURFACES</span><h3>Everything in one place</h3></div><button onClick={() => onNavigate('config')} className="text-action">View config →</button></div><div className="surface-grid"><button className="surface-card acc-blue" onClick={() => onNavigate('config')}><span className="surface-icon"><Icon name="braces" size={20} /></span><strong>Runtime config</strong><small>nexus.runtime.json overrides</small><i className="surface-go">→</i></button><button className="surface-card acc-violet" onClick={() => onNavigate('env')}><span className="surface-icon"><Icon name="key" size={20} /></span><strong>Environment</strong><small>Masked secrets editor</small><i className="surface-go">→</i></button><button className="surface-card acc-pink" onClick={() => onNavigate('databases')}><span className="surface-icon"><Icon name="database" size={20} /></span><strong>Data layer</strong><small>Mongo databases &amp; collections</small><i className="surface-go">→</i></button><button className="surface-card acc-blue" onClick={() => onNavigate('theme')}><span className="surface-icon"><Icon name="sparkles" size={20} /></span><strong>AI theme</strong><small>Generate schemas from English</small><i className="surface-go">→</i></button><button className="surface-card acc-violet" onClick={() => onNavigate('users')}><span className="surface-icon"><Icon name="users" size={20} /></span><strong>Users &amp; roles</strong><small>Accounts, roles &amp; grants</small><i className="surface-go">→</i></button><button className="surface-card acc-pink" onClick={() => onNavigate('payments')}><span className="surface-icon"><Icon name="dollar" size={20} /></span><strong>Payments</strong><small>Orders, transactions &amp; providers</small><i className="surface-go">→</i></button><button className="surface-card acc-blue" onClick={() => onNavigate('ai')}><span className="surface-icon"><Icon name="bot" size={20} /></span><strong>AI agents</strong><small>Providers &amp; chat playground</small><i className="surface-go">→</i></button></div></section><section className="workspace-panel pulse-panel"><div className="panel-title-row"><div><span className="admin-overline">SYSTEM PULSE</span><h3>Services are moving</h3></div><span className="live-badge"><i className="status-dot good" /> LIVE</span></div><div className="pulse-bars">{[34,55,42,78,62,88,52,72,48,66,84,58].map((height, index) => <i key={index} style={{ height: `${height}%` }} />)}</div><p>Live supervisor status refreshes every five seconds.</p><button onClick={() => onNavigate('monitoring')} className="text-action">Open monitoring →</button></section></div>
+      <section className="workspace-panel">
+        <div className="panel-title-row">
+          <div><span className="admin-overline">PREFLIGHT DIAGNOSTICS</span><h3>Dependencies are being probed</h3></div>
+          <button onClick={runChecks} disabled={preflightBusy} className="glass-chip-btn">{preflightBusy ? 'probing…' : <><Icon name="refresh" size={12} /> run checks</>}</button>
+        </div>
+        <p className="preflight-note">The Python server pings the backend API, AI server, GraphQL endpoint and data-store ports, and reports latency per target.</p>
+        {preflightErr && (
+          <div role="alert" className="mb-3 rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-400">
+            Preflight failed — {preflightErr}
+          </div>
+        )}
+        {preflight ? (
+          <>
+            <div className="preflight-summary">
+              <span className="preflight-count ok">● {preflight.passed} ok</span>
+              <span className="preflight-count warn">◐ {preflight.warnings} slow</span>
+              <span className="preflight-count bad">● {preflight.failed} failed</span>
+              <span className="preflight-meta">{preflight.durationMs}ms · {preflight.ranAt}</span>
+            </div>
+            {preflight.engineOk === false || (preflight.checks.length > 0 && preflight.failed === preflight.checks.length) ? (
+              <div className="preflight-guidance">
+                <strong>Nothing responded.</strong>
+                <span>The stack may not be running. Start everything with <code>nexus dev</code>, or Python-only with <code>python main.py</code>. Then press “run checks” again.</span>
+                <button onClick={() => onNavigate('processes')} className="text-action">Open services →</button>
+              </div>
+            ) : null}
+          </>
+        ) : preflightBusy ? (
+          <p className="preflight-empty">Probing dependencies…</p>
+        ) : (
+          <p className="preflight-empty">No checks run yet — press “run checks”.</p>
+        )}
+        {preflight && (
+          <div className="preflight-list">
+            {preflight.checks.map((c) => (
+              <div key={c.name} className="preflight-row">
+                <span className={`preflight-dot ${c.ok ? 'good' : 'bad'}`} />
+                <span className="preflight-check-name">{c.name}</span>
+                <span className="preflight-kind">{c.kind}</span>
+                {preflightAddress(c) && <span className="preflight-address">{preflightAddress(c)}</span>}
+                {c.latencyMs != null && <span className="preflight-latency">{c.latencyMs}ms</span>}
+                <span className={`preflight-state ${c.ok ? 'ok' : 'fail'}`}>{c.ok ? 'ok' : 'fail'}</span>
+                {c.error && <span className="preflight-error" title={friendlyPreflightError(c.error, c.errorCategory)}>{friendlyPreflightError(c.error, c.errorCategory)}</span>}
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { Icon } from '../icons.js';
+import {
+  getPaymentOrders, getPaymentTransactions, getPaymentStatus,
+  type PaymentProviderStatus,
+} from '../api.js';
+import { useAdminAlert } from '../alertCenter.js';
+import type { ToggleStyle, PaymentOrder, PaymentTransaction } from '../lib/types.js';
+import { ALL_PROVIDERS } from '../lib/constants.js';
+import { PageHead } from '../components/ui/PageHead.js';
+import { PageHero } from '../components/ui/PageHero.js';
+import { OrdersTable } from './payments/OrdersTable.js';
+import { TransactionsTable } from './payments/TransactionsTable.js';
+import { TestConsole } from './payments/TestConsole.js';
+
+export function Payments({ toggle }: { toggle: ToggleStyle }) {
+  const [tab, setTab] = useState<'orders' | 'transactions' | 'test'>('orders');
+  const [orders, setOrders] = useState<PaymentOrder[]>([]);
+  const [transactions, setTransactions] = useState<PaymentTransaction[]>([]);
+  const [status, setStatus] = useState<PaymentProviderStatus[]>([]);
+  const [provider, setProvider] = useState('all');
+  const [msg, setMsg] = useAdminAlert('payments');
+
+  const load = async (q = provider) => {
+    setMsg('');
+    try {
+      const filter = q === 'all' ? undefined : q;
+      const [o, t, s] = await Promise.all([getPaymentOrders(filter), getPaymentTransactions(filter), getPaymentStatus()]);
+      setOrders(o.orders ?? []);
+      setTransactions(t.transactions ?? []);
+      setStatus(s.providers ?? []);
+    } catch (e: any) { setMsg(String(e?.message ?? e)); }
+  };
+  useEffect(() => { load('all'); }, []);
+
+  return (
+    <div className="space-y-6">
+      <PageHead title="Payments">
+        <div className="flex items-center gap-3">
+          <select value={provider} onChange={(e) => { const v = e.target.value; setProvider(v); load(v); }} className="glass-input w-44 !py-1.5">
+            <option value="all" className="bg-slate-900">All providers</option>
+            {ALL_PROVIDERS.map((p) => <option key={p} value={p} className="bg-slate-900">{p}</option>)}
+          </select>
+          <button onClick={() => load()} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh</button>
+        </div>
+      </PageHead>
+      <PageHero kicker="PAYMENT OPERATIONS" title={<>Money flow, <em>on the ledger.</em></>} desc="Every charge, refund and provider event from your payment stack — one surface to reconcile what went through." glyph="dollar" art="cards" />
+
+      <div className="workspace-tabs">
+        {([
+          ['orders', `Orders (${orders.length})`],
+          ['transactions', `Transactions (${transactions.length})`],
+          ['test', 'Test Console'],
+        ] as const).map(([id, label]) => (
+          <button key={id} onClick={() => setTab(id)} className={tab === id ? 'is-active' : ''}>
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'orders' && <OrdersTable orders={orders} />}
+      {tab === 'transactions' && <TransactionsTable transactions={transactions} />}
+      {tab === 'test' && (
+        <TestConsole toggle={toggle} status={status} onRun={() => load()} onNotice={setMsg} onCreated={() => { setTab('orders'); load(); }} />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,130 @@
+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>
+  );
+}