Joshua
8da593c450
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
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);
|
|
}
|
|
} |