@bhooai/nexus-cli 2.0.5 → 2.0.7

package/templates/base/apps/admin/src/components/shell/RailPanel.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { useEffect } from 'react';
+import type { Tab, AdminTheme, UiMode } from '../../lib/types.js';
+import { Icon, type IconName } from '../../icons.js';
+
+export function RailPanel({
+  open,
+  onClose,
+  nav,
+  tab,
+  favorites,
+  onToggleFavorite,
+  onGo,
+  notes,
+  onNotes,
+  activity,
+  onClearActivity,
+  onSearch,
+  theme,
+  onThemeChange,
+  uiMode,
+  onUiModeChange,
+}: {
+  open: string;
+  onClose: () => void;
+  nav: { id: Tab; label: string; icon: IconName; keywords?: string[]; desc?: string }[];
+  tab: Tab;
+  favorites: Tab[];
+  onToggleFavorite: (id: Tab) => void;
+  onGo: (id: Tab) => void;
+  notes: string;
+  onNotes: (v: string) => void;
+  activity: { at: string; label: string }[];
+  onClearActivity: () => void;
+  onSearch: () => void;
+  theme: AdminTheme;
+  onThemeChange: (theme: AdminTheme) => void;
+  uiMode: UiMode;
+  onUiModeChange: (mode: UiMode) => void;
+}) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  if (!open || open === 'notify') return null;
+
+  return (
+    <div className="rail-panel" role="dialog" aria-modal="false">
+      {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>
+          <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>
+        </>
+      )}
+
+      {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-row">
+            <button type="button" className="glass-chip-btn" onClick={() => onNotes('')}>Clear</button>
+            <span className="rail-panel-hint">{notes.length} chars</span>
+          </div>
+        </>
+      )}
+
+      {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>
+          <p className="rail-panel-text">Your recent admin activity.</p>
+          {activity.length === 0 ? (
+            <p className="rail-empty">No activity yet.</p>
+          ) : (
+            <ul className="rail-list">
+              {activity.map((a, i) => (
+                <li key={i}><b>{a.label}</b><span>{a.at}</span></li>
+              ))}
+            </ul>
+          )}
+          <div className="rail-row"><button type="button" className="glass-chip-btn" onClick={onClearActivity}>Clear activity</button></div>
+        </>
+      )}
+
+      {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>
+          <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>}
+              </button>
+            ))}
+          </div>
+          <div className="rail-divider" />
+          <span className="rail-panel-hint">Interface mode</span>
+          <div className="rail-appearance">
+            {([['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>}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+
+      {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>
+          <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>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}

package/templates/base/apps/admin/src/components/shell/SettingsDialog.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { useState, useEffect } from 'react';
+import type { AdminUser } from '../../lib/types.js';
+import { useAlerts } from '../../alertCenter.js';
+import { formatUptime } from '../../lib/utils.js';
+import { getAdminConfig, getMetrics, updateProfile, changePassword, updateProject, type AdminConfig } from '../../api.js';
+
+export function SettingsDialog({ open, onClose, user, onUserChange, projectName, projectDb, projectVersion, onProjectChange }: {
+  open: boolean;
+  onClose: () => void;
+  user: AdminUser | null;
+  onUserChange: (u: AdminUser) => void;
+  projectName: string;
+  projectDb: string;
+  projectVersion: string;
+  onProjectChange: (name?: string, version?: string) => void;
+}) {
+  const isAdmin = Array.isArray(user?.roles) && (user!.roles as string[]).includes('admin');
+  const [nameDraft, setNameDraft] = useState(user?.name ?? '');
+  const [profileMsg, setProfileMsg] = useState<{ text: string; kind: 'ok' | 'err' } | null>(null);
+  const [profileBusy, setProfileBusy] = useState(false);
+  const [curPw, setCurPw] = useState('');
+  const [newPw, setNewPw] = useState('');
+  const [confirmPw, setConfirmPw] = useState('');
+  const [pwMsg, setPwMsg] = useState<{ text: string; kind: 'ok' | 'err' } | null>(null);
+  const [pwBusy, setPwBusy] = useState(false);
+  const [pkgName, setPkgName] = useState(projectName);
+  const [pkgVersion, setPkgVersion] = useState(projectVersion);
+  const [pkgMsg, setPkgMsg] = useState<{ text: string; kind: 'ok' | 'err' } | null>(null);
+  const [pkgBusy, setPkgBusy] = useState(false);
+  const [about, setAbout] = useState<{ path?: string; version?: string | null; node?: string; uptime?: number; pid?: number } | null>(null);
+  const { push } = useAlerts();
+
+  useEffect(() => {
+    if (!open) return;
+    setNameDraft(user?.name ?? '');
+    setCurPw(''); setNewPw(''); setConfirmPw('');
+    setProfileMsg(null); setPwMsg(null); setPkgMsg(null);
+    setPkgName(projectName); setPkgVersion(projectVersion);
+    setAbout(null);
+    let cancelled = false;
+    void Promise.all([getAdminConfig().catch(() => null), getMetrics().catch(() => null)]).then(([c, m]) => {
+      if (cancelled) return;
+      const proj = c?.project as AdminConfig['project'] | undefined;
+      setPkgName(proj?.name ?? projectName);
+      setPkgVersion(proj?.version ?? m?.version ?? projectVersion);
+      setAbout({
+        path: proj?.path,
+        version: m?.version ?? proj?.version ?? null,
+        node: m?.node ?? null,
+        uptime: m?.uptime,
+        pid: m?.pid,
+      });
+    });
+    return () => { cancelled = true; };
+  }, [open, user, projectName, projectVersion]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const saveProfile = async () => {
+    const name = nameDraft.trim();
+    if (!name) { setProfileMsg({ text: 'Name is required.', kind: 'err' }); return; }
+    const prevName = user?.name ?? '';
+    if (name === prevName) { setProfileMsg({ text: 'Display name is unchanged.', kind: 'ok' }); return; }
+    setProfileBusy(true); setProfileMsg(null);
+    try {
+      const res = await updateProfile(name);
+      onUserChange((res.user ?? { ...(user ?? {}), name }) as AdminUser);
+      setProfileMsg({ text: `Display name changed to "${name}".`, kind: 'ok' });
+      push('ok', `Display name changed to "${name}".`, 'settings');
+    } catch (e) {
+      setProfileMsg({ text: e instanceof Error ? e.message : 'Failed to save profile.', kind: 'err' });
+    } finally {
+      setProfileBusy(false);
+    }
+  };
+
+  const savePassword = async () => {
+    if (newPw.length < 8) { setPwMsg({ text: 'New password must be at least 8 characters.', kind: 'err' }); return; }
+    if (newPw !== confirmPw) { setPwMsg({ text: 'Passwords do not match.', kind: 'err' }); return; }
+    setPwBusy(true); setPwMsg(null);
+    try {
+      await changePassword(curPw, newPw);
+      setCurPw(''); setNewPw(''); setConfirmPw('');
+      setPwMsg({ text: 'Password updated.', kind: 'ok' });
+    } catch (e) {
+      setPwMsg({ text: e instanceof Error ? e.message : 'Failed to change password.', kind: 'err' });
+    } finally {
+      setPwBusy(false);
+    }
+  };
+
+  const savePackage = async () => {
+    const patch: { name?: string; version?: string } = {};
+    const name = pkgName.trim();
+    if (name && name !== projectName) patch.name = name;
+    const version = pkgVersion.trim();
+    if (version && version !== (about?.version ?? projectVersion)) patch.version = version;
+    if (!patch.name && !patch.version) { setPkgMsg({ text: 'Nothing to update.', kind: 'err' }); return; }
+    setPkgBusy(true); setPkgMsg(null);
+    try {
+      const res = await updateProject(patch);
+      const proj = res.project as { name?: string; version?: string } | undefined;
+      if (proj?.name) onProjectChange(proj.name);
+      if (proj?.version) onProjectChange(undefined, proj.version);
+      if (proj?.version) setAbout((prev) => ({ ...(prev ?? {}), version: proj!.version ?? prev?.version }));
+      setPkgName(proj?.name ?? projectName);
+      setPkgVersion(proj?.version ?? about?.version ?? projectVersion);
+      setPkgMsg({ text: 'package.json updated. Restart the backend to pick up changes.', kind: 'ok' });
+    } catch (e) {
+      setPkgMsg({ text: e instanceof Error ? e.message : 'Failed to update package.', kind: 'err' });
+    } finally {
+      setPkgBusy(false);
+    }
+  };
+
+  const statusLine = (msg: { text: string; kind: 'ok' | 'err' } | null) =>
+    msg ? <div role="status" className={`settings-status ${msg.kind}`}>{msg.text}</div> : null;
+
+  return (
+    <div className="provider-modal-backdrop" onClick={onClose}>
+      <div className="settings-dialog" role="dialog" aria-modal="true" aria-labelledby="settings-title" onClick={(event) => event.stopPropagation()}>
+        <div className="settings-header">
+          <div>
+            <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>
+        </div>
+
+        <div className="settings-body">
+          <section className="settings-section">
+            <h4>Profile</h4>
+            <p className="settings-desc">Your display name across the admin workspace.</p>
+            <div className="settings-row">
+              <label className="settings-field">
+                <span className="admin-overline">DISPLAY NAME</span>
+                <input className="glass-input" type="text" value={nameDraft} onChange={(e) => setNameDraft(e.target.value)} />
+              </label>
+              <label className="settings-field">
+                <span className="admin-overline">EMAIL</span>
+                <input className="glass-input" type="text" readOnly value={user?.email ?? ''} aria-readonly="true" />
+              </label>
+            </div>
+            {statusLine(profileMsg)}
+            <div className="settings-actions">
+              <button type="button" onClick={saveProfile} disabled={profileBusy} className="glass-chip-btn-primary">{profileBusy ? 'Saving…' : 'Save profile'}</button>
+            </div>
+          </section>
+
+          <section className="settings-section">
+            <h4>Security</h4>
+            <p className="settings-desc">Change the password for this account.</p>
+            <div className="settings-row">
+              <label className="settings-field">
+                <span className="admin-overline">CURRENT PASSWORD</span>
+                <input className="glass-input" type="password" autoComplete="current-password" value={curPw} onChange={(e) => setCurPw(e.target.value)} />
+              </label>
+            </div>
+            <div className="settings-row">
+              <label className="settings-field">
+                <span className="admin-overline">NEW PASSWORD</span>
+                <input className="glass-input" type="password" autoComplete="new-password" value={newPw} onChange={(e) => setNewPw(e.target.value)} />
+              </label>
+              <label className="settings-field">
+                <span className="admin-overline">CONFIRM PASSWORD</span>
+                <input className="glass-input" type="password" autoComplete="new-password" value={confirmPw} onChange={(e) => setConfirmPw(e.target.value)} />
+              </label>
+            </div>
+            {statusLine(pwMsg)}
+            <div className="settings-actions">
+              <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>Uptime</span><b>{formatUptime(about?.uptime)}</b></div>
+              <div><span>PID</span><b>{about?.pid ?? '—'}</b></div>
+            </div>
+            {isAdmin && (
+              <div className="settings-package">
+                <div className="settings-row">
+                  <label className="settings-field">
+                    <span className="admin-overline">PACKAGE NAME</span>
+                    <input className="glass-input" type="text" value={pkgName} onChange={(e) => setPkgName(e.target.value)} />
+                  </label>
+                  <label className="settings-field">
+                    <span className="admin-overline">VERSION</span>
+                    <input className="glass-input" type="text" value={pkgVersion} onChange={(e) => setPkgVersion(e.target.value)} placeholder="1.0.0" />
+                  </label>
+                </div>
+                {statusLine(pkgMsg)}
+                <div className="settings-actions">
+                  <button type="button" onClick={savePackage} disabled={pkgBusy} className="glass-chip-btn-primary">{pkgBusy ? 'Updating…' : 'Update package'}</button>
+                </div>
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/base/apps/admin/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Icon } from '../../icons.js';
+
+export function ConfirmDialog(props: {
+  open: boolean;
+  title: string;
+  message: React.ReactNode;
+  confirmLabel?: string;
+  danger?: boolean;
+  busy?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  if (!props.open) return null;
+  return (
+    <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 ? '!' : <Icon name="info" size={15} />}</span>
+          <strong>{props.title}</strong>
+          <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">
+          <button className="glass-chip-btn" onClick={props.onCancel}>Cancel</button>
+          <button
+            className={`glass-chip-btn-danger confirm-dialog-primary${props.danger ? ' danger' : ''}`}
+            onClick={props.onConfirm}
+            disabled={props.busy}
+            autoFocus
+          >
+            {props.busy ? 'Working…' : (props.confirmLabel ?? 'Confirm')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/base/apps/admin/src/components/ui/LintChecks.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useState } from 'react';
+import { Icon } from '../../icons.js';
+import type { LintReport } from '../../api.js';
+
+export function LintChecks({ run, title, overline }: { run: () => Promise<LintReport>; title: string; overline: string }) {
+  const [report, setReport] = useState<LintReport | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState('');
+  const doRun = async () => {
+    setBusy(true); setErr('');
+    try { setReport(await run()); } catch (e: any) { setErr(String(e?.message ?? e)); setReport(null); }
+    setBusy(false);
+  };
+  return (
+    <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>
+      </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-meta">{report.ranAt}</span>
+          </div>
+          {report.engineOk === false && (
+            <div className="preflight-guidance">
+              <strong>Diagnostics engine offline.</strong>
+              <span>The Python engine that runs these checks is not running. Start it with <code>python main.py</code>, or the whole stack with <code>nexus dev</code>.</span>
+            </div>
+          )}
+        </>
+      ) : 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) => (
+            <div key={`${c.severity}-${c.key}-${c.message}`} className="preflight-row">
+              <span className={`preflight-dot ${c.severity === 'error' ? 'bad' : c.severity === 'warning' ? 'warn' : 'good'}`} />
+              <span className="preflight-check-name">{c.key}</span>
+              <span className="preflight-kind">{c.kind}</span>
+              <span className={`preflight-message ${c.severity === 'ok' ? 'is-ok' : ''}`}>{c.message}</span>
+              <span className={`preflight-state ${c.severity === 'error' ? 'fail' : c.severity === 'warning' ? 'is-warn' : c.severity === 'ok' ? 'ok' : ''}`}>{c.severity}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

package/templates/base/apps/admin/src/components/ui/PageHead.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export function PageHead({ title, children }: { title: string; children?: React.ReactNode }) {
+  return (
+    <div className="section-heading">
+      <div className="section-heading-title">
+        <span className="section-heading-mark" />
+        <h2>{title}</h2>
+      </div>
+      {children}
+    </div>
+  );
+}

package/templates/base/apps/admin/src/components/ui/PageHero.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon, type IconName } from '../../icons.js';
+
+export 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><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><Icon name={glyph} size={26} /></strong></div>
+      )}
+    </div>
+  );
+}

package/templates/base/apps/admin/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>
+  );
+}