chunker and ui

ui/chunker/src/components/WorkerPanel.tsx

@@ -0,0 +1,55 @@
+import type { WorkerInfo } from "../types";
+import { TopicBadge, TOPICS } from "./TopicBadge";
+
+interface Props {
+  workers: WorkerInfo[];
+}
+
+const STATE_COLORS: Record<string, string> = {
+  idle: "#6b7280",
+  processing: "#3b82f6",
+  retry: "#f97316",
+  stopped: "#ef4444",
+};
+
+/**
+ * Worker thread status cards.
+ * Shows each worker's real-time state and which chunk it's processing.
+ * Interview Topic 2: Concurrency (threading).
+ */
+export function WorkerPanel({ workers }: Props) {
+  return (
+    <div className="worker-panel">
+      <div className="panel-header">
+        <h2>Workers</h2>
+        <TopicBadge topic={TOPICS.concurrency} />
+      </div>
+      <div className="worker-cards">
+        {workers.map((w) => (
+          <div key={w.worker_id} className="worker-card">
+            <div className="worker-header">
+              <span className="worker-name">{w.worker_id}</span>
+              <span
+                className="worker-state"
+                style={{ color: STATE_COLORS[w.state] || "#888" }}
+              >
+                {w.state}
+              </span>
+            </div>
+            {w.current_chunk !== undefined && (
+              <div className="worker-chunk">chunk #{w.current_chunk}</div>
+            )}
+            <div className="worker-stats">
+              <span>done: {w.processed}</span>
+              <span>err: {w.errors}</span>
+              <span>retry: {w.retries}</span>
+            </div>
+          </div>
+        ))}
+        {workers.length === 0 && (
+          <div className="worker-empty">No workers started</div>
+        )}
+      </div>
+    </div>
+  );
+}