CUB-122: Scaffold Control Center React frontend

Reviewed-on: #27

frontend-legacy/.dockerignore

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

frontend-legacy/.gitignore

@@ -0,0 +1,44 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.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
+.DS_Store
+Thumbs.db

frontend-legacy/Dockerfile

@@ -0,0 +1,38 @@
+# ============================================================
+# Control Center Frontend — Multi-stage Docker Build
+# Angular 21 + nginx for static serving + API proxy
+# ============================================================
+
+# --- Build Stage ---
+FROM node:22-slim AS builder
+
+WORKDIR /app
+
+# Install dependencies first (layer caching)
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Copy source and build production bundle
+COPY . .
+RUN npm run build
+
+# --- Runtime Stage ---
+FROM nginx:1.27-alpine AS runtime
+
+# Remove default nginx config
+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
+
+# Expose HTTP port
+EXPOSE 80
+
+# Health check — confirm nginx is serving
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget -qO- http://localhost/ || exit 1
+
+CMD ["nginx", "-g", "daemon off;"]

frontend-legacy/README.md

@@ -0,0 +1,59 @@
+# Frontend
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.8.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+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.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+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.

frontend-legacy/angular.json

@@ -53,7 +53,13 @@
             ],
             "styles": [
               "src/styles.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+"src",
+                "src/styles"
               ]
+            }
           },
           "configurations": {
             "production": {

frontend-legacy/nginx.conf

@@ -0,0 +1,54 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    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)
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Cache hashed JS/CSS bundles
+    location ~* \.(js|css)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Proxy API requests to backend
+    location /api/ {
+        proxy_pass http://backend:8080/api/;
+        proxy_http_version 1.1;
+        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 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
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

frontend-legacy/package.json

@@ -0,0 +1,34 @@
+{
+  "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",
+  "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"
+  },
+  "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"
+  }
+}

frontend-legacy/src/app/app.html

@@ -0,0 +1 @@
+<router-outlet />

frontend-legacy/src/app/app.ts

@@ -5,7 +5,7 @@ import { RouterOutlet } from '@angular/router';
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet],
-  template: `<router-outlet />`,
+  template: '<router-outlet />',
   styles: [`
     :host {
       display: block;

frontend-legacy/src/app/command-hub/components/agent-card/agent-card.component.html

@@ -2,11 +2,13 @@
 <!-- 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.aria-label]="displayName + ' — ' + statusLabel()"
+  [attr.data-status]="status"
+  [attr.aria-label]="(displayName || agentId) + ' — ' + statusLabel()"
   [style.border-left-color]="statusBorderColor()"
   (click)="cardClick.emit(sessionKey)"
   appLongPress
@@ -32,19 +34,20 @@
   </div>
 
   <!-- ── Body: current task ── -->
-  <div class="agent-card__body" *ngIf="task || status === 'error'">
+  <div class="agent-card__body" *ngIf="task || isError()">
     <p
       class="agent-card__task"
-      [attr.aria-label]="'Current task: ' + (status === 'error' ? errorMessage : task)"
+      [class.agent-card__task--error]="isError()"
+      [attr.aria-label]="'Current task: ' + (isError() ? errorMessage || task : task)"
     >
-      {{ status === 'error' ? errorMessage || task : task }}
+      {{ isError() ? errorMessage || task : task }}
     </p>
   </div>
 
   <!-- ── Task Progress Bar ── -->
   <div
     class="agent-card__progress"
-    *ngIf="progress > 0 && status !== 'error'"
+    *ngIf="showProgress()"
     [attr.aria-label]="'Task progress: ' + progress + '%'"
   >
     <mat-progress-bar
@@ -55,6 +58,16 @@
     <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">

frontend-legacy/src/app/command-hub/components/agent-card/agent-card.component.scss

@@ -2,15 +2,18 @@
 // 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: var(--cc-card-min-width);
-  padding: var(--cc-card-padding);
+  min-width: tokens.$cc-card-min-width;
+  padding: tokens.$cc-card-padding;
   background-color: var(--cc-surface-container);
-  border-radius: var(--cc-card-border-radius);
+  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);
@@ -56,11 +59,6 @@
   letter-spacing: 0.02em;
   text-transform: uppercase;
   color: var(--cc-on-surface);
-
-  // Per‑status background tints
-  .status-dot--active + & {
-    background-color: var(--status-active-bg);
-  }
 }
 
 .agent-card__status-label {
@@ -102,8 +100,7 @@
   color: var(--cc-on-surface);
   line-height: 1.4;
 
-  // Error messages get distinct styling
-  .agent-card--error & {
+  &--error {
     color: var(--status-error);
   }
 }
@@ -117,6 +114,7 @@
 }
 
 .agent-card__progress-label {
+  font-family: var(--cc-font-mono);
   font-size: 12px;
   font-weight: 500;
   color: var(--cc-on-surface-variant);
@@ -138,6 +136,23 @@
   }
 }
 
+// ── 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;
@@ -161,7 +176,6 @@
   color: var(--cc-on-surface-variant);
 }
 
-.agent-card__channel-icon,
 .agent-card__channel .mat-icon {
   font-size: 14px;
   width: 14px;
@@ -177,7 +191,6 @@
 .agent-card__jump {
   flex-shrink: 0;
 
-  // Match M3 text button sizing
   .mat-mdc-button {
     min-width: 36px;
     padding: 0 8px;
@@ -192,11 +205,9 @@
 }
 
 // ── Status‑specific background tints for badge ──
-// We use the global status-dot classes from styles.scss and pair them
-// with contextual background-color overrides here.
+// Using data-status attribute selectors for clean styling.
 
-.agent-card[data-status="active"] .agent-card__badge,
-.agent-card .status-dot--active ~ .agent-card__badge {
+.agent-card[data-status="active"] .agent-card__badge {
   background-color: var(--status-active-bg);
 }
 
@@ -212,8 +223,22 @@
   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: 599px) {
+@media (max-width: tokens.$cc-breakpoint-mobile) {
   .agent-card {
     min-width: unset;
     padding: 16px;

frontend-legacy/src/app/command-hub/components/agent-card/agent-card.component.ts

@@ -3,8 +3,12 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnDestroy,
   Output,
   computed,
+  effect,
+  inject,
+  signal,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
@@ -14,12 +18,18 @@ 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({
@@ -38,7 +48,7 @@ import { LongPressDirective } from '../../../directives/long-press.directive';
   styleUrl: './agent-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AgentCardComponent {
+export class AgentCardComponent implements OnDestroy {
   // --- Six required inputs per spec ---
 
   /** Agent status — drives badge color and left‑border accent */
@@ -73,6 +83,9 @@ export class AgentCardComponent {
   /** 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. */
@@ -81,7 +94,15 @@ export class AgentCardComponent {
   /** Emitted when the card is long-pressed — bypasses drawer, opens session log directly. */
   @Output() readonly cardLongPress = new EventEmitter<string>();
 
-  // --- Computed values ---
+  // --- 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(() => {
@@ -95,46 +116,68 @@ export class AgentCardComponent {
     return map[this.status] ?? 'var(--status-offline)';
   });
 
-  /** Human‑readable status label */
-  readonly statusLabel = computed(() => {
-    const labels: Record<AgentStatus, string> = {
-      active: 'Active',
-      idle: 'Idle',
-      thinking: 'Thinking…',
-      error: 'Error',
-      offline: 'Offline',
-    };
-    return labels[this.status] ?? this.status;
-  });
+  /** 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 */
-  readonly channelIcon = computed(() => {
-    const icons: Record<string, string> = {
-      telegram: 'telegram',  // falls back to font icon if no SVG registered
-      slack: 'chat',
-      discord: 'forum',
-      whatsapp: 'chat',
-      webchat: 'language',
-      email: 'email',
-    };
-    return icons[this.channel] ?? 'chat';
+  /** 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);
   });
 
-  /** Relative time string for lastActivity */
-  readonly lastActivityLabel = computed(() => {
-    if (!this.lastActivity) return '';
+  /** 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 = this.lastActivity.getTime();
+    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`;
-  });
+  }
 
-  /** Quick‑jump route derived from sessionKey */
-  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
+  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;
+    }
+  }
 }

frontend-legacy/src/app/components/adaptive-navigation/adaptive-navigation.component.scss

@@ -1,14 +1,16 @@
 // ============================================================================
 // Adaptive Navigation — Desktop sidebar / Mobile header
-// Desktop (≥768px): 72px sidebar with full navigation items
-// Mobile (<768px):  56px compact header with hamburger menu
+// 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 ≥768px)
+// Desktop Sidebar (visible ≥600px)
 // ---------------------------------------------------------------------------
 .adaptive-nav__sidebar {
-  display: flex;
+  display: none; // Hidden by default (mobile-first)
   flex-direction: column;
   width: var(--cc-nav-rail-collapsed-width, 72px);
   min-height: 100vh;
@@ -152,12 +154,12 @@
 }
 
 // ---------------------------------------------------------------------------
-// Mobile Header (visible <768px)
+// Mobile Header (visible <600px only)
 // ---------------------------------------------------------------------------
 .adaptive-nav__mobile-header {
   display: none; // Hidden on desktop, shown on mobile via media query
   align-items: center;
-  height: 56px;
+  height: var(--cc-header-height-compact, 56px);
   padding: 0 12px;
   background-color: var(--cc-surface-container-high);
   border-bottom: 1px solid var(--cc-outline);
@@ -167,6 +169,8 @@
 
 .adaptive-nav__hamburger {
   color: var(--cc-on-surface-variant) !important;
+  min-width: 48px;
+  min-height: 48px;
 
   &:hover {
     color: var(--cc-on-surface) !important;
@@ -196,6 +200,8 @@
 
 .adaptive-nav__mobile-action {
   color: var(--cc-on-surface-variant) !important;
+  min-width: 48px;
+  min-height: 48px;
 
   &:hover {
     color: var(--cc-on-surface) !important;
@@ -214,7 +220,7 @@
 
 .adaptive-nav__mobile-drawer {
   position: fixed;
-  top: 56px; // Below header
+  top: var(--cc-header-height-compact, 56px); // Below header
   left: 0;
   bottom: 0;
   width: 280px;
@@ -271,34 +277,73 @@
 }
 
 // ---------------------------------------------------------------------------
-// Media Queries — Layout Switch
+// Media Queries — Layout Switch (CUB-27 breakpoints)
 // ---------------------------------------------------------------------------
-// Desktop (≥768px): Show sidebar, hide mobile header
-// Mobile (<768px):  Hide sidebar, show compact header
-// ---------------------------------------------------------------------------
-@media (min-width: 768px) {
+
+// 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;
   }
 
-  // Hide mobile drawer and overlay on desktop
   .adaptive-nav__overlay,
   .adaptive-nav__mobile-drawer {
     display: none;
   }
 }
 
-@media (max-width: 767px) {
+// Expanded (≥1024px): Show sidebar with labels
+@media (min-width: 1024px) {
   .adaptive-nav__sidebar {
-    display: none;
+    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: flex;
+    display: none;
+  }
+
+  .adaptive-nav__overlay,
+  .adaptive-nav__mobile-drawer {
+    display: none;
   }
 }
 
@@ -313,4 +358,8 @@
   .adaptive-nav__mobile-drawer {
     animation: none;
   }
+
+  .adaptive-nav__sidebar {
+    transition: none;
+  }
 }

frontend-legacy/src/app/components/adaptive-navigation/adaptive-navigation.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+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';
@@ -8,13 +8,14 @@ import { NAV_DESTINATIONS } from '../../models/nav.model';
 
 /**
  * Adaptive Navigation Component — switches between desktop sidebar
- * and mobile header layouts using CSS media queries.
+ * and mobile header layouts using CSS media queries + JS breakpoint sync.
  *
- * Desktop (≥768px): 72px sidebar with full navigation items.
- * Mobile (<768px):  56px compact header with hamburger menu.
+ * 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 both layouts.
- * Per spec Section 3.1 (kiosk) and 3.2 (mobile).
+ * The LIVE status indicator is visible in all layouts.
  */
 @Component({
   selector: 'app-adaptive-navigation',
@@ -31,7 +32,7 @@ import { NAV_DESTINATIONS } from '../../models/nav.model';
   styleUrl: './adaptive-navigation.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AdaptiveNavigationComponent {
+export class AdaptiveNavigationComponent implements OnInit, OnDestroy {
   /** Navigation destinations shared with other nav components */
   protected readonly destinations = NAV_DESTINATIONS;
 
@@ -41,6 +42,22 @@ export class AdaptiveNavigationComponent {
   /** 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);
@@ -50,4 +67,18 @@ export class AdaptiveNavigationComponent {
   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
+  }
 }

frontend-legacy/src/app/design/index.ts

@@ -0,0 +1,11 @@
+// ============================================================================
+// 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';

frontend-legacy/src/app/design/theme.service.ts

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

frontend-legacy/src/app/design/tokens.ts

@@ -0,0 +1,462 @@
+// ============================================================================
+// 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;
+}

frontend-legacy/src/app/layout/bottom-nav/bottom-nav.component.scss

@@ -1,7 +1,8 @@
 // ============================================================================
 // Bottom Navigation Bar — Mobile Navigation
-// Per spec Section 3.2: M3 NavigationBar pattern
-// Visible only on compact breakpoint (< 600px)
+// Per CUB-27 spec breakpoints:
+//   Compact (0–599px): Visible — M3 NavigationBar pattern
+//   Medium+ (≥600px): Hidden — nav rail takes over
 // ============================================================================
 
 .bottom-nav {
@@ -17,6 +18,8 @@
   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 {
@@ -68,9 +71,24 @@
   white-space: nowrap;
 }
 
-// Show bottom nav only on compact breakpoint
+// ---------------------------------------------------------------------------
+// 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;
+  }
+}

frontend-legacy/src/app/layout/header-bar/header-bar.component.scss

@@ -0,0 +1,126 @@
+// ============================================================================
+// 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;
+  }
+}

frontend-legacy/src/app/layout/layout-shell/layout-shell.component.scss

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

frontend-legacy/src/app/layout/nav-rail/nav-rail.component.scss

@@ -1,11 +1,14 @@
 // ============================================================================
 // Nav Rail — Desktop/Kiosk Navigation
-// Per spec Section 3.1: 72px collapsed / 256px expanded
+// 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: flex;
+  display: none; // Hidden by default (mobile-first)
   flex-direction: column;
   width: var(--cc-nav-rail-collapsed-width);
   min-height: 100vh;
@@ -104,9 +107,52 @@
   text-overflow: ellipsis;
 }
 
-// Responsive: Hide nav rail on mobile (bottom nav takes over)
-@media (max-width: 599px) {
+// ---------------------------------------------------------------------------
+// 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;
+  }
 }

frontend-legacy/src/app/layout/nav-rail/nav-rail.component.ts

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

frontend-legacy/src/app/pages/hub/hub-page.component.html

@@ -0,0 +1,57 @@
+<!-- ========================================================================== -->
+<!-- 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()"
+/>

frontend-legacy/src/app/pages/hub/hub-page.component.scss

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

frontend-legacy/src/app/pages/hub/hub-page.component.ts

@@ -1,51 +1,22 @@
-import { ChangeDetectionStrategy, Component, signal, ViewChild } from '@angular/core';
+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';
 
-// ============================================================================
-// Hub Page — Fleet status grid
-// CUB-26: Integrates AgentCard click/long-press with session drawer.
-// ============================================================================
+/**
+ * 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, AgentCardComponent, AgentSessionDrawerComponent],
-  template: `
-    <div class="hub-page">
-      <h1 class="hub-page__title">Command Hub</h1>
-      <div class="hub-page__grid">
-        @for (agent of agents(); 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 -->
-    <app-agent-session-drawer
-      [isMobile]="isMobile()"
-      (openSession)="onOpenSession($event)"
-      (pinToDashboard)="onPinToDashboard($event)"
-      (drawerClose)="onDrawerClose()"
-    />
-  `,
+  imports: [CommonModule, MatChipsModule, AgentCardComponent, AgentSessionDrawerComponent],
+  templateUrl: './hub-page.component.html',
   styleUrl: './hub-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -54,6 +25,17 @@ export class HubPageComponent {
 
   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[]>([
     {
@@ -73,10 +55,10 @@ export class HubPageComponent {
       displayName: 'Rex',
       role: 'Frontend Agent',
       status: 'thinking',
-      currentTask: 'Building agent session drawer',
+      currentTask: 'Building responsive layout',
       taskProgress: 40,
       taskElapsed: '02m 30s',
-      sessionKey: 'agent:rex:telegram:CUB-26:def456',
+      sessionKey: 'agent:rex:telegram:CUB-27:def456',
       channel: 'telegram',
       lastActivity: new Date(Date.now() - 30000),
     },
@@ -119,6 +101,12 @@ export class HubPageComponent {
     },
   ]);
 
+  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') {
@@ -128,6 +116,10 @@ export class HubPageComponent {
     }
   }
 
+  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);

frontend-legacy/src/styles.scss

@@ -1,10 +1,18 @@
 // ============================================================================
 // OpenClaw Control Center — M3 Tactical Dark Theme
 // ============================================================================
-// Material Design 3 theming with custom dark palette per design spec.
-// Section 5.1: Color Palette, Section 5.2: Typography
+// 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;
 
 // ---------------------------------------------------------------------------
@@ -21,11 +29,11 @@ $dark-theme: mat.define-theme((
     tertiary: mat.$violet-palette,
   ),
   typography: (
-    brand-family: 'Inter, Roboto, sans-serif',
-    plain-family: 'Inter, Roboto, sans-serif',
-    bold-weight: 600,
-    medium-weight: 500,
-    regular-weight: 400,
+    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,
@@ -42,7 +50,10 @@ html {
 }
 
 // ---------------------------------------------------------------------------
-// Custom CSS Custom Properties — Status Colors
+// 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.
@@ -88,22 +99,29 @@ html {
   --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: 320px;
+  --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(--color-surface);
+  background-color: var(--cc-surface-darkest);
   color: var(--cc-on-surface);
-  font-family: 'Inter', 'Roboto', sans-serif;
+  font-family: var(--cc-font-body);
   margin: 0;
   height: 100%;
   min-height: 100vh;
@@ -111,37 +129,60 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-// ---------------------------------------------------------------------------
-// M3 Surface Overrides
-// ---------------------------------------------------------------------------
-// Override M3 surface tokens to match our tactical dark palette
-// ---------------------------------------------------------------------------
-:root {
-  // Override M3 system color tokens to match custom palette
-  --mat-sys-surface: var(--cc-surface);
-  --mat-sys-surface-container: var(--cc-surface-container);
-  --mat-sys-surface-container-high: var(--cc-surface-container-high);
-  --mat-sys-on-surface: var(--cc-on-surface);
-  --mat-sys-on-surface-variant: var(--cc-on-surface-variant);
-  --mat-sys-outline: var(--cc-outline);
-  --mat-sys-background: var(--cc-background);
-}
-
 // ---------------------------------------------------------------------------
 // Typography Helpers
 // ---------------------------------------------------------------------------
 .text-mono {
   font-family: var(--cc-font-mono);
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.02em;
+  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
 // ---------------------------------------------------------------------------
-// Per spec Section 7.5: Animation Specs
-// ---------------------------------------------------------------------------
 @keyframes pulse-active {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.7; transform: scale(1.15); }
@@ -158,35 +199,35 @@ body {
 }
 
 // ---------------------------------------------------------------------------
-// Utility Classes
+// Status Dot Utility Classes
 // ---------------------------------------------------------------------------
 .status-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
+  width: tokens.$status-dot-size;
+  height: tokens.$status-dot-size;
+  border-radius: tokens.$radius-full;
   display: inline-block;
 
   &--active {
-    background-color: var(--status-active);
-    animation: pulse-active 2s ease-in-out infinite;
+    background-color: var(--cc-status-active);
+    animation: pulse-active tokens.$duration-standard tokens.$easing-standard infinite;
   }
 
   &--idle {
-    background-color: var(--status-idle);
+    background-color: var(--cc-status-idle);
   }
 
   &--thinking {
-    background-color: var(--status-thinking);
-    animation: pulse-thinking 3s ease-in-out infinite;
+    background-color: var(--cc-status-thinking);
+    animation: pulse-thinking 3s tokens.$easing-standard infinite;
   }
 
   &--error {
-    background-color: var(--status-error);
-    animation: pulse-error 0.8s ease-in-out infinite;
+    background-color: var(--cc-status-error);
+    animation: pulse-error tokens.$duration-fast tokens.$easing-standard infinite;
   }
 
   &--offline {
-    background-color: var(--status-offline);
+    background-color: var(--cc-status-offline);
   }
 }
 
@@ -201,6 +242,27 @@ body {
   }
 }
 
+// ---------------------------------------------------------------------------
+// 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)
 // ---------------------------------------------------------------------------
@@ -210,11 +272,11 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--cc-surface);
+  background: var(--cc-surface-dark);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--cc-outline);
+  background: var(--cc-surface-lighter);
   border-radius: 3px;
 
   &:hover {

frontend-legacy/src/styles/_css-properties.scss

@@ -0,0 +1,115 @@
+// ============================================================================
+// 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};
+  }
+}

frontend-legacy/src/styles/_tokens.scss

@@ -0,0 +1,474 @@
+// ============================================================================
+// OpenClaw Control Center — M3 Design Tokens
+// ============================================================================
+// Single source of truth for all design tokens.
+// Components should @use this module and reference tokens via variables or
+// the theme() mixin rather than hardcoding values.
+//
+// Token structure:
+//   1. Color tokens    — palette, semantic, status, surface
+//   2. Typography      — families, sizes, weights, line-heights
+//   3. Spacing         — 4px base grid, named steps
+//   4. Layout          — dimensions, breakpoints, radii, shadows
+//   5. Motion          — durations, easing curves
+//   6. Accessibility   — focus, reduced-motion
+// ============================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+
+// ============================================================================
+// 1. COLOR TOKENS
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// 1a. Primary Palette (M3 cyan-based)
+// ---------------------------------------------------------------------------
+$color-primary-50:  #ecfeff;
+$color-primary-100: #cffafe;
+$color-primary-200: #a5f3fc;
+$color-primary-300: #67e8f9;
+$color-primary-400: #22d3ee;
+$color-primary-500: #38bdf8;  // Brand primary
+$color-primary-600: #0ea5e9;
+$color-primary-700: #0284c7;
+$color-primary-800: #0369a1;
+$color-primary-900: #075985;
+
+// ---------------------------------------------------------------------------
+// 1b. Secondary Palette (M3 teal-based)
+// ---------------------------------------------------------------------------
+$color-secondary-50:  #f0fdfa;
+$color-secondary-100: #ccfbf1;
+$color-secondary-200: #99f6e4;
+$color-secondary-300: #5eead4;
+$color-secondary-400: #2dd4bf;  // Brand secondary
+$color-secondary-500: #14b8a6;
+$color-secondary-600: #0d9488;
+$color-secondary-700: #0f766e;
+$color-secondary-800: #115e59;
+$color-secondary-900: #134e4a;
+
+// ---------------------------------------------------------------------------
+// 1c. Accent / Tertiary Palette (M3 violet-based)
+// ---------------------------------------------------------------------------
+$color-accent-50:  #f5f3ff;
+$color-accent-100: #ede9fe;
+$color-accent-200: #ddd6fe;
+$color-accent-300: #c4b5fd;
+$color-accent-400: #a78bfa;  // Brand accent
+$color-accent-500: #8b5cf6;
+$color-accent-600: #7c3aed;
+$color-accent-700: #6d28d9;
+$color-accent-800: #5b21b6;
+$color-accent-900: #4c1d95;
+
+// ---------------------------------------------------------------------------
+// 1d. Danger / Error Palette
+// ---------------------------------------------------------------------------
+$color-danger-50:  #fef2f2;
+$color-danger-100: #fee2e2;
+$color-danger-200: #fecaca;
+$color-danger-300: #fca5a5;
+$color-danger-400: #f87171;  // Brand danger
+$color-danger-500: #ef4444;
+$color-danger-600: #dc2626;
+$color-danger-700: #b91c1c;
+$color-danger-800: #991b1b;
+$color-danger-900: #7f1d1d;
+
+// ---------------------------------------------------------------------------
+// 1e. Semantic Surface Tokens (Tactical Dark)
+// ---------------------------------------------------------------------------
+$color-surface-darkest:   #0D0F12;  // Page background
+$color-surface-dark:      #13161A;  // Card / container surface
+$color-surface-medium:     #1C2027;  // Container-elevated
+$color-surface-light:      #252B33;  // Container-high / hover
+$color-surface-lighter:    #2D3748;  // Border / divider zone
+
+$color-on-surface:         #E2E8F0;  // Primary text on dark surfaces
+$color-on-surface-variant: #8A9BB0;  // Secondary / muted text
+$color-on-surface-muted:   #64748B;  // Disabled / hint text
+
+// ---------------------------------------------------------------------------
+// 1f. Status Colors (Semantic — outside M3 tonal system)
+// ---------------------------------------------------------------------------
+$status-active:    #38bdf8;
+$status-idle:      #2dd4bf;
+$status-thinking:  #a78bfa;
+$status-error:     #f87171;
+$status-offline:   #64748b;
+
+// Status background tints (12% opacity for badges, pills, backgrounds)
+$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);
+$status-offline-bg:   rgba(100, 116, 139, 0.12);
+
+// Status border colors (40% opacity)
+$status-active-border: rgba(56, 189, 248, 0.40);
+$status-idle-border:   rgba(45, 212, 191, 0.40);
+$status-thinking-border: rgba(167, 139, 250, 0.40);
+$status-error-border:  rgba(248, 113, 113, 0.40);
+$status-offline-border: rgba(100, 116, 139, 0.40);
+
+// Map for iteration
+$status-colors: (
+  'active':   ('fg': $status-active,   'bg': $status-active-bg,   'border': $status-active-border),
+  'idle':     ('fg': $status-idle,     'bg': $status-idle-bg,     'border': $status-idle-border),
+  'thinking': ('fg': $status-thinking, 'bg': $status-thinking-bg,  'border': $status-thinking-border),
+  'error':    ('fg': $status-error,    'bg': $status-error-bg,     'border': $status-error-border),
+  'offline':  ('fg': $status-offline,   'bg': $status-offline-bg,   'border': $status-offline-border),
+);
+
+// ---------------------------------------------------------------------------
+// 1g. Full color map for programmatic access
+// ---------------------------------------------------------------------------
+$colors: (
+  'primary':       $color-primary-500,
+  'secondary':     $color-secondary-400,
+  'accent':        $color-accent-400,
+  'danger':        $color-danger-400,
+  'surface':       $color-surface-dark,
+  'surface-light': $color-surface-light,
+  'on-surface':    $color-on-surface,
+  'on-surface-variant': $color-on-surface-variant,
+  'border':        $color-surface-lighter,
+);
+
+// ============================================================================
+// 2. TYPOGRAPHY TOKENS
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// 2a. Font Families
+// ---------------------------------------------------------------------------
+$font-family-brand:  'Inter, Roboto, sans-serif';
+$font-family-body:   'Inter, Roboto, sans-serif';
+$font-family-mono:   'Roboto Mono, Cascadia Code, Fira Code, monospace';
+
+// ---------------------------------------------------------------------------
+// 2b. Font Sizes (M3 type scale)
+// ---------------------------------------------------------------------------
+$font-size-display-large:  57px;
+$font-size-display-medium: 45px;
+$font-size-display-small:  36px;
+$font-size-headline-large: 32px;
+$font-size-headline-medium: 28px;
+$font-size-headline-small:  24px;
+$font-size-title-large:     22px;
+$font-size-title-medium:    16px;
+$font-size-title-small:     14px;
+$font-size-body-large:      16px;
+$font-size-body-medium:     14px;
+$font-size-body-small:      12px;
+$font-size-label-large:     14px;
+$font-size-label-medium:    12px;
+$font-size-label-small:     11px;
+
+// ---------------------------------------------------------------------------
+// 2c. Font Weights
+// ---------------------------------------------------------------------------
+$font-weight-regular: 400;
+$font-weight-medium:   500;
+$font-weight-bold:     600;
+$font-weight-heavy:    700;
+
+// ---------------------------------------------------------------------------
+// 2d. Line Heights
+// ---------------------------------------------------------------------------
+$line-height-tight:   1.2;
+$line-height-normal:   1.5;
+$line-height-relaxed:  1.6;
+
+// ---------------------------------------------------------------------------
+// 2e. Letter Spacing
+// ---------------------------------------------------------------------------
+$letter-spacing-tight:    -0.01em;
+$letter-spacing-normal:    0em;
+$letter-spacing-wide:      0.02em;
+$letter-spacing-mono:      0.05em;
+
+// ---------------------------------------------------------------------------
+// 2f. Typography map
+// ---------------------------------------------------------------------------
+$typography: (
+  'font-family-brand':  $font-family-brand,
+  'font-family-body':   $font-family-body,
+  'font-family-mono':   $font-family-mono,
+  'size-display-large': $font-size-display-large,
+  'size-headline-medium': $font-size-headline-medium,
+  'size-title-large':    $font-size-title-large,
+  'size-title-medium':   $font-size-title-medium,
+  'size-body-large':     $font-size-body-large,
+  'size-body-medium':    $font-size-body-medium,
+  'size-body-small':     $font-size-body-small,
+  'size-label-large':    $font-size-label-large,
+  'size-label-medium':   $font-size-label-medium,
+  'weight-regular':      $font-weight-regular,
+  'weight-medium':       $font-weight-medium,
+  'weight-bold':         $font-weight-bold,
+);
+
+// ============================================================================
+// 3. SPACING TOKENS (4px grid)
+// ============================================================================
+
+$spacing-0:   0px;
+$spacing-1:   4px;
+$spacing-2:   8px;
+$spacing-3:   12px;
+$spacing-4:   16px;
+$spacing-5:   20px;
+$spacing-6:   24px;
+$spacing-7:   28px;
+$spacing-8:   32px;
+$spacing-9:   36px;
+$spacing-10:  40px;
+$spacing-12:  48px;
+$spacing-14:  56px;
+$spacing-16:  64px;
+$spacing-20:  80px;
+
+// Named semantic spacing
+$spacing-unit:        $spacing-2;    // 8px — base grid unit
+$spacing-card-gap:    $spacing-4;    // 16px
+$spacing-card-pad:    $spacing-5;    // 20px
+$spacing-section:     $spacing-6;    // 24px
+
+// ============================================================================
+// 4. LAYOUT TOKENS
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// 4a. Dimensions
+// ---------------------------------------------------------------------------
+$nav-rail-collapsed-width:  72px;
+$nav-rail-expanded-width:   256px;
+$header-height:              64px;
+$bottom-nav-height:          80px;
+$card-border-radius:         16px;
+$card-min-width:             320px;
+$badge-height:               24px;
+$badge-border-radius:        12px;
+$status-dot-size:            10px;
+
+// ---------------------------------------------------------------------------
+// 4b. Breakpoints (M3 canonical)
+// ---------------------------------------------------------------------------
+$breakpoint-compact:  599px;   // Mobile phone
+$breakpoint-medium:   767px;   // Tablet portrait
+$breakpoint-expanded:  1023px;  // Tablet landscape
+$breakpoint-large:    1439px;  // Desktop
+
+// Named breakpoint map for @media mixins
+$breakpoints: (
+  'compact':  $breakpoint-compact,
+  'medium':   $breakpoint-medium,
+  'expanded': $breakpoint-expanded,
+  'large':    $breakpoint-large,
+);
+
+// ---------------------------------------------------------------------------
+// 4c. Border Radius
+// ---------------------------------------------------------------------------
+$radius-none:   0px;
+$radius-xs:     4px;
+$radius-sm:     8px;
+$radius-md:     12px;
+$radius-lg:     16px;
+$radius-xl:     24px;
+$radius-full:    9999px;
+
+// ---------------------------------------------------------------------------
+// 4d. Shadows (M3 elevation)
+// ---------------------------------------------------------------------------
+$shadow-level-0: none;
+$shadow-level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+$shadow-level-2: 0 2px 6px 0 rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+$shadow-level-3: 0 4px 12px 0 rgba(0, 0, 0, 0.3), 0 4px 8px -4px rgba(0, 0, 0, 0.3);
+$shadow-level-4: 0 8px 24px 0 rgba(0, 0, 0, 0.3), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
+
+// ============================================================================
+// 5. MOTION TOKENS
+// ============================================================================
+
+$duration-instant:   0ms;      // No animation (reduced motion fallback)
+$duration-fast:      100ms;
+$duration-short:     150ms;
+$duration-medium:    200ms;
+$duration-standard:  300ms;
+$duration-long:       500ms;
+
+$easing-standard:  cubic-bezier(0.4, 0, 0.2, 1);   // M3 standard
+$easing-decelerate: cubic-bezier(0, 0, 0.2, 1);     // M3 decelerate (entering)
+$easing-accelerate: cubic-bezier(0.4, 0, 1, 1);     // M3 accelerate (exiting)
+$easing-sharp:     cubic-bezier(0.4, 0, 0.6, 1);    // M3 sharp
+
+// ============================================================================
+// 6. ACCESSIBILITY TOKENS
+// ============================================================================
+
+$focus-ring-width:    2px;
+$focus-ring-offset:   2px;
+$focus-ring-color:    $status-active;
+$focus-ring-style:    solid;
+
+$min-touch-target:    48px;
+$min-body-font:       16px;
+
+// ============================================================================
+// MIXINS
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Responsive breakpoint mixin
+// Usage: @include tokens.respond-to('expanded') { ... }
+// ---------------------------------------------------------------------------
+@mixin respond-to($breakpoint) {
+  $value: map.get($breakpoints, $breakpoint);
+  @if $value {
+    @media (min-width: $value + 1) {
+      @content;
+    }
+  } @else {
+    @error "Unknown breakpoint: `#{$breakpoint}`. Valid: compact, medium, expanded, large";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Below-breakpoint mixin (max-width)
+// Usage: @include tokens.below('expanded') { ... }
+// ---------------------------------------------------------------------------
+@mixin below($breakpoint) {
+  $value: map.get($breakpoints, $breakpoint);
+  @if $value {
+    @media (max-width: $value) {
+      @content;
+    }
+  } @else {
+    @error "Unknown breakpoint: `#{$breakpoint}`. Valid: compact, medium, expanded, large";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Focus ring mixin
+// ---------------------------------------------------------------------------
+@mixin focus-ring($color: $focus-ring-color) {
+  &:focus-visible {
+    outline: $focus-ring-width $focus-ring-style $color;
+    outline-offset: $focus-ring-offset;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Card surface mixin
+// ---------------------------------------------------------------------------
+@mixin card-surface {
+  background-color: $color-surface-medium;
+  border-radius: $card-border-radius;
+  border: 1px solid $color-surface-lighter;
+}
+
+// ---------------------------------------------------------------------------
+// Mono text mixin
+// ---------------------------------------------------------------------------
+@mixin mono-text($size: $font-size-body-medium) {
+  font-family: $font-family-mono;
+  font-size: $size;
+  letter-spacing: $letter-spacing-mono;
+}
+
+// ---------------------------------------------------------------------------
+// Status dot mixin
+// ---------------------------------------------------------------------------
+@mixin status-dot($status) {
+  $colors: map.get($status-colors, $status);
+  @if not $colors {
+    @error "Unknown status: `#{$status}`. Valid: active, idle, thinking, error, offline";
+  }
+  $fg: map.get($colors, 'fg');
+
+  width: $status-dot-size;
+  height: $status-dot-size;
+  border-radius: $radius-full;
+  background-color: $fg;
+
+  @if $status == 'active' {
+    animation: pulse-active $duration-standard $easing-standard infinite;
+  } @else if $status == 'thinking' {
+    animation: pulse-thinking 3s $easing-standard infinite;
+  } @else if $status == 'error' {
+    animation: pulse-error $duration-fast $easing-standard infinite;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Truncate text mixin (single line)
+// ---------------------------------------------------------------------------
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ---------------------------------------------------------------------------
+// Screen-reader-only mixin
+// ---------------------------------------------------------------------------
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Touch target mixin — ensures minimum 48px touch area
+// ---------------------------------------------------------------------------
+@mixin touch-target($min-size: $min-touch-target) {
+  min-width: $min-size;
+  min-height: $min-size;
+}
+// ============================================================================
+// CUB-20 / CUB-27 CONVENIENCE ALIASES
+// ============================================================================
+// Short aliases used by agent-card, hub-page, and other components.
+// These map to the canonical M3 tokens above.
+
+$cc-background:            $color-surface-darkest;
+$cc-surface:               $color-surface-dark;
+$cc-surface-container:     $color-surface-medium;
+$cc-surface-container-high: $color-surface-light;
+$cc-on-surface:            $color-on-surface;
+$cc-on-surface-variant:    $color-on-surface-variant;
+$cc-outline:               $color-surface-lighter;
+
+$cc-font-mono:             $font-family-mono;
+$cc-font-family:           $font-family-brand;
+
+$cc-nav-rail-collapsed-width:  $nav-rail-collapsed-width;
+$cc-nav-rail-expanded-width:   $nav-rail-expanded-width;
+$cc-header-height:              $header-height;
+$cc-bottom-nav-height:          $bottom-nav-height;
+$cc-card-border-radius:         $card-border-radius;
+$cc-card-min-width:             $card-min-width;
+$cc-card-gap:                   $spacing-card-gap;
+$cc-card-padding:               $spacing-card-pad;
+$cc-section-padding:            $spacing-section;
+$cc-spacing-unit:               $spacing-unit;
+
+$cc-breakpoint-mobile:   $breakpoint-compact;
+$cc-breakpoint-tablet:   $breakpoint-medium;
+$cc-breakpoint-desktop:  $breakpoint-expanded;
+
+$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;

frontend-legacy/src/styles/_utilities.scss

@@ -0,0 +1,170 @@
+// ============================================================================
+// OpenClaw Control Center — Utility Mixins
+// ============================================================================
+// Reusable patterns that enforce design-system consistency.
+// Components should @use this module and include mixins rather than
+// writing repetitive CSS blocks.
+// ============================================================================
+
+@use 'tokens' as *;
+
+// ---------------------------------------------------------------------------
+// Elevation / Surface Card
+// Applies consistent card styling using design tokens.
+// Usage: @include utils.card-surface();
+// ---------------------------------------------------------------------------
+@mixin card-surface($elevation: 1) {
+  background-color: var(--cc-surface-medium);
+  border-radius: var(--cc-card-radius);
+  border: 1px solid var(--cc-surface-lighter);
+  box-shadow: var(--cc-shadow-#{$elevation});
+  transition: box-shadow var(--cc-duration-short) var(--cc-easing-standard);
+}
+
+// ---------------------------------------------------------------------------
+// Elevated card on hover
+// ---------------------------------------------------------------------------
+@mixin card-hover($elevation: 2) {
+  &:hover {
+    box-shadow: var(--cc-shadow-#{$elevation});
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Status-aware left border
+// Applies colored left border based on agent status.
+// Usage: @include utils.status-border('active');
+// ---------------------------------------------------------------------------
+@mixin status-border($status) {
+  $status-map: (
+    'active':   var(--cc-status-active),
+    'idle':     var(--cc-status-idle),
+    'thinking': var(--cc-status-thinking),
+    'error':    var(--cc-status-error),
+    'offline':  var(--cc-status-offline),
+  );
+  $color: map-get($status-map, $status);
+  @if not $color {
+    $color: var(--cc-status-offline);
+  }
+  border-left: 4px solid $color;
+}
+
+// ---------------------------------------------------------------------------
+// Status badge / pill
+// ---------------------------------------------------------------------------
+@mixin status-badge($status) {
+  $fg-map: (
+    'active':   var(--cc-status-active),
+    'idle':     var(--cc-status-idle),
+    'thinking': var(--cc-status-thinking),
+    'error':    var(--cc-status-error),
+    'offline':  var(--cc-status-offline),
+  );
+  $bg-map: (
+    'active':   var(--cc-status-active-bg),
+    'idle':     var(--cc-status-idle-bg),
+    'thinking': var(--cc-status-thinking-bg),
+    'error':    var(--cc-status-error-bg),
+    'offline':  var(--cc-status-offline-bg),
+  );
+
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: $badge-height;
+  padding: 0 8px;
+  border-radius: $badge-border-radius;
+  background-color: map-get($bg-map, $status);
+  color: map-get($fg-map, $status);
+  font-size: $font-size-label-medium;
+  font-weight: $font-weight-medium;
+  white-space: nowrap;
+}
+
+// ---------------------------------------------------------------------------
+// Glass surface (frosted glass effect)
+// ---------------------------------------------------------------------------
+@mixin glass-surface {
+  background-color: rgba(19, 22, 26, 0.8);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--cc-surface-lighter);
+}
+
+// ---------------------------------------------------------------------------
+// Responsive grid
+// Creates a responsive grid that adapts from 1-col to 2-col.
+// ---------------------------------------------------------------------------
+@mixin responsive-grid($min-col-width: $card-min-width, $gap: $spacing-card-gap) {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax($min-col-width, 1fr));
+  gap: $gap;
+}
+
+// ---------------------------------------------------------------------------
+// Scroll container
+// ---------------------------------------------------------------------------
+@mixin scroll-container($direction: 'y') {
+  @if $direction == 'y' {
+    overflow-y: auto;
+    overflow-x: hidden;
+  } @else {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  -webkit-overflow-scrolling: touch;
+
+  // Custom scrollbar (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);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Page container
+// Standard page padding and layout
+// ---------------------------------------------------------------------------
+@mixin page-container {
+  padding: $spacing-section;
+  min-height: 400px;
+  overflow-x: hidden;
+}
+
+// ---------------------------------------------------------------------------
+// Transition helpers
+// ---------------------------------------------------------------------------
+@mixin transition-colors($duration: $duration-short) {
+  transition: color #{$duration} $easing-standard,
+              background-color #{$duration} $easing-standard,
+              border-color #{$duration} $easing-standard;
+}
+
+@mixin transition-transform($duration: $duration-medium) {
+  transition: transform #{$duration} $easing-standard;
+}
+
+@mixin transition-opacity($duration: $duration-short) {
+  transition: opacity #{$duration} $easing-standard;
+}
+
+// ---------------------------------------------------------------------------
+// Reduced motion
+// Wraps content in a reduced-motion media query.
+// ---------------------------------------------------------------------------
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}

frontend-legacy/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

frontend-legacy/tsconfig.json

@@ -0,0 +1,30 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

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?

frontend/Dockerfile

@@ -0,0 +1,38 @@
+# ============================================================
+# Control Center Frontend — Multi-stage Docker Build
+# React 19 + Vite + nginx for static serving + API proxy
+# ============================================================
+
+# --- Build Stage ---
+FROM node:22-slim AS builder
+
+WORKDIR /app
+
+# Install dependencies first (layer caching)
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Copy source and build production bundle
+COPY . .
+RUN npm run build
+
+# --- Runtime Stage ---
+FROM nginx:1.27-alpine AS runtime
+
+# Remove default nginx config
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Copy custom nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy built React app from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Expose HTTP port
+EXPOSE 80
+
+# Health check — confirm nginx is serving
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget -qO- http://localhost/ || exit 1
+
+CMD ["nginx", "-g", "daemon off;"]

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.

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,
+    },
+  },
+])

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>

frontend/nginx.conf

@@ -0,0 +1,41 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    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 (Vite uses content hashes)
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Cache hashed JS/CSS bundles
+    location ~* \.(js|css)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Proxy API requests to backend
+    location /api/ {
+        proxy_pass http://backend:8080/api/;
+        proxy_http_version 1.1;
+        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;
+    }
+
+    # React SPA — all other routes fall back to index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

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"
   }
 }

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>

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