CUB-48: Agent Status Badge component with pulse animations

frontend/src/app/components/agent-status-badge/agent-status-badge.component.scss

@@ -0,0 +1,146 @@
+// ============================================================================
+// Agent Status Badge — per spec Section 7.3
+// Colored pill with dot indicator and optional pulse animation.
+// ============================================================================
+
+$badge-height: 24px;
+$dot-size: 8px;
+$border-radius: 12px;
+$font-size: 12px;
+$font-weight: 500;
+$padding-x: 8px;
+$gap: 6px;
+
+@use 'sass:color';
+
+// Status color palette
+$color-active: #22c55e;   // green-500
+$color-idle: #9ca3af;     // gray-400
+$color-thinking: #3b82f6; // blue-500
+$color-error: #ef4444;    // red-500
+$color-offline: #9ca3af;  // gray-400
+
+// Background tints (12% opacity for soft pill background)
+$bg-active: rgba($color-active, 0.12);
+$bg-idle: rgba($color-idle, 0.12);
+$bg-thinking: rgba($color-thinking, 0.12);
+$bg-error: rgba($color-error, 0.12);
+$bg-offline: rgba($color-offline, 0.12);
+
+// ---------------------------------------------------------------------------
+// Base pill
+// ---------------------------------------------------------------------------
+.badge {
+  display: inline-flex;
+  align-items: center;
+  height: $badge-height;
+  padding: 0 $padding-x;
+  border-radius: $border-radius;
+  gap: $gap;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}
+
+// ---------------------------------------------------------------------------
+// Dot indicator
+// ---------------------------------------------------------------------------
+.badge__dot {
+  width: $dot-size;
+  height: $dot-size;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Label text
+// ---------------------------------------------------------------------------
+.badge__label {
+  line-height: 1;
+}
+
+// ---------------------------------------------------------------------------
+// Status color variants
+// ---------------------------------------------------------------------------
+.badge--active {
+  background: $bg-active;
+  color: color.adjust($color-active, $lightness: -10%);
+
+  .badge__dot {
+    background: $color-active;
+  }
+}
+
+.badge--idle {
+  background: $bg-idle;
+  color: color.adjust($color-idle, $lightness: -15%);
+
+  .badge__dot {
+    background: $color-idle;
+  }
+}
+
+.badge--thinking {
+  background: $bg-thinking;
+  color: color.adjust($color-thinking, $lightness: -10%);
+
+  .badge__dot {
+    background: $color-thinking;
+  }
+}
+
+.badge--error {
+  background: $bg-error;
+  color: color.adjust($color-error, $lightness: -10%);
+
+  .badge__dot {
+    background: $color-error;
+  }
+}
+
+.badge--offline {
+  background: $bg-offline;
+  color: color.adjust($color-offline, $lightness: -15%);
+
+  .badge__dot {
+    background: $color-offline;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Pulse animation — applied when status is active, thinking, or error
+// ---------------------------------------------------------------------------
+.badge--pulse {
+  .badge__dot {
+    animation: pulse-dot 2s ease-in-out infinite;
+  }
+}
+
+// Active: 2s pulse
+.badge--active.badge--pulse .badge__dot {
+  animation-duration: 2s;
+}
+
+// Thinking: 3s pulse
+.badge--thinking.badge--pulse .badge__dot {
+  animation-duration: 3s;
+}
+
+// Error: 0.8s pulse (fast, urgent)
+.badge--error.badge--pulse .badge__dot {
+  animation-duration: 0.8s;
+}
+
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(1.5);
+  }
+}