fc12ab31a4
- Replaced inline status dot/label with AgentStatusBadgeComponent (CUB-48) - Replaced inline mat-progress-bar with TaskProgressBarComponent (CUB-44) - Replaced inline jump button with QuickJumpButtonComponent (CUB-46) - Left-border accent remains, driven by --agent-status-color CSS variable - All 6 inputs working: status, task, progress, sessionKey, channel, lastActivity - Added jumpClick output that forwards QuickJumpButton events - role=article and aria-label on card element - Fixed QuickJumpButton sessionKey to be @Input() for proper Angular binding - Added barrel export for quick-jump-button - Updated components barrel export for all sub-components - Build and type-check pass cleanly
192 lines
5.2 KiB
SCSS
192 lines
5.2 KiB
SCSS
// ============================================================================
|
|
// Agent Card Styles — M3 Tactical Dark (Final Integration, CUB-45)
|
|
// Uses sub-components:
|
|
// - AgentStatusBadge (CUB-48) for status display
|
|
// - TaskProgressBar (CUB-44) for progress
|
|
// - QuickJumpButton (CUB-46) for navigation
|
|
// ============================================================================
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 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__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;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Task Progress Bar (CUB-44 sub-component)
|
|
// Override the sub-component's progress bar colors to match status color
|
|
// ---------------------------------------------------------------------------
|
|
:host ::ng-deep .task-progress-bar .mat-mdc-progress-bar,
|
|
.agent-card .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;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 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
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Accessibility: Reduced Motion
|
|
// ---------------------------------------------------------------------------
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.agent-card {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Responsive: Mobile adjustments
|
|
// ---------------------------------------------------------------------------
|
|
@media (max-width: 599px) {
|
|
.agent-card {
|
|
min-width: unset;
|
|
}
|
|
|
|
.agent-card__body {
|
|
padding: 16px;
|
|
gap: 8px;
|
|
}
|
|
} |