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

<!-- ========================================================================== -->
<!-- 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.     -->
<!-- Enhanced: data-status attribute, elapsed time, design tokens.              -->
<!-- ========================================================================== -->
<article
  class="agent-card"
  role="article"
  [attr.data-status]="status"
  [attr.aria-label]="(displayName || agentId) + ' — ' + statusLabel()"
  [style.border-left-color]="statusBorderColor()"
  (click)="cardClick.emit(sessionKey)"
  appLongPress
  [appLongPressDuration]="500"
  (appLongPress)="cardLongPress.emit(sessionKey)"
  tabindex="0"
>

  <!-- ── 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 || isError()">
    <p
      class="agent-card__task"
      [class.agent-card__task--error]="isError()"
      [attr.aria-label]="'Current task: ' + (isError() ? errorMessage || task : task)"
    >
      {{ isError() ? errorMessage || task : task }}
    </p>
  </div>

  <!-- ── Task Progress Bar ── -->
  <div
    class="agent-card__progress"
    *ngIf="showProgress()"
    [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>

  <!-- ── Elapsed Time ── -->
  <div
    class="agent-card__elapsed"
    *ngIf="taskElapsed && isActiveLike()"
    [attr.aria-label]="'Elapsed: ' + taskElapsed"
  >
    <mat-icon aria-hidden="true" class="agent-card__elapsed-icon">schedule</mat-icon>
    <span class="text-mono">{{ taskElapsed }}</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>