CUB-45: AgentCard final integration with sub-components

- Assemble AgentCard from AgentStatusBadge, TaskProgressBar, QuickJumpButton
- All 6 inputs functional: status, task, progress, sessionKey, channel, lastActivity
- Left-border accent matches status color (Active: #38BDF8, Idle: #2DD4BF, Thinking: #A78BFA, Error: #F87171)
- Accessibility: role="article" on card, aria-labels on all sections
- Uses tactical dark mode CSS variables from CUB-47
- Added @Input() to QuickJumpButton sessionKey for parent binding
- JumpClick output forwarded from AgentCard
- Build passes, type checking passes

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

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

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

@@ -1,9 +1,7 @@
 // ============================================================================
-// Agent Card Styles — M3 Tactical Dark (Final Integration, CUB-45)
+// Agent Card Styles — M3 Tactical Dark (CUB-45 Final Integration)
-// Uses sub-components:
+// Assembles: AgentStatusBadge, TaskProgressBar, QuickJumpButton
-//   - AgentStatusBadge (CUB-48) for status display
+// Uses CUB-47 dark mode CSS variables.
-//   - TaskProgressBar (CUB-44) for progress
-//   - QuickJumpButton (CUB-46) for navigation
 // ============================================================================
 
 // ---------------------------------------------------------------------------
@@ -43,6 +41,12 @@
 
 // ---------------------------------------------------------------------------
 // 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;
@@ -120,13 +124,13 @@
 }
 
 // ---------------------------------------------------------------------------
-// Task Progress Bar (CUB-44 sub-component)
+// Progress Bar Container
-// Override the sub-component's progress bar colors to match status color
+// Overrides the sub-component's bar to use the agent's status color
 // ---------------------------------------------------------------------------
-:host ::ng-deep .task-progress-bar .mat-mdc-progress-bar,
+.agent-card__progress {
-.agent-card .mat-mdc-progress-bar {
+  // Override TaskProgressBar's active indicator to match agent status color
-  --mdc-linear-progress-active-indicator-color: var(--agent-status-color);
+  --mat-progress-bar-active-indicator-color: var(--agent-status-color);
-  --mdc-linear-progress-track-color: var(--agent-status-bg);
+  --mat-progress-bar-track-color: var(--agent-status-bg);
 }
 
 // ---------------------------------------------------------------------------

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

@@ -1,47 +1,46 @@
 // ============================================================================
-// Agent Card Component — Final Integration
+// Agent Card Component — Final Integration (CUB-45)
-// Per CUB-45: Compose AgentCard from all sub-components.
+// Assembles: AgentStatusBadge, TaskProgressBar, QuickJumpButton
-//   - 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 (CUB-48)
+ * - AgentStatusBadge — colored pill with pulse animation
- *  - TaskProgressBar: determinate progress with optional elapsed time (CUB-44)
+ * - TaskProgressBar — determinate progress with optional elapsed time
- *  - QuickJumpButton: M3 FilledTonal icon button for session navigation (CUB-46)
+ * - QuickJumpButton — M3 FilledTonalIconButton for session navigation
  *
  * Inputs:
- * - status: AgentStatus — current agent status
+ * - status: AgentStatus — current agent status (required)
  * - task: string — current task description
  * - progress: number — task progress percentage (0–100)
- * - sessionKey: string — full session key
+ * - sessionKey: string — full session key (required)
  * - 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-label on the card summarizing status
+ * - aria-labels for status badge, progress bar, and jump button
- * - aria-label on the progress bar (via TaskProgressBar)
- * - aria-label on the Quick-Jump button (via QuickJumpButton)
  * - focus-visible outlines for keyboard navigation
  */
 @Component({
@@ -51,7 +50,6 @@ import { AgentStatus } from '../../models';
     CommonModule,
     MatIconModule,
     MatTooltipModule,
-    // Sub-components
     AgentStatusBadgeComponent,
     TaskProgressBarComponent,
     QuickJumpButtonComponent,
@@ -62,25 +60,29 @@ import { AgentStatus } from '../../models';
 })
 export class AgentCardComponent {
   // ---------------------------------------------------------------------------
-  // Inputs (all 6 required by CUB-45 definition of done)
+  // Required Inputs
   // ---------------------------------------------------------------------------
 
-  /** Current agent status */
+  /** Current agent status — drives left-border accent color and badge. */
   readonly status = input.required<AgentStatus>();
 
-  /** Current task description */
+  /** Full session key — displayed subtly and passed to QuickJumpButton. */
-  readonly task = input<string>('');
-
-  /** Task progress percentage (0–100) */
-  readonly progress = input<number>(0);
-
-  /** Full session key */
   readonly sessionKey = input.required<string>();
 
-  /** Communication channel (e.g., "telegram") */
+  // ---------------------------------------------------------------------------
+  // 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. */
+  readonly progress = input<number>(0);
+
+  /** Communication channel, e.g. "telegram". */
   readonly channel = input<string>('');
 
-  /** Timestamp of last activity */
+  /** Timestamp of last activity. Formatted as relative time. */
   readonly lastActivity = input<Date>(new Date());
 
   // ---------------------------------------------------------------------------
@@ -88,13 +90,14 @@ export class AgentCardComponent {
   // ---------------------------------------------------------------------------
 
   /** Emitted when the Quick-Jump button is clicked with the session key. */
-  @Output() readonly jumpClick = new EventEmitter<string>();
+  @Output()
+  readonly jumpClick = new EventEmitter<string>();
 
   // ---------------------------------------------------------------------------
-  // Computed values
+  // Computed Values
   // ---------------------------------------------------------------------------
 
-  /** Map status to CSS custom property name for dynamic color binding */
+  /** Map status to CSS custom property for dynamic left-border accent color. */
   readonly statusColorVar = computed(() => {
     const map: Record<AgentStatus, string> = {
       active: 'var(--status-active)',
@@ -106,7 +109,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)',
@@ -118,19 +121,7 @@ export class AgentCardComponent {
     return map[this.status()];
   });
 
-  /** Human-readable status label (delegates to AgentStatusBadgeComponent) */
+  /** Format last activity as relative time string. */
-  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();
@@ -143,9 +134,27 @@ export class AgentCardComponent {
     return `${Math.floor(diffHr / 24)}d ago`;
   });
 
-  /** Whether to show progress bar */
+  /** Whether to show the progress bar — visible for active/thinking with progress > 0. */
   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,6 +1,4 @@
 // ============================================================================
-// Agent Card — Barrel Export
+// Agent Card — Barrel Export (CUB-45)
-// CUB-45: Final integration with sub-components
 // ============================================================================
-
 export { AgentCardComponent } from './agent-card.component';

frontend/src/app/components/index.ts

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

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

@@ -1,6 +0,0 @@
-// ============================================================================
-// 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,88 +1,26 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component } 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: [AgentCardComponent],
+  imports: [],
   template: `
     <div class="hub-page">
-      <div class="hub-page__grid">
+      <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
-        @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 {
-      padding: var(--cc-section-padding, 24px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 400px;
     }
-
+    .hub-page__placeholder {
-    .hub-page__grid {
+      color: var(--cc-on-surface-variant);
-      display: grid;
+      font-size: 16px;
-      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',
-    },
-  ]);
-}