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" />,
 };