CUB-57: Dashboard summary component with status breakdown

frontend/.dockerignore

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

frontend/Dockerfile

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

frontend/angular.json

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

frontend/nginx.conf

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

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

@@ -2,13 +2,11 @@
 <!-- AgentCard — per spec Section 7.3                                            -->
 <!-- Integrates: Status Badge · Task Progress Bar · Quick‑Jump Button           -->
 <!-- Left‑border accent matches status color. role="article" + aria‑labels.     -->
-<!-- Enhanced: data-status attribute, elapsed time, design tokens.              -->
 <!-- ========================================================================== -->
 <article
   class="agent-card"
   role="article"
-  [attr.data-status]="status"
+  [attr.aria-label]="displayName + ' — ' + statusLabel()"
-  [attr.aria-label]="(displayName || agentId) + ' — ' + statusLabel()"
   [style.border-left-color]="statusBorderColor()"
   (click)="cardClick.emit(sessionKey)"
   appLongPress
@@ -34,20 +32,19 @@
   </div>
 
   <!-- ── Body: current task ── -->
-  <div class="agent-card__body" *ngIf="task || isError()">
+  <div class="agent-card__body" *ngIf="task || status === 'error'">
     <p
       class="agent-card__task"
-      [class.agent-card__task--error]="isError()"
+      [attr.aria-label]="'Current task: ' + (status === 'error' ? errorMessage : task)"
-      [attr.aria-label]="'Current task: ' + (isError() ? errorMessage || task : task)"
     >
-      {{ isError() ? errorMessage || task : task }}
+      {{ status === 'error' ? errorMessage || task : task }}
     </p>
   </div>
 
   <!-- ── Task Progress Bar ── -->
   <div
     class="agent-card__progress"
-    *ngIf="showProgress()"
+    *ngIf="progress > 0 && status !== 'error'"
     [attr.aria-label]="'Task progress: ' + progress + '%'"
   >
     <mat-progress-bar
@@ -58,16 +55,6 @@
     <span class="agent-card__progress-label text-mono">{{ progress }}%</span>
   </div>
 
-  <!-- ── Elapsed Time ── -->
-  <div
-    class="agent-card__elapsed"
-    *ngIf="taskElapsed && isActiveLike()"
-    [attr.aria-label]="'Elapsed: ' + taskElapsed"
-  >
-    <mat-icon aria-hidden="true" class="agent-card__elapsed-icon">schedule</mat-icon>
-    <span class="text-mono">{{ taskElapsed }}</span>
-  </div>
-
   <!-- ── Footer: channel + last activity + quick‑jump ── -->
   <div class="agent-card__footer">
     <div class="agent-card__meta">

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

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

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

@@ -3,12 +3,8 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnDestroy,
   Output,
   computed,
-  effect,
-  inject,
-  signal,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
@@ -18,18 +14,12 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { AgentStatus } from '../../../models/agent.model';
 import { LongPressDirective } from '../../../directives/long-press.directive';
-import {
-  STATUS_COLORS,
-  STATUS_LABELS,
-  CHANNEL_ICONS,
-} from '../../../design/tokens';
 
 // ============================================================================
 // AgentCard Component
 // Per spec Section 7.3: Composes Agent Status Badge, Task Progress Bar,
 // and Quick‑Jump Button into a card with left‑border status accent.
 // CUB-26: Emits cardClick and cardLongPress for drawer/modal integration.
-// Enhanced with data-status attribute, elapsed time, and design tokens.
 // ============================================================================
 
 @Component({
@@ -48,7 +38,7 @@ import {
   styleUrl: './agent-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AgentCardComponent implements OnDestroy {
+export class AgentCardComponent {
   // --- Six required inputs per spec ---
 
   /** Agent status — drives badge color and left‑border accent */
@@ -83,9 +73,6 @@ export class AgentCardComponent implements OnDestroy {
   /** Error message (shown only when status is 'error') */
   @Input() errorMessage = '';
 
-  /** Elapsed time string, e.g. "04m 12s" */
-  @Input() taskElapsed = '';
-
   // --- CUB-26: Outputs for drawer/modal integration ---
 
   /** Emitted when the card is clicked — opens the session drawer. */
@@ -94,15 +81,7 @@ export class AgentCardComponent implements OnDestroy {
   /** Emitted when the card is long-pressed — bypasses drawer, opens session log directly. */
   @Output() readonly cardLongPress = new EventEmitter<string>();
 
-  // --- Internal state ---
+  // --- Computed values ---
-
-  /** 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(() => {
@@ -116,68 +95,46 @@ export class AgentCardComponent implements OnDestroy {
     return map[this.status] ?? 'var(--status-offline)';
   });
 
-  /** Human‑readable status label (from design tokens) */
+  /** Human‑readable status label */
-  readonly statusLabel = computed(() => STATUS_LABELS[this.status] ?? this.status);
+  readonly statusLabel = computed(() => {
+    const labels: Record<AgentStatus, string> = {
+      active: 'Active',
+      idle: 'Idle',
+      thinking: 'Thinking…',
+      error: 'Error',
+      offline: 'Offline',
+    };
+    return labels[this.status] ?? this.status;
+  });
 
   /** CSS class suffix for the status badge dot */
   readonly statusDotClass = computed(() => `status-dot--${this.status}`);
 
-  /** Material icon name for the channel (from design tokens) */
+  /** Material icon name for the channel */
-  readonly channelIcon = computed(() => CHANNEL_ICONS[this.channel] ?? 'chat');
+  readonly channelIcon = computed(() => {
-
+    const icons: Record<string, string> = {
-  /** Relative time string for lastActivity, refreshed every 30s */
+      telegram: 'telegram',  // falls back to font icon if no SVG registered
-  readonly lastActivityLabel = computed(() => {
+      slack: 'chat',
-    // Read tick to create dependency that forces recomputation
+      discord: 'forum',
-    this._tick();
+      whatsapp: 'chat',
-    return this._relativeTime(this.lastActivity);
+      webchat: 'language',
+      email: 'email',
+    };
+    return icons[this.channel] ?? 'chat';
   });
 
-  /** Quick‑jump route derived from sessionKey */
+  /** Relative time string for lastActivity */
-  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
+  readonly lastActivityLabel = computed(() => {
-
+    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 = date.getTime();
+    const then = this.lastActivity.getTime();
     const diffSec = Math.max(0, Math.floor((now - then) / 1000));
     if (diffSec < 60) return 'just now';
     if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
     if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
     return `${Math.floor(diffSec / 86400)}d ago`;
-  }
+  });
 
-  private _startTimer(): void {
+  /** Quick‑jump route derived from sessionKey */
-    this._stopTimer();
+  readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`);
-    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/dashboard-summary/dashboard-summary.component.html

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

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

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

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

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

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

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

frontend/src/app/components/index.ts

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

frontend/src/app/design/tokens.ts

@@ -94,92 +94,6 @@ export const CcStatusColors = {
   offline:  { fg: '#64748b', bg: 'rgba(100, 116, 139, 0.12)', border: 'rgba(100, 116, 139, 0.40)' },
 } as const;
 
-// ---------------------------------------------------------------------------
-// Convenience exports for component usage (CUB-20)
-// ---------------------------------------------------------------------------
-/** Status colors — maps AgentStatus to hex values */
-export const STATUS_COLORS: Record<string, string> = {
-  active: '#38BDF8',
-  idle: '#2DD4BF',
-  thinking: '#A78BFA',
-  error: '#F87171',
-  offline: '#64748B',
-};
-
-/** Status background tints (12% opacity) */
-export const STATUS_BG_COLORS: Record<string, string> = {
-  active: 'rgba(56, 189, 248, 0.12)',
-  idle: 'rgba(45, 212, 191, 0.12)',
-  thinking: 'rgba(167, 139, 250, 0.12)',
-  error: 'rgba(248, 113, 113, 0.12)',
-  offline: 'rgba(100, 116, 139, 0.12)',
-};
-
-/** Surface overrides (CUB-20 convenience) */
-export const SURFACE = {
-  background: '#0D0F12',
-  surface: '#13161A',
-  container: '#1C2027',
-  containerHigh: '#252B33',
-  onSurface: '#E2E8F0',
-  onSurfaceVariant: '#8A9BB0',
-  outline: '#2D3748',
-} as const;
-
-/** Tactical Dark Mode color palette (CUB-20 convenience) */
-export const COLORS = {
-  surface: '#0F172A',
-  surfaceLight: '#1E293B',
-  primary: '#38BDF8',
-  secondary: '#2DD4BF',
-  accent: '#A78BFA',
-  danger: '#F87171',
-  textPrimary: '#FFFFFF',
-  textSecondary: '#94A3B8',
-  border: '#334155',
-} as const;
-
-/** Layout constants (CUB-20 convenience) */
-export const LAYOUT = {
-  navRailCollapsedWidth: 72,
-  navRailExpandedWidth: 256,
-  headerHeight: 64,
-  bottomNavHeight: 80,
-  cardBorderRadius: 16,
-  cardMinWidth: 320,
-  cardGap: 16,
-  cardPadding: 20,
-  sectionPadding: 24,
-  spacingUnit: 8,
-} as const;
-
-/** Breakpoints (px) (CUB-20 convenience) */
-export const BREAKPOINTS = {
-  mobile: 599,
-  tablet: 1023,
-  desktop: 1024,
-} as const;
-
-/** Channel icon mapping (CUB-20) */
-export const CHANNEL_ICONS: Record<string, string> = {
-  telegram: 'telegram',
-  slack: 'chat',
-  discord: 'forum',
-  whatsapp: 'chat',
-  webchat: 'language',
-  email: 'email',
-  mqtt: 'sensors',
-};
-
-/** Human-readable status labels (CUB-20) */
-export const STATUS_LABELS: Record<string, string> = {
-  active: 'Active',
-  idle: 'Idle',
-  thinking: 'Thinking…',
-  error: 'Error',
-  offline: 'Offline',
-};
-
 // ---------------------------------------------------------------------------
 // Typography
 // ---------------------------------------------------------------------------
@@ -349,6 +263,9 @@ export const CcTokens = {
 // ---------------------------------------------------------------------------
 // CSS Custom Property Names
 // ---------------------------------------------------------------------------
+// Use these constants when setting styles programmatically via Renderer2
+// or ElementRef.style, e.g.: el.style.setProperty(CcCssProps.colorPrimary, '#fff')
+// ---------------------------------------------------------------------------
 export const CcCssProps = {
   // Color
   colorPrimary:      '--cc-color-primary',

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

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

frontend/src/styles/_tokens.scss

@@ -434,41 +434,4 @@ $min-body-font:       16px;
 @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;