chunker ui redo

ui/chunker/src/components/WorkerPanel.tsx

@@ -1,28 +1,21 @@
 import type { WorkerInfo } from "../types";
-import { TopicBadge, TOPICS } from "./TopicBadge";
 
 interface Props {
   workers: WorkerInfo[];
 }
 
 const STATE_COLORS: Record<string, string> = {
-  idle: "#6b7280",
-  processing: "#3b82f6",
+  idle: "var(--text-muted)",
+  processing: "var(--processing)",
   retry: "#f97316",
-  stopped: "#ef4444",
+  stopped: "var(--error)",
 };
 
-/**
- * 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) => (
@@ -31,7 +24,7 @@ export function WorkerPanel({ workers }: Props) {
               <span className="worker-name">{w.worker_id}</span>
               <span
                 className="worker-state"
-                style={{ color: STATE_COLORS[w.state] || "#888" }}
+                style={{ color: STATE_COLORS[w.state] || "var(--text-secondary)" }}
               >
                 {w.state}
               </span>