From 8fa6104af171d503c5efbd27f48cc7700f4a17c5 Mon Sep 17 00:00:00 2001
From: Renn F <rennf93@users.noreply.github.com>
Date: Sun, 21 Jun 2026 00:12:51 +0200
Subject: [PATCH] fix(panel): clear color indicators for agent status badges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The agent cards rendered active / stopped / offline all in the same grey:
the state-badge color map had no `active` or `offline` entry (both fell to the
grey fallback) and `stopped` was also grey. Give them distinct, legible colors:
active/running → green, offline → grey, stopped/paused → amber (attention, not
alarming), error → red; move idle to blue so grey unambiguously means offline.
Add active/offline/paused icons (Activity / PowerOff / Square).
---
 .../components/agents/agent-state-badge.tsx   | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/panel/src/components/agents/agent-state-badge.tsx b/panel/src/components/agents/agent-state-badge.tsx
index f2e72679..d03218b5 100644
--- a/panel/src/components/agents/agent-state-badge.tsx
+++ b/panel/src/components/agents/agent-state-badge.tsx
@@ -1,35 +1,54 @@
 import { Badge } from "@/components/ui/badge";
-import { Clock, RefreshCw, Activity, AlertTriangle, Square } from "lucide-react";
+import {
+  Clock,
+  RefreshCw,
+  Activity,
+  AlertTriangle,
+  Square,
+  PowerOff,
+} from "lucide-react";
 
 // Agent states as returned by backend orchestrator
 type AgentStateString =
+  | "active"
   | "idle"
   | "starting"
   | "ready"
   | "running"
   | "waiting_long"
+  | "paused"
   | "error"
+  | "offline"
   | "stopped"
   | "terminated";
 
+// Clear, distinct indicators:
+//   active / running → green; offline → grey; stopped / paused → amber
+//   (needs attention, not alarming); error → red.
 const stateColors: Record<string, string> = {
-  idle: "bg-gray-500",
-  starting: "bg-yellow-500",
-  ready: "bg-blue-500",
+  active: "bg-green-500",
   running: "bg-green-500",
+  ready: "bg-blue-500",
+  starting: "bg-yellow-500",
+  idle: "bg-blue-400",
+  stopped: "bg-amber-500",
+  paused: "bg-amber-500",
   waiting_long: "bg-orange-500",
-  error: "bg-red-500",
-  stopped: "bg-gray-400",
+  offline: "bg-gray-500",
   terminated: "bg-gray-600",
+  error: "bg-red-500",
 };
 
 const stateIcons: Record<string, React.ReactNode> = {
+  active: <Activity className="h-4 w-4" />,
   idle: <Clock className="h-4 w-4" />,
   starting: <RefreshCw className="h-4 w-4 animate-spin" />,
   ready: <Activity className="h-4 w-4" />,
   running: <Activity className="h-4 w-4" />,
   waiting_long: <AlertTriangle className="h-4 w-4" />,
+  paused: <Square className="h-4 w-4" />,
   error: <AlertTriangle className="h-4 w-4" />,
+  offline: <PowerOff className="h-4 w-4" />,
   stopped: <Square className="h-4 w-4" />,
   terminated: <Square className="h-4 w-4" />,
 };