feat(CUB-45): [Control Center] AgentCard Component Final Integration

2026-04-27 14:36:14 +00:00
parent 8d0adeb2e9
commit 2a21cad431
4 changed files with 444 additions and 0 deletions
--- a/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss
+++ b/frontend/src/app/command-hub/components/agent-card/agent-card.component.scss
@@ -0,0 +1,234 @@
+// ============================================================================
+// AgentCard — M3 tactical dark styling
+// Per spec Section 7.3: left‑border accent, status‑aware coloring,
+// responsive card layout with 320px min‑width.
+// ============================================================================
+
+.agent-card {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--cc-card-min-width);
+  padding: var(--cc-card-padding);
+  background-color: var(--cc-surface-container);
+  border-radius: var(--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);
+  }
+
+  &: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);
+
+  // Per‑status background tints
+  .status-dot--active + & {
+    background-color: var(--status-active-bg);
+  }
+}
+
+.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 messages get distinct styling
+  .agent-card--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-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);
+  }
+}
+
+// ── 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-icon,
+.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;
+
+  // Match M3 text button sizing
+  .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 ──
+// We use the global status-dot classes from styles.scss and pair them
+// with contextual background-color overrides here.
+
+.agent-card[data-status="active"] .agent-card__badge,
+.agent-card .status-dot--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);
+}
+
+// ── Responsive ──
+@media (max-width: 599px) {
+  .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;
+  }
+}