57 lines
2.1 KiB
HTML
57 lines
2.1 KiB
HTML
|
<!-- ========================================================================== -->
|
|||
|
|
<!-- Hub Page — Responsive Agent Card Grid with Filter Chips -->
|
|||
|
|
<!-- Per CUB-27 spec breakpoints: -->
|
|||
|
|
<!-- Compact (0–599px): Single-column cards, horizontal-scroll filter chips -->
|
|||
|
|
<!-- Medium (600–1023px): 2-column grid -->
|
|||
|
|
<!-- Expanded (≥1024px): 3+ column auto-fill grid -->
|
|||
|
|
<!-- CUB-26: Integrates AgentCard click/long-press with session drawer. -->
|
|||
|
|
<!-- ========================================================================== -->
|
|||
|
|
|
|||
|
|
<div class="hub-page">
|
|||
|
|
<h1 class="hub-page__title">Command Hub</h1>
|
|||
|
|
|
|||
|
|
<!-- Filter Chip Group — horizontal scroll on mobile -->
|
|||
|
|
<div class="hub-page__filters" role="tablist" aria-label="Filter agents by status">
|
|||
|
|
@for (filter of filters; track filter.value) {
|
|||
|
|
<button
|
|||
|
|
class="hub-page__filter-chip"
|
|||
|
|
[class.hub-page__filter-chip--active]="activeFilter() === filter.value"
|
|||
|
|
role="tab"
|
|||
|
|
[attr.aria-selected]="activeFilter() === filter.value"
|
|||
|
|
(click)="selectFilter(filter.value)"
|
|||
|
|
>
|
|||
|
|
{{ filter.label }}
|
|||
|
|
</button>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Agent Card Grid -->
|
|||
|
|
<div class="hub-page__grid">
|
|||
|
|
@for (agent of filteredAgents(); 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"
|
|||
|
|
[agentId]="agent.id"
|
|||
|
|
[displayName]="agent.displayName"
|
|||
|
|
[role]="agent.role"
|
|||
|
|
[errorMessage]="agent.errorMessage ?? ''"
|
|||
|
|
(cardClick)="onCardClick($event)"
|
|||
|
|
(cardLongPress)="onCardLongPress($event)"
|
|||
|
|
/>
|
|||
|
|
} @empty {
|
|||
|
|
<p class="hub-page__empty">No agents online</p>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Agent Session Drawer (CUB-26) -->
|
|||
|
|
<app-agent-session-drawer
|
|||
|
|
[isMobile]="isMobile()"
|
|||
|
|
(openSession)="onOpenSession($event)"
|
|||
|
|
(pinToDashboard)="onPinToDashboard($event)"
|
|||
|
|
(drawerClose)="onDrawerClose()"
|
|||
|
|
/>
|