@bhooai/nexus-admin 2.0.6 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bhooai/nexus-admin",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "BhooAI Nexus v2 admin SPA — Apps-tab-first, live registry/health/logs/config/users/payments/AI",
   "type": "module",
   "license": "MIT",

package/src/App.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { 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';
 import { AlertProvider, useAlerts, useAdminAlert, ToastStack } from './alertCenter.js';
 import {
@@ -26,7 +27,7 @@ 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: '⏻ → ⚡ glow' },
+  { 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' },
 ];
@@ -183,14 +184,14 @@ function PageHead({ title, children }: { title: string; children?: React.ReactNo
   );
 }
 
-function PageHero({ kicker, title, desc, glyph, art }: { kicker: string; title: React.ReactNode; desc: string; glyph: string; art?: string }) {
+function PageHero({ kicker, title, desc, glyph, art }: { kicker: string; title: React.ReactNode; desc: string; glyph: IconName; art?: string }) {
   return (
     <div className="config-intro">
       <div><span className="admin-overline">{kicker}</span><h1>{title}</h1><p>{desc}</p></div>
       {art ? (
-        <div className={`hero-art hero-art--${art}`}><strong>{glyph}</strong><span className="ha-a" /><span className="ha-b" /><span className="ha-c" /></div>
+        <div className={`hero-art hero-art--${art}`}><strong><Icon name={glyph} size={26} /></strong><span className="ha-a" /><span className="ha-b" /><span className="ha-c" /></div>
       ) : (
-        <div className="hero-orbit-art"><span /><i /><b /><strong>{glyph}</strong></div>
+        <div className="hero-orbit-art"><span /><i /><b /><strong><Icon name={glyph} size={26} /></strong></div>
       )}
     </div>
   );
@@ -211,7 +212,7 @@ function ConfirmDialog(props: {
     <div className="confirm-overlay" onClick={props.onCancel}>
       <div className="confirm-dialog" role="dialog" aria-modal="true" onClick={(event) => event.stopPropagation()}>
         <div className="confirm-dialog-head">
-          <span className="confirm-dialog-mark">{props.danger ? '!' : 'â—ˆ'}</span>
+          <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>
         </div>
@@ -445,20 +446,20 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
   const [shellWidth] = useState(() => Math.round((typeof window === 'undefined' ? 0 : window.screen.width) * 0.8));
   const displayName = user?.name || user?.email?.split('@')[0] || 'Admin';
   const initials = displayName.trim().split(/\s+/).map((p) => p[0]).join('').slice(0, 2).toUpperCase() || '?';
-  const nav: { id: Tab; label: string; icon: string; keywords?: string[]; desc?: string }[] = [
-    { id: 'overview', label: 'Overview', icon: '⌂', keywords: ['home', 'dashboard', 'project', 'summary'], desc: 'Project overview, services pulse and quick links.' },
-    { id: 'processes', label: 'Processes', icon: 'â—ˆ', keywords: ['services', 'supervisor', 'dev', 'run', 'terminal', 'server'], desc: 'Live service states with start/stop/restart control.' },
-    { id: 'logs', label: 'Logs', icon: 'â–¤', keywords: ['console', 'error', 'output', 'stdout', 'stderr', 'supervisor'], desc: 'Aggregated service output, filterable and searchable.' },
-    { id: 'config', label: 'Config JSON', icon: '{}', keywords: ['configuration', 'runtime', 'settings', 'json', 'source file', 'nexus.config'], desc: 'Runtime overrides are stored in nexus.runtime.json.' },
-    { id: 'env', label: 'Environment', icon: '⌁', keywords: ['dotenv', 'variables', 'secrets', 'keys', '.env'], desc: 'Masked environment values are ready to edit.' },
-    { id: 'plugins', label: 'Plugins', icon: 'â—‡', keywords: ['extensions', 'modules', 'addons', 'gallery'], desc: 'Registered plugin pages, slots and surfaces.' },
-    { id: 'users', label: 'Users', icon: 'â—Ž', keywords: ['roles', 'permissions', 'accounts', 'team', 'access', 'rbac'], desc: 'Accounts, roles and permission grants.' },
-    { id: 'monitoring', label: 'Monitoring', icon: '⌁', keywords: ['metrics', 'telemetry', 'health', 'uptime', 'traffic', 'stats'], desc: 'Live backend metrics and request traffic.' },
-    { id: 'payments', label: 'Payments', icon: '$', keywords: ['orders', 'transactions', 'money', 'ledger', 'checkout', 'razorpay', 'paypal', 'stripe'], desc: 'Orders, transactions and provider status.' },
-    { id: 'databases', label: 'Databases', icon: 'â–¦', keywords: ['mongo', 'mongodb', 'collections', 'data', 'tables', 'docs'], desc: 'Databases, collections and their documents.' },
-    { id: 'schema', label: 'AI Schema', icon: '✦', keywords: ['generate', 'ai', 'model', 'json schema', 'validator'], desc: 'Generate MongoDB schemas from plain English.' },
-    { id: 'ai', label: 'AI Agents', icon: 'â—Ž', keywords: ['providers', 'chat', 'playground', 'ollama', 'openai', 'models', 'settings'], desc: 'AI settings, providers and chat playground.' },
-    { id: 'theme', label: 'Theme Centre', icon: 'â—’', keywords: ['appearance', 'colors', 'palette', 'ui', 'customize', 'surface'], desc: 'Curated themes, palettes and surface tuning.' },
+  const nav: { id: Tab; label: string; icon: IconName; keywords?: string[]; desc?: string }[] = [
+    { id: 'overview', label: 'Overview', icon: 'house', keywords: ['home', 'dashboard', 'project', 'summary'], desc: 'Project overview, services pulse and quick links.' },
+    { id: 'processes', label: 'Processes', icon: 'server', keywords: ['services', 'supervisor', 'dev', 'run', 'terminal', 'server'], desc: 'Live service states with start/stop/restart control.' },
+    { id: 'logs', label: 'Logs', icon: 'terminal', keywords: ['console', 'error', 'output', 'stdout', 'stderr', 'supervisor'], desc: 'Aggregated service output, filterable and searchable.' },
+    { id: 'config', label: 'Config JSON', icon: 'braces', keywords: ['configuration', 'runtime', 'settings', 'json', 'source file', 'nexus.config'], desc: 'Runtime overrides are stored in nexus.runtime.json.' },
+    { id: 'env', label: 'Environment', icon: 'key', keywords: ['dotenv', 'variables', 'secrets', 'keys', '.env'], desc: 'Masked environment values are ready to edit.' },
+    { id: 'plugins', label: 'Plugins', icon: 'puzzle', keywords: ['extensions', 'modules', 'addons', 'gallery'], desc: 'Registered plugin pages, slots and surfaces.' },
+    { id: 'users', label: 'Users', icon: 'users', keywords: ['roles', 'permissions', 'accounts', 'team', 'access', 'rbac'], desc: 'Accounts, roles and permission grants.' },
+    { id: 'monitoring', label: 'Monitoring', icon: 'activity', keywords: ['metrics', 'telemetry', 'health', 'uptime', 'traffic', 'stats'], desc: 'Live backend metrics and request traffic.' },
+    { id: 'payments', label: 'Payments', icon: 'dollar', keywords: ['orders', 'transactions', 'money', 'ledger', 'checkout', 'razorpay', 'paypal', 'stripe'], desc: 'Orders, transactions and provider status.' },
+    { id: 'databases', label: 'Databases', icon: 'database', keywords: ['mongo', 'mongodb', 'collections', 'data', 'tables', 'docs'], desc: 'Databases, collections and their documents.' },
+    { id: 'schema', label: 'AI Schema', icon: 'sparkles', keywords: ['generate', 'ai', 'model', 'json schema', 'validator'], desc: 'Generate MongoDB schemas from plain English.' },
+    { id: 'ai', label: 'AI Agents', icon: 'bot', keywords: ['providers', 'chat', 'playground', 'ollama', 'openai', 'models', 'settings'], desc: 'AI settings, providers and chat playground.' },
+    { id: 'theme', label: 'Theme Centre', icon: 'palette', keywords: ['appearance', 'colors', 'palette', 'ui', 'customize', 'surface'], desc: 'Curated themes, palettes and surface tuning.' },
   ];
   const searchResults = useMemo(() => {
     const q = search.trim().toLowerCase();
@@ -528,7 +529,7 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
         <nav className="admin-nav">
           {nav.slice(0, 5).map((n) => (
             <button key={n.id} onClick={() => { setTab(n.id); setMobileNav(false); }} className={tab === n.id ? 'is-active' : ''}>
-              <span className="admin-nav-icon">{n.icon}</span>{n.label}
+              <span className="admin-nav-icon"><Icon name={n.icon} size={16} /></span>{n.label}
               {n.id === 'env' && <b>NEW</b>}
             </button>
           ))}
@@ -537,17 +538,17 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
         <nav className="admin-nav">
           {nav.slice(5).map((n) => (
             <button key={n.id} onClick={() => { setTab(n.id); setMobileNav(false); }} className={tab === n.id ? 'is-active' : ''}>
-              <span className="admin-nav-icon">{n.icon}</span>{n.label}
+              <span className="admin-nav-icon"><Icon name={n.icon} size={16} /></span>{n.label}
             </button>
           ))}
         </nav>
       </aside>
       <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">☰</button>
+          <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-search" ref={searchRef}>
-            <span>⌕</span>
+            <span className="admin-search-icon"><Icon name="search" size={14} /></span>
             <input
               ref={searchInputRef}
               value={search}
@@ -577,7 +578,7 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
                 ) : (
                   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); }}>
-                      <span className="admin-search-result-icon">{n.icon}</span>{n.label}
+                      <span className="admin-search-result-icon"><Icon name={n.icon} size={14} /></span>{n.label}
                     </button>
                   ))
                 )}
@@ -597,13 +598,13 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
                 setSearch('');
                 setSearchOpen(false);
               }
-            }}>{mobileSearch ? '×' : '⌕'}</button>
+            }}>{mobileSearch ? <Icon name="x" size={16} /> : <Icon name="search" size={16} />}</button>
             <div ref={appearanceRef} className="admin-account">
-              <button className="admin-icon-button" onClick={() => { setAppearanceOpen(!appearanceOpen); setAccountOpen(false); }} aria-label="Open appearance settings" aria-expanded={appearanceOpen}>â—’</button>
+              <button className="admin-icon-button" onClick={() => { setAppearanceOpen(!appearanceOpen); setAccountOpen(false); }} aria-label="Open appearance settings" aria-expanded={appearanceOpen}><Icon name="palette" size={16} /></button>
               {appearanceOpen && <AppearancePanel theme={theme} uiMode={uiMode} onThemeChange={(value) => { setTheme(value); window.localStorage.setItem('nexus-admin-theme', value); }} onUiModeChange={(value) => { setUiMode(value); window.localStorage.setItem('nexus-admin-ui', value); }} />}
             </div>
             <div className="admin-notify" ref={notifyRef}>
-              <button className={`admin-icon-button${railOpen === 'notify' ? ' is-active' : ''}`} aria-label="Notifications" aria-expanded={railOpen === 'notify'} onClick={() => setRailOpen(railOpen === 'notify' ? null : 'notify')}>⌁{alerts.length > 0 && <b>{alerts.length > 99 ? '99+' : alerts.length}</b>}</button>
+              <button className={`admin-icon-button${railOpen === 'notify' ? ' is-active' : ''}`} aria-label="Notifications" aria-expanded={railOpen === 'notify'} onClick={() => setRailOpen(railOpen === 'notify' ? null : 'notify')}><Icon name="bell" size={16} />{alerts.length > 0 && <b>{alerts.length > 99 ? '99+' : alerts.length}</b>}</button>
               {railOpen === 'notify' && <NotifyPanel onClose={() => setRailOpen(null)} />}
             </div>
             <div className="admin-account" ref={accountRef}>
@@ -619,10 +620,10 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
                   </div>
                   <div className="account-divider" />
                   <button className="account-item" onClick={() => { setSettingsOpen(true); setAccountOpen(false); }}>
-                    <span className="account-item-icon">âš™</span><span><b>Settings</b><small>Profile, security, project & package</small></span>
+                    <span className="account-item-icon"><Icon name="settings" size={15} /></span><span><b>Settings</b><small>Profile, security, project & package</small></span>
                   </button>
                   <button className="account-item account-danger" onClick={onLogout}>
-                    <span className="account-item-icon">↪</span><span><b>Sign out</b><small>End this session</small></span>
+                    <span className="account-item-icon"><Icon name="logOut" size={15} /></span><span><b>Sign out</b><small>End this session</small></span>
                   </button>
                 </div>
               )}
@@ -652,7 +653,7 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
             <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')}>⌁ Open project overview <span>→</span></button>
+            <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>
@@ -662,9 +663,9 @@ function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; o
           </aside>
         </div>
         <div className="admin-tool-rail" ref={railRef}>
-          <button data-tip="Smart search" className={railOpen === 'search' ? 'is-active' : ''} onClick={() => { setRailOpen(railOpen === 'search' ? null : 'search'); if (railOpen !== 'search') { searchInputRef.current?.focus(); setSearchOpen(true); } }}>⌕</button>
-          <button data-tip="AI Notes" className={railOpen === 'notes' ? 'is-active' : ''} onClick={() => setRailOpen(railOpen === 'notes' ? null : 'notes')}>â–£</button>
-          <button data-tip="Screen recall" className={railOpen === 'activity' ? 'is-active' : ''} onClick={() => setRailOpen(railOpen === 'activity' ? null : 'activity')}>â—«</button>
+          <button data-tip="Smart search" className={railOpen === 'search' ? 'is-active' : ''} onClick={() => { setRailOpen(railOpen === 'search' ? null : 'search'); if (railOpen !== 'search') { searchInputRef.current?.focus(); setSearchOpen(true); } }}><Icon name="search" size={16} /></button>
+          <button data-tip="AI Notes" className={railOpen === 'notes' ? 'is-active' : ''} onClick={() => setRailOpen(railOpen === 'notes' ? null : 'notes')}><Icon name="fileText" size={16} /></button>
+          <button data-tip="Screen recall" className={railOpen === 'activity' ? 'is-active' : ''} onClick={() => setRailOpen(railOpen === 'activity' ? null : 'activity')}><Icon name="activity" size={16} /></button>
         </div>
         {railOpen && railOpen !== 'notify' && (
           <div ref={railPanelRef}>
@@ -987,7 +988,7 @@ function RailPanel({
 }: {
   open: string;
   onClose: () => void;
-  nav: { id: Tab; label: string; icon: string; keywords?: string[]; desc?: string }[];
+  nav: { id: Tab; label: string; icon: IconName; keywords?: string[]; desc?: string }[];
   tab: Tab;
   favorites: Tab[];
   onToggleFavorite: (id: Tab) => void;
@@ -1016,7 +1017,7 @@ function RailPanel({
         <>
           <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>
-          <button type="button" className="glass-chip-btn-primary w-full justify-center" onClick={onSearch}>⌕ Focus search</button>
+          <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>
         </>
@@ -1085,7 +1086,7 @@ function RailPanel({
             {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">{n.icon}</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>
             ))}
@@ -1125,12 +1126,12 @@ function NotifyPanel({ onClose }: { onClose: () => void }) {
   return (
     <div className="notify-panel" role="dialog" aria-modal="false">
       <div className="notify-head">
-        <span className="notify-head-icon">⌁</span>
+        <span className="notify-head-icon"><Icon name="bell" size={15} /></span>
         <div className="notify-head-titles">
           <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 ? '…' : '↻'}</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>
 
@@ -1184,9 +1185,9 @@ function NotifyPanel({ onClose }: { onClose: () => void }) {
             )}
           </>
         ) : loading ? (
-          <div className="notify-empty"><span className="notify-empty-icon">◍</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">◍</span><strong>All clear</strong><p>No errors or alerts right now.</p></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>
         )}
       </div>
     </div>
@@ -1275,12 +1276,12 @@ function ThemeCentre({
     <div className="space-y-6">
       <PageHead title="Theme Centre">
         <div className="heading-actions">
-          <button type="button" className="workspace-action" onClick={() => { void importJson(); }}>⇩ Import</button>
-          <button type="button" className="workspace-action" onClick={exportJson}>{copied ? 'Copied' : '⇪ Export'}</button>
-          <button type="button" className="workspace-action" onClick={resetAll}>↻ Reset all</button>
+          <button type="button" className="workspace-action" onClick={() => { void importJson(); }}><Icon name="download" size={12} /> Import</button>
+          <button type="button" className="workspace-action" onClick={exportJson}>{copied ? 'Copied' : <><Icon name="upload" size={12} /> Export</>}</button>
+          <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="◒" 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>
@@ -1309,7 +1310,7 @@ function ThemeCentre({
         <div className="flex items-center justify-between">
           <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 }); }}>✦ Randomize</button>
+            <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="glass-chip-btn" onClick={() => onCustom({ ...THEME_PRESETS[theme], active: true })}>Seed from {theme}</button>
           </div>
@@ -1364,7 +1365,7 @@ function ThemeCentre({
         <div className="flex items-center justify-between">
           <div><span className="admin-overline">PARTICLE FIELD</span><h3 className="glass-h3">Floating background dust</h3></div>
           <div className="flex items-center gap-2">
-            <button type="button" className="glass-chip-btn" onClick={() => onParticles({ colors: randomParticleColors() })}>✦ Randomize</button>
+            <button type="button" className="glass-chip-btn" onClick={() => onParticles({ colors: randomParticleColors() })}><Icon name="sparkles" size={12} /> Randomize</button>
             <button type="button" className={`custom-toggle${particles.amount > 0 ? ' is-active' : ''}`} onClick={() => onParticles({ amount: particles.amount > 0 ? 0 : 14 })}>{particles.amount > 0 ? 'On' : 'Off'}</button>
           </div>
         </div>
@@ -1456,11 +1457,11 @@ function Overview({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
       <div className="overview-hero"><div><span className="admin-overline">GOOD MORNING, ADMIN</span><h1>Your project is <em>in orbit.</em></h1><p>One calm surface for the services, configuration, data, and AI that power your Nexus application.</p></div><div className="hero-orbit-art"><span /><i /><b /><strong>NX</strong></div></div>
       <div className="overview-stat-grid"><div className="overview-stat"><span>ACTIVE SERVICES</span><strong>{running}<small>/{services.length || 4}</small></strong><b className="stat-good">● running now</b></div><div className="overview-stat"><span>HTTP REQUESTS</span><strong>{requestCount || '—'}</strong><b>since boot</b></div><div className="overview-stat"><span>UPTIME</span><strong>{metrics ? `${Math.round((metrics.uptime ?? 0) / 60)}m` : '—'}</strong><b>backend process</b></div><div className="overview-stat"><span>ENVIRONMENT</span><strong>DEV</strong><b className="stat-violet">local workspace</b></div></div>
       <section className="workspace-panel live-traffic-panel"><div className="panel-title-row"><div><span className="admin-overline">HTTP REQUESTS</span><h3>Live traffic</h3></div><span className="live-badge"><i className="status-dot good" /> LIVE</span></div><TrafficChart samples={traffic} total={requestCount} last={traffic.length ? traffic[traffic.length - 1] : 0} onNavigate={onNavigate} /></section>
-      <div className="overview-columns"><section className="workspace-panel"><div className="panel-title-row"><div><span className="admin-overline">PROJECT SURFACES</span><h3>Everything in one place</h3></div><button onClick={() => onNavigate('config')} className="text-action">View config →</button></div><div className="surface-grid"><button className="surface-card acc-blue" onClick={() => onNavigate('config')}><span className="surface-icon">{'{ }'}</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">⌁</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">▦</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">✦</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">◎</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">$</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">◇</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…' : '↻ 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 && (
@@ -1559,9 +1560,9 @@ function Processes() {
   return (
     <div className="space-y-6">
       <PageHead title="Processes">
-        <button onClick={refresh} className="glass-chip-btn">↻ refresh</button>
+        <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="◈" 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>
@@ -1771,14 +1772,14 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
     <div className="space-y-6">
       <PageHead title="Logs">
         <div className="flex items-center gap-2">
-          <button aria-label="Refresh logs" onClick={() => void refresh()} className="glass-chip-btn">↻ refresh</button>
+          <button aria-label="Refresh logs" onClick={() => void refresh()} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh</button>
           <button aria-pressed={live} onClick={() => setLive(!live)} className={`glass-chip-btn log-live-btn${live ? ' is-live' : ''}`}>{live ? '● live' : '○ paused'}</button>
-          <button aria-label="Copy filtered logs" onClick={() => void copyAll()} className="glass-chip-btn">{copied ? 'Copied' : '⇪ copy'}</button>
-          <button aria-label="Summarize logs with AI" onClick={() => void runAiSummary()} disabled={aiSummaryBusy} className="glass-chip-btn log-ai-btn">✦ {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">⌫ clear</button>
+          <button aria-label="Copy filtered logs" onClick={() => void copyAll()} className="glass-chip-btn">{copied ? 'Copied' : <><Icon name="copy" size={12} /> copy</>}</button>
+          <button aria-label="Summarize logs with AI" onClick={() => void runAiSummary()} disabled={aiSummaryBusy} className="glass-chip-btn log-ai-btn"><Icon name="sparkles" size={12} /> {aiSummaryBusy ? 'summarizing…' : 'ai summary'}</button>
+          <button aria-label="Clear all logs" onClick={async () => { try { await clearLogs(); await refresh(); } catch { /* supervisor may not be reachable */ } }} className="glass-chip-btn-danger"><Icon name="trash" size={12} /> clear</button>
         </div>
       </PageHead>
-      <PageHero kicker="ERROR CONSOLE" title={<>Every failure, <em>in one stream.</em></>} desc="Aggregated stdout, stderr and supervisor events from every service — live as the supervisor records them, filterable and searchable." glyph="▤" 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?
@@ -1811,11 +1812,11 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
         {aiSummaryOpen && (
           <div className="log-ai-panel">
             <div className="log-ai-head">
-              <span className="log-ai-title">✦ 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">â–  stop</button>}
-                {!aiSummaryBusy && aiSummary && <button onClick={() => void copyAiSummary()} className="glass-chip-btn">⇪ copy</button>}
-                <button onClick={() => { setAiSummaryOpen(false); setAiSummary(''); setAiSummaryErr(''); }} className="glass-chip-btn">✕ dismiss</button>
+                {aiSummaryBusy && <button onClick={stopAiSummary} className="glass-chip-btn-danger"><Icon name="square" size={10} /> stop</button>}
+                {!aiSummaryBusy && aiSummary && <button onClick={() => void copyAiSummary()} className="glass-chip-btn"><Icon name="copy" size={12} /> copy</button>}
+                <button onClick={() => { setAiSummaryOpen(false); setAiSummary(''); setAiSummaryErr(''); }} className="glass-chip-btn"><Icon name="x" size={12} /> dismiss</button>
               </div>
             </div>
             {aiSummaryErr && (
@@ -1840,7 +1841,7 @@ function Logs({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
           </div>
           {ordered.length === 0 ? (
             <div className="log-empty">
-              <span className="log-empty-glyph">â–¤</span>
+              <span className="log-empty-glyph"><Icon name="terminal" size={26} /></span>
               <strong>No log lines match the current filters.</strong>
               <p>Try widening the level filter or clearing the search text.</p>
             </div>
@@ -1941,7 +1942,7 @@ 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…' : '↻ 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 ? (
@@ -1983,13 +1984,13 @@ function AiAgents({ toggle }: { toggle: ToggleStyle }) {
   return (
     <div className="space-y-6">
       <PageHead title="AI Agents" />
-      <PageHero kicker="AI WORKSPACE" title={<>Agents, <em>at your command.</em></>} desc="Manage AI settings, configure providers with API keys, and test agents with a live chat playground." glyph="✦" art="spark" />
+      <PageHero kicker="AI WORKSPACE" title={<>Agents, <em>at your command.</em></>} desc="Manage AI settings, configure providers with API keys, and test agents with a live chat playground." glyph="sparkles" art="spark" />
 
       {/* Sub-tab nav */}
       <div className="workspace-tabs">
-        {([['settings', 'AI Settings', '⚙'], ['providers', 'AI Providers', '◇'], ['chat', 'Chat Playground', '✦']] as const).map(([id, label, icon]) => (
+        {([['settings', 'AI Settings', 'settings'], ['providers', 'AI Providers', 'grid'], ['chat', 'Chat Playground', 'message']] as const).map(([id, label, icon]) => (
           <button key={id} onClick={() => setAiTab(id)} className={aiTab === id ? 'is-active' : ''}>
-            <span className="mr-1.5">{icon}</span>{label}
+            <span className="mr-1.5"><Icon name={icon} size={13} /></span>{label}
           </button>
         ))}
       </div>
@@ -2089,28 +2090,28 @@ const BUILTIN_PROVIDER_IDS = new Set([
   'openrouter', 'lmstudio', 'alephalpha', 'stability', 'azure',
 ]);
 
-/** Display metadata for known providers: a glyph + an HSL hue for the avatar accent. */
-const PROVIDER_META: Record<string, { glyph: string; hue: number }> = {
-  ollama: { glyph: '🦙', hue: 152 },
-  openai: { glyph: '✺', hue: 165 },
-  anthropic: { glyph: '✦', hue: 265 },
-  google: { glyph: '✸', hue: 217 },
-  groq: { glyph: 'âš¡', hue: 38 },
-  mistral: { glyph: '🌬', hue: 210 },
-  cohere: { glyph: 'â—ˆ', hue: 190 },
-  together: { glyph: '⬢', hue: 230 },
-  fireworks: { glyph: '✦', hue: 12 },
-  deepseek: { glyph: 'â—‡', hue: 200 },
-  perplexity: { glyph: 'â—‰', hue: 280 },
-  xai: { glyph: '✕', hue: 0 },
-  replicate: { glyph: '⟳', hue: 160 },
-  huggingface: { glyph: '🤗', hue: 25 },
-  nvidia: { glyph: 'â–²', hue: 120 },
-  openrouter: { glyph: '⇄', hue: 240 },
-  lmstudio: { glyph: '⌂', hue: 180 },
-  alephalpha: { glyph: 'Α', hue: 300 },
-  stability: { glyph: '✺', hue: 320 },
-  azure: { glyph: '☁', hue: 200 },
+/** Display metadata for known providers: an icon + an HSL hue for the avatar accent. */
+const PROVIDER_META: Record<string, { glyph: IconName | string; hue: number }> = {
+  ollama: { glyph: 'bot', hue: 152 },
+  openai: { glyph: 'sparkles', hue: 165 },
+  anthropic: { glyph: 'message', hue: 265 },
+  google: { glyph: 'globe', hue: 217 },
+  groq: { glyph: 'zap', hue: 38 },
+  mistral: { glyph: 'wind', hue: 210 },
+  cohere: { glyph: 'layers', hue: 190 },
+  together: { glyph: 'users', hue: 230 },
+  fireworks: { glyph: 'flame', hue: 12 },
+  deepseek: { glyph: 'search', hue: 200 },
+  perplexity: { glyph: 'helpCircle', hue: 280 },
+  xai: { glyph: 'x', hue: 0 },
+  replicate: { glyph: 'repeat', hue: 160 },
+  huggingface: { glyph: 'smile', hue: 25 },
+  nvidia: { glyph: 'shield', hue: 120 },
+  openrouter: { glyph: 'gitFork', hue: 240 },
+  lmstudio: { glyph: 'monitor', hue: 180 },
+  alephalpha: { glyph: 'bookOpen', hue: 300 },
+  stability: { glyph: 'image', hue: 320 },
+  azure: { glyph: 'cloud', hue: 200 },
 };
 
 /** Derive a deterministic HSL hue from an arbitrary string (for custom provider avatars). */
@@ -2120,7 +2121,7 @@ function hashHue(s: string): number {
   return h;
 }
 
-function providerMeta(id: string): { glyph: string; hue: number } {
+function providerMeta(id: string): { glyph: IconName | string; hue: number } {
   if (PROVIDER_META[id]) return PROVIDER_META[id]!;
   const letter = id.charAt(0).toUpperCase() || '?';
   return { glyph: letter, hue: hashHue(id) };
@@ -2351,17 +2352,20 @@ function AiProviders({ toggle }: { toggle: ToggleStyle }) {
 
         {/* Filter bar */}
         <div className="provider-filter-bar">
-          <input
-            className="glass-input !py-1.5 text-sm w-full sm:w-64"
-            placeholder="⌕  search providers…"
-            type="search"
-            autoComplete="off"
-            autoCapitalize="none"
-            autoCorrect="off"
-            spellCheck={false}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-          />
+          <div className="relative flex-1 sm:w-64">
+            <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…"
+              type="search"
+              autoComplete="off"
+              autoCapitalize="none"
+              autoCorrect="off"
+              spellCheck={false}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+          </div>
           <div className="flex flex-wrap gap-1.5">
             {filterPills.map(([id, label, count]) => (
               <button
@@ -2497,7 +2501,7 @@ function ProviderCard({ provider, toggle, anim, busy, isCustom, testing, testRes
     <div className={`provider-card ${cardClass}${anim === 'out' ? ' is-switch-out' : ''}${anim === 'in' ? ' is-switch-in' : ''}`} style={{ ['--avatar-hue' as string]: String(meta.hue) }}>
       {/* Header: avatar + label/id + toggle */}
       <div className="flex items-center gap-2.5">
-        <span className="provider-avatar" style={{ ['--avatar-hue' as string]: String(meta.hue) }}>{meta.glyph}</span>
+        <span className="provider-avatar" style={{ ['--avatar-hue' as string]: String(meta.hue) }}>{isIconName(meta.glyph) ? <Icon name={meta.glyph} size={16} /> : meta.glyph}</span>
         <div className="flex-1 min-w-0">
           <div className="font-medium text-sm text-slate-200 truncate">{provider.label}</div>
           <div className="text-[11px] text-slate-500 font-mono truncate">{provider.id}</div>
@@ -2553,7 +2557,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>
-              <button type="button" onClick={() => setEditingModel(true)} disabled={busy} className="glass-chip-btn shrink-0 text-[10px]" title="Edit model">✎</button>
+              <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>
             </>
           )}
         </div>
@@ -2574,7 +2578,7 @@ function ProviderCard({ provider, toggle, anim, busy, isCustom, testing, testRes
       {/* Footer: baseUrl + website + set key */}
       <div className="flex flex-wrap items-center gap-1.5">
         <code className="text-[10px] text-slate-500 truncate flex-1 min-w-[100px]">{provider.baseUrl}</code>
-        <SafeGotoLink href={websiteFromBaseUrl(provider.baseUrl)} className="glass-chip-btn shrink-0 text-[10px]">↗</SafeGotoLink>
+        <SafeGotoLink href={websiteFromBaseUrl(provider.baseUrl)} className="glass-chip-btn shrink-0 text-[10px]"><Icon name="externalLink" size={11} /></SafeGotoLink>
         <button
           type="button"
           onClick={onOpenKey}
@@ -2582,14 +2586,14 @@ function ProviderCard({ provider, toggle, anim, busy, isCustom, testing, testRes
           className="glass-chip-btn shrink-0 text-[10px]"
         >key</button>
         {isCustom && (
-          <button type="button" onClick={onRemove} disabled={busy} className="glass-chip-btn-danger shrink-0 text-[10px]" title="Remove provider">✕</button>
+          <button type="button" onClick={onRemove} disabled={busy} className="glass-chip-btn-danger shrink-0 text-[10px]" title="Remove provider"><Icon name="trash" size={11} /></button>
         )}
       </div>
 
       {/* 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…' : '⚡ test'}
+          {testing ? 'testing…' : <><Icon name="zap" size={11} /> test</>}
         </button>
         {testResult && (
           testResult.ok ? (
@@ -2951,7 +2955,7 @@ function AiChatPlayground() {
         <div className="flex items-center justify-between">
           <h3 className="glass-h3">Chat playground</h3>
           <div className="flex gap-2">
-            <button onClick={checkAi} disabled={streaming} className="glass-chip-btn">↻ refresh models</button>
+            <button onClick={checkAi} disabled={streaming} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh models</button>
             <button onClick={clearChat} disabled={streaming} className="glass-chip-btn">clear</button>
           </div>
         </div>
@@ -2980,7 +2984,7 @@ function AiChatPlayground() {
         </div>
 
         {!provider && (
-          <p className="text-xs text-amber-400">âš  Select a provider above. If no providers are listed, go to the AI Providers tab and enable one, or click "refresh models" to detect the AI server's available providers.</p>
+          <p className="text-xs text-amber-400"><Icon name="warning" size={12} className="mb-0.5 mr-1 inline" /> Select a provider above. If no providers are listed, go to the AI Providers tab and enable one, or click "refresh models" to detect the AI server's available providers.</p>
         )}
 
         {/* System prompt */}
@@ -3094,7 +3098,7 @@ function Config({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
 
   return (
     <div className="admin-view-stack">
-      <PageHead title="Configuration"><div className="heading-actions"><span className="restart-badge">RESTART REQUIRED AFTER SAVE</span><button onClick={load} className="workspace-action">↻ Reload</button></div></PageHead>
+      <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">
@@ -3154,8 +3158,8 @@ function Environment({ onNavigate }: { onNavigate?: (tab: Tab) => void }) {
   const save = async () => { setBusy(true); setMsg(''); try { await putAdminEnv(entries, file); setMsg(`Saved ${file}. Restart services to apply environment changes.`); setRestartDialog(true); await load(); } catch (e: any) { setMsg(`Error: ${e?.message ?? e}`); } finally { setBusy(false); } };
   return (
     <div className="admin-view-stack">
-      <PageHead title="Environment"><div className="heading-actions"><span className="secret-badge">SECRETS MASKED</span><button onClick={() => load()} className="workspace-action">↻ 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">⌁</i><span>PRIVATE</span></div></div>
+      <PageHead title="Environment"><div className="heading-actions"><span className="secret-badge">SECRETS MASKED</span><button onClick={() => load()} className="workspace-action"><Icon name="refresh" size={12} /> Reload</button></div></PageHead>
+      <div className="config-intro env-intro"><div><span className="admin-overline">LOCAL ENVIRONMENT · {data?.path ?? '.env'}</span><h1>Your environment, <em>under control.</em></h1><p>Manage project variables as key/value pairs. Secret values stay on disk and are never returned to the browser.</p></div><div className="env-lock-art"><i className="env-lock-glyph"><Icon name="lock" size={26} /></i><span>PRIVATE</span></div></div>
       <section className="workspace-panel config-panel"><div className="panel-title-row"><div><span className="admin-overline">{file.toUpperCase()} FILE · PRESERVES COMMENTS</span><h3>Environment variables</h3></div><button onClick={addVariable} className="workspace-action">+ Add variable</button></div><div className="env-add-bar">
         <input value={newKey} onChange={(event) => setNewKey(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') addVariable(); }} placeholder="NEXUS_SERVER_PORT" />
         <div className="env-value-wrap"><input value={newValue} onChange={(event) => setNewValue(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') addVariable(); }} placeholder="value" /><span className="secret-mark">{newKey && /SECRET|PASSWORD|PASS|TOKEN|PRIVATE|API_KEY|CLIENT_SECRET|ACCESS_KEY|KEY_SECRET/i.test(newKey) ? '●' : '○'}</span></div>
@@ -3200,7 +3204,7 @@ function Plugins() {
   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="◇" 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">
@@ -3276,7 +3280,7 @@ function Users({ currentUserEmail }: { currentUserEmail?: string }) {
   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="◎" 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">
@@ -3476,7 +3480,7 @@ function Monitoring() {
   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="⌁" 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>
@@ -3574,10 +3578,10 @@ function Payments({ toggle }: { toggle: ToggleStyle }) {
             <option value="all" className="bg-slate-900">All providers</option>
             {ALL_PROVIDERS.map((p) => <option key={p} value={p} className="bg-slate-900">{p}</option>)}
           </select>
-          <button onClick={() => load()} className="glass-chip-btn">↻ refresh</button>
+          <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="$" 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">
         {([
@@ -3720,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…' : '↻ 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">
@@ -3742,7 +3746,7 @@ function TestConsole({ toggle, status, onRun, onNotice, onCreated }: { toggle: T
                     <div className="text-[11px] text-slate-500 font-mono truncate">{p.sandbox ? 'sandbox mode' : 'live mode'}</div>
                   </div>
                   <span className={p.ok ? 'dot-ok' : 'dot-bad'} title={p.ok ? 'working' : 'not working'} />
-                  <button onClick={() => openKeys(p)} className="glass-chip-btn shrink-0 text-[10px]" title="Set API key / secret">🔑 keys</button>
+                  <button onClick={() => openKeys(p)} className="glass-chip-btn shrink-0 text-[10px]" title="Set API key / secret"><Icon name="key" size={11} /> keys</button>
                 </div>
                 <div className="flex flex-wrap items-center gap-1.5">
                   {p.enabled
@@ -3934,9 +3938,9 @@ function Databases() {
   return (
     <div className="space-y-6">
       <PageHead title="Databases">
-        <button onClick={refresh} className="glass-chip-btn">↻ refresh</button>
+        <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="▦" 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)} />
@@ -3948,7 +3952,7 @@ function Databases() {
           <div key={db.name} className="glass-card">
             <div className="flex items-center gap-3">
               <button onClick={() => setExpanded(expanded === db.name ? null : db.name)} className="cursor-pointer font-mono text-base font-semibold text-slate-100 transition-colors hover:text-indigo-300">
-                <span className={`mr-1 inline-block transition-transform ${expanded === db.name ? 'rotate-90' : ''}`}>â–¸</span>{db.name}
+                <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>
@@ -4047,7 +4051,7 @@ function Schema() {
   return (
     <div className="space-y-6">
       <PageHead title="AI Schema Creation" />
-      <PageHero kicker="AI WORKSPACE" title={<>Schemas, <em>born from language.</em></>} desc="Describe the data you need in plain English and let the model return a validated MongoDB schema you can review before it's live." glyph="✦" art="bolt" />
+      <PageHero kicker="AI WORKSPACE" title={<>Schemas, <em>born from language.</em></>} desc="Describe the data you need in plain English and let the model return a validated MongoDB schema you can review before it's live." glyph="sparkles" art="bolt" />
       <p className="text-sm text-slate-400">Describe the data in plain English — the AI returns a MongoDB <code className="rounded bg-white/10 px-1 font-mono text-xs">$jsonSchema</code> validator plus a field list, which you review and create as a validator-protected collection.</p>
 
       <section className="glass-card space-y-3">

package/src/alertCenter.tsx

@@ -1,4 +1,5 @@
 import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
+import { Icon, type IconName } from './icons.js';
 
 export type AlertKind = 'ok' | 'err' | 'warn';
 
@@ -127,7 +128,7 @@ export function useAdminAlert(source: string): [
   return [msg, set];
 }
 
-const TOAST_ICONS: Record<AlertKind, string> = { ok: '✓', err: '✕', warn: '!' };
+const TOAST_ICONS: Record<AlertKind, IconName> = { ok: 'check', err: 'x', warn: 'alertCircle' };
 
 /** Floating alert popups, top-right, themed via the surrounding admin shell. */
 export function ToastStack() {
@@ -137,7 +138,7 @@ export function ToastStack() {
     <div className="admin-toasts" role="region" aria-label="Notifications">
       {toasts.map((t) => (
         <div key={t.id} className={`admin-toast is-${t.kind}`} role="status">
-          <span className="admin-toast-icon">{TOAST_ICONS[t.kind]}</span>
+          <span className="admin-toast-icon"><Icon name={TOAST_ICONS[t.kind]} size={14} /></span>
           <span className="admin-toast-body">
             <b>{t.message}</b>
             <small>{t.source} · {t.at}</small>

package/src/api.ts

@@ -1,6 +1,6 @@
 // Admin API client. Auth/admin/plugin calls go to the backend (proxied by Vite
 // in dev); process-control calls go to the supervisor control API
-// (default :7474, auto-allotted upward when busy — the backend reports the real port).
+// (default :7474, auto-allotted upward when busy — the backend reports the real port).
 
 const SUPERVISOR_FALLBACK = (import.meta.env.VITE_SUPERVISOR_URL as string | undefined) ?? 'http://localhost:7474';
 
@@ -33,7 +33,7 @@ export function getAccessToken() { return accessToken; }
 
 async function refreshCsrf(): Promise<void> {
   // The server rotates the CSRF cookie on EVERY safe request, so a cached
-  // token goes stale the moment any other GET runs (status polling, tables…).
+  // token goes stale the moment any other GET runs (status polling, tables…).
   // Always re-fetch so the header matches the current cookie.
   const r = await fetch('/csrf-token', { credentials: 'include' });
   csrfToken = (await r.json()).token ?? '';
@@ -59,15 +59,15 @@ async function authErrorMessage(r: Response, fallback: string): Promise<string>
     const body = await r.json();
     const msg = body?.error?.message ?? body?.message ?? body?.detail;
     if (typeof msg === 'string' && msg.trim()) return msg;
-  } catch { /* non-JSON body — fall through */ }
+  } catch { /* non-JSON body — fall through */ }
   switch (r.status) {
-    case 400: return 'Invalid request — please check the form.';
+    case 400: return 'Invalid request — please check the form.';
     case 401: return 'Invalid email or password.';
     case 403: return 'Access denied.';
-    case 404: return 'Auth endpoint not found — is the backend running?';
+    case 404: return 'Auth endpoint not found — is the backend running?';
     case 409: return 'A user with that email already exists.';
-    case 429: return 'Too many attempts — please wait a moment and retry.';
-    case 500: return 'Server error — please try again later.';
+    case 429: return 'Too many attempts — please wait a moment and retry.';
+    case 500: return 'Server error — please try again later.';
     default: return `${fallback} (HTTP ${r.status})`;
   }
 }
@@ -83,7 +83,7 @@ export async function login(email: string, password: string): Promise<{ user: an
       body: JSON.stringify({ email, password }),
     });
   } catch {
-    throw new Error('Cannot reach the backend — is the server running?');
+    throw new Error('Cannot reach the backend — is the server running?');
   }
   if (!r.ok) throw new Error(await authErrorMessage(r, 'Login failed'));
   const data = await r.json();
@@ -103,7 +103,7 @@ export async function registerAndLogin(email: string, password: string, name: st
       body: JSON.stringify({ email, password, name }),
     });
   } catch {
-    throw new Error('Cannot reach the backend — is the server running?');
+    throw new Error('Cannot reach the backend — is the server running?');
   }
   if (!r.ok) throw new Error(await authErrorMessage(r, 'Registration failed'));
   const data = await r.json();
@@ -118,7 +118,7 @@ let refreshInFlight: Promise<boolean> | null = null;
  * Restore the admin session from the HttpOnly refresh cookie (app boot).
  * /auth/refresh returns a fresh access token; the user is then fetched via
  * /auth/me. Single-flight so React StrictMode's double effect-run issues one
- * network request — the backend rotates refresh tokens and revokes a session
+ * network request — the backend rotates refresh tokens and revokes a session
  * family on reuse, so concurrent refreshes would log the user out.
  */
 export async function refresh(): Promise<boolean> {
@@ -394,7 +394,7 @@ export interface AiProviderTestResult {
   checkedAt: string;
 }
 
-/** POST /admin/ai/providers/:id/test — probe a single provider (lists models). */
+/** POST /admin/ai/providers/:id/test — probe a single provider (lists models). */
 export async function testAiProvider(id: string): Promise<AiProviderTestResult> {
   await refreshCsrf();
   return adminFetch(`/admin/ai/providers/${encodeURIComponent(id)}/test`, {

package/src/icons.tsx

@@ -0,0 +1,104 @@
+import type { ReactNode, SVGProps } from 'react';
+
+export type IconName =
+  | 'house' | 'server' | 'terminal' | 'braces' | 'key' | 'puzzle' | 'users' | 'activity'
+  | 'dollar' | 'database' | 'sparkles' | 'bot' | 'palette'
+  | 'search' | 'bell' | 'settings' | 'logOut' | 'menu' | 'x' | 'check' | 'chevronRight'
+  | 'arrowRight' | 'refresh' | 'copy' | 'externalLink' | 'pencil' | 'trash' | 'plus'
+  | 'square' | 'chevronDown' | 'chevronUp' | 'zap' | 'warning' | 'lock' | 'download'
+  | 'upload' | 'globe' | 'cloud' | 'flame' | 'wind' | 'smile' | 'monitor' | 'image'
+  | 'repeat' | 'shield' | 'helpCircle' | 'bookOpen' | 'layers' | 'fileText' | 'message'
+  | 'gitFork' | 'grid' | 'info' | 'alertCircle' | 'clock' | 'triangle' | 'more' | 'send';
+
+const ICONS: Record<IconName, ReactNode> = {
+  house: <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><polyline points="9 22 9 12 15 12 15 22" /></>,
+  server: <><rect x="2" y="2" width="20" height="8" rx="2" /><rect x="2" y="14" width="20" height="8" rx="2" /><line x1="6" y1="6" x2="6.01" y2="6" /><line x1="6" y1="18" x2="6.01" y2="18" /></>,
+  terminal: <><polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /></>,
+  braces: <><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" /><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" /></>,
+  key: <><path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4" /></>,
+  puzzle: <><path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02z" /></>,
+  users: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></>,
+  activity: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />,
+  dollar: <><line x1="12" y1="1" x2="12" y2="23" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>,
+  database: <><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5V19A9 3 0 0 0 21 19V5" /><path d="M3 12A9 3 0 0 0 21 12" /></>,
+  sparkles: <><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" /><path d="M5 3v4" /><path d="M19 17v4" /><path d="M3 5h4" /><path d="M17 19h4" /></>,
+  bot: <><path d="M12 8V4H8" /><rect width="16" height="12" x="4" y="8" rx="2" /><path d="M2 14h2" /><path d="M20 14h2" /><path d="M15 13v2" /><path d="M9 13v2" /></>,
+  palette: <><circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" /><circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" /><circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" /><circle cx="6.5" cy="12.5" r="0.5" fill="currentColor" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></>,
+  search: <><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></>,
+  bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" /></>,
+  settings: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" /></>,
+  logOut: <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" /></>,
+  menu: <><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></>,
+  x: <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>,
+  check: <polyline points="20 6 9 17 4 12" />,
+  chevronRight: <polyline points="9 18 15 12 9 6" />,
+  arrowRight: <><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></>,
+  refresh: <><polyline points="23 4 23 10 17 10" /><polyline points="1 20 1 14 7 14" /><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" /></>,
+  copy: <><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></>,
+  externalLink: <><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" /></>,
+  pencil: <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />,
+  trash: <><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></>,
+  plus: <><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></>,
+  square: <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />,
+  chevronDown: <polyline points="6 9 12 15 18 9" />,
+  chevronUp: <polyline points="18 15 12 9 6 15" />,
+  zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
+  warning: <><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></>,
+  lock: <><rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></>,
+  download: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></>,
+  upload: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" /></>,
+  globe: <><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></>,
+  cloud: <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />,
+  flame: <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />,
+  wind: <><path d="M9.59 4.59A2 2 0 1 1 11 8H2" /><path d="M12.59 16.59A2 2 0 1 0 14 13H2" /><path d="M17.73 8.73A2.5 2.5 0 1 1 19.5 12H2" /></>,
+  smile: <><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" y1="9" x2="9.01" y2="9" /><line x1="15" y1="9" x2="15.01" y2="9" /></>,
+  monitor: <><rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" /></>,
+  image: <><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" /></>,
+  repeat: <><polyline points="17 1 21 5 17 9" /><path d="M3 11V9a4 4 0 0 1 4-4h14" /><polyline points="7 23 3 19 7 15" /><path d="M21 13v2a4 4 0 0 1-4 4H3" /></>,
+  shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
+  helpCircle: <><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><line x1="12" y1="17" x2="12.01" y2="17" /></>,
+  bookOpen: <><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></>,
+  layers: <><polygon points="12 2 2 7 12 12 22 7 12 2" /><polyline points="2 17 12 22 22 17" /><polyline points="2 12 12 17 22 12" /></>,
+  fileText: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /></>,
+  message: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />,
+  gitFork: <><circle cx="12" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><circle cx="18" cy="6" r="3" /><path d="M18 9v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9" /><path d="M12 12v3" /></>,
+  grid: <><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></>,
+  info: <><circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" /></>,
+  alertCircle: <><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></>,
+  clock: <><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></>,
+  triangle: <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z" />,
+  more: <><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></>,
+  send: <><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></>,
+};
+
+const ICON_NAMES = new Set<string>(Object.keys(ICONS));
+
+export function isIconName(value: string): value is IconName {
+  return ICON_NAMES.has(value);
+}
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  name: IconName;
+  size?: number;
+}
+
+export function Icon({ name, size = 16, className, style, ...rest }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      style={{ display: 'block', flexShrink: 0, ...(style as React.CSSProperties) }}
+      aria-hidden="true"
+      {...rest}
+    >
+      {ICONS[name]}
+    </svg>
+  );
+}

package/src/index.css

@@ -747,6 +747,7 @@ pointer-events: none;
   background: transparent;
   text-align: left;
   font-size: 0.7rem;
+  line-height: 1;
   transition: 160ms ease;
 }
 
@@ -759,12 +760,24 @@ pointer-events: none;
 }
 
 .admin-nav-icon {
-  display: grid;
-  width: 1.15rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex: 0 0 1.25rem;
   place-items: center;
   color: #62bfff;
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-  font-size: 0.74rem;
+  line-height: 0;
+}
+
+.admin-search-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  line-height: 0;
+  color: #6e87a5;
 }
 
 .admin-nav button b {
@@ -981,14 +994,17 @@ pointer-events: none;
 }
 
 .admin-search-result-icon {
-  display: grid;
-  place-items: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 1.4rem;
   height: 1.4rem;
+  flex: 0 0 1.4rem;
+  place-items: center;
   border-radius: 0.35rem;
   color: #8fb8e4;
   background: rgba(84, 183, 255, 0.1);
-  font-size: 0.6rem;
+  line-height: 0;
 }
 
 .admin-search-empty {
@@ -1032,12 +1048,14 @@ pointer-events: none;
 .admin-icon-button,
 .admin-user-avatar {
   position: relative;
-  display: grid;
-  place-items: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid rgba(112, 168, 228, 0.2);
   border-radius: 0.5rem;
   color: #9bb4d0;
   background: rgba(25, 57, 95, 0.34);
+  line-height: 0;
 }
 
 .admin-icon-button {
@@ -1424,7 +1442,7 @@ pointer-events: none;
   border-radius: 50%;
 }
 
-/* bars — three rising service bars */
+/* bars — three rising service bars */
 .hero-art--bars {
   color: #5ef0b3;
   border: 1px solid rgba(94, 240, 179, 0.32);
@@ -1435,7 +1453,7 @@ pointer-events: none;
 .hero-art--bars .ha-b { left: 43%; bottom: 30%; width: 6px; height: 46%; background: rgba(94, 240, 179, 0.7); border-radius: 3px 3px 0 0; }
 .hero-art--bars .ha-c { left: 58%; bottom: 30%; width: 6px; height: 26%; background: rgba(94, 240, 179, 0.45); border-radius: 3px 3px 0 0; }
 
-/* stack — stacked plugin tiles */
+/* stack — stacked plugin tiles */
 .hero-art--stack {
   color: #ffc46b;
   border: 1px solid rgba(255, 196, 107, 0.32);
@@ -1449,7 +1467,7 @@ pointer-events: none;
 .hero-art--stack .ha-b { bottom: 45%; left: 21%; width: 50%; background: rgba(255, 196, 107, 0.65); }
 .hero-art--stack .ha-c { bottom: 60%; left: 21%; width: 34%; background: rgba(255, 196, 107, 0.9); box-shadow: 0 0 8px rgba(255, 196, 107, 0.6); }
 
-/* people — clients ringed around a center */
+/* people — clients ringed around a center */
 .hero-art--people {
   color: #c8b4ff;
   border: 1px solid rgba(200, 180, 255, 0.32);
@@ -1460,7 +1478,7 @@ pointer-events: none;
 .hero-art--people .ha-b { top: 66%; left: 22%; width: 12px; height: 12px; background: rgba(160, 130, 240, 0.8); box-shadow: 0 0 8px rgba(160, 130, 240, 0.7); }
 .hero-art--people .ha-c { bottom: 22%; right: 24%; width: 8px; height: 8px; background: rgba(120, 200, 255, 0.8); box-shadow: 0 0 8px rgba(120, 200, 255, 0.7); }
 
-/* wave — pulsing heartbeat line */
+/* wave — pulsing heartbeat line */
 .hero-art--wave {
   color: #6fe8a8;
   border: 1px solid rgba(111, 232, 168, 0.32);
@@ -1472,7 +1490,7 @@ pointer-events: none;
 .hero-art--wave .ha-b { left: 44%; top: 26%; width: 8px; height: 26%; background: rgba(111, 232, 168, 0.55); transform: rotate(20deg); }
 .hero-art--wave .ha-c { left: 44%; bottom: 26%; width: 8px; height: 26%; background: rgba(111, 232, 168, 0.85); box-shadow: 0 0 8px rgba(111, 232, 168, 0.6); transform: rotate(-20deg); }
 
-/* coins — stacked cylinder of payment */
+/* coins — stacked cylinder of payment */
 .hero-art--coins {
   color: #ffd479;
   border: 1px solid rgba(255, 212, 121, 0.32);
@@ -1486,7 +1504,7 @@ pointer-events: none;
 .hero-art--coins .ha-b { bottom: 43%; background: rgba(255, 212, 121, 0.75); }
 .hero-art--coins .ha-c { bottom: 58%; background: rgba(255, 212, 121, 0.95); box-shadow: 0 0 8px rgba(255, 212, 121, 0.7); }
 
-/* cubes — stacked database shelves */
+/* cubes — stacked database shelves */
 .hero-art--cubes {
   color: #6fd6ff;
   border: 1px solid rgba(111, 214, 255, 0.32);
@@ -1500,7 +1518,7 @@ pointer-events: none;
 .hero-art--cubes .ha-b { top: 42%; left: 27%; background: rgba(111, 214, 255, 0.75); transform: skew(-10deg); }
 .hero-art--cubes .ha-c { top: 58%; left: 27%; background: rgba(111, 214, 255, 0.95); box-shadow: 0 0 8px rgba(111, 214, 255, 0.7); transform: skew(-10deg); }
 
-/* spark — four-petal bloom around a center */
+/* spark — four-petal bloom around a center */
 .hero-art--spark {
   color: #ff9fd6;
   border: 1px solid rgba(255, 159, 214, 0.32);
@@ -2456,7 +2474,7 @@ pointer-events: none;
 .account-divider { height: 1px; margin: 0.55rem 0; background: rgba(112, 168, 228, 0.14); }
 .account-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.5rem; border: 1px solid transparent; border-radius: 0.5rem; color: #9ab2ce; background: transparent; text-align: left; }
 .account-item:hover { border-color: rgba(84, 183, 255, 0.26); color: #edf8ff; background: rgba(61, 139, 220, 0.14); }
-.account-item-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 0.4rem; color: #61c7ff; background: rgba(40, 110, 178, 0.25); font-size: 0.7rem; }
+.account-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 0.4rem; color: #61c7ff; background: rgba(40, 110, 178, 0.25); line-height: 0; }
 .account-item > span:last-child { display: flex; flex-direction: column; gap: 0.1rem; }
 .account-item b { color: inherit; font-size: 0.62rem; font-weight: 600; }
 .account-item small { color: #6f89a7; font-size: 0.5rem; }
@@ -2487,7 +2505,7 @@ pointer-events: none;
 }
 
 .admin-tool-rail { position: fixed; top: 50%; right: 0.8rem; z-index: 4; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.55rem 0.4rem; transform: translateY(-50%); border: 1px solid rgba(83, 177, 255, 0.35); border-radius: 999px; background: rgba(6, 19, 39, 0.78); box-shadow: 0 0 28px rgba(45, 125, 221, 0.18); backdrop-filter: blur(18px); }
-.admin-tool-rail button { position: relative; display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; color: #9fc7ec; background: transparent; font-size: 0.78rem; cursor: pointer; }
+.admin-tool-rail button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; color: #9fc7ec; background: transparent; line-height: 0; cursor: pointer; }
 .admin-tool-rail button:hover { color: white; background: rgba(71, 161, 247, 0.2); }
 .admin-tool-rail button.is-active { color: white; background: linear-gradient(135deg, rgba(38, 130, 225, 0.55), rgba(90, 67, 183, 0.45)); box-shadow: 0 0 12px rgba(45, 125, 221, 0.3); }
 .admin-tool-rail button[data-tip]::after {
@@ -2533,7 +2551,7 @@ pointer-events: none;
 .rail-list--nav li { padding: 0; }
 .rail-list--nav li button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.45rem; border: 0; border-radius: 0.4rem; color: #9ab2ce; background: transparent; text-align: left; cursor: pointer; }
 .rail-list--nav li button:hover, .rail-list--nav li button.is-on { color: #edf8ff; background: rgba(61, 139, 220, 0.14); }
-.rail-fav-icon { width: 18px; text-align: center; }
+.rail-fav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; line-height: 0; }
 .rail-fav-label { flex: 1; font-size: 0.66rem; }
 .rail-fav-check { color: #61c7ff; font-size: 0.66rem; }
 .rail-appearance { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
@@ -3477,5 +3495,45 @@ pointer-events: none;
 }
 .safe-goto-link:hover { color: #bfdbfe; text-decoration: underline; }
 
+/* ===== Inline SVG icon system (see src/icons.tsx) ===== */
+.admin-shell svg,
+.admin-login svg {
+  flex-shrink: 0;
+}
+
+.admin-nav-icon svg,
+.admin-search-result-icon svg,
+.rail-fav-icon svg,
+.account-item-icon svg,
+.notify-head-icon svg,
+.notify-empty-icon svg,
+.log-ai-title svg,
+.provider-avatar svg {
+  display: block;
+}
+
+.hero-art strong svg,
+.hero-orbit-art strong svg,
+.env-lock-glyph svg {
+  display: block;
+  filter: drop-shadow(0 0 8px currentColor);
+}
+
+.surface-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.log-empty-glyph svg {
+  display: block;
+  opacity: 0.85;
+  color: var(--admin-muted, #98aec9);
+}
+
+.admin-topbar .admin-icon-button svg,
+.admin-tool-rail button svg {
+  display: block;
+}
+