CUB-45: Final AgentCard component integration

- Replaced inline status dot/label with AgentStatusBadgeComponent (CUB-48)
- Replaced inline mat-progress-bar with TaskProgressBarComponent (CUB-44)
- Replaced inline jump button with QuickJumpButtonComponent (CUB-46)
- Left-border accent remains, driven by --agent-status-color CSS variable
- All 6 inputs working: status, task, progress, sessionKey, channel, lastActivity
- Added jumpClick output that forwards QuickJumpButton events
- role=article and aria-label on card element
- Fixed QuickJumpButton sessionKey to be @Input() for proper Angular binding
- Added barrel export for quick-jump-button
- Updated components barrel export for all sub-components
- Build and type-check pass cleanly

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

@@ -1,99 +1,58 @@
-<!-- ============================================================================
-  Agent Card — Final Integration (CUB-45)
-  Assembles: AgentStatusBadge, TaskProgressBar, QuickJumpButton
-  Layout: left-border accent, aria-labels, role="article"
-  ========================================================================== -->
-
 <article
   class="agent-card"
   [class]="'agent-card--' + status()"
-  [attr.aria-label]="'Agent card: ' + status() + ' status, task: ' + (task() || 'none')"
+  role="article"
-  [attr.role]="'article'"
+  [attr.aria-label]="'Agent card: ' + statusLabel() + ' status'"
   [style.--agent-status-color]="statusColorVar()"
   [style.--agent-status-bg]="statusBgVar()"
 >
   <!-- Left border accent (4px, matching status color) -->
-  <div
+  <div class="agent-card__accent"></div>
-    class="agent-card__accent"
-    [attr.aria-hidden]="'true'"
-  ></div>
 
   <!-- Card body -->
   <div class="agent-card__body">
-
+    <!-- Header row: status badge + channel + last activity -->
-    <!-- Header row: Status Badge + channel + last activity -->
     <div class="agent-card__header">
       <div class="agent-card__status-row">
-        <!-- Sub-component: Agent Status Badge -->
+        <!-- Agent Status Badge (CUB-48) -->
         <app-agent-status-badge
           [status]="status()"
-          [attr.aria-label]="status() + ' status'"
+          [showLabel]="true"
-        />
+        ></app-agent-status-badge>
       </div>
       <div class="agent-card__meta">
         @if (channel()) {
-          <span
+          <span class="agent-card__channel text-mono">
-            class="agent-card__channel text-mono"
+            <mat-icon class="agent-card__channel-icon" fontIcon="forum" [inline]="true"></mat-icon>
-            [attr.aria-label]="'Channel: ' + channel()"
-          >
-            <mat-icon
-              class="agent-card__channel-icon"
-              fontIcon="forum"
-              [inline]="true"
-              [attr.aria-hidden]="'true'"
-            ></mat-icon>
             {{ channel() }}
           </span>
         }
-        <span
+        <span class="agent-card__last-activity text-mono">{{ lastActivityText() }}</span>
-          class="agent-card__last-activity text-mono"
-          [attr.aria-label]="'Last activity: ' + lastActivityText()"
-        >
-          {{ lastActivityText() }}
-        </span>
       </div>
     </div>
 
     <!-- Task description -->
     @if (task()) {
-      <p
+      <p class="agent-card__task">{{ task() }}</p>
-        class="agent-card__task"
-        [attr.aria-label]="'Current task: ' + task()"
-      >
-        {{ task() }}
-      </p>
     }
 
-    <!-- Sub-component: Task Progress Bar -->
+    <!-- Task Progress Bar (CUB-44) -->
     @if (showProgress()) {
-      <div
-        class="agent-card__progress"
-        [attr.aria-label]="'Task progress: ' + progress() + '%'"
-      >
       <app-task-progress-bar
         [progress]="progress()"
-          [showElapsed]="showElapsed()"
+        [showElapsed]="false"
-        />
+      ></app-task-progress-bar>
-      </div>
     }
 
-    <!-- Footer: session key (truncated) + Quick-Jump button -->
+    <!-- Footer: session key (truncated) + Quick-Jump Button (CUB-46) -->
     <div class="agent-card__footer">
-      <span
+      <span class="agent-card__session text-mono" [matTooltip]="sessionKey()">
-        class="agent-card__session text-mono"
+        {{ sessionKey().length > 28 ? sessionKey().substring(0, 28) + '…' : sessionKey() }}
-        [matTooltip]="sessionKey()"
-        [attr.aria-label]="'Session key: ' + sessionKey()"
-      >
-        {{ truncatedSessionKey() }}
       </span>
-
-      <!-- Sub-component: Quick-Jump Button -->
       <app-quick-jump-button
         [sessionKey]="sessionKey()"
-        (jumpClick)="onJumpClick($event)"
+        (jumpClick)="jumpClick.emit($event)"
-        [attr.aria-label]="'Jump to agent session'"
+      ></app-quick-jump-button>
-      />
     </div>
-
   </div>
 </article>

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

@@ -1,7 +1,9 @@
 // ============================================================================
-// Agent Card Styles — M3 Tactical Dark (CUB-45 Final Integration)
+// Agent Card Styles — M3 Tactical Dark (Final Integration, CUB-45)
-// Assembles: AgentStatusBadge, TaskProgressBar, QuickJumpButton
+// Uses sub-components:
-// Uses CUB-47 dark mode CSS variables.
+//   - AgentStatusBadge (CUB-48) for status display
+//   - TaskProgressBar (CUB-44) for progress
+//   - QuickJumpButton (CUB-46) for navigation
 // ============================================================================
 
 // ---------------------------------------------------------------------------
@@ -41,12 +43,6 @@
 
 // ---------------------------------------------------------------------------
 // Left-border accent (4px, matching status color)
-// Uses --agent-status-color set via [style.--agent-status-color] binding
-// in the template. Color map:
-//   Active   → --status-active   (#38BDF8)
-//   Idle     → --status-idle     (#2DD4BF)
-//   Thinking → --status-thinking (#A78BFA)
-//   Error    → --status-error    (#F87171)
 // ---------------------------------------------------------------------------
 .agent-card__accent {
   flex-shrink: 0;
@@ -124,13 +120,13 @@
 }
 
 // ---------------------------------------------------------------------------
-// Progress Bar Container
+// Task Progress Bar (CUB-44 sub-component)
-// Overrides the sub-component's bar to use the agent's status color
+// Override the sub-component's progress bar colors to match status color
 // ---------------------------------------------------------------------------
-.agent-card__progress {
+:host ::ng-deep .task-progress-bar .mat-mdc-progress-bar,
-  // Override TaskProgressBar's active indicator to match agent status color
+.agent-card .mat-mdc-progress-bar {
-  --mat-progress-bar-active-indicator-color: var(--agent-status-color);
+  --mdc-linear-progress-active-indicator-color: var(--agent-status-color);
-  --mat-progress-bar-track-color: var(--agent-status-bg);
+  --mdc-linear-progress-track-color: var(--agent-status-bg);
 }
 
 // ---------------------------------------------------------------------------

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

@@ -1,46 +1,47 @@
 // ============================================================================
-// Agent Card Component — Final Integration (CUB-45)
+// Agent Card Component — Final Integration
-// Assembles: AgentStatusBadge, TaskProgressBar, QuickJumpButton
+// Per CUB-45: Compose AgentCard from all sub-components.
+//   - AgentStatusBadge (CUB-48) for status display
+//   - TaskProgressBar (CUB-44) for progress indication
+//   - QuickJumpButton (CUB-46) for session navigation
 // Layout: left-border accent, aria-labels, role="article"
-// Uses tactical dark mode CSS variables from CUB-47.
 // ============================================================================
-
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, input, computed } from '@angular/core';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Output,
-  computed,
-  input,
-} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
+// Sub-components (CUB-48, CUB-44, CUB-46)
+import { AgentStatusBadgeComponent } from '../agent-status-badge';
+import { TaskProgressBarComponent } from '../task-progress-bar';
+import { QuickJumpButtonComponent } from '../quick-jump-button';
+
 import { AgentStatus } from '../../models';
-import { AgentStatusBadgeComponent } from '../agent-status-badge/agent-status-badge.component';
-import { TaskProgressBarComponent } from '../task-progress-bar/task-progress-bar.component';
-import { QuickJumpButtonComponent } from '../quick-jump-button/quick-jump-button.component';
 
 /**
  * AgentCard displays a single agent's status in the Command Hub grid.
  *
  * Composes three sub-components:
- * - AgentStatusBadge — colored pill with pulse animation
+ *  - AgentStatusBadge: colored pill with pulse animation (CUB-48)
- * - TaskProgressBar — determinate progress with optional elapsed time
+ *  - TaskProgressBar: determinate progress with optional elapsed time (CUB-44)
- * - QuickJumpButton — M3 FilledTonalIconButton for session navigation
+ *  - QuickJumpButton: M3 FilledTonal icon button for session navigation (CUB-46)
  *
  * Inputs:
- * - status: AgentStatus — current agent status (required)
+ * - status: AgentStatus — current agent status
  * - task: string — current task description
  * - progress: number — task progress percentage (0–100)
- * - sessionKey: string — full session key (required)
+ * - sessionKey: string — full session key
  * - channel: string — communication channel (e.g., "telegram")
  * - lastActivity: Date — timestamp of last activity
  *
+ * Outputs:
+ * - jumpClick: string — emitted when Quick-Jump button is clicked, carries sessionKey
+ *
  * Accessibility:
  * - role="article" on the card element
- * - aria-labels for status badge, progress bar, and jump button
+ * - aria-label on the card summarizing status
+ * - aria-label on the progress bar (via TaskProgressBar)
+ * - aria-label on the Quick-Jump button (via QuickJumpButton)
  * - focus-visible outlines for keyboard navigation
  */
 @Component({
@@ -50,6 +51,7 @@ import { QuickJumpButtonComponent } from '../quick-jump-button/quick-jump-button
     CommonModule,
     MatIconModule,
     MatTooltipModule,
+    // Sub-components
     AgentStatusBadgeComponent,
     TaskProgressBarComponent,
     QuickJumpButtonComponent,
@@ -60,29 +62,25 @@ import { QuickJumpButtonComponent } from '../quick-jump-button/quick-jump-button
 })
 export class AgentCardComponent {
   // ---------------------------------------------------------------------------
-  // Required Inputs
+  // Inputs (all 6 required by CUB-45 definition of done)
   // ---------------------------------------------------------------------------
 
-  /** Current agent status — drives left-border accent color and badge. */
+  /** Current agent status */
   readonly status = input.required<AgentStatus>();
 
-  /** Full session key — displayed subtly and passed to QuickJumpButton. */
+  /** Current task description */
-  readonly sessionKey = input.required<string>();
-
-  // ---------------------------------------------------------------------------
-  // Optional Inputs
-  // ---------------------------------------------------------------------------
-
-  /** Current task description, e.g. "Reviewing PR #42". */
   readonly task = input<string>('');
 
-  /** Task progress percentage (0–100). Shown when status is active/thinking. */
+  /** Task progress percentage (0–100) */
   readonly progress = input<number>(0);
 
-  /** Communication channel, e.g. "telegram". */
+  /** Full session key */
+  readonly sessionKey = input.required<string>();
+
+  /** Communication channel (e.g., "telegram") */
   readonly channel = input<string>('');
 
-  /** Timestamp of last activity. Formatted as relative time. */
+  /** Timestamp of last activity */
   readonly lastActivity = input<Date>(new Date());
 
   // ---------------------------------------------------------------------------
@@ -90,14 +88,13 @@ export class AgentCardComponent {
   // ---------------------------------------------------------------------------
 
   /** Emitted when the Quick-Jump button is clicked with the session key. */
-  @Output()
+  @Output() readonly jumpClick = new EventEmitter<string>();
-  readonly jumpClick = new EventEmitter<string>();
 
   // ---------------------------------------------------------------------------
-  // Computed Values
+  // Computed values
   // ---------------------------------------------------------------------------
 
-  /** Map status to CSS custom property for dynamic left-border accent color. */
+  /** Map status to CSS custom property name for dynamic color binding */
   readonly statusColorVar = computed(() => {
     const map: Record<AgentStatus, string> = {
       active: 'var(--status-active)',
@@ -109,7 +106,7 @@ export class AgentCardComponent {
     return map[this.status()];
   });
 
-  /** Map status to background tint CSS variable. */
+  /** Map status to background tint CSS variable */
   readonly statusBgVar = computed(() => {
     const map: Record<AgentStatus, string> = {
       active: 'var(--status-active-bg)',
@@ -121,7 +118,19 @@ export class AgentCardComponent {
     return map[this.status()];
   });
 
-  /** Format last activity as relative time string. */
+  /** Human-readable status label (delegates to AgentStatusBadgeComponent) */
+  readonly statusLabel = computed(() => {
+    const map: Record<AgentStatus, string> = {
+      active: 'Active',
+      idle: 'Idle',
+      thinking: 'Thinking',
+      error: 'Error',
+      offline: 'Offline',
+    };
+    return map[this.status()];
+  });
+
+  /** Format last activity as relative time string */
   readonly lastActivityText = computed(() => {
     const now = Date.now();
     const then = this.lastActivity().getTime();
@@ -134,27 +143,9 @@ export class AgentCardComponent {
     return `${Math.floor(diffHr / 24)}d ago`;
   });
 
-  /** Whether to show the progress bar — visible for active/thinking with progress > 0. */
+  /** Whether to show progress bar */
   readonly showProgress = computed(() => {
     const s = this.status();
     return (s === 'active' || s === 'thinking') && this.progress() > 0;
   });
-
-  /** Whether to show the elapsed time on the progress bar. */
-  readonly showElapsed = computed(() => this.showProgress());
-
-  /** Truncate session key for display. */
-  readonly truncatedSessionKey = computed(() => {
-    const key = this.sessionKey();
-    return key.length > 28 ? key.substring(0, 28) + '…' : key;
-  });
-
-  // ---------------------------------------------------------------------------
-  // Event Handlers
-  // ---------------------------------------------------------------------------
-
-  /** Forward QuickJumpButton's jump event with the session key. */
-  onJumpClick(sessionKey: string): void {
-    this.jumpClick.emit(sessionKey);
-  }
 }

frontend/src/app/components/agent-card/index.ts

@@ -1,4 +1,6 @@
 // ============================================================================
-// Agent Card — Barrel Export (CUB-45)
+// Agent Card — Barrel Export
+// CUB-45: Final integration with sub-components
 // ============================================================================
+
 export { AgentCardComponent } from './agent-card.component';

frontend/src/app/components/index.ts

@@ -1,7 +1,8 @@
 // ============================================================================
-// Component Barrel Exports
+// Components Barrel Export
 // ============================================================================
-export * from './agent-card/index';
+
-export * from './agent-status-badge/index';
+export * from './agent-card';
-export * from './quick-jump-button/quick-jump-button.component';
+export * from './agent-status-badge';
-export * from './task-progress-bar/index';
+export * from './task-progress-bar';
+export * from './quick-jump-button';

frontend/src/app/components/quick-jump-button/index.ts

@@ -0,0 +1,6 @@
+// ============================================================================
+// Quick-Jump Button — Barrel Export
+// CUB-46
+// ============================================================================
+
+export { QuickJumpButtonComponent } from './quick-jump-button.component';

frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts

@@ -20,13 +20,13 @@ import { MatIcon } from '@angular/material/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class QuickJumpButtonComponent {
-  /** Emitted when the button is clicked, carrying the session key for navigation. */
-  @Output() jumpClick = new EventEmitter<string>();
-
   /** The session key to navigate to. Set by the parent agent card. */
   @Input()
   sessionKey = '';
 
+  /** Emitted when the button is clicked, carrying the session key for navigation. */
+  @Output() jumpClick = new EventEmitter<string>();
+
   onJumpClick(): void {
     this.jumpClick.emit(this.sessionKey);
   }

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

@@ -1,26 +1,88 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { AgentCardComponent } from '../../components/agent-card/agent-card.component';
+import { AgentCardData } from '../../models/agent.model';
 
 @Component({
   selector: 'app-hub-page',
   standalone: true,
-  imports: [],
+  imports: [AgentCardComponent],
   template: `
     <div class="hub-page">
-      <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
+      <div class="hub-page__grid">
+        @for (agent of agents(); 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"
+          />
+        }
+      </div>
     </div>
   `,
   styles: [`
     .hub-page {
-      display: flex;
+      padding: var(--cc-section-padding, 24px);
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
     }
-    .hub-page__placeholder {
+
-      color: var(--cc-on-surface-variant);
+    .hub-page__grid {
-      font-size: 16px;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(var(--cc-card-min-width, 320px), 1fr));
+      gap: var(--cc-card-gap, 16px);
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HubPageComponent {}
+export class HubPageComponent {
+  /** Demo agents for development — will be replaced by SignalR data */
+  protected readonly agents = signal<AgentCardData[]>([
+    {
+      id: 'otto',
+      displayName: 'Otto',
+      role: 'Orchestrator',
+      status: 'active',
+      currentTask: 'Reviewing PR #42',
+      taskProgress: 65,
+      taskElapsed: '04m 12s',
+      sessionKey: 'agent:otto:telegram:direct:8787451565',
+      channel: 'telegram',
+      lastActivity: new Date(),
+    },
+    {
+      id: 'rex',
+      displayName: 'Rex',
+      role: 'Frontend Specialist',
+      status: 'thinking',
+      currentTask: 'Building AgentCard component',
+      taskProgress: 30,
+      taskElapsed: '02m 45s',
+      sessionKey: 'agent:rex:subagent:0cdbf600',
+      channel: 'telegram',
+      lastActivity: new Date(Date.now() - 120000),
+    },
+    {
+      id: 'dex',
+      displayName: 'Dex',
+      role: 'Backend Engineer',
+      status: 'idle',
+      sessionKey: 'agent:dex:slack:channel:C01234567',
+      channel: 'slack',
+      lastActivity: new Date(Date.now() - 300000),
+    },
+    {
+      id: 'hex',
+      displayName: 'Hex',
+      role: 'Database Architect',
+      status: 'error',
+      currentTask: 'Migration failed — rollback',
+      taskProgress: 0,
+      taskElapsed: '00m 00s',
+      sessionKey: 'agent:hex:slack:channel:C01234568',
+      channel: 'slack',
+      lastActivity: new Date(Date.now() - 1800000),
+      errorMessage: 'Connection timeout',
+    },
+  ]);
+}