feat(CUB-45): [Control Center] AgentCard Component Final Integration

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

@@ -0,0 +1,82 @@
+<!-- ========================================================================== -->
+<!-- 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.     -->
+<!-- ========================================================================== -->
+<article
+  class="agent-card"
+  role="article"
+  [attr.aria-label]="displayName + ' — ' + statusLabel()"
+  [style.border-left-color]="statusBorderColor()"
+>
+
+  <!-- ── Header: status badge + agent info ── -->
+  <div class="agent-card__header">
+    <div class="agent-card__badge" [attr.aria-label]="'Status: ' + statusLabel()">
+      <span
+        class="status-dot"
+        [ngClass]="[statusDotClass()]"
+      ></span>
+      <span class="agent-card__status-label">{{ statusLabel() }}</span>
+    </div>
+
+    <div class="agent-card__identity">
+      <span class="agent-card__name">{{ displayName || agentId }}</span>
+      <span class="agent-card__role">{{ role }}</span>
+    </div>
+  </div>
+
+  <!-- ── Body: current task ── -->
+  <div class="agent-card__body" *ngIf="task || status === 'error'">
+    <p
+      class="agent-card__task"
+      [attr.aria-label]="'Current task: ' + (status === 'error' ? errorMessage : task)"
+    >
+      {{ status === 'error' ? errorMessage || task : task }}
+    </p>
+  </div>
+
+  <!-- ── Task Progress Bar ── -->
+  <div
+    class="agent-card__progress"
+    *ngIf="progress > 0 && status !== 'error'"
+    [attr.aria-label]="'Task progress: ' + progress + '%'"
+  >
+    <mat-progress-bar
+      mode="determinate"
+      [value]="progress"
+      [aria-label]="'Progress ' + progress + '% complete'"
+    ></mat-progress-bar>
+    <span class="agent-card__progress-label text-mono">{{ progress }}%</span>
+  </div>
+
+  <!-- ── Footer: channel + last activity + quick‑jump ── -->
+  <div class="agent-card__footer">
+    <div class="agent-card__meta">
+      <span
+        class="agent-card__channel text-mono"
+        [attr.aria-label]="'Channel: ' + channel"
+      >
+        <mat-icon aria-hidden="true">{{ channelIcon() }}</mat-icon>
+        {{ channel }}
+      </span>
+      <span
+        class="agent-card__last-activity text-mono"
+        [attr.aria-label]="'Last activity: ' + lastActivityLabel()"
+      >
+        {{ lastActivityLabel() }}
+      </span>
+    </div>
+
+    <!-- Quick‑Jump Button -->
+    <a
+      class="agent-card__jump"
+      mat-button
+      [routerLink]="jumpRoute()"
+      [attr.aria-label]="'Jump to session for ' + (displayName || agentId)"
+      matTooltip="Jump to session"
+    >
+      <mat-icon aria-hidden="true">arrow_forward</mat-icon>
+    </a>
+  </div>
+</article>