From a946670157a7720b0b00baecda578be0926c0d01 Mon Sep 17 00:00:00 2001 From: rex-bot Date: Tue, 28 Apr 2026 08:18:27 -0400 Subject: [PATCH] CUB-20: Develop agent card component with dynamic status/progress --- frontend/angular.json | 8 +- .../agent-card/agent-card.component.html | 23 ++- .../agent-card/agent-card.component.scss | 59 +++++-- .../agent-card/agent-card.component.ts | 106 +++++++++---- frontend/src/app/design/tokens.ts | 89 +++++++++++ .../src/app/pages/hub/hub-page.component.scss | 113 ++++++++++++-- .../src/app/pages/hub/hub-page.component.ts | 147 +++++++++++++++++- frontend/src/styles/_tokens.scss | 61 ++++++++ 8 files changed, 538 insertions(+), 68 deletions(-) create mode 100644 frontend/src/app/design/tokens.ts create mode 100644 frontend/src/styles/_tokens.scss diff --git a/frontend/angular.json b/frontend/angular.json index 6d8bb04..381e7be 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -53,7 +53,13 @@ ], "styles": [ "src/styles.scss" - ] + ], + "stylePreprocessorOptions": { + "includePaths": [ + "src", + "src/styles" + ] + } }, "configurations": { "production": { diff --git a/frontend/src/app/command-hub/components/agent-card/agent-card.component.html b/frontend/src/app/command-hub/components/agent-card/agent-card.component.html index 8140132..e12a232 100644 --- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.html +++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.html @@ -2,11 +2,13 @@ +
@@ -27,19 +29,20 @@ -
+

- {{ status === 'error' ? errorMessage || task : task }} + {{ isError() ? errorMessage || task : task }}

{{ progress }}%
+ +
+ + {{ taskElapsed }} +
+
diff --git a/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss b/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss index 2846e74..a6792d2 100644 --- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss +++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss @@ -2,15 +2,18 @@ // AgentCard — M3 tactical dark styling // Per spec Section 7.3: left‑border accent, status‑aware coloring, // responsive card layout with 320px min‑width. +// Enhanced: data-status selectors, elapsed time, design token imports. // ============================================================================ +@use 'tokens' as tokens; + .agent-card { display: flex; flex-direction: column; - min-width: var(--cc-card-min-width); - padding: var(--cc-card-padding); + min-width: tokens.$cc-card-min-width; + padding: tokens.$cc-card-padding; background-color: var(--cc-surface-container); - border-radius: var(--cc-card-border-radius); + border-radius: tokens.$cc-card-border-radius; border-left: 4px solid var(--status-offline); // default; overridden by [style] border-top: 1px solid var(--cc-outline); border-right: 1px solid var(--cc-outline); @@ -48,11 +51,6 @@ letter-spacing: 0.02em; text-transform: uppercase; color: var(--cc-on-surface); - - // Per‑status background tints - .status-dot--active + & { - background-color: var(--status-active-bg); - } } .agent-card__status-label { @@ -94,8 +92,7 @@ color: var(--cc-on-surface); line-height: 1.4; - // Error messages get distinct styling - .agent-card--error & { + &--error { color: var(--status-error); } } @@ -109,6 +106,7 @@ } .agent-card__progress-label { + font-family: var(--cc-font-mono); font-size: 12px; font-weight: 500; color: var(--cc-on-surface-variant); @@ -130,6 +128,23 @@ } } +// ── Elapsed Time ── +.agent-card__elapsed { + display: flex; + align-items: center; + gap: 4px; + font-size: 12px; + color: var(--cc-on-surface-variant); + padding: 2px 0; +} + +.agent-card__elapsed-icon { + font-size: 14px; + width: 14px; + height: 14px; + color: var(--status-thinking); +} + // ── Footer ── .agent-card__footer { display: flex; @@ -153,7 +168,6 @@ color: var(--cc-on-surface-variant); } -.agent-card__channel-icon, .agent-card__channel .mat-icon { font-size: 14px; width: 14px; @@ -169,7 +183,6 @@ .agent-card__jump { flex-shrink: 0; - // Match M3 text button sizing .mat-mdc-button { min-width: 36px; padding: 0 8px; @@ -184,11 +197,9 @@ } // ── Status‑specific background tints for badge ── -// We use the global status-dot classes from styles.scss and pair them -// with contextual background-color overrides here. +// Using data-status attribute selectors for clean styling. -.agent-card[data-status="active"] .agent-card__badge, -.agent-card .status-dot--active ~ .agent-card__badge { +.agent-card[data-status="active"] .agent-card__badge { background-color: var(--status-active-bg); } @@ -204,8 +215,22 @@ background-color: var(--status-error-bg); } +.agent-card[data-status="offline"] .agent-card__badge { + background-color: var(--cc-surface-container-high); +} + +// ── Active‑like pulse on card border ── +.agent-card[data-status="active"], +.agent-card[data-status="thinking"] { + border-left-width: 4px; +} + +.agent-card[data-status="error"] { + border-left-color: var(--status-error); +} + // ── Responsive ── -@media (max-width: 599px) { +@media (max-width: tokens.$cc-breakpoint-mobile) { .agent-card { min-width: unset; padding: 16px; diff --git a/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts b/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts index a378e62..6467759 100644 --- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts +++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.ts @@ -2,7 +2,12 @@ import { ChangeDetectionStrategy, Component, Input, + OnDestroy, + Signal, computed, + effect, + inject, + signal, } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; @@ -11,11 +16,17 @@ import { MatButtonModule } from '@angular/material/button'; import { MatProgressBarModule } from '@angular/material/progress-bar'; import { MatTooltipModule } from '@angular/material/tooltip'; import { AgentStatus } from '../../../models/agent.model'; +import { + STATUS_COLORS, + STATUS_LABELS, + CHANNEL_ICONS, +} from '../../../design/tokens'; // ============================================================================ // AgentCard Component // Per spec Section 7.3: Composes Agent Status Badge, Task Progress Bar, // and Quick‑Jump Button into a card with left‑border status accent. +// Enhanced with data-status attribute, elapsed time, and design tokens. // ============================================================================ @Component({ @@ -33,7 +44,7 @@ import { AgentStatus } from '../../../models/agent.model'; styleUrl: './agent-card.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AgentCardComponent { +export class AgentCardComponent implements OnDestroy { // --- Six required inputs per spec --- /** Agent status — drives badge color and left‑border accent */ @@ -68,7 +79,18 @@ export class AgentCardComponent { /** Error message (shown only when status is 'error') */ @Input() errorMessage = ''; - // --- Computed values --- + /** Elapsed time string, e.g. "04m 12s" */ + @Input() taskElapsed = ''; + + // --- Internal state --- + + /** Timer for refreshing relative-time label */ + private _timer: ReturnType | null = null; + + /** Internal signal to trigger relative-time recomputation */ + private readonly _tick = signal(0); + + // --- Computed values using design tokens --- /** Map status → CSS custom property for the left‑border accent */ readonly statusBorderColor = computed(() => { @@ -82,46 +104,68 @@ export class AgentCardComponent { return map[this.status] ?? 'var(--status-offline)'; }); - /** Human‑readable status label */ - readonly statusLabel = computed(() => { - const labels: Record = { - active: 'Active', - idle: 'Idle', - thinking: 'Thinking…', - error: 'Error', - offline: 'Offline', - }; - return labels[this.status] ?? this.status; - }); + /** Human‑readable status label (from design tokens) */ + readonly statusLabel = computed(() => STATUS_LABELS[this.status] ?? this.status); /** CSS class suffix for the status badge dot */ readonly statusDotClass = computed(() => `status-dot--${this.status}`); - /** Material icon name for the channel */ - readonly channelIcon = computed(() => { - const icons: Record = { - telegram: 'telegram', // falls back to font icon if no SVG registered - slack: 'chat', - discord: 'forum', - whatsapp: 'chat', - webchat: 'language', - email: 'email', - }; - return icons[this.channel] ?? 'chat'; + /** Material icon name for the channel (from design tokens) */ + readonly channelIcon = computed(() => CHANNEL_ICONS[this.channel] ?? 'chat'); + + /** Relative time string for lastActivity, refreshed every 30s */ + readonly lastActivityLabel = computed(() => { + // Read tick to create dependency that forces recomputation + this._tick(); + return this._relativeTime(this.lastActivity); }); - /** Relative time string for lastActivity */ - readonly lastActivityLabel = computed(() => { - if (!this.lastActivity) return ''; + /** Quick‑jump route derived from sessionKey */ + readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`); + + /** Whether progress bar should show */ + readonly showProgress = computed(() => this.progress > 0 && this.status !== 'error'); + + /** Whether error state is active */ + readonly isError = computed(() => this.status === 'error'); + + /** Whether card is in an active-like state (active or thinking) */ + readonly isActiveLike = computed(() => this.status === 'active' || this.status === 'thinking'); + + constructor() { + // Start the relative-time refresh timer + this._startTimer(); + } + + ngOnDestroy(): void { + this._stopTimer(); + } + + // --- Private helpers --- + + private _relativeTime(date: Date | null | undefined): string { + if (!date) return ''; const now = Date.now(); - const then = this.lastActivity.getTime(); + 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`; - }); + } - /** Quick‑jump route derived from sessionKey */ - readonly jumpRoute = computed(() => `/sessions/${this.sessionKey}`); + private _startTimer(): void { + this._stopTimer(); + this._timer = setInterval(() => { + // Increment tick to force lastActivityLabel recomputation + this._tick.update(v => v + 1); + }, 30_000); + } + + private _stopTimer(): void { + if (this._timer) { + clearInterval(this._timer); + this._timer = null; + } + } } \ No newline at end of file diff --git a/frontend/src/app/design/tokens.ts b/frontend/src/app/design/tokens.ts new file mode 100644 index 0000000..5560ae4 --- /dev/null +++ b/frontend/src/app/design/tokens.ts @@ -0,0 +1,89 @@ +// ============================================================================ +// OpenClaw Control Center — Design System Tokens (TypeScript) +// ============================================================================ +// Per CUB-21: Programmatic access to design tokens for Angular components. +// Use in computed styles, dynamic class maps, or any TS logic that needs +// token values. CSS custom properties remain the primary styling mechanism. +// ============================================================================ + +/** Tactical Dark Mode color palette */ +export const COLORS = { + surface: '#0F172A', + surfaceLight: '#1E293B', + primary: '#38BDF8', + secondary: '#2DD4BF', + accent: '#A78BFA', + danger: '#F87171', + textPrimary: '#FFFFFF', + textSecondary: '#94A3B8', + border: '#334155', +} as const; + +/** Status colors — maps AgentStatus to hex values */ +export const STATUS_COLORS: Record = { + active: '#38BDF8', + idle: '#2DD4BF', + thinking: '#A78BFA', + error: '#F87171', + offline: '#64748B', +}; + +/** Status background tints (12% opacity) */ +export const STATUS_BG_COLORS: Record = { + active: 'rgba(56, 189, 248, 0.12)', + idle: 'rgba(45, 212, 191, 0.12)', + thinking: 'rgba(167, 139, 250, 0.12)', + error: 'rgba(248, 113, 113, 0.12)', + offline: 'rgba(100, 116, 139, 0.12)', +}; + +/** Surface overrides */ +export const SURFACE = { + background: '#0D0F12', + surface: '#13161A', + container: '#1C2027', + containerHigh: '#252B33', + onSurface: '#E2E8F0', + onSurfaceVariant: '#8A9BB0', + outline: '#2D3748', +} as const; + +/** Layout constants */ +export const LAYOUT = { + navRailCollapsedWidth: 72, + navRailExpandedWidth: 256, + headerHeight: 64, + bottomNavHeight: 80, + cardBorderRadius: 16, + cardMinWidth: 320, + cardGap: 16, + cardPadding: 20, + sectionPadding: 24, + spacingUnit: 8, +} as const; + +/** Breakpoints (px) */ +export const BREAKPOINTS = { + mobile: 599, + tablet: 1023, + desktop: 1024, +} as const; + +/** Channel icon mapping */ +export const CHANNEL_ICONS: Record = { + telegram: 'telegram', + slack: 'chat', + discord: 'forum', + whatsapp: 'chat', + webchat: 'language', + email: 'email', +}; + +/** Human-readable status labels */ +export const STATUS_LABELS: Record = { + active: 'Active', + idle: 'Idle', + thinking: 'Thinking…', + error: 'Error', + offline: 'Offline', +}; \ No newline at end of file diff --git a/frontend/src/app/pages/hub/hub-page.component.scss b/frontend/src/app/pages/hub/hub-page.component.scss index 1b2c65f..c77dcd7 100644 --- a/frontend/src/app/pages/hub/hub-page.component.scss +++ b/frontend/src/app/pages/hub/hub-page.component.scss @@ -4,25 +4,118 @@ // Mobile (<1024px): single-column stack // ============================================================================ +@use 'tokens' as tokens; + .hub-page { display: grid; grid-template-columns: 1fr; - gap: 16px; - padding: var(--cc-section-padding, 16px); + gap: tokens.$cc-card-gap; + padding: tokens.$cc-section-padding; min-height: 400px; overflow-x: hidden; } -.hub-page__placeholder { - color: var(--cc-on-surface-variant); - font-size: 16px; - text-align: center; - padding: 24px 0; -} - // Desktop / kiosk breakpoint — 2-column grid -@media (min-width: 1024px) { +@media (min-width: tokens.$cc-breakpoint-desktop) { .hub-page { grid-template-columns: repeat(2, 1fr); } +} + +// ── Loading state ── +.hub-page__loading { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + padding: 48px 24px; + color: var(--cc-on-surface-variant); +} + +.hub-page__loading-icon { + font-size: 40px; + width: 40px; + height: 40px; + color: var(--status-active); + animation: spin 1.5s linear infinite; +} + +.hub-page__loading-text { + font-size: 16px; + color: var(--cc-on-surface-variant); + margin: 0; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +// ── Empty state ── +.hub-page__empty { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + padding: 48px 24px; + text-align: center; +} + +.hub-page__empty-icon { + font-size: 48px; + width: 48px; + height: 48px; + color: var(--status-offline); +} + +.hub-page__empty-text { + font-size: 18px; + font-weight: 500; + color: var(--cc-on-surface); + margin: 0; +} + +.hub-page__empty-hint { + font-size: 14px; + color: var(--cc-on-surface-variant); + margin: 0; +} + +// ── Error state ── +.hub-page__error { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + padding: 24px; + border: 1px solid var(--status-error); + border-radius: tokens.$cc-card-border-radius; + background-color: var(--status-error-bg); +} + +.hub-page__error-icon { + font-size: 32px; + width: 32px; + height: 32px; + color: var(--status-error); +} + +.hub-page__error-text { + font-size: 14px; + color: var(--status-error); + margin: 0; + text-align: center; +} + +// ── Accessibility: reduced motion ── +@media (prefers-reduced-motion: reduce) { + .hub-page__loading-icon { + animation: none; + } } \ No newline at end of file diff --git a/frontend/src/app/pages/hub/hub-page.component.ts b/frontend/src/app/pages/hub/hub-page.component.ts index 1749b94..aefa94a 100644 --- a/frontend/src/app/pages/hub/hub-page.component.ts +++ b/frontend/src/app/pages/hub/hub-page.component.ts @@ -1,15 +1,154 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + OnDestroy, + OnInit, + Signal, + computed, + inject, +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatIconModule } from '@angular/material/icon'; +import { AgentCardComponent } from '../../command-hub/components/agent-card/agent-card.component'; +import { AgentCardData } from '../../models/agent.model'; +import { AgentStatusService } from '../../services/agent-status.service'; + +// ============================================================================ +// Hub Page — Fleet Status Grid +// Per spec Section 7.3: Renders AgentCard components in a responsive grid. +// Handles loading, empty, error, and success states. +// Uses Angular signals from AgentStatusService for reactive updates. +// ============================================================================ @Component({ selector: 'app-hub-page', standalone: true, - imports: [], + imports: [CommonModule, MatIconModule, AgentCardComponent], template: `
-

Command Hub — Fleet status grid will render here

+ + +
+ +

Loading agents…

+
+ + +
+ +

No agents connected yet.

+

Agents will appear here once they come online.

+
+ + + + + +
+ +

{{ error() }}

+
+
`, styleUrl: './hub-page.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class HubPageComponent {} \ No newline at end of file +export class HubPageComponent implements OnInit { + /** Agent list signal from the status service */ + readonly agents: Signal; + + /** Whether the initial load is in progress */ + readonly loading = computed(() => this._initialLoad); + + /** Error message signal */ + readonly error = computed(() => this._errorMsg); + + private _initialLoad = true; + private _errorMsg: string | null = null; + + private readonly _agentService = inject(AgentStatusService); + + constructor() { + this.agents = this._agentService.agents; + } + + ngOnInit(): void { + // Seed mock data for development until SignalR is wired up + this._seedMockData(); + } + + /** TrackBy function for *ngFor performance */ + trackByAgentId(index: number, agent: AgentCardData): string { + return agent.id; + } + + // --- Mock data seeding (remove when SignalR is integrated) --- + private _seedMockData(): void { + const now = new Date(); + const mockAgents: AgentCardData[] = [ + { + id: 'otto', + displayName: 'Otto', + role: 'Orchestrator Agent', + status: 'active', + currentTask: 'Reviewing PR #42', + taskProgress: 72, + taskElapsed: '04m 12s', + sessionKey: 'agent:otto:slack:control-center:8787a', + channel: 'slack', + lastActivity: new Date(now.getTime() - 30_000), + }, + { + id: 'rex', + displayName: 'Rex', + role: 'Frontend Agent', + status: 'thinking', + currentTask: 'Building agent card component', + taskProgress: 45, + taskElapsed: '02m 38s', + sessionKey: 'agent:rex:telegram:direct:b3c91', + channel: 'telegram', + lastActivity: new Date(now.getTime() - 5_000), + }, + { + id: 'dex', + displayName: 'Dex', + role: 'Backend Agent', + status: 'idle', + currentTask: '', + taskProgress: 0, + sessionKey: 'agent:dex:slack:control-center:4f2a0', + channel: 'slack', + lastActivity: new Date(now.getTime() - 300_000), + }, + { + id: 'hex', + displayName: 'Hex', + role: 'Database Agent', + status: 'error', + currentTask: 'Migration failed', + taskProgress: 0, + errorMessage: 'Connection timeout to PostgreSQL', + sessionKey: 'agent:hex:telegram:direct:9d1e7', + channel: 'telegram', + lastActivity: new Date(now.getTime() - 1_200_000), + }, + ]; + this._agentService['_agents'].set(mockAgents); + this._initialLoad = false; + } +} \ No newline at end of file diff --git a/frontend/src/styles/_tokens.scss b/frontend/src/styles/_tokens.scss new file mode 100644 index 0000000..af168b9 --- /dev/null +++ b/frontend/src/styles/_tokens.scss @@ -0,0 +1,61 @@ +// ============================================================================ +// OpenClaw Control Center — Design System Tokens (SCSS) +// ============================================================================ +// Per CUB-21: Centralized design tokens as SCSS variables. +// Import in any component SCSS with: @use '../../styles/tokens' as tokens; +// These mirror the CSS custom properties in styles.scss for programmatic use. +// ============================================================================ + +// --- Color Palette (Tactical Dark) --- +$color-surface: #0F172A; +$color-surface-light: #1E293B; +$color-primary: #38BDF8; +$color-secondary: #2DD4BF; +$color-accent: #A78BFA; +$color-danger: #F87171; +$color-text-primary: #FFFFFF; +$color-text-secondary: #94A3B8; +$color-border: #334155; + +// --- Status Colors --- +$status-active: #38BDF8; +$status-idle: #2DD4BF; +$status-thinking: #A78BFA; +$status-error: #F87171; +$status-offline: #64748B; + +// --- Status Background Tints (12% opacity) --- +$status-active-bg: rgba(56, 189, 248, 0.12); +$status-idle-bg: rgba(45, 212, 191, 0.12); +$status-thinking-bg: rgba(167, 139, 250, 0.12); +$status-error-bg: rgba(248, 113, 113, 0.12); + +// --- Surface Overrides --- +$cc-background: #0D0F12; +$cc-surface: #13161A; +$cc-surface-container: #1C2027; +$cc-surface-container-high: #252B33; +$cc-on-surface: #E2E8F0; +$cc-on-surface-variant: #8A9BB0; +$cc-outline: #2D3748; + +// --- Typography --- +$cc-font-mono: 'Roboto Mono', 'Cascadia Code', 'Fira Code', monospace; +$cc-font-family: 'Inter', 'Roboto', sans-serif; + +// --- Layout --- +$cc-nav-rail-collapsed-width: 72px; +$cc-nav-rail-expanded-width: 256px; +$cc-header-height: 64px; +$cc-bottom-nav-height: 80px; +$cc-card-border-radius: 16px; +$cc-card-min-width: 320px; +$cc-card-gap: 16px; +$cc-card-padding: 20px; +$cc-section-padding: 24px; +$cc-spacing-unit: 8px; + +// --- Breakpoints --- +$cc-breakpoint-mobile: 599px; +$cc-breakpoint-tablet: 1023px; +$cc-breakpoint-desktop: 1024px; \ No newline at end of file