feat(frontend): Ambient/WebGL console revamp + lint/type cleanup

Ground-up rebuild of the GMW frontend as an Ambient Field console:
- WebGL ambient background (Three.js shader, drifting motes, reduced-motion aware)
- Glassmorphism dark cyber theme across all 8 routes
- SSR page + client view split with SWR fallback; realtime via WebSocket
- Command palette (Cmd+K), chatbot FAB, guild/channel pickers
- Chart primitives: donut, radial-gauge, area-activity, sparkline, equalizer

Cleanup (review pass):
- Remove stray Puppeteer nav-test/nav-debug scripts
- Replace non-null assertions with guards (dashboard/moderation)
- Drop unused useGuilds fetches in messages/voice views
- Type implicit-any `let` declarations across pages
- Add a11y roles/labels to SVG charts and audio, tidy imports

services/frontend/src/components/shell/index.ts

@@ -1,4 +1,4 @@
 export { AppFrame } from "./ambient-app";
 export { NavRail } from "./nav-rail";
-export { TopBar } from "./topbar";
 export { ConnectionStatus } from "./status-dot";
+export { TopBar } from "./topbar";

services/frontend/src/components/shell/nav-rail.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useRouter, usePathname } from "next/navigation";
 import { LayoutDashboard } from "lucide-react";
-import { navItems, isActivePath } from "@/lib/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { isActivePath, navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 
 function NavItem({
@@ -64,4 +64,3 @@ export function NavRail() {
     </nav>
   );
 }
-

services/frontend/src/components/shell/status-dot.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useWebSocket } from "@/lib/ws/context";
 import { Tooltip } from "@/components/primitives/tooltip";
 import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";
 
 const MAP = {
   connected: { color: "bg-signal", label: "Live link" },
@@ -18,8 +18,18 @@ export function ConnectionStatus({ compact = false }: { compact?: boolean }) {
     <Tooltip label={s.label}>
       <span className="inline-flex items-center gap-2">
         <span className="relative flex size-2.5">
-          <span className={cn("absolute inline-flex h-full w-full rounded-full opacity-60 animate-pulse-ring", s.color)} />
-          <span className={cn("relative inline-flex size-2.5 rounded-full", s.color)} />
+          <span
+            className={cn(
+              "absolute inline-flex h-full w-full rounded-full opacity-60 animate-pulse-ring",
+              s.color,
+            )}
+          />
+          <span
+            className={cn(
+              "relative inline-flex size-2.5 rounded-full",
+              s.color,
+            )}
+          />
         </span>
         {!compact && (
           <span className="mono text-[0.7rem] uppercase tracking-wider text-ink-soft">

services/frontend/src/components/shell/topbar.tsx

@@ -1,13 +1,13 @@
 "use client";
 
+import { Moon, Sun } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useTheme } from "next-themes";
-import { Moon, Sun } from "lucide-react";
-import { navItems } from "@/lib/navigation";
-import { useAmbient } from "@/components/ambient/ambient-context";
-import { ConnectionStatus } from "./status-dot";
 import { useEffect, useState } from "react";
+import { useAmbient } from "@/components/ambient/ambient-context";
+import { navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
+import { ConnectionStatus } from "./status-dot";
 
 function useActiveLabel() {
   const pathname = usePathname();
@@ -41,9 +41,7 @@ export function TopBar() {
       <div className="ml-auto flex items-center gap-3">
         <span className={cn("pill", signalTone)}>
           <span
-            className={cn(
-              "size-1.5 rounded-full bg-current animate-breathe",
-            )}
+            className={cn("size-1.5 rounded-full bg-current animate-breathe")}
           />
           {state.label ?? "nominal"}
         </span>
@@ -51,7 +49,9 @@ export function TopBar() {
         <button
           type="button"
           aria-label="Open command palette"
-          onClick={() => window.dispatchEvent(new Event("command-palette:open"))}
+          onClick={() =>
+            window.dispatchEvent(new Event("command-palette:open"))
+          }
           className="hidden items-center gap-1.5 rounded-[11px] border border-hairline bg-white/5 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-signal/40 sm:flex"
         >
           <span className="mono text-[0.65rem]">⌘K</span>