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/toast.tsx

@@ -1,147 +1,104 @@
 "use client";
 
-import { X } from "lucide-react";
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import {
-  createContext,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { useEffect, useState } from "react";
+import { CheckCircle2, AlertTriangle, Info, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-type ToastTone = "signal" | "amber" | "vermilion" | "neutral";
-
-interface ToastItem {
+type ToastTone = "signal" | "vermilion" | "neutral";
+interface Toast {
   id: number;
-  title?: string;
+  title: string;
   description?: string;
   tone: ToastTone;
 }
 
-interface ToastContextValue {
-  toast: (t: {
-    title?: string;
-    description?: string;
-    tone?: ToastTone;
-  }) => void;
+let nextId = 1;
+const listeners = new Set<(t: Toast[]) => void>();
+let store: Toast[] = [];
+
+function emit() {
+  store = [...store];
+  listeners.forEach((l) => l(store));
 }
 
-const ToastContext = createContext<ToastContextValue | null>(null);
+export function toast(t: {
+  title: string;
+  description?: string;
+  tone?: ToastTone;
+}) {
+  const item: Toast = { id: nextId++, tone: t.tone ?? "neutral", ...t };
+  store = [...store, item];
+  listeners.forEach((l) => l(store));
+  setTimeout(() => {
+    store = store.filter((x) => x.id !== item.id);
+    emit();
+  }, 4200);
+}
 
 export function useToast() {
-  const ctx = useContext(ToastContext);
-  if (!ctx) {
-    return {
-      toast: (_: {
-        title?: string;
-        description?: string;
-        tone?: ToastTone;
-      }) => {},
-    };
-  }
-  return ctx;
+  return { toast };
 }
 
-const toneBar: Record<ToastTone, string> = {
-  signal: "bg-[var(--color-signal)]",
-  amber: "bg-[var(--color-amber)]",
-  vermilion: "bg-[var(--color-vermilion)]",
-  neutral: "bg-[var(--color-ink-soft)]",
+const icons = {
+  signal: CheckCircle2,
+  vermilion: AlertTriangle,
+  neutral: Info,
 };
 
-export interface ToasterProps {
-  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
-}
-
-export function Toaster({ position = "bottom-right" }: ToasterProps) {
-  const [items, setItems] = useState<ToastItem[]>([]);
-  const reduce = useReducedMotion();
-
-  const toast = useCallback(
-    (t: { title?: string; description?: string; tone?: ToastTone }) => {
-      const id = Date.now() + Math.random();
-      const item: ToastItem = {
-        id,
-        tone: t.tone ?? "neutral",
-        title: t.title,
-        description: t.description,
-      };
-      setItems((prev) => [...prev, item]);
-      setTimeout(() => {
-        setItems((prev) => prev.filter((i) => i.id !== id));
-      }, 4500);
-    },
-    [],
-  );
-
+export function Toaster({ position = "bottom-right" }: { position?: string }) {
+  const [items, setItems] = useState<Toast[]>([]);
   useEffect(() => {
-    // expose a no-op provider only; actual provider wraps below
+    listeners.add(setItems);
+    setItems(store);
+    return () => {
+      listeners.delete(setItems);
+    };
   }, []);
 
-  const posClass =
+  const pos =
     position === "bottom-right"
       ? "bottom-4 right-4"
-      : position === "bottom-left"
-        ? "bottom-4 left-4"
-        : position === "top-right"
-          ? "top-4 right-4"
-          : "top-4 left-4";
+      : position === "top-right"
+        ? "top-4 right-4"
+        : "bottom-4 left-1/2 -translate-x-1/2";
 
   return (
-    <ToastContext.Provider value={{ toast }}>
-      <div
-        className={cn(
-          "fixed z-[60] flex w-[min(92vw,360px)] flex-col gap-2",
-          posClass,
-        )}
-      >
-        <AnimatePresence>
-          {items.map((it) => (
-            <motion.div
-              key={it.id}
-              layout
-              initial={
-                reduce ? { opacity: 0 } : { opacity: 0, x: 40, scale: 0.96 }
-              }
-              animate={{ opacity: 1, x: 0, scale: 1 }}
-              exit={
-                reduce ? { opacity: 0 } : { opacity: 0, x: 40, scale: 0.96 }
-              }
-              transition={{ type: "spring", stiffness: 360, damping: 30 }}
-              className="surface-2 relative flex gap-3 overflow-hidden p-3 pr-9 shadow-xl"
+    <div className={cn("pointer-events-none fixed z-[100] flex w-[min(92vw,360px)] flex-col gap-2", pos)}>
+      {items.map((t) => {
+        const Icon = icons[t.tone];
+        return (
+          <div
+            key={t.id}
+            className="glass pointer-events-auto flex items-start gap-3 p-3.5"
+            style={{ animation: "fade-up 0.18s ease" }}
+          >
+            <Icon
+              className={cn(
+                "mt-0.5 size-4 shrink-0",
+                t.tone === "signal" && "text-signal",
+                t.tone === "vermilion" && "text-vermilion",
+                t.tone === "neutral" && "text-ink-soft",
+              )}
+            />
+            <div className="min-w-0 flex-1">
+              <div className="text-sm font-semibold text-ink">{t.title}</div>
+              {t.description && (
+                <div className="mt-0.5 text-xs text-ink-soft">{t.description}</div>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={() => {
+                store = store.filter((x) => x.id !== t.id);
+                emit();
+              }}
+              className="text-ink-faint hover:text-ink"
             >
-              <span
-                className={cn("w-1 shrink-0 rounded-full", toneBar[it.tone])}
-              />
-              <div className="min-w-0 flex-1">
-                {it.title && (
-                  <div className="text-sm font-semibold text-[var(--color-ink)]">
-                    {it.title}
-                  </div>
-                )}
-                {it.description && (
-                  <div className="text-xs text-[var(--color-ink-soft)]">
-                    {it.description}
-                  </div>
-                )}
-              </div>
-              <button
-                type="button"
-                onClick={() =>
-                  setItems((prev) => prev.filter((i) => i.id !== it.id))
-                }
-                className="absolute right-2 top-2 text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]"
-                aria-label="Dismiss"
-              >
-                <X className="size-3.5" />
-              </button>
-            </motion.div>
-          ))}
-        </AnimatePresence>
-      </div>
-    </ToastContext.Provider>
+              <X className="size-3.5" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
   );
 }