CUB-122: Scaffold Control Center React frontend

2026-05-07 20:15:30 -04:00
parent cce3e061a7
commit 8da593c450
116 changed files with 10724 additions and 6611 deletions
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@@ -1,33 +0,0 @@
-# Dependencies
-node_modules/
-npm-debug.log*
-yarn-error.log
-
-# Build output (rebuilt in container)
-dist/
-out-tsc/
-
-# Angular cache
-.angular/cache/
-
-# IDE
-.idea/
-.vscode/
-*.sublime-workspace
-
-# OS files
-.DS_Store
-Thumbs.db
-
-# Git
-.git/
-.gitignore
-
-# Docker
-Dockerfile
-.dockerignore
-
-# Misc
-coverage/
-tmp/
-*.log
--- a/frontend/.editorconfig
+++ b/frontend/.editorconfig
@@ -1,17 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-ij_typescript_use_double_quotes = false
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,44 +1,24 @@
-# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*

-# Compiled output
-/dist
-/tmp
-/out-tsc
-/bazel-out
+node_modules
+dist
+dist-ssr
+*.local

-# Node
-/node_modules
-npm-debug.log
-yarn-error.log
-
-# IDEs and editors
-.idea/
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# Visual Studio Code
+# Editor directories and files
 .vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
 !.vscode/extensions.json
-!.vscode/mcp.json
-.history/*
-
-# Miscellaneous
-/.angular/cache
-.sass-cache/
-/connect.lock
-/coverage
-/libpeerconnection.log
-testem.log
-/typings
-__screenshots__/
-
-# System files
+.idea
 .DS_Store
-Thumbs.db
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -1,12 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true,
-  "overrides": [
-    {
-      "files": "*.html",
-      "options": {
-        "parser": "angular"
-      }
-    }
-  ]
-}
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}
--- a/frontend/.vscode/launch.json
+++ b/frontend/.vscode/launch.json
@@ -1,20 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}
--- a/frontend/.vscode/mcp.json
+++ b/frontend/.vscode/mcp.json
@@ -1,9 +0,0 @@
-{
-  // For more information, visit: https://angular.dev/ai/mcp
-  "servers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
--- a/frontend/.vscode/tasks.json
+++ b/frontend/.vscode/tasks.json
@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "Changes detected"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation (complete|failed)"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "Changes detected"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation (complete|failed)"
-          }
-        }
-      }
-    }
-  ]
-}
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,6 +1,6 @@
 # ============================================================
 # Control Center Frontend — Multi-stage Docker Build
-# Angular 21 + nginx for static serving + API proxy
+# React 19 + Vite + nginx for static serving + API proxy
 # ============================================================

 # --- Build Stage ---
@@ -25,8 +25,8 @@ RUN rm /etc/nginx/conf.d/default.conf
 # Copy custom nginx config
 COPY nginx.conf /etc/nginx/conf.d/default.conf

-# Copy built Angular app from builder stage
-COPY --from=builder /app/dist/frontend/browser /usr/share/nginx/html
+# Copy built React app from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html

 # Expose HTTP port
 EXPOSE 80
@@ -35,4 +35,4 @@ EXPOSE 80
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD wget -qO- http://localhost/ || exit 1

-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,59 +1,73 @@
-# Frontend
+# React + TypeScript + Vite

-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.8.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

-## Development server
+Currently, two official plugins are available:

-To start a local development server, run:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)

-```bash
-ng serve
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
 ```

-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

-## Code scaffolding
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'

-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
 ```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the project run:
-
-```bash
-ng build
-```
-
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -1,103 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "packageManager": "npm"
-  },
-  "newProjectRoot": "projects",
-  "projects": {
-    "frontend": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss",
-          "skipTests": true
-        },
-        "@schematics/angular:class": {
-          "skipTests": true
-        },
-        "@schematics/angular:directive": {
-          "skipTests": true
-        },
-        "@schematics/angular:guard": {
-          "skipTests": true
-        },
-        "@schematics/angular:interceptor": {
-          "skipTests": true
-        },
-        "@schematics/angular:pipe": {
-          "skipTests": true
-        },
-        "@schematics/angular:resolver": {
-          "skipTests": true
-        },
-        "@schematics/angular:service": {
-          "skipTests": true
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:application",
-          "options": {
-            "browser": "src/main.ts",
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "stylePreprocessorOptions": {
-              "includePaths": [
-"src",
-                "src/styles"
-              ]
-            }
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "frontend:build:production"
-            },
-            "development": {
-              "buildTarget": "frontend:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        }
-      }
-    }
-  }
-}
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Control Center</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -12,7 +12,7 @@ server {
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

-    # Cache static assets (Angular uses content hashes)
+    # Cache static assets (Vite uses content hashes)
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
@@ -34,21 +34,8 @@ server {
        proxy_set_header X-Forwarded-Proto $scheme;
    }

-    # Proxy SignalR WebSocket connections to backend
-    location /hubs/ {
-        proxy_pass http://backend:8080/hubs/;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_read_timeout 86400;
-    }
-
-    # Angular SPA — all other routes fall back to index.html
+    # React SPA — all other routes fall back to index.html
    location / {
        try_files $uri $uri/ /index.html;
    }
-}
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,34 +1,38 @@
 {
  "name": "frontend",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
-  },
  "private": true,
-  "packageManager": "npm@11.11.0",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
  "dependencies": {
-    "@angular/animations": "^21.2.10",
-    "@angular/cdk": "^21.2.8",
-    "@angular/common": "^21.2.0",
-    "@angular/compiler": "^21.2.0",
-    "@angular/core": "^21.2.0",
-    "@angular/forms": "^21.2.0",
-    "@angular/material": "^21.2.8",
-    "@angular/platform-browser": "^21.2.0",
-    "@angular/router": "^21.2.0",
-    "@microsoft/signalr": "^10.0.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0"
+    "@tanstack/react-query": "^5.100.9",
+    "axios": "^1.16.0",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.15.0"
  },
  "devDependencies": {
-    "@angular/build": "^21.2.8",
-    "@angular/cli": "^21.2.8",
-    "@angular/compiler-cli": "^21.2.0",
-    "prettier": "^3.8.1",
-    "typescript": "~5.9.2"
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^4.2.4",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.10"
  }
 }
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
--- a/frontend/public/icons.svg
+++ b/frontend/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,23 @@
+import { Routes, Route } from 'react-router-dom'
+import Layout from './components/Layout'
+import HubPage from './pages/HubPage'
+import LogsPage from './pages/LogsPage'
+import ProjectsPage from './pages/ProjectsPage'
+import SessionsPage from './pages/SessionsPage'
+import SettingsPage from './pages/SettingsPage'
+
+function App() {
+  return (
+    <Layout>
+      <Routes>
+        <Route path="/" element={<HubPage />} />
+        <Route path="/logs" element={<LogsPage />} />
+        <Route path="/projects" element={<ProjectsPage />} />
+        <Route path="/sessions" element={<SessionsPage />} />
+        <Route path="/settings" element={<SettingsPage />} />
+      </Routes>
+    </Layout>
+  )
+}
+
+export default App
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -1,13 +0,0 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
-    provideAnimationsAsync(),
-  ],
-};
--- a/frontend/src/app/app.html
+++ b/frontend/src/app/app.html
@@ -1 +0,0 @@
-<router-outlet />
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -1,22 +0,0 @@
-import { Routes } from '@angular/router';
-import { LayoutShellComponent } from './layout/layout-shell/layout-shell.component';
-import { HubPageComponent } from './pages/hub/hub-page.component';
-import { ProjectsPageComponent } from './pages/projects/projects-page.component';
-import { SessionsPageComponent } from './pages/sessions/sessions-page.component';
-import { LogsPageComponent } from './pages/logs/logs-page.component';
-import { SettingsPageComponent } from './pages/settings/settings-page.component';
-
-export const routes: Routes = [
-  {
-    path: '',
-    component: LayoutShellComponent,
-    children: [
-      { path: '', redirectTo: 'hub', pathMatch: 'full' },
-      { path: 'hub', component: HubPageComponent },
-      { path: 'projects', component: ProjectsPageComponent },
-      { path: 'sessions', component: SessionsPageComponent },
-      { path: 'logs', component: LogsPageComponent },
-      { path: 'settings', component: SettingsPageComponent },
-    ],
-  },
-];
--- a/frontend/src/app/app.scss
+++ b/frontend/src/app/app.scss
@@ -1,4 +0,0 @@
-:host {
-  display: block;
-  min-height: 100vh;
-}
--- a/frontend/src/app/app.ts
+++ b/frontend/src/app/app.ts
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet],
-  template: '<router-outlet />',
-  styles: [`
-    :host {
-      display: block;
-      min-height: 100vh;
-    }
-  `],
-})
-export class App {}
--- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.html
+++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.html
@@ -1,100 +0,0 @@
-<!-- ========================================================================== -->
-<!-- AgentCard — per spec Section 7.3                                            -->
-<!-- Integrates: Status Badge · Task Progress Bar · Quick‑Jump Button           -->
-<!-- Left‑border accent matches status color. role="article" + aria‑labels.     -->
-<!-- Enhanced: data-status attribute, elapsed time, design tokens.              -->
-<!-- ========================================================================== -->
-<article
-  class="agent-card"
-  role="article"
-  [attr.data-status]="status"
-  [attr.aria-label]="(displayName || agentId) + ' — ' + statusLabel()"
-  [style.border-left-color]="statusBorderColor()"
-  (click)="cardClick.emit(sessionKey)"
-  appLongPress
-  [appLongPressDuration]="500"
-  (appLongPress)="cardLongPress.emit(sessionKey)"
-  tabindex="0"
->
-
-  <!-- ── Header: status badge + agent info ── -->
-  <div class="agent-card__header">
-    <div class="agent-card__badge" [attr.aria-label]="'Status: ' + statusLabel()">
-      <span
-        class="status-dot"
-        [ngClass]="[statusDotClass()]"
-      ></span>
-      <span class="agent-card__status-label">{{ statusLabel() }}</span>
-    </div>
-
-    <div class="agent-card__identity">
-      <span class="agent-card__name">{{ displayName || agentId }}</span>
-      <span class="agent-card__role">{{ role }}</span>
-    </div>
-  </div>
-
-  <!-- ── Body: current task ── -->
-  <div class="agent-card__body" *ngIf="task || isError()">
-    <p
-      class="agent-card__task"
-      [class.agent-card__task--error]="isError()"
-      [attr.aria-label]="'Current task: ' + (isError() ? errorMessage || task : task)"
-    >
-      {{ isError() ? errorMessage || task : task }}
-    </p>
-  </div>
-
-  <!-- ── Task Progress Bar ── -->
-  <div
-    class="agent-card__progress"
-    *ngIf="showProgress()"
-    [attr.aria-label]="'Task progress: ' + progress + '%'"
-  >
-    <mat-progress-bar
-      mode="determinate"
-      [value]="progress"
-      [aria-label]="'Progress ' + progress + '% complete'"
-    ></mat-progress-bar>
-    <span class="agent-card__progress-label text-mono">{{ progress }}%</span>
-  </div>
-
-  <!-- ── Elapsed Time ── -->
-  <div
-    class="agent-card__elapsed"
-    *ngIf="taskElapsed && isActiveLike()"
-    [attr.aria-label]="'Elapsed: ' + taskElapsed"
-  >
-    <mat-icon aria-hidden="true" class="agent-card__elapsed-icon">schedule</mat-icon>
-    <span class="text-mono">{{ taskElapsed }}</span>
-  </div>
-
-  <!-- ── Footer: channel + last activity + quick‑jump ── -->
-  <div class="agent-card__footer">
-    <div class="agent-card__meta">
-      <span
-        class="agent-card__channel text-mono"
-        [attr.aria-label]="'Channel: ' + channel"
-      >
-        <mat-icon aria-hidden="true">{{ channelIcon() }}</mat-icon>
-        {{ channel }}
-      </span>
-      <span
-        class="agent-card__last-activity text-mono"
-        [attr.aria-label]="'Last activity: ' + lastActivityLabel()"
-      >
-        {{ lastActivityLabel() }}
-      </span>
-    </div>
-
-    <!-- Quick‑Jump Button -->
-    <a
-      class="agent-card__jump"
-      mat-button
-      [routerLink]="jumpRoute()"
-      [attr.aria-label]="'Jump to session for ' + (displayName || agentId)"
-      matTooltip="Jump to session"
-    >
-      <mat-icon aria-hidden="true">arrow_forward</mat-icon>
-    </a>
-  </div>
-</article>
--- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss
+++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss
@@ -1,267 +0,0 @@
-// ============================================================================
-// AgentCard — M3 tactical dark styling
-// Per spec Section 7.3: left‑border accent, status‑aware coloring,
-// responsive card layout with 320px min‑width.
-// Enhanced: data-status selectors, elapsed time, design token imports.
-// ============================================================================
-
-@use 'tokens' as tokens;
-
-.agent-card {
-  display: flex;
-  flex-direction: column;
-  min-width: tokens.$cc-card-min-width;
-  padding: tokens.$cc-card-padding;
-  background-color: var(--cc-surface-container);
-  border-radius: tokens.$cc-card-border-radius;
-  border-left: 4px solid var(--status-offline); // default; overridden by [style]
-  border-top: 1px solid var(--cc-outline);
-  border-right: 1px solid var(--cc-outline);
-  border-bottom: 1px solid var(--cc-outline);
-  gap: 16px;
-  transition: border-left-color 0.3s ease, box-shadow 0.2s ease;
-  cursor: default;
-
-  &:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  }
-
-  // CUB-26: Card is now clickable for session drawer
-  cursor: pointer;
-
-  &:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-  }
-
-  &:focus-within {
-    outline: 2px solid var(--status-active);
-    outline-offset: 2px;
-  }
-}
-
-// ── Header ──
-.agent-card__header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.agent-card__badge {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border-radius: 12px;
-  background-color: var(--status-active-bg); // overridden per status below
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  color: var(--cc-on-surface);
-}
-
-.agent-card__status-label {
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--cc-on-surface-variant);
-}
-
-.agent-card__identity {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.agent-card__name {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-  line-height: 1.2;
-}
-
-.agent-card__role {
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--cc-on-surface-variant);
-}
-
-// ── Body ──
-.agent-card__body {
-  padding: 4px 0;
-}
-
-.agent-card__task {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 400;
-  color: var(--cc-on-surface);
-  line-height: 1.4;
-
-  &--error {
-    color: var(--status-error);
-  }
-}
-
-// ── Progress Bar ──
-.agent-card__progress {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0;
-}
-
-.agent-card__progress-label {
-  font-family: var(--cc-font-mono);
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--cc-on-surface-variant);
-  white-space: nowrap;
-  min-width: 36px;
-}
-
-// Override mat-progress-bar to match tactical dark theme
-.agent-card__progress ::ng-deep .mat-mdc-progress-bar {
-  height: 4px;
-  border-radius: 2px;
-
-  .mdc-linear-progress__bar-inner {
-    background-color: var(--status-active);
-  }
-
-  .mdc-linear-progress__track {
-    background-color: var(--cc-outline);
-  }
-}
-
-// ── Elapsed Time ──
-.agent-card__elapsed {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--cc-on-surface-variant);
-  padding: 2px 0;
-}
-
-.agent-card__elapsed-icon {
-  font-size: 14px;
-  width: 14px;
-  height: 14px;
-  color: var(--status-thinking);
-}
-
-// ── Footer ──
-.agent-card__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: auto; // push footer to bottom
-}
-
-.agent-card__meta {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.agent-card__channel {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--cc-on-surface-variant);
-}
-
-.agent-card__channel .mat-icon {
-  font-size: 14px;
-  width: 14px;
-  height: 14px;
-}
-
-.agent-card__last-activity {
-  font-size: 12px;
-  color: var(--cc-on-surface-variant);
-}
-
-// ── Quick‑Jump Button ──
-.agent-card__jump {
-  flex-shrink: 0;
-
-  .mat-mdc-button {
-    min-width: 36px;
-    padding: 0 8px;
-    color: var(--status-active);
-  }
-
-  .mat-icon {
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-  }
-}
-
-// ── Status‑specific background tints for badge ──
-// Using data-status attribute selectors for clean styling.
-
-.agent-card[data-status="active"] .agent-card__badge {
-  background-color: var(--status-active-bg);
-}
-
-.agent-card[data-status="idle"] .agent-card__badge {
-  background-color: var(--status-idle-bg);
-}
-
-.agent-card[data-status="thinking"] .agent-card__badge {
-  background-color: var(--status-thinking-bg);
-}
-
-.agent-card[data-status="error"] .agent-card__badge {
-  background-color: var(--status-error-bg);
-}
-
-.agent-card[data-status="offline"] .agent-card__badge {
-  background-color: var(--cc-surface-container-high);
-}
-
-// ── Active‑like pulse on card border ──
-.agent-card[data-status="active"],
-.agent-card[data-status="thinking"] {
-  border-left-width: 4px;
-}
-
-.agent-card[data-status="error"] {
-  border-left-color: var(--status-error);
-}
-
-// ── Responsive ──
-@media (max-width: tokens.$cc-breakpoint-mobile) {
-  .agent-card {
-    min-width: unset;
-    padding: 16px;
-  }
-
-  .agent-card__header {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .agent-card__footer {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .agent-card__meta {
-    gap: 8px;
-  }
-}
-
-// ── Accessibility: reduced motion ──
-@media (prefers-reduced-motion: reduce) {
-  .agent-card {
-    transition: none;
-  }
-}
--- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts
+++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts
@@ -1,183 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  Output,
-  computed,
-  effect,
-  inject,
-  signal,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { AgentStatus } from '../../../models/agent.model';
-import { LongPressDirective } from '../../../directives/long-press.directive';
-import {
-  STATUS_COLORS,
-  STATUS_LABELS,
-  CHANNEL_ICONS,
-} from '../../../design/tokens';
-
-// ============================================================================
-// AgentCard Component
-// Per spec Section 7.3: Composes Agent Status Badge, Task Progress Bar,
-// and Quick‑Jump Button into a card with left‑border status accent.
-// CUB-26: Emits cardClick and cardLongPress for drawer/modal integration.
-// Enhanced with data-status attribute, elapsed time, and design tokens.
-// ============================================================================
-
-@Component({
-  selector: 'app-agent-card',
-  standalone: true,
-  imports: [
-    CommonModule,
-    RouterModule,
-    MatIconModule,
-    MatButtonModule,
-    MatProgressBarModule,
-    MatTooltipModule,
-    LongPressDirective,
-  ],
-  templateUrl: './agent-card.component.html',
-  styleUrl: './agent-card.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AgentCardComponent implements OnDestroy {
-  // --- Six required inputs per spec ---
-
-  /** Agent status — drives badge color and left‑border accent */
-  @Input({ required: true }) status!: AgentStatus;
-
-  /** Current task description, e.g. "Reviewing PR #42" */
-  @Input() task = '';
-
-  /** Task progress percentage 0–100 */
-  @Input() progress = 0;
-
-  /** Full session key for quick‑jump navigation */
-  @Input({ required: true }) sessionKey = '';
-
-  /** Communication channel, e.g. "telegram" */
-  @Input({ required: true }) channel = '';
-
-  /** Timestamp of last agent activity */
-  @Input({ required: true }) lastActivity!: Date;
-
-  // --- Additional display inputs ---
-
-  /** Short agent ID, e.g. "otto" */
-  @Input() agentId = '';
-
-  /** Display name, e.g. "Otto" */
-  @Input() displayName = '';
-
-  /** Role description, e.g. "Orchestrator Agent" */
-  @Input() role = '';
-
-  /** Error message (shown only when status is 'error') */
-  @Input() errorMessage = '';
-
-  /** Elapsed time string, e.g. "04m 12s" */
-  @Input() taskElapsed = '';
-
-  // --- CUB-26: Outputs for drawer/modal integration ---
-
-  /** Emitted when the card is clicked — opens the session drawer. */
-  @Output() readonly cardClick = new EventEmitter<string>();
-
-  /** Emitted when the card is long-pressed — bypasses drawer, opens session log directly. */
-  @Output() readonly cardLongPress = new EventEmitter<string>();
-
-  // --- Internal state ---
-
-  /** Timer for refreshing relative-time label */
-  private _timer: ReturnType<typeof setInterval> | null = null;
-
-  /** Internal signal to trigger relative-time recomputation */
-  private readonly _tick = signal(0);
-
-  // --- Computed values using design tokens ---
-
-  /** Map status → CSS custom property for the left‑border accent */
-  readonly statusBorderColor = computed(() => {
-    const map: Record<AgentStatus, string> = {
-      active: 'var(--status-active)',
-      idle: 'var(--status-idle)',
-      thinking: 'var(--status-thinking)',
-      error: 'var(--status-error)',
-      offline: 'var(--status-offline)',
-    };
-    return map[this.status] ?? 'var(--status-offline)';
-  });
-
-  /** Human‑readable status label (from design tokens) */
-  readonly statusLabel = computed(() => STATUS_LABELS[this.status] ?? this.status);
-
-  /** CSS class suffix for the status badge dot */
-  readonly statusDotClass = computed(() => `status-dot--${this.status}`);
-
-  /** Material icon name for the channel (from design tokens) */
-  readonly channelIcon = computed(() => CHANNEL_ICONS[this.channel] ?? 'chat');
-
-  /** Relative time string for lastActivity, refreshed every 30s */
-  readonly lastActivityLabel = computed(() => {
-    // Read tick to create dependency that forces recomputation
-    this._tick();
-    return this._relativeTime(this.lastActivity);
-  });
-
-  /** Quick‑jump route derived from sessionKey */
-  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
-
-  /** Whether progress bar should show */
-  readonly showProgress = computed(() => this.progress > 0 && this.status !== 'error');
-
-  /** Whether error state is active */
-  readonly isError = computed(() => this.status === 'error');
-
-  /** Whether card is in an active-like state (active or thinking) */
-  readonly isActiveLike = computed(() => this.status === 'active' || this.status === 'thinking');
-
-  constructor() {
-    // Start the relative-time refresh timer
-    this._startTimer();
-  }
-
-  ngOnDestroy(): void {
-    this._stopTimer();
-  }
-
-  // --- Private helpers ---
-
-  private _relativeTime(date: Date | null | undefined): string {
-    if (!date) return '';
-    const now = Date.now();
-    const then = date.getTime();
-    const diffSec = Math.max(0, Math.floor((now - then) / 1000));
-    if (diffSec < 60) return 'just now';
-    if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
-    if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
-    return `${Math.floor(diffSec / 86400)}d ago`;
-  }
-
-  private _startTimer(): void {
-    this._stopTimer();
-    this._timer = setInterval(() => {
-      // Increment tick to force lastActivityLabel recomputation
-      this._tick.update(v => v + 1);
-    }, 30_000);
-  }
-
-  private _stopTimer(): void {
-    if (this._timer) {
-      clearInterval(this._timer);
-      this._timer = null;
-    }
-  }
-}
--- a/frontend/src/app/command-hub/components/index.ts
+++ b/frontend/src/app/command-hub/components/index.ts
@@ -1 +0,0 @@
-export * from './agent-card/agent-card.component';
--- a/frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.html
+++ b/frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.html
@@ -1,112 +0,0 @@
-<!-- ======================================================================== -->
-<!-- Adaptive Navigation — Desktop sidebar / Mobile header                    -->
-<!-- Desktop (≥768px): 72px sidebar with full navigation items                -->
-<!-- Mobile (<768px):  56px compact header with hamburger menu                -->
-<!-- ======================================================================== -->
-
-<!-- ======================= DESKTOP SIDEBAR (≥768px) ======================= -->
-<aside class="adaptive-nav__sidebar" aria-label="Navigation sidebar">
-  <!-- Brand / Toggle header -->
-  <div class="adaptive-nav__sidebar-header">
-    <span class="adaptive-nav__brand">OC</span>
-  </div>
-
-  <!-- Navigation destinations -->
-  <nav class="adaptive-nav__sidebar-nav">
-    @for (dest of destinations; track dest.route) {
-      <a
-        class="adaptive-nav__sidebar-item"
-        [routerLink]="dest.route"
-        routerLinkActive="adaptive-nav__sidebar-item--active"
-        [attr.aria-label]="dest.label"
-      >
-        <mat-icon
-          [matBadge]="dest.badge ?? 0"
-          [matBadgeHidden]="!dest.badge"
-          matBadgePosition="above after"
-          matBadgeSize="small"
-        >
-          {{ dest.icon }}
-        </mat-icon>
-        <span class="adaptive-nav__sidebar-label">{{ dest.label }}</span>
-      </a>
-    }
-  </nav>
-
-  <!-- Sidebar footer: LIVE indicator + action buttons -->
-  <div class="adaptive-nav__sidebar-footer">
-    <div class="adaptive-nav__live" [class.adaptive-nav__live--connected]="isConnected()">
-      <span
-        class="adaptive-nav__live-dot"
-        [class.adaptive-nav__live-dot--connected]="isConnected()"
-      ></span>
-      <mat-chip
-        class="adaptive-nav__live-chip"
-        [highlighted]="isConnected()"
-        [disabled]="!isConnected()"
-      >
-        {{ isConnected() ? 'LIVE' : 'OFFLINE' }}
-      </mat-chip>
-    </div>
-
-    <!-- Action buttons (placeholder) -->
-    <div class="adaptive-nav__sidebar-actions">
-      <button mat-icon-button aria-label="Notifications">
-        <mat-icon>notifications</mat-icon>
-      </button>
-      <button mat-icon-button aria-label="Settings">
-        <mat-icon>settings</mat-icon>
-      </button>
-    </div>
-  </div>
-</aside>
-
-<!-- ======================= MOBILE HEADER (<768px) ======================== -->
-<header class="adaptive-nav__mobile-header" role="banner">
-  <!-- Hamburger menu button -->
-  <button
-    class="adaptive-nav__hamburger"
-    mat-icon-button
-    [attr.aria-label]="mobileMenuOpen() ? 'Close menu' : 'Open menu'"
-    [attr.aria-expanded]="mobileMenuOpen()"
-    (click)="toggleMobileMenu()"
-  >
-    <mat-icon>{{ mobileMenuOpen() ? 'close' : 'menu' }}</mat-icon>
-  </button>
-
-  <!-- Title -->
-  <h1 class="adaptive-nav__mobile-title">Command Hub</h1>
-
-  <!-- LIVE indicator (always visible on mobile) -->
-  <div class="adaptive-nav__live adaptive-nav__live--mobile" [class.adaptive-nav__live--connected]="isConnected()">
-    <span
-      class="adaptive-nav__live-dot"
-      [class.adaptive-nav__live-dot--connected]="isConnected()"
-    ></span>
-    <span class="adaptive-nav__live-text">{{ isConnected() ? 'LIVE' : 'OFFLINE' }}</span>
-  </div>
-
-  <!-- Mobile action buttons (placeholder) -->
-  <button class="adaptive-nav__mobile-action" mat-icon-button aria-label="Notifications">
-    <mat-icon>notifications</mat-icon>
-  </button>
-</header>
-
-<!-- ======================= MOBILE DRAWER OVERLAY ========================= -->
-@if (mobileMenuOpen()) {
-  <div class="adaptive-nav__overlay" (click)="closeMobileMenu()" role="presentation"></div>
-  <nav class="adaptive-nav__mobile-drawer" aria-label="Mobile navigation menu">
-    @for (dest of destinations; track dest.route) {
-      <a
-        class="adaptive-nav__drawer-item"
-        [routerLink]="dest.route"
-        routerLinkActive="adaptive-nav__drawer-item--active"
-        [attr.aria-label]="dest.label"
-        (click)="closeMobileMenu()"
-      >
-        <mat-icon>{{ dest.icon }}</mat-icon>
-        <span class="adaptive-nav__drawer-label">{{ dest.label }}</span>
-      </a>
-    }
-  </nav>
-}
--- a/frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.scss
+++ b/frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.scss
@@ -1,365 +0,0 @@
-// ============================================================================
-// Adaptive Navigation — Desktop sidebar / Mobile header
-// Per CUB-27 spec breakpoints:
-//   Compact  (0–599px):  Mobile header + hamburger + drawer
-//   Medium   (600–1023px): Collapsed sidebar (icon-only, 72px)
-//   Expanded (≥1024px):  Full sidebar with labels (72px collapsed, 256px expanded)
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Desktop Sidebar (visible ≥600px)
-// ---------------------------------------------------------------------------
-.adaptive-nav__sidebar {
-  display: none; // Hidden by default (mobile-first)
-  flex-direction: column;
-  width: var(--cc-nav-rail-collapsed-width, 72px);
-  min-height: 100vh;
-  background-color: var(--cc-surface-container-high);
-  border-right: 1px solid var(--cc-outline);
-  z-index: 10;
-}
-
-.adaptive-nav__sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 64px;
-  border-bottom: 1px solid var(--cc-outline);
-}
-
-.adaptive-nav__brand {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--status-active);
-  letter-spacing: 0.04em;
-}
-
-.adaptive-nav__sidebar-nav {
-  flex: 1;
-  padding-top: 8px;
-}
-
-.adaptive-nav__sidebar-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  min-height: 56px;
-  padding: 8px 0;
-  margin: 2px 8px;
-  border-radius: 28px;
-  color: var(--cc-on-surface-variant);
-  text-decoration: none;
-  transition: background-color 150ms ease, color 150ms ease;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-    color: var(--cc-on-surface);
-  }
-
-  &--active {
-    background-color: var(--status-active-bg);
-    color: var(--status-active);
-
-    .adaptive-nav__sidebar-label {
-      font-weight: 500;
-    }
-  }
-}
-
-.adaptive-nav__sidebar-label {
-  font-size: 11px;
-  font-weight: 400;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
-}
-
-// ---------------------------------------------------------------------------
-// Sidebar Footer — LIVE indicator + action buttons
-// ---------------------------------------------------------------------------
-.adaptive-nav__sidebar-footer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 0 20px;
-  border-top: 1px solid var(--cc-outline);
-}
-
-.adaptive-nav__sidebar-actions {
-  display: flex;
-  gap: 4px;
-
-  .mat-mdc-icon-button {
-    color: var(--cc-on-surface-variant) !important;
-    --mdc-icon-button-icon-size: 20px;
-
-    &:hover {
-      color: var(--cc-on-surface) !important;
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// LIVE Status Indicator
-// ---------------------------------------------------------------------------
-.adaptive-nav__live {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  border-radius: 16px;
-  transition: background-color 200ms ease;
-
-  &--connected {
-    background-color: var(--status-active-bg);
-  }
-}
-
-.adaptive-nav__live-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  min-width: 8px;
-  border-radius: 50%;
-  background-color: var(--status-error);
-  transition: background-color 200ms ease;
-
-  &--connected {
-    background-color: var(--status-active);
-    animation: pulse-active 2s ease-in-out infinite;
-  }
-}
-
-.adaptive-nav__live-chip {
-  font-size: 11px !important;
-  font-weight: 600 !important;
-  letter-spacing: 0.06em;
-  height: 24px !important;
-  min-height: 24px !important;
-  padding: 0 8px !important;
-  color: var(--status-active) !important;
-  --mdc-chip-elevated-container-color: transparent;
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-
-.adaptive-nav__live-text {
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  color: var(--status-active);
-}
-
-// ---------------------------------------------------------------------------
-// Mobile Header (visible <600px only)
-// ---------------------------------------------------------------------------
-.adaptive-nav__mobile-header {
-  display: none; // Hidden on desktop, shown on mobile via media query
-  align-items: center;
-  height: var(--cc-header-height-compact, 56px);
-  padding: 0 12px;
-  background-color: var(--cc-surface-container-high);
-  border-bottom: 1px solid var(--cc-outline);
-  z-index: 20;
-  gap: 8px;
-}
-
-.adaptive-nav__hamburger {
-  color: var(--cc-on-surface-variant) !important;
-  min-width: 48px;
-  min-height: 48px;
-
-  &:hover {
-    color: var(--cc-on-surface) !important;
-  }
-}
-
-.adaptive-nav__mobile-title {
-  flex: 1;
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--cc-on-surface);
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.adaptive-nav__live--mobile {
-  padding: 4px 10px;
-  border-radius: 16px;
-
-  .adaptive-nav__live-text {
-    font-size: 11px;
-    font-weight: 700;
-  }
-}
-
-.adaptive-nav__mobile-action {
-  color: var(--cc-on-surface-variant) !important;
-  min-width: 48px;
-  min-height: 48px;
-
-  &:hover {
-    color: var(--cc-on-surface) !important;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Mobile Drawer
-// ---------------------------------------------------------------------------
-.adaptive-nav__overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 40;
-}
-
-.adaptive-nav__mobile-drawer {
-  position: fixed;
-  top: var(--cc-header-height-compact, 56px); // Below header
-  left: 0;
-  bottom: 0;
-  width: 280px;
-  max-width: 80vw;
-  background-color: var(--cc-surface-container);
-  border-right: 1px solid var(--cc-outline);
-  z-index: 50;
-  padding: 12px 0;
-  overflow-y: auto;
-  animation: slide-in-left 200ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.adaptive-nav__drawer-item {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  min-height: 48px;
-  padding: 0 20px;
-  color: var(--cc-on-surface-variant);
-  text-decoration: none;
-  transition: background-color 150ms ease, color 150ms ease;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-    color: var(--cc-on-surface);
-  }
-
-  &--active {
-    background-color: var(--status-active-bg);
-    color: var(--status-active);
-
-    .adaptive-nav__drawer-label {
-      font-weight: 500;
-    }
-  }
-}
-
-.adaptive-nav__drawer-label {
-  font-size: 14px;
-  font-weight: 400;
-  white-space: nowrap;
-}
-
-// ---------------------------------------------------------------------------
-// Drawer slide-in animation
-// ---------------------------------------------------------------------------
-@keyframes slide-in-left {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Media Queries — Layout Switch (CUB-27 breakpoints)
-// ---------------------------------------------------------------------------
-
-// Compact (0–599px): Show mobile header, hide sidebar
-@media (max-width: 599px) {
-  .adaptive-nav__sidebar {
-    display: none;
-  }
-
-  .adaptive-nav__mobile-header {
-    display: flex;
-  }
-
-  // Hide mobile drawer and overlay on desktop
-  .adaptive-nav__overlay,
-  .adaptive-nav__mobile-drawer {
-    // These are conditional via @if in template, no display:none needed
-  }
-}
-
-// Medium (600–1023px): Show collapsed sidebar (icon-only), hide mobile
-@media (min-width: 600px) and (max-width: 1023px) {
-  .adaptive-nav__sidebar {
-    display: flex;
-    width: var(--cc-nav-rail-collapsed-width, 72px);
-  }
-
-  // Hide labels on medium (collapsed)
-  .adaptive-nav__sidebar-label,
-  .adaptive-nav__brand {
-    display: none;
-  }
-
-  .adaptive-nav__sidebar-header {
-    justify-content: center;
-  }
-
-  .adaptive-nav__sidebar-item {
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .adaptive-nav__mobile-header {
-    display: none;
-  }
-
-  .adaptive-nav__overlay,
-  .adaptive-nav__mobile-drawer {
-    display: none;
-  }
-}
-
-// Expanded (≥1024px): Show sidebar with labels
-@media (min-width: 1024px) {
-  .adaptive-nav__sidebar {
-    display: flex;
-    width: var(--cc-nav-rail-collapsed-width, 72px);
-    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .adaptive-nav__mobile-header {
-    display: none;
-  }
-
-  .adaptive-nav__overlay,
-  .adaptive-nav__mobile-drawer {
-    display: none;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .adaptive-nav__live-dot--connected {
-    animation: none;
-  }
-
-  .adaptive-nav__mobile-drawer {
-    animation: none;
-  }
-
-  .adaptive-nav__sidebar {
-    transition: none;
-  }
-}
--- a/frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.ts
+++ b/frontend/src/app/components/adaptive-navigation/adaptive-navigation.component.ts
@@ -1,84 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal, HostListener, OnDestroy, OnInit } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatBadgeModule } from '@angular/material/badge';
-import { NAV_DESTINATIONS } from '../../models/nav.model';
-
-/**
- * Adaptive Navigation Component — switches between desktop sidebar
- * and mobile header layouts using CSS media queries + JS breakpoint sync.
- *
- * Per CUB-27 spec breakpoints:
- *   Compact  (0–599px):  Mobile header + hamburger + bottom nav
- *   Medium   (600–1023px): Collapsed sidebar (icon-only)
- *   Expanded (≥1024px):  Expandable sidebar (hover/click)
- *
- * The LIVE status indicator is visible in all layouts.
- */
-@Component({
-  selector: 'app-adaptive-navigation',
-  standalone: true,
-  imports: [
-    RouterLink,
-    RouterLinkActive,
-    MatIconModule,
-    MatButtonModule,
-    MatChipsModule,
-    MatBadgeModule,
-  ],
-  templateUrl: './adaptive-navigation.component.html',
-  styleUrl: './adaptive-navigation.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AdaptiveNavigationComponent implements OnInit, OnDestroy {
-  /** Navigation destinations shared with other nav components */
-  protected readonly destinations = NAV_DESTINATIONS;
-
-  /** Whether the mobile drawer is open */
-  protected readonly mobileMenuOpen = signal(false);
-
-  /** Live connection status */
-  protected readonly isConnected = signal(true);
-
-  /** Responsive breakpoint state */
-  protected readonly isMedium = signal(false);
-  protected readonly isExpanded = signal(false);
-
-  private readonly COMPACT_MAX = 599;
-  private readonly MEDIUM_MAX = 1023;
-
-  ngOnInit(): void {
-    this.updateBreakpoint();
-  }
-
-  @HostListener('window:resize')
-  onResize(): void {
-    this.updateBreakpoint();
-  }
-
-  /** Toggle mobile menu */
-  toggleMobileMenu(): void {
-    this.mobileMenuOpen.update((v) => !v);
-  }
-
-  /** Close mobile menu (e.g. on nav) */
-  closeMobileMenu(): void {
-    this.mobileMenuOpen.set(false);
-  }
-
-  private updateBreakpoint(): void {
-    const w = window.innerWidth;
-    this.isMedium.set(w >= this.COMPACT_MAX + 1 && w <= this.MEDIUM_MAX);
-    this.isExpanded.set(w > this.MEDIUM_MAX);
-    // Close mobile menu when switching to desktop
-    if (w > this.COMPACT_MAX) {
-      this.mobileMenuOpen.set(false);
-    }
-  }
-
-  ngOnDestroy(): void {
-    // HostListener auto-unsubscribes
-  }
-}
--- a/frontend/src/app/components/adaptive-navigation/index.ts
+++ b/frontend/src/app/components/adaptive-navigation/index.ts
@@ -1 +0,0 @@
-export * from './adaptive-navigation.component';
--- a/frontend/src/app/components/agent-session-drawer/agent-session-drawer.component.html
+++ b/frontend/src/app/components/agent-session-drawer/agent-session-drawer.component.html
@@ -1,140 +0,0 @@
-<!-- ============================================================================
-  Agent Session Drawer — CUB-26
-  Desktop: 480px side drawer slides from right with modal overlay.
-  Mobile: Bottom sheet slides up from bottom.
-  Shows: Agent name, status badge, session key, live log tail,
-          recent messages, and action buttons.
-  ============================================================================-->
-
-<!-- Backdrop overlay -->
-@if (isOpen()) {
-  <div
-    class="session-drawer-backdrop"
-    (click)="onBackdropClick()"
-    [class.session-drawer-backdrop--visible]="isOpen()"
-  ></div>
-}
-
-<!-- Drawer panel -->
-<div
-  #drawerPanel
-  class="session-drawer"
-  [class.session-drawer--open]="isOpen()"
-  [class.session-drawer--mobile]="isMobile"
-  (keydown)="onDrawerKeydown($event)"
-  role="dialog"
-  aria-label="Agent session details"
-  [attr.aria-hidden]="!isOpen()"
->
-  <!-- Header -->
-  <div class="session-drawer__header">
-    @if (agent) {
-      <div class="session-drawer__header-identity">
-        <span class="status-dot {{ getStatusClass(agent.status) }}" [attr.aria-label]="getStatusLabel(agent.status)"></span>
-        <div class="session-drawer__header-text">
-          <h2 class="session-drawer__title">{{ agent.displayName }}</h2>
-          <span class="session-drawer__role">{{ agent.role }}</span>
-        </div>
-      </div>
-    }
-    <button
-      class="session-drawer__close-btn"
-      type="button"
-      aria-label="Close drawer"
-      (click)="close()"
-      matIconButton
-    >
-      <mat-icon>close</mat-icon>
-    </button>
-  </div>
-
-  <!-- Content area -->
-  @if (agent) {
-    <div class="session-drawer__content">
-
-      <!-- Status & Session Key Section -->
-      <section class="session-drawer__section">
-        <div class="session-drawer__meta-row">
-          <span class="session-drawer__status-chip {{ getStatusChipColor(agent.status) }}">
-            {{ getStatusLabel(agent.status) }}
-          </span>
-          @if (agent.channel) {
-            <span class="session-drawer__channel-badge">
-              <mat-icon class="session-drawer__channel-icon">chat</mat-icon>
-              {{ agent.channel }}
-            </span>
-          }
-        </div>
-        <div class="session-drawer__session-key">
-          <span class="session-drawer__label">Session Key</span>
-          <code class="session-drawer__key-value">{{ agent.sessionKey }}</code>
-        </div>
-        @if (agent.currentTask) {
-          <div class="session-drawer__task-info">
-            <span class="session-drawer__label">Current Task</span>
-            <span class="session-drawer__task-text">{{ agent.currentTask }}</span>
-          </div>
-        }
-        <div class="session-drawer__last-activity">
-          <span class="session-drawer__label">Last Activity</span>
-          <span class="session-drawer__activity-time">{{ formatRelativeTime(agent.lastActivity) }}</span>
-        </div>
-      </section>
-
-      <!-- Recent Messages Section -->
-      <section class="session-drawer__section">
-        <h3 class="session-drawer__section-title">Recent Messages</h3>
-        <div class="session-drawer__messages">
-          @for (msg of recentMessages(); track msg.id) {
-            <div class="session-drawer__message session-drawer__message--{{ msg.sender }}">
-              <span class="session-drawer__message-sender">
-                {{ msg.sender === 'agent' ? agent.displayName : 'You' }}
-              </span>
-              <p class="session-drawer__message-text">{{ msg.content }}</p>
-              <span class="session-drawer__message-time">{{ formatTime(msg.timestamp) }}</span>
-            </div>
-          } @empty {
-            <p class="session-drawer__empty-state">No recent messages</p>
-          }
-        </div>
-      </section>
-
-      <!-- Live Log Tail Section -->
-      <section class="session-drawer__section">
-        <h3 class="session-drawer__section-title">Live Log</h3>
-        <div class="session-drawer__log-container">
-          @for (line of logLines(); track $index) {
-            <div class="session-drawer__log-line {{ getLogLevelClass(line.level) }}">
-              <span class="session-drawer__log-time">{{ formatTime(line.timestamp) }}</span>
-              <span class="session-drawer__log-level">{{ line.level.toUpperCase() }}</span>
-              <span class="session-drawer__log-message">{{ line.message }}</span>
-            </div>
-          } @empty {
-            <p class="session-drawer__empty-state">No log output</p>
-          }
-        </div>
-      </section>
-    </div>
-  }
-
-  <!-- Action buttons (sticky footer) -->
-  <div class="session-drawer__actions">
-    <button
-      class="session-drawer__action-btn session-drawer__action-btn--primary"
-      mat-raised-button
-      color="primary"
-      (click)="onOpenSession()"
-    >
-      <mat-icon>open_in_new</mat-icon>
-      Open Full Session
-    </button>
-    <button
-      class="session-drawer__action-btn session-drawer__action-btn--secondary"
-      mat-stroked-button
-      (click)="onPinToDashboard()"
-    >
-      <mat-icon>push_pin</mat-icon>
-      Pin to Dashboard
-    </button>
-  </div>
-</div>
--- a/frontend/src/app/components/agent-session-drawer/agent-session-drawer.component.scss
+++ b/frontend/src/app/components/agent-session-drawer/agent-session-drawer.component.scss
@@ -1,500 +0,0 @@
-// ============================================================================
-// Agent Session Drawer — CUB-26
-// Desktop: 480px side drawer slides from right with modal overlay.
-// Mobile: Bottom sheet slides up from bottom.
-// Uses Control Center design tokens from CUB-21.
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Backdrop
-// ---------------------------------------------------------------------------
-.session-drawer-backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  z-index: 998;
-  opacity: 0;
-  transition: opacity 200ms ease-out;
-
-  &--visible {
-    opacity: 1;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Drawer Panel — Desktop: Side drawer from right
-// ---------------------------------------------------------------------------
-.session-drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 480px;
-  max-width: 100vw;
-  background-color: var(--cc-surface-container);
-  border-left: 1px solid var(--cc-outline);
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  transform: translateX(100%);
-  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.4);
-  overflow: hidden;
-
-  &--open {
-    transform: translateX(0);
-  }
-
-  // ---------------------------------------------------------------------------
-  // Mobile: Bottom Sheet — slides up from bottom
-  // ---------------------------------------------------------------------------
-  &--mobile {
-    top: auto;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    max-width: 100vw;
-    max-height: 85vh;
-    border-left: none;
-    border-top: 1px solid var(--cc-outline);
-    border-radius: 20px 20px 0 0;
-    transform: translateY(100%);
-    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
-
-    &.session-drawer--open {
-      transform: translateY(0);
-    }
-
-    // Drag handle for mobile bottom sheet
-    &::before {
-      content: '';
-      display: block;
-      width: 32px;
-      height: 4px;
-      border-radius: 2px;
-      background: var(--cc-on-surface-variant);
-      opacity: 0.4;
-      margin: 8px auto 4px;
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Header
-// ---------------------------------------------------------------------------
-.session-drawer__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px 16px;
-  border-bottom: 1px solid var(--cc-outline);
-  flex-shrink: 0;
-}
-
-.session-drawer__header-identity {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-  flex: 1;
-}
-
-.session-drawer__header-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.session-drawer__title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-  margin: 0;
-  letter-spacing: -0.01em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.session-drawer__role {
-  font-size: 13px;
-  color: var(--cc-on-surface-variant);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.session-drawer__close-btn {
-  --mat-icon-button-state-layer-color: transparent;
-  color: var(--cc-on-surface-variant);
-  flex-shrink: 0;
-
-  &:hover {
-    color: var(--cc-on-surface);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Content — scrollable area
-// ---------------------------------------------------------------------------
-.session-drawer__content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 24px 16px;
-}
-
-// ---------------------------------------------------------------------------
-// Sections
-// ---------------------------------------------------------------------------
-.session-drawer__section {
-  padding: 16px 0;
-  border-bottom: 1px solid var(--cc-outline);
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.session-drawer__section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--cc-on-surface-variant);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  margin: 0 0 12px;
-}
-
-// ---------------------------------------------------------------------------
-// Meta Row — Status + Channel
-// ---------------------------------------------------------------------------
-.session-drawer__meta-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-.session-drawer__status-chip {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 12px;
-  border-radius: 8px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-
-  &.status-chip--active {
-    background-color: var(--status-active-bg);
-    color: var(--status-active);
-  }
-
-  &.status-chip--idle {
-    background-color: var(--status-idle-bg);
-    color: var(--status-idle);
-  }
-
-  &.status-chip--thinking {
-    background-color: var(--status-thinking-bg);
-    color: var(--status-thinking);
-  }
-
-  &.status-chip--error {
-    background-color: var(--status-error-bg);
-    color: var(--status-error);
-  }
-
-  &.status-chip--offline {
-    background-color: rgba(100, 116, 139, 0.12);
-    color: var(--status-offline);
-  }
-}
-
-.session-drawer__channel-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  border-radius: 8px;
-  background: var(--cc-surface-container-high);
-  font-size: 12px;
-  color: var(--cc-on-surface-variant);
-}
-
-.session-drawer__channel-icon {
-  font-size: 14px;
-  width: 14px;
-  height: 14px;
-}
-
-// ---------------------------------------------------------------------------
-// Session Key
-// ---------------------------------------------------------------------------
-.session-drawer__session-key {
-  margin-bottom: 12px;
-}
-
-.session-drawer__label {
-  display: block;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--cc-on-surface-variant);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 4px;
-}
-
-.session-drawer__key-value {
-  display: block;
-  font-family: var(--cc-font-mono);
-  font-size: 12px;
-  color: var(--color-secondary);
-  background: var(--cc-surface);
-  padding: 8px 12px;
-  border-radius: 8px;
-  border: 1px solid var(--cc-outline);
-  word-break: break-all;
-  line-height: 1.5;
-  user-select: all;
-}
-
-// ---------------------------------------------------------------------------
-// Task Info
-// ---------------------------------------------------------------------------
-.session-drawer__task-info {
-  margin-bottom: 12px;
-}
-
-.session-drawer__task-text {
-  font-size: 14px;
-  color: var(--cc-on-surface);
-  line-height: 1.4;
-}
-
-// ---------------------------------------------------------------------------
-// Last Activity
-// ---------------------------------------------------------------------------
-.session-drawer__last-activity {
-  margin-bottom: 0;
-}
-
-.session-drawer__activity-time {
-  font-size: 14px;
-  color: var(--cc-on-surface);
-}
-
-// ---------------------------------------------------------------------------
-// Recent Messages
-// ---------------------------------------------------------------------------
-.session-drawer__messages {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.session-drawer__message {
-  padding: 10px 14px;
-  border-radius: 12px;
-  max-width: 100%;
-
-  &--agent {
-    background: var(--cc-surface-container-high);
-    border: 1px solid var(--cc-outline);
-  }
-
-  &--user {
-    background: rgba(56, 189, 248, 0.08);
-    border: 1px solid rgba(56, 189, 248, 0.15);
-  }
-}
-
-.session-drawer__message-sender {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--cc-on-surface-variant);
-  margin-bottom: 4px;
-}
-
-.session-drawer__message-text {
-  font-size: 14px;
-  color: var(--cc-on-surface);
-  margin: 0;
-  line-height: 1.5;
-  word-wrap: break-word;
-}
-
-.session-drawer__message-time {
-  display: block;
-  font-size: 11px;
-  color: var(--cc-on-surface-variant);
-  margin-top: 4px;
-  font-family: var(--cc-font-mono);
-}
-
-// ---------------------------------------------------------------------------
-// Live Log Container
-// ---------------------------------------------------------------------------
-.session-drawer__log-container {
-  background: var(--cc-surface);
-  border: 1px solid var(--cc-outline);
-  border-radius: 10px;
-  padding: 10px 12px;
-  max-height: 260px;
-  overflow-y: auto;
-  font-family: var(--cc-font-mono);
-  font-size: 12px;
-  line-height: 1.7;
-}
-
-.session-drawer__log-line {
-  display: flex;
-  gap: 8px;
-  padding: 1px 0;
-  white-space: nowrap;
-
-  &--info {
-    color: var(--cc-on-surface);
-  }
-
-  &--warn {
-    color: #FBBF24;
-  }
-
-  &--error {
-    color: var(--status-error);
-  }
-
-  &--debug {
-    color: var(--cc-on-surface-variant);
-  }
-}
-
-.session-drawer__log-time {
-  color: var(--cc-on-surface-variant);
-  flex-shrink: 0;
-  opacity: 0.7;
-}
-
-.session-drawer__log-level {
-  width: 48px;
-  flex-shrink: 0;
-  font-weight: 600;
-  font-size: 11px;
-  letter-spacing: 0.02em;
-}
-
-.session-drawer__log-message {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: inherit;
-}
-
-// ---------------------------------------------------------------------------
-// Empty State
-// ---------------------------------------------------------------------------
-.session-drawer__empty-state {
-  font-size: 13px;
-  color: var(--cc-on-surface-variant);
-  text-align: center;
-  padding: 16px 0;
-  margin: 0;
-}
-
-// ---------------------------------------------------------------------------
-// Action Buttons — Sticky Footer
-// ---------------------------------------------------------------------------
-.session-drawer__actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 24px 20px;
-  border-top: 1px solid var(--cc-outline);
-  background-color: var(--cc-surface-container);
-  flex-shrink: 0;
-}
-
-.session-drawer__action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 500;
-
-  .mat-icon {
-    width: 18px;
-    height: 18px;
-    font-size: 18px;
-  }
-
-  &--primary {
-    flex: 1;
-  }
-
-  &--secondary {
-    flex-shrink: 0;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Mobile Adjustments
-// ---------------------------------------------------------------------------
-.session-drawer--mobile {
-  .session-drawer__header {
-    padding: 12px 20px 12px;
-  }
-
-  .session-drawer__content {
-    padding: 0 20px 12px;
-  }
-
-  .session-drawer__actions {
-    padding: 12px 20px 16px;
-    flex-direction: column;
-
-    .session-drawer__action-btn {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-
-  .session-drawer__log-container {
-    max-height: 200px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Responsive — wider viewports keep 480px, narrow go full-width
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .session-drawer:not(.session-drawer--mobile) {
-    width: 100%;
-    max-width: 100vw;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .session-drawer {
-    transition: none;
-  }
-
-  .session-drawer-backdrop {
-    transition: none;
-  }
-}
--- a/frontend/src/app/components/agent-session-drawer/agent-session-drawer.component.ts
+++ b/frontend/src/app/components/agent-session-drawer/agent-session-drawer.component.ts
@@ -1,268 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnDestroy,
-  Output,
-  signal,
-  ViewChild,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatChipsModule } from '@angular/material/chips';
-import { AgentCardData, AgentStatus } from '../../models/agent.model';
-
-// ============================================================================
-// Agent Session Drawer — Per CUB-26
-// Desktop: 480px side drawer slides from right with modal overlay.
-// Mobile: Bottom sheet slides up from bottom.
-// Shows: Agent name, status badge, session key, live log tail,
-//         recent messages, and action buttons.
-// ============================================================================
-
-export interface SessionLogLine {
-  timestamp: Date;
-  level: 'info' | 'warn' | 'error' | 'debug';
-  message: string;
-}
-
-export interface SessionMessage {
-  id: string;
-  sender: 'agent' | 'user';
-  content: string;
-  timestamp: Date;
-}
-
-@Component({
-  selector: 'app-agent-session-drawer',
-  standalone: true,
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatChipsModule],
-  templateUrl: './agent-session-drawer.component.html',
-  styleUrl: './agent-session-drawer.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AgentSessionDrawerComponent implements OnDestroy {
-  // ---------------------------------------------------------------------------
-  // Inputs
-  // ---------------------------------------------------------------------------
-
-  /** The agent whose session details are displayed. */
-  @Input() set agent(value: AgentCardData | null) {
-    this._agent = value;
-    if (value) {
-      this.isOpen.set(true);
-      this.loadSessionData(value);
-    }
-  }
-  get agent(): AgentCardData | null {
-    return this._agent;
-  }
-  private _agent: AgentCardData | null = null;
-
-  /** Whether this is mobile viewport (bottom sheet mode). */
-  @Input() isMobile = false;
-
-  // ---------------------------------------------------------------------------
-  // Outputs
-  // ---------------------------------------------------------------------------
-
-  /** Emitted when the user clicks "Open Full Session". Payload is the session key. */
-  @Output() readonly openSession = new EventEmitter<string>();
-
-  /** Emitted when the user clicks "Pin to Dashboard". Payload is the session key. */
-  @Output() readonly pinToDashboard = new EventEmitter<string>();
-
-  /** Emitted when the drawer closes. */
-  @Output() readonly drawerClose = new EventEmitter<void>();
-
-  // ---------------------------------------------------------------------------
-  // Signals
-  // ---------------------------------------------------------------------------
-
-  readonly isOpen = signal(false);
-  readonly logLines = signal<SessionLogLine[]>([]);
-  readonly recentMessages = signal<SessionMessage[]>([]);
-
-  // ---------------------------------------------------------------------------
-  // View Children
-  // ---------------------------------------------------------------------------
-
-  @ViewChild('drawerPanel') drawerPanel!: ElementRef<HTMLElement>;
-
-  // ---------------------------------------------------------------------------
-  // Status Helpers
-  // ---------------------------------------------------------------------------
-
-  getStatusClass(status: string): string {
-    return `status-dot--${status}`;
-  }
-
-  getStatusLabel(status: AgentStatus): string {
-    const labels: Record<AgentStatus, string> = {
-      active: 'Active',
-      idle: 'Idle',
-      thinking: 'Thinking…',
-      error: 'Error',
-      offline: 'Offline',
-    };
-    return labels[status] ?? status;
-  }
-
-  getStatusChipColor(status: AgentStatus): string {
-    const map: Record<AgentStatus, string> = {
-      active: 'status-chip--active',
-      idle: 'status-chip--idle',
-      thinking: 'status-chip--thinking',
-      error: 'status-chip--error',
-      offline: 'status-chip--offline',
-    };
-    return map[status] ?? '';
-  }
-
-  getLogLevelClass(level: SessionLogLine['level']): string {
-    return `log-line--${level}`;
-  }
-
-  /** Format a date to a short time string. */
-  formatTime(date: Date): string {
-    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-  }
-
-  /** Format a date to a relative time string. */
-  formatRelativeTime(date: Date): string {
-    const now = Date.now();
-    const then = date.getTime();
-    const diffSec = Math.max(0, Math.floor((now - then) / 1000));
-    if (diffSec < 60) return 'just now';
-    if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
-    if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
-    return `${Math.floor(diffSec / 86400)}d ago`;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  /** Open the drawer for a specific agent. */
-  open(agentData: AgentCardData): void {
-    this._agent = agentData;
-    this.isOpen.set(true);
-    this.loadSessionData(agentData);
-  }
-
-  /** Close the drawer. */
-  close(): void {
-    this.isOpen.set(false);
-    this.drawerClose.emit();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Keyboard Handling
-  // ---------------------------------------------------------------------------
-
-  @HostListener('document:keydown.escape')
-  onEscapeKey(): void {
-    if (this.isOpen()) {
-      this.close();
-    }
-  }
-
-  /** Handle keyboard navigation within the drawer. */
-  onDrawerKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Escape') {
-      this.close();
-      return;
-    }
-    // Tab through actions — browser default Tab behavior is fine,
-    // we just trap focus within the drawer
-  }
-
-  // ---------------------------------------------------------------------------
-  // Outside Click
-  // ---------------------------------------------------------------------------
-
-  onBackdropClick(): void {
-    this.close();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Actions
-  // ---------------------------------------------------------------------------
-
-  onOpenSession(): void {
-    if (this._agent) {
-      this.openSession.emit(this._agent.sessionKey);
-    }
-    this.close();
-  }
-
-  onPinToDashboard(): void {
-    if (this._agent) {
-      this.pinToDashboard.emit(this._agent.sessionKey);
-    }
-    // Don't close — user may want to keep viewing
-  }
-
-  // ---------------------------------------------------------------------------
-  // Lifecycle
-  // ---------------------------------------------------------------------------
-
-  ngOnDestroy(): void {
-    // Clean up any subscriptions when needed
-  }
-
-  // ---------------------------------------------------------------------------
-  // Private
-  // ---------------------------------------------------------------------------
-
-  /** Load mock session data for the agent (TODO: wire to real data service). */
-  private loadSessionData(agentData: AgentCardData): void {
-    // TODO: Replace with real session data service when available.
-    // For now, generate placeholder log lines and messages.
-    const now = new Date();
-    const logLines: SessionLogLine[] = [];
-    for (let i = 19; i >= 0; i--) {
-      const ts = new Date(now.getTime() - i * 5000);
-      const levels: SessionLogLine['level'][] = ['info', 'info', 'info', 'debug', 'warn'];
-      const messages = [
-        `Processing task queue for ${agentData.displayName}`,
-        `SignalR heartbeat OK`,
-        `Session state: active`,
-        `Checking for pending commands…`,
-        `Updating task progress: ${Math.floor(Math.random() * 100)}%`,
-      ];
-      logLines.push({
-        timestamp: ts,
-        level: levels[i % levels.length],
-        message: messages[i % messages.length],
-      });
-    }
-    this.logLines.set(logLines);
-
-    const recentMessages: SessionMessage[] = [
-      {
-        id: '1',
-        sender: 'user',
-        content: `Hey ${agentData.displayName}, how's the current task going?`,
-        timestamp: new Date(now.getTime() - 120000),
-      },
-      {
-        id: '2',
-        sender: 'agent',
-        content: agentData.currentTask ?? 'Working on it — progress is steady.',
-        timestamp: new Date(now.getTime() - 115000),
-      },
-      {
-        id: '3',
-        sender: 'user',
-        content: 'Great, let me know if you hit any blockers.',
-        timestamp: new Date(now.getTime() - 110000),
-      },
-    ];
-    this.recentMessages.set(recentMessages);
-  }
-}
--- a/frontend/src/app/components/agent-session-drawer/index.ts
+++ b/frontend/src/app/components/agent-session-drawer/index.ts
@@ -1,2 +0,0 @@
-export { AgentSessionDrawerComponent } from './agent-session-drawer.component';
-export type { SessionLogLine, SessionMessage } from './agent-session-drawer.component';
--- a/frontend/src/app/components/agent-status-badge/agent-status-badge.component.html
+++ b/frontend/src/app/components/agent-status-badge/agent-status-badge.component.html
@@ -1,8 +0,0 @@
-<span class="badge"
-      [class]="statusClass"
-      [class.badge--pulse]="hasPulse"
-      [attr.aria-label]="'Agent status: ' + displayLabel"
-      role="status">
-  <span class="badge__dot"></span>
-  <span class="badge__label">{{ displayLabel }}</span>
-</span>
--- a/frontend/src/app/components/agent-status-badge/agent-status-badge.component.scss
+++ b/frontend/src/app/components/agent-status-badge/agent-status-badge.component.scss
@@ -1,146 +0,0 @@
-// ============================================================================
-// Agent Status Badge — per spec Section 7.3
-// Colored pill with dot indicator and optional pulse animation.
-// ============================================================================
-
-$badge-height: 24px;
-$dot-size: 8px;
-$border-radius: 12px;
-$font-size: 12px;
-$font-weight: 500;
-$padding-x: 8px;
-$gap: 6px;
-
-@use 'sass:color';
-
-// Status color palette
-$color-active: #22c55e;   // green-500
-$color-idle: #9ca3af;     // gray-400
-$color-thinking: #3b82f6; // blue-500
-$color-error: #ef4444;    // red-500
-$color-offline: #9ca3af;  // gray-400
-
-// Background tints (12% opacity for soft pill background)
-$bg-active: rgba($color-active, 0.12);
-$bg-idle: rgba($color-idle, 0.12);
-$bg-thinking: rgba($color-thinking, 0.12);
-$bg-error: rgba($color-error, 0.12);
-$bg-offline: rgba($color-offline, 0.12);
-
-// ---------------------------------------------------------------------------
-// Base pill
-// ---------------------------------------------------------------------------
-.badge {
-  display: inline-flex;
-  align-items: center;
-  height: $badge-height;
-  padding: 0 $padding-x;
-  border-radius: $border-radius;
-  gap: $gap;
-  font-size: $font-size;
-  font-weight: $font-weight;
-  line-height: 1;
-  white-space: nowrap;
-  user-select: none;
-}
-
-// ---------------------------------------------------------------------------
-// Dot indicator
-// ---------------------------------------------------------------------------
-.badge__dot {
-  width: $dot-size;
-  height: $dot-size;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-// ---------------------------------------------------------------------------
-// Label text
-// ---------------------------------------------------------------------------
-.badge__label {
-  line-height: 1;
-}
-
-// ---------------------------------------------------------------------------
-// Status color variants
-// ---------------------------------------------------------------------------
-.badge--active {
-  background: $bg-active;
-  color: color.adjust($color-active, $lightness: -10%);
-
-  .badge__dot {
-    background: $color-active;
-  }
-}
-
-.badge--idle {
-  background: $bg-idle;
-  color: color.adjust($color-idle, $lightness: -15%);
-
-  .badge__dot {
-    background: $color-idle;
-  }
-}
-
-.badge--thinking {
-  background: $bg-thinking;
-  color: color.adjust($color-thinking, $lightness: -10%);
-
-  .badge__dot {
-    background: $color-thinking;
-  }
-}
-
-.badge--error {
-  background: $bg-error;
-  color: color.adjust($color-error, $lightness: -10%);
-
-  .badge__dot {
-    background: $color-error;
-  }
-}
-
-.badge--offline {
-  background: $bg-offline;
-  color: color.adjust($color-offline, $lightness: -15%);
-
-  .badge__dot {
-    background: $color-offline;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Pulse animation — applied when status is active, thinking, or error
-// ---------------------------------------------------------------------------
-.badge--pulse {
-  .badge__dot {
-    animation: pulse-dot 2s ease-in-out infinite;
-  }
-}
-
-// Active: 2s pulse
-.badge--active.badge--pulse .badge__dot {
-  animation-duration: 2s;
-}
-
-// Thinking: 3s pulse
-.badge--thinking.badge--pulse .badge__dot {
-  animation-duration: 3s;
-}
-
-// Error: 0.8s pulse (fast, urgent)
-.badge--error.badge--pulse .badge__dot {
-  animation-duration: 0.8s;
-}
-
-@keyframes pulse-dot {
-  0%,
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.4;
-    transform: scale(1.5);
-  }
-}
--- a/frontend/src/app/components/agent-status-badge/agent-status-badge.component.ts
+++ b/frontend/src/app/components/agent-status-badge/agent-status-badge.component.ts
@@ -1,54 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { AgentStatus } from '../../models/agent.model';
-
-/**
- * Agent Status Badge component.
- * Displays a colored pill with a pulse animation indicating the agent's current status.
- * Per spec Section 7.3: Agent Card Component Interface — status indicator.
- *
- * Color mapping:
- * - Active → green
- * - Idle → gray
- * - Thinking → blue
- * - Error → red
- * - Offline → gray (no pulse)
- *
- * Pulse animations:
- * - Active → 2s
- * - Error → 0.8s
- * - Thinking → 3s
- * - Idle / Offline → no pulse
- */
-@Component({
-  selector: 'app-agent-status-badge',
-  standalone: true,
-  imports: [],
-  templateUrl: './agent-status-badge.component.html',
-  styleUrl: './agent-status-badge.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AgentStatusBadgeComponent {
-  /** Current agent status — binds to the AgentStatus type from the model. */
-  readonly status = input.required<AgentStatus>();
-
-  /** Label text shown inside the badge. Defaults to title-cased status. */
-  readonly label = input<string>();
-
-  get displayLabel(): string {
-    return this.label() ?? this.titleCase(this.status());
-  }
-
-  /** CSS class driven by the current status value. */
-  get statusClass(): string {
-    return `badge--${this.status()}`;
-  }
-
-  /** Whether the pulse animation should be active for the current status. */
-  get hasPulse(): boolean {
-    return this.status() === 'active' || this.status() === 'thinking' || this.status() === 'error';
-  }
-
-  private titleCase(value: string): string {
-    return value.charAt(0).toUpperCase() + value.slice(1);
-  }
-}
--- a/frontend/src/app/components/agent-status-badge/index.ts
+++ b/frontend/src/app/components/agent-status-badge/index.ts
@@ -1 +0,0 @@
-export { AgentStatusBadgeComponent } from './agent-status-badge.component';
--- a/frontend/src/app/components/global-action-modal/global-action-modal.component.html
+++ b/frontend/src/app/components/global-action-modal/global-action-modal.component.html
@@ -1,31 +0,0 @@
-<!-- Backdrop overlay — click to dismiss -->
-<div class="global-action-modal__backdrop" #backdrop (click)="onBackdropClick()"></div>
-
-<!-- Modal panel -->
-<div class="global-action-modal__panel" (click)="onModalClick($event)" role="dialog" aria-modal="true" aria-label="Global Actions">
-
-  <!-- Header -->
-  <div class="global-action-modal__header">
-    <h2 class="global-action-modal__title">Global Actions</h2>
-    <button matIconButton
-            class="global-action-modal__close"
-            aria-label="Close modal"
-            (click)="onClose()">
-      <mat-icon>close</mat-icon>
-    </button>
-  </div>
-
-  <!-- Action grid -->
-  <div class="global-action-modal__actions">
-    @for (action of actions; track action.key) {
-      <button class="global-action-modal__action-btn global-action-modal__action-btn--{{ action.color }}"
-              (click)="onAction(action)">
-        <div class="global-action-modal__action-icon">
-          <mat-icon>{{ action.icon }}</mat-icon>
-        </div>
-        <span class="global-action-modal__action-label">{{ action.label }}</span>
-        <span class="global-action-modal__action-desc">{{ action.description }}</span>
-      </button>
-    }
-  </div>
-</div>
--- a/frontend/src/app/components/global-action-modal/global-action-modal.component.scss
+++ b/frontend/src/app/components/global-action-modal/global-action-modal.component.scss
@@ -1,198 +0,0 @@
-// ============================================================================
-// Global Action Modal — Tactical Dark Mode Styling
-// Uses Control Center design tokens from styles.scss
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Backdrop
-// ---------------------------------------------------------------------------
-:host {
-  display: block;
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-
-.global-action-modal__backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-}
-
-// ---------------------------------------------------------------------------
-// Modal Panel
-// ---------------------------------------------------------------------------
-.global-action-modal__panel {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: min(560px, calc(100vw - 48px));
-  background: var(--cc-surface-container);
-  border: 1px solid var(--cc-outline);
-  border-radius: var(--cc-card-border-radius);
-  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-}
-
-// ---------------------------------------------------------------------------
-// Header
-// ---------------------------------------------------------------------------
-.global-action-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px 12px;
-}
-
-.global-action-modal__title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-  letter-spacing: 0.01em;
-}
-
-.global-action-modal__close {
-  --mat-icon-button-state-layer-color: transparent;
-  color: var(--cc-on-surface-variant);
-
-  &:hover {
-    color: var(--cc-on-surface);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Action Grid
-// ---------------------------------------------------------------------------
-.global-action-modal__actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  padding: 12px 24px 24px;
-}
-
-// ---------------------------------------------------------------------------
-// Action Button
-// ---------------------------------------------------------------------------
-.global-action-modal__action-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 20px 16px;
-  border: 1px solid var(--cc-outline);
-  border-radius: 12px;
-  background: var(--cc-surface);
-  color: var(--cc-on-surface);
-  cursor: pointer;
-  transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
-  font-family: inherit;
-  text-align: center;
-
-  &:hover {
-    background: var(--cc-surface-container-high);
-    border-color: var(--cc-on-surface-variant);
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--mat-sys-primary, #38BDF8);
-    outline-offset: 2px;
-  }
-}
-
-// Action icon wrapper
-.global-action-modal__action-icon {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-
-  .mat-icon {
-    width: 28px;
-    height: 28px;
-    font-size: 28px;
-  }
-}
-
-// Action label
-.global-action-modal__action-label {
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-}
-
-// Action description
-.global-action-modal__action-desc {
-  font-size: 12px;
-  color: var(--cc-on-surface-variant);
-  line-height: 1.4;
-}
-
-// ---------------------------------------------------------------------------
-// Color Variants — per-action accent colors
-// ---------------------------------------------------------------------------
-.global-action-modal__action-btn--deploy {
-  .global-action-modal__action-icon {
-    background: var(--status-active-bg);
-    color: var(--status-active);
-  }
-
-  &:hover {
-    border-color: var(--status-active);
-  }
-}
-
-.global-action-modal__action-btn--pause {
-  .global-action-modal__action-icon {
-    background: var(--status-idle-bg);
-    color: var(--status-idle);
-  }
-
-  &:hover {
-    border-color: var(--status-idle);
-  }
-}
-
-.global-action-modal__action-btn--emergency {
-  .global-action-modal__action-icon {
-    background: var(--status-error-bg);
-    color: var(--status-error);
-  }
-
-  &:hover {
-    border-color: var(--status-error);
-  }
-
-  .global-action-modal__action-label {
-    color: var(--status-error);
-  }
-}
-
-.global-action-modal__action-btn--add {
-  .global-action-modal__action-icon {
-    background: var(--status-thinking-bg);
-    color: var(--status-thinking);
-  }
-
-  &:hover {
-    border-color: var(--status-thinking);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Responsive — stack single column on narrow viewports
-// ---------------------------------------------------------------------------
-@media (max-width: 400px) {
-  .global-action-modal__actions {
-    grid-template-columns: 1fr;
-  }
-}
--- a/frontend/src/app/components/global-action-modal/global-action-modal.component.ts
+++ b/frontend/src/app/components/global-action-modal/global-action-modal.component.ts
@@ -1,87 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-
-/**
- * Global Action Modal — overlay for fleet-wide commands.
- *
- * Four main actions: Deploy All, Pause All, Emergency Stop, Add Agent.
- * Tactical Dark Mode styling using Control Center design tokens.
- * Dismisses on backdrop click or close button.
- */
-@Component({
-  selector: 'app-global-action-modal',
-  standalone: true,
-  imports: [MatIconModule, MatButtonModule],
-  templateUrl: './global-action-modal.component.html',
-  styleUrl: './global-action-modal.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class GlobalActionModalComponent {
-  /** Emitted when any action button is clicked. Payload is the action key. */
-  @Output() readonly actionSelected = new EventEmitter<GlobalAction>();
-
-  /** Emitted when the modal is dismissed (backdrop click or close button). */
-  @Output() readonly dismissed = new EventEmitter<void>();
-
-  @ViewChild('backdrop') backdropEl!: ElementRef<HTMLElement>;
-
-  /** All available global actions. */
-  readonly actions: GlobalActionDef[] = [
-    {
-      key: 'deploy-all',
-      label: 'Deploy All',
-      description: 'Deploy all agents in the fleet',
-      icon: 'rocket_launch',
-      color: 'deploy',
-    },
-    {
-      key: 'pause-all',
-      label: 'Pause All',
-      description: 'Pause all running agents',
-      icon: 'pause_circle',
-      color: 'pause',
-    },
-    {
-      key: 'emergency-stop',
-      label: 'Emergency Stop',
-      description: 'Immediately halt all agents',
-      icon: 'emergency',
-      color: 'emergency',
-    },
-    {
-      key: 'add-agent',
-      label: 'Add Agent',
-      description: 'Register a new agent to the fleet',
-      icon: 'person_add',
-      color: 'add',
-    },
-  ];
-
-  onBackdropClick(): void {
-    this.dismissed.emit();
-  }
-
-  onModalClick(event: Event): void {
-    // Prevent clicks inside the modal panel from closing it
-    event.stopPropagation();
-  }
-
-  onClose(): void {
-    this.dismissed.emit();
-  }
-
-  onAction(action: GlobalActionDef): void {
-    this.actionSelected.emit(action.key);
-  }
-}
-
-export type GlobalAction = 'deploy-all' | 'pause-all' | 'emergency-stop' | 'add-agent';
-
-export interface GlobalActionDef {
-  key: GlobalAction;
-  label: string;
-  description: string;
-  icon: string;
-  color: 'deploy' | 'pause' | 'emergency' | 'add';
-}
--- a/frontend/src/app/components/index.ts
+++ b/frontend/src/app/components/index.ts
@@ -1,5 +0,0 @@
-export * from './quick-jump-button/quick-jump-button.component';
-export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
-export { QuickJumpDrawerComponent } from './quick-jump-drawer/index';
-export { AgentSessionDrawerComponent } from './agent-session-drawer/index';
-export type { SessionLogLine, SessionMessage } from './agent-session-drawer/index';
--- a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html
@@ -1,8 +0,0 @@
-<button
-  mat-icon-button
-  class="quick-jump-button"
-  [attr.aria-label]="'Jump to agent session'"
-  (click)="onJumpClick()"
->
-  <mat-icon>arrow_forward</mat-icon>
-</button>
--- a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss
@@ -1,68 +0,0 @@
-// ============================================================================
-// Quick-Jump Button — M3 FilledTonalIconButton
-// Per spec Section 7.3: Agent Card Quick-Jump action
-// M3 spec: FilledTonalIconButton uses secondary container color
-// with 8% state layer overlay for hover/focus.
-// ============================================================================
-
-.quick-jump-button {
-  // M3 FilledTonalIconButton: secondary-container background
-  // Angular Material mat-icon-button sets up the base shape (40x40, round).
-  // We override the color tokens to match FilledTonal style.
-  --mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container);
-  background-color: var(--mat-sys-secondary-container);
-  border-radius: 50%;
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  // M3 State Layer: 8% overlay on hover
-  &:hover {
-    background-color: var(--mat-sys-secondary-container);
-    // State layer overlay using a pseudo-element for precise 8% opacity
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: 50%;
-      background-color: var(--mat-sys-on-secondary-container);
-      opacity: 0.08;
-      pointer-events: none;
-    }
-  }
-
-  // M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility)
-  &:focus-visible {
-    background-color: var(--mat-sys-secondary-container);
-    outline: 3px solid var(--status-active);
-    outline-offset: 2px;
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: 50%;
-      background-color: var(--mat-sys-on-secondary-container);
-      opacity: 0.12;
-      pointer-events: none;
-    }
-  }
-
-  // M3 State Layer: 12% overlay on active/pressed
-  &:active {
-    background-color: var(--mat-sys-secondary-container);
-
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: 50%;
-      background-color: var(--mat-sys-on-secondary-container);
-      opacity: 0.12;
-      pointer-events: none;
-    }
-  }
-
-  // Icon color stays on-secondary-container across all states
-  .mat-icon {
-    color: var(--mat-sys-on-secondary-container);
-  }
-}
--- a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts
@@ -1,32 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-
-/**
- * Quick-Jump Button — M3 FilledTonalIconButton
- *
- * An icon button that emits a navigation event for jumping to an agent session.
- * Uses the Material Design 3 FilledTonalIconButton style with 8% state layer
- * overlay on hover and focus.
- *
- * Per spec Section 7.3: Agent Card Component Interface
- */
-@Component({
-  selector: 'app-quick-jump-button',
-  standalone: true,
-  imports: [MatIconButton, MatIcon],
-  templateUrl: './quick-jump-button.component.html',
-  styleUrl: './quick-jump-button.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class QuickJumpButtonComponent {
-  /** Emitted when the button is clicked, carrying the session key for navigation. */
-  @Output() jumpClick = new EventEmitter<string>();
-
-  /** The session key to navigate to. Set by the parent agent card. */
-  sessionKey = '';
-
-  onJumpClick(): void {
-    this.jumpClick.emit(this.sessionKey);
-  }
-}
--- a/frontend/src/app/components/quick-jump-drawer/index.ts
+++ b/frontend/src/app/components/quick-jump-drawer/index.ts
@@ -1 +0,0 @@
-export { QuickJumpDrawerComponent } from './quick-jump-drawer.component';
--- a/frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.html
+++ b/frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.html
@@ -1,109 +0,0 @@
-<!-- ============================================================================
-  Quick-Jump Drawer — Slide-out panel for fast agent switching
-  Per CUB-51: Slides from right, agent list with status badges,
-  search/filter input, closes via ESC or outside click.
-  ============================================================================-->
-
-<!-- Backdrop overlay -->
-@if (isOpen()) {
-  <div
-    class="quick-jump-backdrop"
-    (click)="onBackdropClick($event)"
-    [@backdropEnter]
-  ></div>
-}
-
-<!-- Drawer panel -->
-<div
-  class="quick-jump-drawer"
-  [class.quick-jump-drawer--open]="isOpen()"
-  (keydown)="onDrawerKeydown($event)"
-  role="dialog"
-  aria-label="Quick jump to agent"
-  [attr.aria-hidden]="!isOpen()"
->
-  <!-- Drawer header -->
-  <div class="quick-jump-drawer__header">
-    <h2 class="quick-jump-drawer__title">Jump to Agent</h2>
-    <button
-      class="quick-jump-drawer__close-btn"
-      type="button"
-      aria-label="Close drawer"
-      (click)="close()"
-    >
-      ✕
-    </button>
-  </div>
-
-  <!-- Search input -->
-  <div class="quick-jump-drawer__search">
-    <span class="quick-jump-drawer__search-icon">search</span>
-    <input
-      #searchInput
-      type="text"
-      class="quick-jump-drawer__search-input"
-      placeholder="Search agents..."
-      [formControl]="searchControl"
-      autocomplete="off"
-      aria-label="Search agents"
-    />
-    @if (searchControl.value) {
-      <button
-        class="quick-jump-drawer__search-clear"
-        type="button"
-        aria-label="Clear search"
-        (click)="searchControl.setValue('')"
-      >
-        ✕
-      </button>
-    }
-  </div>
-
-  <!-- Agent list -->
-  <ul class="quick-jump-drawer__agent-list" role="listbox" aria-label="Agent list">
-    @for (agent of filteredAgents(); track agent.id; let i = $index) {
-      <li
-        [id]="'quick-jump-agent-' + i"
-        class="quick-jump-drawer__agent-item"
-        [class.quick-jump-drawer__agent-item--highlighted]="highlightedIndex() === i"
-        role="option"
-        [attr.aria-selected]="highlightedIndex() === i"
-        (click)="selectAgent(agent)"
-        (mouseenter)="highlightedIndex.set(i)"
-        (mouseleave)="highlightedIndex.set(-1)"
-      >
-        <!-- Status badge -->
-        <span
-          class="status-dot {{ getStatusClass(agent.status) }}"
-          [attr.aria-label]="getStatusLabel(agent.status)"
-        ></span>
-
-        <!-- Agent info -->
-        <div class="quick-jump-drawer__agent-info">
-          <span class="quick-jump-drawer__agent-name">{{ agent.displayName }}</span>
-          <span class="quick-jump-drawer__agent-role">{{ agent.role }}</span>
-        </div>
-
-        <!-- Status label -->
-        <span class="quick-jump-drawer__agent-status-label" [class]="'status-label--' + agent.status">
-          {{ getStatusLabel(agent.status) }}
-        </span>
-      </li>
-    } @empty {
-      <li class="quick-jump-drawer__empty">
-        @if (searchControl.value) {
-          <span>No agents matching "{{ searchControl.value }}"</span>
-        } @else {
-          <span>No agents online</span>
-        }
-      </li>
-    }
-  </ul>
-
-  <!-- Footer hint -->
-  <div class="quick-jump-drawer__footer">
-    <span class="quick-jump-drawer__footer-hint">
-      <kbd>↑↓</kbd> Navigate &nbsp; <kbd>↵</kbd> Select &nbsp; <kbd>Esc</kbd> Close
-    </span>
-  </div>
-</div>
--- a/frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.scss
+++ b/frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.scss
@@ -1,333 +0,0 @@
-// ============================================================================
-// Quick-Jump Drawer — Slide-out panel for fast agent switching
-// Per CUB-51: slides from right, agent list with status badges,
-// search/filter input, closes via ESC or outside click.
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Backdrop
-// ---------------------------------------------------------------------------
-.quick-jump-backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 998;
-  opacity: 0;
-  transition: opacity 200ms ease-out;
-
-  &.backdrop-visible {
-    opacity: 1;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Drawer Panel
-// ---------------------------------------------------------------------------
-.quick-jump-drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 380px;
-  max-width: 90vw;
-  background-color: var(--cc-surface-container);
-  border-left: 1px solid var(--cc-outline);
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  transform: translateX(100%);
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
-
-  &--open {
-    transform: translateX(0);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Header
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px 12px;
-  border-bottom: 1px solid var(--cc-outline);
-}
-
-.quick-jump-drawer__title {
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--cc-on-surface);
-  margin: 0;
-  letter-spacing: -0.01em;
-}
-
-.quick-jump-drawer__close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--cc-on-surface-variant);
-  font-size: 18px;
-  cursor: pointer;
-  transition: background-color 150ms ease, color 150ms ease;
-
-  &:hover {
-    background-color: var(--cc-surface-container-high);
-    color: var(--cc-on-surface);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--status-active);
-    outline-offset: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Search
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__search {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin: 16px 24px 8px;
-  border: 1px solid var(--cc-outline);
-  border-radius: 12px;
-  background-color: var(--cc-surface-container-high);
-  transition: border-color 150ms ease;
-
-  &:focus-within {
-    border-color: var(--status-active);
-  }
-}
-
-.quick-jump-drawer__search-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: 12px;
-  font-family: 'Material Icons';
-  font-size: 20px;
-  color: var(--cc-on-surface-variant);
-  pointer-events: none;
-  user-select: none;
-
-  // Use a simple "search" text since icon font may not be loaded inside
-  // the drawer — rely on Material icon font from the parent app
-  &::before {
-    content: 'search';
-    font-family: 'Material Icons';
-  }
-}
-
-.quick-jump-drawer__search-input {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  padding: 12px 8px;
-  font-size: 15px;
-  font-family: 'Inter', 'Roboto', sans-serif;
-  color: var(--cc-on-surface);
-
-  &::placeholder {
-    color: var(--cc-on-surface-variant);
-    opacity: 0.7;
-  }
-}
-
-.quick-jump-drawer__search-clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  margin-right: 4px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--cc-on-surface-variant);
-  font-size: 14px;
-  cursor: pointer;
-  transition: background-color 150ms ease, color 150ms ease;
-
-  &:hover {
-    background-color: var(--cc-surface-container);
-    color: var(--cc-on-surface);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--status-active);
-    outline-offset: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Agent List
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__agent-list {
-  list-style: none;
-  margin: 0;
-  padding: 8px 12px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.quick-jump-drawer__agent-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-
-  &:hover,
-  &--highlighted {
-    background-color: var(--cc-surface-container-high);
-  }
-
-  &--highlighted {
-    outline: 2px solid var(--status-active);
-    outline-offset: -2px;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--status-active);
-    outline-offset: 2px;
-  }
-}
-
-.quick-jump-drawer__agent-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0; // Allow text truncation
-  flex: 1;
-}
-
-.quick-jump-drawer__agent-name {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--cc-on-surface);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.quick-jump-drawer__agent-role {
-  font-size: 12px;
-  color: var(--cc-on-surface-variant);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.quick-jump-drawer__agent-status-label {
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 3px 8px;
-  border-radius: 6px;
-  white-space: nowrap;
-
-  &.status-label--active {
-    color: var(--status-active);
-    background-color: var(--status-active-bg);
-  }
-
-  &.status-label--idle {
-    color: var(--status-idle);
-    background-color: var(--status-idle-bg);
-  }
-
-  &.status-label--thinking {
-    color: var(--status-thinking);
-    background-color: var(--status-thinking-bg);
-  }
-
-  &.status-label--error {
-    color: var(--status-error);
-    background-color: var(--status-error-bg);
-  }
-
-  &.status-label--offline {
-    color: var(--status-offline);
-    background-color: rgba(100, 116, 139, 0.12);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Empty State
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 24px;
-  color: var(--cc-on-surface-variant);
-  font-size: 14px;
-  text-align: center;
-}
-
-// ---------------------------------------------------------------------------
-// Footer
-// ---------------------------------------------------------------------------
-.quick-jump-drawer__footer {
-  padding: 12px 24px 16px;
-  border-top: 1px solid var(--cc-outline);
-}
-
-.quick-jump-drawer__footer-hint {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  font-size: 11px;
-  color: var(--cc-on-surface-variant);
-  opacity: 0.7;
-
-  kbd {
-    display: inline-block;
-    padding: 2px 6px;
-    font-size: 11px;
-    font-family: var(--cc-font-mono);
-    background-color: var(--cc-surface-container-high);
-    border: 1px solid var(--cc-outline);
-    border-radius: 4px;
-    color: var(--cc-on-surface-variant);
-    line-height: 1.4;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Mobile Adjustments
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .quick-jump-drawer {
-    width: 100%;
-    max-width: 100vw;
-  }
-
-  .quick-jump-drawer__header {
-    padding: 16px 16px 10px;
-  }
-
-  .quick-jump-drawer__search {
-    margin: 12px 16px 8px;
-  }
-
-  .quick-jump-drawer__agent-list {
-    padding: 4px 8px;
-  }
-
-  .quick-jump-drawer__footer {
-    padding: 10px 16px 14px;
-  }
-}
--- a/frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.ts
+++ b/frontend/src/app/components/quick-jump-drawer/quick-jump-drawer.component.ts
@@ -1,215 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  OnDestroy,
-  Output,
-  signal,
-  ViewChild,
-} from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Subject, takeUntil } from 'rxjs';
-import { AgentCardData } from '../../models/agent.model';
-import { AgentStatusService } from '../../services/agent-status.service';
-
-@Component({
-  selector: 'app-quick-jump-drawer',
-  standalone: true,
-  imports: [ReactiveFormsModule],
-  templateUrl: './quick-jump-drawer.component.html',
-  styleUrl: './quick-jump-drawer.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class QuickJumpDrawerComponent implements OnDestroy {
-  /** Emits when the drawer should close (ESC, outside click, or item select). */
-  @Output() readonly drawerClose = new EventEmitter<void>();
-
-  /** Whether the drawer is visible. */
-  readonly isOpen = signal(false);
-
-  /** Search/filter input control. */
-  readonly searchControl = new FormControl('', { nonNullable: true });
-
-  /** Filtered agent list based on search. */
-  readonly filteredAgents = signal<AgentCardData[]>([]);
-
-  /** Track which agent row is highlighted via keyboard navigation. */
-  readonly highlightedIndex = signal(-1);
-
-  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
-  @ViewChild('drawerPanel') drawerPanel!: ElementRef<HTMLElement>;
-
-  private readonly destroy$ = new Subject<void>();
-
-  constructor(private readonly agentStatusService: AgentStatusService) {
-    // Reactively filter agents as the search input changes
-    this.searchControl.valueChanges
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((query) => this.filterAgents(query));
-
-    // Initial load
-    this.filterAgents('');
-  }
-
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  /** Open the drawer and focus the search input. */
-  open(): void {
-    this.isOpen.set(true);
-    this.searchControl.setValue('', { emitEvent: false });
-    this.highlightedIndex.set(-1);
-    // Focus search input after animation frame (drawer needs to render first)
-    requestAnimationFrame(() => {
-      this.searchInput?.nativeElement?.focus();
-    });
-  }
-
-  /** Close the drawer. */
-  close(): void {
-    this.isOpen.set(false);
-    this.searchControl.setValue('', { emitEvent: false });
-    this.highlightedIndex.set(-1);
-    this.drawerClose.emit();
-  }
-
-  /** Toggle the drawer open/close. */
-  toggle(): void {
-    if (this.isOpen()) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Keyboard Handling
-  // ---------------------------------------------------------------------------
-
-  @HostListener('document:keydown.escape')
-  onEscapeKey(): void {
-    if (this.isOpen()) {
-      this.close();
-    }
-  }
-
-  /** Handle keyboard navigation within the drawer panel. */
-  onDrawerKeydown(event: KeyboardEvent): void {
-    const agents = this.filteredAgents();
-    if (!agents.length) return;
-
-    switch (event.key) {
-      case 'ArrowDown': {
-        event.preventDefault();
-        this.highlightedIndex.update((i) =>
-          i < agents.length - 1 ? i + 1 : 0
-        );
-        this.scrollIntoView();
-        break;
-      }
-      case 'ArrowUp': {
-        event.preventDefault();
-        this.highlightedIndex.update((i) =>
-          i > 0 ? i - 1 : agents.length - 1
-        );
-        this.scrollIntoView();
-        break;
-      }
-      case 'Enter': {
-        const idx = this.highlightedIndex();
-        if (idx >= 0 && idx < agents.length) {
-          this.selectAgent(agents[idx]);
-        }
-        break;
-      }
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Outside Click
-  // ---------------------------------------------------------------------------
-
-  /** Close when clicking on the backdrop (outside the panel). */
-  onBackdropClick(event: MouseEvent): void {
-    if (
-      this.drawerPanel?.nativeElement &&
-      !this.drawerPanel.nativeElement.contains(event.target as Node)
-    ) {
-      this.close();
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Agent Selection
-  // ---------------------------------------------------------------------------
-
-  /** Select an agent — navigates or focuses the agent card. */
-  selectAgent(agent: AgentCardData): void {
-    // TODO: Wire up navigation to the selected agent's detail view
-    // For now, emit close after selection
-    console.log('[QuickJump] Selected agent:', agent.id);
-    this.close();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Status Helpers
-  // ---------------------------------------------------------------------------
-
-  /** Get the CSS class for a given agent status. */
-  getStatusClass(status: string): string {
-    return `status-dot--${status}`;
-  }
-
-  /** Get a human-readable label for an agent status. */
-  getStatusLabel(status: string): string {
-    const labels: Record<string, string> = {
-      active: 'Active',
-      idle: 'Idle',
-      thinking: 'Thinking',
-      error: 'Error',
-      offline: 'Offline',
-    };
-    return labels[status] ?? status;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Lifecycle
-  // ---------------------------------------------------------------------------
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Private
-  // ---------------------------------------------------------------------------
-
-  private filterAgents(query: string): void {
-    const allAgents = this.agentStatusService.agents();
-    const lowerQuery = query.toLowerCase().trim();
-
-    if (!lowerQuery) {
-      this.filteredAgents.set(allAgents);
-      return;
-    }
-
-    const filtered = allAgents.filter(
-      (agent) =>
-        agent.displayName.toLowerCase().includes(lowerQuery) ||
-        agent.id.toLowerCase().includes(lowerQuery) ||
-        agent.role.toLowerCase().includes(lowerQuery)
-    );
-    this.filteredAgents.set(filtered);
-    this.highlightedIndex.set(-1);
-  }
-
-  private scrollIntoView(): void {
-    const idx = this.highlightedIndex();
-    const el = document.getElementById(`quick-jump-agent-${idx}`);
-    el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-  }
-}
--- a/frontend/src/app/components/task-progress-bar/index.ts
+++ b/frontend/src/app/components/task-progress-bar/index.ts
@@ -1,6 +0,0 @@
-// ============================================================================
-// Task Progress Bar — Barrel Export
-// CUB-44
-// ============================================================================
-
-export { TaskProgressBarComponent } from './task-progress-bar.component';
--- a/frontend/src/app/components/task-progress-bar/task-progress-bar.component.html
+++ b/frontend/src/app/components/task-progress-bar/task-progress-bar.component.html
@@ -1,18 +0,0 @@
-<!-- Task Progress Bar: determinate progress with optional elapsed time -->
-<div class="task-progress-bar">
-  <!-- Info row: percentage + optional elapsed -->
-  <div class="task-progress-bar__info">
-    <span class="task-progress-bar__percent">{{ clampedProgress }}%</span>
-    <span *ngIf="showElapsed" class="task-progress-bar__elapsed">
-      {{ elapsedText }}
-    </span>
-  </div>
-
-  <!-- Angular Material determinate progress bar -->
-  <mat-progress-bar
-    class="task-progress-bar__bar"
-    mode="determinate"
-    [value]="clampedProgress"
-    aria-label="Task progress"
-  ></mat-progress-bar>
-</div>
--- a/frontend/src/app/components/task-progress-bar/task-progress-bar.component.scss
+++ b/frontend/src/app/components/task-progress-bar/task-progress-bar.component.scss
@@ -1,77 +0,0 @@
-// ============================================================================
-// Task Progress Bar — Tactical Dark Theme Styling
-// Per CUB-44: Uses --color-primary for bar fill and --color-surface-light
-// for track background, mapped to the Control Center's M3 dark tokens.
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Container
-// ---------------------------------------------------------------------------
-.task-progress-bar {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 100%;
-}
-
-// ---------------------------------------------------------------------------
-// Info row: percentage label + elapsed time
-// ---------------------------------------------------------------------------
-.task-progress-bar__info {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.task-progress-bar__percent {
-  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--cc-on-surface, #E2E8F0);
-  letter-spacing: 0.02em;
-}
-
-.task-progress-bar__elapsed {
-  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--cc-on-surface-variant, #8A9BB0);
-  letter-spacing: 0.01em;
-}
-
-// ---------------------------------------------------------------------------
-// Material Progress Bar Overrides
-// ---------------------------------------------------------------------------
-// Map the spec's --color-primary and --color-surface-light to the Control
-// Center's actual theme tokens. This ensures the bar uses the tactical dark
-// palette while respecting the spec's variable naming.
-// ---------------------------------------------------------------------------
-
-.task-progress-bar__bar {
-  // Override the track (background) to use the surface container
-  --mat-progress-bar-track-height: 6px;
-  --mat-progress-bar-active-indicator-height: 6px;
-
-  // Bar fill color: primary (cyan/sky blue per tactical dark theme)
-  --mat-progress-bar-active-indicator-color: var(--color-primary, var(--mat-sys-primary, #38BDF8));
-
-  // Track background: surface container (dark slate)
-  --mat-progress-bar-track-color: var(--color-surface-light, var(--cc-surface-container, #1C2027));
-
-  // Border radius for a softer bar
-  border-radius: 3px;
-
-  // Smooth transition on value changes
-  transition: none;
-}
-
-// Rounded ends on the progress bar fill
-:host ::ng-deep .mdc-linear-progress__bar-inner {
-  border-radius: 3px;
-}
-
-// Rounded track background
-:host ::ng-deep .mdc-linear-progress__track {
-  border-radius: 3px;
-}
--- a/frontend/src/app/components/task-progress-bar/task-progress-bar.component.ts
+++ b/frontend/src/app/components/task-progress-bar/task-progress-bar.component.ts
@@ -1,109 +0,0 @@
-// ============================================================================
-// Task Progress Bar Component
-// Per CUB-44: Determinate progress bar with optional elapsed time display.
-// Uses Angular Material mat-progress-bar in determinate mode with tactical
-// dark theme styling via CSS custom properties.
-// ============================================================================
-
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-
-/**
- * Displays a determinate progress bar with an optional elapsed time indicator.
- *
- * Usage:
- * ```html
- * <app-task-progress-bar [progress]="65" />
- * <app-task-progress-bar [progress]="42" [showElapsed]="true" />
- * ```
- */
-@Component({
-  selector: 'app-task-progress-bar',
-  standalone: true,
-  imports: [CommonModule, MatProgressBarModule],
-  templateUrl: './task-progress-bar.component.html',
-  styleUrl: './task-progress-bar.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TaskProgressBarComponent implements OnInit, OnDestroy {
-  // ---------------------------------------------------------------------------
-  // Inputs
-  // ---------------------------------------------------------------------------
-
-  /** Current progress percentage (0–100). Required. */
-  @Input({ required: true })
-  progress!: number;
-
-  /** Whether to show elapsed time next to the percentage. Defaults to false. */
-  @Input()
-  showElapsed = false;
-
-  // ---------------------------------------------------------------------------
-  // Internal state
-  // ---------------------------------------------------------------------------
-
-  /** Timestamp when the component initialized — used for elapsed calculation. */
-  startTime = Date.now();
-
-  /** Formatted elapsed time string, e.g. "2m 15s ago". */
-  elapsedText = '';
-
-  /** Interval timer for updating the elapsed display. */
-  private timer: ReturnType<typeof setInterval> | null = null;
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  // ---------------------------------------------------------------------------
-  // Lifecycle
-  // ---------------------------------------------------------------------------
-
-  ngOnInit(): void {
-    this.updateElapsed();
-
-    if (this.showElapsed) {
-      // Update elapsed time every second
-      this.timer = setInterval(() => {
-        this.updateElapsed();
-        this.cdr.markForCheck();
-      }, 1000);
-    }
-  }
-
-  ngOnDestroy(): void {
-    if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Helpers
-  // ---------------------------------------------------------------------------
-
-  /** Clamp progress to 0–100 for safety. */
-  get clampedProgress(): number {
-    return Math.max(0, Math.min(100, this.progress ?? 0));
-  }
-
-  /** Recalculate the elapsed time string. */
-  private updateElapsed(): void {
-    const elapsedMs = Date.now() - this.startTime;
-    const totalSeconds = Math.floor(elapsedMs / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-
-    if (minutes > 0) {
-      this.elapsedText = `${minutes}m ${seconds}s ago`;
-    } else {
-      this.elapsedText = `${seconds}s ago`;
-    }
-  }
-}
--- a/frontend/src/app/design/index.ts
+++ b/frontend/src/app/design/index.ts
@@ -1,11 +0,0 @@
-// ============================================================================
-// OpenClaw Control Center — Design System Barrel Export
-// ============================================================================
-// Import everything from '@app/design' for convenient access.
-//
-// Usage:
-//   import { CcTokens, CcThemeService, CcCssProps } from '@app/design';
-// ============================================================================
-
-export * from './tokens';
-export * from './theme.service';
--- a/frontend/src/app/design/theme.service.ts
+++ b/frontend/src/app/design/theme.service.ts
@@ -1,151 +0,0 @@
-// ============================================================================
-// OpenClaw Control Center — Theme Service
-// ============================================================================
-// Angular service providing programmatic access to design tokens, theme
-// mode switching (dark/light), and runtime CSS custom property manipulation.
-//
-// Usage:
-//   constructor(private theme: CcThemeService) {}
-//
-//   // Read a token
-//   const primary = this.theme.getToken('--cc-color-primary');
-//
-//   // Set a token at runtime
-//   this.theme.setToken('--cc-color-primary', '#00ff00');
-//
-//   // Toggle theme
-//   this.theme.setMode('light');
-// ============================================================================
-
-import { Injectable, signal, computed, effect } from '@angular/core';
-import { CcCssProps, getStatusColor, setCssToken, getCssToken } from './tokens';
-
-// ---------------------------------------------------------------------------
-// Theme Mode Types
-// ---------------------------------------------------------------------------
-export type ThemeMode = 'dark' | 'light';
-
-// ---------------------------------------------------------------------------
-// Light theme overrides (future use)
-// ---------------------------------------------------------------------------
-const LIGHT_THEME_OVERRIDES: Record<string, string> = {
-  // Surface tokens
-  '--cc-surface-darkest':     '#F8FAFC',
-  '--cc-surface-dark':        '#FFFFFF',
-  '--cc-surface-medium':      '#F1F5F9',
-  '--cc-surface-light':       '#E2E8F0',
-  '--cc-surface-lighter':     '#CBD5E1',
-
-  // On-surface tokens
-  '--cc-on-surface':          '#0F172A',
-  '--cc-on-surface-variant':  '#475569',
-  '--cc-on-surface-muted':    '#94A3B8',
-
-  // Border
-  '--cc-surface-lighter-alt': '#E2E8F0',
-
-  // M3 system overrides for light
-  '--mat-sys-surface':                '#FFFFFF',
-  '--mat-sys-surface-container':      '#F1F5F9',
-  '--mat-sys-surface-container-high': '#E2E8F0',
-  '--mat-sys-on-surface':            '#0F172A',
-  '--mat-sys-on-surface-variant':    '#475569',
-  '--mat-sys-outline':               '#CBD5E1',
-  '--mat-sys-background':            '#F8FAFC',
-};
-
-// ---------------------------------------------------------------------------
-// Dark theme (matches the SCSS defaults)
-// ---------------------------------------------------------------------------
-const DARK_THEME_OVERRIDES: Record<string, string> = {
-  '--cc-surface-darkest':     '#0D0F12',
-  '--cc-surface-dark':        '#13161A',
-  '--cc-surface-medium':      '#1C2027',
-  '--cc-surface-light':       '#252B33',
-  '--cc-surface-lighter':     '#2D3748',
-
-  '--cc-on-surface':          '#E2E8F0',
-  '--cc-on-surface-variant':  '#8A9BB0',
-  '--cc-on-surface-muted':    '#64748B',
-
-  '--mat-sys-surface':                '#13161A',
-  '--mat-sys-surface-container':      '#1C2027',
-  '--mat-sys-surface-container-high': '#252B33',
-  '--mat-sys-on-surface':            '#E2E8F0',
-  '--mat-sys-on-surface-variant':    '#8A9BB0',
-  '--mat-sys-outline':               '#2D3748',
-  '--mat-sys-background':            '#0D0F12',
-};
-
-@Injectable({ providedIn: 'root' })
-export class CcThemeService {
-  // ---------------------------------------------------------------------------
-  // Signals for reactive theme state
-  // ---------------------------------------------------------------------------
-  private readonly _mode = signal<ThemeMode>(
-    (localStorage.getItem('cc-theme') as ThemeMode) ?? 'dark'
-  );
-
-  /** Current theme mode */
-  readonly mode = this._mode.asReadonly();
-
-  /** Computed: is the current mode dark? */
-  readonly isDark = computed(() => this._mode() === 'dark');
-
-  /** Computed: is the current mode light? */
-  readonly isLight = computed(() => this._mode() === 'light');
-
-  constructor() {
-    // Apply theme on init and whenever mode changes
-    effect(() => {
-      this.applyTheme(this._mode());
-    });
-  }
-
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  /** Set the theme mode and persist to localStorage */
-  setMode(mode: ThemeMode): void {
-    this._mode.set(mode);
-    localStorage.setItem('cc-theme', mode);
-  }
-
-  /** Toggle between dark and light mode */
-  toggle(): void {
-    this.setMode(this._mode() === 'dark' ? 'light' : 'dark');
-  }
-
-  /** Read a CSS custom property from the document root */
-  getToken(property: string): string {
-    return getCssToken(property);
-  }
-
-  /** Set a CSS custom property on the document root */
-  setToken(property: string, value: string): void {
-    setCssToken(property, value);
-  }
-
-  /** Get status color set by agent status */
-  getStatusColors(status: string): { fg: string; bg: string; border: string } {
-    return getStatusColor(status);
-  }
-
-  // ---------------------------------------------------------------------------
-  // Internal
-  // ---------------------------------------------------------------------------
-
-  /** Apply a theme mode by setting all CSS custom properties */
-  private applyTheme(mode: ThemeMode): void {
-    const overrides = mode === 'dark' ? DARK_THEME_OVERRIDES : LIGHT_THEME_OVERRIDES;
-
-    // Set color-scheme for native form controls
-    document.documentElement.style.setProperty('color-scheme', mode);
-
-    // Apply all overrides
-    for (const [prop, value] of Object.entries(overrides)) {
-      document.documentElement.style.setProperty(prop, value);
-    }
-  }
-}
--- a/frontend/src/app/design/tokens.ts
+++ b/frontend/src/app/design/tokens.ts
@@ -1,462 +0,0 @@
-// ============================================================================
-// OpenClaw Control Center — Design Tokens (TypeScript)
-// ============================================================================
-// Typed representation of the design system tokens for programmatic access.
-// These mirror the SCSS tokens in styles/_tokens.scss and the CSS custom
-// properties emitted by styles/_css-properties.scss.
-//
-// Usage:
-//   import { CcTokens } from '@app/design/tokens';
-//   const primary = CcTokens.color.primary;
-//   const surface = CcTokens.surface.dark;
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Color Palette
-// ---------------------------------------------------------------------------
-export const CcColors = {
-  primary: {
-    50:  '#ecfeff',
-    100: '#cffafe',
-    200: '#a5f3fc',
-    300: '#67e8f9',
-    400: '#22d3ee',
-    500: '#38bdf8',
-    600: '#0ea5e9',
-    700: '#0284c7',
-    800: '#0369a1',
-    900: '#075985',
-  },
-  secondary: {
-    50:  '#f0fdfa',
-    100: '#ccfbf1',
-    200: '#99f6e4',
-    300: '#5eead4',
-    400: '#2dd4bf',
-    500: '#14b8a6',
-    600: '#0d9488',
-    700: '#0f766e',
-    800: '#115e59',
-    900: '#134e4a',
-  },
-  accent: {
-    50:  '#f5f3ff',
-    100: '#ede9fe',
-    200: '#ddd6fe',
-    300: '#c4b5fd',
-    400: '#a78bfa',
-    500: '#8b5cf6',
-    600: '#7c3aed',
-    700: '#6d28d9',
-    800: '#5b21b6',
-    900: '#4c1d95',
-  },
-  danger: {
-    50:  '#fef2f2',
-    100: '#fee2e2',
-    200: '#fecaca',
-    300: '#fca5a5',
-    400: '#f87171',
-    500: '#ef4444',
-    600: '#dc2626',
-    700: '#b91c1c',
-    800: '#991b1b',
-    900: '#7f1d1d',
-  },
-} as const;
-
-// ---------------------------------------------------------------------------
-// Semantic Colors (Tactical Dark)
-// ---------------------------------------------------------------------------
-export const CcSemanticColors = {
-  surface: {
-    darkest: '#0D0F12',
-    dark:    '#13161A',
-    medium:  '#1C2027',
-    light:   '#252B33',
-    lighter: '#2D3748',
-  },
-  onSurface: {
-    primary:  '#E2E8F0',
-    variant:  '#8A9BB0',
-    muted:    '#64748B',
-  },
-} as const;
-
-// ---------------------------------------------------------------------------
-// Status Colors
-// ---------------------------------------------------------------------------
-export const CcStatusColors = {
-  active:   { fg: '#38bdf8', bg: 'rgba(56, 189, 248, 0.12)',  border: 'rgba(56, 189, 248, 0.40)' },
-  idle:     { fg: '#2dd4bf', bg: 'rgba(45, 212, 191, 0.12)',  border: 'rgba(45, 212, 191, 0.40)' },
-  thinking: { fg: '#a78bfa', bg: 'rgba(167, 139, 250, 0.12)', border: 'rgba(167, 139, 250, 0.40)' },
-  error:    { fg: '#f87171', bg: 'rgba(248, 113, 113, 0.12)', border: 'rgba(248, 113, 113, 0.40)' },
-  offline:  { fg: '#64748b', bg: 'rgba(100, 116, 139, 0.12)', border: 'rgba(100, 116, 139, 0.40)' },
-} as const;
-
-// ---------------------------------------------------------------------------
-// Convenience exports for component usage (CUB-20)
-// ---------------------------------------------------------------------------
-/** Status colors — maps AgentStatus to hex values */
-export const STATUS_COLORS: Record<string, string> = {
-  active: '#38BDF8',
-  idle: '#2DD4BF',
-  thinking: '#A78BFA',
-  error: '#F87171',
-  offline: '#64748B',
-};
-
-/** Status background tints (12% opacity) */
-export const STATUS_BG_COLORS: Record<string, string> = {
-  active: 'rgba(56, 189, 248, 0.12)',
-  idle: 'rgba(45, 212, 191, 0.12)',
-  thinking: 'rgba(167, 139, 250, 0.12)',
-  error: 'rgba(248, 113, 113, 0.12)',
-  offline: 'rgba(100, 116, 139, 0.12)',
-};
-
-/** Surface overrides (CUB-20 convenience) */
-export const SURFACE = {
-  background: '#0D0F12',
-  surface: '#13161A',
-  container: '#1C2027',
-  containerHigh: '#252B33',
-  onSurface: '#E2E8F0',
-  onSurfaceVariant: '#8A9BB0',
-  outline: '#2D3748',
-} as const;
-
-/** Tactical Dark Mode color palette (CUB-20 convenience) */
-export const COLORS = {
-  surface: '#0F172A',
-  surfaceLight: '#1E293B',
-  primary: '#38BDF8',
-  secondary: '#2DD4BF',
-  accent: '#A78BFA',
-  danger: '#F87171',
-  textPrimary: '#FFFFFF',
-  textSecondary: '#94A3B8',
-  border: '#334155',
-} as const;
-
-/** Layout constants (CUB-20 convenience) */
-export const LAYOUT = {
-  navRailCollapsedWidth: 72,
-  navRailExpandedWidth: 256,
-  headerHeight: 64,
-  bottomNavHeight: 80,
-  cardBorderRadius: 16,
-  cardMinWidth: 320,
-  cardGap: 16,
-  cardPadding: 20,
-  sectionPadding: 24,
-  spacingUnit: 8,
-} as const;
-
-/** Breakpoints (px) (CUB-20 convenience) */
-export const BREAKPOINTS = {
-  mobile: 599,
-  tablet: 1023,
-  desktop: 1024,
-} as const;
-
-/** Channel icon mapping (CUB-20) */
-export const CHANNEL_ICONS: Record<string, string> = {
-  telegram: 'telegram',
-  slack: 'chat',
-  discord: 'forum',
-  whatsapp: 'chat',
-  webchat: 'language',
-  email: 'email',
-  mqtt: 'sensors',
-};
-
-/** Human-readable status labels (CUB-20) */
-export const STATUS_LABELS: Record<string, string> = {
-  active: 'Active',
-  idle: 'Idle',
-  thinking: 'Thinking…',
-  error: 'Error',
-  offline: 'Offline',
-};
-
-// ---------------------------------------------------------------------------
-// Typography
-// ---------------------------------------------------------------------------
-export const CcTypography = {
-  fontFamily: {
-    brand: "'Inter, Roboto, sans-serif'",
-    body:  "'Inter, Roboto, sans-serif'",
-    mono:  "'Roboto Mono, Cascadia Code, Fira Code, monospace'",
-  },
-  size: {
-    displayLarge:  '57px',
-    displayMedium: '45px',
-    displaySmall:  '36px',
-    headlineLarge: '32px',
-    headlineMedium: '28px',
-    headlineSmall:  '24px',
-    titleLarge:    '22px',
-    titleMedium:   '16px',
-    titleSmall:    '14px',
-    bodyLarge:     '16px',
-    bodyMedium:    '14px',
-    bodySmall:     '12px',
-    labelLarge:    '14px',
-    labelMedium:   '12px',
-    labelSmall:    '11px',
-  },
-  weight: {
-    regular: 400,
-    medium:  500,
-    bold:    600,
-    heavy:   700,
-  },
-  lineHeight: {
-    tight:   '1.2',
-    normal:  '1.5',
-    relaxed: '1.6',
-  },
-  letterSpacing: {
-    tight:  '-0.01em',
-    normal: '0em',
-    wide:   '0.02em',
-    mono:   '0.05em',
-  },
-} as const;
-
-// ---------------------------------------------------------------------------
-// Spacing (4px grid)
-// ---------------------------------------------------------------------------
-export const CcSpacing = {
-  0:  '0px',
-  1:  '4px',
-  2:  '8px',
-  3:  '12px',
-  4:  '16px',
-  5:  '20px',
-  6:  '24px',
-  7:  '28px',
-  8:  '32px',
-  9:  '36px',
-  10: '40px',
-  12: '48px',
-  14: '56px',
-  16: '64px',
-  20: '80px',
-} as const;
-
-// ---------------------------------------------------------------------------
-// Layout
-// ---------------------------------------------------------------------------
-export const CcLayout = {
-  navRailCollapsedWidth: '72px',
-  navRailExpandedWidth:  '256px',
-  headerHeight:          '64px',
-  bottomNavHeight:       '80px',
-  cardBorderRadius:      '16px',
-  cardMinWidth:          '320px',
-  badgeHeight:           '24px',
-  badgeBorderRadius:     '12px',
-  statusDotSize:         '10px',
-} as const;
-
-// ---------------------------------------------------------------------------
-// Breakpoints (M3 canonical)
-// ---------------------------------------------------------------------------
-export const CcBreakpoints = {
-  compact:  599,
-  medium:   767,
-  expanded: 1023,
-  large:    1439,
-} as const;
-
-// ---------------------------------------------------------------------------
-// Border Radius
-// ---------------------------------------------------------------------------
-export const CcRadius = {
-  none: '0px',
-  xs:   '4px',
-  sm:   '8px',
-  md:   '12px',
-  lg:   '16px',
-  xl:   '24px',
-  full: '9999px',
-} as const;
-
-// ---------------------------------------------------------------------------
-// Shadows (M3 elevation)
-// ---------------------------------------------------------------------------
-export const CcShadows = {
-  level0: 'none',
-  level1: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3)',
-  level2: '0 2px 6px 0 rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)',
-  level3: '0 4px 12px 0 rgba(0, 0, 0, 0.3), 0 4px 8px -4px rgba(0, 0, 0, 0.3)',
-  level4: '0 8px 24px 0 rgba(0, 0, 0, 0.3), 0 8px 16px -8px rgba(0, 0, 0, 0.3)',
-} as const;
-
-// ---------------------------------------------------------------------------
-// Motion
-// ---------------------------------------------------------------------------
-export const CcMotion = {
-  duration: {
-    instant:   0,
-    fast:      100,
-    short:     150,
-    medium:    200,
-    standard: 300,
-    long:     500,
-  },
-  easing: {
-    standard:   'cubic-bezier(0.4, 0, 0.2, 1)',
-    decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
-    accelerate: 'cubic-bezier(0.4, 0, 1, 1)',
-    sharp:     'cubic-bezier(0.4, 0, 0.6, 1)',
-  },
-} as const;
-
-// ---------------------------------------------------------------------------
-// Accessibility
-// ---------------------------------------------------------------------------
-export const CcA11y = {
-  focusRing: {
-    width:   '2px',
-    offset:  '2px',
-    color:   '#38bdf8',
-    style:   'solid',
-  },
-  minTouchTarget: 48,
-  minBodyFont:    16,
-} as const;
-
-// ---------------------------------------------------------------------------
-// Aggregate token object for convenient access
-// ---------------------------------------------------------------------------
-export const CcTokens = {
-  color: CcColors,
-  semantic: CcSemanticColors,
-  status: CcStatusColors,
-  typography: CcTypography,
-  spacing: CcSpacing,
-  layout: CcLayout,
-  breakpoints: CcBreakpoints,
-  radius: CcRadius,
-  shadows: CcShadows,
-  motion: CcMotion,
-  a11y: CcA11y,
-} as const;
-
-// ---------------------------------------------------------------------------
-// CSS Custom Property Names
-// ---------------------------------------------------------------------------
-export const CcCssProps = {
-  // Color
-  colorPrimary:      '--cc-color-primary',
-  colorSecondary:    '--cc-color-secondary',
-  colorAccent:       '--cc-color-accent',
-  colorDanger:       '--cc-color-danger',
-
-  // Surface
-  surfaceDarkest:    '--cc-surface-darkest',
-  surfaceDark:       '--cc-surface-dark',
-  surfaceMedium:     '--cc-surface-medium',
-  surfaceLight:      '--cc-surface-light',
-  surfaceLighter:    '--cc-surface-lighter',
-
-  // On-surface
-  onSurface:         '--cc-on-surface',
-  onSurfaceVariant:  '--cc-on-surface-variant',
-  onSurfaceMuted:    '--cc-on-surface-muted',
-
-  // Status
-  statusActive:       '--cc-status-active',
-  statusIdle:         '--cc-status-idle',
-  statusThinking:    '--cc-status-thinking',
-  statusError:        '--cc-status-error',
-  statusOffline:      '--cc-status-offline',
-  statusActiveBg:     '--cc-status-active-bg',
-  statusIdleBg:       '--cc-status-idle-bg',
-  statusThinkingBg:   '--cc-status-thinking-bg',
-  statusErrorBg:      '--cc-status-error-bg',
-  statusOfflineBg:    '--cc-status-offline-bg',
-  statusActiveBorder:  '--cc-status-active-border',
-  statusIdleBorder:    '--cc-status-idle-border',
-  statusThinkingBorder: '--cc-status-thinking-border',
-  statusErrorBorder:   '--cc-status-error-border',
-  statusOfflineBorder: '--cc-status-offline-border',
-
-  // Typography
-  fontBrand: '--cc-font-brand',
-  fontBody:  '--cc-font-body',
-  fontMono:  '--cc-font-mono',
-
-  // Spacing
-  spacing2:  '--cc-spacing-2',
-  spacing4:  '--cc-spacing-4',
-  spacing6:  '--cc-spacing-6',
-  spacing8:  '--cc-spacing-8',
-  spacing12: '--cc-spacing-12',
-  spacing16: '--cc-spacing-16',
-
-  // Layout
-  navRailCollapsed: '--cc-nav-rail-collapsed',
-  navRailExpanded:  '--cc-nav-rail-expanded',
-  headerHeight:      '--cc-header-height',
-  bottomNavHeight:  '--cc-bottom-nav-height',
-  cardRadius:       '--cc-card-radius',
-  cardMinWidth:     '--cc-card-min-width',
-
-  // Radius
-  radiusNone: '--cc-radius-none',
-  radiusXs:   '--cc-radius-xs',
-  radiusSm:   '--cc-radius-sm',
-  radiusMd:   '--cc-radius-md',
-  radiusLg:   '--cc-radius-lg',
-  radiusXl:   '--cc-radius-xl',
-  radiusFull: '--cc-radius-full',
-
-  // Shadows
-  shadow0: '--cc-shadow-0',
-  shadow1: '--cc-shadow-1',
-  shadow2: '--cc-shadow-2',
-  shadow3: '--cc-shadow-3',
-  shadow4: '--cc-shadow-4',
-
-  // Motion
-  durationFast:     '--cc-duration-fast',
-  durationShort:    '--cc-duration-short',
-  durationMedium:   '--cc-duration-medium',
-  durationStandard: '--cc-duration-standard',
-  durationLong:     '--cc-duration-long',
-  easingStandard:   '--cc-easing-standard',
-  easingDecelerate: '--cc-easing-decelerate',
-  easingAccelerate: '--cc-easing-accelerate',
-
-  // Accessibility
-  focusWidth:  '--cc-focus-width',
-  focusOffset: '--cc-focus-offset',
-  focusColor:  '--cc-focus-color',
-  touchMin:    '--cc-touch-min',
-} as const;
-
-// ---------------------------------------------------------------------------
-// Utility: Read a CSS custom property from the document
-// ---------------------------------------------------------------------------
-export function getCssToken(propertyName: string): string {
-  return getComputedStyle(document.documentElement).getPropertyValue(propertyName).trim();
-}
-
-// ---------------------------------------------------------------------------
-// Utility: Set a CSS custom property on the document root
-// ---------------------------------------------------------------------------
-export function setCssToken(propertyName: string, value: string): void {
-  document.documentElement.style.setProperty(propertyName, value);
-}
-
-// ---------------------------------------------------------------------------
-// Utility: Get status color by agent status type
-// ---------------------------------------------------------------------------
-export function getStatusColor(status: string): { fg: string; bg: string; border: string } {
-  const statusMap: Record<string, { fg: string; bg: string; border: string }> = CcStatusColors;
-  return statusMap[status] ?? CcStatusColors.offline;
-}
--- a/frontend/src/app/directives/index.ts
+++ b/frontend/src/app/directives/index.ts
@@ -1 +0,0 @@
-export { LongPressDirective } from './long-press.directive';
--- a/frontend/src/app/directives/long-press.directive.ts
+++ b/frontend/src/app/directives/long-press.directive.ts
@@ -1,89 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  EventEmitter,
-  OnDestroy,
-  Output,
-  Input,
-} from '@angular/core';
-
-// ============================================================================
-// Long-Press Directive — CUB-26
-// Emits after a sustained press (500ms default).
-// Used on agent cards to bypass the drawer and open Session Log directly.
-// ============================================================================
-
-@Directive({
-  selector: '[appLongPress]',
-  standalone: true,
-  host: {
-    '(mousedown)': 'onMouseDown($event)',
-    '(mouseup)': 'onMouseUp()',
-    '(mouseleave)': 'onMouseLeave()',
-    '(touchstart)': 'onTouchStart($event)',
-    '(touchend)': 'onTouchEnd()',
-    '(touchmove)': 'onTouchMove()',
-    '(contextmenu)': 'onContextMenu($event)',
-  },
-})
-export class LongPressDirective implements OnDestroy {
-  /** Duration in ms before a press counts as a long press. */
-  @Input() appLongPressDuration = 500;
-
-  /** Emits when a long press is detected. Payload is the original event. */
-  @Output() readonly appLongPress = new EventEmitter<MouseEvent | TouchEvent>();
-
-  private timer: ReturnType<typeof setTimeout> | null = null;
-  private isLongPress = false;
-
-  onMouseDown(event: MouseEvent): void {
-    this.isLongPress = false;
-    this.timer = setTimeout(() => {
-      this.isLongPress = true;
-      this.appLongPress.emit(event);
-    }, this.appLongPressDuration);
-  }
-
-  onMouseUp(): void {
-    this.clearTimer();
-  }
-
-  onMouseLeave(): void {
-    this.clearTimer();
-  }
-
-  onTouchStart(event: TouchEvent): void {
-    this.isLongPress = false;
-    this.timer = setTimeout(() => {
-      this.isLongPress = true;
-      this.appLongPress.emit(event);
-    }, this.appLongPressDuration);
-  }
-
-  onTouchEnd(): void {
-    this.clearTimer();
-  }
-
-  onTouchMove(): void {
-    // Cancel on touch move (finger moved)
-    this.clearTimer();
-  }
-
-  onContextMenu(event: MouseEvent): void {
-    // Prevent native context menu on long press
-    if (this.isLongPress) {
-      event.preventDefault();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.clearTimer();
-  }
-
-  private clearTimer(): void {
-    if (this.timer !== null) {
-      clearTimeout(this.timer);
-      this.timer = null;
-    }
-  }
-}
--- a/frontend/src/app/layout/bottom-nav/bottom-nav.component.html
+++ b/frontend/src/app/layout/bottom-nav/bottom-nav.component.html
@@ -1,24 +0,0 @@
-<nav class="bottom-nav" aria-label="Bottom navigation">
-  @for (dest of destinations; track dest.route) {
-    <a
-      class="bottom-nav__item"
-      [routerLink]="dest.route"
-      routerLinkActive="bottom-nav__item--active"
-      #rla="routerLinkActive"
-      [attr.aria-label]="dest.label"
-      [attr.aria-current]="rla.isActive ? 'page' : null"
-    >
-      <span class="bottom-nav__icon-wrapper">
-        <mat-icon
-          [matBadge]="dest.badge ?? 0"
-          [matBadgeHidden]="!dest.badge"
-          matBadgePosition="above after"
-          matBadgeSize="small"
-        >
-          {{ dest.icon }}
-        </mat-icon>
-      </span>
-      <span class="bottom-nav__label">{{ dest.label }}</span>
-    </a>
-  }
-</nav>
--- a/frontend/src/app/layout/bottom-nav/bottom-nav.component.scss
+++ b/frontend/src/app/layout/bottom-nav/bottom-nav.component.scss
@@ -1,94 +0,0 @@
-// ============================================================================
-// Bottom Navigation Bar — Mobile Navigation
-// Per CUB-27 spec breakpoints:
-//   Compact (0–599px): Visible — M3 NavigationBar pattern
-//   Medium+ (≥600px): Hidden — nav rail takes over
-// ============================================================================
-
-.bottom-nav {
-  display: none; // Hidden on desktop, shown on mobile via media query
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: var(--cc-bottom-nav-height);
-  background-color: var(--cc-surface-container-high);
-  border-top: 1px solid var(--cc-outline);
-  z-index: 50;
-  align-items: center;
-  justify-content: space-around;
-  padding: 0 8px;
-  // Safe area inset for notched devices
-  padding-bottom: env(safe-area-inset-bottom, 0px);
-}
-
-.bottom-nav__item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  min-width: 48px;
-  min-height: 48px;
-  padding: 8px 0;
-  text-decoration: none;
-  color: var(--cc-on-surface-variant);
-  border-radius: 16px;
-  transition: color 150ms ease, background-color 150ms ease;
-
-  &:hover {
-    color: var(--cc-on-surface);
-    background-color: rgba(255, 255, 255, 0.06);
-  }
-
-  &--active {
-    color: var(--status-active);
-    background-color: var(--status-active-bg);
-
-    .bottom-nav__label {
-      font-weight: 500;
-    }
-  }
-}
-
-.bottom-nav__icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-
-  .bottom-nav__item--active & {
-    background-color: var(--status-active-bg);
-  }
-}
-
-.bottom-nav__label {
-  font-size: 12px;
-  font-weight: 400;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
-}
-
-// ---------------------------------------------------------------------------
-// Compact (0–599px): Show bottom nav
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .bottom-nav {
-    display: flex;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Medium+ (≥600px): Hidden — nav rail takes over
-// ---------------------------------------------------------------------------
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .bottom-nav__item {
-    transition: none;
-  }
-}
--- a/frontend/src/app/layout/bottom-nav/bottom-nav.component.ts
+++ b/frontend/src/app/layout/bottom-nav/bottom-nav.component.ts
@@ -1,24 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { MatBadgeModule } from '@angular/material/badge';
-import { NAV_DESTINATIONS } from '../../models/nav.model';
-
-/**
- * Bottom Navigation Bar for mobile (compact breakpoint).
- * Per spec Section 3.2: M3 NavigationBar, 3–5 destinations,
- * active destination uses M3 indicator pill.
- * Visible only on compact (< 600px) breakpoint.
- */
-@Component({
-  selector: 'app-bottom-nav',
-  standalone: true,
-  imports: [RouterLink, RouterLinkActive, MatIconModule, MatBadgeModule],
-  templateUrl: './bottom-nav.component.html',
-  styleUrl: './bottom-nav.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BottomNavComponent {
-  /** Show only first 5 destinations on bottom nav */
-  protected readonly destinations = NAV_DESTINATIONS.slice(0, 5);
-}
--- a/frontend/src/app/layout/header-bar/header-bar.component.html
+++ b/frontend/src/app/layout/header-bar/header-bar.component.html
@@ -1,55 +0,0 @@
-<header class="header-bar" role="banner">
-  <h1 class="header-bar__title">Command Hub</h1>
-
-  <div class="header-bar__actions">
-    <!-- Quick-Jump trigger -->
-    <button
-      class="header-bar__action-btn"
-      mat-icon-button
-      aria-label="Jump to agent"
-      (click)="openQuickJump.emit()"
-    >
-      <mat-icon>keyboard_command_key</mat-icon>
-    </button>
-
-    <!-- Live indicator -->
-    <button
-      class="header-bar__action-btn header-bar__live-btn"
-      mat-icon-button
-      [attr.aria-label]="isConnected() ? 'Connected — live' : 'Disconnected'"
-    >
-      <span
-        class="header-bar__live-dot"
-        [class.header-bar__live-dot--connected]="isConnected()"
-      ></span>
-      <span class="header-bar__live-label">
-        {{ isConnected() ? 'Live' : 'Offline' }}
-      </span>
-    </button>
-
-    <!-- Notification bell -->
-    <button
-      class="header-bar__action-btn"
-      mat-icon-button
-      aria-label="Notifications"
-    >
-      <mat-icon
-        [matBadge]="notificationCount()"
-        [matBadgeHidden]="notificationCount() === 0"
-        matBadgePosition="above after"
-        matBadgeSize="small"
-      >
-        notifications
-      </mat-icon>
-    </button>
-
-    <!-- Settings -->
-    <button
-      class="header-bar__action-btn"
-      mat-icon-button
-      aria-label="Settings"
-    >
-      <mat-icon>settings</mat-icon>
-    </button>
-  </div>
-</header>
--- a/frontend/src/app/layout/header-bar/header-bar.component.scss
+++ b/frontend/src/app/layout/header-bar/header-bar.component.scss
@@ -1,126 +0,0 @@
-// ============================================================================
-// Header Bar — Top App Bar
-// Per CUB-27 spec breakpoints:
-//   Compact  (0–599px):  SmallTopAppBar — 56px height, compact title, hidden labels
-//   Medium   (600–1023px): Medium top bar — 64px height
-//   Expanded (≥1024px):  MediumTopAppBar — 64px height, full actions
-// ============================================================================
-
-.header-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: var(--cc-header-height-compact); // Compact by default (mobile-first)
-  padding: 0 var(--cc-section-padding-compact);
-  background-color: var(--cc-surface-container-high);
-  border-bottom: 1px solid var(--cc-outline);
-  z-index: 20;
-}
-
-.header-bar__title {
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--cc-on-surface);
-  margin: 0;
-  letter-spacing: -0.01em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.header-bar__actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.header-bar__action-btn {
-  color: var(--cc-on-surface-variant) !important;
-  min-width: 48px;
-  min-height: 48px;
-
-  &:hover {
-    color: var(--cc-on-surface) !important;
-  }
-}
-
-.header-bar__live-dot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-right: 6px;
-  background-color: var(--status-error);
-  vertical-align: middle;
-
-  &--connected {
-    background-color: var(--status-active);
-    animation: pulse-active 2s ease-in-out infinite;
-  }
-}
-
-.header-bar__live-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--cc-on-surface-variant);
-  vertical-align: middle;
-}
-
-// ---------------------------------------------------------------------------
-// Compact (0–599px): SmallTopAppBar — hide live label, tighter spacing
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .header-bar__live-label {
-    display: none; // Space saving on compact — dot alone is enough
-  }
-
-  .header-bar__actions {
-    gap: 0;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Medium (600–1023px): Medium top bar
-// ---------------------------------------------------------------------------
-@media (min-width: 600px) and (max-width: 1023px) {
-  .header-bar {
-    height: var(--cc-header-height);
-    padding: 0 var(--cc-section-padding);
-  }
-
-  .header-bar__title {
-    font-size: 24px;
-  }
-
-  .header-bar__actions {
-    gap: 4px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Expanded (≥1024px): Full top bar
-// ---------------------------------------------------------------------------
-@media (min-width: 1024px) {
-  .header-bar {
-    height: var(--cc-header-height);
-    padding: 0 var(--cc-section-padding);
-  }
-
-  .header-bar__title {
-    font-size: 28px;
-    font-weight: 400;
-  }
-
-  .header-bar__actions {
-    gap: 8px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .header-bar__live-dot--connected {
-    animation: none;
-  }
-}
--- a/frontend/src/app/layout/header-bar/header-bar.component.ts
+++ b/frontend/src/app/layout/header-bar/header-bar.component.ts
@@ -1,28 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output, signal } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatBadgeModule } from '@angular/material/badge';
-
-/**
- * Header Bar component for the Command Hub.
- * Per spec Section 3.1: 64px tall, app title + live indicator + notification bell + settings.
- * Uses M3 top app bar pattern.
- */
-@Component({
-  selector: 'app-header-bar',
-  standalone: true,
-  imports: [MatIconModule, MatButtonModule, MatBadgeModule],
-  templateUrl: './header-bar.component.html',
-  styleUrl: './header-bar.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HeaderBarComponent {
-  /** Emits when the user requests the Quick-Jump drawer. */
-  @Output() readonly openQuickJump = new EventEmitter<void>();
-
-  protected readonly notificationCount = signal(3);
-  protected readonly isConnected = signal(true);
-
-  // TODO: Wire up notification panel (spec Section 2: Notifications Panel)
-  // TODO: Wire up settings navigation
-}
--- a/frontend/src/app/layout/index.ts
+++ b/frontend/src/app/layout/index.ts
@@ -1,4 +0,0 @@
-export * from './nav-rail/nav-rail.component';
-export * from './bottom-nav/bottom-nav.component';
-export * from './header-bar/header-bar.component';
-export * from './layout-shell/layout-shell.component';
--- a/frontend/src/app/layout/layout-shell/layout-shell.component.html
+++ b/frontend/src/app/layout/layout-shell/layout-shell.component.html
@@ -1,27 +0,0 @@
-<div class="layout-shell">
-  <!-- Desktop/Kiosk: Nav Rail on the left -->
-  <app-nav-rail class="layout-shell__nav-rail" />
-
-  <div class="layout-shell__main">
-    <!-- Header bar at top of content area -->
-    <app-header-bar class="layout-shell__header" (openQuickJump)="openQuickJump()" />
-
-    <!-- Scrollable content area -->
-    <main class="layout-shell__content">
-      <router-outlet />
-    </main>
-  </div>
-
-  <!-- Mobile: Bottom Navigation Bar -->
-  <app-bottom-nav class="layout-shell__bottom-nav" />
-</div>
-
-<!-- Quick-Jump Drawer (global overlay) -->
-<app-quick-jump-drawer />
-
-<!-- Agent Session Drawer (CUB-26) — desktop: side drawer, mobile: bottom sheet -->
-<app-agent-session-drawer
-  [isMobile]="isMobile()"
-  (openSession)="onOpenSession($event)"
-  (pinToDashboard)="onPinToDashboard($event)"
-/>
--- a/frontend/src/app/layout/layout-shell/layout-shell.component.scss
+++ b/frontend/src/app/layout/layout-shell/layout-shell.component.scss
@@ -1,73 +0,0 @@
-// ============================================================================
-// Layout Shell — Adaptive layout container
-// Per CUB-27 spec breakpoints:
-//   Compact  (0–599px):  Header + Content + Bottom Nav (stacked)
-//   Medium   (600–1023px): Collapsed Nav Rail + Header + Content
-//   Expanded (≥1024px):  Expandable Nav Rail + Header + Content
-// ============================================================================
-
-.layout-shell {
-  display: flex;
-  min-height: 100vh;
-  background-color: var(--cc-background);
-}
-
-.layout-shell__nav-rail {
-  flex-shrink: 0;
-}
-
-.layout-shell__main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // Prevent flex overflow
-  overflow: hidden;
-}
-
-.layout-shell__header {
-  flex-shrink: 0;
-}
-
-.layout-shell__content {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--cc-section-padding);
-}
-
-.layout-shell__bottom-nav {
-  flex-shrink: 0;
-}
-
-// ---------------------------------------------------------------------------
-// Compact (0–599px): Stack layout vertically, bottom nav visible
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .layout-shell {
-    flex-direction: column;
-  }
-
-  .layout-shell__content {
-    padding: var(--cc-section-padding-compact);
-    // Account for bottom nav bar height
-    padding-bottom: calc(var(--cc-bottom-nav-height) + 16px);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Medium (600–1023px): Sidebar + content, collapsed nav rail
-// ---------------------------------------------------------------------------
-@media (min-width: 600px) and (max-width: 1023px) {
-  .layout-shell__content {
-    padding: 20px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Expanded (≥1024px): Full nav rail with expandable behavior
-// ---------------------------------------------------------------------------
-@media (min-width: 1024px) {
-  .layout-shell__content {
-    padding: var(--cc-section-padding);
-  }
-}
--- a/frontend/src/app/layout/layout-shell/layout-shell.component.ts
+++ b/frontend/src/app/layout/layout-shell/layout-shell.component.ts
@@ -1,85 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostListener, OnDestroy, signal, ViewChild } from '@angular/core';
-import { Router, RouterOutlet } from '@angular/router';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Subscription } from 'rxjs';
-import { NavRailComponent } from '../nav-rail/nav-rail.component';
-import { BottomNavComponent } from '../bottom-nav/bottom-nav.component';
-import { HeaderBarComponent } from '../header-bar/header-bar.component';
-import { QuickJumpDrawerComponent } from '../../components/quick-jump-drawer/index';
-import { AgentSessionDrawerComponent } from '../../components/agent-session-drawer/index';
-import { AgentCardData } from '../../models/agent.model';
-
-/**
- * Layout Shell — wraps the main content area with adaptive navigation.
- * Desktop/Kiosk: Nav Rail (left) + Header + Content
- * Mobile: Header + Content + Bottom Nav
- * Per spec Section 3.1 (kiosk) and 3.2 (mobile).
- * CUB-26: Hosts the Agent Session Drawer for quick-jump navigation.
- */
-@Component({
-  selector: 'app-layout-shell',
-  standalone: true,
-  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent, AgentSessionDrawerComponent],
-  templateUrl: './layout-shell.component.html',
-  styleUrl: './layout-shell.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LayoutShellComponent implements OnDestroy {
-  @ViewChild(QuickJumpDrawerComponent) quickJumpDrawer!: QuickJumpDrawerComponent;
-  @ViewChild(AgentSessionDrawerComponent) sessionDrawer!: AgentSessionDrawerComponent;
-
-  /** Whether the viewport is mobile-sized. */
-  readonly isMobile = signal(false);
-
-  private readonly breakpointSub: Subscription;
-
-  constructor(
-    private readonly breakpointObserver: BreakpointObserver,
-    private readonly router: Router,
-  ) {
-    this.breakpointSub = this.breakpointObserver
-      .observe([Breakpoints.Handset, Breakpoints.Small])
-      .subscribe((result) => {
-        this.isMobile.set(result.matches);
-      });
-  }
-
-  /** Open the quick-jump drawer from anywhere in the layout. */
-  openQuickJump(): void {
-    this.quickJumpDrawer?.open();
-  }
-
-  /** Open the session drawer for a specific agent. */
-  openSessionDrawer(agent: AgentCardData): void {
-    this.sessionDrawer?.open(agent);
-  }
-
-  /** Open the session log page directly (long-press bypass). */
-  openSessionLog(sessionKey: string): void {
-    this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
-  }
-
-  /** Handle "Open Full Session" action from session drawer. */
-  onOpenSession(sessionKey: string): void {
-    this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
-  }
-
-  /** Handle "Pin to Dashboard" action from session drawer. */
-  onPinToDashboard(sessionKey: string): void {
-    // TODO: Implement pin-to-dashboard logic
-    console.log('[LayoutShell] Pin to dashboard:', sessionKey);
-  }
-
-  /** Global keyboard shortcut: Ctrl+K or Cmd+K opens the quick-jump drawer. */
-  @HostListener('document:keydown', ['$event'])
-  onGlobalKeydown(event: KeyboardEvent): void {
-    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
-      event.preventDefault();
-      this.quickJumpDrawer?.toggle();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.breakpointSub.unsubscribe();
-  }
-}
--- a/frontend/src/app/layout/nav-rail/nav-rail.component.html
+++ b/frontend/src/app/layout/nav-rail/nav-rail.component.html
@@ -1,44 +0,0 @@
-<aside
-  class="nav-rail"
-  [class.nav-rail--expanded]="expanded()"
-  [attr.aria-label]="'Navigation'"
->
-  <!-- Header with OpenClaw brand -->
-  <div class="nav-rail__header">
-    <button
-      class="nav-rail__toggle"
-      (click)="toggleExpand()"
-      [attr.aria-label]="expanded() ? 'Collapse navigation' : 'Expand navigation'"
-      [attr.aria-expanded]="expanded()"
-    >
-      <mat-icon>menu</mat-icon>
-    </button>
-    @if (expanded()) {
-      <span class="nav-rail__brand">OpenClaw</span>
-    }
-  </div>
-
-  <!-- Navigation destinations -->
-  <nav class="nav-rail__nav">
-    @for (dest of destinations; track dest.route) {
-      <a
-        [routerLink]="dest.route"
-        routerLinkActive="nav-rail__item--active"
-        [attr.aria-label]="dest.label"
-        class="nav-rail__item"
-      >
-        <mat-icon
-          [matBadge]="dest.badge ?? 0"
-          [matBadgeHidden]="!dest.badge"
-          matBadgePosition="above after"
-          matBadgeSize="small"
-        >
-          {{ dest.icon }}
-        </mat-icon>
-        @if (expanded()) {
-          <span class="nav-rail__label">{{ dest.label }}</span>
-        }
-      </a>
-    }
-  </nav>
-</aside>
--- a/frontend/src/app/layout/nav-rail/nav-rail.component.scss
+++ b/frontend/src/app/layout/nav-rail/nav-rail.component.scss
@@ -1,158 +0,0 @@
-// ============================================================================
-// Nav Rail — Desktop/Kiosk Navigation
-// Per CUB-27 spec breakpoints:
-//   Compact  (0–599px):  Hidden — bottom nav takes over
-//   Medium   (600–1023px): Collapsed (72px), icon-only
-//   Expanded (≥1024px):  Expandable (72px collapsed / 256px expanded on hover)
-// Section 5.4: Spacing & Grid
-// ============================================================================
-
-.nav-rail {
-  display: none; // Hidden by default (mobile-first)
-  flex-direction: column;
-  width: var(--cc-nav-rail-collapsed-width);
-  min-height: 100vh;
-  background-color: var(--cc-surface-container-high);
-  border-right: 1px solid var(--cc-outline);
-  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-  z-index: 10;
-
-  &--expanded {
-    width: var(--cc-nav-rail-expanded-width);
-  }
-}
-
-.nav-rail__header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 12px;
-  min-height: 64px;
-  border-bottom: 1px solid var(--cc-outline);
-}
-
-.nav-rail__toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  min-width: 48px;
-  border: none;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--cc-on-surface);
-  cursor: pointer;
-  transition: background-color 150ms ease;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-  }
-
-  &:focus-visible {
-    outline: 3px solid var(--status-active);
-    outline-offset: 2px;
-  }
-}
-
-.nav-rail__brand {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--status-active);
-  white-space: nowrap;
-  letter-spacing: 0.02em;
-}
-
-.nav-rail__nav {
-  flex: 1;
-  padding-top: 8px;
-
-  // Override Angular Material list item styles for compact nav rail items
-  --mat-list-list-item-one-line-vertical-gap: 4px;
-}
-
-.nav-rail__item {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  min-height: 56px;
-  padding: 0 12px;
-  border-radius: 28px;
-  margin: 2px 12px;
-  color: var(--cc-on-surface-variant);
-  text-decoration: none;
-  transition: background-color 150ms ease, color 150ms ease;
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-    color: var(--cc-on-surface);
-  }
-
-  &--active {
-    background-color: var(--status-active-bg);
-    color: var(--status-active);
-
-    .nav-rail__label {
-      font-weight: 500;
-    }
-  }
-}
-
-.nav-rail__label {
-  font-size: 14px;
-  font-weight: 400;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-// ---------------------------------------------------------------------------
-// Medium (600–1023px): Show collapsed nav rail (icon-only)
-// ---------------------------------------------------------------------------
-@media (min-width: 600px) and (max-width: 1023px) {
-  .nav-rail {
-    display: flex;
-    width: var(--cc-nav-rail-collapsed-width);
-  }
-
-  // Always collapsed on medium — hide labels
-  .nav-rail__brand,
-  .nav-rail__label {
-    display: none;
-  }
-
-  .nav-rail__header {
-    justify-content: center;
-    padding: 16px 0;
-  }
-
-  .nav-rail__item {
-    justify-content: center;
-    padding: 0;
-    margin: 2px 8px;
-  }
-
-  // Disable expand on medium
-  .nav-rail--expanded {
-    width: var(--cc-nav-rail-collapsed-width);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Expanded (≥1024px): Full expandable nav rail
-// ---------------------------------------------------------------------------
-@media (min-width: 1024px) {
-  .nav-rail {
-    display: flex;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .nav-rail {
-    transition: none;
-  }
-}
--- a/frontend/src/app/layout/nav-rail/nav-rail.component.ts
+++ b/frontend/src/app/layout/nav-rail/nav-rail.component.ts
@@ -1,63 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostListener, signal, OnDestroy, OnInit } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { MatIconModule } from '@angular/material/icon';
-import { MatBadgeModule } from '@angular/material/badge';
-import { NAV_DESTINATIONS } from '../../models/nav.model';
-
-@Component({
-  selector: 'app-nav-rail',
-  standalone: true,
-  imports: [RouterLink, RouterLinkActive, MatIconModule, MatBadgeModule],
-  templateUrl: './nav-rail.component.html',
-  styleUrl: './nav-rail.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class NavRailComponent implements OnInit, OnDestroy {
-  protected readonly destinations = NAV_DESTINATIONS;
-  protected readonly expanded = signal(false);
-  protected readonly isExpandedBreakpoint = signal(false);
-
-  private readonly EXPANDED_BP = 1024;
-
-  ngOnInit(): void {
-    this.updateBreakpoint();
-  }
-
-  @HostListener('window:resize')
-  onResize(): void {
-    this.updateBreakpoint();
-  }
-
-  @HostListener('mouseenter')
-  onHoverIn(): void {
-    if (this.isExpandedBreakpoint()) {
-      this.expanded.set(true);
-    }
-  }
-
-  @HostListener('mouseleave')
-  onHoverOut(): void {
-    if (this.isExpandedBreakpoint()) {
-      this.expanded.set(false);
-    }
-  }
-
-  toggleExpand(): void {
-    if (this.isExpandedBreakpoint()) {
-      this.expanded.update(v => !v);
-    }
-  }
-
-  private updateBreakpoint(): void {
-    const isExpanded = window.innerWidth >= this.EXPANDED_BP;
-    this.isExpandedBreakpoint.set(isExpanded);
-    // Collapse when leaving expanded breakpoint
-    if (!isExpanded) {
-      this.expanded.set(false);
-    }
-  }
-
-  ngOnDestroy(): void {
-    // Cleanup is handled by HostListener auto-unsubscribe
-  }
-}
--- a/frontend/src/app/models/agent.model.ts
+++ b/frontend/src/app/models/agent.model.ts
@@ -1,54 +0,0 @@
-// ============================================================================
-// Agent Status Types
-// Per spec Section 7.3: Agent Card Component Interface
-// ============================================================================
-
-export type AgentStatus = 'active' | 'idle' | 'thinking' | 'error' | 'offline';
-
-export interface AgentCardData {
-  /** Short agent ID, e.g., "otto" */
-  id: string;
-
-  /** Display name, e.g., "Otto" */
-  displayName: string;
-
-  /** Role description, e.g., "Orchestrator Agent" */
-  role: string;
-
-  /** Current agent status */
-  status: AgentStatus;
-
-  /** Current task description, e.g., "Reviewing PR #42" */
-  currentTask?: string;
-
-  /** Task progress percentage 0–100 */
-  taskProgress?: number;
-
-  /** Elapsed time string, e.g., "04m 12s" */
-  taskElapsed?: string;
-
-  /** Full session key, e.g., "agent:otto:telegram:direct:8787..." */
-  sessionKey: string;
-
-  /** Communication channel, e.g., "telegram" */
-  channel: string;
-
-  /** Timestamp of last activity */
-  lastActivity: Date;
-
-  /** Error message (populated only on error status) */
-  errorMessage?: string;
-}
-
-export interface AgentStatusUpdate {
-  agentId: string;
-  status: AgentStatus;
-  timestamp: Date;
-}
-
-export interface TaskProgressUpdate {
-  agentId: string;
-  taskName?: string;
-  progress: number;
-  elapsed?: string;
-}
--- a/frontend/src/app/models/index.ts
+++ b/frontend/src/app/models/index.ts
@@ -1,2 +0,0 @@
-export * from './agent.model';
-export * from './nav.model';
--- a/frontend/src/app/models/nav.model.ts
+++ b/frontend/src/app/models/nav.model.ts
@@ -1,19 +0,0 @@
-// ============================================================================
-// Navigation Model
-// Per spec Section 3.5: Global Navigation Structure
-// ============================================================================
-
-export interface NavDestination {
-  label: string;
-  icon: string;
-  route: string;
-  badge?: number;
-}
-
-export const NAV_DESTINATIONS: NavDestination[] = [
-  { label: 'Command Hub', icon: 'bolt', route: '/hub' },
-  { label: 'Projects', icon: 'assignment', route: '/projects' },
-  { label: 'Sessions', icon: 'folder_open', route: '/sessions' },
-  { label: 'Logs', icon: 'bar_chart', route: '/logs' },
-  { label: 'Settings', icon: 'settings', route: '/settings' },
-];
--- a/frontend/src/app/pages/hub/hub-page.component.html
+++ b/frontend/src/app/pages/hub/hub-page.component.html
@@ -1,57 +0,0 @@
-<!-- ========================================================================== -->
-<!-- Hub Page — Responsive Agent Card Grid with Filter Chips                   -->
-<!-- Per CUB-27 spec breakpoints:                                               -->
-<!--   Compact  (0–599px):  Single-column cards, horizontal-scroll filter chips -->
-<!--   Medium   (600–1023px): 2-column grid                                    -->
-<!--   Expanded (≥1024px): 3+ column auto-fill grid                           -->
-<!-- CUB-26: Integrates AgentCard click/long-press with session drawer.         -->
-<!-- ========================================================================== -->
-
-<div class="hub-page">
-  <h1 class="hub-page__title">Command Hub</h1>
-
-  <!-- Filter Chip Group — horizontal scroll on mobile -->
-  <div class="hub-page__filters" role="tablist" aria-label="Filter agents by status">
-    @for (filter of filters; track filter.value) {
-      <button
-        class="hub-page__filter-chip"
-        [class.hub-page__filter-chip--active]="activeFilter() === filter.value"
-        role="tab"
-        [attr.aria-selected]="activeFilter() === filter.value"
-        (click)="selectFilter(filter.value)"
-      >
-        {{ filter.label }}
-      </button>
-    }
-  </div>
-
-  <!-- Agent Card Grid -->
-  <div class="hub-page__grid">
-    @for (agent of filteredAgents(); track agent.id) {
-      <app-agent-card
-        [status]="agent.status"
-        [task]="agent.currentTask ?? ''"
-        [progress]="agent.taskProgress ?? 0"
-        [sessionKey]="agent.sessionKey"
-        [channel]="agent.channel"
-        [lastActivity]="agent.lastActivity"
-        [agentId]="agent.id"
-        [displayName]="agent.displayName"
-        [role]="agent.role"
-        [errorMessage]="agent.errorMessage ?? ''"
-        (cardClick)="onCardClick($event)"
-        (cardLongPress)="onCardLongPress($event)"
-      />
-    } @empty {
-      <p class="hub-page__empty">No agents online</p>
-    }
-  </div>
-</div>
-
-<!-- Agent Session Drawer (CUB-26) -->
-<app-agent-session-drawer
-  [isMobile]="isMobile()"
-  (openSession)="onOpenSession($event)"
-  (pinToDashboard)="onPinToDashboard($event)"
-  (drawerClose)="onDrawerClose()"
-/>
--- a/frontend/src/app/pages/hub/hub-page.component.scss
+++ b/frontend/src/app/pages/hub/hub-page.component.scss
@@ -1,141 +0,0 @@
-// ============================================================================
-// Hub Page — Responsive AgentCard Grid with Filter Chips
-// Per CUB-27 spec breakpoints:
-//   Compact  (0–599px):  Single-column cards, horizontal-scroll filter chips
-//   Medium   (600–1023px): 2-column grid
-//   Expanded (≥1024px): 3+ column auto-fill grid
-// ============================================================================
-
-.hub-page {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-height: 400px;
-  overflow-x: hidden;
-  padding: var(--cc-section-padding);
-}
-
-.hub-page__title {
-  grid-column: 1 / -1;
-  font-size: 24px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-  margin: 0 0 8px;
-}
-
-// ---------------------------------------------------------------------------
-// Filter Chip Group
-// ---------------------------------------------------------------------------
-.hub-page__filters {
-  display: flex;
-  gap: 8px;
-  padding: 4px 0;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none; // Firefox
-
-  &::-webkit-scrollbar {
-    display: none; // Chrome/Safari
-  }
-}
-
-.hub-page__filter-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 36px;
-  min-width: 48px; // Touch target
-  padding: 6px 16px;
-  border: 1px solid var(--cc-outline);
-  border-radius: 20px;
-  background-color: transparent;
-  color: var(--cc-on-surface-variant);
-  font-size: 13px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
-  flex-shrink: 0; // Prevent shrinking in scroll container
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.06);
-    color: var(--cc-on-surface);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--status-active);
-    outline-offset: 2px;
-  }
-
-  &--active {
-    background-color: var(--status-active-bg);
-    color: var(--status-active);
-    border-color: var(--status-active);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Agent Card Grid
-// ---------------------------------------------------------------------------
-.hub-page__grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--cc-card-gap);
-}
-
-// ---------------------------------------------------------------------------
-// Empty State
-// ---------------------------------------------------------------------------
-.hub-page__placeholder,
-.hub-page__empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 24px;
-  color: var(--cc-on-surface-variant);
-  font-size: 16px;
-  text-align: center;
-}
-
-// ---------------------------------------------------------------------------
-// Compact (0–599px): Single-column cards
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .hub-page {
-    padding: 0;
-  }
-
-  .hub-page__grid {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .hub-page__filters {
-    padding: 4px 0 8px;
-    // Ensure horizontal scroll on mobile
-    margin: 0 -8px;
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Medium (600–1023px): 2-column grid
-// ---------------------------------------------------------------------------
-@media (min-width: 600px) and (max-width: 1023px) {
-  .hub-page__grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--cc-card-gap);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Expanded (≥1024px): 3+ column auto-fill grid
-// ---------------------------------------------------------------------------
-@media (min-width: 1024px) {
-  .hub-page__grid {
-    grid-template-columns: repeat(auto-fill, minmax(var(--cc-card-min-width), 1fr));
-    gap: var(--cc-card-gap);
-  }
-}
--- a/frontend/src/app/pages/hub/hub-page.component.ts
+++ b/frontend/src/app/pages/hub/hub-page.component.ts
@@ -1,153 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal, computed, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatChipsModule } from '@angular/material/chips';
-import { AgentCardComponent } from '../../command-hub/components/agent-card/agent-card.component';
-import { AgentSessionDrawerComponent } from '../../components/agent-session-drawer/index';
-import { AgentCardData } from '../../models/agent.model';
-import { AgentStatus } from '../../models/agent.model';
-
-/**
- * Filter options for the hub page agent card grid.
- * Per CUB-27: "Filter chip group (All, Active, Error, etc.) with horizontal scroll on mobile"
- */
-export type AgentFilter = 'all' | AgentStatus;
-
-@Component({
-  selector: 'app-hub-page',
-  standalone: true,
-  imports: [CommonModule, MatChipsModule, AgentCardComponent, AgentSessionDrawerComponent],
-  templateUrl: './hub-page.component.html',
-  styleUrl: './hub-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HubPageComponent {
-  @ViewChild(AgentSessionDrawerComponent) sessionDrawer!: AgentSessionDrawerComponent;
-
-  readonly isMobile = signal(false);
-
-  protected readonly filters: { label: string; value: AgentFilter }[] = [
-    { label: 'All', value: 'all' },
-    { label: 'Active', value: 'active' },
-    { label: 'Idle', value: 'idle' },
-    { label: 'Thinking', value: 'thinking' },
-    { label: 'Error', value: 'error' },
-    { label: 'Offline', value: 'offline' },
-  ];
-
-  protected readonly activeFilter = signal<AgentFilter>('all');
-
-  /** Stub agent data (TODO: wire to AgentStatusService / SignalR). */
-  readonly agents = signal<AgentCardData[]>([
-    {
-      id: 'otto',
-      displayName: 'Otto',
-      role: 'Orchestrator Agent',
-      status: 'active',
-      currentTask: 'Reviewing PR #42',
-      taskProgress: 67,
-      taskElapsed: '04m 12s',
-      sessionKey: 'agent:otto:slack:CUB-42:abc123',
-      channel: 'slack',
-      lastActivity: new Date(),
-    },
-    {
-      id: 'rex',
-      displayName: 'Rex',
-      role: 'Frontend Agent',
-      status: 'thinking',
-      currentTask: 'Building responsive layout',
-      taskProgress: 40,
-      taskElapsed: '02m 30s',
-      sessionKey: 'agent:rex:telegram:CUB-27:def456',
-      channel: 'telegram',
-      lastActivity: new Date(Date.now() - 30000),
-    },
-    {
-      id: 'dex',
-      displayName: 'Dex',
-      role: 'Backend Agent',
-      status: 'idle',
-      currentTask: undefined,
-      taskProgress: undefined,
-      taskElapsed: undefined,
-      sessionKey: 'agent:dex:slack:CUB-53:ghi789',
-      channel: 'slack',
-      lastActivity: new Date(Date.now() - 300000),
-    },
-    {
-      id: 'hex',
-      displayName: 'Hex',
-      role: 'Database Agent',
-      status: 'error',
-      currentTask: 'Migration failed — rollback initiated',
-      taskProgress: 0,
-      taskElapsed: '00m 45s',
-      sessionKey: 'agent:hex:slack:CUB-56:jkl012',
-      channel: 'slack',
-      lastActivity: new Date(Date.now() - 60000),
-      errorMessage: 'Connection timeout to database server',
-    },
-    {
-      id: 'nano',
-      displayName: 'Nano',
-      role: 'ESP32 Agent',
-      status: 'offline',
-      currentTask: undefined,
-      taskProgress: undefined,
-      taskElapsed: undefined,
-      sessionKey: 'agent:nano:mqtt:CUB-48:mno345',
-      channel: 'mqtt',
-      lastActivity: new Date(Date.now() - 86400000),
-    },
-  ]);
-
-  protected readonly filteredAgents = computed(() => {
-    const filter = this.activeFilter();
-    if (filter === 'all') return this.agents();
-    return this.agents().filter(a => a.status === filter);
-  });
-
-  constructor() {
-    // Detect mobile viewport
-    if (typeof window !== 'undefined') {
-      const mql = window.matchMedia('(max-width: 599px)');
-      this.isMobile.set(mql.matches);
-      mql.addEventListener('change', (e) => this.isMobile.set(e.matches));
-    }
-  }
-
-  protected selectFilter(filter: AgentFilter): void {
-    this.activeFilter.set(filter);
-  }
-
-  /** Card click → open session drawer with agent details. */
-  onCardClick(sessionKey: string): void {
-    const agent = this.agents().find((a) => a.sessionKey === sessionKey);
-    if (agent) {
-      this.sessionDrawer?.open(agent);
-    }
-  }
-
-  /** Long-press on card → bypass drawer, go directly to session log. */
-  onCardLongPress(sessionKey: string): void {
-    console.log('[Hub] Long press — navigate to session log:', sessionKey);
-    // TODO: Navigate directly to session log page when sessions route is implemented
-  }
-
-  /** Open full session from drawer action button. */
-  onOpenSession(sessionKey: string): void {
-    console.log('[Hub] Open full session:', sessionKey);
-    // TODO: Navigate to full session view
-  }
-
-  /** Pin agent to dashboard from drawer action button. */
-  onPinToDashboard(sessionKey: string): void {
-    console.log('[Hub] Pin to dashboard:', sessionKey);
-    // TODO: Implement pin-to-dashboard
-  }
-
-  /** Drawer closed. */
-  onDrawerClose(): void {
-    // No-op for now — drawer is self-managing
-  }
-}
--- a/frontend/src/app/pages/logs/logs-page.component.ts
+++ b/frontend/src/app/pages/logs/logs-page.component.ts
@@ -1,10 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'app-logs-page',
-  standalone: true,
-  imports: [],
-  template: `<p style="color: var(--cc-on-surface-variant)">Logs page — coming soon</p>`,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LogsPageComponent {}
--- a/frontend/src/app/pages/projects/projects-page.component.ts
+++ b/frontend/src/app/pages/projects/projects-page.component.ts
@@ -1,10 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'app-projects-page',
-  standalone: true,
-  imports: [],
-  template: `<p style="color: var(--cc-on-surface-variant)">Projects page — coming soon</p>`,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ProjectsPageComponent {}
--- a/frontend/src/app/pages/sessions/sessions-page.component.ts
+++ b/frontend/src/app/pages/sessions/sessions-page.component.ts
@@ -1,10 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'app-sessions-page',
-  standalone: true,
-  imports: [],
-  template: `<p style="color: var(--cc-on-surface-variant)">Sessions page — coming soon</p>`,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SessionsPageComponent {}
--- a/frontend/src/app/pages/settings/settings-page.component.ts
+++ b/frontend/src/app/pages/settings/settings-page.component.ts
@@ -1,10 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'app-settings-page',
-  standalone: true,
-  imports: [],
-  template: `<p style="color: var(--cc-on-surface-variant)">Settings page — coming soon</p>`,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SettingsPageComponent {}
--- a/frontend/src/app/services/agent-status.service.ts
+++ b/frontend/src/app/services/agent-status.service.ts
@@ -1,47 +0,0 @@
-import { Injectable, signal } from '@angular/core';
-import { AgentCardData, AgentStatus, AgentStatusUpdate, TaskProgressUpdate } from '../models/agent.model';
-
-/**
- * Agent Status Service — stub for future SignalR integration.
- * Per spec Section 7.4: Connects to /hubs/agent-status for real-time updates.
- *
- * TODO: Implement SignalR hub connection when backend is ready.
- * TODO: Wire up NgRx store or signals for reactive state management.
- */
-@Injectable({ providedIn: 'root' })
-export class AgentStatusService {
-  /** Stub: list of agents (will come from SignalR) */
-  private readonly _agents = signal<AgentCardData[]>([]);
-
-  readonly agents = this._agents.asReadonly();
-
-  /** Stub: update an agent's status */
-  updateStatus(update: AgentStatusUpdate): void {
-    this._agents.update(agents =>
-      agents.map(agent =>
-        agent.id === update.agentId
-          ? { ...agent, status: update.status }
-          : agent
-      )
-    );
-  }
-
-  /** Stub: update an agent's task progress */
-  updateTaskProgress(progress: TaskProgressUpdate): void {
-    this._agents.update(agents =>
-      agents.map(agent =>
-        agent.id === progress.agentId
-          ? {
-              ...agent,
-              taskProgress: progress.progress,
-              ...(progress.taskName ? { currentTask: progress.taskName } : {}),
-              ...(progress.elapsed ? { taskElapsed: progress.elapsed } : {}),
-            }
-          : agent
-      )
-    );
-  }
-
-  // TODO: connect() — Initialize SignalR connection
-  // TODO: disconnect() — Clean up SignalR connection
-}
--- a/frontend/src/assets/hero.png
+++ b/frontend/src/assets/hero.png
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,48 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error?: Error
+}
+
+export default class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('ErrorBoundary caught:', error, info)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-surface-darkest p-4">
+          <div className="max-w-md w-full p-6 rounded-xl border border-danger/30 bg-danger/10 text-center">
+            <h2 className="text-xl font-bold text-danger mb-2">Something went wrong</h2>
+            <p className="text-on-surface-variant text-sm mb-4">
+              {this.state.error?.message || 'An unexpected error occurred.'}
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              className="px-4 py-2 rounded-lg bg-primary text-surface-darkest font-medium"
+            >
+              Reload Page
+            </button>
+          </div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react'
+import { NavLink } from 'react-router-dom'
+import { Command, Activity, FolderKanban, Monitor, Settings, Menu, X } from 'lucide-react'
+
+const navItems = [
+  { to: '/', icon: Command, label: 'Hub' },
+  { to: '/logs', icon: Activity, label: 'Logs' },
+  { to: '/projects', icon: FolderKanban, label: 'Projects' },
+  { to: '/sessions', icon: Monitor, label: 'Sessions' },
+  { to: '/settings', icon: Settings, label: 'Settings' },
+]
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const [expanded, setExpanded] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  return (
+    <div className="flex min-h-screen bg-surface-darkest text-on-surface">
+      {/* Desktop Nav Rail */}
+      <aside
+        className={`hidden md:flex flex-col border-r border-surface-light transition-all duration-200 ${
+          expanded ? 'w-64' : 'w-18'
+        }`}
+        onMouseEnter={() => setExpanded(true)}
+        onMouseLeave={() => setExpanded(false)}
+      >
+        <div className="flex items-center gap-3 px-4 h-16 border-b border-surface-light">
+          <Command size={24} className="text-primary shrink-0" />
+          {expanded && <span className="font-bold text-lg whitespace-nowrap">Control Center</span>}
+        </div>
+        <nav className="flex-1 py-4 space-y-1">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) =>
+                `flex items-center gap-3 px-4 py-3 mx-2 rounded-lg transition-colors ${
+                  isActive
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-on-surface-variant hover:bg-surface-light hover:text-on-surface'
+                }`
+              }
+            >
+              <item.icon size={20} className="shrink-0" />
+              {expanded && <span className="whitespace-nowrap">{item.label}</span>}
+            </NavLink>
+          ))}
+        </nav>
+      </aside>
+
+      {/* Mobile Header + Bottom Nav */}
+      <div className="flex-1 flex flex-col md:ml-0">
+        <header className="md:hidden flex items-center justify-between h-16 px-4 border-b border-surface-light bg-surface-dark">
+          <div className="flex items-center gap-2">
+            <Command size={22} className="text-primary" />
+            <span className="font-bold">Control Center</span>
+          </div>
+          <button onClick={() => setMobileOpen(!mobileOpen)} className="p-2">
+            {mobileOpen ? <X size={22} /> : <Menu size={22} />}
+          </button>
+        </header>
+
+        {/* Mobile drawer */}
+        {mobileOpen && (
+          <div className="md:hidden fixed inset-0 z-50 bg-surface-dark/95 backdrop-blur">
+            <div className="flex flex-col p-4 space-y-2">
+              {navItems.map((item) => (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  onClick={() => setMobileOpen(false)}
+                  className={({ isActive }) =>
+                    `flex items-center gap-3 px-4 py-3 rounded-lg ${
+                      isActive
+                        ? 'bg-primary/10 text-primary'
+                        : 'text-on-surface-variant'
+                    }`
+                  }
+                >
+                  <item.icon size={20} />
+                  {item.label}
+                </NavLink>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <main className="flex-1 p-4 md:p-6 overflow-auto">{children}</main>
+
+        {/* Mobile Bottom Nav */}
+        <nav className="md:hidden flex items-center justify-around h-16 border-t border-surface-light bg-surface-dark">
+          {navItems.slice(0, 5).map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) =>
+                `flex flex-col items-center gap-1 p-2 text-xs ${
+                  isActive ? 'text-primary' : 'text-on-surface-variant'
+                }`
+              }
+            >
+              <item.icon size={20} />
+              <span>{item.label}</span>
+            </NavLink>
+          ))}
+        </nav>
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,29 @@
+@import "tailwindcss";
+
+@theme {
+  --color-surface-darkest: #0D0F12;
+  --color-surface-dark: #13161A;
+  --color-surface-medium: #1C2027;
+  --color-surface-light: #252B33;
+  --color-surface-lighter: #2D3748;
+  --color-on-surface: #E2E8F0;
+  --color-on-surface-variant: #8A9BB0;
+  --color-on-surface-muted: #64748B;
+  --color-primary: #38BDF8;
+  --color-secondary: #2DD4BF;
+  --color-accent: #A78BFA;
+  --color-danger: #F87171;
+  --color-status-active: #38BDF8;
+  --color-status-idle: #2DD4BF;
+  --color-status-thinking: #A78BFA;
+  --color-status-error: #F87171;
+  --color-status-offline: #64748B;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background-color: var(--color-surface-darkest);
+  color: var(--color-on-surface);
+  font-family: 'Inter', 'Roboto', sans-serif;
+}
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -1,25 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>OpenClaw Control Center</title>
-    <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <!-- Google Fonts: Inter (UI) + Roboto Mono (logs/session IDs) -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap"
-      rel="stylesheet"
-    />
-    <!-- Material Symbols (Outlined) per spec Section 5.5 -->
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <app-root></app-root>
-  </body>
-</html>
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,6 +0,0 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
-
-bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,29 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { BrowserRouter } from 'react-router-dom'
+import ErrorBoundary from './components/ErrorBoundary'
+import './index.css'
+import App from './App'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+})
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ErrorBoundary>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </QueryClientProvider>
+    </ErrorBoundary>
+  </StrictMode>,
+)
--- a/frontend/src/pages/HubPage.tsx
+++ b/frontend/src/pages/HubPage.tsx
@@ -0,0 +1,91 @@
+import { useQuery } from '@tanstack/react-query'
+import { listAgents } from '../services/api'
+import { Activity, AlertTriangle } from 'lucide-react'
+
+export default function HubPage() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['agents'],
+    queryFn: listAgents,
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="w-8 h-8 border-2 border-primary/30 border-t-primary rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-64 text-danger">
+        <AlertTriangle size={24} className="mr-2" />
+        Failed to load agents
+      </div>
+    )
+  }
+
+  const agents = data?.data ?? []
+
+  return (
+    <div className="space-y-6">
+      <header>
+        <h1 className="text-2xl font-bold">Command Hub</h1>
+        <p className="text-on-surface-variant">Agent fleet overview</p>
+      </header>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {agents.map((agent) => (
+          <div
+            key={agent.id}
+            className="p-4 rounded-xl border border-surface-light bg-surface-dark"
+          >
+            <div className="flex items-start justify-between mb-3">
+              <div>
+                <h3 className="font-semibold">{agent.displayName}</h3>
+                <p className="text-xs text-on-surface-variant">{agent.role}</p>
+              </div>
+              <StatusDot status={agent.status} />
+            </div>
+
+            {agent.currentTask && (
+              <div className="text-sm text-on-surface-variant mb-2">
+                {agent.currentTask}
+              </div>
+            )}
+
+            {agent.taskProgress !== undefined && (
+              <div className="w-full h-2 bg-surface-light rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-primary rounded-full transition-all"
+                  style={{ width: `${agent.taskProgress}%` }}
+                />
+              </div>
+            )}
+
+            <div className="mt-3 flex items-center gap-2 text-xs text-on-surface-muted">
+              <Activity size={12} />
+              {agent.channel} · {agent.lastActivity}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function StatusDot({ status }: { status: string }) {
+  const colorMap: Record<string, string> = {
+    active: 'bg-status-active',
+    idle: 'bg-status-idle',
+    thinking: 'bg-status-thinking',
+    error: 'bg-status-error',
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      <div className={`w-2.5 h-2.5 rounded-full ${colorMap[status] ?? 'bg-status-offline'}`} />
+      <span className="text-xs capitalize text-on-surface-variant">{status}</span>
+    </div>
+  )
+}
--- a/frontend/src/pages/LogsPage.tsx
+++ b/frontend/src/pages/LogsPage.tsx
@@ -0,0 +1,8 @@
+export default function LogsPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Logs</h1>
+      <p className="text-on-surface-variant">Activity logs will appear here.</p>
+    </div>
+  )
+}
--- a/frontend/src/pages/ProjectsPage.tsx
+++ b/frontend/src/pages/ProjectsPage.tsx
@@ -0,0 +1,8 @@
+export default function ProjectsPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Projects</h1>
+      <p className="text-on-surface-variant">Tracked projects will appear here.</p>
+    </div>
+  )
+}
--- a/frontend/src/pages/SessionsPage.tsx
+++ b/frontend/src/pages/SessionsPage.tsx
@@ -0,0 +1,8 @@
+export default function SessionsPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Sessions</h1>
+      <p className="text-on-surface-variant">Active sessions will appear here.</p>
+    </div>
+  )
+}
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -0,0 +1,8 @@
+export default function SettingsPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Settings</h1>
+      <p className="text-on-surface-variant">System settings will appear here.</p>
+    </div>
+  )
+}
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -0,0 +1,58 @@
+import axios from 'axios'
+import type { Agent, Session, Task, Project, PaginatedResponse } from '../types'
+
+const api = axios.create({
+  baseURL: '/api',
+  headers: { 'Content-Type': 'application/json' },
+})
+
+// Health check
+export async function getHealth() {
+  const res = await api.get('/health')
+  return res.data
+}
+
+// Agents
+export async function listAgents() {
+  const res = await api.get<PaginatedResponse<Agent>>('/agents')
+  return res.data
+}
+
+export async function getAgent(id: string) {
+  const res = await api.get<{ data: Agent }>(`/agents/${id}`)
+  return res.data.data
+}
+
+export async function createAgent(data: Omit<Agent, 'lastActivity'>) {
+  const res = await api.post<{ data: Agent }>('/agents', data)
+  return res.data.data
+}
+
+export async function updateAgent(id: string, data: Partial<Agent>) {
+  const res = await api.put<{ data: Agent }>(`/agents/${id}`, data)
+  return res.data.data
+}
+
+export async function deleteAgent(id: string) {
+  await api.delete(`/agents/${id}`)
+}
+
+// Sessions
+export async function listSessions() {
+  const res = await api.get<PaginatedResponse<Session>>('/sessions')
+  return res.data
+}
+
+// Tasks
+export async function listTasks() {
+  const res = await api.get<PaginatedResponse<Task>>('/tasks')
+  return res.data
+}
+
+// Projects
+export async function listProjects() {
+  const res = await api.get<PaginatedResponse<Project>>('/projects')
+  return res.data
+}
+
+export default api
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,285 +0,0 @@
-// ============================================================================
-// OpenClaw Control Center — M3 Tactical Dark Theme
-// ============================================================================
-// Main global stylesheet. Imports the design system token modules and
-// applies the M3 dark theme. All tokens are defined once in
-//   styles/_tokens.scss     — SCSS variables and mixins
-//   styles/_css-properties.scss — CSS custom property output
-//   styles/_utilities.scss  — utility mixins for components
-//
-// Components should @use these modules rather than hardcoding values.
-// ============================================================================
-
-@use 'styles/tokens' as tokens;
-@use 'styles/css-properties' as css-props;
-@use 'styles/utilities' as utils;
-@use '@angular/material' as mat;
-
-// ---------------------------------------------------------------------------
-// M3 Theme Definition
-// ---------------------------------------------------------------------------
-// Using mat.define-theme() with custom color tokens to match the tactical
-// dark palette. Angular Material 19+ uses the new theming API.
-// ---------------------------------------------------------------------------
-
-$dark-theme: mat.define-theme((
-  color: (
-    theme-type: dark,
-    primary: mat.$cyan-palette,
-    tertiary: mat.$violet-palette,
-  ),
-  typography: (
-    brand-family: tokens.$font-family-brand,
-    plain-family: tokens.$font-family-body,
-    bold-weight: tokens.$font-weight-bold,
-    medium-weight: tokens.$font-weight-medium,
-    regular-weight: tokens.$font-weight-regular,
-  ),
-  density: (
-    scale: 0,
-  ),
-));
-
-// ---------------------------------------------------------------------------
-// Apply theme to :root
-// ---------------------------------------------------------------------------
-html {
-  height: 100%;
-  @include mat.theme($dark-theme);
-  color-scheme: dark;
-}
-
-// ---------------------------------------------------------------------------
-// Emit Design System CSS Custom Properties
-// ---------------------------------------------------------------------------
-@include css-props.emit-custom-properties;
-
-// ---------------------------------------------------------------------------
-// Per spec Section 5.1 "Status Colors (Semantic — outside M3 tonal system)"
-// These are NOT part of the M3 tonal palette; they are semantic overrides.
-// ---------------------------------------------------------------------------
-:root {
-  // --- Tactical Dark Mode color palette (CUB-47) ---
-  --color-surface: #0F172A;
-  --color-surface-light: #1E293B;
-  --color-primary: #38BDF8;
-  --color-secondary: #2DD4BF;
-  --color-accent: #A78BFA;
-  --color-danger: #F87171;
-  --color-text-primary: #FFFFFF;
-  --color-text-secondary: #94A3B8;
-  --color-border: #334155;
-
-  // --- Status colors ---
-  --status-active: #38BDF8;
-  --status-idle: #2DD4BF;
-  --status-thinking: #A78BFA;
-  --status-error: #F87171;
-  --status-offline: #64748B;
-
-  // --- Status background tints (12% opacity) ---
-  --status-active-bg: rgba(56, 189, 248, 0.12);
-  --status-idle-bg: rgba(45, 212, 191, 0.12);
-  --status-thinking-bg: rgba(167, 139, 250, 0.12);
-  --status-error-bg: rgba(248, 113, 113, 0.12);
-
-  // --- Surface overrides (tactical dark palette) ---
-  --cc-background: #0D0F12;
-  --cc-surface: #13161A;
-  --cc-surface-container: #1C2027;
-  --cc-surface-container-high: #252B33;
-  --cc-on-surface: #E2E8F0;
-  --cc-on-surface-variant: #8A9BB0;
-  --cc-outline: #2D3748;
-
-  // --- Mono font stack ---
-  --cc-font-mono: 'Roboto Mono', 'Cascadia Code', 'Fira Code', monospace;
-
-  // --- Layout constants ---
-  --cc-nav-rail-collapsed-width: 72px;
-  --cc-nav-rail-expanded-width: 256px;
-  --cc-header-height: 64px;
-  --cc-header-height-compact: 56px;
-  --cc-bottom-nav-height: 80px;
-  --cc-card-border-radius: 16px;
-  --cc-card-min-width: 280px;
-  --cc-card-gap: 16px;
-  --cc-card-padding: 20px;
-  --cc-section-padding: 24px;
-  --cc-section-padding-compact: 16px;
-  --cc-spacing-unit: 8px;
-
-  // --- Responsive breakpoints (CUB-27) ---
-  --cc-breakpoint-compact: 599px;   // 0-599px: phone / compact
-  --cc-breakpoint-medium: 600px;   // 600-1023px: tablet / medium
-  --cc-breakpoint-expanded: 1024px; // ≥1024px: desktop/kiosk / expanded
-}
-
-// ---------------------------------------------------------------------------
-// Global Body Styles
-// ---------------------------------------------------------------------------
-body {
-  background-color: var(--cc-surface-darkest);
-  color: var(--cc-on-surface);
-  font-family: var(--cc-font-body);
-  margin: 0;
-  height: 100%;
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// ---------------------------------------------------------------------------
-// Typography Helpers
-// ---------------------------------------------------------------------------
-.text-mono {
-  font-family: var(--cc-font-mono);
-  font-size: tokens.$font-size-body-medium;
-  font-weight: tokens.$font-weight-regular;
-  letter-spacing: tokens.$letter-spacing-mono;
-}
-
-.text-display-large {
-  font-size: tokens.$font-size-display-large;
-  font-weight: tokens.$font-weight-heavy;
-  line-height: tokens.$line-height-tight;
-  letter-spacing: tokens.$letter-spacing-tight;
-}
-
-.text-headline-medium {
-  font-size: tokens.$font-size-headline-medium;
-  font-weight: tokens.$font-weight-bold;
-  line-height: tokens.$line-height-tight;
-}
-
-.text-title-large {
-  font-size: tokens.$font-size-title-large;
-  font-weight: tokens.$font-weight-bold;
-}
-
-.text-title-medium {
-  font-size: tokens.$font-size-title-medium;
-  font-weight: tokens.$font-weight-medium;
-}
-
-.text-body-large {
-  font-size: tokens.$font-size-body-large;
-  font-weight: tokens.$font-weight-regular;
-  line-height: tokens.$line-height-normal;
-}
-
-.text-body-medium {
-  font-size: tokens.$font-size-body-medium;
-  font-weight: tokens.$font-weight-regular;
-  line-height: tokens.$line-height-normal;
-}
-
-.text-label-medium {
-  font-size: tokens.$font-size-label-medium;
-  font-weight: tokens.$font-weight-medium;
-  letter-spacing: tokens.$letter-spacing-wide;
-}
-
-// ---------------------------------------------------------------------------
-// Status Dot Pulse Animations
-// ---------------------------------------------------------------------------
-@keyframes pulse-active {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.7; transform: scale(1.15); }
-}
-
-@keyframes pulse-error {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-@keyframes pulse-thinking {
-  0%, 100% { opacity: 0.8; }
-  50% { opacity: 0.4; }
-}
-
-// ---------------------------------------------------------------------------
-// Status Dot Utility Classes
-// ---------------------------------------------------------------------------
-.status-dot {
-  width: tokens.$status-dot-size;
-  height: tokens.$status-dot-size;
-  border-radius: tokens.$radius-full;
-  display: inline-block;
-
-  &--active {
-    background-color: var(--cc-status-active);
-    animation: pulse-active tokens.$duration-standard tokens.$easing-standard infinite;
-  }
-
-  &--idle {
-    background-color: var(--cc-status-idle);
-  }
-
-  &--thinking {
-    background-color: var(--cc-status-thinking);
-    animation: pulse-thinking 3s tokens.$easing-standard infinite;
-  }
-
-  &--error {
-    background-color: var(--cc-status-error);
-    animation: pulse-error tokens.$duration-fast tokens.$easing-standard infinite;
-  }
-
-  &--offline {
-    background-color: var(--cc-status-offline);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .status-dot--active,
-  .status-dot--error,
-  .status-dot--thinking {
-    animation: none;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Screen-reader-only utility
-// ---------------------------------------------------------------------------
-.sr-only {
-  @include tokens.sr-only;
-}
-
-// ---------------------------------------------------------------------------
-// Truncate utility
-// ---------------------------------------------------------------------------
-.truncate {
-  @include tokens.truncate;
-}
-
-// ---------------------------------------------------------------------------
-// Focus ring utility
-// ---------------------------------------------------------------------------
-.focus-ring {
-  @include tokens.focus-ring;
-}
-
-// ---------------------------------------------------------------------------
-// Scrollbar Styling (Tactical Dark)
-// ---------------------------------------------------------------------------
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--cc-surface-dark);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--cc-surface-lighter);
-  border-radius: 3px;
-
-  &:hover {
-    background: var(--cc-on-surface-variant);
-  }
-}
--- a/frontend/src/styles/_css-properties.scss
+++ b/frontend/src/styles/_css-properties.scss
@@ -1,115 +0,0 @@
-// ============================================================================
-// OpenClaw Control Center — CSS Custom Property Output
-// ============================================================================
-// This module emits ALL design tokens as CSS custom properties on :root.
-// Import this in styles.scss to make tokens available to all components.
-//
-// Tokens are namespaced with --cc- (Control Center) to avoid collisions
-// with Angular Material's --mat- variables.
-// ============================================================================
-
-@use 'tokens' as *;
-
-// ---------------------------------------------------------------------------
-// Emit all CSS custom properties
-// ---------------------------------------------------------------------------
-@mixin emit-custom-properties {
-  :root {
-    // --- Color tokens ---
-    --cc-color-primary:       #{$color-primary-500};
-    --cc-color-secondary:     #{$color-secondary-400};
-    --cc-color-accent:        #{$color-accent-400};
-    --cc-color-danger:        #{$color-danger-400};
-
-    // --- Surface tokens ---
-    --cc-surface-darkest:     #{$color-surface-darkest};
-    --cc-surface-dark:        #{$color-surface-dark};
-    --cc-surface-medium:      #{$color-surface-medium};
-    --cc-surface-light:       #{$color-surface-light};
-    --cc-surface-lighter:     #{$color-surface-lighter};
-
-    // --- On-surface tokens ---
-    --cc-on-surface:          #{$color-on-surface};
-    --cc-on-surface-variant:  #{$color-on-surface-variant};
-    --cc-on-surface-muted:    #{$color-on-surface-muted};
-
-    // --- Status tokens ---
-    --cc-status-active:       #{$status-active};
-    --cc-status-idle:         #{$status-idle};
-    --cc-status-thinking:     #{$status-thinking};
-    --cc-status-error:        #{$status-error};
-    --cc-status-offline:      #{$status-offline};
-
-    --cc-status-active-bg:    #{$status-active-bg};
-    --cc-status-idle-bg:      #{$status-idle-bg};
-    --cc-status-thinking-bg:  #{$status-thinking-bg};
-    --cc-status-error-bg:     #{$status-error-bg};
-    --cc-status-offline-bg:   #{$status-offline-bg};
-
-    --cc-status-active-border:  #{$status-active-border};
-    --cc-status-idle-border:    #{$status-idle-border};
-    --cc-status-thinking-border: #{$status-thinking-border};
-    --cc-status-error-border:   #{$status-error-border};
-    --cc-status-offline-border:  #{$status-offline-border};
-
-    // --- Typography tokens ---
-    --cc-font-brand:   #{$font-family-brand};
-    --cc-font-body:    #{$font-family-body};
-    --cc-font-mono:    #{$font-family-mono};
-
-    // --- Spacing tokens ---
-    --cc-spacing-0:   #{$spacing-0};
-    --cc-spacing-1:   #{$spacing-1};
-    --cc-spacing-2:   #{$spacing-2};
-    --cc-spacing-3:   #{$spacing-3};
-    --cc-spacing-4:   #{$spacing-4};
-    --cc-spacing-5:   #{$spacing-5};
-    --cc-spacing-6:   #{$spacing-6};
-    --cc-spacing-7:   #{$spacing-7};
-    --cc-spacing-8:   #{$spacing-8};
-    --cc-spacing-10:  #{$spacing-10};
-    --cc-spacing-12:  #{$spacing-12};
-    --cc-spacing-16:  #{$spacing-16};
-
-    // --- Layout tokens ---
-    --cc-nav-rail-collapsed:  #{$nav-rail-collapsed-width};
-    --cc-nav-rail-expanded:   #{$nav-rail-expanded-width};
-    --cc-header-height:        #{$header-height};
-    --cc-bottom-nav-height:   #{$bottom-nav-height};
-    --cc-card-radius:         #{$card-border-radius};
-    --cc-card-min-width:      #{$card-min-width};
-
-    // --- Radius tokens ---
-    --cc-radius-none:  #{$radius-none};
-    --cc-radius-xs:    #{$radius-xs};
-    --cc-radius-sm:    #{$radius-sm};
-    --cc-radius-md:    #{$radius-md};
-    --cc-radius-lg:    #{$radius-lg};
-    --cc-radius-xl:    #{$radius-xl};
-    --cc-radius-full:  #{$radius-full};
-
-    // --- Shadow tokens ---
-    --cc-shadow-0: #{$shadow-level-0};
-    --cc-shadow-1: #{$shadow-level-1};
-    --cc-shadow-2: #{$shadow-level-2};
-    --cc-shadow-3: #{$shadow-level-3};
-    --cc-shadow-4: #{$shadow-level-4};
-
-    // --- Motion tokens ---
-    --cc-duration-fast:     #{$duration-fast};
-    --cc-duration-short:    #{$duration-short};
-    --cc-duration-medium:   #{$duration-medium};
-    --cc-duration-standard: #{$duration-standard};
-    --cc-duration-long:     #{$duration-long};
-
-    --cc-easing-standard:   #{$easing-standard};
-    --cc-easing-decelerate: #{$easing-decelerate};
-    --cc-easing-accelerate: #{$easing-accelerate};
-
-    // --- Accessibility tokens ---
-    --cc-focus-width:  #{$focus-ring-width};
-    --cc-focus-offset: #{$focus-ring-offset};
-    --cc-focus-color:  #{$focus-ring-color};
-    --cc-touch-min:    #{$min-touch-target};
-  }
-}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`export * from './agent-card/agent-card.component';`
				`@@ -1 +0,0 @@`
				`export * from './adaptive-navigation.component';`
				`@@ -1 +0,0 @@`
				`export { AgentStatusBadgeComponent } from './agent-status-badge.component';`
				`@@ -1 +0,0 @@`
				`export { QuickJumpDrawerComponent } from './quick-jump-drawer.component';`
				`@@ -1 +0,0 @@`
				`export { LongPressDirective } from './long-press.directive';`