@bhooai/nexus-cli 2.0.6 → 2.0.7

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

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import type { Tab, ConfigValueType, ConfigEntry } from '../lib/types.js';
+import { flattenConfig, buildConfig, groupEntries } from '../lib/utils.js';
+import { getAdminConfig, putAdminConfig, putAdminConfigFile, runLintConfig, type AdminConfig } 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 Config({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
+  const [cfg, setCfg] = useState<AdminConfig | null>(null);
+  const [entries, setEntries] = useState<ConfigEntry[]>([]);
+  const [fileText, setFileText] = useState('');
+  const [filePath, setFilePath] = useState('');
+  const [mode, setMode] = useState<'runtime' | 'source' | 'effective'>('runtime');
+  const [msg, setMsg] = useAdminAlert('config');
+  const [busy, setBusy] = useState(false);
+  const [restartDialog, setRestartDialog] = useState(false);
+  const [newKey, setNewKey] = useState('');
+  const [newType, setNewType] = useState<ConfigValueType>('string');
+  const [newValue, setNewValue] = useState('');
+
+  const addKey = () => {
+    if (!newKey.trim()) return;
+    setEntries([...entries, { key: newKey.trim(), value: newType === 'null' ? '' : newValue, type: newType }]);
+    setNewKey(''); setNewType('string'); setNewValue('');
+  };
+
+  const load = async () => {
+    try {
+      const c = await getAdminConfig();
+      setCfg(c);
+      const overrides = flattenConfig(c.runtime);
+      // Prefer the runtime overrides if there are any; otherwise seed the
+      // key/value grid from the current effective config so the user starts
+      // with the real values (redacted secret placeholders are skipped so they
+      // are never written back as literal overrides).
+      const base = overrides.length
+        ? overrides
+        : flattenConfig(c.config).filter((entry) => entry.value !== '***');
+      setEntries(base);
+      setFilePath(c.file?.path ?? '');
+      setFileText(c.file?.content ?? '');
+      setMsg(c.file ? '' : 'No human-edited config file found.');
+    } catch (e: any) { setMsg(String(e?.message ?? e)); }
+  };
+  useEffect(() => { load(); }, []);
+
+  const saveRuntime = async () => {
+    setBusy(true); setMsg('');
+    try {
+      const overrides = buildConfig(entries);
+      await putAdminConfig(overrides);
+      setMsg('Saved to nexus.runtime.json. Restart services to apply changes.');
+      setRestartDialog(true);
+    } catch (e: any) { setMsg(`Error: ${e?.message ?? e}`); }
+    finally { setBusy(false); }
+  };
+
+  const saveFile = async () => {
+    if (!filePath) { setMsg('No config file found.'); return; }
+    setBusy(true); setMsg('');
+    try { await putAdminConfigFile(fileText); setMsg(`Saved ${filePath}. Restart services to apply changes.`); setRestartDialog(true); }
+    catch (e: any) { setMsg(`Error: ${e?.message ?? e}`); }
+    finally { setBusy(false); }
+  };
+
+  return (
+    <div className="admin-view-stack">
+      <PageHead title="Configuration"><div className="heading-actions"><span className="restart-badge">RESTART REQUIRED AFTER SAVE</span><button onClick={load} className="workspace-action"><Icon name="refresh" size={12} /> Reload</button></div></PageHead>
+      <div className="config-intro"><div><span className="admin-overline">PROJECT CONTROL PLANE</span><h1>Configure your <em>runtime.</em></h1><p>Use key/value rows for safe JSON overrides, or switch to source mode for the typed project configuration.</p></div><div className="hero-art hero-art--cubes"><strong>{'{ }'}</strong><span className="ha-a" /><span className="ha-b" /><span className="ha-c" /></div></div>
+      <div className="workspace-tabs">{([['runtime', 'Runtime JSON'], ['source', 'Source file'], ['effective', 'Effective view']] as const).map(([id, label]) => <button key={id} onClick={() => setMode(id)} className={mode === id ? 'is-active' : ''}>{label}</button>)}</div>
+      {mode === 'runtime' && <section className="workspace-panel config-panel"><div className="panel-title-row"><div><span className="admin-overline">NEXUS CONFIG · KEY/VALUE</span><h3>Configuration overrides</h3></div><button onClick={addKey} className="workspace-action">+ Add key</button></div><p className="panel-description">Existing configuration is loaded into the rows below. Changes are written to nexus.runtime.json and validated against the Nexus schema before saving. Secrets are redacted and managed in the Environment surface.</p><div className="key-add-bar">
+        <input value={newKey} onChange={(event) => setNewKey(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') addKey(); }} placeholder="key path — e.g. server.port" />
+        <select value={newType} onChange={(event) => { setNewType(event.target.value as ConfigValueType); if (event.target.value === 'null') setNewValue(''); }}><option value="string">string</option><option value="number">number</option><option value="boolean">boolean</option><option value="null">null</option><option value="object">object</option><option value="array">array</option></select>
+        <input value={newValue} disabled={newType === 'null'} onChange={(event) => setNewValue(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') addKey(); }} placeholder={newType === 'object' || newType === 'array' ? '{ }' : 'value'} />
+      </div><div className="key-value-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} key{items.length === 1 ? '' : 's'}</small></div>
+            <div className="key-value-head"><span>KEY PATH</span><span>TYPE</span><span>VALUE</span><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 } : item))} placeholder="server.port" />
+                <select value={entry.type} onChange={(event) => setEntries(entries.map((item, itemIndex) => itemIndex === index ? { ...item, type: event.target.value as ConfigValueType, value: event.target.value === 'null' ? '' : item.value } : item))}><option value="string">string</option><option value="number">number</option><option value="boolean">boolean</option><option value="null">null</option><option value="object">object</option><option value="array">array</option></select>
+                <input value={entry.value} disabled={entry.type === 'null'} onChange={(event) => setEntries(entries.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))} placeholder={entry.type === 'object' || entry.type === 'array' ? '{ }' : 'value'} />
+                <button className="row-delete" onClick={() => setEntries(entries.filter((_, itemIndex) => itemIndex !== index))} aria-label={`Delete ${entry.key || 'entry'}`}>×</button>
+              </div>
+            ))}
+          </div>
+        ))}
+        {!entries.length && <div className="key-value-empty">No configuration keys loaded.</div>}
+      </div><div className="config-footer"><span>{entries.length} override{entries.length === 1 ? '' : 's'} · validated on save</span><button onClick={saveRuntime} disabled={busy} className="glass-chip-btn-primary shrink-0">{busy ? 'Saving…' : 'Save runtime JSON'} <span>→</span></button></div></section>}
+      {mode === 'source' && <section className="workspace-panel config-panel"><div className="panel-title-row"><div><span className="admin-overline">HUMAN-EDITED SOURCE</span><h3>{filePath ? filePath.split(/[\\/]/).pop() : 'nexus.config.ts'}</h3></div><button onClick={saveFile} disabled={busy} className="glass-chip-btn-primary shrink-0">{busy ? 'Saving…' : 'Save source'} <span>→</span></button></div><textarea className="source-editor" value={fileText} onChange={(event) => setFileText(event.target.value)} spellCheck={false} /></section>}
+      {mode === 'effective' && <section className="workspace-panel config-panel"><div className="panel-title-row"><div><span className="admin-overline">READ-ONLY · SECRETS REDACTED</span><h3>Effective merged config</h3></div></div><pre className="source-editor effective-editor">{cfg ? JSON.stringify(cfg.config, null, 2) : 'Loading configuration…'}</pre></section>}
+      <LintChecks run={runLintConfig} title="Configuration checks" overline="VALIDATOR · nexus.runtime.json" />
+      <ConfirmDialog
+        open={restartDialog}
+        title="Restart required"
+        message="Your changes have been saved. Restart the backend services to apply the new configuration."
+        confirmLabel="Open services"
+        onConfirm={() => { setRestartDialog(false); onNavigate?.('processes'); }}
+        onCancel={() => setRestartDialog(false)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react';
+import { getDatabases, createDatabase, deleteDatabase, createCollection, dropCollection, modifyCollection, getCollectionDocs, type DatabaseInfo } from '../api.js';
+import { useAdminAlert } from '../alertCenter.js';
+import { Icon } from '../icons.js';
+import { PageHead } from '../components/ui/PageHead.js';
+import { PageHero } from '../components/ui/PageHero.js';
+import { ConfirmDialog } from '../components/ui/ConfirmDialog.js';
+
+export function Databases() {
+  const [databases, setDatabases] = useState<DatabaseInfo[]>([]);
+  const [msg, setMsg] = useAdminAlert('databases');
+  const [newDb, setNewDb] = useState('');
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const [docs, setDocs] = useState<Record<string, { count: number; docs: unknown[] }>>({});
+  const [renames, setRenames] = useState<Record<string, string>>({});
+  const [newColl, setNewColl] = useState<Record<string, string>>({});
+  const [confirm, setConfirm] = useState<{ title: string; message: React.ReactNode; action: () => Promise<void> } | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const refresh = async () => {
+    try { setDatabases((await getDatabases()).databases ?? []); setMsg(''); } catch (e: any) { setMsg(String(e?.message ?? e)); }
+  };
+  useEffect(() => { refresh(); }, []);
+
+  const withOk = async (fn: () => Promise<any>): Promise<boolean> => {
+    setMsg('');
+    try { await fn(); return true; } catch (e: any) { setMsg(`Error: ${e?.message ?? e}`); return false; }
+  };
+
+  const toggleDocs = async (db: string, coll: string) => {
+    const key = `${db}/${coll}`;
+    if (docs[key]) { const next = { ...docs }; delete next[key]; setDocs(next); return; }
+    try { setDocs({ ...docs, [key]: await getCollectionDocs(db, coll) }); } catch (e: any) { setMsg(`Error: ${e?.message ?? e}`); }
+  };
+
+  const doRename = async (db: string, coll: string) => {
+    const newName = (renames[`${db}/${coll}`] ?? '').trim();
+    if (!newName) return;
+    if (await withOk(() => modifyCollection(db, coll, { newName }))) { await refresh(); setRenames({ ...renames, [`${db}/${coll}`]: '' }); }
+  };
+
+  const doCreateColl = async (db: string) => {
+    const name = (newColl[db] ?? '').trim();
+    if (!name) return;
+    if (await withOk(() => createCollection(db, { name }))) { await refresh(); setNewColl({ ...newColl, [db]: '' }); }
+  };
+
+  const runConfirm = async () => {
+    if (!confirm) return;
+    setBusy(true);
+    try { await confirm.action(); } finally { setBusy(false); setConfirm(null); }
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHead title="Databases">
+        <button onClick={refresh} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh</button>
+      </PageHead>
+      <PageHero kicker="DATA FOUNDATION" title={<>Your data, <em>organized.</em></>} desc="Databases and collections backing your project — inspect, create and keep the layer that stores everything sane." glyph="database" art="cubes" />
+
+      <div className="glass-card flex gap-2">
+        <input className="glass-input max-w-xs" placeholder="new database name" value={newDb} onChange={(e) => setNewDb(e.target.value)} />
+        <button onClick={async () => { if (newDb.trim() && await withOk(() => createDatabase(newDb.trim()))) { setNewDb(''); await refresh(); } }} className="glass-btn-primary">Create database</button>
+      </div>
+
+      <div className="space-y-3">
+        {databases.map((db) => (
+          <div key={db.name} className="glass-card">
+            <div className="flex items-center gap-3">
+              <button onClick={() => setExpanded(expanded === db.name ? null : db.name)} className="cursor-pointer font-mono text-base font-semibold text-slate-100 transition-colors hover:text-indigo-300">
+                <span className={`mr-1 inline-block transition-transform ${expanded === db.name ? 'rotate-90' : ''}`}><Icon name="chevronRight" size={14} /></span>{db.name}
+              </button>
+              <span className="text-xs text-slate-500">{(db.sizeOnDisk / 1024).toFixed(1)} KB · {db.collections.length} collections</span>
+              <button onClick={() => setConfirm({ title: `Drop database “${db.name}”?`, message: <>This will permanently delete the database <strong>{db.name}</strong> and all of its collections. This cannot be undone.</>, action: async () => { if (await withOk(() => deleteDatabase(db.name))) await refresh(); } })} className="glass-chip-btn-danger ml-auto">drop</button>
+            </div>
+
+            {expanded === db.name && (
+              <div className="mt-4 space-y-2.5">
+                <div className="flex gap-2">
+                  <input className="glass-input max-w-xs !py-1.5 text-sm" placeholder="new collection" value={newColl[db.name] ?? ''} onChange={(e) => setNewColl({ ...newColl, [db.name]: e.target.value })} />
+                  <button onClick={() => doCreateColl(db.name)} className="glass-chip-btn">create</button>
+                </div>
+                {db.collections.length === 0 && <p className="text-sm text-slate-500">No collections.</p>}
+                {db.collections.map((c) => (
+                  <div key={`${db.name}/${c.name}`} className="flex flex-wrap items-center gap-2 border-t border-white/[0.06] pt-2.5 text-sm">
+                    <span className="font-mono text-slate-200">{c.name}</span>
+                    <span className="text-xs text-slate-500">{c.count} docs</span>
+                    <button onClick={() => toggleDocs(db.name, c.name)} className="glass-chip-btn ml-auto">docs</button>
+                    <input className="glass-input w-36 !py-1 text-xs" placeholder="rename to…" value={renames[`${db.name}/${c.name}`] ?? ''} onChange={(e) => setRenames({ ...renames, [`${db.name}/${c.name}`]: e.target.value })} />
+                    <button onClick={() => doRename(db.name, c.name)} className="glass-chip-btn">rename</button>
+                    <button onClick={() => setConfirm({ title: `Drop collection “${c.name}”?`, message: <>This will permanently delete the collection <strong>{db.name}/{c.name}</strong> and its {c.count} document{c.count === 1 ? '' : 's'}. This cannot be undone.</>, action: async () => { if (await withOk(() => dropCollection(db.name, c.name))) await refresh(); } })} className="glass-chip-btn-danger">drop</button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+        {!databases.length && !msg && <p className="text-sm text-slate-500">No databases found.</p>}
+        {Object.entries(docs).map(([key, val]) => {
+          const [db, coll] = key.split('/') as [string, string];
+          return expanded === db ? (
+            <div key={key} className="glass-code max-h-64 overflow-auto p-3 text-xs">
+              <span className="text-slate-400">{db}/{coll} — {val.count} docs (showing {val.docs.length}):</span>
+              <pre className="mt-1 font-mono">{JSON.stringify(val.docs[0] ?? {}, null, 2)}{val.docs.length > 1 ? `\n… and ${val.docs.length - 1} more` : ''}</pre>
+            </div>
+          ) : null;
+        })}
+      </div>
+
+      <ConfirmDialog
+        open={!!confirm}
+        title={confirm?.title ?? ''}
+        message={confirm?.message ?? ''}
+        danger
+        busy={busy}
+        confirmLabel="Drop"
+        onConfirm={runConfirm}
+        onCancel={() => setConfirm(null)}
+      />
+    </div>
+  );
+}

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

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

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