chunker and ui

ui/chunker/src/components/PipelineDiagram.tsx

@@ -0,0 +1,50 @@
+import { TopicBadge, TOPICS } from "./TopicBadge";
+
+interface Props {
+  activeStage: string;
+}
+
+const STAGES = [
+  { id: "chunking", label: "Chunker", sub: "File -> Chunks (generator)" },
+  { id: "queued", label: "ChunkQueue", sub: "Bounded queue (backpressure)" },
+  { id: "processing", label: "WorkerPool", sub: "ThreadPoolExecutor" },
+  { id: "collecting", label: "ResultCollector", sub: "heapq reassembly" },
+  { id: "completed", label: "PipelineResult", sub: "Aggregate stats" },
+];
+
+/**
+ * Visual flow diagram of pipeline stages.
+ * Highlights the currently active stage.
+ * Interview Topic 4: OOP design — shows class hierarchy.
+ */
+export function PipelineDiagram({ activeStage }: Props) {
+  return (
+    <div className="pipeline-diagram">
+      <div className="panel-header">
+        <h2>Pipeline Flow</h2>
+        <TopicBadge topic={TOPICS.oop} />
+      </div>
+      <div className="stage-flow">
+        {STAGES.map((stage, i) => (
+          <div key={stage.id} className="stage-wrapper">
+            <div
+              className={`stage ${activeStage === stage.id ? "active" : ""}`}
+            >
+              <div className="stage-label">{stage.label}</div>
+              <div className="stage-sub">{stage.sub}</div>
+            </div>
+            {i < STAGES.length - 1 && <div className="stage-arrow" />}
+          </div>
+        ))}
+      </div>
+      <div className="processor-hierarchy">
+        <div className="hierarchy-title">Processor ABC</div>
+        <div className="hierarchy-children">
+          <span className="hierarchy-node">ChecksumProcessor</span>
+          <span className="hierarchy-node">SimulatedDecodeProcessor</span>
+          <span className="hierarchy-node">CompositeProcessor</span>
+        </div>
+      </div>
+    </div>
+  );
+}