Initial fleet skill

ui/src/components/StatusBadge.tsx

@@ -0,0 +1,33 @@
+import { clsx } from 'clsx'
+
+type Status = 'running' | 'stopped' | 'unknown'
+
+const statusStyles: Record<Status, string> = {
+  running: 'bg-green-500/20 text-green-400 border-green-500/30',
+  stopped: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+  unknown: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+}
+
+interface StatusBadgeProps {
+  status: Status
+  label?: string
+}
+
+export function StatusBadge({ status, label }: StatusBadgeProps) {
+  return (
+    <span
+      className={clsx(
+        'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border',
+        statusStyles[status]
+      )}
+    >
+      <span className={clsx(
+        'w-1.5 h-1.5 rounded-full',
+        status === 'running' && 'bg-green-400 animate-pulse',
+        status === 'stopped' && 'bg-gray-400',
+        status === 'unknown' && 'bg-yellow-400 animate-pulse'
+      )} />
+      {label || status}
+    </span>
+  )
+}