@auxiora/dashboard 1.0.0 → 1.3.0

package/ui/src/api.ts

@@ -1,238 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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>
-  );
-}