CUB-122: Scaffold Control Center React frontend

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

@@ -0,0 +1,57 @@
+<!-- ========================================================================== -->
+<!-- Hub Page — Responsive Agent Card Grid with Filter Chips                   -->
+<!-- Per CUB-27 spec breakpoints:                                               -->
+<!--   Compact  (0–599px):  Single-column cards, horizontal-scroll filter chips -->
+<!--   Medium   (600–1023px): 2-column grid                                    -->
+<!--   Expanded (≥1024px): 3+ column auto-fill grid                           -->
+<!-- CUB-26: Integrates AgentCard click/long-press with session drawer.         -->
+<!-- ========================================================================== -->
+
+<div class="hub-page">
+  <h1 class="hub-page__title">Command Hub</h1>
+
+  <!-- Filter Chip Group — horizontal scroll on mobile -->
+  <div class="hub-page__filters" role="tablist" aria-label="Filter agents by status">
+    @for (filter of filters; track filter.value) {
+      <button
+        class="hub-page__filter-chip"
+        [class.hub-page__filter-chip--active]="activeFilter() === filter.value"
+        role="tab"
+        [attr.aria-selected]="activeFilter() === filter.value"
+        (click)="selectFilter(filter.value)"
+      >
+        {{ filter.label }}
+      </button>
+    }
+  </div>
+
+  <!-- Agent Card Grid -->
+  <div class="hub-page__grid">
+    @for (agent of filteredAgents(); track agent.id) {
+      <app-agent-card
+        [status]="agent.status"
+        [task]="agent.currentTask ?? ''"
+        [progress]="agent.taskProgress ?? 0"
+        [sessionKey]="agent.sessionKey"
+        [channel]="agent.channel"
+        [lastActivity]="agent.lastActivity"
+        [agentId]="agent.id"
+        [displayName]="agent.displayName"
+        [role]="agent.role"
+        [errorMessage]="agent.errorMessage ?? ''"
+        (cardClick)="onCardClick($event)"
+        (cardLongPress)="onCardLongPress($event)"
+      />
+    } @empty {
+      <p class="hub-page__empty">No agents online</p>
+    }
+  </div>
+</div>
+
+<!-- Agent Session Drawer (CUB-26) -->
+<app-agent-session-drawer
+  [isMobile]="isMobile()"
+  (openSession)="onOpenSession($event)"
+  (pinToDashboard)="onPinToDashboard($event)"
+  (drawerClose)="onDrawerClose()"
+/>

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

@@ -0,0 +1,141 @@
+// ============================================================================
+// Hub Page — Responsive AgentCard Grid with Filter Chips
+// Per CUB-27 spec breakpoints:
+//   Compact  (0–599px):  Single-column cards, horizontal-scroll filter chips
+//   Medium   (600–1023px): 2-column grid
+//   Expanded (≥1024px): 3+ column auto-fill grid
+// ============================================================================
+
+.hub-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 400px;
+  overflow-x: hidden;
+  padding: var(--cc-section-padding);
+}
+
+.hub-page__title {
+  grid-column: 1 / -1;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--cc-on-surface);
+  margin: 0 0 8px;
+}
+
+// ---------------------------------------------------------------------------
+// Filter Chip Group
+// ---------------------------------------------------------------------------
+.hub-page__filters {
+  display: flex;
+  gap: 8px;
+  padding: 4px 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none; // Firefox
+
+  &::-webkit-scrollbar {
+    display: none; // Chrome/Safari
+  }
+}
+
+.hub-page__filter-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  min-width: 48px; // Touch target
+  padding: 6px 16px;
+  border: 1px solid var(--cc-outline);
+  border-radius: 20px;
+  background-color: transparent;
+  color: var(--cc-on-surface-variant);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+  flex-shrink: 0; // Prevent shrinking in scroll container
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.06);
+    color: var(--cc-on-surface);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--status-active);
+    outline-offset: 2px;
+  }
+
+  &--active {
+    background-color: var(--status-active-bg);
+    color: var(--status-active);
+    border-color: var(--status-active);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Agent Card Grid
+// ---------------------------------------------------------------------------
+.hub-page__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--cc-card-gap);
+}
+
+// ---------------------------------------------------------------------------
+// Empty State
+// ---------------------------------------------------------------------------
+.hub-page__placeholder,
+.hub-page__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: var(--cc-on-surface-variant);
+  font-size: 16px;
+  text-align: center;
+}
+
+// ---------------------------------------------------------------------------
+// Compact (0–599px): Single-column cards
+// ---------------------------------------------------------------------------
+@media (max-width: 599px) {
+  .hub-page {
+    padding: 0;
+  }
+
+  .hub-page__grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .hub-page__filters {
+    padding: 4px 0 8px;
+    // Ensure horizontal scroll on mobile
+    margin: 0 -8px;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Medium (600–1023px): 2-column grid
+// ---------------------------------------------------------------------------
+@media (min-width: 600px) and (max-width: 1023px) {
+  .hub-page__grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--cc-card-gap);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Expanded (≥1024px): 3+ column auto-fill grid
+// ---------------------------------------------------------------------------
+@media (min-width: 1024px) {
+  .hub-page__grid {
+    grid-template-columns: repeat(auto-fill, minmax(var(--cc-card-min-width), 1fr));
+    gap: var(--cc-card-gap);
+  }
+}

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

@@ -0,0 +1,153 @@
+import { ChangeDetectionStrategy, Component, signal, computed, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatChipsModule } from '@angular/material/chips';
+import { AgentCardComponent } from '../../command-hub/components/agent-card/agent-card.component';
+import { AgentSessionDrawerComponent } from '../../components/agent-session-drawer/index';
+import { AgentCardData } from '../../models/agent.model';
+import { AgentStatus } from '../../models/agent.model';
+
+/**
+ * Filter options for the hub page agent card grid.
+ * Per CUB-27: "Filter chip group (All, Active, Error, etc.) with horizontal scroll on mobile"
+ */
+export type AgentFilter = 'all' | AgentStatus;
+
+@Component({
+  selector: 'app-hub-page',
+  standalone: true,
+  imports: [CommonModule, 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' },
+    { label: 'Idle', value: 'idle' },
+    { label: 'Thinking', value: 'thinking' },
+    { label: 'Error', value: 'error' },
+    { label: 'Offline', value: 'offline' },
+  ];
+
+  protected readonly activeFilter = signal<AgentFilter>('all');
+
+  /** Stub agent data (TODO: wire to AgentStatusService / SignalR). */
+  readonly agents = signal<AgentCardData[]>([
+    {
+      id: 'otto',
+      displayName: 'Otto',
+      role: 'Orchestrator Agent',
+      status: 'active',
+      currentTask: 'Reviewing PR #42',
+      taskProgress: 67,
+      taskElapsed: '04m 12s',
+      sessionKey: 'agent:otto:slack:CUB-42:abc123',
+      channel: 'slack',
+      lastActivity: new Date(),
+    },
+    {
+      id: 'rex',
+      displayName: 'Rex',
+      role: 'Frontend Agent',
+      status: 'thinking',
+      currentTask: 'Building responsive layout',
+      taskProgress: 40,
+      taskElapsed: '02m 30s',
+      sessionKey: 'agent:rex:telegram:CUB-27:def456',
+      channel: 'telegram',
+      lastActivity: new Date(Date.now() - 30000),
+    },
+    {
+      id: 'dex',
+      displayName: 'Dex',
+      role: 'Backend Agent',
+      status: 'idle',
+      currentTask: undefined,
+      taskProgress: undefined,
+      taskElapsed: undefined,
+      sessionKey: 'agent:dex:slack:CUB-53:ghi789',
+      channel: 'slack',
+      lastActivity: new Date(Date.now() - 300000),
+    },
+    {
+      id: 'hex',
+      displayName: 'Hex',
+      role: 'Database Agent',
+      status: 'error',
+      currentTask: 'Migration failed — rollback initiated',
+      taskProgress: 0,
+      taskElapsed: '00m 45s',
+      sessionKey: 'agent:hex:slack:CUB-56:jkl012',
+      channel: 'slack',
+      lastActivity: new Date(Date.now() - 60000),
+      errorMessage: 'Connection timeout to database server',
+    },
+    {
+      id: 'nano',
+      displayName: 'Nano',
+      role: 'ESP32 Agent',
+      status: 'offline',
+      currentTask: undefined,
+      taskProgress: undefined,
+      taskElapsed: undefined,
+      sessionKey: 'agent:nano:mqtt:CUB-48:mno345',
+      channel: 'mqtt',
+      lastActivity: new Date(Date.now() - 86400000),
+    },
+  ]);
+
+  protected readonly filteredAgents = computed(() => {
+    const filter = this.activeFilter();
+    if (filter === 'all') return this.agents();
+    return this.agents().filter(a => a.status === filter);
+  });
+
+  constructor() {
+    // Detect mobile viewport
+    if (typeof window !== 'undefined') {
+      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-legacy/src/app/pages/logs/logs-page.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-logs-page',
+  standalone: true,
+  imports: [],
+  template: `<p style="color: var(--cc-on-surface-variant)">Logs page — coming soon</p>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LogsPageComponent {}

frontend-legacy/src/app/pages/projects/projects-page.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-projects-page',
+  standalone: true,
+  imports: [],
+  template: `<p style="color: var(--cc-on-surface-variant)">Projects page — coming soon</p>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProjectsPageComponent {}

frontend-legacy/src/app/pages/sessions/sessions-page.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sessions-page',
+  standalone: true,
+  imports: [],
+  template: `<p style="color: var(--cc-on-surface-variant)">Sessions page — coming soon</p>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SessionsPageComponent {}

frontend-legacy/src/app/pages/settings/settings-page.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings-page',
+  standalone: true,
+  imports: [],
+  template: `<p style="color: var(--cc-on-surface-variant)">Settings page — coming soon</p>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SettingsPageComponent {}