@bhooai/nexus-cli 2.0.7 → 2.0.8

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

@@ -1,441 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import logoUrl from '../../assets/bhooai-nexus-logo.svg';
-import { Icon, type IconName } from '../../icons.js';
-import { SafeGotoDialog } from '@bhooai/nexus-safe-goto';
-import { useAlerts, ToastStack } from '../../alertCenter.js';
-import type { AdminUser, AdminTheme, CustomTheme, ParticleConfig, Tab, UiMode } from '../../lib/types.js';
-import { CUSTOM_THEME_KEY, DEFAULT_PARTICLE_COLORS, PARTICLES_KEY } from '../../lib/constants.js';
-import { buildParticleLayout, loadCustomTheme, loadParticles } from '../../lib/theme.js';
-import { formatProjectName, storedPreference } from '../../lib/utils.js';
-import { getAdminConfig } from '../../api.js';
-import { AppearancePanel } from './AppearancePanel.js';
-import { NotifyPanel } from './NotifyPanel.js';
-import { RailPanel } from './RailPanel.js';
-import { SettingsDialog } from './SettingsDialog.js';
-import { Overview } from '../../pages/Overview.js';
-import { Processes } from '../../pages/Processes.js';
-import { Logs } from '../../pages/Logs.js';
-import { Config } from '../../pages/Config.js';
-import { Environment } from '../../pages/Environment.js';
-import { Plugins } from '../../pages/Plugins.js';
-import { Users } from '../../pages/Users.js';
-import { Monitoring } from '../../pages/Monitoring.js';
-import { Payments } from '../../pages/Payments.js';
-import { Databases } from '../../pages/Databases.js';
-import { Schema } from '../../pages/Schema.js';
-import { AiAgents } from '../../pages/ai/AiAgents.js';
-import { ThemeCentre } from '../ThemeCentre.js';
-
-export function Dashboard({ user, onUserChange, onLogout }: { user: AdminUser | null; onUserChange: (u: AdminUser) => void; onLogout: () => void }) {
-  const [tab, setTab] = useState<Tab>('overview');
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [search, setSearch] = useState('');
-  const [searchOpen, setSearchOpen] = useState(false);
-  const searchRef = useRef<HTMLDivElement | null>(null);
-  const searchInputRef = useRef<HTMLInputElement | null>(null);
-  const [mobileNav, setMobileNav] = useState(false);
-  const [mobileSearch, setMobileSearch] = useState(false);
-  const sidebarRef = useRef<HTMLElement | null>(null);
-  const [railOpen, setRailOpen] = useState<string | null>(null);
-  const railRef = useRef<HTMLDivElement | null>(null);
-  const railPanelRef = useRef<HTMLDivElement | null>(null);
-  const notifyRef = useRef<HTMLDivElement | null>(null);
-  const FAVORITES_KEY = 'nexus-admin-favorites';
-  const ACTIVITY_KEY = 'nexus-admin-activity';
-  const NOTES_KEY = 'nexus-admin-notes';
-  const [favorites, setFavorites] = useState<Tab[]>(() => {
-    try {
-      const raw = window.localStorage.getItem(FAVORITES_KEY);
-      if (raw) {
-        const arr = JSON.parse(raw) as Tab[];
-        if (Array.isArray(arr) && arr.every((x) => typeof x === 'string')) return arr;
-      }
-    } catch { /* ignore */ }
-    return ['overview', 'config', 'env', 'logs'];
-  });
-  const [notes, setNotes] = useState<string>(() => {
-    try { return window.localStorage.getItem(NOTES_KEY) ?? ''; } catch { return ''; }
-  });
-  const [activity, setActivity] = useState<{ at: string; label: string }[]>(() => {
-    try {
-      const raw = window.localStorage.getItem(ACTIVITY_KEY);
-      if (raw) {
-        const arr = JSON.parse(raw) as { at: string; label: string }[];
-        if (Array.isArray(arr)) return arr.slice(0, 20);
-      }
-    } catch { /* ignore */ }
-    return [];
-  });
-  const saveNotes = (v: string) => { setNotes(v); try { window.localStorage.setItem(NOTES_KEY, v); } catch { /* ignore */ } };
-  const toggleFavorite = (id: Tab) => {
-    setFavorites((prev) => {
-      const next = prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id];
-      try { window.localStorage.setItem(FAVORITES_KEY, JSON.stringify(next)); } catch { /* ignore */ }
-      return next;
-    });
-  };
-  const goTab = (id: Tab) => {
-    setTab(id);
-    setMobileNav(false);
-    setSearch('');
-    setSearchOpen(false);
-    setRailOpen(null);
-    const label = nav.find((n) => n.id === id)?.label ?? id;
-    setActivity((prev) => {
-      const next = [{ at: new Date().toLocaleTimeString(), label }, ...prev].slice(0, 20);
-      try { window.localStorage.setItem(ACTIVITY_KEY, JSON.stringify(next)); } catch { /* ignore */ }
-      return next;
-    });
-  };
-  const [theme, setTheme] = useState<AdminTheme>(() => storedPreference('nexus-admin-theme', 'aurora', ['aurora', 'midnight', 'violet']));
-  const [uiMode, setUiMode] = useState<UiMode>(() => storedPreference('nexus-admin-ui', 'workspace', ['workspace', 'compact', 'focus']));
-  const [customTheme, setCustomTheme] = useState<CustomTheme>(() => loadCustomTheme());
-  const updateCustomTheme = (partial: Partial<CustomTheme>) => {
-    setCustomTheme((prev) => {
-      const next = { ...prev, ...partial };
-      try { window.localStorage.setItem(CUSTOM_THEME_KEY, JSON.stringify(next)); } catch { /* storage unavailable */ }
-      return next;
-    });
-  };
-  const [particles, setParticles] = useState<ParticleConfig>(() => loadParticles());
-  const updateParticles = (partial: Partial<ParticleConfig>) => {
-    setParticles((prev) => {
-      const next = { ...prev, ...partial };
-      try { window.localStorage.setItem(PARTICLES_KEY, JSON.stringify(next)); } catch { /* storage unavailable */ }
-      return next;
-    });
-  };
-  const particleLayout = useMemo(() => buildParticleLayout(particles.amount), [particles.amount]);
-  const [appearanceOpen, setAppearanceOpen] = useState(false);
-  const [accountOpen, setAccountOpen] = useState(false);
-  const { alerts } = useAlerts();
-  const accountRef = useRef<HTMLDivElement | null>(null);
-  const appearanceRef = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!accountOpen && !appearanceOpen) return;
-    const onDown = (e: MouseEvent) => {
-      const target = e.target as Node;
-      if (accountOpen && accountRef.current && !accountRef.current.contains(target)) setAccountOpen(false);
-      if (appearanceOpen && appearanceRef.current && !appearanceRef.current.contains(target)) setAppearanceOpen(false);
-    };
-    document.addEventListener('mousedown', onDown);
-    return () => document.removeEventListener('mousedown', onDown);
-  }, [accountOpen, appearanceOpen]);
-  useEffect(() => {
-    const onDown = (e: MouseEvent) => {
-      if (railOpen && !(railRef.current?.contains(e.target as Node) || railPanelRef.current?.contains(e.target as Node) || notifyRef.current?.contains(e.target as Node))) setRailOpen(null);
-    };
-    document.addEventListener('mousedown', onDown);
-    return () => document.removeEventListener('mousedown', onDown);
-  }, [railOpen]);
-  useEffect(() => {
-    const onDown = (e: MouseEvent) => {
-      if (searchOpen && searchRef.current && !searchRef.current.contains(e.target as Node)) setSearchOpen(false);
-    };
-    document.addEventListener('mousedown', onDown);
-    return () => document.removeEventListener('mousedown', onDown);
-  }, [searchOpen]);
-  useEffect(() => {
-    if (!mobileNav) return;
-    const onDown = (e: MouseEvent) => {
-      const el = e.target as HTMLElement;
-      if (el && sidebarRef.current && !sidebarRef.current.contains(el) && !el.closest('.admin-mobile-menu')) setMobileNav(false);
-    };
-    document.addEventListener('mousedown', onDown);
-    return () => document.removeEventListener('mousedown', onDown);
-  }, [mobileNav]);
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
-        e.preventDefault();
-        searchInputRef.current?.focus();
-        setSearchOpen(true);
-      }
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, []);
-  const [projectName, setProjectName] = useState('');
-  const [projectDb, setProjectDb] = useState('');
-  const [projectVersion, setProjectVersion] = useState('');
-  useEffect(() => {
-    let cancelled = false;
-    let tries = 0;
-    const load = async () => {
-      if (cancelled) return;
-      try {
-        const c = await getAdminConfig();
-        const name = c.project?.name ?? '';
-        if (name) { setProjectName(name); setProjectDb(c.project?.dbName ?? ''); setProjectVersion(c.project?.version ?? ''); return; }
-      } catch { /* retry below */ }
-      if (!cancelled && tries < 15) { tries += 1; window.setTimeout(load, 1500); }
-    };
-    void load();
-    return () => { cancelled = true; };
-  }, []);
-  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: 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();
-    if (!q) return [];
-    return nav.filter((n) => {
-      if (n.label.toLowerCase().includes(q)) return true;
-      return (n.keywords ?? []).some((k) => k.toLowerCase().includes(q));
-    });
-  }, [search, nav]);
-  const title = nav.find((item) => item.id === tab)?.label ?? 'Overview';
-  const displayProject = projectName ? formatProjectName(projectName) : '';
-  const shellStyle: React.CSSProperties = {
-    ['--admin-shell-width' as string]: `${shellWidth}px`,
-    ['--admin-mesh' as string]: String(customTheme.mesh),
-    ['--admin-glass' as string]: String(customTheme.glass),
-    ['--admin-radius' as string]: `${customTheme.radius}px`,
-    ['--admin-mesh-opacity' as string]: String(0.2 + customTheme.mesh * 0.8),
-  };
-  if (customTheme.active) {
-    Object.assign(shellStyle, {
-      ['--admin-blue' as string]: customTheme.blue,
-      ['--admin-violet' as string]: customTheme.violet,
-      ['--admin-pink' as string]: customTheme.pink,
-      ['--admin-bg' as string]: customTheme.bg,
-      ['--admin-ink' as string]: customTheme.ink,
-      ['--admin-muted' as string]: customTheme.muted,
-      background: `radial-gradient(60rem 60rem at 85% -10%, color-mix(in srgb, ${customTheme.violet} ${Math.round(28 + customTheme.mesh * 34)}%, transparent), transparent 70%), radial-gradient(50rem 50rem at -10% 110%, color-mix(in srgb, ${customTheme.blue} ${Math.round(24 + customTheme.mesh * 30)}%, transparent), transparent 70%), radial-gradient(45rem 45rem at 50% 50%, color-mix(in srgb, ${customTheme.pink} ${Math.round(14 + customTheme.mesh * 22)}%, transparent), transparent 70%), ${customTheme.bg}`,
-    });
-  }
-  const particleColors = particles.colors.length ? particles.colors : DEFAULT_PARTICLE_COLORS;
-  return (
-    <div className={`admin-shell bg-mesh theme-${theme} ui-${uiMode}`} style={shellStyle}>
-      <div className="admin-particles" aria-hidden="true">
-        {particleLayout.map((p, i) => {
-          const color = particleColors[i % particleColors.length];
-          return (
-            <i key={i} style={{
-              left: `${p.left}%`,
-              width: `${p.size}px`,
-              height: `${p.size}px`,
-              background: `radial-gradient(circle, ${color}, transparent 72%)`,
-              animation: `admin-float ${(p.duration / particles.speed).toFixed(2)}s linear infinite`,
-              animationDelay: `-${p.delay.toFixed(2)}s`,
-              ['--dx' as string]: `${p.dx}px`,
-              ['--dx2' as string]: `${p.dx2}px`,
-              ['--o' as string]: p.opacity,
-            }} />
-          );
-        })}
-      </div>
-      <aside ref={sidebarRef} className={`admin-sidebar ${mobileNav ? 'is-open' : ''}`}>
-        <div className="admin-brand">
-          <img src={logoUrl} alt="BhooAI Nexus" />
-          <div>
-            <strong>NEXUS</strong>
-            <span>Admin workspace</span>
-          </div>
-          <button className="admin-close-mobile" onClick={() => setMobileNav(false)} aria-label="Close navigation">×</button>
-        </div>
-        <div className="admin-project-card">
-          <span className="admin-overline">ACTIVE PROJECT</span>
-          <strong>{displayProject || 'Loading…'}</strong>
-          {projectDb && <em className="admin-project-db">db · {projectDb}</em>}
-          <span><i className="status-dot good" /> Development</span>
-        </div>
-        <div className="admin-nav-label">Workspace</div>
-        <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"><Icon name={n.icon} size={16} /></span>{n.label}
-              {n.id === 'env' && <b>NEW</b>}
-            </button>
-          ))}
-        </nav>
-        <div className="admin-nav-label">Operations</div>
-        <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"><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"><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 className="admin-search-icon"><Icon name="search" size={14} /></span>
-            <input
-              ref={searchInputRef}
-              value={search}
-              onChange={(e) => { setSearch(e.target.value); setSearchOpen(true); }}
-              onFocus={() => setSearchOpen(true)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && searchResults.length) {
-                  e.preventDefault();
-                  setTab(searchResults[0].id);
-                  setSearch('');
-                  setSearchOpen(false);
-                  setMobileSearch(false);
-                } else if (e.key === 'Escape') {
-                  setSearch('');
-                  setSearchOpen(false);
-                  setMobileSearch(false);
-                  searchInputRef.current?.blur();
-                }
-              }}
-              placeholder="Search workspace"
-            />
-            <kbd>⌘ K</kbd>
-            {searchOpen && search.length > 0 && (
-              <div className="admin-search-results">
-                {searchResults.length === 0 ? (
-                  <div className="admin-search-empty">No matches for “{search}”</div>
-                ) : (
-                  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"><Icon name={n.icon} size={14} /></span>{n.label}
-                    </button>
-                  ))
-                )}
-              </div>
-            )}
-          </div>
-          <div className="admin-top-actions">
-            <span className="top-live"><i className="status-dot good" /> All systems nominal</span>
-            <button className="admin-mobile-search" aria-label="Search" aria-expanded={mobileSearch} onClick={() => {
-              const next = !mobileSearch;
-              setMobileSearch(next);
-              if (next) {
-                setAppearanceOpen(false);
-                setAccountOpen(false);
-                window.setTimeout(() => { searchInputRef.current?.focus(); setSearchOpen(true); }, 60);
-              } else {
-                setSearch('');
-                setSearchOpen(false);
-              }
-            }}>{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}><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')}><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}>
-              <button className="admin-user-avatar" aria-label="Account" aria-expanded={accountOpen} onClick={() => { setAccountOpen(!accountOpen); setAppearanceOpen(false); }}>{initials}</button>
-              {accountOpen && (
-                <div className="account-panel">
-                  <div className="account-head">
-                    <span className="account-avatar">{initials}</span>
-                    <span className="account-meta">
-                      <strong>{displayName}</strong>
-                      <small>{user?.email ?? 'admin@bhooai.local'}</small>
-                    </span>
-                  </div>
-                  <div className="account-divider" />
-                  <button className="account-item" onClick={() => { setSettingsOpen(true); setAccountOpen(false); }}>
-                    <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"><Icon name="logOut" size={15} /></span><span><b>Sign out</b><small>End this session</small></span>
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-        </header>
-        <div className="admin-breadcrumb"><strong>{displayProject || 'Project'}</strong><b>›</b><span>{title}</span><button>⋯</button></div>
-        <div className="admin-content-layout">
-          <main className="admin-content">
-            {tab === 'overview' && <Overview onNavigate={setTab} />}
-            {tab === 'processes' && <Processes />}
-            {tab === 'logs' && <Logs onNavigate={setTab} />}
-            {tab === 'config' && <Config onNavigate={setTab} />}
-            {tab === 'env' && <Environment onNavigate={setTab} />}
-            {tab === 'plugins' && <Plugins />}
-            {tab === 'users' && <Users currentUserEmail={user?.email} />}
-            {tab === 'monitoring' && <Monitoring />}
-            {tab === 'payments' && <Payments toggle={customTheme.toggle} />}
-            {tab === 'databases' && <Databases />}
-            {tab === 'schema' && <Schema />}
-            {tab === 'ai' && <AiAgents toggle={customTheme.toggle} />}
-            {tab === 'theme' && <ThemeCentre theme={theme} onThemeChange={(value) => { setTheme(value); window.localStorage.setItem('nexus-admin-theme', value); }} uiMode={uiMode} onUiModeChange={(value) => { setUiMode(value); window.localStorage.setItem('nexus-admin-ui', value); }} custom={customTheme} onCustom={updateCustomTheme} particles={particles} onParticles={updateParticles} />}
-          </main>
-          <aside className="admin-inspector">
-            <div className="inspector-heading"><span>WORKSPACE INSPECTOR</span><button aria-label="Close inspector">×</button></div>
-            <div className="inspector-preview"><div className="preview-orbit"><span /><i /><b /></div><strong>Project Nexus</strong><span>Full-stack application</span></div>
-            <div className="inspector-tabs"><b>Summary</b><span>Activity</span></div>
-            <div className="inspector-card"><span className="admin-overline">CURRENT SURFACE</span><strong>{title}</strong><p>{nav.find((item) => item.id === tab)?.desc ?? 'Manage the running Nexus project from this workspace.'}</p></div>
-            <div className="inspector-card inspector-list"><span className="admin-overline">QUICK LINKS</span><button onClick={() => setTab('config')}>Configuration <b>→</b></button><button onClick={() => setTab('env')}>Environment <b>→</b></button><button onClick={() => setTab('logs')}>Logs <b>→</b></button></div>
-            <button className="glass-chip-btn-primary w-full justify-between" onClick={() => setTab('overview')}><Icon name="activity" size={13} /> Open project overview <span>→</span></button>
-            <div className="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>
-              <div className="load-line"><span>MEM</span><i><b style={{ width: '61%' }} /></i><strong>61%</strong></div>
-              <div className="load-line"><span>DB</span><i><b className="violet" style={{ width: '44%' }} /></i><strong>44%</strong></div>
-            </div>
-          </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); } }}><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}>
-            <RailPanel
-              open={railOpen}
-              onClose={() => setRailOpen(null)}
-              nav={nav}
-              tab={tab}
-              favorites={favorites}
-              onToggleFavorite={toggleFavorite}
-              onGo={goTab}
-              notes={notes}
-              onNotes={saveNotes}
-              activity={activity}
-              onClearActivity={() => { setActivity([]); try { window.localStorage.removeItem(ACTIVITY_KEY); } catch { /* ignore */ } }}
-              onSearch={() => { setRailOpen(null); searchInputRef.current?.focus(); setSearchOpen(true); }}
-              theme={theme}
-              onThemeChange={(value) => { setTheme(value); window.localStorage.setItem('nexus-admin-theme', value); }}
-              uiMode={uiMode}
-              onUiModeChange={(value) => { setUiMode(value); window.localStorage.setItem('nexus-admin-ui', value); }}
-            />
-          </div>
-        )}
-        <footer className="admin-dock"><span><b className="dock-logo">◈</b> BhooAI Nexus</span><span>Connected to <strong>localhost:4000</strong></span><span className="dock-right"><i className="status-dot good" /> Secure admin session · {title}</span></footer>
-      </div>
-      <SafeGotoDialog />
-      <SettingsDialog
-        open={settingsOpen}
-        onClose={() => setSettingsOpen(false)}
-        user={user}
-        onUserChange={onUserChange}
-        projectName={projectName}
-        projectDb={projectDb}
-        projectVersion={projectVersion}
-        onProjectChange={(name, version) => {
-          if (name) setProjectName(name);
-          if (version) setProjectVersion(version);
-        }}
-      />
-      <ToastStack />
-    </div>
-  );
-}

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

@@ -1,69 +0,0 @@
-import React from 'react';
-import { useState } from 'react';
-import logoUrl from '../../assets/bhooai-nexus-logo.svg';
-import type { AdminUser, AdminTheme } from '../../lib/types.js';
-import { storedPreference } from '../../lib/utils.js';
-import { login, registerAndLogin } from '../../api.js';
-
-export function Login({ onAuthed }: { onAuthed: (user: AdminUser) => void }) {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [name, setName] = useState('');
-  const [err, setErr] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [mode, setMode] = useState<'login' | 'register'>('login');
-  const [theme] = useState<AdminTheme>(() => storedPreference('nexus-admin-theme', 'aurora', ['aurora', 'midnight', 'violet']));
-
-  const submit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (busy) return;
-    setErr('');
-    setBusy(true);
-    try {
-      const data = mode === 'login'
-        ? await login(email, password)
-        : await registerAndLogin(email, password, name || email.split('@')[0]);
-      onAuthed({ email: data?.user?.email ?? email, name: data?.user?.name ?? email.split('@')[0] });
-    } catch (e: any) {
-      const message = e?.message as string | undefined;
-      setErr(
-        message
-          || (mode === 'login'
-            ? 'Sign in failed. Please check your email and password.'
-            : 'Registration failed. Please try again.'),
-      );
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  return (
-    <div className={`admin-login bg-mesh theme-${theme} flex min-h-screen items-center justify-center p-4`}>
-      <form onSubmit={submit} className="admin-login-card glass-card w-96 space-y-4 p-8">
-        <div className="space-y-1">
-           <img src={logoUrl} alt="BhooAI Nexus Admin" className="mb-4 h-auto w-64 max-w-full" />
-          <h1 className="brand-text text-2xl font-bold">Admin control panel</h1>
-          <p className="text-sm text-slate-400">
-            {mode === 'login' ? 'Sign in to manage the project.' : 'The first registered user becomes admin.'}
-          </p>
-        </div>
-        {mode === 'register' && (
-          <input className="glass-input" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
-        )}
-        <input className="glass-input" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required autoComplete="username" />
-        <input className="glass-input" type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} required autoComplete="current-password" />
-        {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">
-            {err}
-          </div>
-        )}
-        <button className="glass-btn-primary w-full disabled:opacity-60 disabled:cursor-not-allowed" type="submit" disabled={busy}>
-          {busy ? 'Please wait…' : mode === 'login' ? 'Sign in' : 'Register & sign in'}
-        </button>
-        <button type="button" className="w-full cursor-pointer text-sm text-slate-400 transition-colors hover:text-slate-200" onClick={() => setMode(mode === 'login' ? 'register' : 'login')}>
-          {mode === 'login' ? 'Need an account? Register' : 'Already have one? Sign in'}
-        </button>
-      </form>
-    </div>
-  );
-}

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

@@ -1,102 +0,0 @@
-import React from 'react';
-import { useState, useEffect } from 'react';
-import { Icon } from '../../icons.js';
-import { useAlerts } from '../../alertCenter.js';
-import { getAllLogs, type LogEntry } from '../../api.js';
-
-export function NotifyPanel({ onClose }: { onClose: () => void }) {
-  const [notify, setNotify] = useState<LogEntry[] | null>(null);
-  const [notifyBusy, setNotifyBusy] = useState(false);
-  const { alerts, clear: clearAlerts, dismiss: dismissAlert } = useAlerts();
-
-  const loadNotify = async () => {
-    setNotifyBusy(true);
-    try { setNotify(await getAllLogs({ level: 'error' })); } catch { setNotify([]); }
-    finally { setNotifyBusy(false); }
-  };
-
-  useEffect(() => {
-    void loadNotify();
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [onClose]);
-
-  const errs = alerts.filter((a) => a.kind === 'err').length;
-  const warns = alerts.filter((a) => a.kind === 'warn').length;
-  const oks = alerts.length - errs - warns;
-  const loading = notify === null;
-  const hasAlerts = alerts.length > 0;
-  const hasLogs = (notify?.length ?? 0) > 0;
-  const hasAny = hasAlerts || hasLogs;
-
-  return (
-    <div className="notify-panel" role="dialog" aria-modal="false">
-      <div className="notify-head">
-        <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 ? '…' : <Icon name="refresh" size={13} />}</button>
-        <button type="button" className="rail-x" aria-label="Close notifications" onClick={onClose}>×</button>
-      </div>
-
-      <div className="notify-body">
-        {hasAny ? (
-          <>
-            <div className="notify-summary">
-              {errs > 0 && <span className="is-err">● {errs} error{errs === 1 ? '' : 's'}</span>}
-              {warns > 0 && <span className="is-warn">● {warns} warning{warns === 1 ? '' : 's'}</span>}
-              {oks > 0 && <span className="is-ok">● {oks} notice{oks === 1 ? '' : 's'}</span>}
-              {hasLogs && <span className="is-log">● {notify!.length} log line{(notify?.length ?? 0) === 1 ? '' : 's'}</span>}
-            </div>
-
-            {hasAlerts && (
-              <>
-                <div className="notify-section-title">
-                  <span>ADMIN ALERTS</span>
-                  <button type="button" onClick={clearAlerts} disabled={alerts.length === 0}>Clear all</button>
-                </div>
-                <ul className="notify-alerts">
-                  {alerts.slice(0, 8).map((a) => (
-                    <li key={a.id} className={`is-${a.kind}`}>
-                      <span className="notify-alert-bar" />
-                      <span className="notify-alert-dot" />
-                      <span className="notify-alert-body">
-                        <b>{a.message}</b>
-                        <small>{a.source} · {a.at}</small>
-                      </span>
-                      <button type="button" className="notify-alert-x" aria-label="Dismiss alert" onClick={() => dismissAlert(a.id)}>×</button>
-                    </li>
-                  ))}
-                </ul>
-              </>
-            )}
-
-            {hasLogs && (
-              <>
-                <div className="notify-section-title">
-                  <span>SYSTEM ERRORS</span>
-                  <span className="notify-section-meta">supervisor · error level</span>
-                </div>
-                <ul className="notify-logs">
-                  {notify!.slice(0, 8).map((l, i) => (
-                    <li key={i}>
-                      <b>{l.service}</b><span>{new Date(l.ts).toLocaleTimeString()}</span>
-                      <p>{l.line.length > 96 ? `${l.line.slice(0, 96)}…` : l.line}</p>
-                    </li>
-                  ))}
-                </ul>
-              </>
-            )}
-          </>
-        ) : loading ? (
-          <div className="notify-empty"><span className="notify-empty-icon"><Icon name="bell" size={18} /></span><strong>Loading notifications…</strong></div>
-        ) : (
-          <div className="notify-empty"><span className="notify-empty-icon"><Icon name="bell" size={18} /></span><strong>All clear</strong><p>No errors or alerts right now.</p></div>
-        )}
-      </div>
-    </div>
-  );
-}