@bhooai/nexus-cli 2.0.7 → 2.0.8

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

@@ -1,69 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import type { Tab } from '../lib/types.js';
-import { groupEntries } from '../lib/utils.js';
-import { getAdminEnv, putAdminEnv, runLintEnv, type AdminEnv, type EnvEntry } from '../api.js';
-import { useAdminAlert } from '../alertCenter.js';
-import { Icon } from '../icons.js';
-import { PageHead } from '../components/ui/PageHead.js';
-import { LintChecks } from '../components/ui/LintChecks.js';
-import { ConfirmDialog } from '../components/ui/ConfirmDialog.js';
-
-export function Environment({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
-  const [data, setData] = useState<AdminEnv | null>(null);
-  const [entries, setEntries] = useState<EnvEntry[]>([]);
-  const [msg, setMsg] = useAdminAlert('environment');
-  const [busy, setBusy] = useState(false);
-  const [restartDialog, setRestartDialog] = useState(false);
-  const [newKey, setNewKey] = useState('');
-  const [newValue, setNewValue] = useState('');
-  const [file, setFile] = useState('.env');
-  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
-  const load = async (target: string = file) => { try { const result = await getAdminEnv(target); setData(result); setEntries(result.entries); setMsg(result.exists ? '' : `No ${target} file exists yet. Saving will create it.`); } catch (e: any) { setMsg(String(e?.message ?? e)); } };
-  useEffect(() => { load(); }, []);
-  const addVariable = () => {
-    if (!newKey.trim()) return;
-    const secret = /SECRET|PASSWORD|PASS|TOKEN|PRIVATE|API_KEY|CLIENT_SECRET|ACCESS_KEY|KEY_SECRET/i.test(newKey);
-    setEntries([...entries, { key: newKey.trim(), value: newValue, secret }]);
-    setNewKey(''); setNewValue('');
-  };
-  const save = async () => { setBusy(true); setMsg(''); try { await putAdminEnv(entries, file); setMsg(`Saved ${file}. Restart services to apply environment changes.`); setRestartDialog(true); await load(); } catch (e: any) { setMsg(`Error: ${e?.message ?? e}`); } finally { setBusy(false); } };
-  return (
-    <div className="admin-view-stack">
-      <PageHead title="Environment"><div className="heading-actions"><span className="secret-badge">SECRETS MASKED</span><button onClick={() => load()} className="workspace-action"><Icon name="refresh" size={12} /> Reload</button></div></PageHead>
-      <div className="config-intro env-intro"><div><span className="admin-overline">LOCAL ENVIRONMENT · {data?.path ?? '.env'}</span><h1>Your environment, <em>under control.</em></h1><p>Manage project variables as key/value pairs. Secret values stay on disk and are never returned to the browser.</p></div><div className="env-lock-art"><i className="env-lock-glyph"><Icon name="lock" size={26} /></i><span>PRIVATE</span></div></div>
-      <section className="workspace-panel config-panel"><div className="panel-title-row"><div><span className="admin-overline">{file.toUpperCase()} FILE · PRESERVES COMMENTS</span><h3>Environment variables</h3></div><button onClick={addVariable} className="workspace-action">+ Add variable</button></div><div className="env-add-bar">
-        <input value={newKey} onChange={(event) => setNewKey(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') addVariable(); }} placeholder="NEXUS_SERVER_PORT" />
-        <div className="env-value-wrap"><input value={newValue} onChange={(event) => setNewValue(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') addVariable(); }} placeholder="value" /><span className="secret-mark">{newKey && /SECRET|PASSWORD|PASS|TOKEN|PRIVATE|API_KEY|CLIENT_SECRET|ACCESS_KEY|KEY_SECRET/i.test(newKey) ? '●' : '○'}</span></div>
-      </div><div className="key-value-table env-table">{groupEntries(entries).map(({ group, items }) => (
-          <div className="key-group" key={group}>
-            <div className="key-group-head"><span className="key-group-name">{group}</span><small>{items.length} variable{items.length === 1 ? '' : 's'}</small></div>
-            <div className="key-value-head"><span>VARIABLE</span><span>VALUE</span></div>
-            {items.map(({ index, entry }) => (
-              <div className="key-value-row" key={`${entry.key}-${index}`}>
-                <input value={entry.key} onChange={(event) => setEntries(entries.map((item, itemIndex) => itemIndex === index ? { ...item, key: event.target.value, secret: /SECRET|PASSWORD|PASS|TOKEN|PRIVATE|API_KEY|CLIENT_SECRET|ACCESS_KEY|KEY_SECRET/i.test(event.target.value) } : item))} placeholder="NEXUS_SERVER_PORT" />
-                <div className="env-value-wrap"><input type={entry.secret ? 'password' : 'text'} value={entry.value ?? ''} placeholder={entry.secret ? '•••••••• · unchanged' : 'value'} onChange={(event) => setEntries(entries.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))} /><span className={entry.secret ? 'secret-mark is-secret' : 'secret-mark'}>{entry.secret ? '●' : '○'}</span><button className="row-delete" onClick={() => setDeleteTarget(entry.key)} aria-label={`Delete ${entry.key || 'entry'}`} title={`Delete ${entry.key || 'entry'}`}>×</button></div>
-              </div>
-            ))}
-          </div>
-        ))}
-        {!entries.length && <div className="key-value-empty">No environment variables found.</div>}</div><div className="config-footer"><span>{entries.length} variable{entries.length === 1 ? '' : 's'} · masked secrets are preserved when unchanged</span><button onClick={save} disabled={busy} className="glass-chip-btn-primary shrink-0">{busy ? 'Saving…' : `Save ${file}`} <span>→</span></button></div></section>
-      <LintChecks run={() => runLintEnv(file)} title="Environment checks" overline={`VALIDATOR · ${file}`} />
-      <ConfirmDialog
-        open={restartDialog}
-        title="Restart required"
-        message="Your environment changes have been saved. Restart the backend services to apply the new variables."
-        confirmLabel="Open services"
-        onConfirm={() => { setRestartDialog(false); onNavigate?.('processes'); }}
-        onCancel={() => setRestartDialog(false)}
-      />
-      <ConfirmDialog
-        open={deleteTarget !== null}
-        title="Delete variable"
-        message={`Delete "${deleteTarget}" from ${file}? This removes it from the file on the next save.`}
-        confirmLabel="Delete"
-        onConfirm={() => { if (deleteTarget) setEntries(entries.filter((e) => e.key !== deleteTarget)); setDeleteTarget(null); }}
-        onCancel={() => setDeleteTarget(null)}
-      />
-    </div>
-  );
-}

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

@@ -1,270 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import type { Tab } from '../lib/types.js';
-import { getAllLogs, getServices, clearLogs, getAiStatus, getAiProviders, getAiModels, aiChatStream, type LogEntry, type AiProviderView, type AiChatMessage } from '../api.js';
-import { Icon } from '../icons.js';
-import { PageHead } from '../components/ui/PageHead.js';
-import { PageHero } from '../components/ui/PageHero.js';
-
-/** Color of a service tag in the log viewer (mirrors the supervisor prefixes). */
-const SERVICE_TAG_COLORS: Record<string, string> = {
-  backend: 'text-emerald-400 border-emerald-400/30 bg-emerald-400/10',
-  frontend: 'text-cyan-300 border-cyan-300/30 bg-cyan-300/10',
-  'ai-server': 'text-amber-300 border-amber-300/30 bg-amber-300/10',
-  admin: 'text-pink-300 border-pink-300/30 bg-pink-300/10',
-};
-const LEVEL_CLASS: Record<LogEntry['level'], string> = {
-  error: 'log-row--error',
-  warn: 'log-row--warn',
-  info: 'log-row--info',
-};
-
-export function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
-  const [entries, setEntries] = useState<LogEntry[]>([]);
-  const [services, setServices] = useState<string[]>([]);
-  const [service, setService] = useState('all');
-  const [level, setLevel] = useState<'all' | LogEntry['level']>('all');
-  const [q, setQ] = useState('');
-  const [live, setLive] = useState(true);
-  const [sticky, setSticky] = useState(true);
-  const [copied, setCopied] = useState(false);
-  const [err, setErr] = useState('');
-  const [criticalFirst, setCriticalFirst] = useState(false);
-  const [aiSummary, setAiSummary] = useState('');
-  const [aiSummaryBusy, setAiSummaryBusy] = useState(false);
-  const [aiSummaryErr, setAiSummaryErr] = useState('');
-  const [aiSummaryOpen, setAiSummaryOpen] = useState(false);
-  const [aiProvider, setAiProvider] = useState('');
-  const [aiModel, setAiModel] = useState('');
-  const aiAbortRef = useRef<AbortController | null>(null);
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-
-  const refresh = useCallback(async () => {
-    try {
-      const [logs, svc] = await Promise.all([getAllLogs(), getServices()]);
-      setEntries(logs);
-      setServices(svc.map((s) => s.name));
-      setErr('');
-    } catch (e: any) {
-      setErr(String(e?.message ?? e));
-    }
-  }, []);
-
-  useEffect(() => {
-    void refresh();
-    if (!live) return;
-    const t = setInterval(() => void refresh(), 1500);
-    return () => clearInterval(t);
-  }, [refresh, live]);
-
-  const filtered = useMemo(() => {
-    const needle = q.trim().toLowerCase();
-    return entries.filter((e) => {
-      if (service !== 'all' && e.service !== service) return false;
-      if (level !== 'all' && e.level !== level) return false;
-      if (needle && !e.line.toLowerCase().includes(needle)) return false;
-      return true;
-    });
-  }, [entries, service, level, q]);
-
-  const counts = useMemo(() => {
-    const c = { error: 0, warn: 0, info: 0 };
-    for (const e of entries) c[e.level] += 1;
-    return c;
-  }, [entries]);
-
-  const ordered = useMemo(() => {
-    if (!criticalFirst) return filtered;
-    const rank = (e: LogEntry) => {
-      const lvl = e.level === 'error' ? 0 : e.level === 'warn' ? 1 : 2;
-      const src = e.source === 'stderr' ? 0 : e.source === 'system' ? 1 : 2;
-      return lvl * 3 + src;
-    };
-    return [...filtered].sort((a, b) => rank(a) - rank(b) || b.ts - a.ts);
-  }, [filtered, criticalFirst]);
-
-  const criticalRunEnd = useMemo(() => {
-    if (!criticalFirst) return 0;
-    let i = 0;
-    while (i < ordered.length && ordered[i].level !== 'info') i += 1;
-    return i;
-  }, [ordered, criticalFirst]);
-
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (el && sticky) el.scrollTop = criticalFirst ? 0 : el.scrollHeight;
-  }, [ordered, sticky, criticalFirst]);
-
-  const onScroll = () => {
-    const el = scrollRef.current;
-    if (!el) return;
-    setSticky(criticalFirst ? el.scrollTop < 80 : el.scrollHeight - el.scrollTop - el.clientHeight < 80);
-  };
-
-  const copyAll = async () => {
-    const text = filtered.map((e) => `[${e.service}] ${e.line}`).join('\n');
-    try { await navigator.clipboard.writeText(text); } catch { /* ignore */ }
-    setCopied(true);
-    window.setTimeout(() => setCopied(false), 1200);
-  };
-
-  const runAiSummary = async () => {
-    if (aiSummaryBusy) return;
-    if (!ordered.length) {
-      setAiSummary('');
-      setAiSummaryErr('No log lines to summarize — widen the filters first.');
-      setAiSummaryOpen(true);
-      return;
-    }
-    try {
-      let provider = aiProvider;
-      let model = aiModel;
-      if (!provider || !model) {
-        const s = await getAiStatus();
-        let pv: AiProviderView | undefined;
-        try { pv = (await getAiProviders()).providers?.find((p) => p.enabled); } catch { /* fall back to status */ }
-        if (pv) {
-          provider = pv.id;
-          model = pv.defaultModel ?? '';
-        }
-        if (!provider) provider = s.autoResolvesTo ?? (s.ollama?.ok ? 'ollama' : s.openai?.ok ? 'openai' : '');
-        if (!provider) throw new Error('No AI provider is available. Configure one in the AI Agents tab.');
-        if (!model) {
-          try { model = (await getAiModels(provider)).data?.[0]?.id ?? ''; } catch { /* fall back below */ }
-        }
-        if (!model) model = 'llama3:latest';
-        setAiProvider(provider);
-        setAiModel(model);
-      }
-      const sample = ordered.slice(-400).map((e) => `[${new Date(e.ts).toLocaleTimeString()}] ${e.service} ${e.source} ${e.level}: ${e.line}`).join('\n');
-      const messages: AiChatMessage[] = [
-        { role: 'system', content: 'You are a log analyzer for BhooAI Nexus. Summarize the provided service logs concisely. FIRST list the most critical errors (service, source, likely cause and next step), then warnings, then notable patterns. Use short bullet points and do not invent details that are not present in the logs.' },
-        { role: 'user', content: `Service logs (${sample.split('\n').length} lines):\n${sample}` },
-      ];
-      const controller = new AbortController();
-      aiAbortRef.current = controller;
-      setAiSummary('');
-      setAiSummaryErr('');
-      setAiSummaryOpen(true);
-      setAiSummaryBusy(true);
-      let acc = '';
-      try {
-        await aiChatStream(model, messages, provider, (chunk) => { acc += chunk; setAiSummary(acc); }, controller.signal);
-        setAiSummary(acc || 'AI returned an empty summary.');
-      } catch (e: any) {
-        if (e?.name === 'AbortError') return;
-        setAiSummaryErr(String(e?.message ?? e));
-      } finally {
-        aiAbortRef.current = null;
-        setAiSummaryBusy(false);
-      }
-    } catch (e: any) {
-      setAiSummary('');
-      setAiSummaryErr(String(e?.message ?? e));
-      setAiSummaryOpen(true);
-      setAiSummaryBusy(false);
-    }
-  };
-
-  const stopAiSummary = () => { aiAbortRef.current?.abort(); };
-
-  const copyAiSummary = async () => {
-    try { await navigator.clipboard.writeText(aiSummary); } catch { /* ignore */ }
-  };
-
-  return (
-    <div className="space-y-6">
-      <PageHead title="Logs">
-        <div className="flex items-center gap-2">
-          <button aria-label="Refresh logs" onClick={() => void refresh()} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh</button>
-          <button aria-pressed={live} onClick={() => setLive(!live)} className={`glass-chip-btn log-live-btn${live ? ' is-live' : ''}`}>{live ? '● live' : '○ paused'}</button>
-          <button aria-label="Copy filtered logs" onClick={() => void copyAll()} className="glass-chip-btn">{copied ? 'Copied' : <><Icon name="copy" size={12} /> copy</>}</button>
-          <button aria-label="Summarize logs with AI" onClick={() => void runAiSummary()} disabled={aiSummaryBusy} className="glass-chip-btn log-ai-btn"><Icon name="sparkles" size={12} /> {aiSummaryBusy ? 'summarizing…' : 'ai summary'}</button>
-          <button aria-label="Clear all logs" onClick={async () => { try { await clearLogs(); await refresh(); } catch { /* supervisor may not be reachable */ } }} className="glass-chip-btn-danger"><Icon name="trash" size={12} /> clear</button>
-        </div>
-      </PageHead>
-      <PageHero kicker="ERROR CONSOLE" title={<>Every failure, <em>in one stream.</em></>} desc="Aggregated stdout, stderr and supervisor events from every service — live as the supervisor records them, filterable and searchable." glyph="terminal" art="wave" />
-      {err && (
-        <div role="alert" className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-400">
-          Logs unavailable — {err}. Is <code className="font-mono">nexus dev</code> running?
-        </div>
-      )}
-      <div className="glass-card log-card">
-        <div className="log-stat-strip">
-          <span className="log-stat log-stat--all"><i /><b>{entries.length}</b><em>Total lines</em></span>
-          <span className="log-stat log-stat--error"><i /><b>{counts.error}</b><em>Errors</em></span>
-          <span className="log-stat log-stat--warn"><i /><b>{counts.warn}</b><em>Warnings</em></span>
-          <span className="log-stat log-stat--info"><i /><b>{counts.info}</b><em>Info</em></span>
-        </div>
-        <div className="log-toolbar">
-          <div className="glass-panel log-filter-group" role="group" aria-label="Filter by level">
-            {([['all', 'All'], ['error', 'Errors'], ['warn', 'Warnings'], ['info', 'Info']] as const).map(([id, label]) => (
-              <button key={id} aria-pressed={level === id} onClick={() => { setLevel(id); setSticky(true); }} className={level === id ? 'log-filter-btn is-active' : 'log-filter-btn'}>
-                {label} <b>{id === 'all' ? entries.length : counts[id]}</b>
-              </button>
-            ))}
-          </div>
-          <button aria-pressed={criticalFirst} onClick={() => { setCriticalFirst(!criticalFirst); setSticky(true); }} className={criticalFirst ? 'log-crit-btn is-active' : 'log-crit-btn'}>⤓ critical first</button>
-          <div className="log-toolbar-right">
-            <select value={service} onChange={(e) => { setService(e.target.value); setSticky(true); }} aria-label="Filter by service" className="glass-input log-service-input">
-              <option value="all" className="bg-slate-900">All services</option>
-              {services.map((s) => <option key={s} value={s} className="bg-slate-900">{s}</option>)}
-            </select>
-            <input value={q} onChange={(e) => { setQ(e.target.value); setSticky(true); }} placeholder="Filter lines…" aria-label="Filter log lines" className="glass-input log-search-input" />
-          </div>
-        </div>
-        {aiSummaryOpen && (
-          <div className="log-ai-panel">
-            <div className="log-ai-head">
-              <span className="log-ai-title"><Icon name="sparkles" size={12} /> AI summary{aiModel ? ` · ${aiModel}` : ''}</span>
-              <div className="log-ai-actions">
-                {aiSummaryBusy && <button onClick={stopAiSummary} className="glass-chip-btn-danger"><Icon name="square" size={10} /> stop</button>}
-                {!aiSummaryBusy && aiSummary && <button onClick={() => void copyAiSummary()} className="glass-chip-btn"><Icon name="copy" size={12} /> copy</button>}
-                <button onClick={() => { setAiSummaryOpen(false); setAiSummary(''); setAiSummaryErr(''); }} className="glass-chip-btn"><Icon name="x" size={12} /> dismiss</button>
-              </div>
-            </div>
-            {aiSummaryErr && (
-              <div role="alert" className="log-ai-err">
-                AI summary failed: {aiSummaryErr}
-                {aiSummaryErr.includes('AI provider') && (
-                  <button onClick={() => onNavigate('ai')} className="glass-chip-btn log-ai-open">Open AI Agents →</button>
-                )}
-              </div>
-            )}
-            {aiSummaryBusy && !aiSummary && <div className="log-ai-note">Analyzing {ordered.length} lines…</div>}
-            {aiSummary && <pre className="log-ai-body">{aiSummary}</pre>}
-          </div>
-        )}
-        <div ref={scrollRef} onScroll={onScroll} className="log-viewer" role="list" aria-label="Service log output" tabIndex={0}>
-          <div className="log-colhead" aria-hidden="true">
-            <span className="log-time">Time</span>
-            <span className="log-service">Service</span>
-            <span className="log-source">Source</span>
-            <span className="log-level">Level</span>
-            <span className="log-line">Message</span>
-          </div>
-          {ordered.length === 0 ? (
-            <div className="log-empty">
-              <span className="log-empty-glyph"><Icon name="terminal" size={26} /></span>
-              <strong>No log lines match the current filters.</strong>
-              <p>Try widening the level filter or clearing the search text.</p>
-            </div>
-          ) : (
-            ordered.map((e, i) => (
-              <div key={`${e.ts}-${i}`} className={`log-row ${LEVEL_CLASS[e.level]}${criticalFirst && i < criticalRunEnd ? ' log-row--critical' : ''}`} role="listitem">
-                <span className="log-time">{new Date(e.ts).toLocaleTimeString()}</span>
-                <span className={`log-service log-tag ${SERVICE_TAG_COLORS[e.service] ?? 'log-tag--default'}`}>{e.service}</span>
-                <span className={`log-source log-source--${e.source}`}>{e.source}</span>
-                <span className={`log-level log-level--${e.level}`}>{e.level}</span>
-                <span className="log-line">{e.line || ' '}</span>
-              </div>
-            ))
-          )}
-        </div>
-        <div className="log-footer">
-          <span className="log-foot-left">Aggregated across services · last {entries.length} lines · {live ? <span className="log-foot-left"><span className="log-live-dot" /> polling every 1.5s</span> : 'paused'}</span>
-          {!sticky && <button onClick={() => setSticky(true)} className="glass-chip-btn">{criticalFirst ? 'â–² jump to top' : 'â–¼ jump to latest'}</button>}
-        </div>
-      </div>
-    </div>
-  );
-}

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

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

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

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