feat(frontend): rebuild as Ambient/WebGL console with all pages + command palette

Ground-up rombak UI: hapus semua component/page lama, bangun ulang dengan
desain sistem Ambient (WebGL haze + drifting motes, signal-driven color)
di atas kontrak API/WS/type yang sudah ada.

- Design system: globals.css tokens + primitives (glass, button, badge,
  select, avatar, toast, chart SVG murni).
- Shell: nav rail, topbar (status WS + pill signal + theme), AppFrame.
- 8 halaman: dashboard, voice (orbital stage), media, messages (live feed +
  detail AI), moderation, analysis (search), recordings, + chatbot floating.
- Command palette (Cmd/Ctrl+K) untuk navigasi cepat.
- Server fetch di-page di-try/catch agar render graceful saat backend mati.

Verified: tsc clean, next build 8/8 halaman, semua route 200.

services/frontend/src/components/charts/waveform.tsx

@@ -1,76 +1,37 @@
-"use client";
-
-import { motion, useReducedMotion } from "motion/react";
-import { useMemo } from "react";
 import { cn } from "@/lib/utils";
 
-export interface WaveformProps {
-  seed: string | number;
-  bars?: number;
-  height?: number;
-  className?: string;
-  tone?: "signal" | "amber" | "vermilion";
-}
-
-// deterministic pseudo-random from seed so the shape is stable per recording
-function hashSeed(seed: string | number): number {
-  const s = String(seed);
-  let h = 2166136261;
-  for (let i = 0; i < s.length; i++) {
-    h ^= s.charCodeAt(i);
-    h = Math.imul(h, 16777619);
-  }
-  return h >>> 0;
-}
-
-export function Waveform({
-  seed,
-  bars = 40,
-  height = 40,
+/** Live equalizer bars. `bars` are 0..1 levels. */
+export function Equalizer({
+  bars,
+  color = "var(--color-signal)",
   className,
-  tone = "signal",
-}: WaveformProps) {
-  const reduce = useReducedMotion();
-  const values = useMemo(() => {
-    let state = hashSeed(seed) || 1;
-    const out: number[] = [];
-    for (let i = 0; i < bars; i++) {
-      state = (Math.imul(state, 1103515245) + 12345) >>> 0;
-      const r = (state % 1000) / 1000;
-      // envelope: louder in the middle, quieter at edges
-      const env = Math.sin((i / (bars - 1)) * Math.PI);
-      out.push(0.18 + r * 0.82 * (0.4 + env * 0.6));
-    }
-    return out;
-  }, [seed, bars]);
-
-  const color = {
-    signal: "var(--color-signal)",
-    amber: "var(--color-amber)",
-    vermilion: "var(--color-vermilion)",
-  }[tone];
-
+}: {
+  bars: number[];
+  color?: string;
+  className?: string;
+}) {
   return (
-    <div
-      className={cn("flex items-end gap-[2px]", className)}
-      style={{ height }}
-      aria-hidden
-    >
-      {values.map((v, i) => (
-        <motion.span
-          key={i}
-          className="flex-1 rounded-[2px]"
-          style={{ background: color, height: `${Math.max(8, v * 100)}%` }}
-          initial={reduce ? false : { scaleY: 0.2, opacity: 0 }}
-          animate={{ scaleY: 1, opacity: 1 }}
-          whileHover={{ scaleY: 1.15 }}
-          transition={{
-            duration: 0.3,
-            delay: reduce ? 0 : i * 0.006,
-            ease: [0.22, 1, 0.36, 1],
-          }}
-        />
-      ))}
+    <div className={cn("flex h-10 items-end gap-[3px]", className)}>
+      {bars.length === 0 ? (
+        <div className="flex w-full items-end gap-[3px]">
+          {Array.from({ length: 28 }).map((_, i) => (
+            <span key={i} className="flex-1 rounded-full bg-white/10" style={{ height: "12%" }} />
+          ))}
+        </div>
+      ) : (
+        bars.map((b, i) => (
+          <span
+            key={i}
+            className="flex-1 rounded-full"
+            style={{
+              height: `${Math.max(6, b * 100)}%`,
+              background: color,
+              boxShadow: b > 0.05 ? `0 0 8px ${color}` : "none",
+              transition: "height 90ms linear",
+            }}
+          />
+        ))
+      )}
     </div>
   );
 }