refactor(dashboard): complete overhaul — 11→7 pages, Router v7, design system

.gitignore

@@ -42,6 +42,7 @@ Thumbs.db
 
 # Development artifacts
 .overhaul/
+.worktrees/
 *.local
 .claude/settings.local.json
 

dashboard/package.json

@@ -15,6 +15,7 @@
     "date-fns": "^4.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "7.13.0",
     "recharts": "^3.7.0"
   },
   "devDependencies": {

dashboard/src/App.tsx

@@ -1,21 +1,20 @@
-import { useState } from 'react';
+import { Suspense, lazy } from 'react';
+import { BrowserRouter, Routes, Route, Navigate, useLocation, useNavigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Layout } from './components/Layout';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { WebSocketProvider, useWebSocketContext } from './contexts/WebSocketContext';
 import { AlertBanner } from './components/alerts/AlertBanner';
 import { CommandPalette } from './components/CommandPalette';
-import { Home } from './pages/Home';
-import { Health } from './pages/Health';
-import { Autonomy } from './pages/Autonomy';
-import { Governance } from './pages/Governance';
-import { Memory } from './pages/Memory';
-import { Tools } from './pages/Tools';
-import { Agents } from './pages/Agents';
-import { Audit } from './pages/Audit';
-import { Cognition } from './pages/Cognition';
-import { E2E } from './pages/E2E';
-import { Budget } from './pages/Budget';
+import { PageSkeleton } from './components/PageSkeleton';
+
+const SystemStatus = lazy(() => import('./pages/SystemStatus'));
+const AgentsAndTools = lazy(() => import('./pages/AgentsAndTools'));
+const Cognition = lazy(() => import('./pages/cognition'));
+const Autonomy = lazy(() => import('./pages/Autonomy'));
+const GovernanceAndAudit = lazy(() => import('./pages/GovernanceAndAudit'));
+const Memory = lazy(() => import('./pages/Memory'));
+const Operations = lazy(() => import('./pages/Operations'));
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -28,47 +27,30 @@ const queryClient = new QueryClient({
 });
 
 function AppContent() {
-  const [currentPage, setCurrentPage] = useState('home');
+  const location = useLocation();
+  const navigate = useNavigate();
   const { status: wsStatus } = useWebSocketContext();
-
-  const renderPage = () => {
-    switch (currentPage) {
-      case 'health':
-        return <Health />;
-      case 'autonomy':
-        return <Autonomy />;
-      case 'cognition':
-        return <Cognition />;
-      case 'governance':
-        return <Governance />;
-      case 'memory':
-        return <Memory />;
-      case 'tools':
-        return <Tools />;
-      case 'agents':
-        return <Agents />;
-      case 'audit':
-        return <Audit />;
-      case 'e2e':
-        return <E2E />;
-      case 'budget':
-        return <Budget />;
-      default:
-        return <Home />;
-    }
-  };
+  const currentPage = location.pathname.split('/')[1] || 'system';
 
   return (
     <>
-      {/* Critical Alert Banner */}
-      <AlertBanner onNavigateToAlerts={() => setCurrentPage('audit')} />
-
-      {/* Command Palette */}
-      <CommandPalette onNavigate={setCurrentPage} />
-
-      <Layout currentPage={currentPage} onNavigate={setCurrentPage} wsStatus={wsStatus}>
-        <ErrorBoundary>
-          {renderPage()}
+      <AlertBanner onNavigateToAlerts={() => navigate('/governance')} />
+      <CommandPalette onNavigate={(page) => navigate(`/${page}`)} />
+      <Layout currentPage={currentPage} wsStatus={wsStatus}>
+        <ErrorBoundary key={currentPage}>
+          <Suspense fallback={<PageSkeleton />}>
+            <Routes>
+              <Route path="/" element={<Navigate to="/system" replace />} />
+              <Route path="/system" element={<SystemStatus />} />
+              <Route path="/agents" element={<AgentsAndTools />} />
+              <Route path="/cognition" element={<Cognition />} />
+              <Route path="/autonomy" element={<Autonomy />} />
+              <Route path="/governance" element={<GovernanceAndAudit />} />
+              <Route path="/memory" element={<Memory />} />
+              <Route path="/operations" element={<Operations />} />
+              <Route path="*" element={<Navigate to="/system" replace />} />
+            </Routes>
+          </Suspense>
         </ErrorBoundary>
       </Layout>
     </>
@@ -79,7 +61,9 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <WebSocketProvider>
-        <AppContent />
+        <BrowserRouter>
+          <AppContent />
+        </BrowserRouter>
       </WebSocketProvider>
     </QueryClientProvider>
   );

dashboard/src/api/client.ts

@@ -23,6 +23,10 @@ import type {
   BudgetProfileName,
   BudgetProfileChangeResult,
   ApprovalQueueResponse,
+  DissentReport,
+  EmergencyVote,
+  PendingFeedback,
+  FeedbackStats,
 } from '../types/api';
 
 const API_BASE = '/api';
@@ -92,6 +96,18 @@ export const getGovernanceRules = (): Promise<ConstitutionalRule[]> =>
 export const getQualityGates = (): Promise<QualityGate[]> =>
   fetchAPI('/governance/gates');
 
+export const getDissentReports = (): Promise<DissentReport[]> =>
+  fetchAPI('/governance/dissent-reports');
+
+export const getEmergencyVotes = (): Promise<EmergencyVote[]> =>
+  fetchAPI('/governance/emergency-votes');
+
+export const getPendingFeedback = (): Promise<PendingFeedback[]> =>
+  fetchAPI('/governance/pending-feedback');
+
+export const getFeedbackStats = (): Promise<FeedbackStats> =>
+  fetchAPI('/governance/feedback-stats');
+
 // Memory Endpoints
 export const getMemories = (params?: {
   type?: string;

dashboard/src/components/BudgetPanel.tsx

@@ -74,9 +74,10 @@ export function BudgetPanel() {
     );
   }
 
-  const throttleColor = THROTTLE_COLORS[data.throttle.level];
-  const throttleLabel = THROTTLE_LABELS[data.throttle.level];
-  const throttleIcon = THROTTLE_ICONS[data.throttle.level];
+  const throttleLevel = data.throttle?.level ?? 'normal';
+  const throttleColor = THROTTLE_COLORS[throttleLevel];
+  const throttleLabel = THROTTLE_LABELS[throttleLevel];
+  const throttleIcon = THROTTLE_ICONS[throttleLevel];
 
   return (
     <div
@@ -100,7 +101,7 @@ export function BudgetPanel() {
               className="text-2xl font-bold font-mono"
               style={{ color: throttleColor }}
             >
-              {data.usage.percentUsed.toFixed(1)}%
+              {(data.usage?.percentUsed ?? 0).toFixed(1)}%
             </span>
             <span
               className="text-xs px-2 py-0.5 rounded flex items-center gap-1"
@@ -176,7 +177,7 @@ export function BudgetPanel() {
       </div>
 
       {/* Projected EOD */}
-      {data.throttle.projectedEOD > 0 && (
+      {(data.throttle?.projectedEOD ?? 0) > 0 && (
         <div
           className="mt-4 pt-4"
           style={{ borderTop: '1px solid var(--border-muted)' }}

dashboard/src/components/CommandPalette.tsx

@@ -17,14 +17,13 @@ interface SearchItem {
 }
 
 const PAGES: SearchItem[] = [
-  { id: 'home', type: 'page', title: 'Overview', description: 'Dashboard home', icon: '◉', onSelect: () => {} },
-  { id: 'health', type: 'page', title: 'Health', description: 'System status', icon: '♥', onSelect: () => {} },
+  { id: 'system', type: 'page', title: 'System Status', description: 'Overview & Health', icon: '◉', onSelect: () => {} },
+  { id: 'agents', type: 'page', title: 'Agents & Tools', description: 'Agent status & tool registry', icon: '⬡', onSelect: () => {} },
+  { id: 'cognition', type: 'page', title: 'Cognition', description: 'LOGOS/ETHOS/PATHOS', icon: '🧠', onSelect: () => {} },
   { id: 'autonomy', type: 'page', title: 'Autonomy', description: 'Scheduler & Subagents', icon: '↻', onSelect: () => {} },
-  { id: 'agents', type: 'page', title: 'Agents', description: 'Agent status', icon: '⬡', onSelect: () => {} },
-  { id: 'governance', type: 'page', title: 'Governance', description: 'Council & Rules', icon: '⚖', onSelect: () => {} },
+  { id: 'governance', type: 'page', title: 'Governance', description: 'Council, Rules & Audit', icon: '⚖', onSelect: () => {} },
   { id: 'memory', type: 'page', title: 'Memory', description: 'Knowledge base', icon: '⬢', onSelect: () => {} },
-  { id: 'tools', type: 'page', title: 'Tools', description: 'Tool registry', icon: '⚙', onSelect: () => {} },
-  { id: 'audit', type: 'page', title: 'Audit Trail', description: 'Hash chain', icon: '⊞', onSelect: () => {} },
+  { id: 'operations', type: 'page', title: 'Operations', description: 'Budget & E2E Tests', icon: '⚙', onSelect: () => {} },
 ];
 
 export function CommandPalette({ onNavigate }: CommandPaletteProps) {

dashboard/src/components/Layout.tsx

@@ -6,22 +6,15 @@ import type { ConnectionStatus } from '../hooks/useWebSocket';
 interface LayoutProps {
   children: ReactNode;
   currentPage: string;
-  onNavigate: (page: string) => void;
   wsStatus?: ConnectionStatus;
 }
 
-export function Layout({ children, currentPage, onNavigate, wsStatus = 'disconnected' }: LayoutProps) {
+export function Layout({ children, currentPage, wsStatus = 'disconnected' }: LayoutProps) {
   return (
     <>
       <SkipLink />
-      <div
-        className="flex h-screen"
-        style={{
-          background: 'var(--bg-primary)',
-          color: 'var(--text-primary)',
-        }}
-      >
-        <Sidebar currentPage={currentPage} onNavigate={onNavigate} wsStatus={wsStatus} />
+      <div className="flex h-screen bg-bg-primary text-text-primary">
+        <Sidebar currentPage={currentPage} wsStatus={wsStatus} />
         <main
           id="main-content"
           className="flex-1 overflow-auto custom-scrollbar bg-ari-radial"

dashboard/src/components/PageSkeleton.tsx

@@ -0,0 +1,31 @@
+export function PageSkeleton() {
+  return (
+    <div className="space-y-6 animate-pulse p-6">
+      {/* Header skeleton */}
+      <div className="flex items-center gap-3">
+        <div className="h-8 w-8 rounded-lg bg-bg-tertiary" />
+        <div className="space-y-1.5">
+          <div className="h-5 w-40 rounded bg-bg-tertiary" />
+          <div className="h-3 w-24 rounded bg-bg-tertiary" />
+        </div>
+      </div>
+
+      {/* Tab bar skeleton */}
+      <div className="h-10 w-64 rounded-xl bg-bg-tertiary" />
+
+      {/* Metric cards skeleton */}
+      <div className="grid grid-cols-3 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-20 rounded-xl bg-bg-tertiary" />
+        ))}
+      </div>
+
+      {/* Content skeleton */}
+      <div className="space-y-3">
+        <div className="h-12 rounded-xl bg-bg-tertiary" />
+        <div className="h-12 rounded-xl bg-bg-tertiary" />
+        <div className="h-12 rounded-xl bg-bg-tertiary" />
+      </div>
+    </div>
+  );
+}