@bhooai/nexus-cli 2.0.6 → 2.0.7

package/templates/base/apps/admin/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/templates/base/apps/admin/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/templates/base/apps/admin/src/components/ThemeCentre.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { useState } from 'react';
+import type { AdminTheme, UiMode, CustomTheme, ParticleConfig } from '../lib/types.js';
+import { SWATCH_CPLAETTE, THEME_PRESETS, DEFAULT_PARTICLES, CUSTOM_THEME_KEY, PARTICLES_KEY, TOGGLE_STYLES } from '../lib/constants.js';
+import { randomAccentPalette, randomParticleColors } from '../lib/theme.js';
+import { Icon } from '../icons.js';
+import { PageHead } from './ui/PageHead.js';
+import { PageHero } from './ui/PageHero.js';
+
+export function ThemeCentre({
+  theme,
+  onThemeChange,
+  uiMode,
+  onUiModeChange,
+  custom,
+  onCustom,
+  particles,
+  onParticles,
+}: {
+  theme: AdminTheme;
+  onThemeChange: (theme: AdminTheme) => void;
+  uiMode: UiMode;
+  onUiModeChange: (mode: UiMode) => void;
+  custom: CustomTheme;
+  onCustom: (partial: Partial<CustomTheme>) => void;
+  particles: ParticleConfig;
+  onParticles: (partial: Partial<ParticleConfig>) => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const colors: { key: keyof Omit<CustomTheme, 'active'>; label: string; detail: string }[] = [
+    { key: 'blue', label: 'Primary blue', detail: 'Buttons, focus rings & links' },
+    { key: 'violet', label: 'Accent violet', detail: 'Highlights & gradients' },
+    { key: 'pink', label: 'Accent pink', detail: 'Special surfaces & marks' },
+    { key: 'bg', label: 'Background', detail: 'Base canvas of the shell' },
+    { key: 'ink', label: 'Foreground text', detail: 'Headings & body ink' },
+    { key: 'muted', label: 'Muted text', detail: 'Captions & secondary labels' },
+  ];
+  const setColor = (key: keyof Omit<CustomTheme, 'active'>, value: string) => onCustom({ [key]: value });
+  const setParticleColor = (index: number, value: string) => {
+    const next = [...particles.colors];
+    next[index] = value;
+    onParticles({ colors: next });
+  };
+  const addParticleColor = () => {
+    const next = [...particles.colors, SWATCH_CPLAETTE[particles.colors.length % SWATCH_CPLAETTE.length]];
+    onParticles({ colors: next });
+  };
+  const removeParticleColor = (index: number) => {
+    if (particles.colors.length <= 1) return;
+    onParticles({ colors: particles.colors.filter((_, i) => i !== index) });
+  };
+  const exportJson = () => {
+    const payload = JSON.stringify({ version: 1, theme, uiMode, custom, particles }, null, 2);
+    const write = () => { navigator.clipboard.writeText(payload).then(() => setCopied(true)).catch(() => fallback(payload)); };
+    const fallback = (text: string) => {
+      const el = document.createElement('textarea');
+      el.value = text; document.body.appendChild(el); el.select();
+      try { document.execCommand('copy'); setCopied(true); } catch { /* ignore */ }
+      document.body.removeChild(el);
+    };
+    write();
+    window.setTimeout(() => setCopied(false), 1600);
+  };
+  const importJson = async () => {
+    let text = '';
+    try { text = await navigator.clipboard.readText(); } catch { text = window.prompt('Paste theme JSON to import:') ?? ''; }
+    if (!text) return;
+    try {
+      const parsed = JSON.parse(text) as { theme?: AdminTheme; uiMode?: UiMode; custom?: Partial<CustomTheme>; particles?: Partial<ParticleConfig> };
+      if (parsed.theme && ['aurora', 'midnight', 'violet'].includes(parsed.theme)) onThemeChange(parsed.theme);
+      if (parsed.uiMode && ['workspace', 'compact', 'focus'].includes(parsed.uiMode)) onUiModeChange(parsed.uiMode);
+      if (parsed.custom) onCustom(parsed.custom);
+      if (parsed.particles) onParticles(parsed.particles);
+    } catch { /* ignore bad import */ }
+  };
+  const resetAll = () => {
+    onCustom({ ...THEME_PRESETS[theme], active: false });
+    onParticles({ ...DEFAULT_PARTICLES });
+    try { localStorage.removeItem(CUSTOM_THEME_KEY); localStorage.removeItem(PARTICLES_KEY); } catch { /* ignore */ }
+  };
+  const slider = (label: string, detail: string, value: number, min: number, max: number, step: number, display: string, onChange: (v: number) => void) => (
+    <label className="surface-row">
+      <span className="surface-meta"><b>{label}</b><small>{detail}</small></span>
+      <input type="range" className="surface-range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(Number(e.target.value))} />
+      <em className="surface-value">{display}</em>
+    </label>
+  );
+  return (
+    <div className="space-y-6">
+      <PageHead title="Theme Centre">
+        <div className="heading-actions">
+          <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="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>
+          <span className="live-badge"><i className="status-dot good" /> LIVE</span>
+        </div>
+        <div className="theme-gallery">
+          {([['aurora', 'Aurora', 'Electric blue glow'], ['midnight', 'Midnight', 'Deep navy calm'], ['violet', 'Violet', 'Indigo shimmer']] as const).map(([id, label, detail]) => {
+            const preset = THEME_PRESETS[id];
+            const isActive = !custom.active && theme === id;
+            return (
+              <button key={id} type="button" className={`theme-card${isActive ? ' is-active' : ''}`} onClick={() => { onThemeChange(id); onCustom({ ...preset, active: false }); }}>
+                <span className={`theme-preview ${id}`} />
+                <span className="theme-card-body"><b>{label}</b><small>{detail}</small></span>
+                {isActive && <i className="theme-card-check">✓</i>}
+              </button>
+            );
+          })}
+        </div>
+        <div className="ui-mode-options ui-mode-row">
+          {([['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>{label}</span><small>{detail}</small></button>
+          ))}
+        </div>
+      </section>
+      <section className="glass-card space-y-4">
+        <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 }); }}><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>
+        </div>
+        <p className="text-sm text-slate-400">Tune each color below — the workspace re-themes instantly while custom is applied. Stored locally in your browser.</p>
+        <div className="custom-grid">
+          {colors.map((c) => (
+            <label key={c.key} className="color-row">
+              <span className="color-swatch"><input type="color" value={custom[c.key]} disabled={!custom.active} onChange={(e) => setColor(c.key, e.target.value)} /></span>
+              <span className="color-meta"><b>{c.label}</b><small>{c.detail}</small></span>
+              <input className="glass-input color-hex" value={custom[c.key]} disabled={!custom.active} onChange={(e) => { const v = e.target.value.trim(); if (/^#[0-9a-fA-F]{3,8}$/.test(v)) setColor(c.key, v); }} />
+            </label>
+          ))}
+        </div>
+        <div className="theme-preview-tile" style={custom.active ? { ['--p-blue' as string]: custom.blue, ['--p-violet' as string]: custom.violet, ['--p-pink' as string]: custom.pink, ['--p-bg' as string]: custom.bg } : undefined}>
+          <div className="theme-preview-glow" />
+          <div className="theme-preview-card">
+            <span className="theme-preview-overline">LIVE PREVIEW</span>
+            <b className="theme-preview-title">Surface preview</b>
+            <div className="theme-preview-actions"><button className="glass-chip-btn-primary flex-1 justify-center">Primary</button><button className="glass-chip-btn flex-1 justify-center">chip</button></div>
+            <div className="theme-preview-dots"><i /><i /><i /></div>
+          </div>
+        </div>
+      </section>
+      <section className="glass-card space-y-4">
+        <div className="flex items-center justify-between">
+          <div><span className="admin-overline">SURFACE TUNING</span><h3 className="glass-h3">Glow, glass & shape</h3></div>
+          <span className="live-badge"><i className="status-dot good" /> LIVE</span>
+        </div>
+        {slider('Ambient glow', 'Mesh & aura strength behind the shell', custom.mesh, 0, 1, 0.02, `${Math.round(custom.mesh * 100)}%`, (v) => onCustom({ mesh: v }))}
+        {slider('Panel glass', 'Frosted blur behind cards & panels', custom.glass, 0, 1, 0.02, `${Math.round(custom.glass * 100)}%`, (v) => onCustom({ glass: v }))}
+        {slider('Corner radius', 'Roundness of cards, panels & buttons', custom.radius, 0, 24, 1, `${custom.radius}px`, (v) => onCustom({ radius: v }))}
+        <div>
+          <span className="admin-overline">TOGGLE STYLE</span>
+          <div className="toggle-style-row">
+            {TOGGLE_STYLES.map((t) => (
+              <button
+                key={t.id}
+                type="button"
+                className={`toggle-style-btn${custom.toggle === t.id ? ' is-selected' : ''}`}
+                onClick={() => onCustom({ toggle: t.id })}
+              >
+                <span className={`ai-toggle tg-${t.id} is-on toggle-style-preview`}><span className="ai-toggle-knob" /></span>
+                <span className="toggle-style-meta"><b>{t.label}</b><small>{t.hint}</small></span>
+                {custom.toggle === t.id && <i className="toggle-style-check">✓</i>}
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+      <section className="glass-card space-y-4">
+        <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() })}><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>
+        <p className="text-sm text-slate-400">Control how many particles drift behind the workspace, how fast they rise, and build a custom color list for them.</p>
+        {slider('Particle amount', 'Count of dots in the field', particles.amount, 0, 48, 1, String(particles.amount), (v) => onParticles({ amount: v }))}
+        {slider('Particle speed', 'Rise speed multiplier', particles.speed, 0.2, 3, 0.05, `${particles.speed.toFixed(2)}×`, (v) => onParticles({ speed: v }))}
+        <div className="palette-list">
+          {particles.colors.map((c, i) => (
+            <div className="palette-chip" key={i}>
+              <span className="color-swatch"><input type="color" value={c} onChange={(e) => setParticleColor(i, e.target.value)} /></span>
+              <input className="glass-input color-hex" value={c} onChange={(e) => { const v = e.target.value.trim(); if (/^#[0-9a-fA-F]{3,8}$/.test(v)) setParticleColor(i, v); }} />
+              <button type="button" className="row-delete" onClick={() => removeParticleColor(i)} aria-label="Remove color" disabled={particles.colors.length <= 1}>×</button>
+            </div>
+          ))}
+          <button type="button" className="add-color" onClick={addParticleColor}>+ Add color</button>
+        </div>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { AdminTheme, UiMode } from '../../lib/types.js';
+
+export function AppearancePanel({
+  theme,
+  uiMode,
+  onThemeChange,
+  onUiModeChange,
+}: {
+  theme: AdminTheme;
+  uiMode: UiMode;
+  onThemeChange: (theme: AdminTheme) => void;
+  onUiModeChange: (mode: UiMode) => void;
+}) {
+  return (
+    <div className="appearance-panel">
+      <div className="appearance-heading"><span className="admin-overline">APPEARANCE</span><span>LOCAL</span></div>
+      <strong>Choose your surface</strong>
+      <div className="appearance-options">
+        {([['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><b>{label}</b><small>{detail}</small></span>
+            {theme === id && <i>✓</i>}
+          </button>
+        ))}
+      </div>
+      <div className="appearance-divider" />
+      <span className="admin-overline">INTERFACE MODE</span>
+      <div className="ui-mode-options">
+        {([['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>{label}</span><small>{detail}</small></button>
+        ))}
+      </div>
+    </div>
+  );
+}