CUB-20: Develop agent card component with dynamic status/progress

2026-04-28 08:18:27 -04:00
parent 8331468b44
commit a946670157
8 changed files with 538 additions and 68 deletions
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -53,7 +53,13 @@
            ],
            "styles": [
              "src/styles.scss"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src",
+                "src/styles"
+              ]
+            }
          },
          "configurations": {
            "production": {
--- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.html
+++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.html
@@ -2,11 +2,13 @@
 <!-- AgentCard — per spec Section 7.3                                            -->
 <!-- Integrates: Status Badge · Task Progress Bar · Quick‑Jump Button           -->
 <!-- Left‑border accent matches status color. role="article" + aria‑labels.     -->
+<!-- Enhanced: data-status attribute, elapsed time, design tokens.              -->
 <!-- ========================================================================== -->
 <article
  class="agent-card"
  role="article"
-  [attr.aria-label]="displayName + ' — ' + statusLabel()"
+  [attr.data-status]="status"
+  [attr.aria-label]="(displayName || agentId) + ' — ' + statusLabel()"
  [style.border-left-color]="statusBorderColor()"
 >

@@ -27,19 +29,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 +53,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">
--- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss
+++ b/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);
-  padding: var(--cc-card-padding);
+  min-width: tokens.$cc-card-min-width;
+  padding: tokens.$cc-card-padding;
  background-color: var(--cc-surface-container);
-  border-radius: var(--cc-card-border-radius);
+  border-radius: tokens.$cc-card-border-radius;
  border-left: 4px solid var(--status-offline); // default; overridden by [style]
  border-top: 1px solid var(--cc-outline);
  border-right: 1px solid var(--cc-outline);
@@ -48,11 +51,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 +92,7 @@
  color: var(--cc-on-surface);
  line-height: 1.4;

-  // Error messages get distinct styling
-  .agent-card--error & {
+  &--error {
    color: var(--status-error);
  }
 }
@@ -109,6 +106,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 +128,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 +168,6 @@
  color: var(--cc-on-surface-variant);
 }

-.agent-card__channel-icon,
 .agent-card__channel .mat-icon {
  font-size: 14px;
  width: 14px;
@@ -169,7 +183,6 @@
 .agent-card__jump {
  flex-shrink: 0;

-  // Match M3 text button sizing
  .mat-mdc-button {
    min-width: 36px;
    padding: 0 8px;
@@ -184,11 +197,9 @@
 }

 // ── Status‑specific background tints for badge ──
-// We use the global status-dot classes from styles.scss and pair them
-// with contextual background-color overrides here.
+// Using data-status attribute selectors for clean styling.

-.agent-card[data-status="active"] .agent-card__badge,
-.agent-card .status-dot--active ~ .agent-card__badge {
+.agent-card[data-status="active"] .agent-card__badge {
  background-color: var(--status-active-bg);
 }

@@ -204,8 +215,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;
--- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts
+++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts
@@ -2,7 +2,12 @@ import {
  ChangeDetectionStrategy,
  Component,
  Input,
+  OnDestroy,
+  Signal,
  computed,
+  effect,
+  inject,
+  signal,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
@@ -11,11 +16,17 @@ 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 {
+  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.
+// Enhanced with data-status attribute, elapsed time, and design tokens.
 // ============================================================================

@Component({
@@ -33,7 +44,7 @@ import { AgentStatus } from '../../../models/agent.model';
  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 +79,18 @@ export class AgentCardComponent {
  /** Error message (shown only when status is 'error') */
  @Input() errorMessage = '';

-  // --- Computed values ---
+  /** Elapsed time string, e.g. "04m 12s" */
+  @Input() taskElapsed = '';
+
+  // --- 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 +104,68 @@ export class AgentCardComponent {
    return map[this.status] ?? 'var(--status-offline)';
  });

-  /** Human‑readable status label */
-  readonly statusLabel = computed(() => {
-    const labels: Record<AgentStatus, string> = {
-      active: 'Active',
-      idle: 'Idle',
-      thinking: 'Thinking…',
-      error: 'Error',
-      offline: 'Offline',
-    };
-    return labels[this.status] ?? this.status;
-  });
+  /** Human‑readable status label (from design tokens) */
+  readonly statusLabel = computed(() => STATUS_LABELS[this.status] ?? this.status);

  /** CSS class suffix for the status badge dot */
  readonly statusDotClass = computed(() => `status-dot--${this.status}`);

-  /** Material icon name for the channel */
-  readonly channelIcon = computed(() => {
-    const icons: Record<string, string> = {
-      telegram: 'telegram',  // falls back to font icon if no SVG registered
-      slack: 'chat',
-      discord: 'forum',
-      whatsapp: 'chat',
-      webchat: 'language',
-      email: 'email',
-    };
-    return icons[this.channel] ?? 'chat';
+  /** Material icon name for the channel (from design tokens) */
+  readonly channelIcon = computed(() => CHANNEL_ICONS[this.channel] ?? 'chat');
+
+  /** Relative time string for lastActivity, refreshed every 30s */
+  readonly lastActivityLabel = computed(() => {
+    // Read tick to create dependency that forces recomputation
+    this._tick();
+    return this._relativeTime(this.lastActivity);
  });

-  /** Relative time string for lastActivity */
-  readonly lastActivityLabel = computed(() => {
-    if (!this.lastActivity) return '';
+  /** Quick‑jump route derived from sessionKey */
+  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
+
+  /** Whether progress bar should show */
+  readonly showProgress = computed(() => this.progress > 0 && this.status !== 'error');
+
+  /** Whether error state is active */
+  readonly isError = computed(() => this.status === 'error');
+
+  /** Whether card is in an active-like state (active or thinking) */
+  readonly isActiveLike = computed(() => this.status === 'active' || this.status === 'thinking');
+
+  constructor() {
+    // Start the relative-time refresh timer
+    this._startTimer();
+  }
+
+  ngOnDestroy(): void {
+    this._stopTimer();
+  }
+
+  // --- Private helpers ---
+
+  private _relativeTime(date: Date | null | undefined): string {
+    if (!date) return '';
    const now = Date.now();
-    const then = this.lastActivity.getTime();
+    const then = date.getTime();
    const diffSec = Math.max(0, Math.floor((now - then) / 1000));
    if (diffSec < 60) return 'just now';
    if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
    if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
    return `${Math.floor(diffSec / 86400)}d ago`;
-  });
+  }

-  /** Quick‑jump route derived from sessionKey */
-  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
+  private _startTimer(): void {
+    this._stopTimer();
+    this._timer = setInterval(() => {
+      // Increment tick to force lastActivityLabel recomputation
+      this._tick.update(v => v + 1);
+    }, 30_000);
+  }
+
+  private _stopTimer(): void {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._timer = null;
+    }
+  }
 }
--- a/frontend/src/app/design/tokens.ts
+++ b/frontend/src/app/design/tokens.ts
@@ -0,0 +1,89 @@
+// ============================================================================
+// OpenClaw Control Center — Design System Tokens (TypeScript)
+// ============================================================================
+// Per CUB-21: Programmatic access to design tokens for Angular components.
+// Use in computed styles, dynamic class maps, or any TS logic that needs
+// token values. CSS custom properties remain the primary styling mechanism.
+// ============================================================================
+
+/** Tactical Dark Mode color palette */
+export const COLORS = {
+  surface: '#0F172A',
+  surfaceLight: '#1E293B',
+  primary: '#38BDF8',
+  secondary: '#2DD4BF',
+  accent: '#A78BFA',
+  danger: '#F87171',
+  textPrimary: '#FFFFFF',
+  textSecondary: '#94A3B8',
+  border: '#334155',
+} as const;
+
+/** 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 */
+export const SURFACE = {
+  background: '#0D0F12',
+  surface: '#13161A',
+  container: '#1C2027',
+  containerHigh: '#252B33',
+  onSurface: '#E2E8F0',
+  onSurfaceVariant: '#8A9BB0',
+  outline: '#2D3748',
+} as const;
+
+/** Layout constants */
+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) */
+export const BREAKPOINTS = {
+  mobile: 599,
+  tablet: 1023,
+  desktop: 1024,
+} as const;
+
+/** Channel icon mapping */
+export const CHANNEL_ICONS: Record<string, string> = {
+  telegram: 'telegram',
+  slack: 'chat',
+  discord: 'forum',
+  whatsapp: 'chat',
+  webchat: 'language',
+  email: 'email',
+};
+
+/** Human-readable status labels */
+export const STATUS_LABELS: Record<string, string> = {
+  active: 'Active',
+  idle: 'Idle',
+  thinking: 'Thinking…',
+  error: 'Error',
+  offline: 'Offline',
+};
--- a/frontend/src/app/pages/hub/hub-page.component.scss
+++ b/frontend/src/app/pages/hub/hub-page.component.scss
@@ -4,25 +4,118 @@
 // Mobile (<1024px): single-column stack
 // ============================================================================

+@use 'tokens' as tokens;
+
 .hub-page {
  display: grid;
  grid-template-columns: 1fr;
-  gap: 16px;
-  padding: var(--cc-section-padding, 16px);
+  gap: tokens.$cc-card-gap;
+  padding: tokens.$cc-section-padding;
  min-height: 400px;
  overflow-x: hidden;
 }

-.hub-page__placeholder {
-  color: var(--cc-on-surface-variant);
-  font-size: 16px;
-  text-align: center;
-  padding: 24px 0;
-}
-
 // Desktop / kiosk breakpoint — 2-column grid
-@media (min-width: 1024px) {
+@media (min-width: tokens.$cc-breakpoint-desktop) {
  .hub-page {
    grid-template-columns: repeat(2, 1fr);
  }
+}
+
+// ── Loading state ──
+.hub-page__loading {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 24px;
+  color: var(--cc-on-surface-variant);
+}
+
+.hub-page__loading-icon {
+  font-size: 40px;
+  width: 40px;
+  height: 40px;
+  color: var(--status-active);
+  animation: spin 1.5s linear infinite;
+}
+
+.hub-page__loading-text {
+  font-size: 16px;
+  color: var(--cc-on-surface-variant);
+  margin: 0;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+// ── Empty state ──
+.hub-page__empty {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 48px 24px;
+  text-align: center;
+}
+
+.hub-page__empty-icon {
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  color: var(--status-offline);
+}
+
+.hub-page__empty-text {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--cc-on-surface);
+  margin: 0;
+}
+
+.hub-page__empty-hint {
+  font-size: 14px;
+  color: var(--cc-on-surface-variant);
+  margin: 0;
+}
+
+// ── Error state ──
+.hub-page__error {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  border: 1px solid var(--status-error);
+  border-radius: tokens.$cc-card-border-radius;
+  background-color: var(--status-error-bg);
+}
+
+.hub-page__error-icon {
+  font-size: 32px;
+  width: 32px;
+  height: 32px;
+  color: var(--status-error);
+}
+
+.hub-page__error-text {
+  font-size: 14px;
+  color: var(--status-error);
+  margin: 0;
+  text-align: center;
+}
+
+// ── Accessibility: reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+  .hub-page__loading-icon {
+    animation: none;
+  }
 }
--- a/frontend/src/app/pages/hub/hub-page.component.ts
+++ b/frontend/src/app/pages/hub/hub-page.component.ts
@@ -1,15 +1,154 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  OnInit,
+  Signal,
+  computed,
+  inject,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { AgentCardComponent } from '../../command-hub/components/agent-card/agent-card.component';
+import { AgentCardData } from '../../models/agent.model';
+import { AgentStatusService } from '../../services/agent-status.service';
+
+// ============================================================================
+// Hub Page — Fleet Status Grid
+// Per spec Section 7.3: Renders AgentCard components in a responsive grid.
+// Handles loading, empty, error, and success states.
+// Uses Angular signals from AgentStatusService for reactive updates.
+// ============================================================================

@Component({
  selector: 'app-hub-page',
  standalone: true,
-  imports: [],
+  imports: [CommonModule, MatIconModule, AgentCardComponent],
  template: `
    <div class="hub-page">
-      <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
+
+      <!-- Loading state -->
+      <div class="hub-page__loading" *ngIf="loading()">
+        <mat-icon class="hub-page__loading-icon" aria-hidden="true">hourglass_empty</mat-icon>
+        <p class="hub-page__loading-text">Loading agents…</p>
+      </div>
+
+      <!-- Empty state -->
+      <div class="hub-page__empty" *ngIf="!loading() && agents().length === 0">
+        <mat-icon class="hub-page__empty-icon" aria-hidden="true">smart_toy</mat-icon>
+        <p class="hub-page__empty-text">No agents connected yet.</p>
+        <p class="hub-page__empty-hint">Agents will appear here once they come online.</p>
+      </div>
+
+      <!-- Agent card grid -->
+      <app-agent-card
+        *ngFor="let agent of agents(); trackBy: trackByAgentId"
+        [status]="agent.status"
+        [task]="agent.currentTask ?? ''"
+        [progress]="agent.taskProgress ?? 0"
+        [sessionKey]="agent.sessionKey"
+        [channel]="agent.channel"
+        [lastActivity]="agent.lastActivity"
+        [agentId]="agent.id"
+        [displayName]="agent.displayName"
+        [role]="agent.role"
+        [errorMessage]="agent.errorMessage ?? ''"
+        [taskElapsed]="agent.taskElapsed ?? ''"
+      />
+
+      <!-- Error state -->
+      <div class="hub-page__error" *ngIf="error()" [attr.aria-label]="'Error: ' + error()">
+        <mat-icon class="hub-page__error-icon" aria-hidden="true">error_outline</mat-icon>
+        <p class="hub-page__error-text">{{ error() }}</p>
+      </div>
+
    </div>
  `,
  styleUrl: './hub-page.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HubPageComponent {}
+export class HubPageComponent implements OnInit {
+  /** Agent list signal from the status service */
+  readonly agents: Signal<AgentCardData[]>;
+
+  /** Whether the initial load is in progress */
+  readonly loading = computed(() => this._initialLoad);
+
+  /** Error message signal */
+  readonly error = computed(() => this._errorMsg);
+
+  private _initialLoad = true;
+  private _errorMsg: string | null = null;
+
+  private readonly _agentService = inject(AgentStatusService);
+
+  constructor() {
+    this.agents = this._agentService.agents;
+  }
+
+  ngOnInit(): void {
+    // Seed mock data for development until SignalR is wired up
+    this._seedMockData();
+  }
+
+  /** TrackBy function for *ngFor performance */
+  trackByAgentId(index: number, agent: AgentCardData): string {
+    return agent.id;
+  }
+
+  // --- Mock data seeding (remove when SignalR is integrated) ---
+  private _seedMockData(): void {
+    const now = new Date();
+    const mockAgents: AgentCardData[] = [
+      {
+        id: 'otto',
+        displayName: 'Otto',
+        role: 'Orchestrator Agent',
+        status: 'active',
+        currentTask: 'Reviewing PR #42',
+        taskProgress: 72,
+        taskElapsed: '04m 12s',
+        sessionKey: 'agent:otto:slack:control-center:8787a',
+        channel: 'slack',
+        lastActivity: new Date(now.getTime() - 30_000),
+      },
+      {
+        id: 'rex',
+        displayName: 'Rex',
+        role: 'Frontend Agent',
+        status: 'thinking',
+        currentTask: 'Building agent card component',
+        taskProgress: 45,
+        taskElapsed: '02m 38s',
+        sessionKey: 'agent:rex:telegram:direct:b3c91',
+        channel: 'telegram',
+        lastActivity: new Date(now.getTime() - 5_000),
+      },
+      {
+        id: 'dex',
+        displayName: 'Dex',
+        role: 'Backend Agent',
+        status: 'idle',
+        currentTask: '',
+        taskProgress: 0,
+        sessionKey: 'agent:dex:slack:control-center:4f2a0',
+        channel: 'slack',
+        lastActivity: new Date(now.getTime() - 300_000),
+      },
+      {
+        id: 'hex',
+        displayName: 'Hex',
+        role: 'Database Agent',
+        status: 'error',
+        currentTask: 'Migration failed',
+        taskProgress: 0,
+        errorMessage: 'Connection timeout to PostgreSQL',
+        sessionKey: 'agent:hex:telegram:direct:9d1e7',
+        channel: 'telegram',
+        lastActivity: new Date(now.getTime() - 1_200_000),
+      },
+    ];
+    this._agentService['_agents'].set(mockAgents);
+    this._initialLoad = false;
+  }
+}
--- a/frontend/src/styles/_tokens.scss
+++ b/frontend/src/styles/_tokens.scss
@@ -0,0 +1,61 @@
+// ============================================================================
+// OpenClaw Control Center — Design System Tokens (SCSS)
+// ============================================================================
+// Per CUB-21: Centralized design tokens as SCSS variables.
+// Import in any component SCSS with: @use '../../styles/tokens' as tokens;
+// These mirror the CSS custom properties in styles.scss for programmatic use.
+// ============================================================================
+
+// --- Color Palette (Tactical Dark) ---
+$color-surface: #0F172A;
+$color-surface-light: #1E293B;
+$color-primary: #38BDF8;
+$color-secondary: #2DD4BF;
+$color-accent: #A78BFA;
+$color-danger: #F87171;
+$color-text-primary: #FFFFFF;
+$color-text-secondary: #94A3B8;
+$color-border: #334155;
+
+// --- Status Colors ---
+$status-active: #38BDF8;
+$status-idle: #2DD4BF;
+$status-thinking: #A78BFA;
+$status-error: #F87171;
+$status-offline: #64748B;
+
+// --- Status Background Tints (12% opacity) ---
+$status-active-bg: rgba(56, 189, 248, 0.12);
+$status-idle-bg: rgba(45, 212, 191, 0.12);
+$status-thinking-bg: rgba(167, 139, 250, 0.12);
+$status-error-bg: rgba(248, 113, 113, 0.12);
+
+// --- Surface Overrides ---
+$cc-background: #0D0F12;
+$cc-surface: #13161A;
+$cc-surface-container: #1C2027;
+$cc-surface-container-high: #252B33;
+$cc-on-surface: #E2E8F0;
+$cc-on-surface-variant: #8A9BB0;
+$cc-outline: #2D3748;
+
+// --- Typography ---
+$cc-font-mono: 'Roboto Mono', 'Cascadia Code', 'Fira Code', monospace;
+$cc-font-family: 'Inter', 'Roboto', sans-serif;
+
+// --- Layout ---
+$cc-nav-rail-collapsed-width: 72px;
+$cc-nav-rail-expanded-width: 256px;
+$cc-header-height: 64px;
+$cc-bottom-nav-height: 80px;
+$cc-card-border-radius: 16px;
+$cc-card-min-width: 320px;
+$cc-card-gap: 16px;
+$cc-card-padding: 20px;
+$cc-section-padding: 24px;
+$cc-spacing-unit: 8px;
+
+// --- Breakpoints ---
+$cc-breakpoint-mobile: 599px;
+$cc-breakpoint-tablet: 1023px;
+$cc-breakpoint-desktop: 1024px;