Merge branch 'dev' into agent/rex/CUB-47-dark-mode-variables

Reviewed-on: #12
Reviewed-by: Otto the Minion <otto@code.cubecraftcreations.com>
Reviewed-by: Joshua <joshua@cnjmail.com>

frontend/src/app/components/task-progress-bar/index.ts

@@ -1,6 +0,0 @@
-// ============================================================================
-// Task Progress Bar — Barrel Export
-// CUB-44
-// ============================================================================
-
-export { TaskProgressBarComponent } from './task-progress-bar.component';

frontend/src/app/components/task-progress-bar/task-progress-bar.component.html

@@ -1,18 +0,0 @@
-<!-- Task Progress Bar: determinate progress with optional elapsed time -->
-<div class="task-progress-bar">
-  <!-- Info row: percentage + optional elapsed -->
-  <div class="task-progress-bar__info">
-    <span class="task-progress-bar__percent">{{ clampedProgress }}%</span>
-    <span *ngIf="showElapsed" class="task-progress-bar__elapsed">
-      {{ elapsedText }}
-    </span>
-  </div>
-
-  <!-- Angular Material determinate progress bar -->
-  <mat-progress-bar
-    class="task-progress-bar__bar"
-    mode="determinate"
-    [value]="clampedProgress"
-    aria-label="Task progress"
-  ></mat-progress-bar>
-</div>

frontend/src/app/components/task-progress-bar/task-progress-bar.component.scss

@@ -1,77 +0,0 @@
-// ============================================================================
-// Task Progress Bar — Tactical Dark Theme Styling
-// Per CUB-44: Uses --color-primary for bar fill and --color-surface-light
-// for track background, mapped to the Control Center's M3 dark tokens.
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Container
-// ---------------------------------------------------------------------------
-.task-progress-bar {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 100%;
-}
-
-// ---------------------------------------------------------------------------
-// Info row: percentage label + elapsed time
-// ---------------------------------------------------------------------------
-.task-progress-bar__info {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.task-progress-bar__percent {
-  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--cc-on-surface, #E2E8F0);
-  letter-spacing: 0.02em;
-}
-
-.task-progress-bar__elapsed {
-  font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--cc-on-surface-variant, #8A9BB0);
-  letter-spacing: 0.01em;
-}
-
-// ---------------------------------------------------------------------------
-// Material Progress Bar Overrides
-// ---------------------------------------------------------------------------
-// Map the spec's --color-primary and --color-surface-light to the Control
-// Center's actual theme tokens. This ensures the bar uses the tactical dark
-// palette while respecting the spec's variable naming.
-// ---------------------------------------------------------------------------
-
-.task-progress-bar__bar {
-  // Override the track (background) to use the surface container
-  --mat-progress-bar-track-height: 6px;
-  --mat-progress-bar-active-indicator-height: 6px;
-
-  // Bar fill color: primary (cyan/sky blue per tactical dark theme)
-  --mat-progress-bar-active-indicator-color: var(--color-primary, var(--mat-sys-primary, #38BDF8));
-
-  // Track background: surface container (dark slate)
-  --mat-progress-bar-track-color: var(--color-surface-light, var(--cc-surface-container, #1C2027));
-
-  // Border radius for a softer bar
-  border-radius: 3px;
-
-  // Smooth transition on value changes
-  transition: none;
-}
-
-// Rounded ends on the progress bar fill
-:host ::ng-deep .mdc-linear-progress__bar-inner {
-  border-radius: 3px;
-}
-
-// Rounded track background
-:host ::ng-deep .mdc-linear-progress__track {
-  border-radius: 3px;
-}

frontend/src/app/components/task-progress-bar/task-progress-bar.component.ts

@@ -1,109 +0,0 @@
-// ============================================================================
-// Task Progress Bar Component
-// Per CUB-44: Determinate progress bar with optional elapsed time display.
-// Uses Angular Material mat-progress-bar in determinate mode with tactical
-// dark theme styling via CSS custom properties.
-// ============================================================================
-
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-
-/**
- * Displays a determinate progress bar with an optional elapsed time indicator.
- *
- * Usage:
- * ```html
- * <app-task-progress-bar [progress]="65" />
- * <app-task-progress-bar [progress]="42" [showElapsed]="true" />
- * ```
- */
-@Component({
-  selector: 'app-task-progress-bar',
-  standalone: true,
-  imports: [CommonModule, MatProgressBarModule],
-  templateUrl: './task-progress-bar.component.html',
-  styleUrl: './task-progress-bar.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TaskProgressBarComponent implements OnInit, OnDestroy {
-  // ---------------------------------------------------------------------------
-  // Inputs
-  // ---------------------------------------------------------------------------
-
-  /** Current progress percentage (0–100). Required. */
-  @Input({ required: true })
-  progress!: number;
-
-  /** Whether to show elapsed time next to the percentage. Defaults to false. */
-  @Input()
-  showElapsed = false;
-
-  // ---------------------------------------------------------------------------
-  // Internal state
-  // ---------------------------------------------------------------------------
-
-  /** Timestamp when the component initialized — used for elapsed calculation. */
-  startTime = Date.now();
-
-  /** Formatted elapsed time string, e.g. "2m 15s ago". */
-  elapsedText = '';
-
-  /** Interval timer for updating the elapsed display. */
-  private timer: ReturnType<typeof setInterval> | null = null;
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  // ---------------------------------------------------------------------------
-  // Lifecycle
-  // ---------------------------------------------------------------------------
-
-  ngOnInit(): void {
-    this.updateElapsed();
-
-    if (this.showElapsed) {
-      // Update elapsed time every second
-      this.timer = setInterval(() => {
-        this.updateElapsed();
-        this.cdr.markForCheck();
-      }, 1000);
-    }
-  }
-
-  ngOnDestroy(): void {
-    if (this.timer) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Helpers
-  // ---------------------------------------------------------------------------
-
-  /** Clamp progress to 0–100 for safety. */
-  get clampedProgress(): number {
-    return Math.max(0, Math.min(100, this.progress ?? 0));
-  }
-
-  /** Recalculate the elapsed time string. */
-  private updateElapsed(): void {
-    const elapsedMs = Date.now() - this.startTime;
-    const totalSeconds = Math.floor(elapsedMs / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-
-    if (minutes > 0) {
-      this.elapsedText = `${minutes}m ${seconds}s ago`;
-    } else {
-      this.elapsedText = `${seconds}s ago`;
-    }
-  }
-}

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

@@ -0,0 +1,28 @@
+// ============================================================================
+// Hub Page — Responsive AgentCard Grid
+// Desktop (≥1024px): 2×2 grid
+// Mobile (<1024px): single-column stack
+// ============================================================================
+
+.hub-page {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: var(--cc-section-padding, 16px);
+  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) {
+  .hub-page {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

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

@@ -9,18 +9,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
     </div>
   `,
-  styles: [`
-    .hub-page {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
-    }
-    .hub-page__placeholder {
-      color: var(--cc-on-surface-variant);
-      font-size: 16px;
-    }
-  `],
+  styleUrl: './hub-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HubPageComponent {}

frontend/src/styles.scss

@@ -48,6 +48,17 @@ html {
 // These are NOT part of the M3 tonal palette; they are semantic overrides.
 // ---------------------------------------------------------------------------
 :root {
+  // --- Tactical Dark Mode color palette (CUB-47) ---
+  --color-surface: #0F172A;
+  --color-surface-light: #1E293B;
+  --color-primary: #38BDF8;
+  --color-secondary: #2DD4BF;
+  --color-accent: #A78BFA;
+  --color-danger: #F87171;
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #94A3B8;
+  --color-border: #334155;
+
   // --- Status colors ---
   --status-active: #38BDF8;
   --status-idle: #2DD4BF;
@@ -90,7 +101,7 @@ html {
 // Global Body Styles
 // ---------------------------------------------------------------------------
 body {
-  background-color: var(--cc-background);
+  background-color: var(--color-surface);
   color: var(--cc-on-surface);
   font-family: 'Inter', 'Roboto', sans-serif;
   margin: 0;