@bhooai/nexus-cli 2.0.5 → 2.0.7

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

package/templates/base/apps/admin/src/lib/constants.ts

@@ -0,0 +1,94 @@
+import type { AdminTheme, CustomTheme, ParticleConfig, ProviderPreset, ToggleStyle } from './types.js';
+import type { IconName } from '../icons.js';
+
+export const TOGGLE_STYLES: Array<{ id: ToggleStyle; label: string; hint: string }> = [
+  { id: 'chip', label: 'Chip ON/OFF', hint: 'Default · glass chip' },
+  { id: 'neon', label: 'Neon glass', hint: 'Blue→violet border' },
+  { id: 'icon', label: 'Icon knob', hint: 'Power · bolt glow' },
+  { id: 'orb', label: 'Orb dot', hint: 'Pulse halo' },
+  { id: 'track', label: 'Gradient-track', hint: 'Sliding trail' },
+];
+
+export const CUSTOM_THEME_KEY = 'nexus-admin-custom-theme';
+export const THEME_PRESETS: Record<AdminTheme, Omit<CustomTheme, 'active'>> = {
+  aurora: { blue: '#54b7ff', violet: '#9f7bff', pink: '#f36eb8', bg: '#0b0d1a', ink: '#eef6ff', muted: '#98aec9', mesh: 0.32, glass: 0.35, radius: 13, toggle: 'chip' },
+  midnight: { blue: '#78bfff', violet: '#7da5d3', pink: '#b8c7db', bg: '#02050b', ink: '#eaf3ff', muted: '#8fa6c2', mesh: 0.2, glass: 0.25, radius: 11, toggle: 'chip' },
+  violet: { blue: '#b4a1ff', violet: '#d78bff', pink: '#ff8ed1', bg: '#0b071b', ink: '#f3eaff', muted: '#a592c9', mesh: 0.4, glass: 0.3, radius: 15, toggle: 'chip' },
+};
+
+export const PARTICLES_KEY = 'nexus-admin-particles';
+export const DEFAULT_PARTICLE_COLORS = ['#59d7ff', '#c68dff', '#ff8fd4', '#5ef0b3', '#d3a0ff', '#5fb6ff'];
+export const DEFAULT_PARTICLES: ParticleConfig = { amount: 14, speed: 1, colors: [...DEFAULT_PARTICLE_COLORS] };
+export const SWATCH_CPLAETTE = ['#59d7ff', '#c68dff', '#ff8fd4', '#5ef0b3', '#ffd479', '#f0995a', '#7fe3c8', '#f2a7ff'];
+
+export const USER_KEY = 'nexus-admin-user';
+
+export const CATEGORY_LABEL: Record<string, { label: string; hint: string }> = {
+  refused: { label: 'Connection refused', hint: 'the target address is reachable but nothing is listening — is the service running?' },
+  timeout: { label: 'Timed out', hint: 'the target did not respond in time — it may be down or filtering traffic.' },
+  dns: { label: 'DNS lookup failed', hint: 'the host could not be resolved.' },
+  ssl: { label: 'TLS handshake failed', hint: 'the target answered but the TLS handshake failed.' },
+  http: { label: 'HTTP error status', hint: 'the endpoint responded with an error status code.' },
+  engine_offline: { label: 'Diagnostics engine offline', hint: 'the Python engine is not running — start it with "python main.py" or "nexus dev".' },
+};
+
+/** Preset for the "Add provider" dialog — popular providers with autofill data
+ *  and a list of well-known models (the user can still edit everything after). */
+export const POPULAR_PROVIDERS: ProviderPreset[] = [
+  { id: 'ollama', label: 'Ollama (local)', baseUrl: 'http://localhost:11434', defaultModel: 'llama3:latest', models: ['llama3:latest', 'llama3.1:8b', 'mistral:latest', 'phi3:latest', 'qwen2.5:latest'] },
+  { id: 'openai', label: 'OpenAI', baseUrl: 'https://api.openai.com/v1', defaultModel: 'gpt-4o-mini', models: ['gpt-4o-mini', 'gpt-4o', 'gpt-4-turbo', 'gpt-3.5-turbo', 'o1-mini', 'o1-preview'] },
+  { id: 'anthropic', label: 'Anthropic Claude', baseUrl: 'https://api.anthropic.com/v1', defaultModel: 'claude-sonnet-4-20250514', models: ['claude-sonnet-4-20250514', 'claude-3-7-sonnet-20250219', 'claude-3-5-haiku-20241022', 'claude-3-opus-20240229'] },
+  { id: 'google', label: 'Google Gemini', baseUrl: 'https://generativelanguage.googleapis.com/v1', defaultModel: 'gemini-2.0-flash', models: ['gemini-2.0-flash', 'gemini-2.0-flash-lite', 'gemini-1.5-pro', 'gemini-1.5-flash'] },
+  { id: 'groq', label: 'Groq', baseUrl: 'https://api.groq.com/openai/v1', defaultModel: 'llama-3.3-70b-versatile', models: ['llama-3.3-70b-versatile', 'llama-3.1-8b-instant', 'mixtral-8x7b-32768', 'gemma2-9b-it'] },
+  { id: 'mistral', label: 'Mistral AI', baseUrl: 'https://api.mistral.ai/v1', defaultModel: 'mistral-large-latest', models: ['mistral-large-latest', 'mistral-small-latest', 'open-mixtral-8x22b', 'open-mistral-7b', 'codestral-latest'] },
+  { id: 'cohere', label: 'Cohere', baseUrl: 'https://api.cohere.ai/v1', defaultModel: 'command-r-plus', models: ['command-r-plus', 'command-r', 'command', 'command-light'] },
+  { id: 'together', label: 'Together AI', baseUrl: 'https://api.together.xyz/v1', defaultModel: 'meta-llama/Llama-3-70b-chat-hf', models: ['meta-llama/Llama-3-70b-chat-hf', 'meta-llama/Llama-3-8b-chat-hf', 'mistralai/Mixtral-8x7B-Instruct-v0.1', 'Qwen/Qwen2.5-72B-Instruct-Turbo'] },
+  { id: 'fireworks', label: 'Fireworks AI', baseUrl: 'https://api.fireworks.ai/inference/v1', defaultModel: 'accounts/fireworks/models/llama-v3-70b-instruct', models: ['accounts/fireworks/models/llama-v3-70b-instruct', 'accounts/fireworks/models/llama-v3-8b-instruct', 'accounts/fireworks/models/mixtral-8x7b-instruct'] },
+  { id: 'deepseek', label: 'DeepSeek', baseUrl: 'https://api.deepseek.com/v1', defaultModel: 'deepseek-chat', models: ['deepseek-chat', 'deepseek-reasoner', 'deepseek-coder'] },
+  { id: 'perplexity', label: 'Perplexity', baseUrl: 'https://api.perplexity.ai', defaultModel: 'llama-3.1-sonar-large-128k-online', models: ['llama-3.1-sonar-large-128k-online', 'llama-3.1-sonar-small-128k-online', 'llama-3.1-sonar-huge-128k-online'] },
+  { id: 'xai', label: 'xAI (Grok)', baseUrl: 'https://api.x.ai/v1', defaultModel: 'grok-2-latest', models: ['grok-2-latest', 'grok-2-1212', 'grok-beta', 'grok-vision-beta'] },
+  { id: 'replicate', label: 'Replicate', baseUrl: 'https://api.replicate.com/v1', defaultModel: 'meta/llama-3-70b-instruct', models: ['meta/llama-3-70b-instruct', 'meta/llama-3-8b-instruct', 'mistralai/mixtral-8x7b-instruct-v0.1'] },
+  { id: 'huggingface', label: 'Hugging Face', baseUrl: 'https://api-inference.huggingface.co/models', defaultModel: 'meta-llama/Llama-3-70b-chat-hf', models: ['meta-llama/Llama-3-70b-chat-hf', 'mistralai/Mistral-7B-Instruct-v0.3', 'google/gemma-2-9b'] },
+  { id: 'nvidia', label: 'NVIDIA NIM', baseUrl: 'https://integrate.api.nvidia.com/v1', defaultModel: 'meta/llama-3.1-70b-instruct', models: ['meta/llama-3.1-70b-instruct', 'meta/llama-3.1-8b-instruct', 'nvidia/llama-3.1-nemotron-70b-instruct'] },
+  { id: 'openrouter', label: 'OpenRouter', baseUrl: 'https://openrouter.ai/api/v1', defaultModel: 'openai/gpt-4o-mini', models: ['openai/gpt-4o-mini', 'openai/gpt-4o', 'anthropic/claude-3.5-sonnet', 'google/gemini-2.0-flash-exp', 'meta-llama/llama-3.3-70b-instruct'] },
+  { id: 'lmstudio', label: 'LM Studio (local)', baseUrl: 'http://localhost:1234/v1', defaultModel: 'local-model', models: ['local-model', 'loaded-model'] },
+  { id: 'alephalpha', label: 'Aleph Alpha', baseUrl: 'https://api.aleph-alpha.com/v1', defaultModel: 'luminous-supreme-control', models: ['luminous-supreme-control', 'luminous-supreme', 'luminous-base'] },
+  { id: 'stability', label: 'Stability AI', baseUrl: 'https://api.stability.ai/v1', defaultModel: 'stable-diffusion-xl', models: ['stable-diffusion-xl', 'stable-diffusion-3', 'stable-image-core'] },
+  { id: 'azure', label: 'Azure OpenAI', baseUrl: 'https://your-resource.openai.azure.com', defaultModel: 'gpt-4o-mini', models: ['gpt-4o-mini', 'gpt-4o', 'gpt-35-turbo', 'dall-e-3'] },
+];
+
+/** Find a preset by id (returns undefined for "other"/custom). */
+export const PRESET_BY_ID: Record<string, ProviderPreset> = Object.fromEntries(POPULAR_PROVIDERS.map((p) => [p.id, p]));
+
+export const ALL_PROVIDERS = ['razorpay', 'paypal', 'payu', 'skrill', 'payoneer'];
+
+/** Known built-in provider ids (from nexus-core defaults). Used to classify custom providers. */
+export const BUILTIN_PROVIDER_IDS = new Set([
+  'ollama', 'openai', 'anthropic', 'google', 'groq', 'mistral', 'cohere', 'together',
+  'fireworks', 'deepseek', 'perplexity', 'xai', 'replicate', 'huggingface', 'nvidia',
+  'openrouter', 'lmstudio', 'alephalpha', 'stability', 'azure',
+]);
+
+/** Display metadata for known providers: an icon + an HSL hue for the avatar accent. */
+export 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 },
+};

package/templates/base/apps/admin/src/lib/theme.ts

@@ -0,0 +1,80 @@
+import type { CustomTheme, ParticleConfig } from './types.js';
+import { CUSTOM_THEME_KEY, DEFAULT_PARTICLE_COLORS, DEFAULT_PARTICLES, PARTICLES_KEY, THEME_PRESETS } from './constants.js';
+
+export function loadCustomTheme(): CustomTheme {
+  const fallback: CustomTheme = { ...THEME_PRESETS.aurora, active: false };
+  if (typeof window === 'undefined') return fallback;
+  try {
+    const raw = window.localStorage.getItem(CUSTOM_THEME_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw) as Partial<CustomTheme>;
+      if (parsed && typeof parsed === 'object') {
+        return { ...THEME_PRESETS.aurora, ...parsed, active: Boolean(parsed.active) };
+      }
+    }
+  } catch { /* ignore corrupt value */ }
+  return fallback;
+}
+
+export function loadParticles(): ParticleConfig {
+  const fallback: ParticleConfig = { amount: 14, speed: 1, colors: [...DEFAULT_PARTICLE_COLORS] };
+  if (typeof window === 'undefined') return fallback;
+  try {
+    const raw = window.localStorage.getItem(PARTICLES_KEY);
+    if (raw) {
+      const p = JSON.parse(raw) as Partial<ParticleConfig>;
+      if (p && typeof p === 'object') {
+        const amount = Math.max(0, Math.min(48, Math.round(Number(p.amount) || 14)));
+        const speed = Math.min(3, Math.max(0.2, Number(p.speed) || 1));
+        const colors = Array.isArray(p.colors) ? p.colors.filter((c): c is string => typeof c === 'string' && /^#[0-9a-fA-F]{3,8}$/.test(c)) : [];
+        return { amount, speed, colors: colors.length ? colors : [...DEFAULT_PARTICLE_COLORS] };
+      }
+    }
+  } catch { /* ignore corrupt value */ }
+  return fallback;
+}
+
+export function buildParticleLayout(amount: number) {
+  const list: { left: number; size: number; duration: number; delay: number; dx: number; dx2: number; opacity: string }[] = [];
+  for (let i = 0; i < amount; i++) {
+    list.push({
+      left: 1 + Math.random() * 98,
+      size: 3 + Math.random() * 7,
+      duration: 18 + Math.random() * 18,
+      delay: Math.random() * 32,
+      dx: (Math.random() - 0.5) * 70,
+      dx2: (Math.random() - 0.5) * 70,
+      opacity: (0.45 + Math.random() * 0.4).toFixed(2),
+    });
+  }
+  return list;
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)));
+    return Math.round(255 * color).toString(16).padStart(2, '0');
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+export function randomAccentPalette() {
+  const base = Math.round(Math.random() * 360);
+  return {
+    blue: hslToHex((base + 150) % 360, 72, 64),
+    violet: hslToHex((base + 60) % 360, 62, 68),
+    pink: hslToHex((base + 25) % 360, 80, 72),
+  };
+}
+
+export function randomParticleColors(): string[] {
+  const base = Math.round(Math.random() * 360);
+  const count = 4 + Math.round(Math.random() * 3);
+  const colors: string[] = [];
+  for (let i = 0; i < count; i++) {
+    colors.push(hslToHex((base + i * 55) % 360, 74 + Math.round(Math.random() * 12), 60 + Math.round(Math.random() * 16)));
+  }
+  return colors;
+}

package/templates/base/apps/admin/src/lib/types.ts

@@ -0,0 +1,39 @@
+export type Tab = 'overview' | 'processes' | 'logs' | 'config' | 'env' | 'plugins' | 'users' | 'monitoring' | 'payments' | 'databases' | 'schema' | 'ai' | 'theme';
+export type AdminTheme = 'aurora' | 'midnight' | 'violet';
+export type UiMode = 'workspace' | 'compact' | 'focus';
+export type ToggleStyle = 'chip' | 'neon' | 'icon' | 'orb' | 'track';
+
+export interface CustomTheme { active: boolean; blue: string; violet: string; pink: string; bg: string; ink: string; muted: string; mesh: number; glass: number; radius: number; toggle: ToggleStyle; }
+
+export interface ParticleConfig { amount: number; speed: number; colors: string[]; }
+
+export interface AdminUser { email?: string; name?: string; roles?: string[]; }
+
+export type ConfigValueType = 'string' | 'number' | 'boolean' | 'null' | 'object' | 'array';
+export type ConfigEntry = { key: string; value: string; type: ConfigValueType };
+
+export interface ProviderPreset { id: string; label: string; baseUrl: string; defaultModel: string; models: string[]; }
+
+export type ProviderFilter = 'all' | 'enabled' | 'disabled' | 'custom';
+
+export interface PaymentOrder {
+  provider: string;
+  orderId: string;
+  reference: string;
+  status: string;
+  amount: number;
+  currency: string;
+  paymentId?: string;
+  createdAt?: string;
+}
+export interface PaymentTransaction {
+  provider: string;
+  event: string;
+  verified: boolean;
+  orderId?: string;
+  paymentId?: string;
+  amount?: number;
+  currency?: string;
+  status?: string;
+  createdAt?: string;
+}

package/templates/base/apps/admin/src/lib/utils.ts

@@ -0,0 +1,147 @@
+import type { AdminUser, ConfigEntry } from './types.js';
+import { USER_KEY, CATEGORY_LABEL, PROVIDER_META } from './constants.js';
+import type { IconName } from '../icons.js';
+import type { PreflightCheck, RequestSeriesRange } from '../api.js';
+
+export function storedPreference<T extends string>(key: string, fallback: T, allowed: readonly T[]): T {
+  const value = typeof window === 'undefined' ? null : window.localStorage.getItem(key);
+  return value && allowed.includes(value as T) ? value as T : fallback;
+}
+
+export function formatProjectName(name: string): string {
+  const words = name.split(/[^A-Za-z0-9]+/).filter(Boolean);
+  if (!words.length) return name;
+  return words.map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+}
+
+export function readUser(): AdminUser | null {
+  if (typeof window === 'undefined') return null;
+  try { const raw = window.localStorage.getItem(USER_KEY); return raw ? JSON.parse(raw) as AdminUser : null; } catch { return null; }
+}
+
+export function formatUptime(seconds?: number): string {
+  if (!seconds || seconds <= 0) return '—';
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor((seconds % 86400) / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  if (d > 0) return `${d}d ${h}h ${m}m`;
+  if (h > 0) return `${h}h ${m}m ${s}s`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
+
+export function flattenConfig(value: unknown, prefix = ''): ConfigEntry[] {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const rows = Object.entries(value as Record<string, unknown>);
+    if (!rows.length && prefix) return [{ key: prefix, value: '{}', type: 'object' }];
+    return rows.flatMap(([key, child]) => flattenConfig(child, prefix ? `${prefix}.${key}` : key));
+  }
+  if (!prefix) return [];
+  if (Array.isArray(value)) return [{ key: prefix, value: JSON.stringify(value), type: 'array' }];
+  if (value === null) return [{ key: prefix, value: '', type: 'null' }];
+  if (typeof value === 'number') return [{ key: prefix, value: String(value), type: 'number' }];
+  if (typeof value === 'boolean') return [{ key: prefix, value: String(value), type: 'boolean' }];
+  return [{ key: prefix, value: String(value), type: 'string' }];
+}
+
+export function configValue(entry: ConfigEntry): unknown {
+  if (entry.type === 'null') return null;
+  if (entry.type === 'number') return Number(entry.value);
+  if (entry.type === 'boolean') return entry.value === 'true';
+  if (entry.type === 'object' || entry.type === 'array') return JSON.parse(entry.value);
+  return entry.value;
+}
+
+export function buildConfig(entries: ConfigEntry[]): Record<string, unknown> {
+  const root: Record<string, unknown> = {};
+  for (const entry of entries) {
+    const parts = entry.key.trim().split('.').filter(Boolean);
+    if (!parts.length || parts.some((part) => ['__proto__', 'constructor', 'prototype'].includes(part))) continue;
+    const value = configValue(entry);
+    let node = root;
+    parts.forEach((part, index) => {
+      if (index === parts.length - 1) node[part] = value;
+      else {
+        const child = node[part];
+        if (!child || typeof child !== 'object' || Array.isArray(child)) node[part] = {};
+        node = node[part] as Record<string, unknown>;
+      }
+    });
+  }
+  return root;
+}
+
+export function topGroup(key: string): string {
+  const trimmed = key.trim();
+  if (!trimmed) return 'unsorted';
+  if (trimmed.startsWith('NEXUS_')) return trimmed.slice(6).split('_')[0].toLowerCase() || 'root';
+  return trimmed.split('.')[0] || 'root';
+}
+
+export function groupEntries<T extends { key: string }>(entries: T[]): Array<{ group: string; items: Array<{ index: number; entry: T }> }> {
+  const order: string[] = [];
+  const map = new Map<string, Array<{ index: number; entry: T }>>();
+  entries.forEach((entry, index) => {
+    const group = topGroup(entry.key);
+    if (!map.has(group)) { map.set(group, []); order.push(group); }
+    map.get(group)!.push({ index, entry });
+  });
+  return order.map((group) => ({ group, items: map.get(group)! }));
+}
+
+export function friendlyPreflightError(error?: string, category?: string): string {
+  if (!error) return 'unreachable';
+  const meta = category ? CATEGORY_LABEL[category] : undefined;
+  if (!meta || error.toLowerCase().startsWith(meta.label.toLowerCase())) return error;
+  return `${meta.label} — ${error}`;
+}
+
+export function preflightAddress(c: PreflightCheck): string {
+  if (c.kind === 'http' && c.url) return c.url;
+  if (c.kind === 'tcp' && c.host) return `${c.host}:${c.port}`;
+  return c.name;
+}
+
+/** Derive a deterministic HSL hue from an arbitrary string (for custom provider avatars). */
+export function hashHue(s: string): number {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 360;
+  return h;
+}
+
+export 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) };
+}
+
+/** Returns true if the provider's baseUrl points to a local host. */
+export function isLocalProvider(baseUrl: string): boolean {
+  try {
+    const u = new URL(baseUrl);
+    return u.hostname === 'localhost' || u.hostname === '127.0.0.1' || u.hostname === '0.0.0.0';
+  } catch { return false; }
+}
+
+/** Derive the marketing website from an API base URL (strip /v1, /api, etc). */
+export function websiteFromBaseUrl(baseUrl: string): string {
+  try {
+    const u = new URL(baseUrl);
+    // For local providers (localhost / 127.0.0.1 / 0.0.0.0) just return the origin.
+    const isLocal = u.hostname === 'localhost' || u.hostname === '127.0.0.1' || u.hostname === '0.0.0.0';
+    if (isLocal) return u.origin;
+    // For cloud providers, strip common API path segments and go to the root.
+    return `${u.protocol}//${u.hostname}`;
+  } catch {
+    return baseUrl;
+  }
+}
+
+export function formatPointTime(t: number, range: RequestSeriesRange): string {
+  const d = new Date(t);
+  const time = d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+  if (range === 'today' || range === '5d') return time;
+  if (range === 'week') return `${d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} ${time}`;
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}

package/templates/base/apps/admin/src/main.tsx.ejs

@@ -1,6 +1,7 @@
-import './index.css';
-import { App as NexusAdmin } from './App.js';
 import React from 'react';
+
+import { App as NexusAdmin } from '@bhooai/nexus-admin';
+import '@bhooai/nexus-admin/style.css';
 import { createRoot } from 'react-dom/client';
 
 const el = document.getElementById('root');