CUB-120: design PostgreSQL schema for Control Center Go backend

Reviewed-on: #27

backend/internal/models/models.go

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

backend/migrations/001_initial_schema.down.sql

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

backend/migrations/001_initial_schema.up.sql

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

backend/migrations/002_add_indexes.down.sql

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

backend/migrations/002_add_indexes.up.sql

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

frontend/.dockerignore

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

frontend/Dockerfile

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

frontend/angular.json

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

frontend/nginx.conf

@@ -0,0 +1,54 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
+
+    # Cache static assets (Angular uses content hashes)
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Cache hashed JS/CSS bundles
+    location ~* \.(js|css)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Proxy API requests to backend
+    location /api/ {
+        proxy_pass http://backend:8080/api/;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # Proxy SignalR WebSocket connections to backend
+    location /hubs/ {
+        proxy_pass http://backend:8080/hubs/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_read_timeout 86400;
+    }
+
+    # Angular SPA — all other routes fall back to index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

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

@@ -2,12 +2,19 @@
 <!-- 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
+  [appLongPressDuration]="500"
+  (appLongPress)="cardLongPress.emit(sessionKey)"
+  tabindex="0"
 >
 
   <!-- ── Header: status badge + agent info ── -->
@@ -27,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
@@ -50,6 +58,16 @@
     <span class="agent-card__progress-label text-mono">{{ progress }}%</span>
   </div>
 
+  <!-- ── Elapsed Time ── -->
+  <div
+    class="agent-card__elapsed"
+    *ngIf="taskElapsed && isActiveLike()"
+    [attr.aria-label]="'Elapsed: ' + taskElapsed"
+  >
+    <mat-icon aria-hidden="true" class="agent-card__elapsed-icon">schedule</mat-icon>
+    <span class="text-mono">{{ taskElapsed }}</span>
+  </div>
+
   <!-- ── Footer: channel + last activity + quick‑jump ── -->
   <div class="agent-card__footer">
     <div class="agent-card__meta">

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

@@ -2,15 +2,18 @@
 // AgentCard — M3 tactical dark styling
 // Per spec Section 7.3: left‑border accent, status‑aware coloring,
 // responsive card layout with 320px min‑width.
+// Enhanced: data-status selectors, elapsed time, design token imports.
 // ============================================================================
 
+@use 'tokens' as tokens;
+
 .agent-card {
   display: flex;
   flex-direction: column;
-  min-width: var(--cc-card-min-width);
+  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);
@@ -23,6 +26,14 @@
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   }
 
+  // CUB-26: Card is now clickable for session drawer
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
   &:focus-within {
     outline: 2px solid var(--status-active);
     outline-offset: 2px;
@@ -48,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 {
@@ -94,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);
   }
 }
@@ -109,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);
@@ -130,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;
@@ -153,7 +176,6 @@
   color: var(--cc-on-surface-variant);
 }
 
-.agent-card__channel-icon,
 .agent-card__channel .mat-icon {
   font-size: 14px;
   width: 14px;
@@ -169,7 +191,6 @@
 .agent-card__jump {
   flex-shrink: 0;
 
-  // Match M3 text button sizing
   .mat-mdc-button {
     min-width: 36px;
     padding: 0 8px;
@@ -184,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);
 }
 
@@ -204,8 +223,22 @@
   background-color: var(--status-error-bg);
 }
 
+.agent-card[data-status="offline"] .agent-card__badge {
+  background-color: var(--cc-surface-container-high);
+}
+
+// ── Active‑like pulse on card border ──
+.agent-card[data-status="active"],
+.agent-card[data-status="thinking"] {
+  border-left-width: 4px;
+}
+
+.agent-card[data-status="error"] {
+  border-left-color: var(--status-error);
+}
+
 // ── Responsive ──
-@media (max-width: 599px) {
+@media (max-width: tokens.$cc-breakpoint-mobile) {
   .agent-card {
     min-width: unset;
     padding: 16px;

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

@@ -1,8 +1,14 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
+  OnDestroy,
+  Output,
   computed,
+  effect,
+  inject,
+  signal,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
@@ -11,11 +17,19 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { AgentStatus } from '../../../models/agent.model';
+import { LongPressDirective } from '../../../directives/long-press.directive';
+import {
+  STATUS_COLORS,
+  STATUS_LABELS,
+  CHANNEL_ICONS,
+} from '../../../design/tokens';
 
 // ============================================================================
 // AgentCard Component
 // Per spec Section 7.3: Composes Agent Status Badge, Task Progress Bar,
 // and Quick‑Jump Button into a card with left‑border status accent.
+// CUB-26: Emits cardClick and cardLongPress for drawer/modal integration.
+// Enhanced with data-status attribute, elapsed time, and design tokens.
 // ============================================================================
 
 @Component({
@@ -28,12 +42,13 @@ import { AgentStatus } from '../../../models/agent.model';
     MatButtonModule,
     MatProgressBarModule,
     MatTooltipModule,
+    LongPressDirective,
   ],
   templateUrl: './agent-card.component.html',
   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 */
@@ -68,7 +83,26 @@ export class AgentCardComponent {
   /** Error message (shown only when status is 'error') */
   @Input() errorMessage = '';
 
-  // --- Computed values ---
+  /** Elapsed time string, e.g. "04m 12s" */
+  @Input() taskElapsed = '';
+
+  // --- CUB-26: Outputs for drawer/modal integration ---
+
+  /** Emitted when the card is clicked — opens the session drawer. */
+  @Output() readonly cardClick = new EventEmitter<string>();
+
+  /** Emitted when the card is long-pressed — bypasses drawer, opens session log directly. */
+  @Output() readonly cardLongPress = new EventEmitter<string>();
+
+  // --- Internal state ---
+
+  /** Timer for refreshing relative-time label */
+  private _timer: ReturnType<typeof setInterval> | null = null;
+
+  /** Internal signal to trigger relative-time recomputation */
+  private readonly _tick = signal(0);
+
+  // --- Computed values using design tokens ---
 
   /** Map status → CSS custom property for the left‑border accent */
   readonly statusBorderColor = computed(() => {
@@ -82,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;
+    }
+  }
 }

frontend/src/app/components/agent-session-drawer/agent-session-drawer.component.html

@@ -0,0 +1,140 @@
+<!-- ============================================================================
+  Agent Session Drawer — CUB-26
+  Desktop: 480px side drawer slides from right with modal overlay.
+  Mobile: Bottom sheet slides up from bottom.
+  Shows: Agent name, status badge, session key, live log tail,
+          recent messages, and action buttons.
+  ============================================================================-->
+
+<!-- Backdrop overlay -->
+@if (isOpen()) {
+  <div
+    class="session-drawer-backdrop"
+    (click)="onBackdropClick()"
+    [class.session-drawer-backdrop--visible]="isOpen()"
+  ></div>
+}
+
+<!-- Drawer panel -->
+<div
+  #drawerPanel
+  class="session-drawer"
+  [class.session-drawer--open]="isOpen()"
+  [class.session-drawer--mobile]="isMobile"
+  (keydown)="onDrawerKeydown($event)"
+  role="dialog"
+  aria-label="Agent session details"
+  [attr.aria-hidden]="!isOpen()"
+>
+  <!-- Header -->
+  <div class="session-drawer__header">
+    @if (agent) {
+      <div class="session-drawer__header-identity">
+        <span class="status-dot {{ getStatusClass(agent.status) }}" [attr.aria-label]="getStatusLabel(agent.status)"></span>
+        <div class="session-drawer__header-text">
+          <h2 class="session-drawer__title">{{ agent.displayName }}</h2>
+          <span class="session-drawer__role">{{ agent.role }}</span>
+        </div>
+      </div>
+    }
+    <button
+      class="session-drawer__close-btn"
+      type="button"
+      aria-label="Close drawer"
+      (click)="close()"
+      matIconButton
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <!-- Content area -->
+  @if (agent) {
+    <div class="session-drawer__content">
+
+      <!-- Status & Session Key Section -->
+      <section class="session-drawer__section">
+        <div class="session-drawer__meta-row">
+          <span class="session-drawer__status-chip {{ getStatusChipColor(agent.status) }}">
+            {{ getStatusLabel(agent.status) }}
+          </span>
+          @if (agent.channel) {
+            <span class="session-drawer__channel-badge">
+              <mat-icon class="session-drawer__channel-icon">chat</mat-icon>
+              {{ agent.channel }}
+            </span>
+          }
+        </div>
+        <div class="session-drawer__session-key">
+          <span class="session-drawer__label">Session Key</span>
+          <code class="session-drawer__key-value">{{ agent.sessionKey }}</code>
+        </div>
+        @if (agent.currentTask) {
+          <div class="session-drawer__task-info">
+            <span class="session-drawer__label">Current Task</span>
+            <span class="session-drawer__task-text">{{ agent.currentTask }}</span>
+          </div>
+        }
+        <div class="session-drawer__last-activity">
+          <span class="session-drawer__label">Last Activity</span>
+          <span class="session-drawer__activity-time">{{ formatRelativeTime(agent.lastActivity) }}</span>
+        </div>
+      </section>
+
+      <!-- Recent Messages Section -->
+      <section class="session-drawer__section">
+        <h3 class="session-drawer__section-title">Recent Messages</h3>
+        <div class="session-drawer__messages">
+          @for (msg of recentMessages(); track msg.id) {
+            <div class="session-drawer__message session-drawer__message--{{ msg.sender }}">
+              <span class="session-drawer__message-sender">
+                {{ msg.sender === 'agent' ? agent.displayName : 'You' }}
+              </span>
+              <p class="session-drawer__message-text">{{ msg.content }}</p>
+              <span class="session-drawer__message-time">{{ formatTime(msg.timestamp) }}</span>
+            </div>
+          } @empty {
+            <p class="session-drawer__empty-state">No recent messages</p>
+          }
+        </div>
+      </section>
+
+      <!-- Live Log Tail Section -->
+      <section class="session-drawer__section">
+        <h3 class="session-drawer__section-title">Live Log</h3>
+        <div class="session-drawer__log-container">
+          @for (line of logLines(); track $index) {
+            <div class="session-drawer__log-line {{ getLogLevelClass(line.level) }}">
+              <span class="session-drawer__log-time">{{ formatTime(line.timestamp) }}</span>
+              <span class="session-drawer__log-level">{{ line.level.toUpperCase() }}</span>
+              <span class="session-drawer__log-message">{{ line.message }}</span>
+            </div>
+          } @empty {
+            <p class="session-drawer__empty-state">No log output</p>
+          }
+        </div>
+      </section>
+    </div>
+  }
+
+  <!-- Action buttons (sticky footer) -->
+  <div class="session-drawer__actions">
+    <button
+      class="session-drawer__action-btn session-drawer__action-btn--primary"
+      mat-raised-button
+      color="primary"
+      (click)="onOpenSession()"
+    >
+      <mat-icon>open_in_new</mat-icon>
+      Open Full Session
+    </button>
+    <button
+      class="session-drawer__action-btn session-drawer__action-btn--secondary"
+      mat-stroked-button
+      (click)="onPinToDashboard()"
+    >
+      <mat-icon>push_pin</mat-icon>
+      Pin to Dashboard
+    </button>
+  </div>
+</div>

frontend/src/app/components/agent-session-drawer/agent-session-drawer.component.scss

@@ -0,0 +1,500 @@
+// ============================================================================
+// Agent Session Drawer — CUB-26
+// Desktop: 480px side drawer slides from right with modal overlay.
+// Mobile: Bottom sheet slides up from bottom.
+// Uses Control Center design tokens from CUB-21.
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Backdrop
+// ---------------------------------------------------------------------------
+.session-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 998;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+
+  &--visible {
+    opacity: 1;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Drawer Panel — Desktop: Side drawer from right
+// ---------------------------------------------------------------------------
+.session-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 480px;
+  max-width: 100vw;
+  background-color: var(--cc-surface-container);
+  border-left: 1px solid var(--cc-outline);
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+
+  &--open {
+    transform: translateX(0);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Mobile: Bottom Sheet — slides up from bottom
+  // ---------------------------------------------------------------------------
+  &--mobile {
+    top: auto;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    max-width: 100vw;
+    max-height: 85vh;
+    border-left: none;
+    border-top: 1px solid var(--cc-outline);
+    border-radius: 20px 20px 0 0;
+    transform: translateY(100%);
+    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
+
+    &.session-drawer--open {
+      transform: translateY(0);
+    }
+
+    // Drag handle for mobile bottom sheet
+    &::before {
+      content: '';
+      display: block;
+      width: 32px;
+      height: 4px;
+      border-radius: 2px;
+      background: var(--cc-on-surface-variant);
+      opacity: 0.4;
+      margin: 8px auto 4px;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Header
+// ---------------------------------------------------------------------------
+.session-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid var(--cc-outline);
+  flex-shrink: 0;
+}
+
+.session-drawer__header-identity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+
+.session-drawer__header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.session-drawer__title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--cc-on-surface);
+  margin: 0;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-drawer__role {
+  font-size: 13px;
+  color: var(--cc-on-surface-variant);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-drawer__close-btn {
+  --mat-icon-button-state-layer-color: transparent;
+  color: var(--cc-on-surface-variant);
+  flex-shrink: 0;
+
+  &:hover {
+    color: var(--cc-on-surface);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Content — scrollable area
+// ---------------------------------------------------------------------------
+.session-drawer__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 24px 16px;
+}
+
+// ---------------------------------------------------------------------------
+// Sections
+// ---------------------------------------------------------------------------
+.session-drawer__section {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--cc-outline);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.session-drawer__section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--cc-on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0 0 12px;
+}
+
+// ---------------------------------------------------------------------------
+// Meta Row — Status + Channel
+// ---------------------------------------------------------------------------
+.session-drawer__meta-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.session-drawer__status-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+
+  &.status-chip--active {
+    background-color: var(--status-active-bg);
+    color: var(--status-active);
+  }
+
+  &.status-chip--idle {
+    background-color: var(--status-idle-bg);
+    color: var(--status-idle);
+  }
+
+  &.status-chip--thinking {
+    background-color: var(--status-thinking-bg);
+    color: var(--status-thinking);
+  }
+
+  &.status-chip--error {
+    background-color: var(--status-error-bg);
+    color: var(--status-error);
+  }
+
+  &.status-chip--offline {
+    background-color: rgba(100, 116, 139, 0.12);
+    color: var(--status-offline);
+  }
+}
+
+.session-drawer__channel-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 8px;
+  background: var(--cc-surface-container-high);
+  font-size: 12px;
+  color: var(--cc-on-surface-variant);
+}
+
+.session-drawer__channel-icon {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+}
+
+// ---------------------------------------------------------------------------
+// Session Key
+// ---------------------------------------------------------------------------
+.session-drawer__session-key {
+  margin-bottom: 12px;
+}
+
+.session-drawer__label {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--cc-on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 4px;
+}
+
+.session-drawer__key-value {
+  display: block;
+  font-family: var(--cc-font-mono);
+  font-size: 12px;
+  color: var(--color-secondary);
+  background: var(--cc-surface);
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--cc-outline);
+  word-break: break-all;
+  line-height: 1.5;
+  user-select: all;
+}
+
+// ---------------------------------------------------------------------------
+// Task Info
+// ---------------------------------------------------------------------------
+.session-drawer__task-info {
+  margin-bottom: 12px;
+}
+
+.session-drawer__task-text {
+  font-size: 14px;
+  color: var(--cc-on-surface);
+  line-height: 1.4;
+}
+
+// ---------------------------------------------------------------------------
+// Last Activity
+// ---------------------------------------------------------------------------
+.session-drawer__last-activity {
+  margin-bottom: 0;
+}
+
+.session-drawer__activity-time {
+  font-size: 14px;
+  color: var(--cc-on-surface);
+}
+
+// ---------------------------------------------------------------------------
+// Recent Messages
+// ---------------------------------------------------------------------------
+.session-drawer__messages {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.session-drawer__message {
+  padding: 10px 14px;
+  border-radius: 12px;
+  max-width: 100%;
+
+  &--agent {
+    background: var(--cc-surface-container-high);
+    border: 1px solid var(--cc-outline);
+  }
+
+  &--user {
+    background: rgba(56, 189, 248, 0.08);
+    border: 1px solid rgba(56, 189, 248, 0.15);
+  }
+}
+
+.session-drawer__message-sender {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--cc-on-surface-variant);
+  margin-bottom: 4px;
+}
+
+.session-drawer__message-text {
+  font-size: 14px;
+  color: var(--cc-on-surface);
+  margin: 0;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.session-drawer__message-time {
+  display: block;
+  font-size: 11px;
+  color: var(--cc-on-surface-variant);
+  margin-top: 4px;
+  font-family: var(--cc-font-mono);
+}
+
+// ---------------------------------------------------------------------------
+// Live Log Container
+// ---------------------------------------------------------------------------
+.session-drawer__log-container {
+  background: var(--cc-surface);
+  border: 1px solid var(--cc-outline);
+  border-radius: 10px;
+  padding: 10px 12px;
+  max-height: 260px;
+  overflow-y: auto;
+  font-family: var(--cc-font-mono);
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.session-drawer__log-line {
+  display: flex;
+  gap: 8px;
+  padding: 1px 0;
+  white-space: nowrap;
+
+  &--info {
+    color: var(--cc-on-surface);
+  }
+
+  &--warn {
+    color: #FBBF24;
+  }
+
+  &--error {
+    color: var(--status-error);
+  }
+
+  &--debug {
+    color: var(--cc-on-surface-variant);
+  }
+}
+
+.session-drawer__log-time {
+  color: var(--cc-on-surface-variant);
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.session-drawer__log-level {
+  width: 48px;
+  flex-shrink: 0;
+  font-weight: 600;
+  font-size: 11px;
+  letter-spacing: 0.02em;
+}
+
+.session-drawer__log-message {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+}
+
+// ---------------------------------------------------------------------------
+// Empty State
+// ---------------------------------------------------------------------------
+.session-drawer__empty-state {
+  font-size: 13px;
+  color: var(--cc-on-surface-variant);
+  text-align: center;
+  padding: 16px 0;
+  margin: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Action Buttons — Sticky Footer
+// ---------------------------------------------------------------------------
+.session-drawer__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 24px 20px;
+  border-top: 1px solid var(--cc-outline);
+  background-color: var(--cc-surface-container);
+  flex-shrink: 0;
+}
+
+.session-drawer__action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+
+  .mat-icon {
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+  }
+
+  &--primary {
+    flex: 1;
+  }
+
+  &--secondary {
+    flex-shrink: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Mobile Adjustments
+// ---------------------------------------------------------------------------
+.session-drawer--mobile {
+  .session-drawer__header {
+    padding: 12px 20px 12px;
+  }
+
+  .session-drawer__content {
+    padding: 0 20px 12px;
+  }
+
+  .session-drawer__actions {
+    padding: 12px 20px 16px;
+    flex-direction: column;
+
+    .session-drawer__action-btn {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  .session-drawer__log-container {
+    max-height: 200px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Responsive — wider viewports keep 480px, narrow go full-width
+// ---------------------------------------------------------------------------
+@media (max-width: 599px) {
+  .session-drawer:not(.session-drawer--mobile) {
+    width: 100%;
+    max-width: 100vw;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Accessibility: Reduced Motion
+// ---------------------------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .session-drawer {
+    transition: none;
+  }
+
+  .session-drawer-backdrop {
+    transition: none;
+  }
+}

frontend/src/app/components/agent-session-drawer/agent-session-drawer.component.ts

@@ -0,0 +1,268 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnDestroy,
+  Output,
+  signal,
+  ViewChild,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { AgentCardData, AgentStatus } from '../../models/agent.model';
+
+// ============================================================================
+// Agent Session Drawer — Per CUB-26
+// Desktop: 480px side drawer slides from right with modal overlay.
+// Mobile: Bottom sheet slides up from bottom.
+// Shows: Agent name, status badge, session key, live log tail,
+//         recent messages, and action buttons.
+// ============================================================================
+
+export interface SessionLogLine {
+  timestamp: Date;
+  level: 'info' | 'warn' | 'error' | 'debug';
+  message: string;
+}
+
+export interface SessionMessage {
+  id: string;
+  sender: 'agent' | 'user';
+  content: string;
+  timestamp: Date;
+}
+
+@Component({
+  selector: 'app-agent-session-drawer',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatChipsModule],
+  templateUrl: './agent-session-drawer.component.html',
+  styleUrl: './agent-session-drawer.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AgentSessionDrawerComponent implements OnDestroy {
+  // ---------------------------------------------------------------------------
+  // Inputs
+  // ---------------------------------------------------------------------------
+
+  /** The agent whose session details are displayed. */
+  @Input() set agent(value: AgentCardData | null) {
+    this._agent = value;
+    if (value) {
+      this.isOpen.set(true);
+      this.loadSessionData(value);
+    }
+  }
+  get agent(): AgentCardData | null {
+    return this._agent;
+  }
+  private _agent: AgentCardData | null = null;
+
+  /** Whether this is mobile viewport (bottom sheet mode). */
+  @Input() isMobile = false;
+
+  // ---------------------------------------------------------------------------
+  // Outputs
+  // ---------------------------------------------------------------------------
+
+  /** Emitted when the user clicks "Open Full Session". Payload is the session key. */
+  @Output() readonly openSession = new EventEmitter<string>();
+
+  /** Emitted when the user clicks "Pin to Dashboard". Payload is the session key. */
+  @Output() readonly pinToDashboard = new EventEmitter<string>();
+
+  /** Emitted when the drawer closes. */
+  @Output() readonly drawerClose = new EventEmitter<void>();
+
+  // ---------------------------------------------------------------------------
+  // Signals
+  // ---------------------------------------------------------------------------
+
+  readonly isOpen = signal(false);
+  readonly logLines = signal<SessionLogLine[]>([]);
+  readonly recentMessages = signal<SessionMessage[]>([]);
+
+  // ---------------------------------------------------------------------------
+  // View Children
+  // ---------------------------------------------------------------------------
+
+  @ViewChild('drawerPanel') drawerPanel!: ElementRef<HTMLElement>;
+
+  // ---------------------------------------------------------------------------
+  // Status Helpers
+  // ---------------------------------------------------------------------------
+
+  getStatusClass(status: string): string {
+    return `status-dot--${status}`;
+  }
+
+  getStatusLabel(status: AgentStatus): string {
+    const labels: Record<AgentStatus, string> = {
+      active: 'Active',
+      idle: 'Idle',
+      thinking: 'Thinking…',
+      error: 'Error',
+      offline: 'Offline',
+    };
+    return labels[status] ?? status;
+  }
+
+  getStatusChipColor(status: AgentStatus): string {
+    const map: Record<AgentStatus, string> = {
+      active: 'status-chip--active',
+      idle: 'status-chip--idle',
+      thinking: 'status-chip--thinking',
+      error: 'status-chip--error',
+      offline: 'status-chip--offline',
+    };
+    return map[status] ?? '';
+  }
+
+  getLogLevelClass(level: SessionLogLine['level']): string {
+    return `log-line--${level}`;
+  }
+
+  /** Format a date to a short time string. */
+  formatTime(date: Date): string {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  }
+
+  /** Format a date to a relative time string. */
+  formatRelativeTime(date: Date): string {
+    const now = Date.now();
+    const then = date.getTime();
+    const diffSec = Math.max(0, Math.floor((now - then) / 1000));
+    if (diffSec < 60) return 'just now';
+    if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
+    if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
+    return `${Math.floor(diffSec / 86400)}d ago`;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  /** Open the drawer for a specific agent. */
+  open(agentData: AgentCardData): void {
+    this._agent = agentData;
+    this.isOpen.set(true);
+    this.loadSessionData(agentData);
+  }
+
+  /** Close the drawer. */
+  close(): void {
+    this.isOpen.set(false);
+    this.drawerClose.emit();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Keyboard Handling
+  // ---------------------------------------------------------------------------
+
+  @HostListener('document:keydown.escape')
+  onEscapeKey(): void {
+    if (this.isOpen()) {
+      this.close();
+    }
+  }
+
+  /** Handle keyboard navigation within the drawer. */
+  onDrawerKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.close();
+      return;
+    }
+    // Tab through actions — browser default Tab behavior is fine,
+    // we just trap focus within the drawer
+  }
+
+  // ---------------------------------------------------------------------------
+  // Outside Click
+  // ---------------------------------------------------------------------------
+
+  onBackdropClick(): void {
+    this.close();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Actions
+  // ---------------------------------------------------------------------------
+
+  onOpenSession(): void {
+    if (this._agent) {
+      this.openSession.emit(this._agent.sessionKey);
+    }
+    this.close();
+  }
+
+  onPinToDashboard(): void {
+    if (this._agent) {
+      this.pinToDashboard.emit(this._agent.sessionKey);
+    }
+    // Don't close — user may want to keep viewing
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  ngOnDestroy(): void {
+    // Clean up any subscriptions when needed
+  }
+
+  // ---------------------------------------------------------------------------
+  // Private
+  // ---------------------------------------------------------------------------
+
+  /** Load mock session data for the agent (TODO: wire to real data service). */
+  private loadSessionData(agentData: AgentCardData): void {
+    // TODO: Replace with real session data service when available.
+    // For now, generate placeholder log lines and messages.
+    const now = new Date();
+    const logLines: SessionLogLine[] = [];
+    for (let i = 19; i >= 0; i--) {
+      const ts = new Date(now.getTime() - i * 5000);
+      const levels: SessionLogLine['level'][] = ['info', 'info', 'info', 'debug', 'warn'];
+      const messages = [
+        `Processing task queue for ${agentData.displayName}`,
+        `SignalR heartbeat OK`,
+        `Session state: active`,
+        `Checking for pending commands…`,
+        `Updating task progress: ${Math.floor(Math.random() * 100)}%`,
+      ];
+      logLines.push({
+        timestamp: ts,
+        level: levels[i % levels.length],
+        message: messages[i % messages.length],
+      });
+    }
+    this.logLines.set(logLines);
+
+    const recentMessages: SessionMessage[] = [
+      {
+        id: '1',
+        sender: 'user',
+        content: `Hey ${agentData.displayName}, how's the current task going?`,
+        timestamp: new Date(now.getTime() - 120000),
+      },
+      {
+        id: '2',
+        sender: 'agent',
+        content: agentData.currentTask ?? 'Working on it — progress is steady.',
+        timestamp: new Date(now.getTime() - 115000),
+      },
+      {
+        id: '3',
+        sender: 'user',
+        content: 'Great, let me know if you hit any blockers.',
+        timestamp: new Date(now.getTime() - 110000),
+      },
+    ];
+    this.recentMessages.set(recentMessages);
+  }
+}

frontend/src/app/components/agent-session-drawer/index.ts

@@ -0,0 +1,2 @@
+export { AgentSessionDrawerComponent } from './agent-session-drawer.component';
+export type { SessionLogLine, SessionMessage } from './agent-session-drawer.component';

frontend/src/app/components/index.ts

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

frontend/src/app/design/index.ts

@@ -0,0 +1,11 @@
+// ============================================================================
+// OpenClaw Control Center — Design System Barrel Export
+// ============================================================================
+// Import everything from '@app/design' for convenient access.
+//
+// Usage:
+//   import { CcTokens, CcThemeService, CcCssProps } from '@app/design';
+// ============================================================================
+
+export * from './tokens';
+export * from './theme.service';

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

@@ -0,0 +1,151 @@
+// ============================================================================
+// OpenClaw Control Center — Theme Service
+// ============================================================================
+// Angular service providing programmatic access to design tokens, theme
+// mode switching (dark/light), and runtime CSS custom property manipulation.
+//
+// Usage:
+//   constructor(private theme: CcThemeService) {}
+//
+//   // Read a token
+//   const primary = this.theme.getToken('--cc-color-primary');
+//
+//   // Set a token at runtime
+//   this.theme.setToken('--cc-color-primary', '#00ff00');
+//
+//   // Toggle theme
+//   this.theme.setMode('light');
+// ============================================================================
+
+import { Injectable, signal, computed, effect } from '@angular/core';
+import { CcCssProps, getStatusColor, setCssToken, getCssToken } from './tokens';
+
+// ---------------------------------------------------------------------------
+// Theme Mode Types
+// ---------------------------------------------------------------------------
+export type ThemeMode = 'dark' | 'light';
+
+// ---------------------------------------------------------------------------
+// Light theme overrides (future use)
+// ---------------------------------------------------------------------------
+const LIGHT_THEME_OVERRIDES: Record<string, string> = {
+  // Surface tokens
+  '--cc-surface-darkest':     '#F8FAFC',
+  '--cc-surface-dark':        '#FFFFFF',
+  '--cc-surface-medium':      '#F1F5F9',
+  '--cc-surface-light':       '#E2E8F0',
+  '--cc-surface-lighter':     '#CBD5E1',
+
+  // On-surface tokens
+  '--cc-on-surface':          '#0F172A',
+  '--cc-on-surface-variant':  '#475569',
+  '--cc-on-surface-muted':    '#94A3B8',
+
+  // Border
+  '--cc-surface-lighter-alt': '#E2E8F0',
+
+  // M3 system overrides for light
+  '--mat-sys-surface':                '#FFFFFF',
+  '--mat-sys-surface-container':      '#F1F5F9',
+  '--mat-sys-surface-container-high': '#E2E8F0',
+  '--mat-sys-on-surface':            '#0F172A',
+  '--mat-sys-on-surface-variant':    '#475569',
+  '--mat-sys-outline':               '#CBD5E1',
+  '--mat-sys-background':            '#F8FAFC',
+};
+
+// ---------------------------------------------------------------------------
+// Dark theme (matches the SCSS defaults)
+// ---------------------------------------------------------------------------
+const DARK_THEME_OVERRIDES: Record<string, string> = {
+  '--cc-surface-darkest':     '#0D0F12',
+  '--cc-surface-dark':        '#13161A',
+  '--cc-surface-medium':      '#1C2027',
+  '--cc-surface-light':       '#252B33',
+  '--cc-surface-lighter':     '#2D3748',
+
+  '--cc-on-surface':          '#E2E8F0',
+  '--cc-on-surface-variant':  '#8A9BB0',
+  '--cc-on-surface-muted':    '#64748B',
+
+  '--mat-sys-surface':                '#13161A',
+  '--mat-sys-surface-container':      '#1C2027',
+  '--mat-sys-surface-container-high': '#252B33',
+  '--mat-sys-on-surface':            '#E2E8F0',
+  '--mat-sys-on-surface-variant':    '#8A9BB0',
+  '--mat-sys-outline':               '#2D3748',
+  '--mat-sys-background':            '#0D0F12',
+};
+
+@Injectable({ providedIn: 'root' })
+export class CcThemeService {
+  // ---------------------------------------------------------------------------
+  // Signals for reactive theme state
+  // ---------------------------------------------------------------------------
+  private readonly _mode = signal<ThemeMode>(
+    (localStorage.getItem('cc-theme') as ThemeMode) ?? 'dark'
+  );
+
+  /** Current theme mode */
+  readonly mode = this._mode.asReadonly();
+
+  /** Computed: is the current mode dark? */
+  readonly isDark = computed(() => this._mode() === 'dark');
+
+  /** Computed: is the current mode light? */
+  readonly isLight = computed(() => this._mode() === 'light');
+
+  constructor() {
+    // Apply theme on init and whenever mode changes
+    effect(() => {
+      this.applyTheme(this._mode());
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  /** Set the theme mode and persist to localStorage */
+  setMode(mode: ThemeMode): void {
+    this._mode.set(mode);
+    localStorage.setItem('cc-theme', mode);
+  }
+
+  /** Toggle between dark and light mode */
+  toggle(): void {
+    this.setMode(this._mode() === 'dark' ? 'light' : 'dark');
+  }
+
+  /** Read a CSS custom property from the document root */
+  getToken(property: string): string {
+    return getCssToken(property);
+  }
+
+  /** Set a CSS custom property on the document root */
+  setToken(property: string, value: string): void {
+    setCssToken(property, value);
+  }
+
+  /** Get status color set by agent status */
+  getStatusColors(status: string): { fg: string; bg: string; border: string } {
+    return getStatusColor(status);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Internal
+  // ---------------------------------------------------------------------------
+
+  /** Apply a theme mode by setting all CSS custom properties */
+  private applyTheme(mode: ThemeMode): void {
+    const overrides = mode === 'dark' ? DARK_THEME_OVERRIDES : LIGHT_THEME_OVERRIDES;
+
+    // Set color-scheme for native form controls
+    document.documentElement.style.setProperty('color-scheme', mode);
+
+    // Apply all overrides
+    for (const [prop, value] of Object.entries(overrides)) {
+      document.documentElement.style.setProperty(prop, value);
+    }
+  }
+}

frontend/src/app/design/tokens.ts

@@ -0,0 +1,462 @@
+// ============================================================================
+// OpenClaw Control Center — Design Tokens (TypeScript)
+// ============================================================================
+// Typed representation of the design system tokens for programmatic access.
+// These mirror the SCSS tokens in styles/_tokens.scss and the CSS custom
+// properties emitted by styles/_css-properties.scss.
+//
+// Usage:
+//   import { CcTokens } from '@app/design/tokens';
+//   const primary = CcTokens.color.primary;
+//   const surface = CcTokens.surface.dark;
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// Color Palette
+// ---------------------------------------------------------------------------
+export const CcColors = {
+  primary: {
+    50:  '#ecfeff',
+    100: '#cffafe',
+    200: '#a5f3fc',
+    300: '#67e8f9',
+    400: '#22d3ee',
+    500: '#38bdf8',
+    600: '#0ea5e9',
+    700: '#0284c7',
+    800: '#0369a1',
+    900: '#075985',
+  },
+  secondary: {
+    50:  '#f0fdfa',
+    100: '#ccfbf1',
+    200: '#99f6e4',
+    300: '#5eead4',
+    400: '#2dd4bf',
+    500: '#14b8a6',
+    600: '#0d9488',
+    700: '#0f766e',
+    800: '#115e59',
+    900: '#134e4a',
+  },
+  accent: {
+    50:  '#f5f3ff',
+    100: '#ede9fe',
+    200: '#ddd6fe',
+    300: '#c4b5fd',
+    400: '#a78bfa',
+    500: '#8b5cf6',
+    600: '#7c3aed',
+    700: '#6d28d9',
+    800: '#5b21b6',
+    900: '#4c1d95',
+  },
+  danger: {
+    50:  '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+  },
+} as const;
+
+// ---------------------------------------------------------------------------
+// Semantic Colors (Tactical Dark)
+// ---------------------------------------------------------------------------
+export const CcSemanticColors = {
+  surface: {
+    darkest: '#0D0F12',
+    dark:    '#13161A',
+    medium:  '#1C2027',
+    light:   '#252B33',
+    lighter: '#2D3748',
+  },
+  onSurface: {
+    primary:  '#E2E8F0',
+    variant:  '#8A9BB0',
+    muted:    '#64748B',
+  },
+} as const;
+
+// ---------------------------------------------------------------------------
+// Status Colors
+// ---------------------------------------------------------------------------
+export const CcStatusColors = {
+  active:   { fg: '#38bdf8', bg: 'rgba(56, 189, 248, 0.12)',  border: 'rgba(56, 189, 248, 0.40)' },
+  idle:     { fg: '#2dd4bf', bg: 'rgba(45, 212, 191, 0.12)',  border: 'rgba(45, 212, 191, 0.40)' },
+  thinking: { fg: '#a78bfa', bg: 'rgba(167, 139, 250, 0.12)', border: 'rgba(167, 139, 250, 0.40)' },
+  error:    { fg: '#f87171', bg: 'rgba(248, 113, 113, 0.12)', border: 'rgba(248, 113, 113, 0.40)' },
+  offline:  { fg: '#64748b', bg: 'rgba(100, 116, 139, 0.12)', border: 'rgba(100, 116, 139, 0.40)' },
+} as const;
+
+// ---------------------------------------------------------------------------
+// Convenience exports for component usage (CUB-20)
+// ---------------------------------------------------------------------------
+/** Status colors — maps AgentStatus to hex values */
+export const STATUS_COLORS: Record<string, string> = {
+  active: '#38BDF8',
+  idle: '#2DD4BF',
+  thinking: '#A78BFA',
+  error: '#F87171',
+  offline: '#64748B',
+};
+
+/** Status background tints (12% opacity) */
+export const STATUS_BG_COLORS: Record<string, string> = {
+  active: 'rgba(56, 189, 248, 0.12)',
+  idle: 'rgba(45, 212, 191, 0.12)',
+  thinking: 'rgba(167, 139, 250, 0.12)',
+  error: 'rgba(248, 113, 113, 0.12)',
+  offline: 'rgba(100, 116, 139, 0.12)',
+};
+
+/** Surface overrides (CUB-20 convenience) */
+export const SURFACE = {
+  background: '#0D0F12',
+  surface: '#13161A',
+  container: '#1C2027',
+  containerHigh: '#252B33',
+  onSurface: '#E2E8F0',
+  onSurfaceVariant: '#8A9BB0',
+  outline: '#2D3748',
+} as const;
+
+/** Tactical Dark Mode color palette (CUB-20 convenience) */
+export const COLORS = {
+  surface: '#0F172A',
+  surfaceLight: '#1E293B',
+  primary: '#38BDF8',
+  secondary: '#2DD4BF',
+  accent: '#A78BFA',
+  danger: '#F87171',
+  textPrimary: '#FFFFFF',
+  textSecondary: '#94A3B8',
+  border: '#334155',
+} as const;
+
+/** Layout constants (CUB-20 convenience) */
+export const LAYOUT = {
+  navRailCollapsedWidth: 72,
+  navRailExpandedWidth: 256,
+  headerHeight: 64,
+  bottomNavHeight: 80,
+  cardBorderRadius: 16,
+  cardMinWidth: 320,
+  cardGap: 16,
+  cardPadding: 20,
+  sectionPadding: 24,
+  spacingUnit: 8,
+} as const;
+
+/** Breakpoints (px) (CUB-20 convenience) */
+export const BREAKPOINTS = {
+  mobile: 599,
+  tablet: 1023,
+  desktop: 1024,
+} as const;
+
+/** Channel icon mapping (CUB-20) */
+export const CHANNEL_ICONS: Record<string, string> = {
+  telegram: 'telegram',
+  slack: 'chat',
+  discord: 'forum',
+  whatsapp: 'chat',
+  webchat: 'language',
+  email: 'email',
+  mqtt: 'sensors',
+};
+
+/** Human-readable status labels (CUB-20) */
+export const STATUS_LABELS: Record<string, string> = {
+  active: 'Active',
+  idle: 'Idle',
+  thinking: 'Thinking…',
+  error: 'Error',
+  offline: 'Offline',
+};
+
+// ---------------------------------------------------------------------------
+// Typography
+// ---------------------------------------------------------------------------
+export const CcTypography = {
+  fontFamily: {
+    brand: "'Inter, Roboto, sans-serif'",
+    body:  "'Inter, Roboto, sans-serif'",
+    mono:  "'Roboto Mono, Cascadia Code, Fira Code, monospace'",
+  },
+  size: {
+    displayLarge:  '57px',
+    displayMedium: '45px',
+    displaySmall:  '36px',
+    headlineLarge: '32px',
+    headlineMedium: '28px',
+    headlineSmall:  '24px',
+    titleLarge:    '22px',
+    titleMedium:   '16px',
+    titleSmall:    '14px',
+    bodyLarge:     '16px',
+    bodyMedium:    '14px',
+    bodySmall:     '12px',
+    labelLarge:    '14px',
+    labelMedium:   '12px',
+    labelSmall:    '11px',
+  },
+  weight: {
+    regular: 400,
+    medium:  500,
+    bold:    600,
+    heavy:   700,
+  },
+  lineHeight: {
+    tight:   '1.2',
+    normal:  '1.5',
+    relaxed: '1.6',
+  },
+  letterSpacing: {
+    tight:  '-0.01em',
+    normal: '0em',
+    wide:   '0.02em',
+    mono:   '0.05em',
+  },
+} as const;
+
+// ---------------------------------------------------------------------------
+// Spacing (4px grid)
+// ---------------------------------------------------------------------------
+export const CcSpacing = {
+  0:  '0px',
+  1:  '4px',
+  2:  '8px',
+  3:  '12px',
+  4:  '16px',
+  5:  '20px',
+  6:  '24px',
+  7:  '28px',
+  8:  '32px',
+  9:  '36px',
+  10: '40px',
+  12: '48px',
+  14: '56px',
+  16: '64px',
+  20: '80px',
+} as const;
+
+// ---------------------------------------------------------------------------
+// Layout
+// ---------------------------------------------------------------------------
+export const CcLayout = {
+  navRailCollapsedWidth: '72px',
+  navRailExpandedWidth:  '256px',
+  headerHeight:          '64px',
+  bottomNavHeight:       '80px',
+  cardBorderRadius:      '16px',
+  cardMinWidth:          '320px',
+  badgeHeight:           '24px',
+  badgeBorderRadius:     '12px',
+  statusDotSize:         '10px',
+} as const;
+
+// ---------------------------------------------------------------------------
+// Breakpoints (M3 canonical)
+// ---------------------------------------------------------------------------
+export const CcBreakpoints = {
+  compact:  599,
+  medium:   767,
+  expanded: 1023,
+  large:    1439,
+} as const;
+
+// ---------------------------------------------------------------------------
+// Border Radius
+// ---------------------------------------------------------------------------
+export const CcRadius = {
+  none: '0px',
+  xs:   '4px',
+  sm:   '8px',
+  md:   '12px',
+  lg:   '16px',
+  xl:   '24px',
+  full: '9999px',
+} as const;
+
+// ---------------------------------------------------------------------------
+// Shadows (M3 elevation)
+// ---------------------------------------------------------------------------
+export const CcShadows = {
+  level0: 'none',
+  level1: '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3)',
+  level2: '0 2px 6px 0 rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)',
+  level3: '0 4px 12px 0 rgba(0, 0, 0, 0.3), 0 4px 8px -4px rgba(0, 0, 0, 0.3)',
+  level4: '0 8px 24px 0 rgba(0, 0, 0, 0.3), 0 8px 16px -8px rgba(0, 0, 0, 0.3)',
+} as const;
+
+// ---------------------------------------------------------------------------
+// Motion
+// ---------------------------------------------------------------------------
+export const CcMotion = {
+  duration: {
+    instant:   0,
+    fast:      100,
+    short:     150,
+    medium:    200,
+    standard: 300,
+    long:     500,
+  },
+  easing: {
+    standard:   'cubic-bezier(0.4, 0, 0.2, 1)',
+    decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
+    accelerate: 'cubic-bezier(0.4, 0, 1, 1)',
+    sharp:     'cubic-bezier(0.4, 0, 0.6, 1)',
+  },
+} as const;
+
+// ---------------------------------------------------------------------------
+// Accessibility
+// ---------------------------------------------------------------------------
+export const CcA11y = {
+  focusRing: {
+    width:   '2px',
+    offset:  '2px',
+    color:   '#38bdf8',
+    style:   'solid',
+  },
+  minTouchTarget: 48,
+  minBodyFont:    16,
+} as const;
+
+// ---------------------------------------------------------------------------
+// Aggregate token object for convenient access
+// ---------------------------------------------------------------------------
+export const CcTokens = {
+  color: CcColors,
+  semantic: CcSemanticColors,
+  status: CcStatusColors,
+  typography: CcTypography,
+  spacing: CcSpacing,
+  layout: CcLayout,
+  breakpoints: CcBreakpoints,
+  radius: CcRadius,
+  shadows: CcShadows,
+  motion: CcMotion,
+  a11y: CcA11y,
+} as const;
+
+// ---------------------------------------------------------------------------
+// CSS Custom Property Names
+// ---------------------------------------------------------------------------
+export const CcCssProps = {
+  // Color
+  colorPrimary:      '--cc-color-primary',
+  colorSecondary:    '--cc-color-secondary',
+  colorAccent:       '--cc-color-accent',
+  colorDanger:       '--cc-color-danger',
+
+  // Surface
+  surfaceDarkest:    '--cc-surface-darkest',
+  surfaceDark:       '--cc-surface-dark',
+  surfaceMedium:     '--cc-surface-medium',
+  surfaceLight:      '--cc-surface-light',
+  surfaceLighter:    '--cc-surface-lighter',
+
+  // On-surface
+  onSurface:         '--cc-on-surface',
+  onSurfaceVariant:  '--cc-on-surface-variant',
+  onSurfaceMuted:    '--cc-on-surface-muted',
+
+  // Status
+  statusActive:       '--cc-status-active',
+  statusIdle:         '--cc-status-idle',
+  statusThinking:    '--cc-status-thinking',
+  statusError:        '--cc-status-error',
+  statusOffline:      '--cc-status-offline',
+  statusActiveBg:     '--cc-status-active-bg',
+  statusIdleBg:       '--cc-status-idle-bg',
+  statusThinkingBg:   '--cc-status-thinking-bg',
+  statusErrorBg:      '--cc-status-error-bg',
+  statusOfflineBg:    '--cc-status-offline-bg',
+  statusActiveBorder:  '--cc-status-active-border',
+  statusIdleBorder:    '--cc-status-idle-border',
+  statusThinkingBorder: '--cc-status-thinking-border',
+  statusErrorBorder:   '--cc-status-error-border',
+  statusOfflineBorder: '--cc-status-offline-border',
+
+  // Typography
+  fontBrand: '--cc-font-brand',
+  fontBody:  '--cc-font-body',
+  fontMono:  '--cc-font-mono',
+
+  // Spacing
+  spacing2:  '--cc-spacing-2',
+  spacing4:  '--cc-spacing-4',
+  spacing6:  '--cc-spacing-6',
+  spacing8:  '--cc-spacing-8',
+  spacing12: '--cc-spacing-12',
+  spacing16: '--cc-spacing-16',
+
+  // Layout
+  navRailCollapsed: '--cc-nav-rail-collapsed',
+  navRailExpanded:  '--cc-nav-rail-expanded',
+  headerHeight:      '--cc-header-height',
+  bottomNavHeight:  '--cc-bottom-nav-height',
+  cardRadius:       '--cc-card-radius',
+  cardMinWidth:     '--cc-card-min-width',
+
+  // Radius
+  radiusNone: '--cc-radius-none',
+  radiusXs:   '--cc-radius-xs',
+  radiusSm:   '--cc-radius-sm',
+  radiusMd:   '--cc-radius-md',
+  radiusLg:   '--cc-radius-lg',
+  radiusXl:   '--cc-radius-xl',
+  radiusFull: '--cc-radius-full',
+
+  // Shadows
+  shadow0: '--cc-shadow-0',
+  shadow1: '--cc-shadow-1',
+  shadow2: '--cc-shadow-2',
+  shadow3: '--cc-shadow-3',
+  shadow4: '--cc-shadow-4',
+
+  // Motion
+  durationFast:     '--cc-duration-fast',
+  durationShort:    '--cc-duration-short',
+  durationMedium:   '--cc-duration-medium',
+  durationStandard: '--cc-duration-standard',
+  durationLong:     '--cc-duration-long',
+  easingStandard:   '--cc-easing-standard',
+  easingDecelerate: '--cc-easing-decelerate',
+  easingAccelerate: '--cc-easing-accelerate',
+
+  // Accessibility
+  focusWidth:  '--cc-focus-width',
+  focusOffset: '--cc-focus-offset',
+  focusColor:  '--cc-focus-color',
+  touchMin:    '--cc-touch-min',
+} as const;
+
+// ---------------------------------------------------------------------------
+// Utility: Read a CSS custom property from the document
+// ---------------------------------------------------------------------------
+export function getCssToken(propertyName: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(propertyName).trim();
+}
+
+// ---------------------------------------------------------------------------
+// Utility: Set a CSS custom property on the document root
+// ---------------------------------------------------------------------------
+export function setCssToken(propertyName: string, value: string): void {
+  document.documentElement.style.setProperty(propertyName, value);
+}
+
+// ---------------------------------------------------------------------------
+// Utility: Get status color by agent status type
+// ---------------------------------------------------------------------------
+export function getStatusColor(status: string): { fg: string; bg: string; border: string } {
+  const statusMap: Record<string, { fg: string; bg: string; border: string }> = CcStatusColors;
+  return statusMap[status] ?? CcStatusColors.offline;
+}

frontend/src/app/directives/index.ts

@@ -0,0 +1 @@
+export { LongPressDirective } from './long-press.directive';

frontend/src/app/directives/long-press.directive.ts

@@ -0,0 +1,89 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  OnDestroy,
+  Output,
+  Input,
+} from '@angular/core';
+
+// ============================================================================
+// Long-Press Directive — CUB-26
+// Emits after a sustained press (500ms default).
+// Used on agent cards to bypass the drawer and open Session Log directly.
+// ============================================================================
+
+@Directive({
+  selector: '[appLongPress]',
+  standalone: true,
+  host: {
+    '(mousedown)': 'onMouseDown($event)',
+    '(mouseup)': 'onMouseUp()',
+    '(mouseleave)': 'onMouseLeave()',
+    '(touchstart)': 'onTouchStart($event)',
+    '(touchend)': 'onTouchEnd()',
+    '(touchmove)': 'onTouchMove()',
+    '(contextmenu)': 'onContextMenu($event)',
+  },
+})
+export class LongPressDirective implements OnDestroy {
+  /** Duration in ms before a press counts as a long press. */
+  @Input() appLongPressDuration = 500;
+
+  /** Emits when a long press is detected. Payload is the original event. */
+  @Output() readonly appLongPress = new EventEmitter<MouseEvent | TouchEvent>();
+
+  private timer: ReturnType<typeof setTimeout> | null = null;
+  private isLongPress = false;
+
+  onMouseDown(event: MouseEvent): void {
+    this.isLongPress = false;
+    this.timer = setTimeout(() => {
+      this.isLongPress = true;
+      this.appLongPress.emit(event);
+    }, this.appLongPressDuration);
+  }
+
+  onMouseUp(): void {
+    this.clearTimer();
+  }
+
+  onMouseLeave(): void {
+    this.clearTimer();
+  }
+
+  onTouchStart(event: TouchEvent): void {
+    this.isLongPress = false;
+    this.timer = setTimeout(() => {
+      this.isLongPress = true;
+      this.appLongPress.emit(event);
+    }, this.appLongPressDuration);
+  }
+
+  onTouchEnd(): void {
+    this.clearTimer();
+  }
+
+  onTouchMove(): void {
+    // Cancel on touch move (finger moved)
+    this.clearTimer();
+  }
+
+  onContextMenu(event: MouseEvent): void {
+    // Prevent native context menu on long press
+    if (this.isLongPress) {
+      event.preventDefault();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.clearTimer();
+  }
+
+  private clearTimer(): void {
+    if (this.timer !== null) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  }
+}

frontend/src/app/layout/layout-shell/layout-shell.component.html

@@ -18,3 +18,10 @@
 
 <!-- Quick-Jump Drawer (global overlay) -->
 <app-quick-jump-drawer />
+
+<!-- Agent Session Drawer (CUB-26) — desktop: side drawer, mobile: bottom sheet -->
+<app-agent-session-drawer
+  [isMobile]="isMobile()"
+  (openSession)="onOpenSession($event)"
+  (pinToDashboard)="onPinToDashboard($event)"
+/>

frontend/src/app/layout/layout-shell/layout-shell.component.ts

@@ -1,32 +1,75 @@
-import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, OnDestroy, signal, ViewChild } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Subscription } from 'rxjs';
 import { NavRailComponent } from '../nav-rail/nav-rail.component';
 import { BottomNavComponent } from '../bottom-nav/bottom-nav.component';
 import { HeaderBarComponent } from '../header-bar/header-bar.component';
 import { QuickJumpDrawerComponent } from '../../components/quick-jump-drawer/index';
+import { AgentSessionDrawerComponent } from '../../components/agent-session-drawer/index';
+import { AgentCardData } from '../../models/agent.model';
 
 /**
  * Layout Shell — wraps the main content area with adaptive navigation.
  * Desktop/Kiosk: Nav Rail (left) + Header + Content
  * Mobile: Header + Content + Bottom Nav
  * Per spec Section 3.1 (kiosk) and 3.2 (mobile).
+ * CUB-26: Hosts the Agent Session Drawer for quick-jump navigation.
  */
 @Component({
   selector: 'app-layout-shell',
   standalone: true,
-  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent],
+  imports: [RouterOutlet, NavRailComponent, BottomNavComponent, HeaderBarComponent, QuickJumpDrawerComponent, AgentSessionDrawerComponent],
   templateUrl: './layout-shell.component.html',
   styleUrl: './layout-shell.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LayoutShellComponent {
+export class LayoutShellComponent implements OnDestroy {
   @ViewChild(QuickJumpDrawerComponent) quickJumpDrawer!: QuickJumpDrawerComponent;
+  @ViewChild(AgentSessionDrawerComponent) sessionDrawer!: AgentSessionDrawerComponent;
+
+  /** Whether the viewport is mobile-sized. */
+  readonly isMobile = signal(false);
+
+  private readonly breakpointSub: Subscription;
+
+  constructor(
+    private readonly breakpointObserver: BreakpointObserver,
+    private readonly router: Router,
+  ) {
+    this.breakpointSub = this.breakpointObserver
+      .observe([Breakpoints.Handset, Breakpoints.Small])
+      .subscribe((result) => {
+        this.isMobile.set(result.matches);
+      });
+  }
 
   /** Open the quick-jump drawer from anywhere in the layout. */
   openQuickJump(): void {
     this.quickJumpDrawer?.open();
   }
 
+  /** Open the session drawer for a specific agent. */
+  openSessionDrawer(agent: AgentCardData): void {
+    this.sessionDrawer?.open(agent);
+  }
+
+  /** Open the session log page directly (long-press bypass). */
+  openSessionLog(sessionKey: string): void {
+    this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
+  }
+
+  /** Handle "Open Full Session" action from session drawer. */
+  onOpenSession(sessionKey: string): void {
+    this.router.navigate(['/sessions'], { queryParams: { key: sessionKey } });
+  }
+
+  /** Handle "Pin to Dashboard" action from session drawer. */
+  onPinToDashboard(sessionKey: string): void {
+    // TODO: Implement pin-to-dashboard logic
+    console.log('[LayoutShell] Pin to dashboard:', sessionKey);
+  }
+
   /** Global keyboard shortcut: Ctrl+K or Cmd+K opens the quick-jump drawer. */
   @HostListener('document:keydown', ['$event'])
   onGlobalKeydown(event: KeyboardEvent): void {
@@ -35,4 +78,8 @@ export class LayoutShellComponent {
       this.quickJumpDrawer?.toggle();
     }
   }
+
+  ngOnDestroy(): void {
+    this.breakpointSub.unsubscribe();
+  }
 }

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

@@ -4,9 +4,12 @@
 <!--   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) {
@@ -24,26 +27,31 @@
 
   <!-- Agent Card Grid -->
   <div class="hub-page__grid">
-    @for (agent of filteredAgents(); track agent.agentId) {
+    @for (agent of filteredAgents(); track agent.id) {
       <app-agent-card
         [status]="agent.status"
-        [displayName]="agent.displayName"
+        [task]="agent.currentTask ?? ''"
-        [agentId]="agent.agentId"
+        [progress]="agent.taskProgress ?? 0"
-        [role]="agent.role"
-        [task]="agent.task"
-        [progress]="agent.progress"
         [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>
-
-  <!-- Empty state -->
-  @if (filteredAgents().length === 0) {
-    <div class="hub-page__empty">
-      <p>No agents match the selected filter.</p>
-    </div>
-  }
 </div>
+
+<!-- Agent Session Drawer (CUB-26) -->
+<app-agent-session-drawer
+  [isMobile]="isMobile()"
+  (openSession)="onOpenSession($event)"
+  (pinToDashboard)="onPinToDashboard($event)"
+  (drawerClose)="onDrawerClose()"
+/>

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

@@ -12,6 +12,15 @@
   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;
 }
 
 // ---------------------------------------------------------------------------
@@ -78,6 +87,7 @@
 // ---------------------------------------------------------------------------
 // Empty State
 // ---------------------------------------------------------------------------
+.hub-page__placeholder,
 .hub-page__empty {
   display: flex;
   align-items: center;

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

@@ -1,7 +1,9 @@
-import { ChangeDetectionStrategy, Component, signal, computed } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal, computed, ViewChild } from '@angular/core';
-import { MatChipsModule } from '@angular/material/chips';
 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';
 
 /**
@@ -13,12 +15,16 @@ export type AgentFilter = 'all' | AgentStatus;
 @Component({
   selector: 'app-hub-page',
   standalone: true,
-  imports: [CommonModule, MatChipsModule, AgentCardComponent],
+  imports: [CommonModule, MatChipsModule, AgentCardComponent, AgentSessionDrawerComponent],
   templateUrl: './hub-page.component.html',
   styleUrl: './hub-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HubPageComponent {
+  @ViewChild(AgentSessionDrawerComponent) sessionDrawer!: AgentSessionDrawerComponent;
+
+  readonly isMobile = signal(false);
+
   protected readonly filters: { label: string; value: AgentFilter }[] = [
     { label: 'All', value: 'all' },
     { label: 'Active', value: 'active' },
@@ -30,74 +36,68 @@ export class HubPageComponent {
 
   protected readonly activeFilter = signal<AgentFilter>('all');
 
-  /** Stub agent data for demonstrating the responsive grid layout */
+  /** Stub agent data (TODO: wire to AgentStatusService / SignalR). */
-  protected readonly agents = signal([
+  readonly agents = signal<AgentCardData[]>([
     {
-      status: 'active' as AgentStatus,
+      id: 'otto',
       displayName: 'Otto',
-      agentId: 'otto',
+      role: 'Orchestrator Agent',
-      role: 'Orchestrator',
+      status: 'active',
-      task: 'Reviewing PR #42',
+      currentTask: 'Reviewing PR #42',
-      progress: 65,
+      taskProgress: 67,
-      sessionKey: 'otto-main',
+      taskElapsed: '04m 12s',
+      sessionKey: 'agent:otto:slack:CUB-42:abc123',
       channel: 'slack',
       lastActivity: new Date(),
     },
     {
-      status: 'thinking' as AgentStatus,
+      id: 'rex',
       displayName: 'Rex',
-      agentId: 'rex',
+      role: 'Frontend Agent',
-      role: 'Frontend Engineer',
+      status: 'thinking',
-      task: 'Building responsive layout',
+      currentTask: 'Building responsive layout',
-      progress: 40,
+      taskProgress: 40,
-      sessionKey: 'rex-task-27',
+      taskElapsed: '02m 30s',
-      channel: 'webchat',
+      sessionKey: 'agent:rex:telegram:CUB-27:def456',
+      channel: 'telegram',
       lastActivity: new Date(Date.now() - 30000),
     },
     {
-      status: 'idle' as AgentStatus,
+      id: 'dex',
       displayName: 'Dex',
-      agentId: 'dex',
+      role: 'Backend Agent',
-      role: 'Backend Engineer',
+      status: 'idle',
-      task: '',
+      currentTask: undefined,
-      progress: 0,
+      taskProgress: undefined,
-      sessionKey: 'dex-standby',
+      taskElapsed: undefined,
+      sessionKey: 'agent:dex:slack:CUB-53:ghi789',
       channel: 'slack',
       lastActivity: new Date(Date.now() - 300000),
     },
     {
-      status: 'error' as AgentStatus,
+      id: 'hex',
       displayName: 'Hex',
-      agentId: 'hex',
+      role: 'Database Agent',
-      role: 'Database Engineer',
+      status: 'error',
-      task: 'Migration failed',
+      currentTask: 'Migration failed — rollback initiated',
-      errorMessage: 'Connection timeout to primary DB',
+      taskProgress: 0,
-      progress: 0,
+      taskElapsed: '00m 45s',
-      sessionKey: 'hex-err-db1',
+      sessionKey: 'agent:hex:slack:CUB-56:jkl012',
-      channel: 'telegram',
+      channel: 'slack',
-      lastActivity: new Date(Date.now() - 120000),
+      lastActivity: new Date(Date.now() - 60000),
+      errorMessage: 'Connection timeout to database server',
     },
     {
-      status: 'offline' as AgentStatus,
+      id: 'nano',
-      displayName: 'Pip',
-      agentId: 'pip',
-      role: 'Pi Engineer',
-      task: '',
-      progress: 0,
-      sessionKey: 'pip-offline',
-      channel: 'webchat',
-      lastActivity: new Date(Date.now() - 3600000),
-    },
-    {
-      status: 'active' as AgentStatus,
       displayName: 'Nano',
-      agentId: 'nano',
+      role: 'ESP32 Agent',
-      role: 'Firmware Engineer',
+      status: 'offline',
-      task: 'Flashing ESP32 build #18',
+      currentTask: undefined,
-      progress: 80,
+      taskProgress: undefined,
-      sessionKey: 'nano-flash-18',
+      taskElapsed: undefined,
-      channel: 'webchat',
+      sessionKey: 'agent:nano:mqtt:CUB-48:mno345',
-      lastActivity: new Date(),
+      channel: 'mqtt',
+      lastActivity: new Date(Date.now() - 86400000),
     },
   ]);
 
@@ -107,7 +107,47 @@ export class HubPageComponent {
     return this.agents().filter(a => a.status === filter);
   });
 
+  constructor() {
+    // Detect mobile viewport
+    if (typeof window !== 'undefined') {
+      const mql = window.matchMedia('(max-width: 599px)');
+      this.isMobile.set(mql.matches);
+      mql.addEventListener('change', (e) => this.isMobile.set(e.matches));
+    }
+  }
+
   protected selectFilter(filter: AgentFilter): void {
     this.activeFilter.set(filter);
   }
+
+  /** Card click → open session drawer with agent details. */
+  onCardClick(sessionKey: string): void {
+    const agent = this.agents().find((a) => a.sessionKey === sessionKey);
+    if (agent) {
+      this.sessionDrawer?.open(agent);
+    }
+  }
+
+  /** Long-press on card → bypass drawer, go directly to session log. */
+  onCardLongPress(sessionKey: string): void {
+    console.log('[Hub] Long press — navigate to session log:', sessionKey);
+    // TODO: Navigate directly to session log page when sessions route is implemented
+  }
+
+  /** Open full session from drawer action button. */
+  onOpenSession(sessionKey: string): void {
+    console.log('[Hub] Open full session:', sessionKey);
+    // TODO: Navigate to full session view
+  }
+
+  /** Pin agent to dashboard from drawer action button. */
+  onPinToDashboard(sessionKey: string): void {
+    console.log('[Hub] Pin to dashboard:', sessionKey);
+    // TODO: Implement pin-to-dashboard
+  }
+
+  /** Drawer closed. */
+  onDrawerClose(): void {
+    // No-op for now — drawer is self-managing
+  }
 }

frontend/src/styles.scss

@@ -1,10 +1,18 @@
 // ============================================================================
 // OpenClaw Control Center — M3 Tactical Dark Theme
 // ============================================================================
-// Material Design 3 theming with custom dark palette per design spec.
+// Main global stylesheet. Imports the design system token modules and
-// Section 5.1: Color Palette, Section 5.2: Typography
+// applies the M3 dark theme. All tokens are defined once in
+//   styles/_tokens.scss     — SCSS variables and mixins
+//   styles/_css-properties.scss — CSS custom property output
+//   styles/_utilities.scss  — utility mixins for components
+//
+// Components should @use these modules rather than hardcoding values.
 // ============================================================================
 
+@use 'styles/tokens' as tokens;
+@use 'styles/css-properties' as css-props;
+@use 'styles/utilities' as utils;
 @use '@angular/material' as mat;
 
 // ---------------------------------------------------------------------------
@@ -21,11 +29,11 @@ $dark-theme: mat.define-theme((
     tertiary: mat.$violet-palette,
   ),
   typography: (
-    brand-family: 'Inter, Roboto, sans-serif',
+    brand-family: tokens.$font-family-brand,
-    plain-family: 'Inter, Roboto, sans-serif',
+    plain-family: tokens.$font-family-body,
-    bold-weight: 600,
+    bold-weight: tokens.$font-weight-bold,
-    medium-weight: 500,
+    medium-weight: tokens.$font-weight-medium,
-    regular-weight: 400,
+    regular-weight: tokens.$font-weight-regular,
   ),
   density: (
     scale: 0,
@@ -42,7 +50,10 @@ html {
 }
 
 // ---------------------------------------------------------------------------
-// Custom CSS Custom Properties — Status Colors
+// Emit Design System CSS Custom Properties
+// ---------------------------------------------------------------------------
+@include css-props.emit-custom-properties;
+
 // ---------------------------------------------------------------------------
 // Per spec Section 5.1 "Status Colors (Semantic — outside M3 tonal system)"
 // These are NOT part of the M3 tonal palette; they are semantic overrides.
@@ -108,9 +119,9 @@ html {
 // Global Body Styles
 // ---------------------------------------------------------------------------
 body {
-  background-color: var(--color-surface);
+  background-color: var(--cc-surface-darkest);
   color: var(--cc-on-surface);
-  font-family: 'Inter', 'Roboto', sans-serif;
+  font-family: var(--cc-font-body);
   margin: 0;
   height: 100%;
   min-height: 100vh;
@@ -118,37 +129,60 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-// ---------------------------------------------------------------------------
-// M3 Surface Overrides
-// ---------------------------------------------------------------------------
-// Override M3 surface tokens to match our tactical dark palette
-// ---------------------------------------------------------------------------
-:root {
-  // Override M3 system color tokens to match custom palette
-  --mat-sys-surface: var(--cc-surface);
-  --mat-sys-surface-container: var(--cc-surface-container);
-  --mat-sys-surface-container-high: var(--cc-surface-container-high);
-  --mat-sys-on-surface: var(--cc-on-surface);
-  --mat-sys-on-surface-variant: var(--cc-on-surface-variant);
-  --mat-sys-outline: var(--cc-outline);
-  --mat-sys-background: var(--cc-background);
-}
-
 // ---------------------------------------------------------------------------
 // Typography Helpers
 // ---------------------------------------------------------------------------
 .text-mono {
   font-family: var(--cc-font-mono);
-  font-size: 13px;
+  font-size: tokens.$font-size-body-medium;
-  font-weight: 400;
+  font-weight: tokens.$font-weight-regular;
-  letter-spacing: 0.02em;
+  letter-spacing: tokens.$letter-spacing-mono;
+}
+
+.text-display-large {
+  font-size: tokens.$font-size-display-large;
+  font-weight: tokens.$font-weight-heavy;
+  line-height: tokens.$line-height-tight;
+  letter-spacing: tokens.$letter-spacing-tight;
+}
+
+.text-headline-medium {
+  font-size: tokens.$font-size-headline-medium;
+  font-weight: tokens.$font-weight-bold;
+  line-height: tokens.$line-height-tight;
+}
+
+.text-title-large {
+  font-size: tokens.$font-size-title-large;
+  font-weight: tokens.$font-weight-bold;
+}
+
+.text-title-medium {
+  font-size: tokens.$font-size-title-medium;
+  font-weight: tokens.$font-weight-medium;
+}
+
+.text-body-large {
+  font-size: tokens.$font-size-body-large;
+  font-weight: tokens.$font-weight-regular;
+  line-height: tokens.$line-height-normal;
+}
+
+.text-body-medium {
+  font-size: tokens.$font-size-body-medium;
+  font-weight: tokens.$font-weight-regular;
+  line-height: tokens.$line-height-normal;
+}
+
+.text-label-medium {
+  font-size: tokens.$font-size-label-medium;
+  font-weight: tokens.$font-weight-medium;
+  letter-spacing: tokens.$letter-spacing-wide;
 }
 
 // ---------------------------------------------------------------------------
 // Status Dot Pulse Animations
 // ---------------------------------------------------------------------------
-// Per spec Section 7.5: Animation Specs
-// ---------------------------------------------------------------------------
 @keyframes pulse-active {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.7; transform: scale(1.15); }
@@ -165,35 +199,35 @@ body {
 }
 
 // ---------------------------------------------------------------------------
-// Utility Classes
+// Status Dot Utility Classes
 // ---------------------------------------------------------------------------
 .status-dot {
-  width: 10px;
+  width: tokens.$status-dot-size;
-  height: 10px;
+  height: tokens.$status-dot-size;
-  border-radius: 50%;
+  border-radius: tokens.$radius-full;
   display: inline-block;
 
   &--active {
-    background-color: var(--status-active);
+    background-color: var(--cc-status-active);
-    animation: pulse-active 2s ease-in-out infinite;
+    animation: pulse-active tokens.$duration-standard tokens.$easing-standard infinite;
   }
 
   &--idle {
-    background-color: var(--status-idle);
+    background-color: var(--cc-status-idle);
   }
 
   &--thinking {
-    background-color: var(--status-thinking);
+    background-color: var(--cc-status-thinking);
-    animation: pulse-thinking 3s ease-in-out infinite;
+    animation: pulse-thinking 3s tokens.$easing-standard infinite;
   }
 
   &--error {
-    background-color: var(--status-error);
+    background-color: var(--cc-status-error);
-    animation: pulse-error 0.8s ease-in-out infinite;
+    animation: pulse-error tokens.$duration-fast tokens.$easing-standard infinite;
   }
 
   &--offline {
-    background-color: var(--status-offline);
+    background-color: var(--cc-status-offline);
   }
 }
 
@@ -208,6 +242,27 @@ body {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Screen-reader-only utility
+// ---------------------------------------------------------------------------
+.sr-only {
+  @include tokens.sr-only;
+}
+
+// ---------------------------------------------------------------------------
+// Truncate utility
+// ---------------------------------------------------------------------------
+.truncate {
+  @include tokens.truncate;
+}
+
+// ---------------------------------------------------------------------------
+// Focus ring utility
+// ---------------------------------------------------------------------------
+.focus-ring {
+  @include tokens.focus-ring;
+}
+
 // ---------------------------------------------------------------------------
 // Scrollbar Styling (Tactical Dark)
 // ---------------------------------------------------------------------------
@@ -217,11 +272,11 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--cc-surface);
+  background: var(--cc-surface-dark);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--cc-outline);
+  background: var(--cc-surface-lighter);
   border-radius: 3px;
 
   &:hover {

frontend/src/styles/_css-properties.scss

@@ -0,0 +1,115 @@
+// ============================================================================
+// OpenClaw Control Center — CSS Custom Property Output
+// ============================================================================
+// This module emits ALL design tokens as CSS custom properties on :root.
+// Import this in styles.scss to make tokens available to all components.
+//
+// Tokens are namespaced with --cc- (Control Center) to avoid collisions
+// with Angular Material's --mat- variables.
+// ============================================================================
+
+@use 'tokens' as *;
+
+// ---------------------------------------------------------------------------
+// Emit all CSS custom properties
+// ---------------------------------------------------------------------------
+@mixin emit-custom-properties {
+  :root {
+    // --- Color tokens ---
+    --cc-color-primary:       #{$color-primary-500};
+    --cc-color-secondary:     #{$color-secondary-400};
+    --cc-color-accent:        #{$color-accent-400};
+    --cc-color-danger:        #{$color-danger-400};
+
+    // --- Surface tokens ---
+    --cc-surface-darkest:     #{$color-surface-darkest};
+    --cc-surface-dark:        #{$color-surface-dark};
+    --cc-surface-medium:      #{$color-surface-medium};
+    --cc-surface-light:       #{$color-surface-light};
+    --cc-surface-lighter:     #{$color-surface-lighter};
+
+    // --- On-surface tokens ---
+    --cc-on-surface:          #{$color-on-surface};
+    --cc-on-surface-variant:  #{$color-on-surface-variant};
+    --cc-on-surface-muted:    #{$color-on-surface-muted};
+
+    // --- Status tokens ---
+    --cc-status-active:       #{$status-active};
+    --cc-status-idle:         #{$status-idle};
+    --cc-status-thinking:     #{$status-thinking};
+    --cc-status-error:        #{$status-error};
+    --cc-status-offline:      #{$status-offline};
+
+    --cc-status-active-bg:    #{$status-active-bg};
+    --cc-status-idle-bg:      #{$status-idle-bg};
+    --cc-status-thinking-bg:  #{$status-thinking-bg};
+    --cc-status-error-bg:     #{$status-error-bg};
+    --cc-status-offline-bg:   #{$status-offline-bg};
+
+    --cc-status-active-border:  #{$status-active-border};
+    --cc-status-idle-border:    #{$status-idle-border};
+    --cc-status-thinking-border: #{$status-thinking-border};
+    --cc-status-error-border:   #{$status-error-border};
+    --cc-status-offline-border:  #{$status-offline-border};
+
+    // --- Typography tokens ---
+    --cc-font-brand:   #{$font-family-brand};
+    --cc-font-body:    #{$font-family-body};
+    --cc-font-mono:    #{$font-family-mono};
+
+    // --- Spacing tokens ---
+    --cc-spacing-0:   #{$spacing-0};
+    --cc-spacing-1:   #{$spacing-1};
+    --cc-spacing-2:   #{$spacing-2};
+    --cc-spacing-3:   #{$spacing-3};
+    --cc-spacing-4:   #{$spacing-4};
+    --cc-spacing-5:   #{$spacing-5};
+    --cc-spacing-6:   #{$spacing-6};
+    --cc-spacing-7:   #{$spacing-7};
+    --cc-spacing-8:   #{$spacing-8};
+    --cc-spacing-10:  #{$spacing-10};
+    --cc-spacing-12:  #{$spacing-12};
+    --cc-spacing-16:  #{$spacing-16};
+
+    // --- Layout tokens ---
+    --cc-nav-rail-collapsed:  #{$nav-rail-collapsed-width};
+    --cc-nav-rail-expanded:   #{$nav-rail-expanded-width};
+    --cc-header-height:        #{$header-height};
+    --cc-bottom-nav-height:   #{$bottom-nav-height};
+    --cc-card-radius:         #{$card-border-radius};
+    --cc-card-min-width:      #{$card-min-width};
+
+    // --- Radius tokens ---
+    --cc-radius-none:  #{$radius-none};
+    --cc-radius-xs:    #{$radius-xs};
+    --cc-radius-sm:    #{$radius-sm};
+    --cc-radius-md:    #{$radius-md};
+    --cc-radius-lg:    #{$radius-lg};
+    --cc-radius-xl:    #{$radius-xl};
+    --cc-radius-full:  #{$radius-full};
+
+    // --- Shadow tokens ---
+    --cc-shadow-0: #{$shadow-level-0};
+    --cc-shadow-1: #{$shadow-level-1};
+    --cc-shadow-2: #{$shadow-level-2};
+    --cc-shadow-3: #{$shadow-level-3};
+    --cc-shadow-4: #{$shadow-level-4};
+
+    // --- Motion tokens ---
+    --cc-duration-fast:     #{$duration-fast};
+    --cc-duration-short:    #{$duration-short};
+    --cc-duration-medium:   #{$duration-medium};
+    --cc-duration-standard: #{$duration-standard};
+    --cc-duration-long:     #{$duration-long};
+
+    --cc-easing-standard:   #{$easing-standard};
+    --cc-easing-decelerate: #{$easing-decelerate};
+    --cc-easing-accelerate: #{$easing-accelerate};
+
+    // --- Accessibility tokens ---
+    --cc-focus-width:  #{$focus-ring-width};
+    --cc-focus-offset: #{$focus-ring-offset};
+    --cc-focus-color:  #{$focus-ring-color};
+    --cc-touch-min:    #{$min-touch-target};
+  }
+}

frontend/src/styles/_tokens.scss

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

frontend/src/styles/_utilities.scss

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

go-backend/cmd/server/main.go

@@ -0,0 +1,88 @@
+// Command server starts the Control Center Go backend API server.
+package main
+
+import (
+	"context"
+	"fmt"
+	"log/slog"
+	"net/http"
+	"os"
+	"os/signal"
+	"syscall"
+	"time"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/config"
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/handler"
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/router"
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/store"
+)
+
+func main() {
+	// ── Configuration ──────────────────────────────────────────────────────
+	cfg := config.Load()
+
+	// ── Logging ────────────────────────────────────────────────────────────
+	logger := slog.New(slog.NewJSONHandler(os.Stdout, &slog.HandlerOptions{
+		Level: parseLogLevel(cfg.LogLevel),
+	}))
+	slog.SetDefault(logger)
+
+	// ── Stores (in-memory for now; PostgreSQL after CUB-120) ────────────────
+	agentStore := store.NewAgentStore()
+	sessionStore := store.NewSessionStore()
+	taskStore := store.NewTaskStore()
+	projectStore := store.NewProjectStore()
+
+	// ── HTTP handler ───────────────────────────────────────────────────────
+	h := handler.NewHandler(agentStore, sessionStore, taskStore, projectStore)
+
+	// ── Router ─────────────────────────────────────────────────────────────
+	r := router.New(h)
+
+	// ── Server ─────────────────────────────────────────────────────────────
+	srv := &http.Server{
+		Addr:         fmt.Sprintf(":%d", cfg.Port),
+		Handler:      r,
+		ReadTimeout:  10 * time.Second,
+		WriteTimeout: 15 * time.Second,
+		IdleTimeout:  60 * time.Second,
+	}
+
+	// Graceful shutdown
+	quit := make(chan os.Signal, 1)
+	signal.Notify(quit, syscall.SIGINT, syscall.SIGTERM)
+
+	go func() {
+		slog.Info("server starting", "port", cfg.Port, "env", cfg.Environment)
+		if err := srv.ListenAndServe(); err != nil && err != http.ErrServerClosed {
+			slog.Error("server failed", "error", err)
+			os.Exit(1)
+		}
+	}()
+
+	<-quit
+	slog.Info("shutting down server...")
+
+	ctx, cancel := context.WithTimeout(context.Background(), 15*time.Second)
+	defer cancel()
+
+	if err := srv.Shutdown(ctx); err != nil {
+		slog.Error("server forced to shutdown", "error", err)
+		os.Exit(1)
+	}
+
+	slog.Info("server exited cleanly")
+}
+
+func parseLogLevel(level string) slog.Level {
+	switch level {
+	case "debug":
+		return slog.LevelDebug
+	case "warn":
+		return slog.LevelWarn
+	case "error":
+		return slog.LevelError
+	default:
+		return slog.LevelInfo
+	}
+}

go-backend/go.mod

@@ -0,0 +1,21 @@
+module code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend
+
+go 1.23
+
+require (
+	github.com/go-chi/chi/v5 v5.2.0
+	github.com/go-chi/cors v1.2.1
+	github.com/go-playground/validator/v10 v10.24.0
+	github.com/google/uuid v1.6.0
+)
+
+require (
+	github.com/gabriel-vasile/mimetype v1.4.8 // indirect
+	github.com/go-playground/locales v0.14.1 // indirect
+	github.com/go-playground/universal-translator v0.18.1 // indirect
+	github.com/leodido/go-urn v1.4.0 // indirect
+	golang.org/x/crypto v0.32.0 // indirect
+	golang.org/x/net v0.34.0 // indirect
+	golang.org/x/sys v0.29.0 // indirect
+	golang.org/x/text v0.21.0 // indirect
+)

go-backend/go.sum

@@ -0,0 +1,34 @@
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/gabriel-vasile/mimetype v1.4.8 h1:FfZ3gj38NjllZIeJAmMhr+qKL8Wu+nOoI3GqacKw1NM=
+github.com/gabriel-vasile/mimetype v1.4.8/go.mod h1:ByKUIKGjh1ODkGM1asKUbQZOLGrPjydw3hYPU2YU9t8=
+github.com/go-chi/chi/v5 v5.2.0 h1:Aj1EtB0qR2Rdo2dG4O94RIU35w2lvQSj6BRA4+qwFL0=
+github.com/go-chi/chi/v5 v5.2.0/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
+github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
+github.com/go-chi/cors v1.2.1/go.mod h1:sSbTewc+6wYHBBCW7ytsFSn836hqM7JxpglAy2Vzc58=
+github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
+github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
+github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
+github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
+github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
+github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
+github.com/go-playground/validator/v10 v10.24.0 h1:KHQckvo8G6hlWnrPX4NJJ+aBfWNAE/HH+qdL2cBpCmg=
+github.com/go-playground/validator/v10 v10.24.0/go.mod h1:GGzBIJMuE98Ic/kJsBXbz1x/7cByt++cQ+YOuDM5wus=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
+github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+golang.org/x/crypto v0.32.0 h1:euUpcYgM8WcP71gNpTqQCn6rC2t6ULUPiOzfWaXVVfc=
+golang.org/x/crypto v0.32.0/go.mod h1:ZnnJkOaASj8g0AjIduWNlq2NRxL0PlBrbKVyZ6V/Ugc=
+golang.org/x/net v0.34.0 h1:Mb7Mrk043xzHgnRM88suvJFwzVrRfHEHJEl5/71CKw0=
+golang.org/x/net v0.34.0/go.mod h1:di0qlW3YNM5oh6GqDGQr92MyTozJPmybPK4Ev/Gm31k=
+golang.org/x/sys v0.29.0 h1:TPYlXGxvx1MGTn2GiZDhnjPA9wZzZeGKHHmKhHYvgaU=
+golang.org/x/sys v0.29.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/text v0.21.0 h1:zyQAAkrwaneQ066sspRyJaG9VNi/YJ1NfzcGB3hZ/qo=
+golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

go-backend/internal/config/config.go

@@ -0,0 +1,45 @@
+// Package config provides application configuration loaded from environment
+// variables with sensible defaults for local development.
+package config
+
+import (
+	"os"
+	"strconv"
+)
+
+// Config holds all application configuration.
+type Config struct {
+	Port         int
+	DatabaseURL  string
+	CORSOrigin   string
+	LogLevel     string
+	Environment  string
+}
+
+// Load reads configuration from environment variables, applying defaults where
+// values are not set. All secrets come from the environment — nothing is hardcoded.
+func Load() *Config {
+	return &Config{
+		Port:        getEnvInt("PORT", 8080),
+		DatabaseURL: getEnv("DATABASE_URL", "postgres://controlcenter:controlcenter@localhost:5432/controlcenter?sslmode=disable"),
+		CORSOrigin:  getEnv("CORS_ORIGIN", "*"),
+		LogLevel:    getEnv("LOG_LEVEL", "info"),
+		Environment: getEnv("ENVIRONMENT", "development"),
+	}
+}
+
+func getEnv(key, fallback string) string {
+	if v := os.Getenv(key); v != "" {
+		return v
+	}
+	return fallback
+}
+
+func getEnvInt(key string, fallback int) int {
+	if v := os.Getenv(key); v != "" {
+		if i, err := strconv.Atoi(v); err == nil {
+			return i
+		}
+	}
+	return fallback
+}

go-backend/internal/handler/agent.go

@@ -0,0 +1,158 @@
+// Package handler contains HTTP handlers for the Control Center API.
+// Each handler is a method on a Handler struct that receives its
+// dependencies (stores) through dependency injection.
+package handler
+
+import (
+	"encoding/json"
+	"net/http"
+	"time"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/models"
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/store"
+	"github.com/go-chi/chi/v5"
+	"github.com/go-playground/validator/v10"
+)
+
+// Handler groups all route handlers and their dependencies.
+type Handler struct {
+	AgentStore   *store.AgentStore
+	SessionStore *store.SessionStore
+	TaskStore    *store.TaskStore
+	ProjectStore *store.ProjectStore
+	validate     *validator.Validate
+}
+
+// NewHandler returns a fully wired Handler.
+func NewHandler(
+	as *store.AgentStore,
+	ss *store.SessionStore,
+	ts *store.TaskStore,
+	ps *store.ProjectStore,
+) *Handler {
+	v := validator.New()
+	v.RegisterValidation("agentStatus", validateAgentStatus)
+	return &Handler{
+		AgentStore:   as,
+		SessionStore: ss,
+		TaskStore:    ts,
+		ProjectStore: ps,
+		validate:     v,
+	}
+}
+
+// ─── Agent Handlers ────────────────────────────────────────────────────────────
+
+// ListAgents handles GET /api/agents.
+func (h *Handler) ListAgents(w http.ResponseWriter, r *http.Request) {
+	statusFilter := models.AgentStatus(r.URL.Query().Get("status"))
+	allAgents := h.AgentStore.List(statusFilter)
+
+	page, pageSize := parsePagination(r)
+	start, end := paginateSlice(len(allAgents), page, pageSize)
+
+	pageSlice := allAgents[start:end]
+	writeJSON(w, http.StatusOK, models.PaginatedResponse{
+		Data:       pageSlice,
+		TotalCount: h.AgentStore.Count(),
+		Page:       page,
+		PageSize:   pageSize,
+		HasMore:    end < len(allAgents),
+	})
+}
+
+// GetAgent handles GET /api/agents/{id}.
+func (h *Handler) GetAgent(w http.ResponseWriter, r *http.Request) {
+	id := chi.URLParam(r, "id")
+	agent, ok := h.AgentStore.Get(id)
+	if !ok {
+		writeJSON(w, http.StatusNotFound, models.ErrorResponse{Error: "agent not found"})
+		return
+	}
+	writeJSON(w, http.StatusOK, agent)
+}
+
+// CreateAgent handles POST /api/agents.
+func (h *Handler) CreateAgent(w http.ResponseWriter, r *http.Request) {
+	var req models.CreateAgentRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		writeJSON(w, http.StatusBadRequest, models.ErrorResponse{Error: "invalid request body"})
+		return
+	}
+
+	if err := h.validate.Struct(req); err != nil {
+		writeJSON(w, http.StatusUnprocessableEntity, models.ErrorResponse{
+			Error:   "validation failed",
+			Details: validationErrors(err),
+		})
+		return
+	}
+
+	agent := models.AgentCardData{
+		ID:          req.ID,
+		DisplayName: req.DisplayName,
+		Role:        req.Role,
+		Status:      req.Status,
+		CurrentTask: req.CurrentTask,
+		SessionKey:  req.SessionKey,
+		Channel:     req.Channel,
+		LastActivity: time.Now().UTC().Format(time.RFC3339),
+	}
+
+	if ok := h.AgentStore.Create(agent); !ok {
+		writeJSON(w, http.StatusConflict, models.ErrorResponse{Error: "agent with this ID already exists"})
+		return
+	}
+	writeJSON(w, http.StatusCreated, agent)
+}
+
+// UpdateAgent handles PUT /api/agents/{id}.
+func (h *Handler) UpdateAgent(w http.ResponseWriter, r *http.Request) {
+	id := chi.URLParam(r, "id")
+
+	var req models.UpdateAgentRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		writeJSON(w, http.StatusBadRequest, models.ErrorResponse{Error: "invalid request body"})
+		return
+	}
+
+	if err := h.validate.Struct(req); err != nil {
+		writeJSON(w, http.StatusUnprocessableEntity, models.ErrorResponse{
+			Error:   "validation failed",
+			Details: validationErrors(err),
+		})
+		return
+	}
+
+	agent, ok := h.AgentStore.Update(id, req)
+	if !ok {
+		writeJSON(w, http.StatusNotFound, models.ErrorResponse{Error: "agent not found"})
+		return
+	}
+	writeJSON(w, http.StatusOK, agent)
+}
+
+// DeleteAgent handles DELETE /api/agents/{id}.
+func (h *Handler) DeleteAgent(w http.ResponseWriter, r *http.Request) {
+	id := chi.URLParam(r, "id")
+	if ok := h.AgentStore.Delete(id); !ok {
+		writeJSON(w, http.StatusNotFound, models.ErrorResponse{Error: "agent not found"})
+		return
+	}
+	w.WriteHeader(http.StatusNoContent)
+}
+
+// AgentHistory handles GET /api/agents/{id}/history.
+func (h *Handler) AgentHistory(w http.ResponseWriter, r *http.Request) {
+	id := chi.URLParam(r, "id")
+	if _, ok := h.AgentStore.Get(id); !ok {
+		writeJSON(w, http.StatusNotFound, models.ErrorResponse{Error: "agent not found"})
+		return
+	}
+
+	history := h.AgentStore.History(id)
+	if history == nil {
+		history = []models.AgentStatusHistoryEntry{}
+	}
+	writeJSON(w, http.StatusOK, history)
+}

go-backend/internal/handler/handler_test.go

@@ -0,0 +1,369 @@
+package handler
+
+import (
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/models"
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/store"
+	"github.com/go-chi/chi/v5"
+)
+
+// testHandler creates a Handler wired to fresh in-memory stores for testing.
+func testHandler(t *testing.T) *Handler {
+	t.Helper()
+	return NewHandler(
+		store.NewAgentStore(),
+		store.NewSessionStore(),
+		store.NewTaskStore(),
+		store.NewProjectStore(),
+	)
+}
+
+// serveChi creates a chi.Mux with the standard routes registered, then
+// serves a request against it. Returns the recorded response.
+func serveChi(h *Handler, method, path, body string) *httptest.ResponseRecorder {
+	w := httptest.NewRecorder()
+	req := httptest.NewRequest(method, path, strings.NewReader(body))
+	req.Header.Set("Content-Type", "application/json")
+
+	r := chi.NewRouter()
+	r.Route("/api", func(api chi.Router) {
+		api.Route("/agents", func(agents chi.Router) {
+			agents.Get("/", h.ListAgents)
+			agents.Post("/", h.CreateAgent)
+			agents.Get("/{id}", h.GetAgent)
+			agents.Put("/{id}", h.UpdateAgent)
+			agents.Delete("/{id}", h.DeleteAgent)
+			agents.Get("/{id}/history", h.AgentHistory)
+		})
+		api.Get("/sessions", h.ListSessions)
+		api.Get("/tasks", h.ListTasks)
+		api.Get("/projects", h.ListProjects)
+	})
+	r.ServeHTTP(w, req)
+	return w
+}
+
+func parseBody(t *testing.T, w *httptest.ResponseRecorder) map[string]any {
+	t.Helper()
+	var body map[string]any
+	if err := json.NewDecoder(w.Result().Body).Decode(&body); err != nil {
+		t.Fatalf("failed to decode body: %v", err)
+	}
+	return body
+}
+
+func parseAgent(t *testing.T, w *httptest.ResponseRecorder) models.AgentCardData {
+	t.Helper()
+	var a models.AgentCardData
+	if err := json.NewDecoder(w.Result().Body).Decode(&a); err != nil {
+		t.Fatalf("failed to decode agent: %v", err)
+	}
+	return a
+}
+
+func parsePaginated(t *testing.T, w *httptest.ResponseRecorder) models.PaginatedResponse {
+	t.Helper()
+	var pr models.PaginatedResponse
+	if err := json.NewDecoder(w.Result().Body).Decode(&pr); err != nil {
+		t.Fatalf("failed to decode paginated response: %v", err)
+	}
+	return pr
+}
+
+// ─── Agent Tests ───────────────────────────────────────────────────────────────
+
+func TestCreateAgent_Success(t *testing.T) {
+	h := testHandler(t)
+	w := serveChi(h, "POST", "/api/agents", `{
+		"id": "dex",
+		"displayName": "Dex",
+		"role": "Backend Dev",
+		"status": "idle",
+		"sessionKey": "sess-1",
+		"channel": "discord"
+	}`)
+
+	if w.Code != http.StatusCreated {
+		t.Fatalf("expected 201, got %d: %s", w.Code, w.Body.String())
+	}
+
+	a := parseAgent(t, w)
+	if a.ID != "dex" {
+		t.Errorf("expected id=dax, got %s", a.ID)
+	}
+	if a.Status != models.AgentStatusIdle {
+		t.Errorf("expected status=idle, got %s", a.Status)
+	}
+}
+
+func TestCreateAgent_Duplicate(t *testing.T) {
+	h := testHandler(t)
+	serveChi(h, "POST", "/api/agents", `{"id":"otto","displayName":"Otto","role":"Orchestrator","status":"active","sessionKey":"s1","channel":"discord"}`)
+	w := serveChi(h, "POST", "/api/agents", `{"id":"otto","displayName":"Otto","role":"Orchestrator","status":"active","sessionKey":"s2","channel":"discord"}`)
+
+	if w.Code != http.StatusConflict {
+		t.Fatalf("expected 409, got %d", w.Code)
+	}
+}
+
+func TestCreateAgent_Validation(t *testing.T) {
+	h := testHandler(t)
+	// Missing displayName
+	w := serveChi(h, "POST", "/api/agents", `{"id":"dex","status":"idle","sessionKey":"s1","channel":"discord"}`)
+	if w.Code != http.StatusUnprocessableEntity {
+		t.Fatalf("expected 422, got %d", w.Code)
+	}
+}
+
+func TestCreateAgent_InvalidStatus(t *testing.T) {
+	h := testHandler(t)
+	w := serveChi(h, "POST", "/api/agents", `{"id":"dex","displayName":"Dex","role":"Dev","status":"flying","sessionKey":"s1","channel":"discord"}`)
+	if w.Code != http.StatusUnprocessableEntity {
+		t.Fatalf("expected 422 for invalid status, got %d", w.Code)
+	}
+}
+
+func TestGetAgent_NotFound(t *testing.T) {
+	h := testHandler(t)
+	w := serveChi(h, "GET", "/api/agents/nonexistent", "")
+	if w.Code != http.StatusNotFound {
+		t.Fatalf("expected 404, got %d", w.Code)
+	}
+}
+
+func TestGetAgent_Success(t *testing.T) {
+	h := testHandler(t)
+	serveChi(h, "POST", "/api/agents", `{"id":"pip","displayName":"Pip","role":"Edge Dev","status":"idle","sessionKey":"s1","channel":"discord"}`)
+	w := serveChi(h, "GET", "/api/agents/pip", "")
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d", w.Code)
+	}
+	a := parseAgent(t, w)
+	if a.DisplayName != "Pip" {
+		t.Errorf("expected Pip, got %s", a.DisplayName)
+	}
+}
+
+func TestListAgents(t *testing.T) {
+	h := testHandler(t)
+	serveChi(h, "POST", "/api/agents", `{"id":"a1","displayName":"Alpha","role":"Tester","status":"idle","sessionKey":"s1","channel":"discord"}`)
+	serveChi(h, "POST", "/api/agents", `{"id":"a2","displayName":"Beta","role":"Tester","status":"active","sessionKey":"s2","channel":"discord"}`)
+
+	w := serveChi(h, "GET", "/api/agents", "")
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d", w.Code)
+	}
+
+	pr := parsePaginated(t, w)
+	if pr.TotalCount != 2 {
+		t.Errorf("expected totalCount=2, got %d", pr.TotalCount)
+	}
+}
+
+func TestListAgents_FilterByStatus(t *testing.T) {
+	h := testHandler(t)
+	serveChi(h, "POST", "/api/agents", `{"id":"a1","displayName":"Alpha","role":"Tester","status":"idle","sessionKey":"s1","channel":"discord"}`)
+	serveChi(h, "POST", "/api/agents", `{"id":"a2","displayName":"Beta","role":"Tester","status":"active","sessionKey":"s2","channel":"discord"}`)
+
+	w := serveChi(h, "GET", "/api/agents?status=active", "")
+	pr := parsePaginated(t, w)
+	if pr.TotalCount != 2 {
+		t.Errorf("expected totalCount=2 (unfiltered), got %d", pr.TotalCount)
+	}
+}
+
+func TestUpdateAgent(t *testing.T) {
+	h := testHandler(t)
+	serveChi(h, "POST", "/api/agents", `{"id":"hex","displayName":"Hex","role":"DB Specialist","status":"idle","sessionKey":"s1","channel":"discord"}`)
+
+	w := serveChi(h, "PUT", "/api/agents/hex", `{"status":"thinking","currentTask":"schema review"}`)
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", w.Code, w.Body.String())
+	}
+
+	a := parseAgent(t, w)
+	if a.Status != models.AgentStatusThinking {
+		t.Errorf("expected status=thinking, got %s", a.Status)
+	}
+	if a.CurrentTask == nil || *a.CurrentTask != "schema review" {
+		t.Errorf("expected currentTask=schema review")
+	}
+}
+
+func TestUpdateAgent_NotFound(t *testing.T) {
+	h := testHandler(t)
+	w := serveChi(h, "PUT", "/api/agents/nope", `{"status":"idle"}`)
+	if w.Code != http.StatusNotFound {
+		t.Fatalf("expected 404, got %d", w.Code)
+	}
+}
+
+func TestDeleteAgent(t *testing.T) {
+	h := testHandler(t)
+	serveChi(h, "POST", "/api/agents", `{"id":"temp","displayName":"Temp","role":"Temp","status":"idle","sessionKey":"s1","channel":"discord"}`)
+
+	w := serveChi(h, "DELETE", "/api/agents/temp", "")
+	if w.Code != http.StatusNoContent {
+		t.Fatalf("expected 204, got %d", w.Code)
+	}
+
+	// Verify gone
+	w2 := serveChi(h, "GET", "/api/agents/temp", "")
+	if w2.Code != http.StatusNotFound {
+		t.Fatalf("expected 404 after delete, got %d", w2.Code)
+	}
+}
+
+func TestAgentHistory(t *testing.T) {
+	h := testHandler(t)
+	serveChi(h, "POST", "/api/agents", `{"id":"nano","displayName":"Nano","role":"Firmware","status":"idle","sessionKey":"s1","channel":"discord"}`)
+	serveChi(h, "PUT", "/api/agents/nano", `{"status":"thinking","currentTask":"mqtt payload"}`)
+
+	w := serveChi(h, "GET", "/api/agents/nano/history", "")
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d", w.Code)
+	}
+
+	var entries []models.AgentStatusHistoryEntry
+	json.NewDecoder(w.Result().Body).Decode(&entries)
+	if len(entries) < 2 {
+		t.Errorf("expected at least 2 history entries, got %d", len(entries))
+	}
+	// Newest first — first entry should be "thinking"
+	if entries[0].Status != models.AgentStatusThinking {
+		t.Errorf("expected newest entry status=thinking, got %s", entries[0].Status)
+	}
+}
+
+func TestAgentHistory_NotFound(t *testing.T) {
+	h := testHandler(t)
+	w := serveChi(h, "GET", "/api/agents/ghost/history", "")
+	if w.Code != http.StatusNotFound {
+		t.Fatalf("expected 404, got %d", w.Code)
+	}
+}
+
+// ─── Session Tests ─────────────────────────────────────────────────────────════
+
+func TestListSessions_Empty(t *testing.T) {
+	h := testHandler(t)
+	w := serveChi(h, "GET", "/api/sessions", "")
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d", w.Code)
+	}
+	pr := parsePaginated(t, w)
+	if pr.TotalCount != 0 {
+		t.Errorf("expected 0 sessions, got %d", pr.TotalCount)
+	}
+}
+
+func TestListSessions_WithData(t *testing.T) {
+	h := testHandler(t)
+	h.SessionStore.Create(models.Session{
+		SessionKey: "sess-1",
+		AgentID:    "dex",
+		Channel:    "discord",
+		Status:     "running",
+		Model:      "deepseek-v4",
+	})
+	h.SessionStore.Create(models.Session{
+		SessionKey: "sess-2",
+		AgentID:    "otto",
+		Channel:    "discord",
+		Status:     "done",
+		Model:      "deepseek-v4",
+	})
+
+	w := serveChi(h, "GET", "/api/sessions", "")
+	pr := parsePaginated(t, w)
+	if pr.TotalCount != 2 {
+		t.Errorf("expected totalCount=2, got %d", pr.TotalCount)
+	}
+}
+
+// ─── Task Tests ────────────────────────────────────────────────────────────────
+
+func TestListTasks_Empty(t *testing.T) {
+	h := testHandler(t)
+	w := serveChi(h, "GET", "/api/tasks", "")
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d", w.Code)
+	}
+}
+
+func TestListTasks_WithData(t *testing.T) {
+	h := testHandler(t)
+	h.TaskStore.Create(models.Task{
+		AgentID: "dex",
+		Title:   "Implement CRUD API",
+		Status:  models.TaskStatusRunning,
+	})
+
+	w := serveChi(h, "GET", "/api/tasks", "")
+	pr := parsePaginated(t, w)
+	if pr.TotalCount != 1 {
+		t.Errorf("expected totalCount=1, got %d", pr.TotalCount)
+	}
+}
+
+// ─── Project Tests ─────────────────────────────────────────────────────────────
+
+func TestListProjects_Empty(t *testing.T) {
+	h := testHandler(t)
+	w := serveChi(h, "GET", "/api/projects", "")
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d", w.Code)
+	}
+}
+
+func TestListProjects_WithData(t *testing.T) {
+	h := testHandler(t)
+	h.ProjectStore.Create(models.Project{
+		Name:        "Extrudex",
+		Description: "Filament inventory system",
+		Status:      models.ProjectStatusActive,
+	})
+
+	w := serveChi(h, "GET", "/api/projects", "")
+	pr := parsePaginated(t, w)
+	if pr.TotalCount != 1 {
+		t.Errorf("expected totalCount=1, got %d", pr.TotalCount)
+	}
+}
+
+// ─── Pagination Tests ─────────────────────────────────────────────────────────
+
+func TestPagination_PageOutOfRange(t *testing.T) {
+	h := testHandler(t)
+	serveChi(h, "POST", "/api/agents", `{"id":"a1","displayName":"A1","role":"T","status":"idle","sessionKey":"s1","channel":"discord"}`)
+
+	w := serveChi(h, "GET", "/api/agents?page=99", "")
+	pr := parsePaginated(t, w)
+	if len(pr.Data.([]any)) != 0 {
+		t.Errorf("expected empty page, got %d items", len(pr.Data.([]any)))
+	}
+	// HasMore=false because we're past all data — nothing more to fetch.
+	if pr.HasMore {
+		t.Error("expected HasMore=false when page is beyond data")
+	}
+}
+
+func TestPagination_PageSize(t *testing.T) {
+	h := testHandler(t)
+	for i := range 5 {
+		id := string(rune('a' + i))
+		serveChi(h, "POST", "/api/agents", `{"id":"`+string(id)+`","displayName":"`+string(id)+`","role":"T","status":"idle","sessionKey":"s1","channel":"discord"}`)
+	}
+
+	w := serveChi(h, "GET", "/api/agents?pageSize=2&page=2", "")
+	pr := parsePaginated(t, w)
+	if pr.PageSize != 2 {
+		t.Errorf("expected pageSize=2, got %d", pr.PageSize)
+	}
+}

go-backend/internal/handler/helpers.go

@@ -0,0 +1,106 @@
+package handler
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strconv"
+	"strings"
+
+	"github.com/go-playground/validator/v10"
+)
+
+// ─── Pagination ────────────────────────────────────────────────────────────────
+
+const (
+	defaultPage     = 1
+	defaultPageSize = 20
+	maxPageSize     = 100
+)
+
+// parsePagination extracts page and pageSize query params from the request.
+func parsePagination(r *http.Request) (page, pageSize int) {
+	page = defaultPage
+	pageSize = defaultPageSize
+
+	if p := r.URL.Query().Get("page"); p != "" {
+		if n, err := strconv.Atoi(p); err == nil && n > 0 {
+			page = n
+		}
+	}
+	if ps := r.URL.Query().Get("pageSize"); ps != "" {
+		if n, err := strconv.Atoi(ps); err == nil && n > 0 {
+			if n > maxPageSize {
+				n = maxPageSize
+			}
+			pageSize = n
+		}
+	}
+	return page, pageSize
+}
+
+// paginateSlice computes the start and end indexes for a page of `total` items.
+// Bounds are clamped to [0, total].
+func paginateSlice(total, page, pageSize int) (start, end int) {
+	start = (page - 1) * pageSize
+	if start > total {
+		start = total
+	}
+	end = start + pageSize
+	if end > total {
+		end = total
+	}
+	return start, end
+}
+
+// ─── JSON Helpers ─────────────────────────────────────────────────────────────
+
+// writeJSON marshals v as JSON and writes it to w with the given status code.
+func writeJSON(w http.ResponseWriter, status int, v any) {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(status)
+	if v == nil {
+		return
+	}
+	if err := json.NewEncoder(w).Encode(v); err != nil {
+		http.Error(w, `{"error":"internal encoding error"}`, http.StatusInternalServerError)
+	}
+}
+
+// ─── Validation ───────────────────────────────────────────────────────────────
+
+// validationErrors converts a validator.ValidationErrors into a string map
+// suitable for the ErrorResponse details field.
+func validationErrors(err error) map[string]string {
+	details := make(map[string]string)
+	if verrs, ok := err.(validator.ValidationErrors); ok {
+		for _, fe := range verrs {
+			field := strings.ToLower(fe.Field())
+			details[field] = fieldError(fe)
+		}
+	}
+	return details
+}
+
+func fieldError(fe validator.FieldError) string {
+	switch fe.Tag() {
+	case "required":
+		return "this field is required"
+	case "min":
+		return fmt.Sprintf("must be at least %s characters", fe.Param())
+	case "max":
+		return fmt.Sprintf("must be at most %s characters", fe.Param())
+	default:
+		return fmt.Sprintf("failed validation: %s", fe.Tag())
+	}
+}
+
+// validateAgentStatus is a custom validator for AgentStatus values.
+func validateAgentStatus(fl validator.FieldLevel) bool {
+	if status, ok := fl.Field().Interface().(interface {
+		IsValid() bool
+	}); ok {
+		return status.IsValid()
+	}
+	return false
+}

go-backend/internal/handler/project.go

@@ -0,0 +1,28 @@
+package handler
+
+import (
+	"net/http"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/models"
+)
+
+// ─── Project Handlers ──────────────────────────────────────────────────────────
+
+// ListProjects handles GET /api/projects.
+func (h *Handler) ListProjects(w http.ResponseWriter, r *http.Request) {
+	projects := h.ProjectStore.List()
+	if projects == nil {
+		projects = []models.Project{}
+	}
+
+	page, pageSize := parsePagination(r)
+	start, end := paginateSlice(len(projects), page, pageSize)
+
+	writeJSON(w, http.StatusOK, models.PaginatedResponse{
+		Data:       projects[start:end],
+		TotalCount: h.ProjectStore.Count(),
+		Page:       page,
+		PageSize:   pageSize,
+		HasMore:    end < len(projects),
+	})
+}

go-backend/internal/handler/session.go

@@ -0,0 +1,28 @@
+package handler
+
+import (
+	"net/http"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/models"
+)
+
+// ─── Session Handlers ──────────────────────────────────────────────────────────
+
+// ListSessions handles GET /api/sessions.
+func (h *Handler) ListSessions(w http.ResponseWriter, r *http.Request) {
+	sessions := h.SessionStore.ListActive()
+	if sessions == nil {
+		sessions = []models.Session{}
+	}
+
+	page, pageSize := parsePagination(r)
+	start, end := paginateSlice(len(sessions), page, pageSize)
+
+	writeJSON(w, http.StatusOK, models.PaginatedResponse{
+		Data:       sessions[start:end],
+		TotalCount: h.SessionStore.Count(),
+		Page:       page,
+		PageSize:   pageSize,
+		HasMore:    end < len(sessions),
+	})
+}

go-backend/internal/handler/task.go

@@ -0,0 +1,28 @@
+package handler
+
+import (
+	"net/http"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/models"
+)
+
+// ─── Task Handlers ─────────────────────────────────────────────────────────────
+
+// ListTasks handles GET /api/tasks.
+func (h *Handler) ListTasks(w http.ResponseWriter, r *http.Request) {
+	tasks := h.TaskStore.ListRecent()
+	if tasks == nil {
+		tasks = []models.Task{}
+	}
+
+	page, pageSize := parsePagination(r)
+	start, end := paginateSlice(len(tasks), page, pageSize)
+
+	writeJSON(w, http.StatusOK, models.PaginatedResponse{
+		Data:       tasks[start:end],
+		TotalCount: h.TaskStore.Count(),
+		Page:       page,
+		PageSize:   pageSize,
+		HasMore:    end < len(tasks),
+	})
+}

go-backend/internal/models/models.go

@@ -0,0 +1,165 @@
+// Package models defines the domain types and API contracts for the
+// Control Center Go backend. These types map to the existing TypeScript
+// AgentCardData interface and extend it with persistence-focused types
+// for the new session, task, and project entities.
+//
+// All JSON field names use camelCase to match the existing frontend
+// contract established by the .NET backend.
+package models
+
+import "time"
+
+// ─── Agent Status ──────────────────────────────────────────────────────────────
+
+// AgentStatus represents an agent's operational status.
+// Maps to the frontend status values: active, idle, thinking, error.
+type AgentStatus string
+
+const (
+	AgentStatusActive   AgentStatus = "active"
+	AgentStatusIdle     AgentStatus = "idle"
+	AgentStatusThinking AgentStatus = "thinking"
+	AgentStatusError    AgentStatus = "error"
+)
+
+// IsValid reports whether s is a known agent status.
+func (s AgentStatus) IsValid() bool {
+	switch s {
+	case AgentStatusActive, AgentStatusIdle, AgentStatusThinking, AgentStatusError:
+		return true
+	default:
+		return false
+	}
+}
+
+// ─── Agent ─────────────────────────────────────────────────────────────────────
+
+// AgentCardData is the primary data shape consumed by the Command Hub frontend.
+// It matches the TypeScript AgentCardData interface exactly.
+type AgentCardData struct {
+	ID           string      `json:"id"`
+	DisplayName  string      `json:"displayName"`
+	Role         string      `json:"role"`
+	Status       AgentStatus `json:"status"`
+	CurrentTask  *string     `json:"currentTask,omitempty"`
+	TaskProgress *int        `json:"taskProgress,omitempty"`
+	TaskElapsed  *string     `json:"taskElapsed,omitempty"`
+	SessionKey   string      `json:"sessionKey"`
+	Channel      string      `json:"channel"`
+	LastActivity string      `json:"lastActivity"`
+	ErrorMessage *string     `json:"errorMessage,omitempty"`
+}
+
+// CreateAgentRequest is the payload for POST /api/agents.
+type CreateAgentRequest struct {
+	ID          string      `json:"id" validate:"required,min=2,max=64"`
+	DisplayName string      `json:"displayName" validate:"required,min=1,max=128"`
+	Role        string      `json:"role" validate:"required,min=1,max=256"`
+	Status      AgentStatus `json:"status" validate:"required,agentStatus"`
+	SessionKey  string      `json:"sessionKey" validate:"required,min=1"`
+	Channel     string      `json:"channel" validate:"required,min=1,max=32"`
+	CurrentTask *string     `json:"currentTask,omitempty"`
+}
+
+// UpdateAgentRequest is the payload for PUT /api/agents/{id}.
+type UpdateAgentRequest struct {
+	Status       *AgentStatus `json:"status,omitempty" validate:"omitempty,agentStatus"`
+	CurrentTask  *string      `json:"currentTask,omitempty"`
+	TaskProgress *int         `json:"taskProgress,omitempty" validate:"omitempty,min=0,max=100"`
+	TaskElapsed  *string      `json:"taskElapsed,omitempty"`
+	Channel      *string      `json:"channel,omitempty" validate:"omitempty,min=1,max=32"`
+	ErrorMessage *string      `json:"errorMessage,omitempty"`
+}
+
+// AgentStatusHistoryEntry represents a point-in-time status change for an agent.
+type AgentStatusHistoryEntry struct {
+	ID        string      `json:"id"`
+	AgentID   string      `json:"agentId"`
+	Status    AgentStatus `json:"status"`
+	Task      *string     `json:"task,omitempty"`
+	Timestamp string      `json:"timestamp"`
+}
+
+// ─── Session ───────────────────────────────────────────────────────────────────
+
+// Session represents an active agent session tracked by the system.
+type Session struct {
+	ID             string    `json:"id"`
+	SessionKey     string    `json:"sessionKey"`
+	AgentID        string    `json:"agentId"`
+	Channel        string    `json:"channel"`
+	Status         string    `json:"status"` // running, done, streaming, error
+	ContextTokens  int       `json:"contextTokens"`
+	TotalTokens    int       `json:"totalTokens"`
+	EstimatedCost  float64   `json:"estimatedCost"`
+	Model          string    `json:"model"`
+	StartedAt      time.Time `json:"startedAt"`
+	LastActivityAt time.Time `json:"lastActivityAt"`
+}
+
+// ─── Task ───────────────────────────────────────────────────────────────────────
+
+// TaskStatus represents the lifecycle state of a tracked task.
+type TaskStatus string
+
+const (
+	TaskStatusPending   TaskStatus = "pending"
+	TaskStatusRunning   TaskStatus = "running"
+	TaskStatusCompleted TaskStatus = "completed"
+	TaskStatusFailed    TaskStatus = "failed"
+)
+
+// Task represents a tracked task assigned to an agent.
+type Task struct {
+	ID          string     `json:"id"`
+	AgentID     string     `json:"agentId"`
+	Title       string     `json:"title"`
+	Description string     `json:"description"`
+	Status      TaskStatus `json:"status"`
+	Progress    *int       `json:"progress,omitempty"`
+	SessionKey  string     `json:"sessionKey"`
+	CreatedAt   time.Time  `json:"createdAt"`
+	UpdatedAt   time.Time  `json:"updatedAt"`
+}
+
+// ─── Project ────────────────────────────────────────────────────────────────────
+
+// ProjectStatus represents the lifecycle state of a project.
+type ProjectStatus string
+
+const (
+	ProjectStatusPlanned   ProjectStatus = "planned"
+	ProjectStatusActive    ProjectStatus = "active"
+	ProjectStatusPaused    ProjectStatus = "paused"
+	ProjectStatusCompleted ProjectStatus = "completed"
+)
+
+// Project represents a project tracked in the system.
+type Project struct {
+	ID          string        `json:"id"`
+	Name        string        `json:"name"`
+	Description string        `json:"description"`
+	Status      ProjectStatus `json:"status"`
+	AgentIDs    []string      `json:"agentIds"`
+	CreatedAt   time.Time     `json:"createdAt"`
+	UpdatedAt   time.Time     `json:"updatedAt"`
+}
+
+// ─── Pagination ────────────────────────────────────────────────────────────────
+
+// PaginatedResponse wraps a list response with pagination metadata.
+type PaginatedResponse struct {
+	Data       any  `json:"data"`
+	TotalCount int  `json:"totalCount"`
+	Page       int  `json:"page"`
+	PageSize   int  `json:"pageSize"`
+	HasMore    bool `json:"hasMore"`
+}
+
+// ─── Error ─────────────────────────────────────────────────────────────────────
+
+// ErrorResponse is the standard API error envelope.
+type ErrorResponse struct {
+	Error   string            `json:"error"`
+	Details map[string]string `json:"details,omitempty"`
+}

go-backend/internal/router/router.go

@@ -0,0 +1,65 @@
+// Package router configures the chi router with all routes, middleware,
+// and handler wiring for the Control Center API.
+package router
+
+import (
+	"net/http"
+	"time"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/handler"
+	"github.com/go-chi/chi/v5"
+	"github.com/go-chi/chi/v5/middleware"
+	"github.com/go-chi/cors"
+)
+
+// New creates a fully-configured chi router with all API routes mounted.
+func New(h *handler.Handler) *chi.Mux {
+	r := chi.NewRouter()
+
+	// ── Global middleware ──────────────────────────────────────────────────
+	r.Use(middleware.RequestID)
+	r.Use(middleware.RealIP)
+	r.Use(middleware.Logger)
+	r.Use(middleware.Recoverer)
+	r.Use(middleware.Timeout(30 * time.Second))
+
+	// ── CORS — permissive for development ──────────────────────────────────
+	r.Use(cors.Handler(cors.Options{
+		AllowedOrigins:   []string{"*"},
+		AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
+		AllowedHeaders:   []string{"Accept", "Authorization", "Content-Type"},
+		ExposedHeaders:   []string{"Link", "X-Total-Count"},
+		AllowCredentials: false,
+		MaxAge:           300,
+	}))
+
+	// ── Health check ───────────────────────────────────────────────────────
+	r.Get("/health", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Type", "application/json")
+		w.Write([]byte(`{"status":"ok"}`))
+	})
+
+	// ── API v1 routes ──────────────────────────────────────────────────────
+	r.Route("/api", func(api chi.Router) {
+		// Agents CRUD
+		api.Route("/agents", func(agents chi.Router) {
+			agents.Get("/", h.ListAgents)       // GET /api/agents
+			agents.Post("/", h.CreateAgent)      // POST /api/agents
+			agents.Get("/{id}", h.GetAgent)       // GET /api/agents/{id}
+			agents.Put("/{id}", h.UpdateAgent)    // PUT /api/agents/{id}
+			agents.Delete("/{id}", h.DeleteAgent) // DELETE /api/agents/{id}
+			agents.Get("/{id}/history", h.AgentHistory) // GET /api/agents/{id}/history
+		})
+
+		// Sessions
+		api.Get("/sessions", h.ListSessions)
+
+		// Tasks
+		api.Get("/tasks", h.ListTasks)
+
+		// Projects
+		api.Get("/projects", h.ListProjects)
+	})
+
+	return r
+}

go-backend/internal/store/agent.go

@@ -0,0 +1,177 @@
+// Package store provides thread-safe in-memory data stores for the
+// Control Center API. These will be replaced with PostgreSQL-backed
+// implementations once CUB-120 (schema design) is complete.
+package store
+
+import (
+	"sort"
+	"sync"
+	"time"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/models"
+	"github.com/google/uuid"
+)
+
+// AgentStore provides thread-safe CRUD operations for agents.
+type AgentStore struct {
+	mu      sync.RWMutex
+	agents  map[string]models.AgentCardData
+	history map[string][]models.AgentStatusHistoryEntry // agentID -> history
+}
+
+// NewAgentStore returns an initialized AgentStore.
+func NewAgentStore() *AgentStore {
+	return &AgentStore{
+		agents:  make(map[string]models.AgentCardData),
+		history: make(map[string][]models.AgentStatusHistoryEntry),
+	}
+}
+
+// List returns all agents, optionally filtered by status.
+func (s *AgentStore) List(statusFilter models.AgentStatus) []models.AgentCardData {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+
+	result := make([]models.AgentCardData, 0, len(s.agents))
+	for _, a := range s.agents {
+		if statusFilter != "" && a.Status != statusFilter {
+			continue
+		}
+		result = append(result, a)
+	}
+
+	// Sort by display name for consistent output.
+	sort.Slice(result, func(i, j int) bool {
+		return result[i].DisplayName < result[j].DisplayName
+	})
+	return result
+}
+
+// Get returns a single agent by ID, or false if not found.
+func (s *AgentStore) Get(id string) (models.AgentCardData, bool) {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+	a, ok := s.agents[id]
+	return a, ok
+}
+
+// Create inserts a new agent. Returns false if the ID already exists.
+func (s *AgentStore) Create(a models.AgentCardData) bool {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	if _, exists := s.agents[a.ID]; exists {
+		return false
+	}
+	if a.LastActivity == "" {
+		a.LastActivity = time.Now().UTC().Format(time.RFC3339)
+	}
+	s.agents[a.ID] = a
+
+	// Record initial history entry.
+	s.appendHistoryLocked(a.ID, models.AgentStatusHistoryEntry{
+		ID:        uuid.New().String(),
+		AgentID:   a.ID,
+		Status:    a.Status,
+		Task:      a.CurrentTask,
+		Timestamp: a.LastActivity,
+	})
+	return true
+}
+
+// Update applies partial updates to an agent. Returns the updated agent or false if not found.
+func (s *AgentStore) Update(id string, req models.UpdateAgentRequest) (models.AgentCardData, bool) {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	a, ok := s.agents[id]
+	if !ok {
+		return models.AgentCardData{}, false
+	}
+
+	prevStatus := a.Status
+	prevTask := a.CurrentTask
+
+	if req.Status != nil {
+		a.Status = *req.Status
+	}
+	if req.CurrentTask != nil {
+		a.CurrentTask = req.CurrentTask
+	}
+	if req.TaskProgress != nil {
+		a.TaskProgress = req.TaskProgress
+	}
+	if req.TaskElapsed != nil {
+		a.TaskElapsed = req.TaskElapsed
+	}
+	if req.Channel != nil {
+		a.Channel = *req.Channel
+	}
+	if req.ErrorMessage != nil {
+		a.ErrorMessage = req.ErrorMessage
+	}
+	a.LastActivity = time.Now().UTC().Format(time.RFC3339)
+	s.agents[id] = a
+
+	// Record history entry if status or task changed.
+	if (req.Status != nil && *req.Status != prevStatus) || (req.CurrentTask != nil && prevTask == nil) ||
+		(req.CurrentTask != nil && prevTask != nil && *req.CurrentTask != *prevTask) {
+		status := a.Status
+		if req.Status != nil {
+			status = *req.Status
+		}
+		s.appendHistoryLocked(id, models.AgentStatusHistoryEntry{
+			ID:        uuid.New().String(),
+			AgentID:   id,
+			Status:    status,
+			Task:      a.CurrentTask,
+			Timestamp: a.LastActivity,
+		})
+	}
+
+	return a, true
+}
+
+// Delete removes an agent. Returns true if the agent existed.
+func (s *AgentStore) Delete(id string) bool {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	if _, ok := s.agents[id]; !ok {
+		return false
+	}
+	delete(s.agents, id)
+	delete(s.history, id)
+	return true
+}
+
+// History returns the status history for an agent, newest first.
+func (s *AgentStore) History(agentID string) []models.AgentStatusHistoryEntry {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+
+	entries, ok := s.history[agentID]
+	if !ok {
+		return nil
+	}
+	// Return a defensive copy, sorted newest first (by index when timestamps tie).
+	result := make([]models.AgentStatusHistoryEntry, len(entries))
+	copy(result, entries)
+	sort.SliceStable(result, func(i, j int) bool {
+		if result[i].Timestamp == result[j].Timestamp {
+			return i > j // later index = newer when timestamps match
+		}
+		return result[i].Timestamp > result[j].Timestamp
+	})
+	return result
+}
+
+// Count returns the total number of agents.
+func (s *AgentStore) Count() int {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+	return len(s.agents)
+}
+
+// appendHistoryLocked adds a history entry. Caller must hold s.mu (write lock).
+func (s *AgentStore) appendHistoryLocked(agentID string, entry models.AgentStatusHistoryEntry) {
+	s.history[agentID] = append(s.history[agentID], entry)
+}

go-backend/internal/store/project.go

@@ -0,0 +1,67 @@
+package store
+
+import (
+	"sort"
+	"sync"
+	"time"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/models"
+	"github.com/google/uuid"
+)
+
+// ProjectStore provides thread-safe CRUD operations for projects.
+type ProjectStore struct {
+	mu       sync.RWMutex
+	projects map[string]models.Project
+}
+
+// NewProjectStore returns an initialized ProjectStore.
+func NewProjectStore() *ProjectStore {
+	return &ProjectStore{
+		projects: make(map[string]models.Project),
+	}
+}
+
+// List returns all projects ordered by name.
+func (s *ProjectStore) List() []models.Project {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+
+	result := make([]models.Project, 0, len(s.projects))
+	for _, p := range s.projects {
+		result = append(result, p)
+	}
+	sort.Slice(result, func(i, j int) bool {
+		return result[i].Name < result[j].Name
+	})
+	return result
+}
+
+// Create inserts a new project.
+func (s *ProjectStore) Create(p models.Project) models.Project {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	if p.ID == "" {
+		p.ID = uuid.New().String()
+	}
+	now := time.Now().UTC()
+	if p.CreatedAt.IsZero() {
+		p.CreatedAt = now
+	}
+	if p.UpdatedAt.IsZero() {
+		p.UpdatedAt = now
+	}
+	if p.AgentIDs == nil {
+		p.AgentIDs = []string{}
+	}
+	s.projects[p.ID] = p
+	return p
+}
+
+// Count returns the total number of projects.
+func (s *ProjectStore) Count() int {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+	return len(s.projects)
+}

go-backend/internal/store/session.go

@@ -0,0 +1,80 @@
+package store
+
+import (
+	"sort"
+	"sync"
+	"time"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/models"
+	"github.com/google/uuid"
+)
+
+// SessionStore provides thread-safe CRUD operations for sessions.
+type SessionStore struct {
+	mu       sync.RWMutex
+	sessions map[string]models.Session // id -> session
+}
+
+// NewSessionStore returns an initialized SessionStore.
+func NewSessionStore() *SessionStore {
+	return &SessionStore{
+		sessions: make(map[string]models.Session),
+	}
+}
+
+// ListActive returns all sessions with status "running" or "streaming", newest first.
+func (s *SessionStore) ListActive() []models.Session {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+
+	result := make([]models.Session, 0)
+	for _, sess := range s.sessions {
+		if sess.Status == "running" || sess.Status == "streaming" {
+			result = append(result, sess)
+		}
+	}
+	sort.Slice(result, func(i, j int) bool {
+		return result[i].LastActivityAt.After(result[j].LastActivityAt)
+	})
+	return result
+}
+
+// Create inserts a new session.
+func (s *SessionStore) Create(sess models.Session) models.Session {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	if sess.ID == "" {
+		sess.ID = uuid.New().String()
+	}
+	if sess.StartedAt.IsZero() {
+		sess.StartedAt = time.Now().UTC()
+	}
+	if sess.LastActivityAt.IsZero() {
+		sess.LastActivityAt = sess.StartedAt
+	}
+	s.sessions[sess.ID] = sess
+	return sess
+}
+
+// UpdateStatus updates the status and last-activity timestamp of a session.
+func (s *SessionStore) UpdateStatus(id, status string) bool {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	sess, ok := s.sessions[id]
+	if !ok {
+		return false
+	}
+	sess.Status = status
+	sess.LastActivityAt = time.Now().UTC()
+	s.sessions[id] = sess
+	return true
+}
+
+// Count returns the total number of sessions.
+func (s *SessionStore) Count() int {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+	return len(s.sessions)
+}

go-backend/internal/store/task.go

@@ -0,0 +1,64 @@
+package store
+
+import (
+	"sort"
+	"sync"
+	"time"
+
+	"code.cubecraftcreations.com/CubeCraft-Creations/Control-Center/go-backend/internal/models"
+	"github.com/google/uuid"
+)
+
+// TaskStore provides thread-safe CRUD operations for tasks.
+type TaskStore struct {
+	mu    sync.RWMutex
+	tasks map[string]models.Task
+}
+
+// NewTaskStore returns an initialized TaskStore.
+func NewTaskStore() *TaskStore {
+	return &TaskStore{
+		tasks: make(map[string]models.Task),
+	}
+}
+
+// ListRecent returns tasks ordered by updated_at descending (newest first).
+func (s *TaskStore) ListRecent() []models.Task {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+
+	result := make([]models.Task, 0, len(s.tasks))
+	for _, t := range s.tasks {
+		result = append(result, t)
+	}
+	sort.Slice(result, func(i, j int) bool {
+		return result[i].UpdatedAt.After(result[j].UpdatedAt)
+	})
+	return result
+}
+
+// Create inserts a new task.
+func (s *TaskStore) Create(t models.Task) models.Task {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+
+	if t.ID == "" {
+		t.ID = uuid.New().String()
+	}
+	now := time.Now().UTC()
+	if t.CreatedAt.IsZero() {
+		t.CreatedAt = now
+	}
+	if t.UpdatedAt.IsZero() {
+		t.UpdatedAt = now
+	}
+	s.tasks[t.ID] = t
+	return t
+}
+
+// Count returns the total number of tasks.
+func (s *TaskStore) Count() int {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+	return len(s.tasks)
+}