Merge pull request 'CUB-126: Update Control Center deployment for Go + React' (#40) from agent/pip/CUB-126-deployment-go-react into dev

- Updated docker-compose.yml for Go + React + PostgreSQL
- Go backend multi-stage Dockerfile (already existed)
- React frontend multi-stage Dockerfile with nginx SPA config (already existed)
- Kiosk start script and systemd unit
- Deployment README
- .env.example for environment variables

.env.example

@@ -0,0 +1,45 @@
+# Control Center - Environment Variables
+# ======================================
+
+# ── Backend Variables ───────────────────────────────────────────────────
+# Server configuration
+PORT=8080
+CORS_ORIGIN=http://localhost:3000
+LOG_LEVEL=info
+ENVIRONMENT=development
+
+# Database connection (PostgreSQL DSN)
+# Format: postgresql://user:password@host:port/database?sslmode=disable
+DATABASE_URL=postgresql://controlcenter:controlcenter@localhost:5432/controlcenter?sslmode=disable
+
+# Gateway (OpenClaw) connection
+# URL to the OpenClaw gateway API for polling agent states
+GATEWAY_URL=http://localhost:18789/api/agents
+# Polling interval for agent state updates
+GATEWAY_POLL_INTERVAL=5s
+
+# ── Frontend Variables (via Vite) ───────────────────────────────────────
+# The Vite config exposes these as import.meta.env.VITE_*
+# Set via environment variable when building: VITE_API_URL
+# VITE_API_URL=http://localhost:8080
+
+# ── Docker Compose Specific ─────────────────────────────────────────────
+# When using docker-compose, these are set in the services section
+# See docker-compose.yml for service-specific environment variables
+
+# ── Database Configuration ─────────────────────────────────────────────
+# Set in the db service environment section of docker-compose.yml
+# POSTGRES_USER=controlcenter
+# POSTGRES_PASSWORD=controlcenter
+# POSTGRES_DB=controlcenter
+
+# ── Development Notes ───────────────────────────────────────────────────
+# For local development without Docker:
+# 1. Start PostgreSQL locally
+# 2. Run: go run ./cmd/server/main.go
+# 3. Run: npm run dev in frontend/
+#
+# For Docker deployment:
+# 1. Copy .env.example to .env (backend only)
+# 2. Run: docker compose up -d
+# 3. Access frontend at http://localhost:3000

README-deployment.md

@@ -0,0 +1,268 @@
+# Control Center Deployment Guide
+
+This document covers the Docker Compose deployment and kiosk configuration for the Control Center Go + React application.
+
+## Quick Start
+
+```bash
+# Start all services (backend, frontend, database)
+docker compose up -d
+
+# View logs
+docker compose logs -f
+
+# Stop all services
+docker compose down
+
+# Stop and remove volumes (database data)
+docker compose down -v
+```
+
+## Architecture
+
+```
+┌─────────────────┐
+│   Frontend      │  Port 3000 (host) → 80 (container)
+│   React + nginx │  Serves SPA, proxies /api/ to backend
+└────────┬────────┘
+         │
+         │ HTTP
+         │
+┌────────▼────────┐
+│   Backend       │  Port 8080 (host) → 8080 (container)
+│   Go HTTP API   │  PostgreSQL-backed REST API
+└────────┬────────┘
+         │
+         │ PostgreSQL
+         │
+┌────────▼────────┐
+│   PostgreSQL    │  Port 5432 (internal only)
+│   Database      │  Persistent volume at /var/lib/postgresql/data
+└─────────────────┘
+```
+
+## Services
+
+### Backend (`go-backend`)
+
+- **Image**: Custom `alpine:latest` with Go binary
+- **Port**: 8080
+- **Build**: Multi-stage from `go-backend/Dockerfile`
+- **Environment Variables**:
+  - `PORT` (default: 8080)
+  - `DATABASE_URL` (PostgreSQL DSN)
+  - `CORS_ORIGIN` (default: `*`)
+  - `LOG_LEVEL` (default: `info`)
+  - `ENVIRONMENT` (default: `development`)
+  - `GATEWAY_URL` (OpenClaw gateway endpoint)
+
+### Frontend (`frontend`)
+
+- **Image**: `nginx:1.27-alpine`
+- **Port**: 80 (internal) → 3000 (host)
+- **Build**: Multi-stage from `frontend/Dockerfile`
+  - Node 22 for build
+  - Nginx 1.27 for serving
+- **Config**: Custom nginx config in `frontend/nginx.conf`
+- **Environment Variables**:
+  - `VITE_API_URL` (passed at build time via Vite config)
+
+### Database (`db`)
+
+- **Image**: `postgres:16-alpine`
+- **Port**: 5432 (internal only)
+- **Volume**: `postgres-data:/var/lib/postgresql/data`
+- **Environment Variables**:
+  - `POSTGRES_USER` (default: `controlcenter`)
+  - `POSTGRES_PASSWORD` (default: `controlcenter`)
+  - `POSTGRES_DB` (default: `controlcenter`)
+
+## Kiosk Mode
+
+For dedicated display installations (e.g., control center dashboard), Chromium can run in kiosk mode.
+
+### Installation
+
+1. **Install the systemd service** (on Debian/Ubuntu with systemd):
+
+```bash
+sudo cp kiosk/control-center-kiosk.service /etc/systemd/system/
+sudo systemctl daemon-reload
+```
+
+2. **Enable auto-start**:
+
+```bash
+sudo systemctl enable control-center-kiosk
+```
+
+3. **Start the service**:
+
+```bash
+sudo systemctl start control-center-kiosk
+```
+
+4. **Check status and logs**:
+
+```bash
+sudo systemctl status control-center-kiosk
+sudo journalctl -u control-center-kiosk -f
+```
+
+### Manual Launch
+
+```bash
+# From project root
+./kiosk/start-kiosk.sh http://localhost:3000
+```
+
+### Uninstall
+
+```bash
+# Stop and disable service
+sudo systemctl stop control-center-kiosk
+sudo systemctl disable control-center-kiosk
+sudo rm /etc/systemd/system/control-center-kiosk.service
+sudo systemctl daemon-reload
+```
+
+### Kiosk Requirements
+
+- **Browser**: `chromium-browser` (install via `apt-get install chromium`)
+- **Display**: X11 session with `DISPLAY=:0`
+- **User**: Must run as a user with X11 access (typically `overseer`)
+- **Permissions**: Read access to the project directory
+
+## Environment Variables Reference
+
+### Backend (`go-backend/.env`)
+
+```bash
+PORT=8080
+DATABASE_URL=postgresql://controlcenter:controlcenter@localhost:5432/controlcenter?sslmode=disable
+CORS_ORIGIN=*
+LOG_LEVEL=info
+ENVIRONMENT=development
+GATEWAY_URL=http://localhost:18789/api/agents
+GATEWAY_POLL_INTERVAL=5s
+```
+
+### Frontend (build-time)
+
+```bash
+VITE_API_URL=http://localhost:8080
+```
+
+### Docker Compose
+
+Set via `services.<name>.environment` in `docker-compose.yml`:
+
+```yaml
+services:
+  backend:
+    environment:
+      - DATABASE_URL=...
+  frontend:
+    environment:
+      - VITE_API_URL=...
+  db:
+    environment:
+      - POSTGRES_USER=...
+      - POSTGRES_PASSWORD=...
+      - POSTGRES_DB=...
+```
+
+## Development
+
+### Local Development (non-Docker)
+
+```bash
+# Backend
+cd go-backend
+go run ./cmd/server/main.go
+
+# Frontend
+cd frontend
+npm install
+npm run dev
+```
+
+### Database Migrations
+
+```bash
+# If using pgx/migrate or similar
+# The database is created automatically on first connection if it doesn't exist
+```
+
+## Troubleshooting
+
+### Backend won't connect to database
+
+```bash
+# Check database container status
+docker compose ps
+
+# View database logs
+docker compose logs db
+
+# Test database connectivity from backend
+docker compose exec backend ping db
+```
+
+### Frontend can't reach backend
+
+```bash
+# Check network connectivity
+docker compose exec frontend ping backend
+
+# Verify backend is running
+docker compose logs backend
+```
+
+### Kiosk browser won't start
+
+```bash
+# Check Chromium installation
+which chromium-browser
+
+# Check X11 forwarding
+echo $DISPLAY
+
+# Manual launch for debugging
+./kiosk/start-kiosk.sh http://localhost:3000
+```
+
+### Port conflicts
+
+If ports 8080, 3000, or 5432 are already in use, modify `docker-compose.yml`:
+
+```yaml
+services:
+  backend:
+    ports:
+      - "8081:8080"  # Change host port
+  frontend:
+    ports:
+      - "3001:80"    # Change host port
+```
+
+## Production Considerations
+
+1. **HTTPS**: Add a reverse proxy (nginx/Traefik) for SSL termination
+2. **Database security**: Use strong passwords, enable SSL
+3. **CORS**: Restrict `CORS_ORIGIN` to production domain
+4. **Logs**: Configure log aggregation (e.g., ELK, Loki)
+5. **Backups**: Regular PostgreSQL volume backups
+6. **Monitoring**: Add health checks and alerting
+
+## Files
+
+| File/Directory | Purpose |
+|----------------|---------|
+| `docker-compose.yml` | Service definitions and configuration |
+| `.env.example` | Environment variable template |
+| `go-backend/Dockerfile` | Backend build definition |
+| `frontend/Dockerfile` | Frontend build definition |
+| `frontend/nginx.conf` | Nginx config for SPA routing |
+| `kiosk/start-kiosk.sh` | Kiosk browser startup script |
+| `kiosk/control-center-kiosk.service` | Systemd unit for auto-start |

backend/internal/models/models.go

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

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

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

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

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

docker-compose.yml

@@ -0,0 +1,72 @@
+# Control Center - Go + React + PostgreSQL Deployment
+# ============================================================
+
+services:
+  # ── Backend Service (Go) ───────────────────────────────────────────────
+  backend:
+    build:
+      context: ./go-backend
+      dockerfile: Dockerfile
+    ports:
+      - "8080:8080"
+    environment:
+      - DATABASE_URL=postgresql://controlcenter:controlcenter@db:5432/controlcenter?sslmode=disable
+      - CORS_ORIGIN=http://localhost:3000
+      - LOG_LEVEL=info
+      - ENVIRONMENT=production
+      - PORT=8080
+      - GATEWAY_URL=http://host.docker.internal:18789/api/agents
+    depends_on:
+      db:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:8080/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+    networks:
+      - control-center-network
+    restart: unless-stopped
+
+  # ── Frontend Service (React) ───────────────────────────────────────────
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "3000:80"
+    depends_on:
+      - backend
+    environment:
+      - VITE_API_URL=http://localhost:8080
+    networks:
+      - control-center-network
+    restart: unless-stopped
+
+  # ── Database Service (PostgreSQL 16) ───────────────────────────────────
+  db:
+    image: postgres:16-alpine
+    container_name: control-center-db
+    environment:
+      - POSTGRES_USER=controlcenter
+      - POSTGRES_PASSWORD=controlcenter
+      - POSTGRES_DB=controlcenter
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U controlcenter -d controlcenter"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 10s
+    networks:
+      - control-center-network
+    restart: unless-stopped
+
+networks:
+  control-center-network:
+    driver: bridge
+
+volumes:
+  postgres-data:

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/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/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/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.scss

@@ -6,23 +6,21 @@
 //   Expanded (≥1024px): 3+ column auto-fill grid
 // ============================================================================
 
-@use '../../../styles/tokens' as tokens;
-
 .hub-page {
   display: flex;
   flex-direction: column;
-  gap: tokens.$spacing-4;
+  gap: 16px;
   min-height: 400px;
   overflow-x: hidden;
-  padding: tokens.$cc-section-padding;
+  padding: var(--cc-section-padding);
 }
 
 .hub-page__title {
   grid-column: 1 / -1;
-  font-size: tokens.$font-size-headline-small;
-  font-weight: tokens.$font-weight-bold;
+  font-size: 24px;
+  font-weight: 600;
   color: var(--cc-on-surface);
-  margin: 0 0 tokens.$spacing-2;
+  margin: 0 0 8px;
 }
 
 // ---------------------------------------------------------------------------
@@ -30,8 +28,8 @@
 // ---------------------------------------------------------------------------
 .hub-page__filters {
   display: flex;
-  gap: tokens.$spacing-2;
-  padding: tokens.$spacing-1 0;
+  gap: 8px;
+  padding: 4px 0;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none; // Firefox
@@ -49,17 +47,15 @@
   min-width: 48px; // Touch target
   padding: 6px 16px;
   border: 1px solid var(--cc-outline);
-  border-radius: tokens.$radius-full;
+  border-radius: 20px;
   background-color: transparent;
   color: var(--cc-on-surface-variant);
-  font-size: tokens.$font-size-label-medium;
-  font-weight: tokens.$font-weight-medium;
-  letter-spacing: tokens.$letter-spacing-wide;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
   cursor: pointer;
   white-space: nowrap;
-  transition: background-color tokens.$duration-short tokens.$easing-standard,
-              color tokens.$duration-short tokens.$easing-standard,
-              border-color tokens.$duration-short tokens.$easing-standard;
+  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
   flex-shrink: 0; // Prevent shrinking in scroll container
 
   &:hover {
@@ -68,8 +64,8 @@
   }
 
   &:focus-visible {
-    outline: tokens.$focus-ring-width tokens.$focus-ring-style var(--status-active);
-    outline-offset: tokens.$focus-ring-offset;
+    outline: 2px solid var(--status-active);
+    outline-offset: 2px;
   }
 
   &--active {
@@ -85,7 +81,7 @@
 .hub-page__grid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: tokens.$cc-card-gap;
+  gap: var(--cc-card-gap);
 }
 
 // ---------------------------------------------------------------------------
@@ -96,30 +92,31 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 48px tokens.$spacing-6;
+  padding: 48px 24px;
   color: var(--cc-on-surface-variant);
-  font-size: tokens.$font-size-body-large;
+  font-size: 16px;
   text-align: center;
 }
 
 // ---------------------------------------------------------------------------
 // Compact (0–599px): Single-column cards
 // ---------------------------------------------------------------------------
-@media (max-width: tokens.$cc-breakpoint-mobile) {
+@media (max-width: 599px) {
   .hub-page {
     padding: 0;
   }
 
   .hub-page__grid {
     grid-template-columns: 1fr;
-    gap: tokens.$spacing-3;
+    gap: 12px;
   }
 
   .hub-page__filters {
-    padding: tokens.$spacing-1 0 tokens.$spacing-2;
-    margin: 0 (0 - tokens.$spacing-2);
-    padding-left: tokens.$spacing-2;
-    padding-right: tokens.$spacing-2;
+    padding: 4px 0 8px;
+    // Ensure horizontal scroll on mobile
+    margin: 0 -8px;
+    padding-left: 8px;
+    padding-right: 8px;
   }
 }
 
@@ -129,16 +126,16 @@
 @media (min-width: 600px) and (max-width: 1023px) {
   .hub-page__grid {
     grid-template-columns: repeat(2, 1fr);
-    gap: tokens.$cc-card-gap;
+    gap: var(--cc-card-gap);
   }
 }
 
 // ---------------------------------------------------------------------------
 // Expanded (≥1024px): 3+ column auto-fill grid
 // ---------------------------------------------------------------------------
-@media (min-width: tokens.$cc-breakpoint-desktop) {
+@media (min-width: 1024px) {
   .hub-page__grid {
-    grid-template-columns: repeat(auto-fill, minmax(tokens.$cc-card-min-width, 1fr));
-    gap: tokens.$cc-card-gap;
+    grid-template-columns: repeat(auto-fill, minmax(var(--cc-card-min-width), 1fr));
+    gap: var(--cc-card-gap);
   }
 }

frontend-legacy/src/styles.scss

@@ -54,6 +54,67 @@ html {
 // ---------------------------------------------------------------------------
 @include css-props.emit-custom-properties;
 
+// ---------------------------------------------------------------------------
+// Per spec Section 5.1 "Status Colors (Semantic — outside M3 tonal system)"
+// These are NOT part of the M3 tonal palette; they are semantic overrides.
+// ---------------------------------------------------------------------------
+:root {
+  // --- Tactical Dark Mode color palette (CUB-47) ---
+  --color-surface: #0F172A;
+  --color-surface-light: #1E293B;
+  --color-primary: #38BDF8;
+  --color-secondary: #2DD4BF;
+  --color-accent: #A78BFA;
+  --color-danger: #F87171;
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #94A3B8;
+  --color-border: #334155;
+
+  // --- Status colors ---
+  --status-active: #38BDF8;
+  --status-idle: #2DD4BF;
+  --status-thinking: #A78BFA;
+  --status-error: #F87171;
+  --status-offline: #64748B;
+
+  // --- Status background tints (12% opacity) ---
+  --status-active-bg: rgba(56, 189, 248, 0.12);
+  --status-idle-bg: rgba(45, 212, 191, 0.12);
+  --status-thinking-bg: rgba(167, 139, 250, 0.12);
+  --status-error-bg: rgba(248, 113, 113, 0.12);
+
+  // --- Surface overrides (tactical dark palette) ---
+  --cc-background: #0D0F12;
+  --cc-surface: #13161A;
+  --cc-surface-container: #1C2027;
+  --cc-surface-container-high: #252B33;
+  --cc-on-surface: #E2E8F0;
+  --cc-on-surface-variant: #8A9BB0;
+  --cc-outline: #2D3748;
+
+  // --- Mono font stack ---
+  --cc-font-mono: 'Roboto Mono', 'Cascadia Code', 'Fira Code', monospace;
+
+  // --- Layout constants ---
+  --cc-nav-rail-collapsed-width: 72px;
+  --cc-nav-rail-expanded-width: 256px;
+  --cc-header-height: 64px;
+  --cc-header-height-compact: 56px;
+  --cc-bottom-nav-height: 80px;
+  --cc-card-border-radius: 16px;
+  --cc-card-min-width: 280px;
+  --cc-card-gap: 16px;
+  --cc-card-padding: 20px;
+  --cc-section-padding: 24px;
+  --cc-section-padding-compact: 16px;
+  --cc-spacing-unit: 8px;
+
+  // --- Responsive breakpoints (CUB-27) ---
+  --cc-breakpoint-compact: 599px;   // 0-599px: phone / compact
+  --cc-breakpoint-medium: 600px;   // 600-1023px: tablet / medium
+  --cc-breakpoint-expanded: 1024px; // ≥1024px: desktop/kiosk / expanded
+}
+
 // ---------------------------------------------------------------------------
 // Global Body Styles
 // ---------------------------------------------------------------------------

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

@@ -1,6 +1,6 @@
 # ============================================================
 # Control Center Frontend — Multi-stage Docker Build
-# Angular 21 + nginx for static serving + API proxy
+# React 19 + Vite + nginx for static serving + API proxy
 # ============================================================
 
 # --- Build Stage ---
@@ -25,8 +25,8 @@ RUN rm /etc/nginx/conf.d/default.conf
 # Copy custom nginx config
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
-# Copy built Angular app from builder stage
-COPY --from=builder /app/dist/frontend/browser /usr/share/nginx/html
+# Copy built React app from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
 
 # Expose HTTP port
 EXPOSE 80
@@ -35,4 +35,4 @@ EXPOSE 80
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
   CMD wget -qO- http://localhost/ || exit 1
 
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

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.