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/shared/section.tsx

@@ -0,0 +1,78 @@
+import { cn } from "@/lib/utils";
+
+export function SectionHeader({
+  eyebrow,
+  title,
+  action,
+  className,
+}: {
+  eyebrow?: string;
+  title: React.ReactNode;
+  action?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("mb-3 flex items-end justify-between gap-3", className)}>
+      <div className="min-w-0">
+        {eyebrow && <div className="eyebrow mb-1">{eyebrow}</div>}
+        <h2 className="display text-xl text-ink">{title}</h2>
+      </div>
+      {action}
+    </div>
+  );
+}
+
+export function MetricTile({
+  label,
+  value,
+  hint,
+  tone = "neutral",
+  spark,
+  icon,
+  className,
+}: {
+  label: string;
+  value: React.ReactNode;
+  hint?: React.ReactNode;
+  tone?: "neutral" | "signal" | "amber" | "vermilion";
+  spark?: number[];
+  icon?: React.ReactNode;
+  className?: string;
+}) {
+  const toneColor =
+    tone === "vermilion"
+      ? "var(--color-vermilion)"
+      : tone === "amber"
+        ? "var(--color-amber)"
+        : tone === "signal"
+          ? "var(--color-signal)"
+          : "var(--color-ink)";
+  return (
+    <div className={cn("glass p-4", className)}>
+      <div className="flex items-center justify-between">
+        <div className="eyebrow">{label}</div>
+        {icon && <span className="text-ink-faint">{icon}</span>}
+      </div>
+      <div
+        className="display mt-1 text-[1.9rem] leading-none"
+        style={{ color: tone === "neutral" ? undefined : toneColor }}
+      >
+        {value}
+      </div>
+      {hint && <div className="mono mt-1 text-[0.68rem] text-ink-faint">{hint}</div>}
+      {spark && spark.length > 1 && (
+        <div className="mt-2">
+          <div
+            className="h-1 w-full overflow-hidden rounded-full"
+            style={{ background: "oklch(1 0 0 / 0.08)" }}
+          >
+            <div
+              className="h-full rounded-full"
+              style={{ width: `${Math.min(100, (spark[spark.length - 1] / (Math.max(...spark) || 1)) * 100)}%`, background: toneColor, opacity: 0.7 }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}