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

@@ -1,38 +1,51 @@
 import { cn } from "@/lib/utils";
 
-export interface AvatarProps {
-  src?: string | null;
-  name?: string | null;
-  size?: number;
-  className?: string;
-}
-
 function initials(name?: string | null): string {
   if (!name) return "?";
-  const parts = name.trim().split(/\s+/);
+  const parts = name.replace(/[^\p{L}\p{N} _]/gu, "").trim().split(/\s+/);
   if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
   return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 }
 
-export function Avatar({ src, name, size = 36, className }: AvatarProps) {
+export function Avatar({
+  src,
+  name,
+  size = 36,
+  className,
+  ring,
+}: {
+  src?: string | null;
+  name?: string | null;
+  size?: number;
+  className?: string;
+  ring?: boolean;
+}) {
+  const dim = { width: size, height: size };
   return (
     <span
       className={cn(
         "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
-        "bg-[var(--color-signal)]/20 text-[var(--color-signal)] font-semibold",
+        "bg-gradient-to-br from-white/10 to-white/[0.02] text-ink-soft",
+        ring && "ring-2 ring-signal/50",
         className,
       )}
-      style={{ width: size, height: size, fontSize: size * 0.38 }}
+      style={dim}
     >
       {src ? (
+        // eslint-disable-next-line @next/next/no-img-element
         <img
           src={src}
-          alt={name ?? ""}
-          className="size-full object-cover"
+          alt={name ?? "avatar"}
+          className="h-full w-full object-cover"
           loading="lazy"
         />
       ) : (
-        initials(name)
+        <span
+          className="font-semibold"
+          style={{ fontSize: Math.max(10, size * 0.36) }}
+        >
+          {initials(name)}
+        </span>
       )}
     </span>
   );