feat(app): status rings on panels + sidebar aggregate badge from state events

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-09 23:11:46 +07:00
parent c35585755e
commit d36548ff39
7 changed files with 79 additions and 9 deletions
@@ -0,0 +1,27 @@
+import type { SurfaceState } from "./layoutTypes";
+
+const COLOR: Record<SurfaceState, string> = {
+  work: "#4C8DFF",
+  wait: "#F2B84B",
+  done: "#3FB950",
+  error: "#F4544E",
+  idle: "#5A6573",
+};
+
+export function StatusRing({ state, running }: { state: SurfaceState; running: boolean }) {
+  const color = running ? COLOR[state] : "#5A6573";
+  return (
+    <span
+      title={running ? state : "stopped"}
+      style={{
+        display: "inline-block",
+        width: 10,
+        height: 10,
+        borderRadius: "50%",
+        border: `2px solid ${color}`,
+        boxSizing: "border-box",
+        opacity: running ? 1 : 0.5,
+      }}
+    />
+  );
+}