99 lines
2.8 KiB
HTML
99 lines
2.8 KiB
HTML
|
<!-- ============================================================================
|
||
|
|
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')"
|
||
|
|
[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"
|
||
|
|
[attr.aria-hidden]="'true'"
|
||
|
|
></div>
|
||
|
|
|
||
|
|
<!-- Card body -->
|
||
|
|
<div class="agent-card__body">
|
||
|
|
|
||
|
|
<!-- Header row: Status Badge + channel + last activity -->
|
||
|
|
<div class="agent-card__header">
|
||
|
|
<div class="agent-card__status-row">
|
||
|
|
<!-- Sub-component: Agent Status Badge -->
|
||
|
|
<app-agent-status-badge
|
||
|
|
[status]="status()"
|
||
|
|
[attr.aria-label]="status() + ' status'"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="agent-card__meta">
|
||
|
|
@if (channel()) {
|
||
|
|
<span
|
||
|
|
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"
|
||
|
|
[attr.aria-label]="'Last activity: ' + lastActivityText()"
|
||
|
|
>
|
||
|
|
{{ lastActivityText() }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Task description -->
|
||
|
|
@if (task()) {
|
||
|
|
<p
|
||
|
|
class="agent-card__task"
|
||
|
|
[attr.aria-label]="'Current task: ' + task()"
|
||
|
|
>
|
||
|
|
{{ task() }}
|
||
|
|
</p>
|
||
|
|
}
|
||
|
|
|
||
|
|
<!-- Sub-component: Task Progress Bar -->
|
||
|
|
@if (showProgress()) {
|
||
|
|
<div
|
||
|
|
class="agent-card__progress"
|
||
|
|
[attr.aria-label]="'Task progress: ' + progress() + '%'"
|
||
|
|
>
|
||
|
|
<app-task-progress-bar
|
||
|
|
[progress]="progress()"
|
||
|
|
[showElapsed]="showElapsed()"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
<!-- Footer: session key (truncated) + Quick-Jump button -->
|
||
|
|
<div class="agent-card__footer">
|
||
|
|
<span
|
||
|
|
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)="onJumpClick($event)"
|
||
|
|
[attr.aria-label]="'Jump to agent session'"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</article>
|