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

// ============================================================================
// 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);
  }
}