CUB-23: implement AgentCard component with status indicators, progress bar, and M3 styling
- AgentCard component with inputs: status, task, progress, sessionKey, channel, lastActivity - Status badge colors: Active (#38BDF8), Idle (#2DD4BF), Thinking (#A78BFA), Error (#F87171) - 4px left-border accent matching status color via CSS custom properties - Pulse animations: Active (2s), Error (0.8s), Thinking (3s) using global styles.scss keyframes - Task progress bar with percentage display - Quick-Jump button using M3 FilledTonalIconButton style with state layer overlay - Hover/focus states with M3 state layer overlay (8% primary) - Accessibility: aria-labels for status, role=article on cards, focus-visible outlines - Reduced-motion media query support - Updated HubPageComponent with demo data grid layout
This commit is contained in:
1
frontend/src/app/components/agent-card/index.ts
Normal file
1
frontend/src/app/components/agent-card/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { AgentCardComponent } from './agent-card.component';
|
||||
Reference in New Issue
Block a user