chunker and ui

ui/chunker/src/components/StatsPanel.tsx

@@ -0,0 +1,59 @@
+import type { PipelineStats } from "../types";
+import { TopicBadge, TOPICS } from "./TopicBadge";
+
+interface Props {
+  stats: PipelineStats;
+}
+
+/**
+ * Throughput, timing, and error stats.
+ * Interview Topic 6: Algorithms — throughput calculation over sliding window.
+ * Interview Topic 8: TDD — test count and coverage.
+ */
+export function StatsPanel({ stats }: Props) {
+  return (
+    <div className="stats-panel">
+      <div className="panel-header">
+        <h2>Stats</h2>
+        <div className="badge-row">
+          <TopicBadge topic={TOPICS.algorithms} />
+          <TopicBadge topic={TOPICS.testing} />
+        </div>
+      </div>
+      <div className="stats-grid">
+        <div className="stat">
+          <div className="stat-value">{stats.total_chunks}</div>
+          <div className="stat-label">Total Chunks</div>
+        </div>
+        <div className="stat">
+          <div className="stat-value">{stats.processed}</div>
+          <div className="stat-label">Processed</div>
+        </div>
+        <div className="stat">
+          <div className="stat-value">{stats.failed}</div>
+          <div className="stat-label">Failed</div>
+        </div>
+        <div className="stat">
+          <div className="stat-value">{stats.retries}</div>
+          <div className="stat-label">Retries</div>
+        </div>
+        <div className="stat">
+          <div className="stat-value">
+            {stats.throughput_mbps.toFixed(2)}
+          </div>
+          <div className="stat-label">MB/s</div>
+        </div>
+        <div className="stat">
+          <div className="stat-value">{stats.elapsed.toFixed(2)}s</div>
+          <div className="stat-label">Elapsed</div>
+        </div>
+      </div>
+      <div className="test-info">
+        <span className="test-badge">64 tests</span>
+        <span className="test-note">
+          7 test files &middot; pytest &middot; parametrized
+        </span>
+      </div>
+    </div>
+  );
+}