docs: add comprehensive project context file (CONTEXT.md) for agent reference

Merge pull request 'CUB-200 : Implement WebSocket Gateway Client' (!42 ) from agent/dex/CUB-200-ws-gateway-client into dev
Reviewed-on: #42
2026-05-21 13:29:24 -04:00 · 2026-05-21 06:54:55 -04:00 · 2026-05-20 21:52:39 +00:00 · 2026-05-20 21:42:31 +00:00 · 2026-05-20 21:26:17 +00:00 · 2026-05-20 13:14:29 -04:00
179 changed files with 21112 additions and 7205 deletions
@@ -0,0 +1,50 @@
 # 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
 # WebSocket gateway config (primary path)
 WS_GATEWAY_URL=ws://host.docker.internal:18789/
 # Gateway auth token — same as OPENCLAW_GATEWAY_TOKEN (set in environment)
 GATEWAY_TOKEN=
 # REST poller config (fallback, only used if WS fails to connect)
 GATEWAY_URL=http://host.docker.internal:18789/api/agents
 # Polling interval for agent state updates (fallback only)
 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
@@ -0,0 +1,126 @@
 name: Deploy (Dev)
 on:
  repository_dispatch:
    types:
      - dev-build-success
  workflow_dispatch:
 env:
  BINARY_NAME: server
  DEV_HOST: ${{ secrets.DEV_HOST }}
  DEV_USER: ${{ secrets.DEV_USER }}
  DEPLOY_BINARY_PATH: /opt/control-center/server
  DEPLOY_FRONTEND_PATH: /usr/share/nginx/html
  SERVICE_NAME: control-center-server
  FRONTEND_SERVICE: nginx
 jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Download Go binary
        uses: actions/download-artifact@v4
        with:
          name: go-backend-binary
      - name: Download frontend dist
        uses: actions/download-artifact@v4
        with:
          name: frontend-dist
          path: dist
      - name: Make binary executable
        run: chmod +x ${{ env.BINARY_NAME }}
      - name: Generate deploy script
        run: |
          cat > deploy.sh <<'SCRIPT'
          #!/usr/bin/env bash
          set -euo pipefail
          BINARY="${1}"
          FRONTEND_DIST="${2:-dist}"
          BINARY_PATH="${3:-/opt/control-center/server}"
          FRONTEND_PATH="${4:-/usr/share/nginx/html}"
          BINARY_SERVICE="${5:-control-center-server}"
          FRONTEND_SERVICE="${6:-nginx}"
          TIMESTAMP=$(date +%Y%m%d%H%M%S)
          BACKUP="${BINARY_PATH}.${TIMESTAMP}.bak"
          echo "=== deploy backend ==="
          if [ -f "$BINARY_PATH" ]; then
            echo "backing up current binary"
            cp "$BINARY_PATH" "$BACKUP"
          fi
          echo "installing new binary"
          cp "$BINARY" "$BINARY_PATH"
          chmod +x "$BINARY_PATH"
          echo "restarting service"
          systemctl reload-or-restart "$BINARY_SERVICE" || systemctl restart "$BINARY_SERVICE"
          sleep 3
          if ! systemctl is-active --quiet "$BINARY_SERVICE"; then
            echo "FAILED: $BINARY_SERVICE did not start — rolling back"
            if [ -f "$BACKUP" ]; then
              cp "$BACKUP" "$BINARY_PATH"
              systemctl restart "$BINARY_SERVICE"
            fi
            exit 1
          fi
          echo "backend deploy ok — keeping last 3 backups"
          ls -t "${BINARY_PATH}."*.bak 2>/dev/null | tail -n +4 | xargs -r rm -f
          echo "=== deploy frontend ==="
          if [ -d "$FRONTEND_DIST" ] && [ -n "$(ls -A "$FRONTEND_DIST" 2>/dev/null)" ]; then
            rsync -a --delete "$FRONTEND_DIST/" "$FRONTEND_PATH/"
            systemctl reload "$FRONTEND_SERVICE" 2>/dev/null ||:
            echo "frontend deploy ok"
          fi
          echo "=== deploy complete ==="
          SCRIPT
          chmod +x deploy.sh
      - name: Copy artifacts to dev server
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ env.DEV_HOST }}
          username: ${{ env.DEV_USER }}
          key: ${{ secrets.DEV_SSH_KEY }}
          source: "${{ env.BINARY_NAME }},deploy.sh,dist"
          target: "/tmp/control-center-deploy"
      - name: Execute deploy on dev server
        uses: appleboy/ssh-action@v1
        with:
          host: ${{ env.DEV_HOST }}
          username: ${{ env.DEV_USER }}
          key: ${{ secrets.DEV_SSH_KEY }}
          script: |
            set -euo pipefail
            cd /tmp/control-center-deploy
            sudo ./deploy.sh \
              "${{ env.BINARY_NAME }}" \
              "dist" \
              "${{ env.DEPLOY_BINARY_PATH }}" \
              "${{ env.DEPLOY_FRONTEND_PATH }}" \
              "${{ env.SERVICE_NAME }}" \
              "${{ env.FRONTEND_SERVICE }}"
            rm -rf /tmp/control-center-deploy
      - name: Notify on failure
        if: failure()
        uses: appleboy/ssh-action@v1
        with:
          host: ${{ env.DEV_HOST }}
          username: ${{ env.DEV_USER }}
          key: ${{ secrets.DEV_SSH_KEY }}
          script: |
            echo "deploy failed — commit ${{ github.sha }}" > /tmp/control-center-deploy-failure.log
@@ -1,4 +1,4 @@
-name: Dev Build
+name: Dev Build & Deploy
 on:
  pull_request:
@@ -6,39 +6,82 @@ on:
  push:
    branches: [dev]
 env:
  GO_VERSION: "1.23"
  NODE_VERSION: "22"
  REGISTRY: code.cubecraftcreations.com
  BACKEND_IMAGE: ${{ gitea.repository }}/backend
  FRONTEND_IMAGE: ${{ gitea.repository }}/frontend
 jobs:
-  build-test:
+  test-and-build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
-      - name: Setup .NET
+      - name: Install Go
-        uses: actions/setup-dotnet@v4
+        run: |
-        with:
+          curl -fsSL "https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz" | sudo tar -C /usr/local -xz
-          dotnet-version: '9.0.x'
+          echo "/usr/local/go/bin" >> $GITHUB_PATH
-      - name: Restore backend
+      - name: Install Node.js
-        run: dotnet restore
+        run: |
-        working-directory: ./backend
+          curl -fsSL "https://nodejs.org/dist/v${NODE_VERSION}/node-v${NODE_VERSION}-linux-x64.tar.xz" | sudo tar -C /usr/local --strip-components=1 -xJ
          echo "/usr/local/bin" >> $GITHUB_PATH
      - name: Run backend tests
        run: go test ./...
        working-directory: ./go-backend
      - name: Build backend
-        run: dotnet build --no-restore --configuration Release
+        run: go build -ldflags="-w -s" -o /tmp/server ./cmd/server
-        working-directory: ./backend
+        working-directory: ./go-backend
      - name: Test backend
        run: dotnet test --no-build --configuration Release
        working-directory: ./backend
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "24"
      - name: Install frontend deps
        run: npm ci
        working-directory: ./frontend
      - name: Lint frontend
        run: npm run lint
        working-directory: ./frontend
      - name: Build frontend
        run: npm run build
        working-directory: ./frontend
  docker-build-push:
    needs: test-and-build
    if: gitea.event_name == 'push'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Login to Gitea Container Registry
        uses: docker/login-action@v3
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ gitea.actor }}
          password: ${{ secrets.ACCESS_TOKEN }}
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      - name: Build & push backend image
        uses: docker/build-push-action@v6
        with:
          context: ./go-backend
          push: true
          tags: |
            ${{ env.REGISTRY }}/${{ env.BACKEND_IMAGE }}:dev
            ${{ env.REGISTRY }}/${{ env.BACKEND_IMAGE }}:${{ gitea.sha }}
      - name: Build & push frontend image
        uses: docker/build-push-action@v6
        with:
          context: ./frontend
          push: true
          tags: |
            ${{ env.REGISTRY }}/${{ env.FRONTEND_IMAGE }}:dev
            ${{ env.REGISTRY }}/${{ env.FRONTEND_IMAGE }}:${{ gitea.sha }}
@@ -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 |
@@ -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"`
 }
@@ -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;
@@ -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';
@@ -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;
@@ -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);
@@ -0,0 +1,11 @@
 FROM catthehacker/ubuntu:act-latest
 # Install Go 1.23
 RUN curl -sL https://go.dev/dl/go1.23.6.linux-amd64.tar.gz | tar -C /usr/local -xz
 # Install Node 22
 RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - \
    && apt-get install -y nodejs \
    && rm -rf /var/lib/apt/lists/*
 ENV PATH="/usr/local/go/bin:${PATH}"
@@ -0,0 +1,74 @@
 # 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
      - WS_GATEWAY_URL=ws://host.docker.internal:18789/
      - GATEWAY_TOKEN=${GATEWAY_TOKEN:-}
    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:
@@ -0,0 +1,304 @@
 # Control Center — Project Context
 > **Last updated:** 2026-05-21
 > **Repo:** `CubeCraft-Creations/Control-Center` | **Host:** `code.cubecraftcreations.com`
 > **Local clone:** `/mnt/ai-storage/projects/Control-Center` | **Default branch:** `dev`
 > **Discord:** `DISCORD_DEV_CONTROL_CENTER_CHANNEL_ID`
 > **Linear Epic:** [CUB-119](https://linear.app/cubecraft-creations/issue/CUB-119)
 ---
 ## Overview
 Real-time dashboard for monitoring and controlling the OpenClaw agent fleet. Displays agent statuses, active tasks, sessions, and projects. Uses SSE for live updates from the Go backend, which connects to the OpenClaw gateway via WebSocket for live agent data.
 **Completed refactor:** ASP.NET Core + Angular → Go + React is done (CUB-119 epic). All legacy code is removed from git.
 ## Tech Stack
 | Layer | Technology | Notes |
 |-------|-----------|-------|
 | Backend | Go 1.24+ | Chi router, pgx (PostgreSQL), SSE broker, gorilla/websocket |
 | Frontend | React 18 + TypeScript | Vite, Tailwind CSS, React Query, TanStack Router |
 | Database | PostgreSQL 16+ | snake_case naming, 2 migrations |
 | Real-time | SSE + WebSocket | SSE for browser, WebSocket for OpenClaw gateway |
 | Gateway Integration | WebSocket client | OpenClaw gateway `/ws` — live agent + session RPC |
 | API Client | TypeScript SDK | `api-client/` — shared models, WS client, HTTP client |
 | CI/CD | Gitea Actions | `.gitea/workflows/dev.yml`, `deploy-dev.yaml` |
 | Deployment | Docker Compose | PostgreSQL + Go backend + React/nginx |
 | Testing | Vitest, Go test | Unit + integration tests for WS client, gateway, handlers |
 | Design | Kiosk layout | Bottom nav (mobile), nav rail (desktop), quick-jump drawer |
 ## Architecture
 ```
 OpenClaw Gateway (WebSocket)
      │
      ▼
 Go Backend (Chi + pgx)
 ├── Gateway WS Client (connect, reconnect, agents.list, sessions.list RPC)
 ├── SSE Broker (fan-out: agent.status, agent.task, fleet.update)
 ├── REST API (/api/agents, /api/sessions, /api/tasks, /api/projects)
 └── Repository/Store layers → PostgreSQL
      │
      ├── SSE /api/events
      ▼
 React Frontend
 ├── SSEProvider → useRealtimeSync → React Query cache
 ├── HubPage (dashboard), LogsPage, ProjectsPage, SessionsPage, SettingsPage
 └── Layout (header bar + nav rail + bottom nav + quick-jump drawer)
 ```
 ### Key Architecture Decisions
 1. **Go replaced ASP.NET Core** — lighter runtime, faster cold-start, better concurrency for gateway polling
 2. **React replaced Angular** — lighter than Angular for dashboard/kiosk use
 3. **SSE over SignalR** — simpler server-side, unidirectional events sufficient for browser updates
 4. **WebSocket for gateway integration** — bidirectional needed for RPC (agents.list, sessions.list)
 5. **PostgreSQL** — shared with Extrudex pattern; migrations in `go-backend/migrations/`
 6. **Agent state seeded on first boot** via `gateway.SeedDemoAgents` for offline dev
 ## Project Structure
 ```
 Control-Center/
 ├── go-backend/                       # Go backend
 │   ├── cmd/server/main.go            # Entrypoint, wire deps, start gateway poller
 │   ├── Dockerfile / go.mod / go.sum
 │   ├── migrations/                   # 001_initial_schema, 002_add_indexes
 │   └── internal/
 │       ├── config/config.go          # Env vars (DATABASE_URL, GATEWAY_URL, etc.)
 │       ├── db/db.go                  # PostgreSQL pool (pgx)
 │       ├── gateway/
 │       │   ├── client.go             # GW poller → sync DB + SSE fan-out
 │       │   ├── events.go             # SSE event broker
 │       │   ├── events_test.go
 │       │   ├── sync.go               # Initial sync from gateway
 │       │   ├── sync_test.go
 │       │   ├── wsclient.go           # WebSocket client (handshake, connect, reconnect, RPC)
 │       │   └── wsclient_test.go
 │       ├── handler/
 │       │   ├── agent.go              # CRUD + history
 │       │   ├── project.go            # List projects
 │       │   ├── session.go            # List sessions
 │       │   ├── sse.go                # SSE broker: subscribe + broadcast
 │       │   ├── task.go               # List tasks
 │       │   ├── helpers.go
 │       │   ├── handler_test.go
 │       │   └── mock_repos_test.go
 │       ├── models/models.go          # Domain types
 │       ├── repository/               # DB access layer + interfaces
 │       ├── router/router.go          # Chi router: REST + SSE mount
 │       └── store/                    # Agent, Project, Session, Task stores
 ├── api-client/                       # Shared TypeScript SDK
 │   └── src/
 │       ├── models/types.ts           # Agent, Session, Task, Project, SSE event types
 │       ├── services/http-client.ts   # Axios REST client
 │       ├── utils/
 │       │   ├── config.ts             # Client config
 │       │   └── status-mapper.ts      # Agent status → display mapping
 │       └── websocket/
 │           └── ws-client.ts          # WebSocket client (handshake, Send, RPC, reconnector)
 ├── frontend/                         # React frontend
 │   ├── Dockerfile + nginx.conf
 │   ├── package.json + vite.config.ts
 │   ├── src/
 │   │   ├── App.tsx / main.tsx
 │   │   ├── components/
 │   │   │   ├── ErrorBoundary.tsx
 │   │   │   └── Layout.tsx            # Header bar + nav rail + bottom nav + quick-jump
 │   │   ├── contexts/
 │   │   │   └── SSEContext.tsx         # SSEProvider — wraps entire app
 │   │   ├── hooks/
 │   │   │   ├── useLocalStorage.ts
 │   │   │   ├── useRealtimeSync.ts     # SSE messages → React Query cache
 │   │   │   ├── useRealtimeSync.test.tsx
 │   │   │   ├── useSSE.ts              # SSE: connect, reconnect, typed events
 │   │   │   ├── useSSE.test.ts
 │   │   │   └── useTheme.tsx
 │   │   ├── pages/
 │   │   │   ├── HubPage.tsx            # Fleet dashboard (agent grid + stats)
 │   │   │   ├── LogsPage.tsx           # Agent log viewer
 │   │   │   ├── ProjectsPage.tsx       # Project list
 │   │   │   ├── SessionsPage.tsx       # Session list
 │   │   │   └── SettingsPage.tsx       # Settings + theme toggle
 │   │   ├── services/
 │   │   │   ├── api.ts                 # Axios REST client
 │   │   │   └── sse.ts                 # SSE utilities
 │   │   └── types/index.ts
 │   └── vitest.config.ts
 ├── frontend-legacy/                  # Original Angular frontend (kept for reference, not in git)
 ├── backend/                          # Original ASP.NET backend (kept for reference, not in git)
 │   ├── ControlCenter/                # ASP.NET Core project
 │   └── Api/                          # API layer
 ├── design/
 │   ├── command-hub-spec.md           # Detailed design spec
 │   └── mockups/                      # Desktop kiosk, mobile, quick-jump drawer
 ├── kiosk/
 │   ├── control-center-kiosk.service  # Systemd service
 │   └── start-kiosk.sh                # Kiosk startup script
 ├── reference/
 │   └── CONTROL_CENTER_CONTEXT.md     # Older context file (superseded by this one)
 ├── ci-image/Dockerfile               # CI build image
 ├── docker-compose.yml
 └── .env.example
 ```
 ## Database Schema (PostgreSQL)
 ### agents
 | Column | Type | Notes |
 |--------|------|-------|
 | id | UUID PK | |
 | display_name | VARCHAR(256) NOT NULL | |
 | role | VARCHAR(256) | |
 | status | VARCHAR(32) | active, idle, thinking, error |
 | current_task | VARCHAR(512) | |
 | task_progress | INTEGER DEFAULT 0 | |
 | session_key | VARCHAR(256) | |
 | channel | VARCHAR(256) | |
 | last_activity | TIMESTAMP | |
 | error_message | TEXT | |
 | created_at | TIMESTAMP | |
 | updated_at | TIMESTAMP | |
 ### sessions
 | Column | Type |
 |--------|------|
 | id | UUID PK |
 | session_key | VARCHAR(256) UNIQUE |
 | agent_id | UUID FK → agents |
 | channel | VARCHAR(256) |
 | status | VARCHAR(32) |
 | context_tokens | INTEGER |
 | total_tokens | INTEGER |
 | estimated_cost | NUMERIC |
 | model | VARCHAR(256) |
 | started_at | TIMESTAMP |
 | last_activity_at | TIMESTAMP |
 ### tasks
 | Column | Type |
 |--------|------|
 | id | UUID PK |
 | agent_id | UUID FK → agents |
 | title | VARCHAR(512) |
 | description | TEXT |
 | status | VARCHAR(32) |
 | progress | INTEGER DEFAULT 0 |
 | session_key | VARCHAR(256) |
 | created_at, updated_at | TIMESTAMP |
 ### projects
 | Column | Type |
 |--------|------|
 | id | UUID PK |
 | name | VARCHAR(256) UNIQUE |
 | description | TEXT |
 | status | VARCHAR(32) |
 | agent_ids | TEXT[] |
 | created_at, updated_at | TIMESTAMP |
 ## API Endpoints
 | Method | Endpoint | Description |
 |--------|----------|-------------|
 | GET | /health | Health check (probes DB) |
 | GET | /api/agents | List all agents |
 | POST | /api/agents | Create agent |
 | GET | /api/agents/:id | Get agent detail |
 | PUT | /api/agents/:id | Update agent |
 | DELETE | /api/agents/:id | Delete agent |
 | GET | /api/agents/:id/history | Agent status history |
 | GET | /api/sessions | List sessions |
 | GET | /api/tasks | List tasks |
 | GET | /api/projects | List projects |
 | GET | /api/events | SSE event stream |
 ## SSE Events
 | Event Type | Payload |
 |------------|---------|
 | `agent.status` | Agent status change |
 | `agent.task` | Agent current task updated |
 | `agent.progress` | Task progress percentage |
 | `fleet.update` | Full fleet snapshot |
 | `connected` | Connection established |
 ## CI/CD Pipeline
 ### dev.yml
 - Lint + typecheck: Go vet + golangci-lint + tsc
 - Test: Go test + vitest
 - Build: Go build + npm build
 - Docker: Build and push images
 - Triggers: push to dev/main
 ### deploy-dev.yaml
 - Workflow dispatch
 - SCP deploy script to dev host
 - systemctl restart with rollback
 ## Docker Compose
 | Service | Image/Build | Ports | Depends On |
 |---------|-------------|-------|------------|
 | postgres | postgres:16-alpine | 5432 | — |
 | backend | ./go-backend/Dockerfile | 8080 | postgres (healthy) |
 | frontend | ./frontend/Dockerfile | 3000 | backend (healthy) |
 ## Linear Issue Map
 | CUB | Title | Status |
 |-----|-------|--------|
 | 119 | **Epic: Control Center Refactor — .NET → Go + React** | Todo |
 | 120 | PostgreSQL schema + migrations | Done |
 | 121 | React pages wired to real API | Done |
 | 122 | React frontend scaffold | Done |
 | 123 | Gateway integration + SSE streaming | Done |
 | 124 | Go backend scaffold | Done |
 | 125 | Real-time SSE frontend | Done |
 | 126 | Docker Compose deployment | Done |
 | 127 | CRUD API endpoints | Done |
 | 200 | Live WebSocket gateway client (CUB-200-207 sub-epic) | In Review |
 | 201 | agents.list + sessions.list RPC and data mapping | In Review |
 | 202 | Real-time event subscription + SSE fan-out | In Review |
 | 203 | WS client scaffold — handshake, connect, reconnect loop | In Review |
 | 204 | Config, wiring, and graceful fallback | In Review |
 | 205 | Unit tests — gateway utility functions | In Review |
 | 206 | Unit tests — WSClient handshake, Send/RPC, frame router, reconnect | In Review |
 | 207 | Unit tests — event handlers and initial sync | In Review |
 ### Legacy Issues (Angular/ASP.NET — all Done)
 CUB-19 through CUB-63: All 27 Control Center issues completed, including minion mapping, breakroom UI, dark mode theme, agent cards, quick-jump drawer, adaptive nav, SignalR hub, and status animations.
 ## Known Limitations / Next Steps
 1. Agent detail/history views are scaffolded but not fully implemented
 2. 16-bit minion breakroom concept (CUB-59-63) was on Angular — needs React port if desired
 3. `.env` must be created from `.env.example` with a valid `GATEWAY_URL` for live agent data
 4. Docker containers not currently running — start with `docker compose up --build -d`
 ## Default Agent Assignments
 | Area | Agent | Notes |
 |------|-------|-------|
 | Backend (Go API, Gateway WS, SSE) | Dex | gitea-dex MCP |
 | Database (PostgreSQL schema) | Hex | gitea-hex MCP |
 | Frontend (React, Tailwind) | Rex | gitea-rex MCP |
 | Design (wireframes, UX) | Sketch | |
 ## Getting Started
 ```bash
 cd /mnt/ai-storage/projects/Control-Center
 git checkout dev
 git pull origin dev
 # Docker Compose (recommended)
 cp .env.example .env    # edit GATEWAY_URL first
 docker compose up --build -d
 # Manual
 cd go-backend && go run cmd/server/main.go     # → :8080
 cd frontend && npm install && npm run dev       # → :5173 (Vite proxy to :8080)
 ```
@@ -0,0 +1,33 @@
 # Dependencies
 node_modules/
 npm-debug.log*
 yarn-error.log
 # Build output (rebuilt in container)
 dist/
 out-tsc/
 # Angular cache
 .angular/cache/
 # IDE
 .idea/
 .vscode/
 *.sublime-workspace
 # OS files
 .DS_Store
 Thumbs.db
 # Git
 .git/
 .gitignore
 # Docker
 Dockerfile
 .dockerignore
 # Misc
 coverage/
 tmp/
 *.log
@@ -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
@@ -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;"]
@@ -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.
@@ -56,7 +56,8 @@
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
-                "src"
+"src",
                "src/styles"
              ]
            }
          },
@@ -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;
    }
 }
@@ -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"
  }
 }
@@ -0,0 +1 @@
 <router-outlet />
@@ -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;
@@ -2,11 +2,13 @@
 <!-- AgentCard — per spec Section 7.3                                            -->
 <!-- Integrates: Status Badge · Task Progress Bar · Quick‑Jump Button           -->
 <!-- Left‑border accent matches status color. role="article" + aria‑labels.     -->
 <!-- Enhanced: data-status attribute, elapsed time, design tokens.              -->
 <!-- ========================================================================== -->
 <article
  class="agent-card"
  role="article"
-  [attr.aria-label]="displayName + ' — ' + statusLabel()"
+  [attr.data-status]="status"
  [attr.aria-label]="(displayName || agentId) + ' — ' + statusLabel()"
  [style.border-left-color]="statusBorderColor()"
  (click)="cardClick.emit(sessionKey)"
  appLongPress
@@ -32,19 +34,20 @@
  </div>
  <!-- ── Body: current task ── -->
-  <div class="agent-card__body" *ngIf="task || status === 'error'">
+  <div class="agent-card__body" *ngIf="task || isError()">
    <p
      class="agent-card__task"
-      [attr.aria-label]="'Current task: ' + (status === 'error' ? errorMessage : task)"
+      [class.agent-card__task--error]="isError()"
      [attr.aria-label]="'Current task: ' + (isError() ? errorMessage || task : task)"
    >
-      {{ status === 'error' ? errorMessage || task : task }}
+      {{ isError() ? errorMessage || task : task }}
    </p>
  </div>
  <!-- ── Task Progress Bar ── -->
  <div
    class="agent-card__progress"
-    *ngIf="progress > 0 && status !== 'error'"
+    *ngIf="showProgress()"
    [attr.aria-label]="'Task progress: ' + progress + '%'"
  >
    <mat-progress-bar
@@ -55,6 +58,16 @@
    <span class="agent-card__progress-label text-mono">{{ progress }}%</span>
  </div>
  <!-- ── Elapsed Time ── -->
  <div
    class="agent-card__elapsed"
    *ngIf="taskElapsed && isActiveLike()"
    [attr.aria-label]="'Elapsed: ' + taskElapsed"
  >
    <mat-icon aria-hidden="true" class="agent-card__elapsed-icon">schedule</mat-icon>
    <span class="text-mono">{{ taskElapsed }}</span>
  </div>
  <!-- ── Footer: channel + last activity + quick‑jump ── -->
  <div class="agent-card__footer">
    <div class="agent-card__meta">
@@ -2,15 +2,18 @@
 // AgentCard — M3 tactical dark styling
 // Per spec Section 7.3: left‑border accent, status‑aware coloring,
 // responsive card layout with 320px min‑width.
 // Enhanced: data-status selectors, elapsed time, design token imports.
 // ============================================================================
@use 'tokens' as tokens;
 .agent-card {
  display: flex;
  flex-direction: column;
-  min-width: var(--cc-card-min-width);
+  min-width: tokens.$cc-card-min-width;
-  padding: var(--cc-card-padding);
+  padding: tokens.$cc-card-padding;
  background-color: var(--cc-surface-container);
-  border-radius: var(--cc-card-border-radius);
+  border-radius: tokens.$cc-card-border-radius;
  border-left: 4px solid var(--status-offline); // default; overridden by [style]
  border-top: 1px solid var(--cc-outline);
  border-right: 1px solid var(--cc-outline);
@@ -56,11 +59,6 @@
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cc-on-surface);
  // Per‑status background tints
  .status-dot--active + & {
    background-color: var(--status-active-bg);
  }
 }
 .agent-card__status-label {
@@ -102,8 +100,7 @@
  color: var(--cc-on-surface);
  line-height: 1.4;
-  // Error messages get distinct styling
+  &--error {
  .agent-card--error & {
    color: var(--status-error);
  }
 }
@@ -117,6 +114,7 @@
 }
 .agent-card__progress-label {
  font-family: var(--cc-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--cc-on-surface-variant);
@@ -138,6 +136,23 @@
  }
 }
 // ── Elapsed Time ──
 .agent-card__elapsed {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--cc-on-surface-variant);
  padding: 2px 0;
 }
 .agent-card__elapsed-icon {
  font-size: 14px;
  width: 14px;
  height: 14px;
  color: var(--status-thinking);
 }
 // ── Footer ──
 .agent-card__footer {
  display: flex;
@@ -161,7 +176,6 @@
  color: var(--cc-on-surface-variant);
 }
 .agent-card__channel-icon,
 .agent-card__channel .mat-icon {
  font-size: 14px;
  width: 14px;
@@ -177,7 +191,6 @@
 .agent-card__jump {
  flex-shrink: 0;
  // Match M3 text button sizing
  .mat-mdc-button {
    min-width: 36px;
    padding: 0 8px;
@@ -192,11 +205,9 @@
 }
 // ── Status‑specific background tints for badge ──
-// We use the global status-dot classes from styles.scss and pair them
+// Using data-status attribute selectors for clean styling.
 // 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);
 }
@@ -212,8 +223,22 @@
  background-color: var(--status-error-bg);
 }
 .agent-card[data-status="offline"] .agent-card__badge {
  background-color: var(--cc-surface-container-high);
 }
 // ── Active‑like pulse on card border ──
 .agent-card[data-status="active"],
 .agent-card[data-status="thinking"] {
  border-left-width: 4px;
 }
 .agent-card[data-status="error"] {
  border-left-color: var(--status-error);
 }
 // ── Responsive ──
-@media (max-width: 599px) {
+@media (max-width: tokens.$cc-breakpoint-mobile) {
  .agent-card {
    min-width: unset;
    padding: 16px;
@@ -3,8 +3,12 @@ import {
  Component,
  EventEmitter,
  Input,
  OnDestroy,
  Output,
  computed,
  effect,
  inject,
  signal,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
@@ -14,12 +18,18 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { AgentStatus } from '../../../models/agent.model';
 import { LongPressDirective } from '../../../directives/long-press.directive';
 import {
  STATUS_COLORS,
  STATUS_LABELS,
  CHANNEL_ICONS,
 } from '../../../design/tokens';
 // ============================================================================
 // AgentCard Component
 // Per spec Section 7.3: Composes Agent Status Badge, Task Progress Bar,
 // and Quick‑Jump Button into a card with left‑border status accent.
 // CUB-26: Emits cardClick and cardLongPress for drawer/modal integration.
 // Enhanced with data-status attribute, elapsed time, and design tokens.
 // ============================================================================
@Component({
@@ -38,7 +48,7 @@ import { LongPressDirective } from '../../../directives/long-press.directive';
  styleUrl: './agent-card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AgentCardComponent {
+export class AgentCardComponent implements OnDestroy {
  // --- Six required inputs per spec ---
  /** Agent status — drives badge color and left‑border accent */
@@ -73,6 +83,9 @@ export class AgentCardComponent {
  /** Error message (shown only when status is 'error') */
  @Input() errorMessage = '';
  /** Elapsed time string, e.g. "04m 12s" */
  @Input() taskElapsed = '';
  // --- CUB-26: Outputs for drawer/modal integration ---
  /** Emitted when the card is clicked — opens the session drawer. */
@@ -81,7 +94,15 @@ export class AgentCardComponent {
  /** Emitted when the card is long-pressed — bypasses drawer, opens session log directly. */
  @Output() readonly cardLongPress = new EventEmitter<string>();
-  // --- Computed values ---
+  // --- Internal state ---
  /** Timer for refreshing relative-time label */
  private _timer: ReturnType<typeof setInterval> | null = null;
  /** Internal signal to trigger relative-time recomputation */
  private readonly _tick = signal(0);
  // --- Computed values using design tokens ---
  /** Map status → CSS custom property for the left‑border accent */
  readonly statusBorderColor = computed(() => {
@@ -95,46 +116,68 @@ export class AgentCardComponent {
    return map[this.status] ?? 'var(--status-offline)';
  });
-  /** Human‑readable status label */
+  /** Human‑readable status label (from design tokens) */
-  readonly statusLabel = computed(() => {
+  readonly statusLabel = computed(() => STATUS_LABELS[this.status] ?? this.status);
    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 */
+  /** Material icon name for the channel (from design tokens) */
-  readonly channelIcon = computed(() => {
+  readonly channelIcon = computed(() => CHANNEL_ICONS[this.channel] ?? 'chat');
-    const icons: Record<string, string> = {
+
-      telegram: 'telegram',  // falls back to font icon if no SVG registered
+  /** Relative time string for lastActivity, refreshed every 30s */
-      slack: 'chat',
+  readonly lastActivityLabel = computed(() => {
-      discord: 'forum',
+    // Read tick to create dependency that forces recomputation
-      whatsapp: 'chat',
+    this._tick();
-      webchat: 'language',
+    return this._relativeTime(this.lastActivity);
      email: 'email',
    };
    return icons[this.channel] ?? 'chat';
  });
-  /** Relative time string for lastActivity */
+  /** Quick‑jump route derived from sessionKey */
-  readonly lastActivityLabel = computed(() => {
+  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
-    if (!this.lastActivity) return '';
+
  /** Whether progress bar should show */
  readonly showProgress = computed(() => this.progress > 0 && this.status !== 'error');
  /** Whether error state is active */
  readonly isError = computed(() => this.status === 'error');
  /** Whether card is in an active-like state (active or thinking) */
  readonly isActiveLike = computed(() => this.status === 'active' || this.status === 'thinking');
  constructor() {
    // Start the relative-time refresh timer
    this._startTimer();
  }
  ngOnDestroy(): void {
    this._stopTimer();
  }
  // --- Private helpers ---
  private _relativeTime(date: Date | null | undefined): string {
    if (!date) return '';
    const now = Date.now();
-    const then = this.lastActivity.getTime();
+    const then = date.getTime();
    const diffSec = Math.max(0, Math.floor((now - then) / 1000));
    if (diffSec < 60) return 'just now';
    if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
    if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
    return `${Math.floor(diffSec / 86400)}d ago`;
-  });
+  }
-
+
-  /** Quick‑jump route derived from sessionKey */
+  private _startTimer(): void {
-  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
+    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;
    }
  }
 }
@@ -1,14 +1,16 @@
 // ============================================================================
 // Adaptive Navigation — Desktop sidebar / Mobile header
-// Desktop (≥768px): 72px sidebar with full navigation items
+// Per CUB-27 spec breakpoints:
-// Mobile (<768px):  56px compact header with hamburger menu
+//   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
+// Compact (0–599px): Show mobile header, hide sidebar
-// ---------------------------------------------------------------------------
+@media (max-width: 599px) {
-@media (min-width: 768px) {
+  .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;
  }
 }
@@ -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.
+ * Per CUB-27 spec breakpoints:
- * Mobile (<768px):  56px compact header with hamburger menu.
+ *   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.
+ * The LIVE status indicator is visible in all layouts.
 * Per spec Section 3.1 (kiosk) and 3.2 (mobile).
 */
@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
  }
 }
@@ -94,6 +94,92 @@ 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
 // ---------------------------------------------------------------------------
@@ -263,9 +349,6 @@ 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',
@@ -1,7 +1,8 @@
 // ============================================================================
 // Bottom Navigation Bar — Mobile Navigation
-// Per spec Section 3.2: M3 NavigationBar pattern
+// Per CUB-27 spec breakpoints:
-// Visible only on compact breakpoint (< 600px)
+//   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;
  }
 }
@@ -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;
  }
 }
@@ -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);
  }
 }
@@ -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;
  }
 }
@@ -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
  }
 }
@@ -0,0 +1,57 @@
 <!-- ========================================================================== -->
 <!-- Hub Page — Responsive Agent Card Grid with Filter Chips                   -->
 <!-- Per CUB-27 spec breakpoints:                                               -->
 <!--   Compact  (0–599px):  Single-column cards, horizontal-scroll filter chips -->
 <!--   Medium   (600–1023px): 2-column grid                                    -->
 <!--   Expanded (≥1024px): 3+ column auto-fill grid                           -->
 <!-- CUB-26: Integrates AgentCard click/long-press with session drawer.         -->
 <!-- ========================================================================== -->
 <div class="hub-page">
  <h1 class="hub-page__title">Command Hub</h1>
  <!-- Filter Chip Group — horizontal scroll on mobile -->
  <div class="hub-page__filters" role="tablist" aria-label="Filter agents by status">
    @for (filter of filters; track filter.value) {
      <button
        class="hub-page__filter-chip"
        [class.hub-page__filter-chip--active]="activeFilter() === filter.value"
        role="tab"
        [attr.aria-selected]="activeFilter() === filter.value"
        (click)="selectFilter(filter.value)"
      >
        {{ filter.label }}
      </button>
    }
  </div>
  <!-- Agent Card Grid -->
  <div class="hub-page__grid">
    @for (agent of filteredAgents(); track agent.id) {
      <app-agent-card
        [status]="agent.status"
        [task]="agent.currentTask ?? ''"
        [progress]="agent.taskProgress ?? 0"
        [sessionKey]="agent.sessionKey"
        [channel]="agent.channel"
        [lastActivity]="agent.lastActivity"
        [agentId]="agent.id"
        [displayName]="agent.displayName"
        [role]="agent.role"
        [errorMessage]="agent.errorMessage ?? ''"
        (cardClick)="onCardClick($event)"
        (cardLongPress)="onCardLongPress($event)"
      />
    } @empty {
      <p class="hub-page__empty">No agents online</p>
    }
  </div>
 </div>
 <!-- Agent Session Drawer (CUB-26) -->
 <app-agent-session-drawer
  [isMobile]="isMobile()"
  (openSession)="onOpenSession($event)"
  (pinToDashboard)="onPinToDashboard($event)"
  (drawerClose)="onDrawerClose()"
 />
@@ -0,0 +1,141 @@
 // ============================================================================
 // Hub Page — Responsive AgentCard Grid with Filter Chips
 // Per CUB-27 spec breakpoints:
 //   Compact  (0–599px):  Single-column cards, horizontal-scroll filter chips
 //   Medium   (600–1023px): 2-column grid
 //   Expanded (≥1024px): 3+ column auto-fill grid
 // ============================================================================
 .hub-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 400px;
  overflow-x: hidden;
  padding: var(--cc-section-padding);
 }
 .hub-page__title {
  grid-column: 1 / -1;
  font-size: 24px;
  font-weight: 600;
  color: var(--cc-on-surface);
  margin: 0 0 8px;
 }
 // ---------------------------------------------------------------------------
 // Filter Chip Group
 // ---------------------------------------------------------------------------
 .hub-page__filters {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; // Firefox
  &::-webkit-scrollbar {
    display: none; // Chrome/Safari
  }
 }
 .hub-page__filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 48px; // Touch target
  padding: 6px 16px;
  border: 1px solid var(--cc-outline);
  border-radius: 20px;
  background-color: transparent;
  color: var(--cc-on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  flex-shrink: 0; // Prevent shrinking in scroll container
  &:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--cc-on-surface);
  }
  &:focus-visible {
    outline: 2px solid var(--status-active);
    outline-offset: 2px;
  }
  &--active {
    background-color: var(--status-active-bg);
    color: var(--status-active);
    border-color: var(--status-active);
  }
 }
 // ---------------------------------------------------------------------------
 // Agent Card Grid
 // ---------------------------------------------------------------------------
 .hub-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-card-gap);
 }
 // ---------------------------------------------------------------------------
 // Empty State
 // ---------------------------------------------------------------------------
 .hub-page__placeholder,
 .hub-page__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--cc-on-surface-variant);
  font-size: 16px;
  text-align: center;
 }
 // ---------------------------------------------------------------------------
 // Compact (0–599px): Single-column cards
 // ---------------------------------------------------------------------------
@media (max-width: 599px) {
  .hub-page {
    padding: 0;
  }
  .hub-page__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hub-page__filters {
    padding: 4px 0 8px;
    // Ensure horizontal scroll on mobile
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
  }
 }
 // ---------------------------------------------------------------------------
 // Medium (600–1023px): 2-column grid
 // ---------------------------------------------------------------------------
@media (min-width: 600px) and (max-width: 1023px) {
  .hub-page__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cc-card-gap);
  }
 }
 // ---------------------------------------------------------------------------
 // Expanded (≥1024px): 3+ column auto-fill grid
 // ---------------------------------------------------------------------------
@media (min-width: 1024px) {
  .hub-page__grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--cc-card-min-width), 1fr));
    gap: var(--cc-card-gap);
  }
 }
@@ -1,51 +1,22 @@
-import { ChangeDetectionStrategy, Component, signal, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal, computed, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatChipsModule } from '@angular/material/chips';
 import { AgentCardComponent } from '../../command-hub/components/agent-card/agent-card.component';
 import { AgentSessionDrawerComponent } from '../../components/agent-session-drawer/index';
 import { AgentCardData } from '../../models/agent.model';
 import { AgentStatus } from '../../models/agent.model';
-// ============================================================================
+/**
-// Hub Page — Fleet status grid
+ * Filter options for the hub page agent card grid.
-// CUB-26: Integrates AgentCard click/long-press with session drawer.
+ * Per CUB-27: "Filter chip group (All, Active, Error, etc.) with horizontal scroll on mobile"
-// ============================================================================
+ */
 export type AgentFilter = 'all' | AgentStatus;
@Component({
  selector: 'app-hub-page',
  standalone: true,
-  imports: [CommonModule, AgentCardComponent, AgentSessionDrawerComponent],
+  imports: [CommonModule, MatChipsModule, AgentCardComponent, AgentSessionDrawerComponent],
-  template: `
+  templateUrl: './hub-page.component.html',
    <div class="hub-page">
      <h1 class="hub-page__title">Command Hub</h1>
      <div class="hub-page__grid">
        @for (agent of agents(); track agent.id) {
          <app-agent-card
            [status]="agent.status"
            [task]="agent.currentTask ?? ''"
            [progress]="agent.taskProgress ?? 0"
            [sessionKey]="agent.sessionKey"
            [channel]="agent.channel"
            [lastActivity]="agent.lastActivity"
            [agentId]="agent.id"
            [displayName]="agent.displayName"
            [role]="agent.role"
            [errorMessage]="agent.errorMessage ?? ''"
            (cardClick)="onCardClick($event)"
            (cardLongPress)="onCardLongPress($event)"
          />
        } @empty {
          <p class="hub-page__empty">No agents online</p>
        }
      </div>
    </div>
    <!-- Agent Session Drawer -->
    <app-agent-session-drawer
      [isMobile]="isMobile()"
      (openSession)="onOpenSession($event)"
      (pinToDashboard)="onPinToDashboard($event)"
      (drawerClose)="onDrawerClose()"
    />
  `,
  styleUrl: './hub-page.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -54,6 +25,17 @@ export class HubPageComponent {
  readonly isMobile = signal(false);
  protected readonly filters: { label: string; value: AgentFilter }[] = [
    { label: 'All', value: 'all' },
    { label: 'Active', value: 'active' },
    { label: 'Idle', value: 'idle' },
    { label: 'Thinking', value: 'thinking' },
    { label: 'Error', value: 'error' },
    { label: 'Offline', value: 'offline' },
  ];
  protected readonly activeFilter = signal<AgentFilter>('all');
  /** Stub agent data (TODO: wire to AgentStatusService / SignalR). */
  readonly agents = signal<AgentCardData[]>([
    {
@@ -73,10 +55,10 @@ export class HubPageComponent {
      displayName: 'Rex',
      role: 'Frontend Agent',
      status: 'thinking',
-      currentTask: 'Building agent session drawer',
+      currentTask: 'Building responsive layout',
      taskProgress: 40,
      taskElapsed: '02m 30s',
-      sessionKey: 'agent:rex:telegram:CUB-26:def456',
+      sessionKey: 'agent:rex:telegram:CUB-27:def456',
      channel: 'telegram',
      lastActivity: new Date(Date.now() - 30000),
    },
@@ -119,6 +101,12 @@ export class HubPageComponent {
    },
  ]);
  protected readonly filteredAgents = computed(() => {
    const filter = this.activeFilter();
    if (filter === 'all') return this.agents();
    return this.agents().filter(a => a.status === filter);
  });
  constructor() {
    // Detect mobile viewport
    if (typeof window !== 'undefined') {
@@ -128,6 +116,10 @@ export class HubPageComponent {
    }
  }
  protected selectFilter(filter: AgentFilter): void {
    this.activeFilter.set(filter);
  }
  /** Card click → open session drawer with agent details. */
  onCardClick(sessionKey: string): void {
    const agent = this.agents().find((a) => a.sessionKey === sessionKey);
@@ -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
 // ---------------------------------------------------------------------------
@@ -435,3 +435,40 @@ $min-body-font:       16px;
  min-width: $min-size;
  min-height: $min-size;
 }
 // ============================================================================
 // CUB-20 / CUB-27 CONVENIENCE ALIASES
 // ============================================================================
 // Short aliases used by agent-card, hub-page, and other components.
 // These map to the canonical M3 tokens above.
 $cc-background:            $color-surface-darkest;
 $cc-surface:               $color-surface-dark;
 $cc-surface-container:     $color-surface-medium;
 $cc-surface-container-high: $color-surface-light;
 $cc-on-surface:            $color-on-surface;
 $cc-on-surface-variant:    $color-on-surface-variant;
 $cc-outline:               $color-surface-lighter;
 $cc-font-mono:             $font-family-mono;
 $cc-font-family:           $font-family-brand;
 $cc-nav-rail-collapsed-width:  $nav-rail-collapsed-width;
 $cc-nav-rail-expanded-width:   $nav-rail-expanded-width;
 $cc-header-height:              $header-height;
 $cc-bottom-nav-height:          $bottom-nav-height;
 $cc-card-border-radius:         $card-border-radius;
 $cc-card-min-width:             $card-min-width;
 $cc-card-gap:                   $spacing-card-gap;
 $cc-card-padding:               $spacing-card-pad;
 $cc-section-padding:            $spacing-section;
 $cc-spacing-unit:               $spacing-unit;
 $cc-breakpoint-mobile:   $breakpoint-compact;
 $cc-breakpoint-tablet:   $breakpoint-medium;
 $cc-breakpoint-desktop:  $breakpoint-expanded;
 $cc-surface-darkest: $color-surface-darkest;
 $cc-surface-dark:    $color-surface-dark;
 $cc-surface-medium:  $color-surface-medium;
 $cc-surface-light:  $color-surface-light;
 $cc-surface-lighter: $color-surface-lighter;
@@ -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"
  ]
 }
@@ -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"
    }
  ]
 }
--- a/Show More
+++ b/Show More