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,100 @@
|
||||
<!-- ========================================================================== -->
|
||||
<!-- AgentCard — per spec Section 7.3 -->
|
||||
<!-- Integrates: Status Badge · Task Progress Bar · Quick‑Jump Button -->
|
||||
<!-- Left‑border accent matches status color. role="article" + aria‑labels. -->
|
||||
<!-- Enhanced: data-status attribute, elapsed time, design tokens. -->
|
||||
<!-- ========================================================================== -->
|
||||
<article
|
||||
class="agent-card"
|
||||
role="article"
|
||||
[attr.data-status]="status"
|
||||
[attr.aria-label]="(displayName || agentId) + ' — ' + statusLabel()"
|
||||
[style.border-left-color]="statusBorderColor()"
|
||||
(click)="cardClick.emit(sessionKey)"
|
||||
appLongPress
|
||||
[appLongPressDuration]="500"
|
||||
(appLongPress)="cardLongPress.emit(sessionKey)"
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
<!-- ── Header: status badge + agent info ── -->
|
||||
<div class="agent-card__header">
|
||||
<div class="agent-card__badge" [attr.aria-label]="'Status: ' + statusLabel()">
|
||||
<span
|
||||
class="status-dot"
|
||||
[ngClass]="[statusDotClass()]"
|
||||
></span>
|
||||
<span class="agent-card__status-label">{{ statusLabel() }}</span>
|
||||
</div>
|
||||
|
||||
<div class="agent-card__identity">
|
||||
<span class="agent-card__name">{{ displayName || agentId }}</span>
|
||||
<span class="agent-card__role">{{ role }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Body: current task ── -->
|
||||
<div class="agent-card__body" *ngIf="task || isError()">
|
||||
<p
|
||||
class="agent-card__task"
|
||||
[class.agent-card__task--error]="isError()"
|
||||
[attr.aria-label]="'Current task: ' + (isError() ? errorMessage || task : task)"
|
||||
>
|
||||
{{ isError() ? errorMessage || task : task }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- ── Task Progress Bar ── -->
|
||||
<div
|
||||
class="agent-card__progress"
|
||||
*ngIf="showProgress()"
|
||||
[attr.aria-label]="'Task progress: ' + progress + '%'"
|
||||
>
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
[value]="progress"
|
||||
[aria-label]="'Progress ' + progress + '% complete'"
|
||||
></mat-progress-bar>
|
||||
<span class="agent-card__progress-label text-mono">{{ progress }}%</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Elapsed Time ── -->
|
||||
<div
|
||||
class="agent-card__elapsed"
|
||||
*ngIf="taskElapsed && isActiveLike()"
|
||||
[attr.aria-label]="'Elapsed: ' + taskElapsed"
|
||||
>
|
||||
<mat-icon aria-hidden="true" class="agent-card__elapsed-icon">schedule</mat-icon>
|
||||
<span class="text-mono">{{ taskElapsed }}</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Footer: channel + last activity + quick‑jump ── -->
|
||||
<div class="agent-card__footer">
|
||||
<div class="agent-card__meta">
|
||||
<span
|
||||
class="agent-card__channel text-mono"
|
||||
[attr.aria-label]="'Channel: ' + channel"
|
||||
>
|
||||
<mat-icon aria-hidden="true">{{ channelIcon() }}</mat-icon>
|
||||
{{ channel }}
|
||||
</span>
|
||||
<span
|
||||
class="agent-card__last-activity text-mono"
|
||||
[attr.aria-label]="'Last activity: ' + lastActivityLabel()"
|
||||
>
|
||||
{{ lastActivityLabel() }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Quick‑Jump Button -->
|
||||
<a
|
||||
class="agent-card__jump"
|
||||
mat-button
|
||||
[routerLink]="jumpRoute()"
|
||||
[attr.aria-label]="'Jump to session for ' + (displayName || agentId)"
|
||||
matTooltip="Jump to session"
|
||||
>
|
||||
<mat-icon aria-hidden="true">arrow_forward</mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
@@ -0,0 +1,267 @@
|
||||
// ============================================================================
|
||||
// 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: tokens.$cc-card-min-width;
|
||||
padding: tokens.$cc-card-padding;
|
||||
background-color: var(--cc-surface-container);
|
||||
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);
|
||||
border-bottom: 1px solid var(--cc-outline);
|
||||
gap: 16px;
|
||||
transition: border-left-color 0.3s ease, box-shadow 0.2s ease;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
// CUB-26: Card is now clickable for session drawer
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
outline: 2px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Header ──
|
||||
.agent-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.agent-card__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
background-color: var(--status-active-bg); // overridden per status below
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
.agent-card__status-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--cc-on-surface-variant);
|
||||
}
|
||||
|
||||
.agent-card__identity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.agent-card__name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--cc-on-surface);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.agent-card__role {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--cc-on-surface-variant);
|
||||
}
|
||||
|
||||
// ── Body ──
|
||||
.agent-card__body {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.agent-card__task {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--cc-on-surface);
|
||||
line-height: 1.4;
|
||||
|
||||
&--error {
|
||||
color: var(--status-error);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Progress Bar ──
|
||||
.agent-card__progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.agent-card__progress-label {
|
||||
font-family: var(--cc-font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--cc-on-surface-variant);
|
||||
white-space: nowrap;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
// Override mat-progress-bar to match tactical dark theme
|
||||
.agent-card__progress ::ng-deep .mat-mdc-progress-bar {
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
|
||||
.mdc-linear-progress__bar-inner {
|
||||
background-color: var(--status-active);
|
||||
}
|
||||
|
||||
.mdc-linear-progress__track {
|
||||
background-color: var(--cc-outline);
|
||||
}
|
||||
}
|
||||
|
||||
// ── 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;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: auto; // push footer to bottom
|
||||
}
|
||||
|
||||
.agent-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.agent-card__channel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
}
|
||||
|
||||
.agent-card__channel .mat-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.agent-card__last-activity {
|
||||
font-size: 12px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
}
|
||||
|
||||
// ── Quick‑Jump Button ──
|
||||
.agent-card__jump {
|
||||
flex-shrink: 0;
|
||||
|
||||
.mat-mdc-button {
|
||||
min-width: 36px;
|
||||
padding: 0 8px;
|
||||
color: var(--status-active);
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Status‑specific background tints for badge ──
|
||||
// Using data-status attribute selectors for clean styling.
|
||||
|
||||
.agent-card[data-status="active"] .agent-card__badge {
|
||||
background-color: var(--status-active-bg);
|
||||
}
|
||||
|
||||
.agent-card[data-status="idle"] .agent-card__badge {
|
||||
background-color: var(--status-idle-bg);
|
||||
}
|
||||
|
||||
.agent-card[data-status="thinking"] .agent-card__badge {
|
||||
background-color: var(--status-thinking-bg);
|
||||
}
|
||||
|
||||
.agent-card[data-status="error"] .agent-card__badge {
|
||||
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: tokens.$cc-breakpoint-mobile) {
|
||||
.agent-card {
|
||||
min-width: unset;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.agent-card__header {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agent-card__footer {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agent-card__meta {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Accessibility: reduced motion ──
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-card {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnDestroy,
|
||||
Output,
|
||||
computed,
|
||||
effect,
|
||||
inject,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
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 { LongPressDirective } from '../../../directives/long-press.directive';
|
||||
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.
|
||||
// CUB-26: Emits cardClick and cardLongPress for drawer/modal integration.
|
||||
// Enhanced with data-status attribute, elapsed time, and design tokens.
|
||||
// ============================================================================
|
||||
|
||||
@Component({
|
||||
selector: 'app-agent-card',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
MatIconModule,
|
||||
MatButtonModule,
|
||||
MatProgressBarModule,
|
||||
MatTooltipModule,
|
||||
LongPressDirective,
|
||||
],
|
||||
templateUrl: './agent-card.component.html',
|
||||
styleUrl: './agent-card.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AgentCardComponent implements OnDestroy {
|
||||
// --- Six required inputs per spec ---
|
||||
|
||||
/** Agent status — drives badge color and left‑border accent */
|
||||
@Input({ required: true }) status!: AgentStatus;
|
||||
|
||||
/** Current task description, e.g. "Reviewing PR #42" */
|
||||
@Input() task = '';
|
||||
|
||||
/** Task progress percentage 0–100 */
|
||||
@Input() progress = 0;
|
||||
|
||||
/** Full session key for quick‑jump navigation */
|
||||
@Input({ required: true }) sessionKey = '';
|
||||
|
||||
/** Communication channel, e.g. "telegram" */
|
||||
@Input({ required: true }) channel = '';
|
||||
|
||||
/** Timestamp of last agent activity */
|
||||
@Input({ required: true }) lastActivity!: Date;
|
||||
|
||||
// --- Additional display inputs ---
|
||||
|
||||
/** Short agent ID, e.g. "otto" */
|
||||
@Input() agentId = '';
|
||||
|
||||
/** Display name, e.g. "Otto" */
|
||||
@Input() displayName = '';
|
||||
|
||||
/** Role description, e.g. "Orchestrator Agent" */
|
||||
@Input() role = '';
|
||||
|
||||
/** Error message (shown only when status is 'error') */
|
||||
@Input() errorMessage = '';
|
||||
|
||||
/** Elapsed time string, e.g. "04m 12s" */
|
||||
@Input() taskElapsed = '';
|
||||
|
||||
// --- CUB-26: Outputs for drawer/modal integration ---
|
||||
|
||||
/** Emitted when the card is clicked — opens the session drawer. */
|
||||
@Output() readonly cardClick = new EventEmitter<string>();
|
||||
|
||||
/** Emitted when the card is long-pressed — bypasses drawer, opens session log directly. */
|
||||
@Output() readonly cardLongPress = new EventEmitter<string>();
|
||||
|
||||
// --- Internal state ---
|
||||
|
||||
/** Timer for refreshing relative-time label */
|
||||
private _timer: ReturnType<typeof setInterval> | 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(() => {
|
||||
const map: Record<AgentStatus, string> = {
|
||||
active: 'var(--status-active)',
|
||||
idle: 'var(--status-idle)',
|
||||
thinking: 'var(--status-thinking)',
|
||||
error: 'var(--status-error)',
|
||||
offline: 'var(--status-offline)',
|
||||
};
|
||||
return map[this.status] ?? 'var(--status-offline)';
|
||||
});
|
||||
|
||||
/** 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 (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);
|
||||
});
|
||||
|
||||
/** 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 = 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`;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
1
frontend-legacy/src/app/command-hub/components/index.ts
Normal file
1
frontend-legacy/src/app/command-hub/components/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './agent-card/agent-card.component';
|
||||
Reference in New Issue
Block a user