@auxiora/dashboard 1.0.0

package/ui/src/api.ts

@@ -0,0 +1,238 @@
+const BASE = '/api/v1/dashboard';
+
+async function fetchApi<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    ...options,
+  });
+
+  if (res.status === 401) {
+    window.location.href = '/dashboard/login';
+    throw new Error('Unauthorized');
+  }
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || `HTTP ${res.status}`);
+  }
+
+  return res.json();
+}
+
+export const api = {
+  checkAuth: () => fetchApi<{ authenticated: boolean }>('/auth/check'),
+  login: (pw: string) =>
+    fetchApi<{ success: boolean }>('/auth/login', {
+      method: 'POST',
+      body: JSON.stringify({ password: pw }),
+    }),
+  logout: () => fetchApi<{ success: boolean }>('/auth/logout', { method: 'POST' }),
+  getBehaviors: () => fetchApi<{ data: any[] }>('/behaviors'),
+  patchBehavior: (id: string, updates: Record<string, unknown>) =>
+    fetchApi<{ data: any }>(`/behaviors/${id}`, {
+      method: 'PATCH',
+      body: JSON.stringify(updates),
+    }),
+  deleteBehavior: (id: string) =>
+    fetchApi<{ data: any }>(`/behaviors/${id}`, { method: 'DELETE' }),
+  createBehavior: (input: Record<string, unknown>) =>
+    fetchApi<{ data: any }>('/behaviors', {
+      method: 'POST',
+      body: JSON.stringify(input),
+    }),
+  getWebhooks: () => fetchApi<{ data: any[] }>('/webhooks'),
+  patchWebhook: (id: string, updates: Record<string, unknown>) =>
+    fetchApi<{ data: any }>(`/webhooks/${id}`, {
+      method: 'PATCH',
+      body: JSON.stringify(updates),
+    }),
+  deleteWebhook: (id: string) =>
+    fetchApi<{ data: any }>(`/webhooks/${id}`, { method: 'DELETE' }),
+  createWebhook: (input: Record<string, unknown>) =>
+    fetchApi<{ data: any }>('/webhooks', {
+      method: 'POST',
+      body: JSON.stringify(input),
+    }),
+  getSessions: () => fetchApi<{ data: any[] }>('/sessions'),
+  getAudit: (params?: { type?: string; limit?: number }) => {
+    const query = new URLSearchParams();
+    if (params?.type) query.set('type', params.type);
+    if (params?.limit) query.set('limit', String(params.limit));
+    const qs = query.toString();
+    return fetchApi<{ data: any[] }>(`/audit${qs ? `?${qs}` : ''}`);
+  },
+  getStatus: () => fetchApi<{ data: any }>('/status'),
+  getSetupStatus: () =>
+    fetchApi<{ needsSetup: boolean; completedSteps: string[]; vaultUnlocked: boolean; dashboardPasswordSet: boolean; agentName: string }>('/setup/status'),
+  setupVault: (password: string) =>
+    fetchApi<{ success: boolean }>('/setup/vault', { method: 'POST', body: JSON.stringify({ password }) }),
+  setupDashboardPassword: (password: string) =>
+    fetchApi<{ success: boolean }>('/setup/dashboard-password', { method: 'POST', body: JSON.stringify({ password }) }),
+  setupIdentity: (name: string, pronouns: string, vibe?: string) =>
+    fetchApi<{ success: boolean }>('/setup/identity', { method: 'POST', body: JSON.stringify({ name, pronouns, vibe }) }),
+  getSetupTemplates: () =>
+    fetchApi<{ data: Array<{ id: string; name: string; description: string; preview: string }> }>('/setup/templates'),
+  setupPersonality: (template: string) =>
+    fetchApi<{ success: boolean }>('/setup/personality', { method: 'POST', body: JSON.stringify({ template }) }),
+  setupProvider: (provider: string, apiKey?: string, endpoint?: string) =>
+    fetchApi<{ success: boolean }>('/setup/provider', { method: 'POST', body: JSON.stringify({ provider, apiKey, endpoint }) }),
+  setupChannels: (channels: Array<{ type: string; enabled: boolean; credentials?: Record<string, string> }>) =>
+    fetchApi<{ success: boolean }>('/setup/channels', { method: 'POST', body: JSON.stringify({ channels }) }),
+  completeSetup: () =>
+    fetchApi<{ success: boolean }>('/setup/complete', { method: 'POST' }),
+
+  // Settings API
+  getModels: () => fetchApi<{ providers: any[]; routing: any; cost: any }>('/models'),
+  getIdentity: () => fetchApi<{ data: { name: string; pronouns: string } }>('/identity'),
+  updateIdentity: (name: string, pronouns: string) =>
+    fetchApi<{ success: boolean }>('/identity', {
+      method: 'POST',
+      body: JSON.stringify({ name, pronouns }),
+    }),
+  getPersonality: () =>
+    fetchApi<{ data: { template: { id: string; name: string } | null } }>('/personality'),
+  getTemplates: () =>
+    fetchApi<{ data: Array<{ id: string; name: string; description: string; preview: string }> }>('/personality/templates'),
+  updatePersonality: (template: string) =>
+    fetchApi<{ success: boolean }>('/personality', {
+      method: 'POST',
+      body: JSON.stringify({ template }),
+    }),
+  getPersonalityFull: () =>
+    fetchApi<{ data: {
+      name: string; pronouns: string; avatar: string | null; vibe: string;
+      tone: { warmth: number; directness: number; humor: number; formality: number };
+      errorStyle: string; expertise: string[]; catchphrases: Record<string, string>;
+      boundaries: { neverJokeAbout: string[]; neverAdviseOn: string[] };
+      customInstructions: string; soulContent: string | null; activeTemplate: string | null;
+    } }>('/personality/full'),
+  updatePersonalityFull: (data: Record<string, unknown>) =>
+    fetchApi<{ success: boolean }>('/personality/full', {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+  updateProvider: (provider: string, apiKey?: string, endpoint?: string) =>
+    fetchApi<{ success: boolean }>('/provider', {
+      method: 'POST',
+      body: JSON.stringify({ provider, apiKey, endpoint }),
+    }),
+  configureProvider: (provider: string, apiKey?: string, endpoint?: string) =>
+    fetchApi<{ success: boolean }>('/provider/configure', {
+      method: 'POST',
+      body: JSON.stringify({ provider, apiKey, endpoint }),
+    }),
+  // Claude OAuth
+  startClaudeOAuth: () =>
+    fetchApi<{ authUrl: string }>('/provider/claude-oauth/start', { method: 'POST' }),
+  completeClaudeOAuth: (code: string) =>
+    fetchApi<{ success: boolean }>('/provider/claude-oauth/callback', {
+      method: 'POST',
+      body: JSON.stringify({ code }),
+    }),
+  disconnectClaudeOAuth: () =>
+    fetchApi<{ success: boolean }>('/provider/claude-oauth/disconnect', { method: 'POST' }),
+  getClaudeOAuthStatus: () =>
+    fetchApi<{ connected: boolean }>('/provider/claude-oauth/status'),
+  updateRouting: (primary: string, fallback?: string) =>
+    fetchApi<{ success: boolean }>('/provider/routing', {
+      method: 'POST',
+      body: JSON.stringify({ primary, fallback }),
+    }),
+  setProviderModel: (provider: string, model: string) =>
+    fetchApi<{ success: boolean }>('/provider/model', {
+      method: 'POST',
+      body: JSON.stringify({ provider, model }),
+    }),
+  getSessionMessages: () =>
+    fetchApi<{ data: Array<{ id: string; role: string; content: string; timestamp: number }> }>('/session/messages'),
+  getChannels: () => fetchApi<{ data: { connected: string[]; configured: Array<{ type: string; enabled: boolean }> } }>('/channels'),
+  updateChannels: (channels: Array<{ type: string; enabled: boolean; credentials?: Record<string, string> }>) =>
+    fetchApi<{ success: boolean }>('/channels', {
+      method: 'POST',
+      body: JSON.stringify({ channels }),
+    }),
+  changeDashboardPassword: (oldPassword: string, newPassword: string) =>
+    fetchApi<{ success: boolean }>('/security/dashboard-password', {
+      method: 'POST',
+      body: JSON.stringify({ oldPassword, newPassword }),
+    }),
+  changeVaultPassword: (newPassword: string) =>
+    fetchApi<{ success: boolean }>('/security/vault-password', {
+      method: 'POST',
+      body: JSON.stringify({ newPassword }),
+    }),
+
+  // Connector OAuth API
+  getConnectorStatus: (connectorId: string) =>
+    fetchApi<{ data: { connectorId: string; hasCredentials: boolean; connected: boolean; expiresAt?: number } }>(
+      `/connectors/${connectorId}/status`,
+    ),
+  saveConnectorCredentials: (connectorId: string, clientId: string, clientSecret: string) =>
+    fetchApi<{ success: boolean; oauthUrl?: string }>(`/connectors/${connectorId}/credentials`, {
+      method: 'POST',
+      body: JSON.stringify({ clientId, clientSecret }),
+    }),
+  disconnectConnector: (connectorId: string) =>
+    fetchApi<{ success: boolean }>(`/connectors/${connectorId}/disconnect`, {
+      method: 'POST',
+    }),
+
+  // Ambient config
+  getAmbientConfig: () =>
+    fetchApi<{ data: any }>('/ambient/config'),
+  updateAmbientConfig: (config: Record<string, unknown>) =>
+    fetchApi<{ success: boolean }>('/ambient/config', {
+      method: 'POST',
+      body: JSON.stringify(config),
+    }),
+
+  // Appearance
+  getAppearance: () =>
+    fetchApi<{ data: { theme: string } }>('/appearance'),
+  updateAppearance: (theme: string) =>
+    fetchApi<{ success: boolean }>('/appearance', {
+      method: 'POST',
+      body: JSON.stringify({ theme }),
+    }),
+
+  // Chat management
+  getChats: (archived?: boolean) => {
+    const qs = archived ? '?archived=true' : '';
+    return fetchApi<{ data: any[]; total: number }>(`/chats${qs}`);
+  },
+  createNewChat: (title?: string) =>
+    fetchApi<{ data: any }>('/chats', {
+      method: 'POST',
+      body: JSON.stringify({ title }),
+    }),
+  getChatMessages: (chatId: string) =>
+    fetchApi<{ data: Array<{ id: string; role: string; content: string; timestamp: number }> }>(`/chats/${chatId}/messages`),
+  renameChat: (chatId: string, title: string) =>
+    fetchApi<{ data: any }>(`/chats/${chatId}`, {
+      method: 'PATCH',
+      body: JSON.stringify({ title }),
+    }),
+  archiveChat: (chatId: string) =>
+    fetchApi<{ data: any }>(`/chats/${chatId}`, {
+      method: 'PATCH',
+      body: JSON.stringify({ archived: true }),
+    }),
+  deleteChatThread: (chatId: string) =>
+    fetchApi<{ data: any }>(`/chats/${chatId}`, { method: 'DELETE' }),
+
+  // Notifications
+  getNotifications: () =>
+    fetchApi<{ data: any[] }>('/notifications'),
+  dismissNotification: (id: string) =>
+    fetchApi<{ data: { dismissed: boolean } }>(`/notifications/${id}/dismiss`, {
+      method: 'POST',
+    }),
+  getNotificationPreferences: () =>
+    fetchApi<{ data: any }>('/notifications/preferences'),
+  updateNotificationPreferences: (prefs: Record<string, unknown>) =>
+    fetchApi<{ success: boolean }>('/notifications/preferences', {
+      method: 'POST',
+      body: JSON.stringify(prefs),
+    }),
+};

package/ui/src/components/ActivityFeed.tsx

@@ -0,0 +1,123 @@
+import { useState, useEffect, useRef } from 'react';
+import { api } from '../api';
+
+interface ActivityEvent {
+  timestamp: string;
+  sequence: number;
+  event: string;
+  details: Record<string, unknown>;
+}
+
+const EVENT_LABELS: Record<string, (d: Record<string, unknown>) => string> = {
+  'behavior.executed': (d) => d.success ? `Behavior ran successfully` : `Behavior failed: ${d.error ?? 'unknown'}`,
+  'behavior.created': () => 'Behavior created',
+  'behavior.updated': () => 'Behavior updated',
+  'behavior.deleted': () => 'Behavior deleted',
+  'behavior.paused': () => 'Behavior paused',
+  'behavior.failed': (d) => `Behavior failed: ${d.error ?? 'unknown'}`,
+  'message.received': (d) => `Message received on ${d.channelType ?? 'unknown'}`,
+  'message.sent': (d) => `Message sent to ${d.channelType ?? 'unknown'}`,
+  'message.filtered': () => 'Message filtered',
+  'channel.connected': (d) => `${d.channelType ?? 'Channel'} connected`,
+  'channel.disconnected': (d) => `${d.channelType ?? 'Channel'} disconnected`,
+  'channel.error': (d) => `${d.channelType ?? 'Channel'} error`,
+  'webhook.triggered': (d) => `Webhook triggered: ${d.path ?? ''}`,
+  'webhook.received': () => 'Webhook received',
+  'webhook.created': () => 'Webhook created',
+  'webhook.deleted': () => 'Webhook deleted',
+  'webhook.error': (d) => `Webhook error: ${d.error ?? 'unknown'}`,
+  'system.startup': () => 'System started',
+  'system.shutdown': () => 'System shut down',
+  'system.error': (d) => `System error: ${d.error ?? 'unknown'}`,
+  'auth.login': () => 'Login',
+  'auth.logout': () => 'Logout',
+};
+
+const CATEGORY_COLORS: Record<string, string> = {
+  behavior: 'var(--accent)',
+  message: '#3b82f6',
+  channel: 'var(--success)',
+  webhook: '#f97316',
+  system: 'var(--text-secondary)',
+  auth: 'var(--danger)',
+};
+
+function getCategory(event: string): string {
+  return event.split('.')[0];
+}
+
+function getLabel(event: string, details: Record<string, unknown>): string {
+  const fn = EVENT_LABELS[event];
+  if (fn) return fn(details);
+  return event.replace(/\./g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function timeAgo(iso: string): string {
+  const diff = (Date.now() - new Date(iso).getTime()) / 1000;
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+const MAX_EVENTS = 100;
+
+export function ActivityFeed() {
+  const [events, setEvents] = useState<ActivityEvent[]>([]);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    api.getAudit({ limit: 50 }).then((res) => {
+      if (res.data) {
+        const PREFIXES = ['behavior.', 'message.', 'channel.', 'webhook.', 'system.', 'auth.login', 'auth.logout'];
+        const filtered = res.data
+          .filter((e: any) => PREFIXES.some((p) => e.event.startsWith(p)))
+          .reverse();
+        setEvents(filtered);
+      }
+    }).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = import.meta.env.DEV ? 'localhost:18800' : window.location.host;
+    const ws = new WebSocket(`${protocol}//${host}/`);
+    wsRef.current = ws;
+
+    ws.onmessage = (evt) => {
+      try {
+        const msg = JSON.parse(evt.data);
+        if (msg.type === 'activity' && msg.payload) {
+          setEvents((prev) => {
+            const next = [msg.payload, ...prev];
+            return next.length > MAX_EVENTS ? next.slice(0, MAX_EVENTS) : next;
+          });
+        }
+      } catch { /* ignore non-JSON */ }
+    };
+
+    return () => { ws.close(); };
+  }, []);
+
+  return (
+    <div className="activity-feed">
+      <h3 className="mc-section-title">Live Activity</h3>
+      <div className="activity-feed-list">
+        {events.length === 0 && (
+          <div className="activity-empty">No recent activity</div>
+        )}
+        {events.map((e, i) => {
+          const cat = getCategory(e.event);
+          const color = CATEGORY_COLORS[cat] ?? 'var(--text-secondary)';
+          return (
+            <div key={`${e.sequence}-${i}`} className="activity-item">
+              <span className="activity-dot" style={{ background: color }} />
+              <span className="activity-label">{getLabel(e.event, e.details)}</span>
+              <span className="activity-time">{timeAgo(e.timestamp)}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/ui/src/components/BehaviorHealth.tsx

@@ -0,0 +1,105 @@
+import { useState, useEffect, useRef } from 'react';
+import { api } from '../api';
+
+interface Behavior {
+  id: string;
+  type: 'scheduled' | 'monitor' | 'one-shot';
+  status: 'active' | 'paused' | 'deleted' | 'missed';
+  action: string;
+  runCount: number;
+  failCount: number;
+  maxFailures: number;
+  lastRun?: string;
+  lastResult?: string;
+}
+
+function timeAgo(iso: string): string {
+  const diff = (Date.now() - new Date(iso).getTime()) / 1000;
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+function getHealthColor(b: Behavior): string {
+  if (b.status === 'paused' && b.failCount >= b.maxFailures) return 'var(--danger)';
+  if (b.status === 'paused') return 'var(--text-secondary)';
+  if (b.failCount > 0) return 'var(--warning)';
+  return 'var(--success)';
+}
+
+function getHealthLabel(b: Behavior): string {
+  if (b.status === 'paused' && b.failCount >= b.maxFailures) return 'Auto-paused';
+  if (b.status === 'paused') return 'Paused';
+  if (b.failCount > 0) return `${b.failCount} failures`;
+  return 'Healthy';
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  scheduled: 'Sched',
+  monitor: 'Monitor',
+  'one-shot': 'Once',
+};
+
+export function BehaviorHealth() {
+  const [behaviors, setBehaviors] = useState<Behavior[]>([]);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    api.getBehaviors().then((res) => {
+      if (res.data) {
+        setBehaviors(res.data.filter((b: any) => b.status !== 'deleted'));
+      }
+    }).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = import.meta.env.DEV ? 'localhost:18800' : window.location.host;
+    const ws = new WebSocket(`${protocol}//${host}/`);
+    wsRef.current = ws;
+
+    ws.onmessage = (evt) => {
+      try {
+        const msg = JSON.parse(evt.data);
+        if (msg.type === 'activity' && msg.payload?.event?.startsWith('behavior.')) {
+          api.getBehaviors().then((res) => {
+            if (res.data) {
+              setBehaviors(res.data.filter((b: any) => b.status !== 'deleted'));
+            }
+          }).catch(() => {});
+        }
+      } catch { /* ignore */ }
+    };
+
+    return () => { ws.close(); };
+  }, []);
+
+  return (
+    <div className="behavior-health">
+      <h3 className="mc-section-title">Behavior Health</h3>
+      {behaviors.length === 0 && (
+        <div className="bh-empty">No behaviors configured</div>
+      )}
+      <div className="bh-list">
+        {behaviors.map((b) => (
+          <div key={b.id} className="bh-card">
+            <div className="bh-card-header">
+              <span className="bh-dot" style={{ background: getHealthColor(b) }} />
+              <span className="bh-action">{b.action.length > 60 ? b.action.slice(0, 57) + '...' : b.action}</span>
+              <span className="bh-type-badge">{TYPE_LABELS[b.type] ?? b.type}</span>
+            </div>
+            <div className="bh-card-meta">
+              <span className="bh-health-label" style={{ color: getHealthColor(b) }}>{getHealthLabel(b)}</span>
+              <span className="bh-stat">{b.runCount} runs</span>
+              {b.lastRun && <span className="bh-stat">{timeAgo(b.lastRun)}</span>}
+            </div>
+            {b.lastResult && (
+              <div className="bh-result">{b.lastResult.length > 120 ? b.lastResult.slice(0, 117) + '...' : b.lastResult}</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/ui/src/components/DataTable.tsx

@@ -0,0 +1,39 @@
+interface Column<T> {
+  key: string;
+  label: string;
+  render?: (row: T) => React.ReactNode;
+}
+
+interface DataTableProps<T> {
+  columns: Column<T>[];
+  rows: T[];
+  keyField: string;
+  actions?: (row: T) => React.ReactNode;
+}
+
+export function DataTable<T extends Record<string, any>>({ columns, rows, keyField, actions }: DataTableProps<T>) {
+  return (
+    <table className="data-table">
+      <thead>
+        <tr>
+          {columns.map((col) => <th key={col.key}>{col.label}</th>)}
+          {actions && <th>Actions</th>}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.length === 0 ? (
+          <tr><td colSpan={columns.length + (actions ? 1 : 0)} className="empty-row">No data</td></tr>
+        ) : (
+          rows.map((row) => (
+            <tr key={row[keyField]}>
+              {columns.map((col) => (
+                <td key={col.key}>{col.render ? col.render(row) : String(row[col.key] ?? '')}</td>
+              ))}
+              {actions && <td className="actions-cell">{actions(row)}</td>}
+            </tr>
+          ))
+        )}
+      </tbody>
+    </table>
+  );
+}

package/ui/src/components/Layout.tsx

@@ -0,0 +1,160 @@
+import { useState, useEffect } from 'react';
+import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import { useApi } from '../hooks/useApi';
+import { usePolling } from '../hooks/usePolling';
+import { api } from '../api';
+
+const CHANNEL_TYPES = ['webchat', 'discord', 'telegram', 'slack', 'twilio', 'matrix', 'signal', 'teams', 'whatsapp', 'email'] as const;
+
+export function Layout() {
+  const [checking, setChecking] = useState(true);
+  const [ready, setReady] = useState(false);
+  const [agentName, setAgentName] = useState('Auxiora');
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    api.getSetupStatus()
+      .then(status => {
+        if (status.agentName) setAgentName(status.agentName);
+        if (status.needsSetup) {
+          navigate('/setup', { replace: true });
+        } else if (!status.vaultUnlocked) {
+          navigate('/unlock', { replace: true });
+        } else {
+          setReady(true);
+        }
+      })
+      .catch(() => {})
+      .finally(() => setChecking(false));
+  }, []);
+
+  // Only make authenticated calls once vault/setup check passes
+  const { data: status, refresh } = useApi(() => ready ? api.getStatus() : Promise.resolve(null), [ready]);
+  const { data: sessions, refresh: refreshSessions } = useApi(() => ready ? api.getSessions() : Promise.resolve(null), [ready]);
+  usePolling(() => { if (ready) { refresh(); refreshSessions(); } });
+
+  if (checking) return null;
+
+  // Derive connected channel types from active sessions
+  const connectedChannels = new Set<string>();
+  if (sessions?.data) {
+    for (const s of sessions.data) {
+      if (s.channelType) connectedChannels.add(s.channelType);
+    }
+  }
+
+  // Only show channels that have connections or are commonly configured
+  const visibleChannels = CHANNEL_TYPES.filter(ch =>
+    connectedChannels.has(ch) || ch === 'webchat'
+  );
+
+  return (
+    <div className="layout">
+      <nav className="sidebar">
+        <div className="sidebar-header">
+          <h1>{agentName}</h1>
+        </div>
+        <ul className="nav-list">
+          {/* MAIN */}
+          <div className="nav-group">
+            <div className="nav-group-label">Main</div>
+            <li>
+              <NavLink to="/chat" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Chat
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'} end>
+                Mission Control
+              </NavLink>
+            </li>
+          </div>
+
+          {/* CHANNELS */}
+          <div className="nav-group">
+            <div className="nav-group-label">Channels</div>
+            {visibleChannels.map(ch => (
+              <li key={ch}>
+                <NavLink to="/settings/channels" className="nav-link">
+                  {ch.charAt(0).toUpperCase() + ch.slice(1)}
+                  <span className={`channel-dot ${connectedChannels.has(ch) ? 'connected' : 'disconnected'}`} />
+                </NavLink>
+              </li>
+            ))}
+          </div>
+
+          {/* MANAGEMENT */}
+          <div className="nav-group">
+            <div className="nav-group-label">Management</div>
+            <li>
+              <NavLink to="/behaviors" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Behaviors
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/webhooks" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Webhooks
+              </NavLink>
+            </li>
+          </div>
+
+          {/* SETTINGS */}
+          <div className="nav-group">
+            <div className="nav-group-label">Settings</div>
+            <li>
+              <NavLink to="/settings/personality" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Personality
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/settings/provider" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Provider
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/settings/channels" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Channels
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/settings/connections" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Connections
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/settings/ambient" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Ambient
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/settings/appearance" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Appearance
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/settings/notifications" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Notifications
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/settings/security" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Security
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/settings/audit" className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}>
+                Audit Log
+              </NavLink>
+            </li>
+          </div>
+        </ul>
+        <button className="logout-btn" onClick={() => api.logout().then(() => { window.location.href = '/dashboard/login'; })}>
+          Logout
+        </button>
+      </nav>
+      <main className="content">
+        <Outlet />
+      </main>
+    </div>
+  );
+}