rex-bot
a946670157
All checks were successful
Dev Build / build-test (pull_request) Successful in 2m4s
95 lines
3.2 KiB
HTML
95 lines
3.2 KiB
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()"
|
||
>
|
||
|
||
<!-- ── 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> |