feat(v1): add basic backend and frontend

frontend/src/components/HistogramPanel.jsx

@@ -0,0 +1,36 @@
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+function toChartData(original, processed) {
+  return Array.from({ length: 256 }, (_, level) => ({
+    level,
+    original: original?.[level] ?? 0,
+    processed: processed?.[level] ?? 0
+  }));
+}
+
+export default function HistogramPanel({ original, processed }) {
+  const data = toChartData(original, processed);
+  return (
+    <section className="border-t border-zinc-800 bg-zinc-950 px-4 py-3">
+      <div className="mb-3 flex items-center justify-between">
+        <h2 className="text-sm font-semibold text-zinc-100">Histogram Analytics</h2>
+        <div className="flex gap-3 text-xs text-zinc-400">
+          <span className="text-cyan-300">Original</span>
+          <span className="text-emerald-300">Processed</span>
+        </div>
+      </div>
+      <div className="h-40">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={data} margin={{ left: 0, right: 8, top: 8, bottom: 0 }}>
+            <CartesianGrid stroke="#27272a" strokeDasharray="3 3" />
+            <XAxis dataKey="level" stroke="#71717a" tick={{ fontSize: 10 }} interval={63} />
+            <YAxis stroke="#71717a" tick={{ fontSize: 10 }} width={44} />
+            <Tooltip contentStyle={{ background: "#18181b", border: "1px solid #3f3f46", color: "#f4f4f5" }} />
+            <Area type="monotone" dataKey="original" stroke="#67e8f9" fill="#0891b2" fillOpacity={0.22} dot={false} />
+            <Area type="monotone" dataKey="processed" stroke="#6ee7b7" fill="#059669" fillOpacity={0.24} dot={false} />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </section>
+  );
+}