CUB-122: Scaffold Control Center React frontend
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
This commit is contained in:
@@ -0,0 +1,112 @@
|
||||
<!-- ======================================================================== -->
|
||||
<!-- Adaptive Navigation — Desktop sidebar / Mobile header -->
|
||||
<!-- Desktop (≥768px): 72px sidebar with full navigation items -->
|
||||
<!-- Mobile (<768px): 56px compact header with hamburger menu -->
|
||||
<!-- ======================================================================== -->
|
||||
|
||||
<!-- ======================= DESKTOP SIDEBAR (≥768px) ======================= -->
|
||||
<aside class="adaptive-nav__sidebar" aria-label="Navigation sidebar">
|
||||
<!-- Brand / Toggle header -->
|
||||
<div class="adaptive-nav__sidebar-header">
|
||||
<span class="adaptive-nav__brand">OC</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation destinations -->
|
||||
<nav class="adaptive-nav__sidebar-nav">
|
||||
@for (dest of destinations; track dest.route) {
|
||||
<a
|
||||
class="adaptive-nav__sidebar-item"
|
||||
[routerLink]="dest.route"
|
||||
routerLinkActive="adaptive-nav__sidebar-item--active"
|
||||
[attr.aria-label]="dest.label"
|
||||
>
|
||||
<mat-icon
|
||||
[matBadge]="dest.badge ?? 0"
|
||||
[matBadgeHidden]="!dest.badge"
|
||||
matBadgePosition="above after"
|
||||
matBadgeSize="small"
|
||||
>
|
||||
{{ dest.icon }}
|
||||
</mat-icon>
|
||||
<span class="adaptive-nav__sidebar-label">{{ dest.label }}</span>
|
||||
</a>
|
||||
}
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar footer: LIVE indicator + action buttons -->
|
||||
<div class="adaptive-nav__sidebar-footer">
|
||||
<div class="adaptive-nav__live" [class.adaptive-nav__live--connected]="isConnected()">
|
||||
<span
|
||||
class="adaptive-nav__live-dot"
|
||||
[class.adaptive-nav__live-dot--connected]="isConnected()"
|
||||
></span>
|
||||
<mat-chip
|
||||
class="adaptive-nav__live-chip"
|
||||
[highlighted]="isConnected()"
|
||||
[disabled]="!isConnected()"
|
||||
>
|
||||
{{ isConnected() ? 'LIVE' : 'OFFLINE' }}
|
||||
</mat-chip>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons (placeholder) -->
|
||||
<div class="adaptive-nav__sidebar-actions">
|
||||
<button mat-icon-button aria-label="Notifications">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button aria-label="Settings">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- ======================= MOBILE HEADER (<768px) ======================== -->
|
||||
<header class="adaptive-nav__mobile-header" role="banner">
|
||||
<!-- Hamburger menu button -->
|
||||
<button
|
||||
class="adaptive-nav__hamburger"
|
||||
mat-icon-button
|
||||
[attr.aria-label]="mobileMenuOpen() ? 'Close menu' : 'Open menu'"
|
||||
[attr.aria-expanded]="mobileMenuOpen()"
|
||||
(click)="toggleMobileMenu()"
|
||||
>
|
||||
<mat-icon>{{ mobileMenuOpen() ? 'close' : 'menu' }}</mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="adaptive-nav__mobile-title">Command Hub</h1>
|
||||
|
||||
<!-- LIVE indicator (always visible on mobile) -->
|
||||
<div class="adaptive-nav__live adaptive-nav__live--mobile" [class.adaptive-nav__live--connected]="isConnected()">
|
||||
<span
|
||||
class="adaptive-nav__live-dot"
|
||||
[class.adaptive-nav__live-dot--connected]="isConnected()"
|
||||
></span>
|
||||
<span class="adaptive-nav__live-text">{{ isConnected() ? 'LIVE' : 'OFFLINE' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Mobile action buttons (placeholder) -->
|
||||
<button class="adaptive-nav__mobile-action" mat-icon-button aria-label="Notifications">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- ======================= MOBILE DRAWER OVERLAY ========================= -->
|
||||
@if (mobileMenuOpen()) {
|
||||
<div class="adaptive-nav__overlay" (click)="closeMobileMenu()" role="presentation"></div>
|
||||
<nav class="adaptive-nav__mobile-drawer" aria-label="Mobile navigation menu">
|
||||
@for (dest of destinations; track dest.route) {
|
||||
<a
|
||||
class="adaptive-nav__drawer-item"
|
||||
[routerLink]="dest.route"
|
||||
routerLinkActive="adaptive-nav__drawer-item--active"
|
||||
[attr.aria-label]="dest.label"
|
||||
(click)="closeMobileMenu()"
|
||||
>
|
||||
<mat-icon>{{ dest.icon }}</mat-icon>
|
||||
<span class="adaptive-nav__drawer-label">{{ dest.label }}</span>
|
||||
</a>
|
||||
}
|
||||
</nav>
|
||||
}
|
||||
@@ -0,0 +1,365 @@
|
||||
// ============================================================================
|
||||
// Adaptive Navigation — Desktop sidebar / Mobile header
|
||||
// Per CUB-27 spec breakpoints:
|
||||
// Compact (0–599px): Mobile header + hamburger + drawer
|
||||
// Medium (600–1023px): Collapsed sidebar (icon-only, 72px)
|
||||
// Expanded (≥1024px): Full sidebar with labels (72px collapsed, 256px expanded)
|
||||
// ============================================================================
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Desktop Sidebar (visible ≥600px)
|
||||
// ---------------------------------------------------------------------------
|
||||
.adaptive-nav__sidebar {
|
||||
display: none; // Hidden by default (mobile-first)
|
||||
flex-direction: column;
|
||||
width: var(--cc-nav-rail-collapsed-width, 72px);
|
||||
min-height: 100vh;
|
||||
background-color: var(--cc-surface-container-high);
|
||||
border-right: 1px solid var(--cc-outline);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.adaptive-nav__sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid var(--cc-outline);
|
||||
}
|
||||
|
||||
.adaptive-nav__brand {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--status-active);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.adaptive-nav__sidebar-nav {
|
||||
flex: 1;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.adaptive-nav__sidebar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-height: 56px;
|
||||
padding: 8px 0;
|
||||
margin: 2px 8px;
|
||||
border-radius: 28px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
text-decoration: none;
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--status-active-bg);
|
||||
color: var(--status-active);
|
||||
|
||||
.adaptive-nav__sidebar-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adaptive-nav__sidebar-label {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sidebar Footer — LIVE indicator + action buttons
|
||||
// ---------------------------------------------------------------------------
|
||||
.adaptive-nav__sidebar-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 0 20px;
|
||||
border-top: 1px solid var(--cc-outline);
|
||||
}
|
||||
|
||||
.adaptive-nav__sidebar-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
.mat-mdc-icon-button {
|
||||
color: var(--cc-on-surface-variant) !important;
|
||||
--mdc-icon-button-icon-size: 20px;
|
||||
|
||||
&:hover {
|
||||
color: var(--cc-on-surface) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// LIVE Status Indicator
|
||||
// ---------------------------------------------------------------------------
|
||||
.adaptive-nav__live {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 16px;
|
||||
transition: background-color 200ms ease;
|
||||
|
||||
&--connected {
|
||||
background-color: var(--status-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.adaptive-nav__live-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
min-width: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--status-error);
|
||||
transition: background-color 200ms ease;
|
||||
|
||||
&--connected {
|
||||
background-color: var(--status-active);
|
||||
animation: pulse-active 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.adaptive-nav__live-chip {
|
||||
font-size: 11px !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: 0.06em;
|
||||
height: 24px !important;
|
||||
min-height: 24px !important;
|
||||
padding: 0 8px !important;
|
||||
color: var(--status-active) !important;
|
||||
--mdc-chip-elevated-container-color: transparent;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.adaptive-nav__live-text {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--status-active);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mobile Header (visible <600px only)
|
||||
// ---------------------------------------------------------------------------
|
||||
.adaptive-nav__mobile-header {
|
||||
display: none; // Hidden on desktop, shown on mobile via media query
|
||||
align-items: center;
|
||||
height: var(--cc-header-height-compact, 56px);
|
||||
padding: 0 12px;
|
||||
background-color: var(--cc-surface-container-high);
|
||||
border-bottom: 1px solid var(--cc-outline);
|
||||
z-index: 20;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.adaptive-nav__hamburger {
|
||||
color: var(--cc-on-surface-variant) !important;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
|
||||
&:hover {
|
||||
color: var(--cc-on-surface) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adaptive-nav__mobile-title {
|
||||
flex: 1;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--cc-on-surface);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.adaptive-nav__live--mobile {
|
||||
padding: 4px 10px;
|
||||
border-radius: 16px;
|
||||
|
||||
.adaptive-nav__live-text {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.adaptive-nav__mobile-action {
|
||||
color: var(--cc-on-surface-variant) !important;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
|
||||
&:hover {
|
||||
color: var(--cc-on-surface) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mobile Drawer
|
||||
// ---------------------------------------------------------------------------
|
||||
.adaptive-nav__overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.adaptive-nav__mobile-drawer {
|
||||
position: fixed;
|
||||
top: var(--cc-header-height-compact, 56px); // Below header
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
max-width: 80vw;
|
||||
background-color: var(--cc-surface-container);
|
||||
border-right: 1px solid var(--cc-outline);
|
||||
z-index: 50;
|
||||
padding: 12px 0;
|
||||
overflow-y: auto;
|
||||
animation: slide-in-left 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.adaptive-nav__drawer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
min-height: 48px;
|
||||
padding: 0 20px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
text-decoration: none;
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--status-active-bg);
|
||||
color: var(--status-active);
|
||||
|
||||
.adaptive-nav__drawer-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adaptive-nav__drawer-label {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Drawer slide-in animation
|
||||
// ---------------------------------------------------------------------------
|
||||
@keyframes slide-in-left {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Media Queries — Layout Switch (CUB-27 breakpoints)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// Compact (0–599px): Show mobile header, hide sidebar
|
||||
@media (max-width: 599px) {
|
||||
.adaptive-nav__sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adaptive-nav__mobile-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Hide mobile drawer and overlay on desktop
|
||||
.adaptive-nav__overlay,
|
||||
.adaptive-nav__mobile-drawer {
|
||||
// These are conditional via @if in template, no display:none needed
|
||||
}
|
||||
}
|
||||
|
||||
// Medium (600–1023px): Show collapsed sidebar (icon-only), hide mobile
|
||||
@media (min-width: 600px) and (max-width: 1023px) {
|
||||
.adaptive-nav__sidebar {
|
||||
display: flex;
|
||||
width: var(--cc-nav-rail-collapsed-width, 72px);
|
||||
}
|
||||
|
||||
// Hide labels on medium (collapsed)
|
||||
.adaptive-nav__sidebar-label,
|
||||
.adaptive-nav__brand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adaptive-nav__sidebar-header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adaptive-nav__sidebar-item {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adaptive-nav__mobile-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adaptive-nav__overlay,
|
||||
.adaptive-nav__mobile-drawer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Expanded (≥1024px): Show sidebar with labels
|
||||
@media (min-width: 1024px) {
|
||||
.adaptive-nav__sidebar {
|
||||
display: flex;
|
||||
width: var(--cc-nav-rail-collapsed-width, 72px);
|
||||
transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.adaptive-nav__mobile-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adaptive-nav__overlay,
|
||||
.adaptive-nav__mobile-drawer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Accessibility: Reduced Motion
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.adaptive-nav__live-dot--connected {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.adaptive-nav__mobile-drawer {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.adaptive-nav__sidebar {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { ChangeDetectionStrategy, Component, signal, HostListener, OnDestroy, OnInit } from '@angular/core';
|
||||
import { RouterLink, RouterLinkActive } from '@angular/router';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatBadgeModule } from '@angular/material/badge';
|
||||
import { NAV_DESTINATIONS } from '../../models/nav.model';
|
||||
|
||||
/**
|
||||
* Adaptive Navigation Component — switches between desktop sidebar
|
||||
* and mobile header layouts using CSS media queries + JS breakpoint sync.
|
||||
*
|
||||
* Per CUB-27 spec breakpoints:
|
||||
* Compact (0–599px): Mobile header + hamburger + bottom nav
|
||||
* Medium (600–1023px): Collapsed sidebar (icon-only)
|
||||
* Expanded (≥1024px): Expandable sidebar (hover/click)
|
||||
*
|
||||
* The LIVE status indicator is visible in all layouts.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-adaptive-navigation',
|
||||
standalone: true,
|
||||
imports: [
|
||||
RouterLink,
|
||||
RouterLinkActive,
|
||||
MatIconModule,
|
||||
MatButtonModule,
|
||||
MatChipsModule,
|
||||
MatBadgeModule,
|
||||
],
|
||||
templateUrl: './adaptive-navigation.component.html',
|
||||
styleUrl: './adaptive-navigation.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AdaptiveNavigationComponent implements OnInit, OnDestroy {
|
||||
/** Navigation destinations shared with other nav components */
|
||||
protected readonly destinations = NAV_DESTINATIONS;
|
||||
|
||||
/** Whether the mobile drawer is open */
|
||||
protected readonly mobileMenuOpen = signal(false);
|
||||
|
||||
/** Live connection status */
|
||||
protected readonly isConnected = signal(true);
|
||||
|
||||
/** Responsive breakpoint state */
|
||||
protected readonly isMedium = signal(false);
|
||||
protected readonly isExpanded = signal(false);
|
||||
|
||||
private readonly COMPACT_MAX = 599;
|
||||
private readonly MEDIUM_MAX = 1023;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.updateBreakpoint();
|
||||
}
|
||||
|
||||
@HostListener('window:resize')
|
||||
onResize(): void {
|
||||
this.updateBreakpoint();
|
||||
}
|
||||
|
||||
/** Toggle mobile menu */
|
||||
toggleMobileMenu(): void {
|
||||
this.mobileMenuOpen.update((v) => !v);
|
||||
}
|
||||
|
||||
/** Close mobile menu (e.g. on nav) */
|
||||
closeMobileMenu(): void {
|
||||
this.mobileMenuOpen.set(false);
|
||||
}
|
||||
|
||||
private updateBreakpoint(): void {
|
||||
const w = window.innerWidth;
|
||||
this.isMedium.set(w >= this.COMPACT_MAX + 1 && w <= this.MEDIUM_MAX);
|
||||
this.isExpanded.set(w > this.MEDIUM_MAX);
|
||||
// Close mobile menu when switching to desktop
|
||||
if (w > this.COMPACT_MAX) {
|
||||
this.mobileMenuOpen.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// HostListener auto-unsubscribes
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './adaptive-navigation.component';
|
||||
@@ -0,0 +1,140 @@
|
||||
<!-- ============================================================================
|
||||
Agent Session Drawer — CUB-26
|
||||
Desktop: 480px side drawer slides from right with modal overlay.
|
||||
Mobile: Bottom sheet slides up from bottom.
|
||||
Shows: Agent name, status badge, session key, live log tail,
|
||||
recent messages, and action buttons.
|
||||
============================================================================-->
|
||||
|
||||
<!-- Backdrop overlay -->
|
||||
@if (isOpen()) {
|
||||
<div
|
||||
class="session-drawer-backdrop"
|
||||
(click)="onBackdropClick()"
|
||||
[class.session-drawer-backdrop--visible]="isOpen()"
|
||||
></div>
|
||||
}
|
||||
|
||||
<!-- Drawer panel -->
|
||||
<div
|
||||
#drawerPanel
|
||||
class="session-drawer"
|
||||
[class.session-drawer--open]="isOpen()"
|
||||
[class.session-drawer--mobile]="isMobile"
|
||||
(keydown)="onDrawerKeydown($event)"
|
||||
role="dialog"
|
||||
aria-label="Agent session details"
|
||||
[attr.aria-hidden]="!isOpen()"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="session-drawer__header">
|
||||
@if (agent) {
|
||||
<div class="session-drawer__header-identity">
|
||||
<span class="status-dot {{ getStatusClass(agent.status) }}" [attr.aria-label]="getStatusLabel(agent.status)"></span>
|
||||
<div class="session-drawer__header-text">
|
||||
<h2 class="session-drawer__title">{{ agent.displayName }}</h2>
|
||||
<span class="session-drawer__role">{{ agent.role }}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<button
|
||||
class="session-drawer__close-btn"
|
||||
type="button"
|
||||
aria-label="Close drawer"
|
||||
(click)="close()"
|
||||
matIconButton
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Content area -->
|
||||
@if (agent) {
|
||||
<div class="session-drawer__content">
|
||||
|
||||
<!-- Status & Session Key Section -->
|
||||
<section class="session-drawer__section">
|
||||
<div class="session-drawer__meta-row">
|
||||
<span class="session-drawer__status-chip {{ getStatusChipColor(agent.status) }}">
|
||||
{{ getStatusLabel(agent.status) }}
|
||||
</span>
|
||||
@if (agent.channel) {
|
||||
<span class="session-drawer__channel-badge">
|
||||
<mat-icon class="session-drawer__channel-icon">chat</mat-icon>
|
||||
{{ agent.channel }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div class="session-drawer__session-key">
|
||||
<span class="session-drawer__label">Session Key</span>
|
||||
<code class="session-drawer__key-value">{{ agent.sessionKey }}</code>
|
||||
</div>
|
||||
@if (agent.currentTask) {
|
||||
<div class="session-drawer__task-info">
|
||||
<span class="session-drawer__label">Current Task</span>
|
||||
<span class="session-drawer__task-text">{{ agent.currentTask }}</span>
|
||||
</div>
|
||||
}
|
||||
<div class="session-drawer__last-activity">
|
||||
<span class="session-drawer__label">Last Activity</span>
|
||||
<span class="session-drawer__activity-time">{{ formatRelativeTime(agent.lastActivity) }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent Messages Section -->
|
||||
<section class="session-drawer__section">
|
||||
<h3 class="session-drawer__section-title">Recent Messages</h3>
|
||||
<div class="session-drawer__messages">
|
||||
@for (msg of recentMessages(); track msg.id) {
|
||||
<div class="session-drawer__message session-drawer__message--{{ msg.sender }}">
|
||||
<span class="session-drawer__message-sender">
|
||||
{{ msg.sender === 'agent' ? agent.displayName : 'You' }}
|
||||
</span>
|
||||
<p class="session-drawer__message-text">{{ msg.content }}</p>
|
||||
<span class="session-drawer__message-time">{{ formatTime(msg.timestamp) }}</span>
|
||||
</div>
|
||||
} @empty {
|
||||
<p class="session-drawer__empty-state">No recent messages</p>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Live Log Tail Section -->
|
||||
<section class="session-drawer__section">
|
||||
<h3 class="session-drawer__section-title">Live Log</h3>
|
||||
<div class="session-drawer__log-container">
|
||||
@for (line of logLines(); track $index) {
|
||||
<div class="session-drawer__log-line {{ getLogLevelClass(line.level) }}">
|
||||
<span class="session-drawer__log-time">{{ formatTime(line.timestamp) }}</span>
|
||||
<span class="session-drawer__log-level">{{ line.level.toUpperCase() }}</span>
|
||||
<span class="session-drawer__log-message">{{ line.message }}</span>
|
||||
</div>
|
||||
} @empty {
|
||||
<p class="session-drawer__empty-state">No log output</p>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Action buttons (sticky footer) -->
|
||||
<div class="session-drawer__actions">
|
||||
<button
|
||||
class="session-drawer__action-btn session-drawer__action-btn--primary"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="onOpenSession()"
|
||||
>
|
||||
<mat-icon>open_in_new</mat-icon>
|
||||
Open Full Session
|
||||
</button>
|
||||
<button
|
||||
class="session-drawer__action-btn session-drawer__action-btn--secondary"
|
||||
mat-stroked-button
|
||||
(click)="onPinToDashboard()"
|
||||
>
|
||||
<mat-icon>push_pin</mat-icon>
|
||||
Pin to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,500 @@
|
||||
// ============================================================================
|
||||
// Agent Session Drawer — CUB-26
|
||||
// Desktop: 480px side drawer slides from right with modal overlay.
|
||||
// Mobile: Bottom sheet slides up from bottom.
|
||||
// Uses Control Center design tokens from CUB-21.
|
||||
// ============================================================================
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Backdrop
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 998;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-out;
|
||||
|
||||
&--visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Drawer Panel — Desktop: Side drawer from right
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 480px;
|
||||
max-width: 100vw;
|
||||
background-color: var(--cc-surface-container);
|
||||
border-left: 1px solid var(--cc-outline);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: -4px 0 32px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
|
||||
&--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mobile: Bottom Sheet — slides up from bottom
|
||||
// ---------------------------------------------------------------------------
|
||||
&--mobile {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
max-height: 85vh;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--cc-outline);
|
||||
border-radius: 20px 20px 0 0;
|
||||
transform: translateY(100%);
|
||||
box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.4);
|
||||
|
||||
&.session-drawer--open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
// Drag handle for mobile bottom sheet
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--cc-on-surface-variant);
|
||||
opacity: 0.4;
|
||||
margin: 8px auto 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Header
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px 16px;
|
||||
border-bottom: 1px solid var(--cc-outline);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.session-drawer__header-identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.session-drawer__header-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.session-drawer__title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--cc-on-surface);
|
||||
margin: 0;
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.session-drawer__role {
|
||||
font-size: 13px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.session-drawer__close-btn {
|
||||
--mat-icon-button-state-layer-color: transparent;
|
||||
color: var(--cc-on-surface-variant);
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Content — scrollable area
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 24px 16px;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sections
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__section {
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--cc-outline);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.session-drawer__section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--cc-on-surface-variant);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Meta Row — Status + Channel
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.session-drawer__status-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
&.status-chip--active {
|
||||
background-color: var(--status-active-bg);
|
||||
color: var(--status-active);
|
||||
}
|
||||
|
||||
&.status-chip--idle {
|
||||
background-color: var(--status-idle-bg);
|
||||
color: var(--status-idle);
|
||||
}
|
||||
|
||||
&.status-chip--thinking {
|
||||
background-color: var(--status-thinking-bg);
|
||||
color: var(--status-thinking);
|
||||
}
|
||||
|
||||
&.status-chip--error {
|
||||
background-color: var(--status-error-bg);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
&.status-chip--offline {
|
||||
background-color: rgba(100, 116, 139, 0.12);
|
||||
color: var(--status-offline);
|
||||
}
|
||||
}
|
||||
|
||||
.session-drawer__channel-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
background: var(--cc-surface-container-high);
|
||||
font-size: 12px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
}
|
||||
|
||||
.session-drawer__channel-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Session Key
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__session-key {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.session-drawer__label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--cc-on-surface-variant);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.session-drawer__key-value {
|
||||
display: block;
|
||||
font-family: var(--cc-font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--color-secondary);
|
||||
background: var(--cc-surface);
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--cc-outline);
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Task Info
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__task-info {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.session-drawer__task-text {
|
||||
font-size: 14px;
|
||||
color: var(--cc-on-surface);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Last Activity
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__last-activity {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.session-drawer__activity-time {
|
||||
font-size: 14px;
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Recent Messages
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.session-drawer__message {
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
max-width: 100%;
|
||||
|
||||
&--agent {
|
||||
background: var(--cc-surface-container-high);
|
||||
border: 1px solid var(--cc-outline);
|
||||
}
|
||||
|
||||
&--user {
|
||||
background: rgba(56, 189, 248, 0.08);
|
||||
border: 1px solid rgba(56, 189, 248, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.session-drawer__message-sender {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--cc-on-surface-variant);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.session-drawer__message-text {
|
||||
font-size: 14px;
|
||||
color: var(--cc-on-surface);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.session-drawer__message-time {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
margin-top: 4px;
|
||||
font-family: var(--cc-font-mono);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Live Log Container
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__log-container {
|
||||
background: var(--cc-surface);
|
||||
border: 1px solid var(--cc-outline);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
font-family: var(--cc-font-mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.session-drawer__log-line {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 1px 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&--info {
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
&--warn {
|
||||
color: #FBBF24;
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
&--debug {
|
||||
color: var(--cc-on-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
.session-drawer__log-time {
|
||||
color: var(--cc-on-surface-variant);
|
||||
flex-shrink: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.session-drawer__log-level {
|
||||
width: 48px;
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.session-drawer__log-message {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Empty State
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__empty-state {
|
||||
font-size: 13px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Action Buttons — Sticky Footer
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 24px 20px;
|
||||
border-top: 1px solid var(--cc-outline);
|
||||
background-color: var(--cc-surface-container);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.session-drawer__action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
|
||||
.mat-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mobile Adjustments
|
||||
// ---------------------------------------------------------------------------
|
||||
.session-drawer--mobile {
|
||||
.session-drawer__header {
|
||||
padding: 12px 20px 12px;
|
||||
}
|
||||
|
||||
.session-drawer__content {
|
||||
padding: 0 20px 12px;
|
||||
}
|
||||
|
||||
.session-drawer__actions {
|
||||
padding: 12px 20px 16px;
|
||||
flex-direction: column;
|
||||
|
||||
.session-drawer__action-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.session-drawer__log-container {
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Responsive — wider viewports keep 480px, narrow go full-width
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (max-width: 599px) {
|
||||
.session-drawer:not(.session-drawer--mobile) {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Accessibility: Reduced Motion
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.session-drawer {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.session-drawer-backdrop {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
Input,
|
||||
OnDestroy,
|
||||
Output,
|
||||
signal,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { AgentCardData, AgentStatus } from '../../models/agent.model';
|
||||
|
||||
// ============================================================================
|
||||
// Agent Session Drawer — Per CUB-26
|
||||
// Desktop: 480px side drawer slides from right with modal overlay.
|
||||
// Mobile: Bottom sheet slides up from bottom.
|
||||
// Shows: Agent name, status badge, session key, live log tail,
|
||||
// recent messages, and action buttons.
|
||||
// ============================================================================
|
||||
|
||||
export interface SessionLogLine {
|
||||
timestamp: Date;
|
||||
level: 'info' | 'warn' | 'error' | 'debug';
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface SessionMessage {
|
||||
id: string;
|
||||
sender: 'agent' | 'user';
|
||||
content: string;
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-agent-session-drawer',
|
||||
standalone: true,
|
||||
imports: [CommonModule, MatButtonModule, MatIconModule, MatChipsModule],
|
||||
templateUrl: './agent-session-drawer.component.html',
|
||||
styleUrl: './agent-session-drawer.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AgentSessionDrawerComponent implements OnDestroy {
|
||||
// ---------------------------------------------------------------------------
|
||||
// Inputs
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** The agent whose session details are displayed. */
|
||||
@Input() set agent(value: AgentCardData | null) {
|
||||
this._agent = value;
|
||||
if (value) {
|
||||
this.isOpen.set(true);
|
||||
this.loadSessionData(value);
|
||||
}
|
||||
}
|
||||
get agent(): AgentCardData | null {
|
||||
return this._agent;
|
||||
}
|
||||
private _agent: AgentCardData | null = null;
|
||||
|
||||
/** Whether this is mobile viewport (bottom sheet mode). */
|
||||
@Input() isMobile = false;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Outputs
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Emitted when the user clicks "Open Full Session". Payload is the session key. */
|
||||
@Output() readonly openSession = new EventEmitter<string>();
|
||||
|
||||
/** Emitted when the user clicks "Pin to Dashboard". Payload is the session key. */
|
||||
@Output() readonly pinToDashboard = new EventEmitter<string>();
|
||||
|
||||
/** Emitted when the drawer closes. */
|
||||
@Output() readonly drawerClose = new EventEmitter<void>();
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Signals
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
readonly isOpen = signal(false);
|
||||
readonly logLines = signal<SessionLogLine[]>([]);
|
||||
readonly recentMessages = signal<SessionMessage[]>([]);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// View Children
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@ViewChild('drawerPanel') drawerPanel!: ElementRef<HTMLElement>;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Status Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
getStatusClass(status: string): string {
|
||||
return `status-dot--${status}`;
|
||||
}
|
||||
|
||||
getStatusLabel(status: AgentStatus): string {
|
||||
const labels: Record<AgentStatus, string> = {
|
||||
active: 'Active',
|
||||
idle: 'Idle',
|
||||
thinking: 'Thinking…',
|
||||
error: 'Error',
|
||||
offline: 'Offline',
|
||||
};
|
||||
return labels[status] ?? status;
|
||||
}
|
||||
|
||||
getStatusChipColor(status: AgentStatus): string {
|
||||
const map: Record<AgentStatus, string> = {
|
||||
active: 'status-chip--active',
|
||||
idle: 'status-chip--idle',
|
||||
thinking: 'status-chip--thinking',
|
||||
error: 'status-chip--error',
|
||||
offline: 'status-chip--offline',
|
||||
};
|
||||
return map[status] ?? '';
|
||||
}
|
||||
|
||||
getLogLevelClass(level: SessionLogLine['level']): string {
|
||||
return `log-line--${level}`;
|
||||
}
|
||||
|
||||
/** Format a date to a short time string. */
|
||||
formatTime(date: Date): string {
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
}
|
||||
|
||||
/** Format a date to a relative time string. */
|
||||
formatRelativeTime(date: Date): string {
|
||||
const now = Date.now();
|
||||
const then = date.getTime();
|
||||
const diffSec = Math.max(0, Math.floor((now - then) / 1000));
|
||||
if (diffSec < 60) return 'just now';
|
||||
if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
|
||||
if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
|
||||
return `${Math.floor(diffSec / 86400)}d ago`;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Public API
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Open the drawer for a specific agent. */
|
||||
open(agentData: AgentCardData): void {
|
||||
this._agent = agentData;
|
||||
this.isOpen.set(true);
|
||||
this.loadSessionData(agentData);
|
||||
}
|
||||
|
||||
/** Close the drawer. */
|
||||
close(): void {
|
||||
this.isOpen.set(false);
|
||||
this.drawerClose.emit();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Keyboard Handling
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@HostListener('document:keydown.escape')
|
||||
onEscapeKey(): void {
|
||||
if (this.isOpen()) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** Handle keyboard navigation within the drawer. */
|
||||
onDrawerKeydown(event: KeyboardEvent): void {
|
||||
if (event.key === 'Escape') {
|
||||
this.close();
|
||||
return;
|
||||
}
|
||||
// Tab through actions — browser default Tab behavior is fine,
|
||||
// we just trap focus within the drawer
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Outside Click
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
onBackdropClick(): void {
|
||||
this.close();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Actions
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
onOpenSession(): void {
|
||||
if (this._agent) {
|
||||
this.openSession.emit(this._agent.sessionKey);
|
||||
}
|
||||
this.close();
|
||||
}
|
||||
|
||||
onPinToDashboard(): void {
|
||||
if (this._agent) {
|
||||
this.pinToDashboard.emit(this._agent.sessionKey);
|
||||
}
|
||||
// Don't close — user may want to keep viewing
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Lifecycle
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// Clean up any subscriptions when needed
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Private
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Load mock session data for the agent (TODO: wire to real data service). */
|
||||
private loadSessionData(agentData: AgentCardData): void {
|
||||
// TODO: Replace with real session data service when available.
|
||||
// For now, generate placeholder log lines and messages.
|
||||
const now = new Date();
|
||||
const logLines: SessionLogLine[] = [];
|
||||
for (let i = 19; i >= 0; i--) {
|
||||
const ts = new Date(now.getTime() - i * 5000);
|
||||
const levels: SessionLogLine['level'][] = ['info', 'info', 'info', 'debug', 'warn'];
|
||||
const messages = [
|
||||
`Processing task queue for ${agentData.displayName}`,
|
||||
`SignalR heartbeat OK`,
|
||||
`Session state: active`,
|
||||
`Checking for pending commands…`,
|
||||
`Updating task progress: ${Math.floor(Math.random() * 100)}%`,
|
||||
];
|
||||
logLines.push({
|
||||
timestamp: ts,
|
||||
level: levels[i % levels.length],
|
||||
message: messages[i % messages.length],
|
||||
});
|
||||
}
|
||||
this.logLines.set(logLines);
|
||||
|
||||
const recentMessages: SessionMessage[] = [
|
||||
{
|
||||
id: '1',
|
||||
sender: 'user',
|
||||
content: `Hey ${agentData.displayName}, how's the current task going?`,
|
||||
timestamp: new Date(now.getTime() - 120000),
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
sender: 'agent',
|
||||
content: agentData.currentTask ?? 'Working on it — progress is steady.',
|
||||
timestamp: new Date(now.getTime() - 115000),
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
sender: 'user',
|
||||
content: 'Great, let me know if you hit any blockers.',
|
||||
timestamp: new Date(now.getTime() - 110000),
|
||||
},
|
||||
];
|
||||
this.recentMessages.set(recentMessages);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export { AgentSessionDrawerComponent } from './agent-session-drawer.component';
|
||||
export type { SessionLogLine, SessionMessage } from './agent-session-drawer.component';
|
||||
@@ -0,0 +1,8 @@
|
||||
<span class="badge"
|
||||
[class]="statusClass"
|
||||
[class.badge--pulse]="hasPulse"
|
||||
[attr.aria-label]="'Agent status: ' + displayLabel"
|
||||
role="status">
|
||||
<span class="badge__dot"></span>
|
||||
<span class="badge__label">{{ displayLabel }}</span>
|
||||
</span>
|
||||
@@ -0,0 +1,146 @@
|
||||
// ============================================================================
|
||||
// Agent Status Badge — per spec Section 7.3
|
||||
// Colored pill with dot indicator and optional pulse animation.
|
||||
// ============================================================================
|
||||
|
||||
$badge-height: 24px;
|
||||
$dot-size: 8px;
|
||||
$border-radius: 12px;
|
||||
$font-size: 12px;
|
||||
$font-weight: 500;
|
||||
$padding-x: 8px;
|
||||
$gap: 6px;
|
||||
|
||||
@use 'sass:color';
|
||||
|
||||
// Status color palette
|
||||
$color-active: #22c55e; // green-500
|
||||
$color-idle: #9ca3af; // gray-400
|
||||
$color-thinking: #3b82f6; // blue-500
|
||||
$color-error: #ef4444; // red-500
|
||||
$color-offline: #9ca3af; // gray-400
|
||||
|
||||
// Background tints (12% opacity for soft pill background)
|
||||
$bg-active: rgba($color-active, 0.12);
|
||||
$bg-idle: rgba($color-idle, 0.12);
|
||||
$bg-thinking: rgba($color-thinking, 0.12);
|
||||
$bg-error: rgba($color-error, 0.12);
|
||||
$bg-offline: rgba($color-offline, 0.12);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Base pill
|
||||
// ---------------------------------------------------------------------------
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: $badge-height;
|
||||
padding: 0 $padding-x;
|
||||
border-radius: $border-radius;
|
||||
gap: $gap;
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Dot indicator
|
||||
// ---------------------------------------------------------------------------
|
||||
.badge__dot {
|
||||
width: $dot-size;
|
||||
height: $dot-size;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Label text
|
||||
// ---------------------------------------------------------------------------
|
||||
.badge__label {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Status color variants
|
||||
// ---------------------------------------------------------------------------
|
||||
.badge--active {
|
||||
background: $bg-active;
|
||||
color: color.adjust($color-active, $lightness: -10%);
|
||||
|
||||
.badge__dot {
|
||||
background: $color-active;
|
||||
}
|
||||
}
|
||||
|
||||
.badge--idle {
|
||||
background: $bg-idle;
|
||||
color: color.adjust($color-idle, $lightness: -15%);
|
||||
|
||||
.badge__dot {
|
||||
background: $color-idle;
|
||||
}
|
||||
}
|
||||
|
||||
.badge--thinking {
|
||||
background: $bg-thinking;
|
||||
color: color.adjust($color-thinking, $lightness: -10%);
|
||||
|
||||
.badge__dot {
|
||||
background: $color-thinking;
|
||||
}
|
||||
}
|
||||
|
||||
.badge--error {
|
||||
background: $bg-error;
|
||||
color: color.adjust($color-error, $lightness: -10%);
|
||||
|
||||
.badge__dot {
|
||||
background: $color-error;
|
||||
}
|
||||
}
|
||||
|
||||
.badge--offline {
|
||||
background: $bg-offline;
|
||||
color: color.adjust($color-offline, $lightness: -15%);
|
||||
|
||||
.badge__dot {
|
||||
background: $color-offline;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Pulse animation — applied when status is active, thinking, or error
|
||||
// ---------------------------------------------------------------------------
|
||||
.badge--pulse {
|
||||
.badge__dot {
|
||||
animation: pulse-dot 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Active: 2s pulse
|
||||
.badge--active.badge--pulse .badge__dot {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
// Thinking: 3s pulse
|
||||
.badge--thinking.badge--pulse .badge__dot {
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
// Error: 0.8s pulse (fast, urgent)
|
||||
.badge--error.badge--pulse .badge__dot {
|
||||
animation-duration: 0.8s;
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
|
||||
import { AgentStatus } from '../../models/agent.model';
|
||||
|
||||
/**
|
||||
* Agent Status Badge component.
|
||||
* Displays a colored pill with a pulse animation indicating the agent's current status.
|
||||
* Per spec Section 7.3: Agent Card Component Interface — status indicator.
|
||||
*
|
||||
* Color mapping:
|
||||
* - Active → green
|
||||
* - Idle → gray
|
||||
* - Thinking → blue
|
||||
* - Error → red
|
||||
* - Offline → gray (no pulse)
|
||||
*
|
||||
* Pulse animations:
|
||||
* - Active → 2s
|
||||
* - Error → 0.8s
|
||||
* - Thinking → 3s
|
||||
* - Idle / Offline → no pulse
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-agent-status-badge',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './agent-status-badge.component.html',
|
||||
styleUrl: './agent-status-badge.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AgentStatusBadgeComponent {
|
||||
/** Current agent status — binds to the AgentStatus type from the model. */
|
||||
readonly status = input.required<AgentStatus>();
|
||||
|
||||
/** Label text shown inside the badge. Defaults to title-cased status. */
|
||||
readonly label = input<string>();
|
||||
|
||||
get displayLabel(): string {
|
||||
return this.label() ?? this.titleCase(this.status());
|
||||
}
|
||||
|
||||
/** CSS class driven by the current status value. */
|
||||
get statusClass(): string {
|
||||
return `badge--${this.status()}`;
|
||||
}
|
||||
|
||||
/** Whether the pulse animation should be active for the current status. */
|
||||
get hasPulse(): boolean {
|
||||
return this.status() === 'active' || this.status() === 'thinking' || this.status() === 'error';
|
||||
}
|
||||
|
||||
private titleCase(value: string): string {
|
||||
return value.charAt(0).toUpperCase() + value.slice(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { AgentStatusBadgeComponent } from './agent-status-badge.component';
|
||||
@@ -0,0 +1,31 @@
|
||||
<!-- Backdrop overlay — click to dismiss -->
|
||||
<div class="global-action-modal__backdrop" #backdrop (click)="onBackdropClick()"></div>
|
||||
|
||||
<!-- Modal panel -->
|
||||
<div class="global-action-modal__panel" (click)="onModalClick($event)" role="dialog" aria-modal="true" aria-label="Global Actions">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="global-action-modal__header">
|
||||
<h2 class="global-action-modal__title">Global Actions</h2>
|
||||
<button matIconButton
|
||||
class="global-action-modal__close"
|
||||
aria-label="Close modal"
|
||||
(click)="onClose()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Action grid -->
|
||||
<div class="global-action-modal__actions">
|
||||
@for (action of actions; track action.key) {
|
||||
<button class="global-action-modal__action-btn global-action-modal__action-btn--{{ action.color }}"
|
||||
(click)="onAction(action)">
|
||||
<div class="global-action-modal__action-icon">
|
||||
<mat-icon>{{ action.icon }}</mat-icon>
|
||||
</div>
|
||||
<span class="global-action-modal__action-label">{{ action.label }}</span>
|
||||
<span class="global-action-modal__action-desc">{{ action.description }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,198 @@
|
||||
// ============================================================================
|
||||
// Global Action Modal — Tactical Dark Mode Styling
|
||||
// Uses Control Center design tokens from styles.scss
|
||||
// ============================================================================
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Backdrop
|
||||
// ---------------------------------------------------------------------------
|
||||
:host {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.global-action-modal__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Modal Panel
|
||||
// ---------------------------------------------------------------------------
|
||||
.global-action-modal__panel {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: min(560px, calc(100vw - 48px));
|
||||
background: var(--cc-surface-container);
|
||||
border: 1px solid var(--cc-outline);
|
||||
border-radius: var(--cc-card-border-radius);
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Header
|
||||
// ---------------------------------------------------------------------------
|
||||
.global-action-modal__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px 12px;
|
||||
}
|
||||
|
||||
.global-action-modal__title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--cc-on-surface);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.global-action-modal__close {
|
||||
--mat-icon-button-state-layer-color: transparent;
|
||||
color: var(--cc-on-surface-variant);
|
||||
|
||||
&:hover {
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Action Grid
|
||||
// ---------------------------------------------------------------------------
|
||||
.global-action-modal__actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
padding: 12px 24px 24px;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Action Button
|
||||
// ---------------------------------------------------------------------------
|
||||
.global-action-modal__action-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 20px 16px;
|
||||
border: 1px solid var(--cc-outline);
|
||||
border-radius: 12px;
|
||||
background: var(--cc-surface);
|
||||
color: var(--cc-on-surface);
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
|
||||
font-family: inherit;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background: var(--cc-surface-container-high);
|
||||
border-color: var(--cc-on-surface-variant);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--mat-sys-primary, #38BDF8);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Action icon wrapper
|
||||
.global-action-modal__action-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
|
||||
.mat-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
// Action label
|
||||
.global-action-modal__action-label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
// Action description
|
||||
.global-action-modal__action-desc {
|
||||
font-size: 12px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Color Variants — per-action accent colors
|
||||
// ---------------------------------------------------------------------------
|
||||
.global-action-modal__action-btn--deploy {
|
||||
.global-action-modal__action-icon {
|
||||
background: var(--status-active-bg);
|
||||
color: var(--status-active);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--status-active);
|
||||
}
|
||||
}
|
||||
|
||||
.global-action-modal__action-btn--pause {
|
||||
.global-action-modal__action-icon {
|
||||
background: var(--status-idle-bg);
|
||||
color: var(--status-idle);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--status-idle);
|
||||
}
|
||||
}
|
||||
|
||||
.global-action-modal__action-btn--emergency {
|
||||
.global-action-modal__action-icon {
|
||||
background: var(--status-error-bg);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--status-error);
|
||||
}
|
||||
|
||||
.global-action-modal__action-label {
|
||||
color: var(--status-error);
|
||||
}
|
||||
}
|
||||
|
||||
.global-action-modal__action-btn--add {
|
||||
.global-action-modal__action-icon {
|
||||
background: var(--status-thinking-bg);
|
||||
color: var(--status-thinking);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--status-thinking);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Responsive — stack single column on narrow viewports
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (max-width: 400px) {
|
||||
.global-action-modal__actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
/**
|
||||
* Global Action Modal — overlay for fleet-wide commands.
|
||||
*
|
||||
* Four main actions: Deploy All, Pause All, Emergency Stop, Add Agent.
|
||||
* Tactical Dark Mode styling using Control Center design tokens.
|
||||
* Dismisses on backdrop click or close button.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-global-action-modal',
|
||||
standalone: true,
|
||||
imports: [MatIconModule, MatButtonModule],
|
||||
templateUrl: './global-action-modal.component.html',
|
||||
styleUrl: './global-action-modal.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class GlobalActionModalComponent {
|
||||
/** Emitted when any action button is clicked. Payload is the action key. */
|
||||
@Output() readonly actionSelected = new EventEmitter<GlobalAction>();
|
||||
|
||||
/** Emitted when the modal is dismissed (backdrop click or close button). */
|
||||
@Output() readonly dismissed = new EventEmitter<void>();
|
||||
|
||||
@ViewChild('backdrop') backdropEl!: ElementRef<HTMLElement>;
|
||||
|
||||
/** All available global actions. */
|
||||
readonly actions: GlobalActionDef[] = [
|
||||
{
|
||||
key: 'deploy-all',
|
||||
label: 'Deploy All',
|
||||
description: 'Deploy all agents in the fleet',
|
||||
icon: 'rocket_launch',
|
||||
color: 'deploy',
|
||||
},
|
||||
{
|
||||
key: 'pause-all',
|
||||
label: 'Pause All',
|
||||
description: 'Pause all running agents',
|
||||
icon: 'pause_circle',
|
||||
color: 'pause',
|
||||
},
|
||||
{
|
||||
key: 'emergency-stop',
|
||||
label: 'Emergency Stop',
|
||||
description: 'Immediately halt all agents',
|
||||
icon: 'emergency',
|
||||
color: 'emergency',
|
||||
},
|
||||
{
|
||||
key: 'add-agent',
|
||||
label: 'Add Agent',
|
||||
description: 'Register a new agent to the fleet',
|
||||
icon: 'person_add',
|
||||
color: 'add',
|
||||
},
|
||||
];
|
||||
|
||||
onBackdropClick(): void {
|
||||
this.dismissed.emit();
|
||||
}
|
||||
|
||||
onModalClick(event: Event): void {
|
||||
// Prevent clicks inside the modal panel from closing it
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
onClose(): void {
|
||||
this.dismissed.emit();
|
||||
}
|
||||
|
||||
onAction(action: GlobalActionDef): void {
|
||||
this.actionSelected.emit(action.key);
|
||||
}
|
||||
}
|
||||
|
||||
export type GlobalAction = 'deploy-all' | 'pause-all' | 'emergency-stop' | 'add-agent';
|
||||
|
||||
export interface GlobalActionDef {
|
||||
key: GlobalAction;
|
||||
label: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
color: 'deploy' | 'pause' | 'emergency' | 'add';
|
||||
}
|
||||
5
frontend-legacy/src/app/components/index.ts
Normal file
5
frontend-legacy/src/app/components/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export * from './quick-jump-button/quick-jump-button.component';
|
||||
export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
|
||||
export { QuickJumpDrawerComponent } from './quick-jump-drawer/index';
|
||||
export { AgentSessionDrawerComponent } from './agent-session-drawer/index';
|
||||
export type { SessionLogLine, SessionMessage } from './agent-session-drawer/index';
|
||||
@@ -0,0 +1,8 @@
|
||||
<button
|
||||
mat-icon-button
|
||||
class="quick-jump-button"
|
||||
[attr.aria-label]="'Jump to agent session'"
|
||||
(click)="onJumpClick()"
|
||||
>
|
||||
<mat-icon>arrow_forward</mat-icon>
|
||||
</button>
|
||||
@@ -0,0 +1,68 @@
|
||||
// ============================================================================
|
||||
// Quick-Jump Button — M3 FilledTonalIconButton
|
||||
// Per spec Section 7.3: Agent Card Quick-Jump action
|
||||
// M3 spec: FilledTonalIconButton uses secondary container color
|
||||
// with 8% state layer overlay for hover/focus.
|
||||
// ============================================================================
|
||||
|
||||
.quick-jump-button {
|
||||
// M3 FilledTonalIconButton: secondary-container background
|
||||
// Angular Material mat-icon-button sets up the base shape (40x40, round).
|
||||
// We override the color tokens to match FilledTonal style.
|
||||
--mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container);
|
||||
background-color: var(--mat-sys-secondary-container);
|
||||
border-radius: 50%;
|
||||
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// M3 State Layer: 8% overlay on hover
|
||||
&:hover {
|
||||
background-color: var(--mat-sys-secondary-container);
|
||||
// State layer overlay using a pseudo-element for precise 8% opacity
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background-color: var(--mat-sys-on-secondary-container);
|
||||
opacity: 0.08;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility)
|
||||
&:focus-visible {
|
||||
background-color: var(--mat-sys-secondary-container);
|
||||
outline: 3px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background-color: var(--mat-sys-on-secondary-container);
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// M3 State Layer: 12% overlay on active/pressed
|
||||
&:active {
|
||||
background-color: var(--mat-sys-secondary-container);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background-color: var(--mat-sys-on-secondary-container);
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon color stays on-secondary-container across all states
|
||||
.mat-icon {
|
||||
color: var(--mat-sys-on-secondary-container);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
|
||||
import { MatIconButton } from '@angular/material/button';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
|
||||
/**
|
||||
* Quick-Jump Button — M3 FilledTonalIconButton
|
||||
*
|
||||
* An icon button that emits a navigation event for jumping to an agent session.
|
||||
* Uses the Material Design 3 FilledTonalIconButton style with 8% state layer
|
||||
* overlay on hover and focus.
|
||||
*
|
||||
* Per spec Section 7.3: Agent Card Component Interface
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-quick-jump-button',
|
||||
standalone: true,
|
||||
imports: [MatIconButton, MatIcon],
|
||||
templateUrl: './quick-jump-button.component.html',
|
||||
styleUrl: './quick-jump-button.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class QuickJumpButtonComponent {
|
||||
/** Emitted when the button is clicked, carrying the session key for navigation. */
|
||||
@Output() jumpClick = new EventEmitter<string>();
|
||||
|
||||
/** The session key to navigate to. Set by the parent agent card. */
|
||||
sessionKey = '';
|
||||
|
||||
onJumpClick(): void {
|
||||
this.jumpClick.emit(this.sessionKey);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { QuickJumpDrawerComponent } from './quick-jump-drawer.component';
|
||||
@@ -0,0 +1,109 @@
|
||||
<!-- ============================================================================
|
||||
Quick-Jump Drawer — Slide-out panel for fast agent switching
|
||||
Per CUB-51: Slides from right, agent list with status badges,
|
||||
search/filter input, closes via ESC or outside click.
|
||||
============================================================================-->
|
||||
|
||||
<!-- Backdrop overlay -->
|
||||
@if (isOpen()) {
|
||||
<div
|
||||
class="quick-jump-backdrop"
|
||||
(click)="onBackdropClick($event)"
|
||||
[@backdropEnter]
|
||||
></div>
|
||||
}
|
||||
|
||||
<!-- Drawer panel -->
|
||||
<div
|
||||
class="quick-jump-drawer"
|
||||
[class.quick-jump-drawer--open]="isOpen()"
|
||||
(keydown)="onDrawerKeydown($event)"
|
||||
role="dialog"
|
||||
aria-label="Quick jump to agent"
|
||||
[attr.aria-hidden]="!isOpen()"
|
||||
>
|
||||
<!-- Drawer header -->
|
||||
<div class="quick-jump-drawer__header">
|
||||
<h2 class="quick-jump-drawer__title">Jump to Agent</h2>
|
||||
<button
|
||||
class="quick-jump-drawer__close-btn"
|
||||
type="button"
|
||||
aria-label="Close drawer"
|
||||
(click)="close()"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search input -->
|
||||
<div class="quick-jump-drawer__search">
|
||||
<span class="quick-jump-drawer__search-icon">search</span>
|
||||
<input
|
||||
#searchInput
|
||||
type="text"
|
||||
class="quick-jump-drawer__search-input"
|
||||
placeholder="Search agents..."
|
||||
[formControl]="searchControl"
|
||||
autocomplete="off"
|
||||
aria-label="Search agents"
|
||||
/>
|
||||
@if (searchControl.value) {
|
||||
<button
|
||||
class="quick-jump-drawer__search-clear"
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
(click)="searchControl.setValue('')"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Agent list -->
|
||||
<ul class="quick-jump-drawer__agent-list" role="listbox" aria-label="Agent list">
|
||||
@for (agent of filteredAgents(); track agent.id; let i = $index) {
|
||||
<li
|
||||
[id]="'quick-jump-agent-' + i"
|
||||
class="quick-jump-drawer__agent-item"
|
||||
[class.quick-jump-drawer__agent-item--highlighted]="highlightedIndex() === i"
|
||||
role="option"
|
||||
[attr.aria-selected]="highlightedIndex() === i"
|
||||
(click)="selectAgent(agent)"
|
||||
(mouseenter)="highlightedIndex.set(i)"
|
||||
(mouseleave)="highlightedIndex.set(-1)"
|
||||
>
|
||||
<!-- Status badge -->
|
||||
<span
|
||||
class="status-dot {{ getStatusClass(agent.status) }}"
|
||||
[attr.aria-label]="getStatusLabel(agent.status)"
|
||||
></span>
|
||||
|
||||
<!-- Agent info -->
|
||||
<div class="quick-jump-drawer__agent-info">
|
||||
<span class="quick-jump-drawer__agent-name">{{ agent.displayName }}</span>
|
||||
<span class="quick-jump-drawer__agent-role">{{ agent.role }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Status label -->
|
||||
<span class="quick-jump-drawer__agent-status-label" [class]="'status-label--' + agent.status">
|
||||
{{ getStatusLabel(agent.status) }}
|
||||
</span>
|
||||
</li>
|
||||
} @empty {
|
||||
<li class="quick-jump-drawer__empty">
|
||||
@if (searchControl.value) {
|
||||
<span>No agents matching "{{ searchControl.value }}"</span>
|
||||
} @else {
|
||||
<span>No agents online</span>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<!-- Footer hint -->
|
||||
<div class="quick-jump-drawer__footer">
|
||||
<span class="quick-jump-drawer__footer-hint">
|
||||
<kbd>↑↓</kbd> Navigate <kbd>↵</kbd> Select <kbd>Esc</kbd> Close
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,333 @@
|
||||
// ============================================================================
|
||||
// Quick-Jump Drawer — Slide-out panel for fast agent switching
|
||||
// Per CUB-51: slides from right, agent list with status badges,
|
||||
// search/filter input, closes via ESC or outside click.
|
||||
// ============================================================================
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Backdrop
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 998;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-out;
|
||||
|
||||
&.backdrop-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Drawer Panel
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 380px;
|
||||
max-width: 90vw;
|
||||
background-color: var(--cc-surface-container);
|
||||
border-left: 1px solid var(--cc-outline);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(100%);
|
||||
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Header
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px 12px;
|
||||
border-bottom: 1px solid var(--cc-outline);
|
||||
}
|
||||
|
||||
.quick-jump-drawer__title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--cc-on-surface);
|
||||
margin: 0;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--cc-on-surface-variant);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cc-surface-container-high);
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Search
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 16px 24px 8px;
|
||||
border: 1px solid var(--cc-outline);
|
||||
border-radius: 12px;
|
||||
background-color: var(--cc-surface-container-high);
|
||||
transition: border-color 150ms ease;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--status-active);
|
||||
}
|
||||
}
|
||||
|
||||
.quick-jump-drawer__search-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 12px;
|
||||
font-family: 'Material Icons';
|
||||
font-size: 20px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
// Use a simple "search" text since icon font may not be loaded inside
|
||||
// the drawer — rely on Material icon font from the parent app
|
||||
&::before {
|
||||
content: 'search';
|
||||
font-family: 'Material Icons';
|
||||
}
|
||||
}
|
||||
|
||||
.quick-jump-drawer__search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 12px 8px;
|
||||
font-size: 15px;
|
||||
font-family: 'Inter', 'Roboto', sans-serif;
|
||||
color: var(--cc-on-surface);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--cc-on-surface-variant);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-jump-drawer__search-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 4px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--cc-on-surface-variant);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cc-surface-container);
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Agent List
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__agent-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease;
|
||||
|
||||
&:hover,
|
||||
&--highlighted {
|
||||
background-color: var(--cc-surface-container-high);
|
||||
}
|
||||
|
||||
&--highlighted {
|
||||
outline: 2px solid var(--status-active);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0; // Allow text truncation
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--cc-on-surface);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-role {
|
||||
font-size: 12px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-status-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
|
||||
&.status-label--active {
|
||||
color: var(--status-active);
|
||||
background-color: var(--status-active-bg);
|
||||
}
|
||||
|
||||
&.status-label--idle {
|
||||
color: var(--status-idle);
|
||||
background-color: var(--status-idle-bg);
|
||||
}
|
||||
|
||||
&.status-label--thinking {
|
||||
color: var(--status-thinking);
|
||||
background-color: var(--status-thinking-bg);
|
||||
}
|
||||
|
||||
&.status-label--error {
|
||||
color: var(--status-error);
|
||||
background-color: var(--status-error-bg);
|
||||
}
|
||||
|
||||
&.status-label--offline {
|
||||
color: var(--status-offline);
|
||||
background-color: rgba(100, 116, 139, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Empty State
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Footer
|
||||
// ---------------------------------------------------------------------------
|
||||
.quick-jump-drawer__footer {
|
||||
padding: 12px 24px 16px;
|
||||
border-top: 1px solid var(--cc-outline);
|
||||
}
|
||||
|
||||
.quick-jump-drawer__footer-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
opacity: 0.7;
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
font-family: var(--cc-font-mono);
|
||||
background-color: var(--cc-surface-container-high);
|
||||
border: 1px solid var(--cc-outline);
|
||||
border-radius: 4px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mobile Adjustments
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (max-width: 599px) {
|
||||
.quick-jump-drawer {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__header {
|
||||
padding: 16px 16px 10px;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__search {
|
||||
margin: 12px 16px 8px;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__agent-list {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.quick-jump-drawer__footer {
|
||||
padding: 10px 16px 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
HostListener,
|
||||
OnDestroy,
|
||||
Output,
|
||||
signal,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { Subject, takeUntil } from 'rxjs';
|
||||
import { AgentCardData } from '../../models/agent.model';
|
||||
import { AgentStatusService } from '../../services/agent-status.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-quick-jump-drawer',
|
||||
standalone: true,
|
||||
imports: [ReactiveFormsModule],
|
||||
templateUrl: './quick-jump-drawer.component.html',
|
||||
styleUrl: './quick-jump-drawer.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class QuickJumpDrawerComponent implements OnDestroy {
|
||||
/** Emits when the drawer should close (ESC, outside click, or item select). */
|
||||
@Output() readonly drawerClose = new EventEmitter<void>();
|
||||
|
||||
/** Whether the drawer is visible. */
|
||||
readonly isOpen = signal(false);
|
||||
|
||||
/** Search/filter input control. */
|
||||
readonly searchControl = new FormControl('', { nonNullable: true });
|
||||
|
||||
/** Filtered agent list based on search. */
|
||||
readonly filteredAgents = signal<AgentCardData[]>([]);
|
||||
|
||||
/** Track which agent row is highlighted via keyboard navigation. */
|
||||
readonly highlightedIndex = signal(-1);
|
||||
|
||||
@ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
|
||||
@ViewChild('drawerPanel') drawerPanel!: ElementRef<HTMLElement>;
|
||||
|
||||
private readonly destroy$ = new Subject<void>();
|
||||
|
||||
constructor(private readonly agentStatusService: AgentStatusService) {
|
||||
// Reactively filter agents as the search input changes
|
||||
this.searchControl.valueChanges
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe((query) => this.filterAgents(query));
|
||||
|
||||
// Initial load
|
||||
this.filterAgents('');
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Public API
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Open the drawer and focus the search input. */
|
||||
open(): void {
|
||||
this.isOpen.set(true);
|
||||
this.searchControl.setValue('', { emitEvent: false });
|
||||
this.highlightedIndex.set(-1);
|
||||
// Focus search input after animation frame (drawer needs to render first)
|
||||
requestAnimationFrame(() => {
|
||||
this.searchInput?.nativeElement?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
/** Close the drawer. */
|
||||
close(): void {
|
||||
this.isOpen.set(false);
|
||||
this.searchControl.setValue('', { emitEvent: false });
|
||||
this.highlightedIndex.set(-1);
|
||||
this.drawerClose.emit();
|
||||
}
|
||||
|
||||
/** Toggle the drawer open/close. */
|
||||
toggle(): void {
|
||||
if (this.isOpen()) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Keyboard Handling
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@HostListener('document:keydown.escape')
|
||||
onEscapeKey(): void {
|
||||
if (this.isOpen()) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
/** Handle keyboard navigation within the drawer panel. */
|
||||
onDrawerKeydown(event: KeyboardEvent): void {
|
||||
const agents = this.filteredAgents();
|
||||
if (!agents.length) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown': {
|
||||
event.preventDefault();
|
||||
this.highlightedIndex.update((i) =>
|
||||
i < agents.length - 1 ? i + 1 : 0
|
||||
);
|
||||
this.scrollIntoView();
|
||||
break;
|
||||
}
|
||||
case 'ArrowUp': {
|
||||
event.preventDefault();
|
||||
this.highlightedIndex.update((i) =>
|
||||
i > 0 ? i - 1 : agents.length - 1
|
||||
);
|
||||
this.scrollIntoView();
|
||||
break;
|
||||
}
|
||||
case 'Enter': {
|
||||
const idx = this.highlightedIndex();
|
||||
if (idx >= 0 && idx < agents.length) {
|
||||
this.selectAgent(agents[idx]);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Outside Click
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Close when clicking on the backdrop (outside the panel). */
|
||||
onBackdropClick(event: MouseEvent): void {
|
||||
if (
|
||||
this.drawerPanel?.nativeElement &&
|
||||
!this.drawerPanel.nativeElement.contains(event.target as Node)
|
||||
) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Agent Selection
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Select an agent — navigates or focuses the agent card. */
|
||||
selectAgent(agent: AgentCardData): void {
|
||||
// TODO: Wire up navigation to the selected agent's detail view
|
||||
// For now, emit close after selection
|
||||
console.log('[QuickJump] Selected agent:', agent.id);
|
||||
this.close();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Status Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Get the CSS class for a given agent status. */
|
||||
getStatusClass(status: string): string {
|
||||
return `status-dot--${status}`;
|
||||
}
|
||||
|
||||
/** Get a human-readable label for an agent status. */
|
||||
getStatusLabel(status: string): string {
|
||||
const labels: Record<string, string> = {
|
||||
active: 'Active',
|
||||
idle: 'Idle',
|
||||
thinking: 'Thinking',
|
||||
error: 'Error',
|
||||
offline: 'Offline',
|
||||
};
|
||||
return labels[status] ?? status;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Lifecycle
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Private
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
private filterAgents(query: string): void {
|
||||
const allAgents = this.agentStatusService.agents();
|
||||
const lowerQuery = query.toLowerCase().trim();
|
||||
|
||||
if (!lowerQuery) {
|
||||
this.filteredAgents.set(allAgents);
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = allAgents.filter(
|
||||
(agent) =>
|
||||
agent.displayName.toLowerCase().includes(lowerQuery) ||
|
||||
agent.id.toLowerCase().includes(lowerQuery) ||
|
||||
agent.role.toLowerCase().includes(lowerQuery)
|
||||
);
|
||||
this.filteredAgents.set(filtered);
|
||||
this.highlightedIndex.set(-1);
|
||||
}
|
||||
|
||||
private scrollIntoView(): void {
|
||||
const idx = this.highlightedIndex();
|
||||
const el = document.getElementById(`quick-jump-agent-${idx}`);
|
||||
el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// ============================================================================
|
||||
// Task Progress Bar — Barrel Export
|
||||
// CUB-44
|
||||
// ============================================================================
|
||||
|
||||
export { TaskProgressBarComponent } from './task-progress-bar.component';
|
||||
@@ -0,0 +1,18 @@
|
||||
<!-- Task Progress Bar: determinate progress with optional elapsed time -->
|
||||
<div class="task-progress-bar">
|
||||
<!-- Info row: percentage + optional elapsed -->
|
||||
<div class="task-progress-bar__info">
|
||||
<span class="task-progress-bar__percent">{{ clampedProgress }}%</span>
|
||||
<span *ngIf="showElapsed" class="task-progress-bar__elapsed">
|
||||
{{ elapsedText }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Angular Material determinate progress bar -->
|
||||
<mat-progress-bar
|
||||
class="task-progress-bar__bar"
|
||||
mode="determinate"
|
||||
[value]="clampedProgress"
|
||||
aria-label="Task progress"
|
||||
></mat-progress-bar>
|
||||
</div>
|
||||
@@ -0,0 +1,77 @@
|
||||
// ============================================================================
|
||||
// Task Progress Bar — Tactical Dark Theme Styling
|
||||
// Per CUB-44: Uses --color-primary for bar fill and --color-surface-light
|
||||
// for track background, mapped to the Control Center's M3 dark tokens.
|
||||
// ============================================================================
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Container
|
||||
// ---------------------------------------------------------------------------
|
||||
.task-progress-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Info row: percentage label + elapsed time
|
||||
// ---------------------------------------------------------------------------
|
||||
.task-progress-bar__info {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-progress-bar__percent {
|
||||
font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--cc-on-surface, #E2E8F0);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.task-progress-bar__elapsed {
|
||||
font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--cc-on-surface-variant, #8A9BB0);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Material Progress Bar Overrides
|
||||
// ---------------------------------------------------------------------------
|
||||
// Map the spec's --color-primary and --color-surface-light to the Control
|
||||
// Center's actual theme tokens. This ensures the bar uses the tactical dark
|
||||
// palette while respecting the spec's variable naming.
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
.task-progress-bar__bar {
|
||||
// Override the track (background) to use the surface container
|
||||
--mat-progress-bar-track-height: 6px;
|
||||
--mat-progress-bar-active-indicator-height: 6px;
|
||||
|
||||
// Bar fill color: primary (cyan/sky blue per tactical dark theme)
|
||||
--mat-progress-bar-active-indicator-color: var(--color-primary, var(--mat-sys-primary, #38BDF8));
|
||||
|
||||
// Track background: surface container (dark slate)
|
||||
--mat-progress-bar-track-color: var(--color-surface-light, var(--cc-surface-container, #1C2027));
|
||||
|
||||
// Border radius for a softer bar
|
||||
border-radius: 3px;
|
||||
|
||||
// Smooth transition on value changes
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// Rounded ends on the progress bar fill
|
||||
:host ::ng-deep .mdc-linear-progress__bar-inner {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
// Rounded track background
|
||||
:host ::ng-deep .mdc-linear-progress__track {
|
||||
border-radius: 3px;
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
// ============================================================================
|
||||
// Task Progress Bar Component
|
||||
// Per CUB-44: Determinate progress bar with optional elapsed time display.
|
||||
// Uses Angular Material mat-progress-bar in determinate mode with tactical
|
||||
// dark theme styling via CSS custom properties.
|
||||
// ============================================================================
|
||||
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
|
||||
/**
|
||||
* Displays a determinate progress bar with an optional elapsed time indicator.
|
||||
*
|
||||
* Usage:
|
||||
* ```html
|
||||
* <app-task-progress-bar [progress]="65" />
|
||||
* <app-task-progress-bar [progress]="42" [showElapsed]="true" />
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-task-progress-bar',
|
||||
standalone: true,
|
||||
imports: [CommonModule, MatProgressBarModule],
|
||||
templateUrl: './task-progress-bar.component.html',
|
||||
styleUrl: './task-progress-bar.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class TaskProgressBarComponent implements OnInit, OnDestroy {
|
||||
// ---------------------------------------------------------------------------
|
||||
// Inputs
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Current progress percentage (0–100). Required. */
|
||||
@Input({ required: true })
|
||||
progress!: number;
|
||||
|
||||
/** Whether to show elapsed time next to the percentage. Defaults to false. */
|
||||
@Input()
|
||||
showElapsed = false;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Internal state
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Timestamp when the component initialized — used for elapsed calculation. */
|
||||
startTime = Date.now();
|
||||
|
||||
/** Formatted elapsed time string, e.g. "2m 15s ago". */
|
||||
elapsedText = '';
|
||||
|
||||
/** Interval timer for updating the elapsed display. */
|
||||
private timer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef) {}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Lifecycle
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
ngOnInit(): void {
|
||||
this.updateElapsed();
|
||||
|
||||
if (this.showElapsed) {
|
||||
// Update elapsed time every second
|
||||
this.timer = setInterval(() => {
|
||||
this.updateElapsed();
|
||||
this.cdr.markForCheck();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Clamp progress to 0–100 for safety. */
|
||||
get clampedProgress(): number {
|
||||
return Math.max(0, Math.min(100, this.progress ?? 0));
|
||||
}
|
||||
|
||||
/** Recalculate the elapsed time string. */
|
||||
private updateElapsed(): void {
|
||||
const elapsedMs = Date.now() - this.startTime;
|
||||
const totalSeconds = Math.floor(elapsedMs / 1000);
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
|
||||
if (minutes > 0) {
|
||||
this.elapsedText = `${minutes}m ${seconds}s ago`;
|
||||
} else {
|
||||
this.elapsedText = `${seconds}s ago`;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user