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/primitives/progress.tsx

@@ -1,39 +1,38 @@
 import { cn } from "@/lib/utils";
 
-export interface ProgressProps {
-  value: number;
-  max?: number;
-  className?: string;
-  tone?: "signal" | "amber" | "vermilion";
-  showLabel?: boolean;
-}
-
 export function Progress({
   value,
-  max = 100,
-  className,
   tone = "signal",
-  showLabel,
-}: ProgressProps) {
-  const pct = Math.max(0, Math.min(100, (value / max) * 100));
-  const stroke = {
-    signal: "var(--color-signal)",
-    amber: "var(--color-amber)",
-    vermilion: "var(--color-vermilion)",
-  }[tone];
+  className,
+}: {
+  value: number;
+  tone?: "signal" | "amber" | "vermilion";
+  className?: string;
+}) {
+  const pct = Math.max(0, Math.min(100, value));
+  const color =
+    tone === "vermilion"
+      ? "var(--color-vermilion)"
+      : tone === "amber"
+        ? "var(--color-amber)"
+        : "var(--color-signal)";
   return (
-    <div className={cn("flex items-center gap-2", className)}>
-      <div className="relative h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--color-hairline)]">
-        <div
-          className="absolute inset-y-0 left-0 rounded-full transition-[width] duration-300"
-          style={{ width: `${pct}%`, background: stroke }}
-        />
-      </div>
-      {showLabel && (
-        <span className="mono text-xs text-[var(--color-ink-soft)]">
-          {Math.round(pct)}%
-        </span>
-      )}
+    <div className={cn("h-1.5 w-full overflow-hidden rounded-full bg-white/8", className)}>
+      <div
+        className="h-full rounded-full transition-[width] duration-500"
+        style={{ width: `${pct}%`, background: color, boxShadow: `0 0 12px -2px ${color}` }}
+      />
     </div>
   );
 }
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <span
+      className={cn(
+        "inline-block size-4 animate-spin rounded-full border-2 border-white/20 border-t-signal",
+        className,
+      )}
+    />
+  );
+}