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:
cubecraft-agents[bot]
277
frontend/src/app/components/agent-card/agent-card.component.scss
Normal file
277
frontend/src/app/components/agent-card/agent-card.component.scss
Normal file
@@ -0,0 +1,277 @@
|
||||
// ============================================================================
|
||||
// Agent Card Styles — M3 Tactical Dark
|
||||
// Per spec Section 7.3: Agent Card Component
|
||||
// Section 7.5: Animation Specs
|
||||
// ============================================================================
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Card Shell
|
||||
// ---------------------------------------------------------------------------
|
||||
.agent-card {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-width: var(--cc-card-min-width, 320px);
|
||||
border-radius: var(--cc-card-border-radius, 16px);
|
||||
background-color: var(--cc-surface-container);
|
||||
overflow: hidden;
|
||||
transition: background-color 150ms ease, box-shadow 150ms ease;
|
||||
|
||||
// M3 state layer overlay on hover (8% primary)
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Focus-visible outline for keyboard navigation
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Left-border accent (4px, matching status color)
|
||||
// ---------------------------------------------------------------------------
|
||||
.agent-card__accent {
|
||||
flex-shrink: 0;
|
||||
width: 4px;
|
||||
background-color: var(--agent-status-color);
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Card Body
|
||||
// ---------------------------------------------------------------------------
|
||||
.agent-card__body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: var(--cc-card-padding, 20px);
|
||||
min-width: 0; // Prevent flex blowout for long text
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Header Row
|
||||
// ---------------------------------------------------------------------------
|
||||
.agent-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.agent-card__status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agent-card__dot {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.agent-card__status-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.agent-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.agent-card__channel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.agent-card__channel-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.agent-card__last-activity {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Task Description
|
||||
// ---------------------------------------------------------------------------
|
||||
.agent-card__task {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--cc-on-surface);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Progress Bar
|
||||
// ---------------------------------------------------------------------------
|
||||
.agent-card__progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.agent-card__progress-info {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 12px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
}
|
||||
|
||||
// Override M3 progress bar track to use status color
|
||||
.agent-card__progress .mat-mdc-progress-bar {
|
||||
--mdc-linear-progress-active-indicator-color: var(--agent-status-color);
|
||||
--mdc-linear-progress-track-color: var(--agent-status-bg);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Footer Row
|
||||
// ---------------------------------------------------------------------------
|
||||
.agent-card__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: auto; // Push footer to bottom
|
||||
}
|
||||
|
||||
.agent-card__session {
|
||||
font-size: 11px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
opacity: 0.6;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Quick-Jump Button — M3 FilledTonalIconButton style
|
||||
// Per spec: → Jump button using M3 FilledTonalIconButton
|
||||
// ---------------------------------------------------------------------------
|
||||
.agent-card__jump {
|
||||
// M3 FilledTonal style: secondary container color
|
||||
--mdc-icon-button-icon-color: var(--cc-on-surface);
|
||||
background-color: var(--cc-surface-container-high);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
|
||||
// State layer overlay on hover (8% primary)
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Focus-visible ring
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--status-active);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Status-specific card backgrounds (subtle tint)
|
||||
// ---------------------------------------------------------------------------
|
||||
.agent-card--active {
|
||||
background-color: var(--status-active-bg);
|
||||
}
|
||||
|
||||
.agent-card--thinking {
|
||||
background-color: var(--status-thinking-bg);
|
||||
}
|
||||
|
||||
.agent-card--error {
|
||||
background-color: var(--status-error-bg);
|
||||
}
|
||||
|
||||
// Idle and offline use default surface-container
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Touch-First Targets
|
||||
// ---------------------------------------------------------------------------
|
||||
// Minimum touch target: 48px (M3 standard)
|
||||
.agent-card__jump {
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Accessibility: Reduced Motion
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-card {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.agent-card__jump {
|
||||
transition: none;
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Responsive: Mobile adjustments
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (max-width: 599px) {
|
||||
.agent-card {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.agent-card__body {
|
||||
padding: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user