chunker ui redo

ui/common/components/StatusDot.tsx

@@ -0,0 +1,33 @@
+/**
+ * StatusDot — small colored indicator for connection/state.
+ */
+
+const STATE_COLORS: Record<string, string> = {
+  connected: "var(--success)",
+  idle: "var(--text-muted)",
+  processing: "var(--processing)",
+  stopped: "var(--text-muted)",
+  error: "var(--error)",
+  done: "var(--success)",
+};
+
+interface StatusDotProps {
+  state: string;
+  glow?: boolean;
+}
+
+export function StatusDot({ state, glow = false }: StatusDotProps) {
+  const color = STATE_COLORS[state] || "var(--text-muted)";
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        background: color,
+        boxShadow: glow ? `0 0 6px ${color}` : undefined,
+      }}
+    />
+  );
+}