@bhooai/nexus-admin 2.0.11 → 2.0.12

package/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import logoUrl from './assets/bhooai-nexus-logo.svg';
 import { Icon, isIconName, type IconName } from './icons.js';
 import { SafeGotoDialog, SafeGotoLink } from '@bhooai/nexus-safe-goto';
@@ -25,9 +25,9 @@ type UiMode = 'workspace' | 'compact' | 'focus';
 type ToggleStyle = 'chip' | 'neon' | 'icon' | 'orb' | 'track';
 
 const TOGGLE_STYLES: Array<{ id: ToggleStyle; label: string; hint: string }> = [
-  { id: 'chip', label: 'Chip ON/OFF', hint: 'Default · glass chip' },
-  { id: 'neon', label: 'Neon glass', hint: 'Blue→violet border' },
-  { id: 'icon', label: 'Icon knob', hint: 'Power · bolt glow' },
+  { id: 'chip', label: 'Chip ON/OFF', hint: 'Default · glass chip' },
+  { id: 'neon', label: 'Neon glass', hint: 'Blue→violet border' },
+  { id: 'icon', label: 'Icon knob', hint: 'Power · bolt glow' },
   { id: 'orb', label: 'Orb dot', hint: 'Pulse halo' },
   { id: 'track', label: 'Gradient-track', hint: 'Sliding trail' },
 ];
@@ -165,7 +165,7 @@ export function App() {
   }, []);
 
   if (boot === 'loading') {
-    return <div className="admin-boot bg-mesh"><span className="admin-overline">Loading…</span></div>;
+    return <div className="admin-boot bg-mesh"><span className="admin-overline">Loading…</span></div>;
   }
   if (!authed) return <Login onAuthed={(u) => { setUser(u); window.localStorage.setItem(USER_KEY, JSON.stringify(u)); setAuthed(true); }} />;
   const onUserChange = (u: AdminUser) => { setUser(u); try { window.localStorage.setItem(USER_KEY, JSON.stringify(u)); } catch { /* ignore */ } };
@@ -214,7 +214,7 @@ function ConfirmDialog(props: {
         <div className="confirm-dialog-head">
           <span className="confirm-dialog-mark">{props.danger ? '!' : <Icon name="info" size={15} />}</span>
           <strong>{props.title}</strong>
-          <button className="confirm-dialog-close" onClick={props.onCancel} aria-label="Cancel">×</button>
+          <button className="confirm-dialog-close" onClick={props.onCancel} aria-label="Cancel">×</button>
         </div>
         <p className="confirm-dialog-message">{props.message}</p>
         <div className="confirm-dialog-actions">
@@ -225,7 +225,7 @@ function ConfirmDialog(props: {
             disabled={props.busy}
             autoFocus
           >
-            {props.busy ? 'Working…' : (props.confirmLabel ?? 'Confirm')}
+            {props.busy ? 'Working…' : (props.confirmLabel ?? 'Confirm')}
           </button>
         </div>
       </div>
@@ -286,7 +286,7 @@ function Login({ onAuthed }: { onAuthed: (user: AdminUser) => void }) {
           </div>
         )}
         <button className="glass-btn-primary w-full disabled:opacity-60 disabled:cursor-not-allowed" type="submit" disabled={busy}>
-          {busy ? 'Please wait…' : mode === 'login' ? 'Sign in' : 'Register & sign in'}
+          {busy ? 'Please wait…' : mode === 'login' ? 'Sign in' : 'Register & sign in'}
         </button>
         <button type="button" className="w-full cursor-pointer text-sm text-slate-400 transition-colors hover:text-slate-200" onClick={() => setMode(mode === 'login' ? 'register' : 'login')}>
           {mode === 'login' ? 'Need an account? Register' : 'Already have one? Sign in'}
@@ -517,12 +517,12 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
             <strong>NEXUS</strong>
             <span>Admin workspace</span>
           </div>
-          <button className="admin-close-mobile" onClick={() => setMobileNav(false)} aria-label="Close navigation">×</button>
+          <button className="admin-close-mobile" onClick={() => setMobileNav(false)} aria-label="Close navigation">×</button>
         </div>
         <div className="admin-project-card">
           <span className="admin-overline">ACTIVE PROJECT</span>
-          <strong>{displayProject || 'Loading…'}</strong>
-          {projectDb && <em className="admin-project-db">db · {projectDb}</em>}
+          <strong>{displayProject || 'Loading…'}</strong>
+          {projectDb && <em className="admin-project-db">db · {projectDb}</em>}
           <span><i className="status-dot good" /> Development</span>
         </div>
         <div className="admin-nav-label">Workspace</div>
@@ -546,7 +546,7 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
       <div className="admin-main-shell">
         <header className={`admin-topbar${mobileSearch ? ' is-mobile-search' : ''}`}>
           <button className="admin-mobile-menu" onClick={() => setMobileNav(true)} aria-label="Open navigation"><Icon name="menu" size={16} /></button>
-          <div className="admin-window-tab"><span className="window-tab-mark">â—ˆ</span><strong>{title}</strong></div>
+          <div className="admin-window-tab"><span className="window-tab-mark">◈</span><strong>{title}</strong></div>
           <div className="admin-search" ref={searchRef}>
             <span className="admin-search-icon"><Icon name="search" size={14} /></span>
             <input
@@ -570,11 +570,11 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
               }}
               placeholder="Search workspace"
             />
-            <kbd>⌘ K</kbd>
+            <kbd>⌘ K</kbd>
             {searchOpen && search.length > 0 && (
               <div className="admin-search-results">
                 {searchResults.length === 0 ? (
-                  <div className="admin-search-empty">No matches for “{search}”</div>
+                  <div className="admin-search-empty">No matches for “{search}”</div>
                 ) : (
                   searchResults.map((n) => (
                     <button key={n.id} className={tab === n.id ? 'is-active' : ''} onMouseDown={(e) => { e.preventDefault(); setTab(n.id); setSearch(''); setSearchOpen(false); setMobileSearch(false); }}>
@@ -630,7 +630,7 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
             </div>
           </div>
         </header>
-        <div className="admin-breadcrumb"><strong>{displayProject || 'Project'}</strong><b>›</b><span>{title}</span><button>⋯</button></div>
+        <div className="admin-breadcrumb"><strong>{displayProject || 'Project'}</strong><b>›</b><span>{title}</span><button>⋯</button></div>
         <div className="admin-content-layout">
           <main className="admin-content">
             {tab === 'overview' && <Overview onNavigate={setTab} />}
@@ -648,12 +648,12 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
             {tab === 'theme' && <ThemeCentre theme={theme} onThemeChange={(value) => { setTheme(value); window.localStorage.setItem('nexus-admin-theme', value); }} uiMode={uiMode} onUiModeChange={(value) => { setUiMode(value); window.localStorage.setItem('nexus-admin-ui', value); }} custom={customTheme} onCustom={updateCustomTheme} particles={particles} onParticles={updateParticles} />}
           </main>
           <aside className="admin-inspector">
-            <div className="inspector-heading"><span>WORKSPACE INSPECTOR</span><button aria-label="Close inspector">×</button></div>
+            <div className="inspector-heading"><span>WORKSPACE INSPECTOR</span><button aria-label="Close inspector">×</button></div>
             <div className="inspector-preview"><div className="preview-orbit"><span /><i /><b /></div><strong>Project Nexus</strong><span>Full-stack application</span></div>
             <div className="inspector-tabs"><b>Summary</b><span>Activity</span></div>
             <div className="inspector-card"><span className="admin-overline">CURRENT SURFACE</span><strong>{title}</strong><p>{nav.find((item) => item.id === tab)?.desc ?? 'Manage the running Nexus project from this workspace.'}</p></div>
-            <div className="inspector-card inspector-list"><span className="admin-overline">QUICK LINKS</span><button onClick={() => setTab('config')}>Configuration <b>→</b></button><button onClick={() => setTab('env')}>Environment <b>→</b></button><button onClick={() => setTab('logs')}>Logs <b>→</b></button></div>
-            <button className="glass-chip-btn-primary w-full justify-between" onClick={() => setTab('overview')}><Icon name="activity" size={13} /> Open project overview <span>→</span></button>
+            <div className="inspector-card inspector-list"><span className="admin-overline">QUICK LINKS</span><button onClick={() => setTab('config')}>Configuration <b>→</b></button><button onClick={() => setTab('env')}>Environment <b>→</b></button><button onClick={() => setTab('logs')}>Logs <b>→</b></button></div>
+            <button className="glass-chip-btn-primary w-full justify-between" onClick={() => setTab('overview')}><Icon name="activity" size={13} /> Open project overview <span>→</span></button>
             <div className="admin-side-widget">
               <div className="admin-widget-heading"><span>RUNTIME LOAD</span><b>LIVE</b></div>
               <div className="load-line"><span>CPU</span><i><b style={{ width: '32%' }} /></i><strong>32%</strong></div>
@@ -689,7 +689,7 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
             />
           </div>
         )}
-        <footer className="admin-dock"><span><b className="dock-logo">◈</b> BhooAI Nexus</span><span>Connected to <strong>localhost:4000</strong></span><span className="dock-right"><i className="status-dot good" /> Secure admin session · {title}</span></footer>
+        <footer className="admin-dock"><span><b className="dock-logo">◈</b> BhooAI Nexus</span><span>Connected to <strong>localhost:4000</strong></span><span className="dock-right"><i className="status-dot good" /> Secure admin session · {title}</span></footer>
       </div>
       <SafeGotoDialog />
       <SettingsDialog
@@ -711,7 +711,7 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
 }
 
 function formatUptime(seconds?: number): string {
-  if (!seconds || seconds <= 0) return '—';
+  if (!seconds || seconds <= 0) return '—';
   const d = Math.floor(seconds / 86400);
   const h = Math.floor((seconds % 86400) / 3600);
   const m = Math.floor((seconds % 3600) / 60);
@@ -849,7 +849,7 @@ function SettingsDialog({ open, onClose, user, onUserChange, projectName, projec
             <span className="admin-overline">ACCOUNT & WORKSPACE</span>
             <h3 id="settings-title">Settings</h3>
           </div>
-          <button type="button" onClick={onClose} className="glass-chip-btn" aria-label="Close settings">✕</button>
+          <button type="button" onClick={onClose} className="glass-chip-btn" aria-label="Close settings">✕</button>
         </div>
 
         <div className="settings-body">
@@ -868,7 +868,7 @@ function SettingsDialog({ open, onClose, user, onUserChange, projectName, projec
             </div>
             {statusLine(profileMsg)}
             <div className="settings-actions">
-              <button type="button" onClick={saveProfile} disabled={profileBusy} className="glass-chip-btn-primary">{profileBusy ? 'Saving…' : 'Save profile'}</button>
+              <button type="button" onClick={saveProfile} disabled={profileBusy} className="glass-chip-btn-primary">{profileBusy ? 'Saving…' : 'Save profile'}</button>
             </div>
           </section>
 
@@ -893,20 +893,20 @@ function SettingsDialog({ open, onClose, user, onUserChange, projectName, projec
             </div>
             {statusLine(pwMsg)}
             <div className="settings-actions">
-              <button type="button" onClick={savePassword} disabled={pwBusy} className="glass-chip-btn-primary">{pwBusy ? 'Updating…' : 'Change password'}</button>
+              <button type="button" onClick={savePassword} disabled={pwBusy} className="glass-chip-btn-primary">{pwBusy ? 'Updating…' : 'Change password'}</button>
             </div>
           </section>
 
           <section className="settings-section">
             <h4>About</h4>
             <div className="settings-facts">
-              <div><span>Package</span><b>{projectName || '—'}</b></div>
-              <div><span>Version</span><b>{about?.version ?? (projectVersion || '—')}</b></div>
-              <div><span>Database</span><b>{projectDb || '—'}</b></div>
-              <div><span>Path</span><b>{about?.path ?? '—'}</b></div>
-              <div><span>Node.js</span><b>{about?.node ?? '—'}</b></div>
+              <div><span>Package</span><b>{projectName || '—'}</b></div>
+              <div><span>Version</span><b>{about?.version ?? (projectVersion || '—')}</b></div>
+              <div><span>Database</span><b>{projectDb || '—'}</b></div>
+              <div><span>Path</span><b>{about?.path ?? '—'}</b></div>
+              <div><span>Node.js</span><b>{about?.node ?? '—'}</b></div>
               <div><span>Uptime</span><b>{formatUptime(about?.uptime)}</b></div>
-              <div><span>PID</span><b>{about?.pid ?? '—'}</b></div>
+              <div><span>PID</span><b>{about?.pid ?? '—'}</b></div>
             </div>
             {isAdmin && (
               <div className="settings-package">
@@ -922,7 +922,7 @@ function SettingsDialog({ open, onClose, user, onUserChange, projectName, projec
                 </div>
                 {statusLine(pkgMsg)}
                 <div className="settings-actions">
-                  <button type="button" onClick={savePackage} disabled={pkgBusy} className="glass-chip-btn-primary">{pkgBusy ? 'Updating…' : 'Update package'}</button>
+                  <button type="button" onClick={savePackage} disabled={pkgBusy} className="glass-chip-btn-primary">{pkgBusy ? 'Updating…' : 'Update package'}</button>
                 </div>
               </div>
             )}
@@ -953,7 +953,7 @@ function AppearancePanel({
           <button key={id} onClick={() => onThemeChange(id)} className={theme === id ? 'is-selected' : ''}>
             <span className={`theme-preview ${id}`} />
             <span><b>{label}</b><small>{detail}</small></span>
-            {theme === id && <i>✓</i>}
+            {theme === id && <i>✓</i>}
           </button>
         ))}
       </div>
@@ -1016,18 +1016,18 @@ function RailPanel({
       {open === 'search' && (
         <>
           <div className="rail-panel-head"><span className="admin-overline">SMART SEARCH</span></div>
-          <p className="rail-panel-text">Press <kbd>⌘ K</kbd> (or <kbd>Ctrl K</kbd>) to jump to any surface from the top search bar — or click below to focus it now.</p>
+          <p className="rail-panel-text">Press <kbd>⌘ K</kbd> (or <kbd>Ctrl K</kbd>) to jump to any surface from the top search bar — or click below to focus it now.</p>
           <button type="button" className="glass-chip-btn-primary w-full justify-center" onClick={onSearch}><Icon name="search" size={12} /> Focus search</button>
           <div className="rail-divider" />
-          <span className="rail-panel-hint">Try: roles, mongo, palette, stripe, ollama, payments…</span>
+          <span className="rail-panel-hint">Try: roles, mongo, palette, stripe, ollama, payments…</span>
         </>
       )}
 
       {open === 'notes' && (
         <>
-          <div className="rail-panel-head"><span className="admin-overline">AI NOTES</span><button type="button" className="rail-x" onClick={onClose} aria-label="Close">×</button></div>
-          <p className="rail-panel-text">Jot quick notes — saved locally in your browser.</p>
-          <textarea className="rail-notes" value={notes} onChange={(e) => onNotes(e.target.value)} placeholder="Type a note…" spellCheck={false} />
+          <div className="rail-panel-head"><span className="admin-overline">AI NOTES</span><button type="button" className="rail-x" onClick={onClose} aria-label="Close">×</button></div>
+          <p className="rail-panel-text">Jot quick notes — saved locally in your browser.</p>
+          <textarea className="rail-notes" value={notes} onChange={(e) => onNotes(e.target.value)} placeholder="Type a note…" spellCheck={false} />
           <div className="rail-row">
             <button type="button" className="glass-chip-btn" onClick={() => onNotes('')}>Clear</button>
             <span className="rail-panel-hint">{notes.length} chars</span>
@@ -1037,7 +1037,7 @@ function RailPanel({
 
       {open === 'activity' && (
         <>
-          <div className="rail-panel-head"><span className="admin-overline">SCREEN RECALL</span><button type="button" className="rail-x" onClick={onClose} aria-label="Close">×</button></div>
+          <div className="rail-panel-head"><span className="admin-overline">SCREEN RECALL</span><button type="button" className="rail-x" onClick={onClose} aria-label="Close">×</button></div>
           <p className="rail-panel-text">Your recent admin activity.</p>
           {activity.length === 0 ? (
             <p className="rail-empty">No activity yet.</p>
@@ -1054,14 +1054,14 @@ function RailPanel({
 
       {open === 'appearance' && (
         <>
-          <div className="rail-panel-head"><span className="admin-overline">APPEARANCE</span><button type="button" className="rail-x" onClick={onClose} aria-label="Close">×</button></div>
+          <div className="rail-panel-head"><span className="admin-overline">APPEARANCE</span><button type="button" className="rail-x" onClick={onClose} aria-label="Close">×</button></div>
           <span className="rail-panel-hint">Choose your surface</span>
           <div className="rail-appearance">
             {([['aurora', 'Aurora', 'Electric blue'], ['midnight', 'Midnight', 'Deep navy'], ['violet', 'Violet', 'Indigo glow']] as const).map(([id, label, detail]) => (
               <button key={id} onClick={() => onThemeChange(id)} className={theme === id ? 'is-selected' : ''}>
                 <span className={`theme-preview ${id}`} />
                 <span className="rail-appearance-label"><b>{label}</b><small>{detail}</small></span>
-                {theme === id && <i>✓</i>}
+                {theme === id && <i>✓</i>}
               </button>
             ))}
           </div>
@@ -1071,7 +1071,7 @@ function RailPanel({
             {([['workspace', 'Workspace', 'Inspector + tools'], ['compact', 'Compact', 'More content'], ['focus', 'Focus', 'Canvas first']] as const).map(([id, label, detail]) => (
               <button key={id} onClick={() => onUiModeChange(id)} className={uiMode === id ? 'is-selected' : ''}>
                 <span className="rail-appearance-label"><b>{label}</b><small>{detail}</small></span>
-                {uiMode === id && <i>✓</i>}
+                {uiMode === id && <i>✓</i>}
               </button>
             ))}
           </div>
@@ -1080,13 +1080,13 @@ function RailPanel({
 
       {open === 'launcher' && (
         <>
-          <div className="rail-panel-head"><span className="admin-overline">ADD TOOL</span><button type="button" className="rail-x" onClick={onClose} aria-label="Close">×</button></div>
+          <div className="rail-panel-head"><span className="admin-overline">ADD TOOL</span><button type="button" className="rail-x" onClick={onClose} aria-label="Close">×</button></div>
           <p className="rail-panel-text">Pin your most-used surfaces to the tool rail. Click to toggle.</p>
           <ul className="rail-list rail-list--nav">
             {nav.map((n) => (
               <li key={n.id}>
                 <button type="button" className={favorites.includes(n.id) ? 'is-on' : ''} onClick={() => onToggleFavorite(n.id)}>
-                  <span className="rail-fav-icon"><Icon name={n.icon} size={14} /></span><span className="rail-fav-label">{n.label}</span><span className="rail-fav-check">{favorites.includes(n.id) ? '✓' : '+'}</span>
+                  <span className="rail-fav-icon"><Icon name={n.icon} size={14} /></span><span className="rail-fav-label">{n.label}</span><span className="rail-fav-check">{favorites.includes(n.id) ? '✓' : '+'}</span>
                 </button>
               </li>
             ))}
@@ -1131,18 +1131,18 @@ function NotifyPanel({ onClose }: { onClose: () => void }) {
           <span className="admin-overline">NOTIFICATIONS</span>
           <strong>{hasAny ? `${alerts.length + (notify?.length ?? 0)} notification${alerts.length + (notify?.length ?? 0) === 1 ? '' : 's'}` : 'All clear'}</strong>
         </div>
-        <button type="button" className="notify-refresh" aria-label="Refresh notifications" onClick={() => void loadNotify()} disabled={notifyBusy}>{notifyBusy ? '…' : <Icon name="refresh" size={13} />}</button>
-        <button type="button" className="rail-x" aria-label="Close notifications" onClick={onClose}>×</button>
+        <button type="button" className="notify-refresh" aria-label="Refresh notifications" onClick={() => void loadNotify()} disabled={notifyBusy}>{notifyBusy ? '…' : <Icon name="refresh" size={13} />}</button>
+        <button type="button" className="rail-x" aria-label="Close notifications" onClick={onClose}>×</button>
       </div>
 
       <div className="notify-body">
         {hasAny ? (
           <>
             <div className="notify-summary">
-              {errs > 0 && <span className="is-err">● {errs} error{errs === 1 ? '' : 's'}</span>}
-              {warns > 0 && <span className="is-warn">● {warns} warning{warns === 1 ? '' : 's'}</span>}
-              {oks > 0 && <span className="is-ok">● {oks} notice{oks === 1 ? '' : 's'}</span>}
-              {hasLogs && <span className="is-log">● {notify!.length} log line{(notify?.length ?? 0) === 1 ? '' : 's'}</span>}
+              {errs > 0 && <span className="is-err">● {errs} error{errs === 1 ? '' : 's'}</span>}
+              {warns > 0 && <span className="is-warn">● {warns} warning{warns === 1 ? '' : 's'}</span>}
+              {oks > 0 && <span className="is-ok">● {oks} notice{oks === 1 ? '' : 's'}</span>}
+              {hasLogs && <span className="is-log">● {notify!.length} log line{(notify?.length ?? 0) === 1 ? '' : 's'}</span>}
             </div>
 
             {hasAlerts && (
@@ -1158,9 +1158,9 @@ function NotifyPanel({ onClose }: { onClose: () => void }) {
                       <span className="notify-alert-dot" />
                       <span className="notify-alert-body">
                         <b>{a.message}</b>
-                        <small>{a.source} · {a.at}</small>
+                        <small>{a.source} · {a.at}</small>
                       </span>
-                      <button type="button" className="notify-alert-x" aria-label="Dismiss alert" onClick={() => dismissAlert(a.id)}>×</button>
+                      <button type="button" className="notify-alert-x" aria-label="Dismiss alert" onClick={() => dismissAlert(a.id)}>×</button>
                     </li>
                   ))}
                 </ul>
@@ -1171,13 +1171,13 @@ function NotifyPanel({ onClose }: { onClose: () => void }) {
               <>
                 <div className="notify-section-title">
                   <span>SYSTEM ERRORS</span>
-                  <span className="notify-section-meta">supervisor · error level</span>
+                  <span className="notify-section-meta">supervisor · error level</span>
                 </div>
                 <ul className="notify-logs">
                   {notify!.slice(0, 8).map((l, i) => (
                     <li key={i}>
                       <b>{l.service}</b><span>{new Date(l.ts).toLocaleTimeString()}</span>
-                      <p>{l.line.length > 96 ? `${l.line.slice(0, 96)}…` : l.line}</p>
+                      <p>{l.line.length > 96 ? `${l.line.slice(0, 96)}…` : l.line}</p>
                     </li>
                   ))}
                 </ul>
@@ -1185,7 +1185,7 @@ function NotifyPanel({ onClose }: { onClose: () => void }) {
             )}
           </>
         ) : loading ? (
-          <div className="notify-empty"><span className="notify-empty-icon"><Icon name="bell" size={18} /></span><strong>Loading notifications…</strong></div>
+          <div className="notify-empty"><span className="notify-empty-icon"><Icon name="bell" size={18} /></span><strong>Loading notifications…</strong></div>
         ) : (
           <div className="notify-empty"><span className="notify-empty-icon"><Icon name="bell" size={18} /></span><strong>All clear</strong><p>No errors or alerts right now.</p></div>
         )}
@@ -1281,7 +1281,7 @@ function ThemeCentre({
           <button type="button" className="workspace-action" onClick={resetAll}><Icon name="refresh" size={12} /> Reset all</button>
         </div>
       </PageHead>
-      <PageHero kicker="SURFACE STUDIO" title={<>Make it <em>yours.</em></>} desc="Curated themes, your own palette, particle fields and surface tuning — applied live to this workspace and remembered locally in your browser." glyph="palette" art="palette" />
+      <PageHero kicker="SURFACE STUDIO" title={<>Make it <em>yours.</em></>} desc="Curated themes, your own palette, particle fields and surface tuning — applied live to this workspace and remembered locally in your browser." glyph="palette" art="palette" />
       <section className="glass-card space-y-4">
         <div className="flex items-center justify-between">
           <div><span className="admin-overline">CURATED THEMES</span><h3 className="glass-h3">Start from a surface</h3></div>
@@ -1295,7 +1295,7 @@ function ThemeCentre({
               <button key={id} type="button" className={`theme-card${isActive ? ' is-active' : ''}`} onClick={() => { onThemeChange(id); onCustom({ ...preset, active: false }); }}>
                 <span className={`theme-preview ${id}`} />
                 <span className="theme-card-body"><b>{label}</b><small>{detail}</small></span>
-                {isActive && <i className="theme-card-check">✓</i>}
+                {isActive && <i className="theme-card-check">✓</i>}
               </button>
             );
           })}
@@ -1311,11 +1311,11 @@ function ThemeCentre({
           <div><span className="admin-overline">CUSTOM THEME</span><h3 className="glass-h3">Your own palette</h3></div>
           <div className="flex items-center gap-2">
             <button type="button" className="glass-chip-btn" onClick={() => { const p = randomAccentPalette(); onCustom({ ...p, active: !custom.active ? true : custom.active }); }}><Icon name="sparkles" size={12} /> Randomize</button>
-            <button type="button" className={`custom-toggle${custom.active ? ' is-active' : ''}`} onClick={() => onCustom({ active: !custom.active })}>{custom.active ? 'Applied · live' : 'Apply custom'}</button>
+            <button type="button" className={`custom-toggle${custom.active ? ' is-active' : ''}`} onClick={() => onCustom({ active: !custom.active })}>{custom.active ? 'Applied · live' : 'Apply custom'}</button>
             <button type="button" className="glass-chip-btn" onClick={() => onCustom({ ...THEME_PRESETS[theme], active: true })}>Seed from {theme}</button>
           </div>
         </div>
-        <p className="text-sm text-slate-400">Tune each color below — the workspace re-themes instantly while custom is applied. Stored locally in your browser.</p>
+        <p className="text-sm text-slate-400">Tune each color below — the workspace re-themes instantly while custom is applied. Stored locally in your browser.</p>
         <div className="custom-grid">
           {colors.map((c) => (
             <label key={c.key} className="color-row">
@@ -1355,7 +1355,7 @@ function ThemeCentre({
               >
                 <span className={`ai-toggle tg-${t.id} is-on toggle-style-preview`}><span className="ai-toggle-knob" /></span>
                 <span className="toggle-style-meta"><b>{t.label}</b><small>{t.hint}</small></span>
-                {custom.toggle === t.id && <i className="toggle-style-check">✓</i>}
+                {custom.toggle === t.id && <i className="toggle-style-check">✓</i>}
               </button>
             ))}
           </div>
@@ -1371,13 +1371,13 @@ function ThemeCentre({
         </div>
         <p className="text-sm text-slate-400">Control how many particles drift behind the workspace, how fast they rise, and build a custom color list for them.</p>
         {slider('Particle amount', 'Count of dots in the field', particles.amount, 0, 48, 1, String(particles.amount), (v) => onParticles({ amount: v }))}
-        {slider('Particle speed', 'Rise speed multiplier', particles.speed, 0.2, 3, 0.05, `${particles.speed.toFixed(2)}×`, (v) => onParticles({ speed: v }))}
+        {slider('Particle speed', 'Rise speed multiplier', particles.speed, 0.2, 3, 0.05, `${particles.speed.toFixed(2)}×`, (v) => onParticles({ speed: v }))}
         <div className="palette-list">
           {particles.colors.map((c, i) => (
             <div className="palette-chip" key={i}>
               <span className="color-swatch"><input type="color" value={c} onChange={(e) => setParticleColor(i, e.target.value)} /></span>
               <input className="glass-input color-hex" value={c} onChange={(e) => { const v = e.target.value.trim(); if (/^#[0-9a-fA-F]{3,8}$/.test(v)) setParticleColor(i, v); }} />
-              <button type="button" className="row-delete" onClick={() => removeParticleColor(i)} aria-label="Remove color" disabled={particles.colors.length <= 1}>×</button>
+              <button type="button" className="row-delete" onClick={() => removeParticleColor(i)} aria-label="Remove color" disabled={particles.colors.length <= 1}>×</button>
             </div>
           ))}
           <button type="button" className="add-color" onClick={addParticleColor}>+ Add color</button>
@@ -1388,19 +1388,19 @@ function ThemeCentre({
 }
 
 const CATEGORY_LABEL: Record<string, { label: string; hint: string }> = {
-  refused: { label: 'Connection refused', hint: 'the target address is reachable but nothing is listening — is the service running?' },
-  timeout: { label: 'Timed out', hint: 'the target did not respond in time — it may be down or filtering traffic.' },
+  refused: { label: 'Connection refused', hint: 'the target address is reachable but nothing is listening — is the service running?' },
+  timeout: { label: 'Timed out', hint: 'the target did not respond in time — it may be down or filtering traffic.' },
   dns: { label: 'DNS lookup failed', hint: 'the host could not be resolved.' },
   ssl: { label: 'TLS handshake failed', hint: 'the target answered but the TLS handshake failed.' },
   http: { label: 'HTTP error status', hint: 'the endpoint responded with an error status code.' },
-  engine_offline: { label: 'Diagnostics engine offline', hint: 'the Python engine is not running — start it with "python main.py" or "nexus dev".' },
+  engine_offline: { label: 'Diagnostics engine offline', hint: 'the Python engine is not running — start it with "python main.py" or "nexus dev".' },
 };
 
 function friendlyPreflightError(error?: string, category?: string): string {
   if (!error) return 'unreachable';
   const meta = category ? CATEGORY_LABEL[category] : undefined;
   if (!meta || error.toLowerCase().startsWith(meta.label.toLowerCase())) return error;
-  return `${meta.label} — ${error}`;
+  return `${meta.label} — ${error}`;
 }
 
 function preflightAddress(c: PreflightCheck): string {
@@ -1453,42 +1453,42 @@ function Overview({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
   };
   return (
     <div className="admin-view-stack">
-      <PageHead title="Project Overview"><button onClick={() => onNavigate('processes')} className="workspace-action">Open services <span>→</span></button></PageHead>
+      <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>
+      <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>
+      <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>
+          <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}
+            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>
+              <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>
+                <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">Probing dependencies…</p>
         ) : (
-          <p className="preflight-empty">No checks run yet — press “run checks”.</p>
+          <p className="preflight-empty">No checks run yet — press “run checks”.</p>
         )}
         {preflight && (
           <div className="preflight-list">
@@ -1535,7 +1535,7 @@ function TrafficChart({ samples, total, last, onNavigate }: { samples: number[];
         <path d={line} fill="none" stroke="var(--admin-blue, #54b7ff)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
         <circle cx={lastPt[0]} cy={lastPt[1]} r="3.5" fill="var(--admin-blue, #54b7ff)" />
       </svg>
-      <div className="traffic-meta"><span>{last} req / 5s</span><span>{total} since boot</span><button onClick={() => onNavigate('monitoring')} className="text-action">Open monitoring →</button></div>
+      <div className="traffic-meta"><span>{last} req / 5s</span><span>{total} since boot</span><button onClick={() => onNavigate('monitoring')} className="text-action">Open monitoring →</button></div>
     </div>
   );
 }
@@ -1562,7 +1562,7 @@ function Processes() {
       <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" />
+      <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>
@@ -1576,8 +1576,8 @@ function Processes() {
                     {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 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>
@@ -1595,7 +1595,7 @@ function Processes() {
       {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>
+          <pre className="glass-code max-h-80 overflow-auto p-3">{((logs[sel] ?? []).join('\n')) || '— empty —'}</pre>
         </div>
       )}
     </div>
@@ -1708,7 +1708,7 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
     if (aiSummaryBusy) return;
     if (!ordered.length) {
       setAiSummary('');
-      setAiSummaryErr('No log lines to summarize — widen the filters first.');
+      setAiSummaryErr('No log lines to summarize — widen the filters first.');
       setAiSummaryOpen(true);
       return;
     }
@@ -1773,16 +1773,16 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
       <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-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="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" />
+      <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?
+          Logs unavailable — {err}. Is <code className="font-mono">nexus dev</code> running?
         </div>
       )}
       <div className="glass-card log-card">
@@ -1800,19 +1800,19 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
               </button>
             ))}
           </div>
-          <button aria-pressed={criticalFirst} onClick={() => { setCriticalFirst(!criticalFirst); setSticky(true); }} className={criticalFirst ? 'log-crit-btn is-active' : 'log-crit-btn'}>⤓ critical first</button>
+          <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" />
+            <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>
+              <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>}
@@ -1823,11 +1823,11 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
               <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>
+                  <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>}
+            {aiSummaryBusy && !aiSummary && <div className="log-ai-note">Analyzing {ordered.length} lines…</div>}
             {aiSummary && <pre className="log-ai-body">{aiSummary}</pre>}
           </div>
         )}
@@ -1858,8 +1858,8 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
           )}
         </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>}
+          <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>
@@ -1942,16 +1942,16 @@ function LintChecks({ run, title, overline }: { run: () => Promise<LintReport>;
     <section className="workspace-panel lint-panel">
       <div className="panel-title-row">
         <div><span className="admin-overline">{overline}</span><h3>{title}</h3></div>
-        <button onClick={doRun} disabled={busy} className="glass-chip-btn">{busy ? 'linting…' : <><Icon name="refresh" size={12} /> run lint</>}</button>
+        <button onClick={doRun} disabled={busy} className="glass-chip-btn">{busy ? 'linting…' : <><Icon name="refresh" size={12} /> run lint</>}</button>
       </div>
       {err && <p className="preflight-empty">{err}</p>}
       {report ? (
         <>
           <div className="preflight-summary">
-            <span className="preflight-count bad">● {report.summary.error} error{report.summary.error === 1 ? '' : 's'}</span>
-            <span className="preflight-count warn">◐ {report.summary.warning} warning{report.summary.warning === 1 ? '' : 's'}</span>
-            <span className="preflight-count inf">◌ {report.summary.info} info</span>
-            {report.summary.ok > 0 && <span className="preflight-count ok">✓ {report.summary.ok} ok</span>}
+            <span className="preflight-count bad">● {report.summary.error} error{report.summary.error === 1 ? '' : 's'}</span>
+            <span className="preflight-count warn">◐ {report.summary.warning} warning{report.summary.warning === 1 ? '' : 's'}</span>
+            <span className="preflight-count inf">◌ {report.summary.info} info</span>
+            {report.summary.ok > 0 && <span className="preflight-count ok">✓ {report.summary.ok} ok</span>}
             <span className="preflight-meta">{report.ranAt}</span>
           </div>
           {report.engineOk === false && (
@@ -1961,7 +1961,7 @@ function LintChecks({ run, title, overline }: { run: () => Promise<LintReport>;
             </div>
           )}
         </>
-      ) : busy ? <p className="preflight-empty">Linting…</p> : <p className="preflight-empty">Run the linter to validate.</p>}
+      ) : busy ? <p className="preflight-empty">Linting…</p> : <p className="preflight-empty">Run the linter to validate.</p>}
       {report && (
         <div className="preflight-list">
           {report.checks.map((c) => (
@@ -2041,7 +2041,7 @@ function AiSettings() {
             ))}
           </div>
         ) : (
-          <p className="text-xs text-slate-500">Loading settings…</p>
+          <p className="text-xs text-slate-500">Loading settings…</p>
         )}
       </section>
 
@@ -2066,7 +2066,7 @@ function AiSettings() {
               ))}
             </>
           ) : (
-            <p className="col-span-3 text-xs text-slate-500">No status yet{aiErr ? '' : ' — run a check'}.</p>
+            <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>}
@@ -2135,7 +2135,7 @@ function isLocalProvider(baseUrl: string): boolean {
   } catch { return false; }
 }
 
-/** Preset for the "Add provider" dialog — popular providers with autofill data
+/** Preset for the "Add provider" dialog — popular providers with autofill data
  *  and a list of well-known models (the user can still edit everything after). */
 interface ProviderPreset { id: string; label: string; baseUrl: string; defaultModel: string; models: string[]; }
 const POPULAR_PROVIDERS: ProviderPreset[] = [
@@ -2298,7 +2298,7 @@ function AiProviders({ toggle }: { toggle: ToggleStyle }) {
     try {
       const result = await testAiProvider(p.id);
       setTestResults((prev) => ({ ...prev, [p.id]: result }));
-      if (result.ok) setMsg(`${p.label}: reachable — ${result.modelCount ?? 0} model(s).`);
+      if (result.ok) setMsg(`${p.label}: reachable — ${result.modelCount ?? 0} model(s).`);
       else setMsg(`${p.label}: ${result.error ?? 'unreachable'}.`);
     } catch (e: any) {
       setTestResults((prev) => ({ ...prev, [p.id]: { ok: false, provider: p.id, error: String(e?.message ?? e), checkedAt: new Date().toISOString() } }));
@@ -2321,13 +2321,13 @@ function AiProviders({ toggle }: { toggle: ToggleStyle }) {
 
   const groups: Array<{ id: string; label: string; icon: string; items: AiProviderView[] }> = [];
   if (filter === 'all' || filter === 'enabled') {
-    if (enabled.length) groups.push({ id: 'enabled', label: 'Enabled', icon: '●', items: enabled });
+    if (enabled.length) groups.push({ id: 'enabled', label: 'Enabled', icon: '●', items: enabled });
   }
   if (filter === 'all' || filter === 'disabled') {
-    if (disabled.length) groups.push({ id: 'disabled', label: 'Disabled', icon: 'â—‹', items: disabled });
+    if (disabled.length) groups.push({ id: 'disabled', label: 'Disabled', icon: '○', items: disabled });
   }
   if (filter === 'all' || filter === 'custom') {
-    if (custom.length) groups.push({ id: 'custom', label: 'Custom', icon: '✚', items: custom });
+    if (custom.length) groups.push({ id: 'custom', label: 'Custom', icon: '✚', items: custom });
   }
 
   const filterPills: Array<[ProviderFilter, string, number]> = [
@@ -2356,7 +2356,7 @@ function AiProviders({ toggle }: { toggle: ToggleStyle }) {
             <span className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500"><Icon name="search" size={13} /></span>
             <input
               className="glass-input !py-1.5 text-sm w-full sm:w-64 pl-8"
-              placeholder="Search providers…"
+              placeholder="Search providers…"
               type="search"
               autoComplete="off"
               autoCapitalize="none"
@@ -2511,7 +2511,7 @@ function ProviderCard({ provider, toggle, anim, busy, isCustom, testing, testRes
           onClick={onToggle}
           disabled={busy}
           className={`ai-toggle tg-${toggle} ${provider.enabled ? 'is-on' : ''}`}
-          title={provider.enabled ? 'Enabled — click to disable' : 'Disabled — click to enable'}
+          title={provider.enabled ? 'Enabled — click to disable' : 'Disabled — click to enable'}
         >
           <span className="ai-toggle-knob" />
         </button>
@@ -2520,7 +2520,7 @@ function ProviderCard({ provider, toggle, anim, busy, isCustom, testing, testRes
       {/* Status badges */}
       <div className="flex flex-wrap items-center gap-1.5">
         {provider.hasApiKey
-          ? <span className="provider-badge-ok">✓ key</span>
+          ? <span className="provider-badge-ok">✓ key</span>
           : <span className="provider-badge-warn">no key</span>}
         {provider.enabled
           ? <span className="provider-badge-ok">enabled</span>
@@ -2556,7 +2556,7 @@ function ProviderCard({ provider, toggle, anim, busy, isCustom, testing, testRes
             </>
           ) : (
             <>
-              <code className="text-xs text-slate-300 font-mono truncate flex-1">{provider.defaultModel || '—'}</code>
+              <code className="text-xs text-slate-300 font-mono truncate flex-1">{provider.defaultModel || '—'}</code>
               <button type="button" onClick={() => setEditingModel(true)} disabled={busy} className="glass-chip-btn shrink-0 text-[10px]" title="Edit model"><Icon name="pencil" size={11} /></button>
             </>
           )}
@@ -2567,7 +2567,7 @@ function ProviderCard({ provider, toggle, anim, busy, isCustom, testing, testRes
             value=""
             onChange={(e) => { if (e.target.value) setModelInput(e.target.value); }}
           >
-            <option value="" className="bg-slate-900">…or pick a popular model</option>
+            <option value="" className="bg-slate-900">…or pick a popular model</option>
             {PRESET_BY_ID[provider.id]!.models.map((m) => (
               <option key={m} value={m} className="bg-slate-900">{m}</option>
             ))}
@@ -2593,18 +2593,18 @@ function ProviderCard({ provider, toggle, anim, busy, isCustom, testing, testRes
       {/* Test row */}
       <div className="flex items-center gap-2 pt-0.5 border-t border-white/[0.06]">
         <button type="button" onClick={onTest} disabled={busy || testing} className="glass-chip-btn shrink-0 text-[10px]">
-          {testing ? 'testing…' : <><Icon name="zap" size={11} /> test</>}
+          {testing ? 'testing…' : <><Icon name="zap" size={11} /> test</>}
         </button>
         {testResult && (
           testResult.ok ? (
             <span className="text-[10px] text-emerald-300 truncate">
-              ✓ {testResult.modelCount ?? 0} model{testResult.modelCount === 1 ? '' : 's'}
+              ✓ {testResult.modelCount ?? 0} model{testResult.modelCount === 1 ? '' : 's'}
               {testResult.models && testResult.models.length > 0 && (
-                <span className="text-slate-500"> — {testResult.models.slice(0, 3).join(', ')}{testResult.models.length > 3 ? '…' : ''}</span>
+                <span className="text-slate-500"> — {testResult.models.slice(0, 3).join(', ')}{testResult.models.length > 3 ? '…' : ''}</span>
               )}
             </span>
           ) : (
-            <span className="text-[10px] text-rose-400 truncate" title={testResult.error}>✗ {testResult.error ?? 'unreachable'}</span>
+            <span className="text-[10px] text-rose-400 truncate" title={testResult.error}>✗ {testResult.error ?? 'unreachable'}</span>
           )
         )}
       </div>
@@ -2637,7 +2637,7 @@ function ProviderKeyDialog({ provider, value, onChange, onSave, onCancel, busy }
             <h3 id="provider-key-title" className="mt-1 text-base font-semibold text-slate-100">{provider.label}</h3>
             <code className="text-xs text-slate-500">{provider.id}</code>
           </div>
-          <button type="button" onClick={onCancel} disabled={busy} className="glass-chip-btn text-xs" aria-label="Close API key dialog">✕</button>
+          <button type="button" onClick={onCancel} disabled={busy} className="glass-chip-btn text-xs" aria-label="Close API key dialog">✕</button>
         </div>
 
         <div className="rounded-xl border border-sky-400/20 bg-black/20 px-3 py-2 text-xs text-slate-400">
@@ -2653,7 +2653,7 @@ function ProviderKeyDialog({ provider, value, onChange, onSave, onCancel, busy }
             name="ai-provider-api-key"
             autoComplete="new-password"
             autoFocus
-            placeholder={provider.hasApiKey ? '•••••••• (enter new to replace)' : 'paste API key'}
+            placeholder={provider.hasApiKey ? '•••••••• (enter new to replace)' : 'paste API key'}
             value={value}
             onChange={(event) => onChange(event.target.value)}
             onKeyDown={(event) => {
@@ -2668,7 +2668,7 @@ function ProviderKeyDialog({ provider, value, onChange, onSave, onCancel, busy }
         <div className="flex justify-end gap-2 border-t border-sky-400/20 pt-3">
           <button type="button" onClick={onCancel} disabled={busy} className="glass-chip-btn">Cancel</button>
           <button type="button" onClick={onSave} disabled={busy || !value.trim()} className="glass-btn-primary !py-1.5 text-sm">
-            {busy ? 'Saving…' : 'Save API key'}
+            {busy ? 'Saving…' : 'Save API key'}
           </button>
         </div>
       </div>
@@ -2697,7 +2697,7 @@ function AddProviderDialog({ value, onChange, onSubmit, onCancel, busy }: {
 
   const applyPreset = (id: string) => {
     setPresetId(id);
-    if (!id) return; // "— select —"
+    if (!id) return; // "— select —"
     if (id === 'other') {
       // Clear fields for a fully custom provider; user fills everything.
       onChange({ id: '', label: '', baseUrl: '', apiKey: value.apiKey, defaultModel: '' });
@@ -2720,11 +2720,11 @@ function AddProviderDialog({ value, onChange, onSubmit, onCancel, busy }: {
       <div className="provider-modal space-y-4" onClick={(e) => e.stopPropagation()}>
         <div className="flex items-center justify-between">
           <h3 className="glass-h3">Add custom provider</h3>
-          <button onClick={onCancel} className="glass-chip-btn text-xs">✕</button>
+          <button onClick={onCancel} className="glass-chip-btn text-xs">✕</button>
         </div>
 
         <div className="space-y-3">
-          {/* Preset selector — pick a popular provider or "Other" */}
+          {/* Preset selector — pick a popular provider or "Other" */}
           <label className="block">
             <span className="admin-overline">Choose a provider</span>
             <select
@@ -2732,13 +2732,13 @@ function AddProviderDialog({ value, onChange, onSubmit, onCancel, busy }: {
               value={presetId}
               onChange={(e) => applyPreset(e.target.value)}
             >
-              <option value="" className="bg-slate-900">— select —</option>
+              <option value="" className="bg-slate-900">— select —</option>
               {POPULAR_PROVIDERS.map((p) => (
                 <option key={p.id} value={p.id} className="bg-slate-900">{p.label}</option>
               ))}
               <option value="other" className="bg-slate-900">Other (custom)</option>
             </select>
-            <span className="text-[10px] text-slate-500">Selecting a provider autofills the fields below — all editable.</span>
+            <span className="text-[10px] text-slate-500">Selecting a provider autofills the fields below — all editable.</span>
           </label>
 
           <label className="block">
@@ -2749,7 +2749,7 @@ function AddProviderDialog({ value, onChange, onSubmit, onCancel, busy }: {
               value={value.id}
               onChange={(e) => onChange({ ...value, id: e.target.value })}
             />
-            {missing.id && <span className="text-[10px] text-amber-400">required — lowercase, no spaces</span>}
+            {missing.id && <span className="text-[10px] text-amber-400">required — lowercase, no spaces</span>}
           </label>
 
           <label className="block">
@@ -2785,7 +2785,7 @@ function AddProviderDialog({ value, onChange, onSubmit, onCancel, busy }: {
             />
           </label>
 
-          {/* Default model — text input + a "pick from popular" select */}
+          {/* Default model — text input + a "pick from popular" select */}
           <label className="block">
             <span className="admin-overline">Default model <span className="text-slate-500">(optional)</span></span>
             <input
@@ -2797,13 +2797,13 @@ function AddProviderDialog({ value, onChange, onSubmit, onCancel, busy }: {
           </label>
           {preset && preset.models.length > 0 && (
             <label className="block">
-              <span className="admin-overline">…or pick a model</span>
+              <span className="admin-overline">…or pick a model</span>
               <select
                 className="glass-input mt-1 text-sm font-mono"
                 value=""
                 onChange={(e) => { if (e.target.value) onChange({ ...value, defaultModel: e.target.value }); }}
               >
-                <option value="" className="bg-slate-900">{preset.models.length} popular model{preset.models.length === 1 ? '' : 's'} — click to use</option>
+                <option value="" className="bg-slate-900">{preset.models.length} popular model{preset.models.length === 1 ? '' : 's'} — click to use</option>
                 {preset.models.map((m) => (
                   <option key={m} value={m} className="bg-slate-900">{m}</option>
                 ))}
@@ -2815,7 +2815,7 @@ function AddProviderDialog({ value, onChange, onSubmit, onCancel, busy }: {
         <div className="flex justify-end gap-2 pt-2 border-t border-sky-400/20">
           <button onClick={onCancel} disabled={busy} className="glass-chip-btn">Cancel</button>
           <button onClick={onSubmit} disabled={busy || missing.id || missing.label || missing.baseUrl} className="glass-btn-primary !py-1.5 text-sm">
-            {busy ? 'Adding…' : '+ Add provider'}
+            {busy ? 'Adding…' : '+ Add provider'}
           </button>
         </div>
       </div>
@@ -2853,7 +2853,7 @@ function AiChatPlayground() {
         // Load its models once the provider state lands.
         setTimeout(() => { void loadModelsRef.current(firstEnabled.id); }, 0);
       } else {
-        // No enabled provider — fall back to the AI server's own detection.
+        // No enabled provider — fall back to the AI server's own detection.
         void checkAiRef.current();
       }
     }).catch(() => { void checkAiRef.current(); });
@@ -2964,7 +2964,7 @@ function AiChatPlayground() {
         <div className="flex flex-wrap items-center gap-3">
           <label className="text-xs text-slate-400">Provider
             <select className="glass-input w-44 !py-1.5 text-sm" value={provider} onChange={(e) => loadModels(e.target.value)}>
-              {!provider && <option value="" className="bg-slate-900">— select —</option>}
+              {!provider && <option value="" className="bg-slate-900">— select —</option>}
               {providerOptions.map((p) => <option key={p.id} value={p.id} className="bg-slate-900">{p.label}</option>)}
             </select>
           </label>
@@ -2976,7 +2976,7 @@ function AiChatPlayground() {
             value=""
             onChange={(e) => { const v = e.target.value; if (v) setModel(v); }}
             disabled={!modelOptions.length}
-            title={modelOptions.length ? `Available models for "${loadedFor || provider}"` : 'No models — click refresh models'}
+            title={modelOptions.length ? `Available models for "${loadedFor || provider}"` : 'No models — click refresh models'}
           >
             <option value="" className="bg-slate-900">{modelOptions.length ? `${modelOptions.length} available for "${loadedFor || provider}"` : 'no models loaded'}</option>
             {modelOptions.map((m) => <option key={m} value={m} className="bg-slate-900">{m}</option>)}
@@ -2990,7 +2990,7 @@ function AiChatPlayground() {
         {/* System prompt */}
         <div>
           <label className="text-xs text-slate-400">System prompt</label>
-          <textarea className="glass-code mt-1 h-16 w-full p-2 text-sm" value={systemPrompt} onChange={(e) => setSystemPrompt(e.target.value)} placeholder="Set the assistant's behaviour…" />
+          <textarea className="glass-code mt-1 h-16 w-full p-2 text-sm" value={systemPrompt} onChange={(e) => setSystemPrompt(e.target.value)} placeholder="Set the assistant's behaviour…" />
         </div>
 
         {/* Chat messages */}
@@ -3007,8 +3007,8 @@ function AiChatPlayground() {
           {streaming && (
             <div className="flex justify-start">
               <div className="max-w-[80%] rounded-xl bg-emerald-500/15 px-3 py-2 text-slate-100">
-                <span className="mb-1 block text-[10px] uppercase tracking-wider opacity-60">assistant <span className="animate-pulse">…</span></span>
-                <span className="whitespace-pre-wrap">{streamText}<span className="animate-pulse">â–‹</span></span>
+                <span className="mb-1 block text-[10px] uppercase tracking-wider opacity-60">assistant <span className="animate-pulse">…</span></span>
+                <span className="whitespace-pre-wrap">{streamText}<span className="animate-pulse">▋</span></span>
               </div>
             </div>
           )}
@@ -3016,8 +3016,8 @@ function AiChatPlayground() {
 
         {/* Input */}
         <div className="flex gap-2">
-          <textarea className="glass-code flex-1 h-12 p-2 text-sm" value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={sendOnEnter} placeholder="Type a message…  (Enter to send, Shift+Enter for newline)" disabled={streaming} />
-          <button onClick={send} disabled={streaming || !input.trim()} className="glass-btn-primary shrink-0">{streaming ? '…' : 'Send'}</button>
+          <textarea className="glass-code flex-1 h-12 p-2 text-sm" value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={sendOnEnter} placeholder="Type a message…  (Enter to send, Shift+Enter for newline)" disabled={streaming} />
+          <button onClick={send} disabled={streaming || !input.trim()} className="glass-btn-primary shrink-0">{streaming ? '…' : 'Send'}</button>
         </div>
       </section>
     </div>
@@ -3101,8 +3101,8 @@ function Config({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
       <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" />
+      {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">
@@ -3115,16 +3115,16 @@ function Config({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
                 <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>
+                <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" />
+      </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"
@@ -3159,10 +3159,10 @@ function Environment({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
   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">
+      <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 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>
@@ -3170,13 +3170,13 @@ function Environment({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
             {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 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}`} />
+        {!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"
@@ -3200,17 +3200,17 @@ function Environment({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
 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>;
+  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" />
+      <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} —{' '}
+              <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>
@@ -3272,15 +3272,15 @@ function Users({ currentUserEmail }: { currentUserEmail?: string }) {
   const roleChip = (id: string) => {
     const def = roleDef(id);
     const accent = def?.accent ?? '#8ba0bd';
-    return <span key={id} className="role-chip" style={{ color: accent, borderColor: `${accent}66`, background: `${accent}1a` }}>{def?.icon ?? '◌'} {def?.label ?? id}</span>;
+    return <span key={id} className="role-chip" style={{ color: accent, borderColor: `${accent}66`, background: `${accent}1a` }}>{def?.icon ?? '◌'} {def?.label ?? id}</span>;
   };
 
-  if (!data) return <p className="text-slate-400">Loading…</p>;
+  if (!data) return <p className="text-slate-400">Loading…</p>;
 
   return (
     <div className="space-y-6">
       <PageHead title="Users & Roles" />
-      <PageHero kicker="ACCESS & PERMISSIONS" title={<>Your team, <em>in control.</em></>} desc="Every account that can reach this Nexus surface — with role grants and restrictions applied in one built-in permission catalog." glyph="users" art="people" />
+      <PageHero kicker="ACCESS & PERMISSIONS" title={<>Your team, <em>in control.</em></>} desc="Every account that can reach this Nexus surface — with role grants and restrictions applied in one built-in permission catalog." glyph="users" art="people" />
 
       <div className="glass-panel overflow-hidden p-2">
         <table className="glass-table">
@@ -3289,13 +3289,13 @@ function Users({ currentUserEmail }: { currentUserEmail?: string }) {
             {data.users.map((u) => (
               <tr key={String(u._id)}>
                 <td className="text-slate-200">{u.email}{u.email === currentUserEmail && <span className="you-tag">you</span>}</td>
-                <td className="text-slate-300">{u.name ?? '—'}</td>
+                <td className="text-slate-300">{u.name ?? '—'}</td>
                 <td>
                   {(u.roles ?? []).map(roleChip)}
-                  {!(u.roles ?? []).length && '—'}
+                  {!(u.roles ?? []).length && '—'}
                 </td>
-                <td className="text-center text-emerald-400">{u.emailVerified ? '✓' : <span className="text-slate-500">—</span>}</td>
-                <td className="text-right"><button className="glass-chip-btn" onClick={() => openEditor(u)}>â—ˆ Edit roles</button></td>
+                <td className="text-center text-emerald-400">{u.emailVerified ? '✓' : <span className="text-slate-500">—</span>}</td>
+                <td className="text-right"><button className="glass-chip-btn" onClick={() => openEditor(u)}>◈ Edit roles</button></td>
               </tr>
             ))}
             {!data.users.length && <tr><td colSpan={5} className="py-8 text-center text-slate-500">No users registered.</td></tr>}
@@ -3315,13 +3315,13 @@ function Users({ currentUserEmail }: { currentUserEmail?: string }) {
             </div>
             <p className="role-box-desc">{r.description}</p>
             <div className="role-section">
-              <span className="role-section-title is-can">✓ Can do</span>
+              <span className="role-section-title is-can">✓ Can do</span>
               <ul className="role-list">
                 {r.grants.map((g) => <li key={g.label}><b>{g.label}</b><span>{g.detail}</span></li>)}
               </ul>
             </div>
             <div className="role-section">
-              <span className="role-section-title is-no">✕ Restricted from</span>
+              <span className="role-section-title is-no">✕ Restricted from</span>
               <ul className="role-list">
                 {r.restricts.map((g) => <li key={g.label}><b>{g.label}</b><span>{g.detail}</span></li>)}
               </ul>
@@ -3334,32 +3334,32 @@ function Users({ currentUserEmail }: { currentUserEmail?: string }) {
         <div className="confirm-overlay" onClick={() => !busy && setEditing(null)}>
           <div className="confirm-dialog role-dialog" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
             <div className="confirm-dialog-head">
-              <span className="confirm-dialog-mark">â—Ž</span>
-              <strong>Edit roles · {editing.email}</strong>
-              <button className="confirm-dialog-close" onClick={() => !busy && setEditing(null)} aria-label="Close">×</button>
+              <span className="confirm-dialog-mark">◎</span>
+              <strong>Edit roles · {editing.email}</strong>
+              <button className="confirm-dialog-close" onClick={() => !busy && setEditing(null)} aria-label="Close">×</button>
             </div>
-            <p className="confirm-dialog-message">Choose which roles this account holds — every selected role applies.</p>
+            <p className="confirm-dialog-message">Choose which roles this account holds — every selected role applies.</p>
             <div className="role-options">
               {roles.map((r) => {
                 const on = draft.includes(r.id);
                 return (
                   <button key={r.id} type="button" className={`role-option${on ? ' is-on' : ''}`} style={{ ['--role-accent' as string]: r.accent }} onClick={() => toggleRole(r.id)}>
-                    <span className="role-option-icon" style={{ color: r.accent }}>{on ? '✓' : r.icon}</span>
+                    <span className="role-option-icon" style={{ color: r.accent }}>{on ? '✓' : r.icon}</span>
                     <span className="role-option-text">
                       <b>{r.label}</b>
                       <small>{r.description}</small>
                     </span>
-                    <span className="role-option-check">{on ? '✓' : ''}</span>
+                    <span className="role-option-check">{on ? '✓' : ''}</span>
                   </button>
                 );
               })}
             </div>
             {editing.email === currentUserEmail && (
-              <p className="role-hint">Editing your own account — removing <b>Administrator</b> from yourself is blocked server-side.</p>
+              <p className="role-hint">Editing your own account — removing <b>Administrator</b> from yourself is blocked server-side.</p>
             )}
             <div className="confirm-dialog-actions">
               <button className="glass-chip-btn" onClick={() => setEditing(null)} disabled={busy}>Cancel</button>
-              <button className="glass-chip-btn-danger confirm-dialog-primary" onClick={saveRoles} disabled={busy}>{busy ? 'Saving…' : 'Save roles'}</button>
+              <button className="glass-chip-btn-danger confirm-dialog-primary" onClick={saveRoles} disabled={busy}>{busy ? 'Saving…' : 'Save roles'}</button>
             </div>
           </div>
         </div>
@@ -3476,15 +3476,15 @@ function Monitoring() {
     const t = setInterval(() => getRequestLogs().then(setLogs).catch(() => {}), 5000);
     return () => clearInterval(t);
   }, []);
-  if (!data) return <p className="text-slate-400">Loading…</p>;
+  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" />
+      <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 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">
@@ -3511,8 +3511,8 @@ function Monitoring() {
                     <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>
+                    <td className="req-td-ip">{r.ip ?? '—'}</td>
+                    <td className="req-td-ref" title={r.referer}>{r.referer ?? '—'}</td>
                   </tr>
                 ))}
               </tbody>
@@ -3581,7 +3581,7 @@ function Payments({ toggle }: { toggle: ToggleStyle }) {
           <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" />
+      <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">
         {([
@@ -3614,12 +3614,12 @@ function OrdersTable({ orders }: { orders: PaymentOrder[] }) {
           {orders.map((o, i) => (
             <tr key={`${o.orderId}-${i}`}>
               <td><span className="chip">{o.provider}</span></td>
-              <td className="font-mono text-slate-200">{o.orderId || '—'}</td>
-              <td className="font-mono text-slate-400">{o.reference || '—'}</td>
+              <td className="font-mono text-slate-200">{o.orderId || '—'}</td>
+              <td className="font-mono text-slate-400">{o.reference || '—'}</td>
               <td className={`text-center ${statusColor(o.status)}`}>{o.status}</td>
               <td className="text-right font-medium text-slate-200">{o.currency} {o.amount}</td>
-              <td className="font-mono text-slate-400">{o.paymentId || '—'}</td>
-              <td className="text-slate-400">{o.createdAt ? new Date(o.createdAt).toLocaleString() : '—'}</td>
+              <td className="font-mono text-slate-400">{o.paymentId || '—'}</td>
+              <td className="text-slate-400">{o.createdAt ? new Date(o.createdAt).toLocaleString() : '—'}</td>
             </tr>
           ))}
           {!orders.length && <tr><td colSpan={7} className="py-8 text-center text-slate-500">No orders recorded yet.</td></tr>}
@@ -3639,11 +3639,11 @@ function TransactionsTable({ transactions }: { transactions: PaymentTransaction[
             <tr key={i}>
               <td><span className="chip">{t.provider}</span></td>
               <td className="font-mono text-slate-200">{t.event}</td>
-              <td className={`text-center ${t.verified ? 'text-emerald-400' : 'text-rose-400'}`}>{t.verified ? '✓' : '✗'}</td>
-              <td className="font-mono text-slate-400">{t.orderId || '—'}</td>
-              <td className="font-mono text-slate-400">{t.paymentId || '—'}</td>
-              <td className="text-right text-slate-200">{t.currency ? `${t.currency} ${t.amount ?? ''}` : '—'}</td>
-              <td className="text-slate-400">{t.createdAt ? new Date(t.createdAt).toLocaleString() : '—'}</td>
+              <td className={`text-center ${t.verified ? 'text-emerald-400' : 'text-rose-400'}`}>{t.verified ? '✓' : '✗'}</td>
+              <td className="font-mono text-slate-400">{t.orderId || '—'}</td>
+              <td className="font-mono text-slate-400">{t.paymentId || '—'}</td>
+              <td className="text-right text-slate-200">{t.currency ? `${t.currency} ${t.amount ?? ''}` : '—'}</td>
+              <td className="text-slate-400">{t.createdAt ? new Date(t.createdAt).toLocaleString() : '—'}</td>
             </tr>
           ))}
           {!transactions.length && <tr><td colSpan={7} className="py-8 text-center text-slate-500">No webhook transactions yet.</td></tr>}
@@ -3724,7 +3724,7 @@ function TestConsole({ toggle, status, onRun, onNotice, onCreated }: { toggle: T
         <div className="flex items-center justify-between">
           <h3 className="glass-h3">Provider status</h3>
           <button onClick={async () => { setProbeBusy(true); try { await onRun(); } finally { setProbeBusy(false); } }} className="glass-chip-btn" disabled={probeBusy}>
-            {probeBusy ? 'checking…' : <><Icon name="refresh" size={12} /> re-run checks</>}
+            {probeBusy ? 'checking…' : <><Icon name="refresh" size={12} /> re-run checks</>}
           </button>
         </div>
         <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
@@ -3737,7 +3737,7 @@ function TestConsole({ toggle, status, onRun, onNotice, onCreated }: { toggle: T
                     onClick={() => toggleProvider(p)}
                     disabled={!!toggleBusy || !!anim}
                     className={`ai-toggle tg-${toggle} ${p.enabled ? 'is-on' : ''}`}
-                    title={p.enabled ? 'Enabled — click to disable' : 'Disabled — click to enable'}
+                    title={p.enabled ? 'Enabled — click to disable' : 'Disabled — click to enable'}
                   >
                     <span className="ai-toggle-knob" />
                   </button>
@@ -3769,12 +3769,12 @@ function TestConsole({ toggle, status, onRun, onNotice, onCreated }: { toggle: T
       <section className="glass-card space-y-3">
         <div>
           <h3 className="glass-h3">Create a test order</h3>
-          <p className="mt-1 text-sm text-slate-400">Creates a real order through the selected provider (hosted checkout, no charge) and records it in the orders table — verifies keys, upstream reachability and persistence.</p>
+          <p className="mt-1 text-sm text-slate-400">Creates a real order through the selected provider (hosted checkout, no charge) and records it in the orders table — verifies keys, upstream reachability and persistence.</p>
         </div>
         <form onSubmit={testOrder} className="flex flex-wrap items-end gap-3">
           <label className="text-sm text-slate-300">Provider
             <select value={provider} onChange={(e) => setProvider(e.target.value)} required className="glass-input mt-1 block w-44">
-              <option value="" disabled className="bg-slate-900">choose…</option>
+              <option value="" disabled className="bg-slate-900">choose…</option>
               {status.map((p) => (
                 <option key={p.name} value={p.name} className="bg-slate-900">{p.enabled ? p.name : `${p.name} (disabled)`}</option>
               ))}
@@ -3787,13 +3787,13 @@ function TestConsole({ toggle, status, onRun, onNotice, onCreated }: { toggle: T
             <input value={currency} maxLength={3} onChange={(e) => setCurrency(e.target.value.toUpperCase())} className="glass-input mt-1 block w-20" />
           </label>
           <button type="submit" disabled={busy || !provider} className="glass-btn-primary">
-            {busy ? 'Creating…' : 'Create test order'}
+            {busy ? 'Creating…' : 'Create test order'}
           </button>
         </form>
         {err && <p className="text-sm text-rose-400">{err}</p>}
         {selected && !selected.enabled && (
           <p className="rounded-lg border border-amber-400/30 bg-amber-400/10 px-3 py-2 text-xs text-amber-200">
-            “{selected.name}” is disabled in the config — it will be rejected by the backend. To enable it, set{' '}
+            “{selected.name}” is disabled in the config — it will be rejected by the backend. To enable it, set{' '}
             <code className="font-mono">NEXUS_PAYMENTS_{selected.name.toUpperCase()}_ENABLED=true</code> (plus its keys) in the project <code className="font-mono">.env</code>, or <code className="font-mono">payments.{selected.name}.enabled: true</code> in <code className="font-mono">nexus.config.ts</code>, then restart the backend. A provider also activates automatically once its keys are present.
           </p>
         )}
@@ -3845,7 +3845,7 @@ function PaymentKeysDialog({ provider, value, onChange, onSave, onCancel, busy,
             <h3 id="payment-keys-title" className="mt-1 text-base font-semibold text-slate-100">{provider.name}</h3>
             <code className="text-xs text-slate-500">{provider.name}</code>
           </div>
-          <button type="button" onClick={onCancel} disabled={busy} className="glass-chip-btn text-xs" aria-label="Close payment keys dialog">✕</button>
+          <button type="button" onClick={onCancel} disabled={busy} className="glass-chip-btn text-xs" aria-label="Close payment keys dialog">✕</button>
         </div>
 
         <div className="rounded-xl border border-sky-400/20 bg-black/20 px-3 py-2 text-xs text-slate-400">
@@ -3868,7 +3868,7 @@ function PaymentKeysDialog({ provider, value, onChange, onSave, onCancel, busy,
                 id={`payment-${f.field}`}
                 name={`payment-${f.field}`}
                 autoComplete="new-password"
-                placeholder={f.hasValue ? `•••••••• (enter new to replace)` : `paste ${f.label.toLowerCase()}`}
+                placeholder={f.hasValue ? `•••••••• (enter new to replace)` : `paste ${f.label.toLowerCase()}`}
                 value={value[f.field] ?? ''}
                 onChange={(event) => onChange({ ...value, [f.field]: event.target.value })}
                 onKeyDown={(event) => {
@@ -3882,7 +3882,7 @@ function PaymentKeysDialog({ provider, value, onChange, onSave, onCancel, busy,
         <div className="flex justify-end gap-2 border-t border-sky-400/20 pt-3">
           <button type="button" onClick={onCancel} disabled={busy} className="glass-chip-btn">Cancel</button>
           <button type="button" onClick={onSave} disabled={busy || fields.length === 0} className="glass-chip-btn-primary">
-            {busy ? 'Saving…' : 'Save keys'}
+            {busy ? 'Saving…' : 'Save keys'}
           </button>
         </div>
       </div>
@@ -3940,7 +3940,7 @@ function Databases() {
       <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" />
+      <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)} />
@@ -3954,8 +3954,8 @@ function Databases() {
               <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>
+              <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 && (
@@ -3970,9 +3970,9 @@ function Databases() {
                     <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 })} />
+                    <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>
+                    <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>
@@ -3984,8 +3984,8 @@ function Databases() {
           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>
+              <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;
         })}
@@ -4031,8 +4031,8 @@ function Schema() {
       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?).`); }
+      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); }
   };
 
@@ -4052,7 +4052,7 @@ function Schema() {
     <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>
+      <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">
@@ -4075,7 +4075,7 @@ function Schema() {
               ))}
             </>
           ) : (
-            <p className="col-span-3 text-xs text-slate-500">No status yet{aiErr ? '' : ' — run a check'}.</p>
+            <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>}
@@ -4090,18 +4090,18 @@ function Schema() {
         <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>
+            <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>
+          <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>
+            <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>
@@ -4110,8 +4110,8 @@ function Schema() {
                     <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-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>
                   ))}