CUB-57: Dashboard summary component with status breakdown

backend/internal/models/models.go

@@ -1,106 +0,0 @@
-// Package models defines the database entities for the Control Center Go backend.
-// Structs map 1:1 to the PostgreSQL schema defined in backend/migrations/.
-package models
-
-import (
-	"time"
-
-	"github.com/jackc/pgx/v5/pgtype"
-)
-
-// AgentStatus represents the possible lifecycle states of an agent.
-type AgentStatus string
-
-const (
-	AgentStatusActive  AgentStatus = "active"
-	AgentStatusIdle    AgentStatus = "idle"
-	AgentStatusThinking AgentStatus = "thinking"
-	AgentStatusError   AgentStatus = "error"
-	AgentStatusOffline AgentStatus = "offline"
-)
-
-// Agent represents a registered agent and its current state.
-type Agent struct {
-	ID           pgtype.UUID `db:"id" json:"id"`
-	Name         string      `db:"name" json:"name"`
-	Status       AgentStatus `db:"status" json:"status"`
-	Task         *string     `db:"task" json:"task,omitempty"`
-	Progress     int32       `db:"progress" json:"progress"`
-	SessionKey   *string     `db:"session_key" json:"session_key,omitempty"`
-	Channel      *string     `db:"channel" json:"channel,omitempty"`
-	LastActivity time.Time   `db:"last_activity" json:"last_activity"`
-	CreatedAt    time.Time   `db:"created_at" json:"created_at"`
-	UpdatedAt    time.Time   `db:"updated_at" json:"updated_at"`
-}
-
-// SessionStatus represents the possible states of an agent session.
-type SessionStatus string
-
-const (
-	SessionStatusRunning    SessionStatus = "running"
-	SessionStatusCompleted  SessionStatus = "completed"
-	SessionStatusCrashed    SessionStatus = "crashed"
-	SessionStatusTerminated SessionStatus = "terminated"
-)
-
-// Session tracks an agent session over time.
-type Session struct {
-	ID        pgtype.UUID  `db:"id" json:"id"`
-	AgentID   pgtype.UUID  `db:"agent_id" json:"agent_id"`
-	StartedAt time.Time    `db:"started_at" json:"started_at"`
-	EndedAt   *time.Time   `db:"ended_at" json:"ended_at,omitempty"`
-	Status    SessionStatus `db:"status" json:"status"`
-}
-
-// TaskLogStatus represents the possible states of a task log entry.
-type TaskLogStatus string
-
-const (
-	TaskLogStatusPending   TaskLogStatus = "pending"
-	TaskLogStatusRunning   TaskLogStatus = "running"
-	TaskLogStatusCompleted TaskLogStatus = "completed"
-	TaskLogStatusFailed    TaskLogStatus = "failed"
-	TaskLogStatusCancelled TaskLogStatus = "cancelled"
-)
-
-// TaskLog records a historical task assigned to an agent.
-type TaskLog struct {
-	ID            pgtype.UUID  `db:"id" json:"id"`
-	AgentID       pgtype.UUID  `db:"agent_id" json:"agent_id"`
-	Task          string       `db:"task" json:"task"`
-	Status        TaskLogStatus `db:"status" json:"status"`
-	StartedAt     time.Time    `db:"started_at" json:"started_at"`
-	CompletedAt   *time.Time   `db:"completed_at" json:"completed_at,omitempty"`
-	ErrorMessage  *string      `db:"error_message" json:"error_message,omitempty"`
-}
-
-// ProjectStatus represents the possible states of a project.
-type ProjectStatus string
-
-const (
-	ProjectStatusPlanned     ProjectStatus = "planned"
-	ProjectStatusInProgress  ProjectStatus = "in_progress"
-	ProjectStatusCompleted   ProjectStatus = "completed"
-	ProjectStatusPaused      ProjectStatus = "paused"
-	ProjectStatusCancelled   ProjectStatus = "cancelled"
-)
-
-// Project represents a project managed by the Control Center.
-type Project struct {
-	ID          pgtype.UUID  `db:"id" json:"id"`
-	Name        string       `db:"name" json:"name"`
-	Description *string      `db:"description" json:"description,omitempty"`
-	Status      ProjectStatus `db:"status" json:"status"`
-	AgentID     *pgtype.UUID `db:"agent_id" json:"agent_id,omitempty"`
-	CreatedAt   time.Time    `db:"created_at" json:"created_at"`
-	UpdatedAt   time.Time    `db:"updated_at" json:"updated_at"`
-}
-
-// AgentEvent represents an event in the agent lifecycle or telemetry stream.
-type AgentEvent struct {
-	ID        pgtype.UUID `db:"id" json:"id"`
-	AgentID   pgtype.UUID `db:"agent_id" json:"agent_id"`
-	EventType string      `db:"event_type" json:"event_type"`
-	Payload   *map[string]interface{} `db:"payload" json:"payload,omitempty"`
-	CreatedAt time.Time   `db:"created_at" json:"created_at"`
-}

backend/migrations/001_initial_schema.down.sql

@@ -1,9 +0,0 @@
--- Migration: 001_initial_schema (down)
--- Description: Reverts the core Control Center database schema.
-
--- Drop in reverse dependency order to avoid FK conflicts
-DROP TABLE IF EXISTS agent_events;
-DROP TABLE IF EXISTS task_logs;
-DROP TABLE IF EXISTS sessions;
-DROP TABLE IF EXISTS projects;
-DROP TABLE IF EXISTS agents;

backend/migrations/001_initial_schema.up.sql

@@ -1,97 +0,0 @@
--- Migration: 001_initial_schema
--- Description: Creates the core Control Center database schema.
-
--- Enable UUID extension
-CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
-
--- ============================================
--- Table: agents
--- ============================================
-CREATE TABLE agents (
-    id            UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
-    name          TEXT NOT NULL,
-    status        TEXT NOT NULL DEFAULT 'idle'
-        CHECK (status IN ('active', 'idle', 'thinking', 'error', 'offline')),
-    task          TEXT,
-    progress      INT NOT NULL DEFAULT 0
-        CHECK (progress >= 0 AND progress <= 100),
-    session_key   TEXT,
-    channel       TEXT,
-    last_activity TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-    created_at    TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-    updated_at    TIMESTAMPTZ NOT NULL DEFAULT NOW()
-);
-
-COMMENT ON TABLE agents IS 'Registered agents and their current state';
-COMMENT ON COLUMN agents.status IS 'Agent lifecycle status: active, idle, thinking, error, offline';
-
--- ============================================
--- Table: sessions
--- ============================================
-CREATE TABLE sessions (
-    id         UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
-    agent_id   UUID NOT NULL,
-    started_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-    ended_at   TIMESTAMPTZ,
-    status     TEXT NOT NULL DEFAULT 'running'
-        CHECK (status IN ('running', 'completed', 'crashed', 'terminated')),
-    CONSTRAINT fk_sessions_agent
-        FOREIGN KEY (agent_id) REFERENCES agents(id)
-        ON DELETE CASCADE
-);
-
-COMMENT ON TABLE sessions IS 'Agent session history';
-
--- ============================================
--- Table: task_logs
--- ============================================
-CREATE TABLE task_logs (
-    id             UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
-    agent_id       UUID NOT NULL,
-    task           TEXT NOT NULL,
-    status         TEXT NOT NULL DEFAULT 'pending'
-        CHECK (status IN ('pending', 'running', 'completed', 'failed', 'cancelled')),
-    started_at     TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-    completed_at   TIMESTAMPTZ,
-    error_message  TEXT,
-    CONSTRAINT fk_task_logs_agent
-        FOREIGN KEY (agent_id) REFERENCES agents(id)
-        ON DELETE CASCADE
-);
-
-COMMENT ON TABLE task_logs IS 'Historical record of tasks assigned to agents';
-
--- ============================================
--- Table: projects
--- ============================================
-CREATE TABLE projects (
-    id          UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
-    name        TEXT NOT NULL,
-    description TEXT,
-    status      TEXT NOT NULL DEFAULT 'planned'
-        CHECK (status IN ('planned', 'in_progress', 'completed', 'paused', 'cancelled')),
-    agent_id    UUID,
-    created_at  TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-    updated_at  TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-    CONSTRAINT fk_projects_agent
-        FOREIGN KEY (agent_id) REFERENCES agents(id)
-        ON DELETE SET NULL
-);
-
-COMMENT ON TABLE projects IS 'Projects managed by the Control Center';
-
--- ============================================
--- Table: agent_events
--- ============================================
-CREATE TABLE agent_events (
-    id         UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
-    agent_id   UUID NOT NULL,
-    event_type TEXT NOT NULL,
-    payload    JSONB,
-    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-    CONSTRAINT fk_agent_events_agent
-        FOREIGN KEY (agent_id) REFERENCES agents(id)
-        ON DELETE CASCADE
-);
-
-COMMENT ON TABLE agent_events IS 'Event stream for agent lifecycle and telemetry';

backend/migrations/002_add_indexes.down.sql

@@ -1,20 +0,0 @@
--- Migration: 002_add_indexes (down)
--- Description: Remove all indexes added in 002_add_indexes.
-
-DROP INDEX IF EXISTS idx_agents_status;
-DROP INDEX IF EXISTS idx_agents_last_activity;
-DROP INDEX IF EXISTS idx_agents_created_at;
-
-DROP INDEX IF EXISTS idx_sessions_agent_id;
-DROP INDEX IF EXISTS idx_sessions_status;
-DROP INDEX IF EXISTS idx_sessions_started_at;
-
-DROP INDEX IF EXISTS idx_task_logs_agent_started;
-DROP INDEX IF EXISTS idx_task_logs_status;
-
-DROP INDEX IF EXISTS idx_agent_events_agent_created;
-DROP INDEX IF EXISTS idx_agent_events_event_type;
-
-DROP INDEX IF EXISTS idx_projects_status;
-DROP INDEX IF EXISTS idx_projects_agent_id;
-DROP INDEX IF EXISTS idx_projects_created;

backend/migrations/002_add_indexes.up.sql

@@ -1,25 +0,0 @@
--- Migration: 002_add_indexes
--- Description: Add performance indexes for common query patterns.
-
--- agents: status filtering, activity ordering
-CREATE INDEX idx_agents_status        ON agents(status);
-CREATE INDEX idx_agents_last_activity ON agents(last_activity DESC);
-CREATE INDEX idx_agents_created_at    ON agents(created_at DESC);
-
--- sessions: agent session lookups, active session checks
-CREATE INDEX idx_sessions_agent_id    ON sessions(agent_id);
-CREATE INDEX idx_sessions_status      ON sessions(status);
-CREATE INDEX idx_sessions_started_at  ON sessions(started_at DESC);
-
--- task_logs: agent task history, chronological ordering
-CREATE INDEX idx_task_logs_agent_started ON task_logs(agent_id, started_at DESC);
-CREATE INDEX idx_task_logs_status        ON task_logs(status);
-
--- agent_events: event stream queries
-CREATE INDEX idx_agent_events_agent_created ON agent_events(agent_id, created_at DESC);
-CREATE INDEX idx_agent_events_event_type    ON agent_events(event_type);
-
--- projects: status filtering, agent assignment
-CREATE INDEX idx_projects_status   ON projects(status);
-CREATE INDEX idx_projects_agent_id ON projects(agent_id);
-CREATE INDEX idx_projects_created  ON projects(created_at DESC);

frontend-legacy/.dockerignore

@@ -1,33 +0,0 @@
-# Dependencies
-node_modules/
-npm-debug.log*
-yarn-error.log
-
-# Build output (rebuilt in container)
-dist/
-out-tsc/
-
-# Angular cache
-.angular/cache/
-
-# IDE
-.idea/
-.vscode/
-*.sublime-workspace
-
-# OS files
-.DS_Store
-Thumbs.db
-
-# Git
-.git/
-.gitignore
-
-# Docker
-Dockerfile
-.dockerignore
-
-# Misc
-coverage/
-tmp/
-*.log

frontend-legacy/.gitignore

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

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

@@ -1,59 +0,0 @@
-# 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/nginx.conf

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

@@ -1,34 +0,0 @@
-{
-  "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/tsconfig.app.json

@@ -1,15 +0,0 @@
-/* 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

@@ -1,30 +0,0 @@
-/* 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,24 +1,44 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
-node_modules
-dist
-dist-ssr
-*.local
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
 
-# Editor directories and files
+# 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
-.idea
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+Thumbs.db

frontend/Dockerfile

@@ -1,38 +0,0 @@
-# ============================================================
-# 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,73 +1,59 @@
-# React + TypeScript + Vite
+# Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.8.
 
-Currently, two official plugins are available:
+## Development server
 
-- [@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/)
+To start a local development server, run:
 
-## 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...
-    },
-  },
-])
+```bash
+ng serve
 ```
 
-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:
+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.
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+## Code scaffolding
 
-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...
-    },
-  },
-])
+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/angular.json

@@ -56,8 +56,7 @@
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-"src",
-                "src/styles"
+                "src"
               ]
             }
           },

frontend/eslint.config.js

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

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

@@ -1,41 +0,0 @@
-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,38 +1,34 @@
 {
   "name": "frontend",
-  "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
+    "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": {
-    "@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"
+    "@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": {
-    "@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"
+    "@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/public/icons.svg

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

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

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

@@ -2,13 +2,11 @@
 <!-- AgentCard — per spec Section 7.3                                            -->
 <!-- Integrates: Status Badge · Task Progress Bar · Quick‑Jump Button           -->
 <!-- Left‑border accent matches status color. role="article" + aria‑labels.     -->
-<!-- Enhanced: data-status attribute, elapsed time, design tokens.              -->
 <!-- ========================================================================== -->
 <article
   class="agent-card"
   role="article"
-  [attr.data-status]="status"
-  [attr.aria-label]="(displayName || agentId) + ' — ' + statusLabel()"
+  [attr.aria-label]="displayName + ' — ' + statusLabel()"
   [style.border-left-color]="statusBorderColor()"
   (click)="cardClick.emit(sessionKey)"
   appLongPress
@@ -34,20 +32,19 @@
   </div>
 
   <!-- ── Body: current task ── -->
-  <div class="agent-card__body" *ngIf="task || isError()">
+  <div class="agent-card__body" *ngIf="task || status === 'error'">
     <p
       class="agent-card__task"
-      [class.agent-card__task--error]="isError()"
-      [attr.aria-label]="'Current task: ' + (isError() ? errorMessage || task : task)"
+      [attr.aria-label]="'Current task: ' + (status === 'error' ? errorMessage : task)"
     >
-      {{ isError() ? errorMessage || task : task }}
+      {{ status === 'error' ? errorMessage || task : task }}
     </p>
   </div>
 
   <!-- ── Task Progress Bar ── -->
   <div
     class="agent-card__progress"
-    *ngIf="showProgress()"
+    *ngIf="progress > 0 && status !== 'error'"
     [attr.aria-label]="'Task progress: ' + progress + '%'"
   >
     <mat-progress-bar
@@ -58,16 +55,6 @@
     <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/src/app/command-hub/components/agent-card/agent-card.component.scss

@@ -2,18 +2,15 @@
 // AgentCard — M3 tactical dark styling
 // Per spec Section 7.3: left‑border accent, status‑aware coloring,
 // responsive card layout with 320px min‑width.
-// Enhanced: data-status selectors, elapsed time, design token imports.
 // ============================================================================
 
-@use 'tokens' as tokens;
-
 .agent-card {
   display: flex;
   flex-direction: column;
-  min-width: tokens.$cc-card-min-width;
-  padding: tokens.$cc-card-padding;
+  min-width: var(--cc-card-min-width);
+  padding: var(--cc-card-padding);
   background-color: var(--cc-surface-container);
-  border-radius: tokens.$cc-card-border-radius;
+  border-radius: var(--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);
@@ -59,6 +56,11 @@
   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 {
@@ -100,7 +102,8 @@
   color: var(--cc-on-surface);
   line-height: 1.4;
 
-  &--error {
+  // Error messages get distinct styling
+  .agent-card--error & {
     color: var(--status-error);
   }
 }
@@ -114,7 +117,6 @@
 }
 
 .agent-card__progress-label {
-  font-family: var(--cc-font-mono);
   font-size: 12px;
   font-weight: 500;
   color: var(--cc-on-surface-variant);
@@ -136,23 +138,6 @@
   }
 }
 
-// ── 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;
@@ -176,6 +161,7 @@
   color: var(--cc-on-surface-variant);
 }
 
+.agent-card__channel-icon,
 .agent-card__channel .mat-icon {
   font-size: 14px;
   width: 14px;
@@ -191,6 +177,7 @@
 .agent-card__jump {
   flex-shrink: 0;
 
+  // Match M3 text button sizing
   .mat-mdc-button {
     min-width: 36px;
     padding: 0 8px;
@@ -205,9 +192,11 @@
 }
 
 // ── Status‑specific background tints for badge ──
-// Using data-status attribute selectors for clean styling.
+// We use the global status-dot classes from styles.scss and pair them
+// with contextual background-color overrides here.
 
-.agent-card[data-status="active"] .agent-card__badge {
+.agent-card[data-status="active"] .agent-card__badge,
+.agent-card .status-dot--active ~ .agent-card__badge {
   background-color: var(--status-active-bg);
 }
 
@@ -223,22 +212,8 @@
   background-color: var(--status-error-bg);
 }
 
-.agent-card[data-status="offline"] .agent-card__badge {
-  background-color: var(--cc-surface-container-high);
-}
-
-// ── Active‑like pulse on card border ──
-.agent-card[data-status="active"],
-.agent-card[data-status="thinking"] {
-  border-left-width: 4px;
-}
-
-.agent-card[data-status="error"] {
-  border-left-color: var(--status-error);
-}
-
 // ── Responsive ──
-@media (max-width: tokens.$cc-breakpoint-mobile) {
+@media (max-width: 599px) {
   .agent-card {
     min-width: unset;
     padding: 16px;

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

@@ -3,12 +3,8 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnDestroy,
   Output,
   computed,
-  effect,
-  inject,
-  signal,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
@@ -18,18 +14,12 @@ 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({
@@ -48,7 +38,7 @@ import {
   styleUrl: './agent-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AgentCardComponent implements OnDestroy {
+export class AgentCardComponent {
   // --- Six required inputs per spec ---
 
   /** Agent status — drives badge color and left‑border accent */
@@ -83,9 +73,6 @@ export class AgentCardComponent implements OnDestroy {
   /** 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. */
@@ -94,15 +81,7 @@ export class AgentCardComponent implements OnDestroy {
   /** Emitted when the card is long-pressed — bypasses drawer, opens session log directly. */
   @Output() readonly cardLongPress = new EventEmitter<string>();
 
-  // --- Internal state ---
-
-  /** Timer for refreshing relative-time label */
-  private _timer: ReturnType<typeof setInterval> | null = null;
-
-  /** Internal signal to trigger relative-time recomputation */
-  private readonly _tick = signal(0);
-
-  // --- Computed values using design tokens ---
+  // --- Computed values ---
 
   /** Map status → CSS custom property for the left‑border accent */
   readonly statusBorderColor = computed(() => {
@@ -116,68 +95,46 @@ export class AgentCardComponent implements OnDestroy {
     return map[this.status] ?? 'var(--status-offline)';
   });
 
-  /** Human‑readable status label (from design tokens) */
-  readonly statusLabel = computed(() => STATUS_LABELS[this.status] ?? this.status);
+  /** 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;
+  });
 
   /** CSS class suffix for the status badge dot */
   readonly statusDotClass = computed(() => `status-dot--${this.status}`);
 
-  /** Material icon name for the channel (from design tokens) */
-  readonly channelIcon = computed(() => CHANNEL_ICONS[this.channel] ?? 'chat');
-
-  /** Relative time string for lastActivity, refreshed every 30s */
-  readonly lastActivityLabel = computed(() => {
-    // Read tick to create dependency that forces recomputation
-    this._tick();
-    return this._relativeTime(this.lastActivity);
+  /** 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';
   });
 
-  /** 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 '';
+  /** Relative time string for lastActivity */
+  readonly lastActivityLabel = computed(() => {
+    if (!this.lastActivity) return '';
     const now = Date.now();
-    const then = date.getTime();
+    const then = this.lastActivity.getTime();
     const diffSec = Math.max(0, Math.floor((now - then) / 1000));
     if (diffSec < 60) return 'just now';
     if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
     if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
     return `${Math.floor(diffSec / 86400)}d ago`;
-  }
+  });
 
-  private _startTimer(): void {
-    this._stopTimer();
-    this._timer = setInterval(() => {
-      // Increment tick to force lastActivityLabel recomputation
-      this._tick.update(v => v + 1);
-    }, 30_000);
-  }
-
-  private _stopTimer(): void {
-    if (this._timer) {
-      clearInterval(this._timer);
-      this._timer = null;
-    }
-  }
+  /** Quick‑jump route derived from sessionKey */
+  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
 }

frontend/src/app/components/dashboard-summary/dashboard-summary.component.html

@@ -0,0 +1,32 @@
+<!-- ============================================================================
+  Dashboard Summary Component Template
+  Displays total active agents, status breakdown, and system health.
+  ============================================================================ -->
+
+<section class="dashboard-summary" role="region" aria-label="Dashboard summary">
+
+  <!-- Total Agents -->
+  <div class="summary-total">
+    <span class="summary-total__count">{{ totalAgents() }}</span>
+    <span class="summary-total__label">Total Agents</span>
+  </div>
+
+  <!-- Status Breakdown -->
+  <div class="summary-breakdown" role="list" aria-label="Agent status breakdown">
+    @for (item of statusItems(); track item.status) {
+      <div class="status-item {{ statusClass(item.status) }}" role="listitem">
+        <span class="status-item__dot" [attr.aria-hidden]="true"></span>
+        <span class="status-item__label">{{ item.label }}</span>
+        <span class="status-item__count">{{ item.count }}</span>
+      </div>
+    }
+  </div>
+
+  <!-- System Health Indicator -->
+  <div class="health-indicator {{ healthClass() }}" role="status" aria-label="System health: {{ healthLabel() }}">
+    <span class="health-indicator__dot" [attr.aria-hidden]="true"></span>
+    <span class="health-indicator__label">System</span>
+    <span class="health-indicator__value">{{ healthLabel() }}</span>
+  </div>
+
+</section>

frontend/src/app/components/dashboard-summary/dashboard-summary.component.scss

@@ -0,0 +1,218 @@
+// ============================================================================
+// Dashboard Summary Component Styles
+// Uses design tokens from styles/_tokens.scss (CUB-21)
+// ============================================================================
+
+@use '../../../styles/tokens' as tokens;
+
+// ---------------------------------------------------------------------------
+// Host block
+// ---------------------------------------------------------------------------
+:host {
+  display: block;
+}
+
+// ---------------------------------------------------------------------------
+// Summary container
+// ---------------------------------------------------------------------------
+.dashboard-summary {
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$spacing-5;
+  padding: tokens.$spacing-6;
+  background-color: tokens.$color-surface-medium;
+  border-radius: tokens.$card-border-radius;
+  border: 1px solid tokens.$color-surface-lighter;
+  box-shadow: tokens.$shadow-level-1;
+}
+
+// ---------------------------------------------------------------------------
+// Total agents
+// ---------------------------------------------------------------------------
+.summary-total {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: tokens.$spacing-1;
+  padding-bottom: tokens.$spacing-4;
+  border-bottom: 1px solid tokens.$color-surface-lighter;
+
+  &__count {
+    font-family: tokens.$font-family-brand;
+    font-size: tokens.$font-size-display-small;
+    font-weight: tokens.$font-weight-heavy;
+    line-height: tokens.$line-height-tight;
+    color: tokens.$color-on-surface;
+    letter-spacing: tokens.$letter-spacing-tight;
+  }
+
+  &__label {
+    font-family: tokens.$font-family-body;
+    font-size: tokens.$font-size-label-large;
+    font-weight: tokens.$font-weight-medium;
+    color: tokens.$color-on-surface-variant;
+    text-transform: uppercase;
+    letter-spacing: tokens.$letter-spacing-wide;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Status breakdown
+// ---------------------------------------------------------------------------
+.summary-breakdown {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: tokens.$spacing-3;
+}
+
+// ---------------------------------------------------------------------------
+// Individual status item
+// ---------------------------------------------------------------------------
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: tokens.$spacing-2;
+  padding: tokens.$spacing-3 tokens.$spacing-4;
+  border-radius: tokens.$radius-md;
+  background-color: tokens.$color-surface-dark;
+  border: 1px solid tokens.$color-surface-lighter;
+  transition: background-color tokens.$duration-short tokens.$easing-standard;
+
+  &__dot {
+    width: tokens.$status-dot-size;
+    height: tokens.$status-dot-size;
+    border-radius: tokens.$radius-full;
+    flex-shrink: 0;
+  }
+
+  &__label {
+    flex: 1;
+    font-family: tokens.$font-family-body;
+    font-size: tokens.$font-size-body-medium;
+    font-weight: tokens.$font-weight-medium;
+    color: tokens.$color-on-surface-variant;
+  }
+
+  &__count {
+    font-family: tokens.$font-family-mono;
+    font-size: tokens.$font-size-body-large;
+    font-weight: tokens.$font-weight-bold;
+    color: tokens.$color-on-surface;
+  }
+
+  // Status-specific colors using the token map
+  &--active {
+    .status-item__dot {
+      background-color: tokens.$status-active;
+      animation: pulse-active tokens.$duration-standard tokens.$easing-standard infinite;
+    }
+    .status-item__count { color: tokens.$status-active; }
+  }
+
+  &--idle {
+    .status-item__dot {
+      background-color: tokens.$status-idle;
+    }
+    .status-item__count { color: tokens.$status-idle; }
+  }
+
+  &--thinking {
+    .status-item__dot {
+      background-color: tokens.$status-thinking;
+      animation: pulse-thinking 3s tokens.$easing-standard infinite;
+    }
+    .status-item__count { color: tokens.$status-thinking; }
+  }
+
+  &--error {
+    .status-item__dot {
+      background-color: tokens.$status-error;
+      animation: pulse-error tokens.$duration-fast tokens.$easing-standard infinite;
+    }
+    .status-item__count { color: tokens.$status-error; }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// System health indicator
+// ---------------------------------------------------------------------------
+.health-indicator {
+  display: flex;
+  align-items: center;
+  gap: tokens.$spacing-2;
+  padding: tokens.$spacing-3 tokens.$spacing-4;
+  border-radius: tokens.$radius-md;
+  border: 1px solid tokens.$color-surface-lighter;
+
+  &__dot {
+    width: tokens.$status-dot-size;
+    height: tokens.$status-dot-size;
+    border-radius: tokens.$radius-full;
+    flex-shrink: 0;
+  }
+
+  &__label {
+    font-family: tokens.$font-family-body;
+    font-size: tokens.$font-size-body-medium;
+    font-weight: tokens.$font-weight-medium;
+    color: tokens.$color-on-surface-variant;
+  }
+
+  &__value {
+    margin-left: auto;
+    font-family: tokens.$font-family-mono;
+    font-size: tokens.$font-size-body-medium;
+    font-weight: tokens.$font-weight-bold;
+    letter-spacing: tokens.$letter-spacing-mono;
+  }
+
+  &--healthy {
+    .health-indicator__dot {
+      background-color: tokens.$status-active;
+      animation: pulse-active tokens.$duration-standard tokens.$easing-standard infinite;
+    }
+    .health-indicator__value { color: tokens.$status-active; }
+  }
+
+  &--degraded {
+    .health-indicator__dot {
+      background-color: tokens.$status-error;
+      animation: pulse-error tokens.$duration-fast tokens.$easing-standard infinite;
+    }
+    .health-indicator__value { color: tokens.$status-error; }
+  }
+
+  &--unknown {
+    .health-indicator__dot {
+      background-color: tokens.$status-offline;
+    }
+    .health-indicator__value { color: tokens.$status-offline; }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Pulse animations (from the design system)
+// ---------------------------------------------------------------------------
+@keyframes pulse-active {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(0.85); }
+}
+
+@keyframes pulse-thinking {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.9); }
+}
+
+@keyframes pulse-error {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.7; transform: scale(0.8); }
+}
+
+// ---------------------------------------------------------------------------
+// Responsive: stack on compact screens
+// ---------------------------------------------------------------------------
+@media (max-width: tokens.$breakpoint-compact) {
+  .summary-breakdown {
+    grid-template-columns: 1fr;
+  }
+}

frontend/src/app/components/dashboard-summary/dashboard-summary.component.ts

@@ -0,0 +1,91 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { AgentStatusService } from '../../services/agent-status.service';
+import { AgentStatus } from '../../models/agent.model';
+
+/**
+ * Dashboard Summary Component.
+ * Displays total active agents, status breakdown (Active, Idle, Thinking, Error),
+ * and a system health indicator.
+ *
+ * Binds to AgentStatusService.agents signal — no hardcoded values.
+ * Uses design tokens from CUB-21 (styles/_tokens.scss, app/design/tokens.ts).
+ */
+@Component({
+  selector: 'app-dashboard-summary',
+  standalone: true,
+  imports: [],
+  templateUrl: './dashboard-summary.component.html',
+  styleUrl: './dashboard-summary.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DashboardSummaryComponent {
+  private readonly agentStatusService = inject(AgentStatusService);
+
+  /** All agents from the reactive signal */
+  readonly agents = this.agentStatusService.agents;
+
+  /** Total number of agents */
+  readonly totalAgents = computed(() => this.agents().length);
+
+  /** Count of agents per status */
+  readonly statusCounts = computed(() => {
+    const agents = this.agents();
+    const counts: Record<AgentStatus, number> = {
+      active: 0,
+      idle: 0,
+      thinking: 0,
+      error: 0,
+      offline: 0,
+    };
+    for (const agent of agents) {
+      counts[agent.status]++;
+    }
+    return counts;
+  });
+
+  /** Status items for template iteration */
+  readonly statusItems = computed(() => {
+    const counts = this.statusCounts();
+    const total = this.totalAgents();
+    return [
+      { status: 'active' as AgentStatus, count: counts.active, label: 'Active' },
+      { status: 'idle' as AgentStatus, count: counts.idle, label: 'Idle' },
+      { status: 'thinking' as AgentStatus, count: counts.thinking, label: 'Thinking' },
+      { status: 'error' as AgentStatus, count: counts.error, label: 'Error' },
+    ] as const;
+  });
+
+  /**
+   * System health indicator:
+   * - 'healthy'  → no errors, at least one active agent
+   * - 'degraded' → has errors OR no active agents but some agents exist
+   * - 'unknown'  → no agents registered
+   */
+  readonly systemHealth = computed((): 'healthy' | 'degraded' | 'unknown' => {
+    const agents = this.agents();
+    if (agents.length === 0) return 'unknown';
+    const counts = this.statusCounts();
+    if (counts.error > 0) return 'degraded';
+    if (counts.active > 0) return 'healthy';
+    return 'degraded';
+  });
+
+  readonly healthLabel = computed(() => {
+    const health = this.systemHealth();
+    switch (health) {
+      case 'healthy': return 'Healthy';
+      case 'degraded': return 'Degraded';
+      case 'unknown': return 'Unknown';
+    }
+  });
+
+  /** Get the CSS class for a given status */
+  statusClass(status: AgentStatus): string {
+    return `status-item--${status}`;
+  }
+
+  /** Get the CSS class for system health */
+  healthClass(): string {
+    return `health-indicator--${this.systemHealth()}`;
+  }
+}

frontend/src/app/components/dashboard-summary/index.ts

@@ -0,0 +1 @@
+export { DashboardSummaryComponent } from './dashboard-summary.component';

frontend/src/app/components/index.ts

@@ -2,4 +2,5 @@ export * from './quick-jump-button/quick-jump-button.component';
 export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
 export { QuickJumpDrawerComponent } from './quick-jump-drawer/index';
 export { AgentSessionDrawerComponent } from './agent-session-drawer/index';
-export type { SessionLogLine, SessionMessage } from './agent-session-drawer/index';
+export type { SessionLogLine, SessionMessage } from './agent-session-drawer/index';
+export { DashboardSummaryComponent } from './dashboard-summary/index';

frontend/src/app/design/tokens.ts

@@ -94,92 +94,6 @@ export const CcStatusColors = {
   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
 // ---------------------------------------------------------------------------
@@ -349,6 +263,9 @@ export const CcTokens = {
 // ---------------------------------------------------------------------------
 // CSS Custom Property Names
 // ---------------------------------------------------------------------------
+// Use these constants when setting styles programmatically via Renderer2
+// or ElementRef.style, e.g.: el.style.setProperty(CcCssProps.colorPrimary, '#fff')
+// ---------------------------------------------------------------------------
 export const CcCssProps = {
   // Color
   colorPrimary:      '--cc-color-primary',

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

@@ -12,7 +12,6 @@
   gap: 16px;
   min-height: 400px;
   overflow-x: hidden;
-  padding: var(--cc-section-padding);
 }
 
 .hub-page__title {