feat(frontend): add HUD header and GSAP accordion reveal to glossary route

build(deps-dev): bump tsx from 4.23.1 to 4.23.12 in /services/backend

.env.example

@@ -86,7 +86,7 @@ BACKLOG_SYNC_BATCH_SIZE=100             # Messages per backlog batch, max 100 (d
 AI_ANALYSIS_ENABLED=false               # Enable AI content moderation (default: false)
 AI_LLM_API_KEY=                        # REQUIRED if AI_ANALYSIS_ENABLED=true. LLM API key
 AI_LLM_BASE_URL=https://9router.asepharyana.my.id/v1  # LLM API base URL (9router — OpenAI-compatible router, replaces omniroute)
-AI_LLM_MODEL=claude-opus-5                   # LLM text model name (default: claude-opus-5)
+AI_LLM_MODEL=text                       # LLM text model name (default: text)
 # AI_LLM_VISION_MODEL=                   # Vision model for image analysis (falls back to AI_LLM_MODEL)
 # AI_LLM_EMBEDDING_MODEL=                # Embedding model for semantic moderation cache (optional; enables near-duplicate text reuse to save LLM calls)
 # AI_LLM_EMBEDDING_MIN_SIMILARITY=0.97   # Min cosine similarity to reuse a cached verdict (default: 0.97)

.github/dependabot-auto-merge.yml

@@ -0,0 +1,24 @@
+name: dependabot-auto-merge
+
+on:
+  pull_request:
+    branches:
+      - main
+      - master
+
+# Auto-merge Dependabot PRs with passing CI
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  dependabot:
+    runs-on: ubuntu-latest
+    # Only for Dependabot PRs
+    if: github.actor == 'dependabot[bot]'
+    steps:
+      - name: Auto-merge
+        run: gh pr merge --auto --merge "$PR_NUMBER"
+        env:
+          PR_NUMBER: ${{ github.event.number }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/dependabot.yml

@@ -0,0 +1,39 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    labels: ["dependencies"]
+    groups:
+      production:
+        dependency-type: "production"
+      development:
+        dependency-type: "development"
+
+  - package-ecosystem: "npm"
+    directory: "/services/backend"
+    schedule:
+      interval: "daily"
+    labels: ["dependencies"]
+    groups:
+      production:
+        dependency-type: "production"
+
+  - package-ecosystem: "npm"
+    directory: "/services/discord-gateway"
+    schedule:
+      interval: "daily"
+    labels: ["dependencies"]
+    groups:
+      production:
+        dependency-type: "production"
+
+  - package-ecosystem: "npm"
+    directory: "/services/frontend"
+    schedule:
+      interval: "daily"
+    labels: ["dependencies"]
+    groups:
+      production:
+        dependency-type: "production"

.github/workflows/flakehub-publish-rolling.yaml

@@ -1,20 +0,0 @@
-name: Publish to FlakeHub
-
-on:
-  push:
-    branches: [main, master]
-  workflow_dispatch:
-
-jobs:
-  flakehub-publish:
-    runs-on: ubuntu-latest
-    permissions:
-      id-token: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-      - uses: DeterminateSystems/determinate-nix-action@main
-      - uses: DeterminateSystems/flakehub-push@main
-        with:
-          visibility: public
-          rolling: true

services/backend/package.json

@@ -21,21 +21,21 @@
     "drizzle-orm": "^0.45.2",
     "express": "^5.2.1",
     "helmet": "^8.1.0",
-    "ioredis": "^5.11.0",
+    "ioredis": "^6.0.0",
-    "pg": "^8.21.0",
+    "pg": "^8.23.0",
-    "pino": "^9.6.0",
+    "pino": "^10.3.1",
     "prom-client": "^15.1.3",
-    "ws": "^8.20.1",
+    "ws": "^8.21.3",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "@biomejs/biome": "latest",
     "@types/express": "^5.0.6",
-    "@types/node": "^25.9.0",
+    "@types/node": "^26.2.0",
-    "@types/pg": "^8.20.0",
+    "@types/pg": "^8.23.1",
     "@types/ws": "^8.18.1",
-    "tsx": "^4.22.2",
+    "tsx": "^4.23.12",
-    "typescript": "^5.9.3",
+    "typescript": "^7.0.2",
     "vitest": "latest"
   }
 }

services/discord-gateway/package.json

@@ -28,30 +28,30 @@
     "discord.js-selfbot-v13": "^3.7.1",
     "dotenv": "^17.4.2",
     "drizzle-orm": "^0.45.2",
-    "ioredis": "^5.11.0",
+    "ioredis": "^6.0.0",
     "libsodium-wrappers": "^0.8.4",
     "lru-cache": "^11.5.1",
-    "openai": "^6.38.0",
+    "openai": "^7.5.0",
-    "opusscript": "^0.0.8",
+    "opusscript": "^0.1.1",
     "p-limit": "^7.3.0",
     "p-retry": "^8.0.0",
-    "pg": "^8.21.0",
+    "pg": "^8.23.0",
-    "pino": "^9.6.0",
+    "pino": "^10.3.1",
-    "piscina": "^5.1.4",
+    "piscina": "^5.3.1",
     "prism-media": "2.0.0-alpha.0",
-    "sharp": "^0.34.5",
+    "sharp": "^0.35.3",
     "tiktoken": "^1.0.22",
-    "ws": "^8.20.1",
+    "ws": "^8.21.3",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "@biomejs/biome": "latest",
-    "@types/node": "^25.9.0",
+    "@types/node": "^26.2.0",
-    "@types/pg": "^8.20.0",
+    "@types/pg": "^8.23.1",
     "@types/ws": "^8.18.1",
     "drizzle-kit": "^0.31.10",
-    "tsx": "^4.22.2",
+    "tsx": "^4.23.12",
-    "typescript": "^5.9.3",
+    "typescript": "^7.0.2",
     "vitest": "latest"
   }
 }

services/discord-gateway/src/shared/config/index.ts

@@ -150,7 +150,7 @@ export const configSchema = z
       .string()
       .url()
       .default("https://9router.asepharyana.my.id/v1"),
-    AI_LLM_MODEL: z.string().default("claude-opus-5"),
+    AI_LLM_MODEL: z.string().default("text"),
     // Vision uses the SAME router/base URL as text moderation
     // (AI_LLM_BASE_URL) but a different model alias. The dedicated NVIDIA
     // multimodal endpoint was removed.

services/frontend/.hermes/plans/2026-08-26-fe-rombak-gsap-wide.md

@@ -0,0 +1,81 @@
+# GMW FE Rombak — Extend Tactical-HUD/GSAP Treatment Wide (2026-08-26)
+
+## Context / lessons that constrain this plan
+- 2026-08-24: full novel navigation metaphor (constellation/three.js) was
+  SHIPPED green on every gate then REJECTED by user for hurting usability.
+  Rolled back entirely. Lesson: do NOT invent a new nav metaphor.
+- 2026-08-24: accepted direction = monochrome theme + game-menu style sidebar
+  animation ON TOP of the familiar shell (rail/topbar/panel kept).
+- 2026-08-25: `dashboard` and `media` routes were already revamped into a
+  "Tactical HUD" style with GSAP (`@gsap/react` useGSAP) reactive stages —
+  commits 183a510, cab451f. This is the established, ACCEPTED visual language.
+- Remaining routes (`channels`, `voice`, `messages`, `moderation`,
+  `recordings`, `analysis`, `glossary`) have NOT received the tactical-HUD/GSAP
+  treatment — last touch was an error-handling/state pass (31e303c) or the
+  constellation revert (eda5c75).
+
+## Scope of THIS request
+User: "rombak fe dengan sekeren mungkin tapi tidak menyusahkan user, pewarnaan
+sesuai tidak berlebihan, pakai gsap, sekreatif mungkin."
+
+Read against the history above, this means: EXTEND the already-accepted
+tactical-HUD + GSAP + monochrome visual language to the remaining routes,
+adding creative micro-interactions and view-specific "reactive stage" touches
+— NOT a new structural/navigation metaphor, NOT a color explosion.
+
+## Hard constraints (do not violate)
+1. Keep the existing shell: top bar / nav rail / mobile bottom dock. No new
+   navigation metaphor.
+2. Monochrome/greyscale token system stays as-is (`--color-signal/amber/
+   vermilion` luminance greys). Do not introduce saturated colors; accent use
+   stays restrained (used sparingly for state: active/alert/success).
+3. GSAP via `@gsap/react` `useGSAP({ scope, dependencies })` + `clearProps` on
+   cleanup, per `dashboard-rombak/references/tactical-hud-gsap-pattern.md`.
+   Respect `prefers-reduced-motion` (extend the kill-list in globals.css for
+   any new `animate-*` class).
+4. Mobile lightness gate: any WebGL/heavy canvas work must gate off on
+   <768px / pointer:coarse / saveData / deviceMemory<=4 (see AmbientCanvas
+   pattern already in the codebase).
+5. Each route ships independently: edit → `pnpm format` → `npx @biomejs/biome
+   check --write` → `pnpm lint` (0 errors, 0 warnings) → `tsc --noEmit` →
+   `pnpm build` → commit (no Co-Authored-By trailer) → push → `gh run watch`
+   for Build & Deploy (Nix) → live verify via browser_vision on
+   imphnen.asepharyana.my.id/<route>/.
+6. NEVER claim "done" from reading code — every route gets a live screenshot
+   check confirming: (a) not a stock template, (b) monochrome/restrained,
+   (c) GSAP entrance/interaction actually fires, (d) nav/theme toggle/command
+   palette still work.
+
+## Per-route creative direction (reactive-stage motifs, one distinct idea per
+route so it doesn't feel copy-pasted from dashboard/media)
+- **channels**: node/roster telemetry — GSAP stagger-in channel cards with a
+  "signal strength" bar-fill tween keyed to activity; hover reveals HUD-style
+  meta readout.
+- **voice**: live speaker HUD — waveform/ring pulse tied to WS voice_state
+  (GSAP timeline looping while speaking, `clearProps` on stop); ambient tile
+  glow keyed to active speaker count.
+- **messages**: scan-line reveal on list mount + WS-driven "new message" slide
+  insert (respect existing sortMessages fix — do not reintroduce the race).
+- **moderation**: alert-priority HUD — flagged severity as inverted mono
+  badge with a pulse GSAP loop (no red, per accepted mono direction);
+  queue-clear micro celebration (subtle, no confetti-color).
+- **recordings**: waveform scrub deck echoing media's frequency-deck visual
+  language but for static recordings (progress-tied GSAP scrub, not looping).
+- **analysis**: gauge/metric reveal using the existing `radial-gauge.tsx`
+  driven by a GSAP number tween (count-up) instead of an instant value snap.
+- **glossary**: lightweight — accordion/definition reveal with GSAP height
+  auto + fade, kept minimal since it's low-traffic reference content.
+
+## Verification checklist (must pass before calling any route "shipped")
+- [ ] tsc --noEmit clean
+- [ ] biome check: 0 errors AND 0 warnings
+- [ ] next build succeeds
+- [ ] CI green (Build & Deploy (Nix))
+- [ ] Live screenshot: monochrome, GSAP motion visible, nav/theme/command
+      palette intact, not a stock template
+- [ ] Reduced-motion: new animate-* classes added to the kill-list
+- [ ] Mobile: WebGL/heavy work gated per existing pattern
+
+## Rollback plan
+Every route ships as its own atomic commit. If user rejects a specific route's
+direction, `git revert <that commit>` — do not touch unrelated routes.

services/frontend/package.json

@@ -10,29 +10,30 @@
     "format": "biome format --write"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.2",
     "@orpc/client": "1.15.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.27.0",
+    "gsap": "^3.15.0",
-    "motion": "^12.0.0",
+    "lucide-react": "^1.33.0",
-    "next": "16.2.12",
+    "next": "16.3.2",
     "next-themes": "^0.4.6",
     "partysocket": "1.3.0",
-    "react": "19.2.4",
+    "react": "19.2.8",
-    "react-dom": "19.2.4",
+    "react-dom": "19.2.8",
-    "swr": "^2.4.2",
+    "swr": "^2.5.1",
     "tailwind-merge": "^3.6.0",
-    "three": "^0.180.0"
+    "three": "^0.185.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.2.0",
+    "@biomejs/biome": "2.5.10",
     "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
+    "@types/node": "^26",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@types/three": "^0.180.0",
+    "@types/three": "^0.185.4",
     "babel-plugin-react-compiler": "1.0.0",
-    "puppeteer-core": "^25.7.0",
+    "puppeteer-core": "^25.8.0",
     "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^7"
   }
 }

services/frontend/src/app/(dashboard)/analysis/view.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import { Hash, Search, Sparkles, TrendingUp } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
 import { Avatar, Badge, GlassPanel, Input } from "@/components/primitives";
 import { EmptyState, SectionHeader, SkeletonRows } from "@/components/shared";
@@ -13,6 +15,10 @@ import {
   renderMessageContent,
 } from "@/lib/format";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 export function AnalysisView() {
   const [query, setQuery] = useState("");
   const search = useMessageSearch(query, query.trim().length >= 2);
@@ -20,6 +26,9 @@ export function AnalysisView() {
   const { data: channels } = useChannels();
   const ambient = useAmbient();
 
+  const reactorsRef = useRef<HTMLDivElement>(null);
+  const channelsRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     ambient.set(
       query ? "amber" : "signal",
@@ -28,8 +37,96 @@ export function AnalysisView() {
     );
   }, [query, ambient]);
 
+  // Count-up + bar-fill reveal for the reactor leaderboard — HUD gauge motif.
+  useGSAP(
+    () => {
+      if (!reactorsRef.current) return;
+      const bars = reactorsRef.current.querySelectorAll(".reactor-bar-fill");
+      const counters = reactorsRef.current.querySelectorAll(".reactor-count");
+      if (bars.length === 0) return;
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) {
+        gsap.set(bars, { scaleX: 1 });
+        return;
+      }
+      gsap.fromTo(
+        bars,
+        { scaleX: 0 },
+        {
+          scaleX: 1,
+          duration: 0.7,
+          stagger: 0.06,
+          ease: "power2.out",
+          transformOrigin: "left center",
+        },
+      );
+      counters.forEach((el) => {
+        const target = Number(el.getAttribute("data-target") ?? "0");
+        const obj = { val: 0 };
+        gsap.to(obj, {
+          val: target,
+          duration: 0.8,
+          ease: "power2.out",
+          onUpdate: () => {
+            el.textContent = `+${Math.round(obj.val)}`;
+          },
+        });
+      });
+    },
+    { scope: reactorsRef, dependencies: [reactors] },
+  );
+
+  useGSAP(
+    () => {
+      if (!channelsRef.current) return;
+      const rows = channelsRef.current.querySelectorAll(".channel-row");
+      if (rows.length === 0) return;
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) {
+        gsap.set(rows, { opacity: 1, x: 0 });
+        return;
+      }
+      gsap.fromTo(
+        rows,
+        { opacity: 0, x: -10 },
+        {
+          opacity: 1,
+          x: 0,
+          duration: 0.35,
+          stagger: 0.04,
+          ease: "power2.out",
+          clearProps: "transform",
+        },
+      );
+    },
+    { scope: channelsRef, dependencies: [channels] },
+  );
+
   return (
-    <div className="space-y-5">
+    <div className="space-y-4">
+      {/* Tactical HUD Header Bar */}
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
+        <div className="flex items-center gap-3">
+          <div className="relative flex size-3 items-center justify-center">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-signal" />
+          </div>
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+            ANALYSIS ENGINE · DEEP_SCAN
+          </h1>
+        </div>
+        <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+          <span className="text-ink-faint">MODE:</span>
+          <span className="font-bold text-signal">
+            {query.trim().length >= 2 ? "SEARCHING" : "IDLE"}
+          </span>
+        </div>
+      </div>
+
       <GlassPanel glow className="relative overflow-hidden">
         <div className="scan-line absolute inset-x-0 top-0" />
         <div className="flex items-center gap-3">
@@ -123,7 +220,7 @@ export function AnalysisView() {
                 </span>
               }
             />
-            <div className="space-y-2">
+            <div ref={reactorsRef} className="space-y-2">
               {(reactors ?? []).slice(0, 6).map((r, i) => {
                 const maxNet = reactors?.[0]?.net_count || 1;
                 const pct = Math.max(
@@ -141,12 +238,15 @@ export function AnalysisView() {
                     </span>
                     <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-white/8">
                       <div
-                        className="h-full rounded-full bg-signal/70"
+                        className="reactor-bar-fill h-full rounded-full bg-signal/70"
                         style={{ width: `${pct}%` }}
                       />
                     </div>
-                    <span className="mono w-12 text-right text-xs text-signal">
+                    <span
-                      +{r.net_count}
+                      className="reactor-count mono w-12 text-right text-xs text-signal"
+                      data-target={r.net_count}
+                    >
+                      +0
                     </span>
                   </div>
                 );
@@ -168,11 +268,11 @@ export function AnalysisView() {
                 </span>
               }
             />
-            <div className="space-y-2">
+            <div ref={channelsRef} className="space-y-2">
               {(channels ?? []).slice(0, 6).map((c) => (
                 <div
                   key={c.channel_id}
-                  className="flex items-center gap-3 text-sm"
+                  className="channel-row flex items-center gap-3 text-sm"
                 >
                   <span className="flex-1 truncate text-ink-soft">
                     {c.channel_name ?? c.channel_id.slice(0, 8)}

services/frontend/src/app/(dashboard)/channels/view.tsx

@@ -12,7 +12,23 @@ export function ChannelsView({
 }) {
   const { data: cultures } = useChannelCultures(100, initialCultures);
   return (
-    <div className="space-y-5">
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
+        <div className="flex items-center gap-3">
+          <div className="relative flex size-3 items-center justify-center">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-signal" />
+          </div>
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+            CHANNEL ROSTER · SIGNAL_MAP
+          </h1>
+        </div>
+        <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+          <span className="text-ink-faint">NODES:</span>
+          <span className="font-bold text-signal">{cultures?.length ?? 0}</span>
+        </div>
+      </div>
+
       {cultures ? (
         <ChannelCultureGlossary cultures={cultures} />
       ) : (

services/frontend/src/app/(dashboard)/dashboard/view.tsx

@@ -1,46 +1,49 @@
 "use client";
 
 import {
-  Activity,
+  AudioWaveform,
-  Flag,
+  ChevronRight,
+  Flame,
   MessageSquare,
   Mic,
-  Radio,
+  Shield,
   ShieldAlert,
+  Terminal,
   Users,
 } from "lucide-react";
+import Link from "next/link";
 import { useEffect } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
 import { AreaActivity, RadialGauge } from "@/components/charts";
 import { GlassPanel } from "@/components/primitives";
 import {
   ErrorState,
-  LoadingState,
+  PageTransition,
   SkeletonHero,
   SkeletonMetricRow,
   SkeletonPanel,
 } from "@/components/shared";
-import { MetricTile, SectionHeader } from "@/components/shared/section";
+import { useActivity, useStats, useTopReactions } from "@/hooks";
-import {
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
-  useActivity,
-  useStats,
-  useTopReactions,
-  useTopReactors,
-} from "@/hooks";
 import { formatNumber } from "@/lib/format";
 import type { DashboardStats } from "@/lib/types";
-import { staggerDelay } from "@/lib/utils";
 
 function deriveSignal(stats?: DashboardStats) {
-  if (!stats) return { tone: "signal" as const, label: "nominal" };
+  if (!stats)
+    return { tone: "signal" as const, label: "NOMINAL", state: "STABLE" };
   const total = stats.total_flagged + stats.total_clean || 1;
   const ratio = stats.total_flagged / total;
   if (stats.moderation_overview.error > 0)
-    return { tone: "vermilion" as const, label: "moderation fault" };
+    return { tone: "vermilion" as const, label: "FAULT", state: "MOD_ERR" };
   if (ratio > 0.25)
-    return { tone: "vermilion" as const, label: "elevated flags" };
+    return {
-  if (ratio > 0.1) return { tone: "amber" as const, label: "watch" };
+      tone: "vermilion" as const,
-  return { tone: "signal" as const, label: "nominal" };
+      label: "ELEVATED",
+      state: "HIGH_RISK",
+    };
+  if (ratio > 0.1)
+    return { tone: "amber" as const, label: "WATCH", state: "ADVISORY" };
+  return { tone: "signal" as const, label: "NOMINAL", state: "OPTIMAL" };
 }
 
 export function DashboardView({
@@ -57,10 +60,15 @@ export function DashboardView({
     mutate: mutateStats,
   } = useStats(initialStats);
   const { data: activity } = useActivity(14, initialActivity as never);
-  const { data: reactors } = useTopReactors();
   const { data: reactions } = useTopReactions();
   const ambient = useAmbient();
 
+  const hudRef = useStaggerReveal<HTMLDivElement>(".hud-tile", {
+    stagger: 0.05,
+    y: 16,
+    dependencies: [stats],
+  });
+
   useEffect(() => {
     const s = deriveSignal(stats);
     ambient.set(
@@ -78,16 +86,12 @@ export function DashboardView({
         <SkeletonHero />
         <SkeletonMetricRow cols={4} />
         <SkeletonPanel rows={5} />
-        <div className="grid gap-5 lg:grid-cols-5">
-          <SkeletonPanel className="lg:col-span-3" rows={4} />
-          <SkeletonPanel className="lg:col-span-2" rows={4} />
-        </div>
       </div>
     );
   if (!stats)
     return (
       <ErrorState
-        error={error ?? new Error("No data")}
+        error={error ?? new Error("No telemetry stream")}
         onRetry={() => void mutateStats()}
       />
     );
@@ -95,286 +99,278 @@ export function DashboardView({
   const s = stats;
   const total = s.total_flagged + s.total_clean || 1;
   const cleanRatio = s.total_clean / total;
+  const sig = deriveSignal(s);
 
   return (
-    <div className="space-y-5">
+    <PageTransition>
-      {/* Hero */}
+      <div ref={hudRef} className="space-y-4">
-      <GlassPanel glow className="game-frame relative overflow-hidden">
+        {/* Tactical HUD Header Bar */}
-        <div className="scan-line absolute inset-x-0 top-0" />
+        <div className="hud-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
-        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <div className="relative flex size-3 items-center justify-center">
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
+              <span className="relative inline-flex size-2 rounded-full bg-signal" />
+            </div>
+            <div className="flex items-baseline gap-2">
+              <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+                GMW TELEMETRY · MATRIX_01
+              </h1>
+              <span className="font-mono text-[10px] text-ink-faint">
+                [LIVE_MONITOR]
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+              <span className="text-ink-faint">SYS_STATUS:</span>
+              <span className="font-bold text-signal">{sig.state}</span>
+            </div>
+            <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+              <span className="text-ink-faint">VER:</span>
+              <span className="text-ink">v2.4-GSAP</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Spatial HUD Grid: Live Mission Control */}
+        <div className="grid gap-4 lg:grid-cols-12">
+          {/* Main Telemetry & Activity Area */}
+          <div className="space-y-4 lg:col-span-8">
+            {/* Primary Telemetry Cluster */}
+            <div className="hud-tile grid grid-cols-2 gap-2.5 sm:grid-cols-4">
+              <div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
+                <div className="flex items-center justify-between text-ink-faint">
+                  <span className="font-mono text-[10px] tracking-wider uppercase">
+                    Messages
+                  </span>
+                  <MessageSquare className="size-3.5 text-signal" />
+                </div>
+                <div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
+                  {formatNumber(s.total_messages)}
+                </div>
+                <div className="mt-1 flex items-center gap-1 font-mono text-[10px] text-ink-faint">
+                  <span className="text-signal">↑ live</span> ingest
+                </div>
+              </div>
+
+              <div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
+                <div className="flex items-center justify-between text-ink-faint">
+                  <span className="font-mono text-[10px] tracking-wider uppercase">
+                    Flagged
+                  </span>
+                  <ShieldAlert className="size-3.5 text-vermilion" />
+                </div>
+                <div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
+                  {formatNumber(s.total_flagged)}
+                </div>
+                <div className="mt-1 font-mono text-[10px] text-ink-faint">
+                  <span className="text-vermilion">{s.today_flagged}</span>{" "}
+                  today
+                </div>
+              </div>
+
+              <div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
+                <div className="flex items-center justify-between text-ink-faint">
+                  <span className="font-mono text-[10px] tracking-wider uppercase">
+                    Active 24h
+                  </span>
+                  <Users className="size-3.5 text-signal" />
+                </div>
+                <div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
+                  {formatNumber(s.active_users_24h)}
+                </div>
+                <div className="mt-1 font-mono text-[10px] text-ink-faint">
+                  <span>unique accounts</span>
+                </div>
+              </div>
+
+              <div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
+                <div className="flex items-center justify-between text-ink-faint">
+                  <span className="font-mono text-[10px] tracking-wider uppercase">
+                    Voice Captures
+                  </span>
+                  <Mic className="size-3.5 text-signal" />
+                </div>
+                <div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
+                  {formatNumber(s.total_voice_recordings)}
+                </div>
+                <div className="mt-1 font-mono text-[10px] text-ink-faint">
+                  <span>audio buffers</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Activity Waveform / Time Series */}
+            <GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
+              <div className="mb-4 flex items-center justify-between">
                 <div>
-            <div className="eyebrow mb-2">GMW · Operations Grid</div>
+                  <div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
-            <h2 className="display hero-clamp leading-none text-ink glow-signal">
+                    CHRONO TELEMETRY (14D)
-              Ambient Field
-            </h2>
-            <p className="mt-2 max-w-md text-pretty text-sm text-ink-soft">
-              Real-time moderation, voice & media presence across the monitored
-              guild. {formatNumber(s.total_messages)} messages captured.
-            </p>
                   </div>
-          <div className="flex items-center gap-2 text-ink-soft">
+                  <div className="text-sm font-medium text-ink">
-            <Radio className="size-4 text-signal animate-breathe" />
+                    Message & Activity Stream
-            <span className="mono text-xs uppercase tracking-wider">
-              {deriveSignal(s).label}
-            </span>
                   </div>
                 </div>
-
+                <div className="flex items-center gap-3 font-mono text-[11px]">
-        <div className="mt-5 grid grid-cols-2 gap-3 md:grid-cols-4">
+                  <div className="flex items-center gap-1 text-ink-soft">
-          <MetricTile
+                    <span className="size-2 rounded-full bg-signal" />
-            label="Messages"
+                    <span>Activity Trend</span>
-            value={formatNumber(s.total_messages)}
-            tone="signal"
-            icon={<MessageSquare className="size-3.5" />}
-            className="animate-stagger"
-            style={staggerDelay(0)}
-          />
-          <MetricTile
-            label="Flagged"
-            value={formatNumber(s.total_flagged)}
-            tone={s.total_flagged > 0 ? "vermilion" : "neutral"}
-            hint={`${s.today_flagged} today`}
-            className="animate-stagger"
-            style={staggerDelay(1)}
-          />
-          <MetricTile
-            label="Active 24h"
-            value={formatNumber(s.active_users_24h)}
-            tone="signal"
-            icon={<Users className="size-3.5" />}
-            className="animate-stagger"
-            style={staggerDelay(2)}
-          />
-          <MetricTile
-            label="Voice clips"
-            value={formatNumber(s.total_voice_recordings)}
-            icon={<Mic className="size-3.5" />}
-            className="animate-stagger"
-            style={staggerDelay(3)}
-          />
                   </div>
-      </GlassPanel>
-
-      {/* Activity */}
-      <GlassPanel>
-        <SectionHeader
-          eyebrow="14-day signal"
-          title={
-            <span className="flex items-center gap-2">
-              <Activity className="size-4 text-signal" /> Activity & moderation
-            </span>
-          }
-          action={
-            <div className="flex items-center gap-3 text-xs text-ink-soft">
-              <span className="flex items-center gap-1.5">
-                <span className="size-2 rounded-full bg-signal" /> messages
-              </span>
-              <span className="flex items-center gap-1.5">
-                <span className="size-2 rounded-full bg-vermilion" /> flagged
-              </span>
                 </div>
-          }
+              </div>
-        />
+              <div className="h-56 w-full">
-        {activity ? (
+                {activity?.daily ? (
                   <AreaActivity daily={activity.daily} />
                 ) : (
-          <LoadingState label="streaming" />
+                  <div className="flex h-full items-center justify-center font-mono text-xs text-ink-faint">
+                    ACQUIRING SIGNAL...
+                  </div>
                 )}
-      </GlassPanel>
-
-      {/* Two-column: channels + moderation */}
-      <div className="grid gap-5 lg:grid-cols-5">
-        <GlassPanel className="lg:col-span-3">
-          <SectionHeader eyebrow="throughput" title="Top channels" />
-          <div className="space-y-2.5">
-            {s.top_channels.slice(0, 7).map((c) => {
-              const pct =
-                (c.message_count / (s.top_channels[0]?.message_count || 1)) *
-                100;
-              return (
-                <div key={c.channel_id} className="flex items-center gap-3">
-                  <span className="w-28 shrink-0 truncate text-sm text-ink-soft sm:w-40">
-                    {c.channel_name ?? c.channel_id.slice(0, 8)}
-                  </span>
-                  <div className="h-2 flex-1 overflow-hidden rounded-full bg-white/8">
-                    <div
-                      className="h-full rounded-full bg-signal/70"
-                      style={{ width: `${pct}%` }}
-                    />
-                  </div>
-                  <span className="mono w-14 text-right text-xs text-ink-faint">
-                    {formatNumber(c.message_count)}
-                  </span>
-                </div>
-              );
-            })}
               </div>
             </GlassPanel>
 
-        <GlassPanel className="lg:col-span-2">
+            {/* Quick Tactical Links */}
-          <SectionHeader eyebrow="trust" title="Moderation" />
+            <div className="hud-tile grid grid-cols-1 gap-2.5 sm:grid-cols-3">
-          <div className="flex items-center gap-5">
+              <Link
-            <RadialGauge
+                href="/voice"
-              value={cleanRatio}
+                className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
-              tone={
-                cleanRatio > 0.8
-                  ? "signal"
-                  : cleanRatio > 0.6
-                    ? "amber"
-                    : "vermilion"
-              }
-              label={`${Math.round(cleanRatio * 100)}%`}
-              sublabel="clean"
-            />
-            <div className="flex-1 space-y-2 text-sm">
-              <Row
-                icon={<ShieldAlert className="size-4 text-signal" />}
-                label="Clean"
-                value={formatNumber(s.total_clean)}
-              />
-              <Row
-                icon={<Flag className="size-4 text-vermilion" />}
-                label="Flagged"
-                value={formatNumber(s.total_flagged)}
-              />
-              <Row
-                icon={<Activity className="size-4 text-amber" />}
-                label="Warned"
-                value={formatNumber(s.total_warned)}
-              />
-            </div>
-          </div>
-          <div className="mt-4 flex items-center justify-around border-t border-hairline pt-3 text-center">
-            <Mini
-              label="pending"
-              value={s.moderation_overview.pending}
-              tone="amber"
-            />
-            <Mini
-              label="processing"
-              value={s.moderation_overview.processing}
-              tone="signal"
-            />
-            <Mini
-              label="errors"
-              value={s.moderation_overview.error}
-              tone="vermilion"
-            />
-          </div>
-        </GlassPanel>
-      </div>
-
-      {/* Reactors + reactions */}
-      <div className="grid gap-5 lg:grid-cols-2">
-        <GlassPanel>
-          <SectionHeader eyebrow="engagement" title="Top reactors" />
-          <div className="space-y-2">
-            {(reactors ?? []).slice(0, 6).map((r, i) => {
-              const maxNet = reactors?.[0]?.net_count || 1;
-              const pct = Math.max(4, Math.round((r.net_count / maxNet) * 100));
-              return (
-                <div key={r.user_id} className="flex items-center gap-3">
-                  <span className="mono w-5 text-ink-faint">{i + 1}</span>
-                  <span className="w-28 shrink-0 truncate text-sm text-ink-soft sm:w-40">
-                    {r.username}
-                  </span>
-                  <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-white/8">
-                    <div
-                      className="h-full rounded-full bg-signal/70"
-                      style={{ width: `${pct}%` }}
-                    />
-                  </div>
-                  <span className="mono w-12 text-right text-xs text-signal">
-                    +{formatNumber(r.net_count)}
-                  </span>
-                </div>
-              );
-            })}
-            {(reactors ?? []).length === 0 && <EmptyHint />}
-          </div>
-        </GlassPanel>
-
-        <GlassPanel>
-          <SectionHeader eyebrow="culture" title="Top reactions" />
-          <div className="space-y-3">
-            {(reactions ?? []).slice(0, 5).map((m) => (
-              <div key={m.message_id} className="flex items-start gap-3">
-                <div className="flex flex-wrap gap-1 pt-0.5">
-                  {m.top_emojis.slice(0, 3).map((e, i) => (
-                    <span
-                      key={`${m.message_id}-${i}`}
-                      className="text-lg leading-none"
               >
-                      {e.emoji}
+                <div className="flex items-center gap-2.5">
-                    </span>
+                  <div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
-                  ))}
+                    <AudioWaveform className="size-4" />
                   </div>
-                <div className="min-w-0 flex-1">
+                  <div>
-                  <div className="truncate text-sm text-ink">
+                    <div className="font-mono text-xs font-semibold text-ink">
-                    {m.content || "(no text)"}
+                      Voice Matrix
                     </div>
-                  <div className="mono text-[0.65rem] text-ink-faint">
+                    <div className="text-[11px] text-ink-faint">
-                    {m.username} · {m.channel_name ?? m.channel_id.slice(0, 8)}
+                      Realtime speaker stream
                     </div>
                   </div>
-                <span className="mono text-xs text-ink-soft">
+                </div>
-                  {m.reaction_count}
+                <ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
+              </Link>
+
+              <Link
+                href="/messages"
+                className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
+              >
+                <div className="flex items-center gap-2.5">
+                  <div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
+                    <Terminal className="size-4" />
+                  </div>
+                  <div>
+                    <div className="font-mono text-xs font-semibold text-ink">
+                      Chat Log Stream
+                    </div>
+                    <div className="text-[11px] text-ink-faint">
+                      Live telemetry feed
+                    </div>
+                  </div>
+                </div>
+                <ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
+              </Link>
+
+              <Link
+                href="/moderation"
+                className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
+              >
+                <div className="flex items-center gap-2.5">
+                  <div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
+                    <Shield className="size-4" />
+                  </div>
+                  <div>
+                    <div className="font-mono text-xs font-semibold text-ink">
+                      Auto-Mod Radar
+                    </div>
+                    <div className="text-[11px] text-ink-faint">
+                      Classification & audits
+                    </div>
+                  </div>
+                </div>
+                <ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
+              </Link>
+            </div>
+          </div>
+
+          {/* Side Telemetry Panel: Health, Dials, & Nodes */}
+          <div className="space-y-4 lg:col-span-4">
+            {/* Safety & Moderation Integrity Gauge */}
+            <GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
+              <div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
+                INTEGRITY MATRIX
+              </div>
+              <div className="mt-1 text-sm font-medium text-ink">
+                Clean Stream Ratio
+              </div>
+              <div className="my-4 flex items-center justify-center">
+                <RadialGauge
+                  value={Math.round(cleanRatio * 100)}
+                  size={140}
+                  tone={cleanRatio > 0.9 ? "signal" : "amber"}
+                  label={`${Math.round(cleanRatio * 100)}%`}
+                  sublabel="CLEAN RATIO"
+                />
+              </div>
+              <div className="space-y-2 border-t border-hairline pt-3 font-mono text-xs">
+                <div className="flex justify-between">
+                  <span className="text-ink-faint">Clean Messages:</span>
+                  <span className="font-medium text-ink">
+                    {formatNumber(s.total_clean)}
                   </span>
                 </div>
-            ))}
+                <div className="flex justify-between">
-            {(reactions ?? []).length === 0 && <EmptyHint />}
+                  <span className="text-ink-faint">Pending Flags:</span>
+                  <span className="font-medium text-vermilion">
+                    {formatNumber(s.total_flagged)}
+                  </span>
+                </div>
+              </div>
+            </GlassPanel>
+
+            {/* Top Reacted Messages / Emitters */}
+            <GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
+                    FREQUENT EMITTERS
+                  </div>
+                  <div className="text-sm font-medium text-ink">
+                    Top Reacted Messages
+                  </div>
+                </div>
+                <Flame className="size-4 text-amber" />
+              </div>
+
+              <div className="mt-3 space-y-2">
+                {reactions && reactions.length > 0 ? (
+                  reactions.slice(0, 4).map((r) => (
+                    <div
+                      key={r.message_id}
+                      className="flex items-center justify-between rounded bg-surface/30 px-2.5 py-1.5 font-mono text-xs"
+                    >
+                      <span className="max-w-[150px] truncate text-ink-soft">
+                        {r.username ? `@${r.username}` : "anonymous"}
+                      </span>
+                      <div className="flex items-center gap-2">
+                        <span className="text-ink-faint">reacts:</span>
+                        <span className="font-bold text-signal">
+                          {r.reaction_count}
+                        </span>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="py-4 text-center font-mono text-xs text-ink-faint">
+                    NO EMITTER TELEMETRY
+                  </div>
+                )}
               </div>
             </GlassPanel>
           </div>
         </div>
-  );
-}
-
-function Row({
-  icon,
-  label,
-  value,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  value: string;
-}) {
-  return (
-    <div className="flex items-center gap-2.5">
-      {icon}
-      <span className="flex-1 text-ink-soft">{label}</span>
-      <span className="mono text-ink">{value}</span>
-    </div>
-  );
-}
-
-function Mini({
-  label,
-  value,
-  tone,
-}: {
-  label: string;
-  value: number;
-  tone: "signal" | "amber" | "vermilion";
-}) {
-  const color =
-    tone === "vermilion"
-      ? "text-vermilion"
-      : tone === "amber"
-        ? "text-amber"
-        : "text-signal";
-  return (
-    <div>
-      <div className={`display text-xl ${color}`}>{value}</div>
-      <div className="eyebrow mt-0.5">{label}</div>
-    </div>
-  );
-}
-
-function EmptyHint() {
-  return (
-    <div className="py-6 text-center text-xs text-ink-faint">
-      Awaiting data…
       </div>
+    </PageTransition>
   );
 }

services/frontend/src/app/(dashboard)/media/view.tsx

@@ -1,20 +1,21 @@
 "use client";
 
 import {
+  Disc,
   ListMusic,
   Play,
-  Radio,
   Repeat,
   SkipForward,
+  Sliders,
   Square,
-  Volume2,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
+import { Equalizer } from "@/components/charts";
 import { Button, GlassPanel, Input, toast } from "@/components/primitives";
 import {
   ErrorState,
-  SectionHeader,
+  PageTransition,
   SkeletonHero,
   SkeletonPanel,
 } from "@/components/shared";
@@ -26,9 +27,9 @@ import {
   useMediaStop,
   useMediaWsSync,
 } from "@/hooks";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { formatDuration } from "@/lib/format";
 import type { MediaState } from "@/lib/types";
-import { staggerDelay } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
@@ -56,6 +57,12 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
     0,
   );
 
+  const mediaRef = useStaggerReveal<HTMLDivElement>(".media-tile", {
+    stagger: 0.06,
+    y: 16,
+    dependencies: [playing, queueList.length],
+  });
+
   const tone = playing ? "signal" : queueList.length ? "amber" : "signal";
   useEffect(() => {
     ambient.set(
@@ -74,7 +81,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
     try {
       await queue.mutateAsync({ url: u, mode: "music" });
       setUrl("");
-      toast({ title: "Queued", tone: "signal" });
+      toast({ title: "Queued track", tone: "signal" });
     } catch (e) {
       toast({
         title: "Queue failed",
@@ -94,206 +101,201 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
       </div>
     );
 
+  const mockLevels = playing
+    ? [0.4, 0.7, 0.9, 0.6, 0.8, 0.5, 0.9, 0.7, 0.4, 0.8, 0.6, 0.9]
+    : [0.1, 0.1, 0.1, 0.1, 0.1, 0.1];
+
   return (
-    <div className="space-y-5">
+    <PageTransition>
-      <GlassPanel glow className="relative overflow-hidden">
+      <div ref={mediaRef} className="space-y-5">
-        <div className="scan-line absolute inset-x-0 top-0" />
+        {/* Top Media Matrix Stage */}
-        <div className="flex flex-col gap-5 sm:flex-row sm:items-center">
+        <div className="media-tile relative overflow-hidden rounded-xl border border-hairline/80 bg-surface/40 p-6 shadow-2xl backdrop-blur-xl">
-          <div
+          {/* Spatial Grid Header */}
-            className={`flex size-32 shrink-0 items-center justify-center rounded-full border border-hairline bg-gradient-to-br from-white/10 to-white/[0.02] ${playing ? "animate-spin-disc" : "animate-spin-disc paused"}`}
+          <div className="flex flex-wrap items-center justify-between gap-4 border-b border-hairline/60 pb-4">
+            <div className="flex items-center gap-3">
+              <div className="flex size-9 items-center justify-center rounded-lg bg-canvas-2 border border-hairline text-signal shadow-inner">
+                <Disc
+                  className={`size-5 ${playing ? "animate-spin-disc text-signal" : "text-ink-faint"}`}
+                />
+              </div>
+              <div>
+                <h1 className="font-mono text-sm font-bold tracking-widest text-ink uppercase">
+                  MEDIA FREQUENCY DECK
+                </h1>
+                <div className="font-mono text-[11px] text-ink-faint">
+                  {playing
+                    ? "STREAM_ACTIVE · 48KHZ STEREO"
+                    : "DECK_IDLE · STANDBY"}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span
+                className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 font-mono text-xs font-semibold ${playing ? "bg-signal/10 text-signal border border-signal/30" : "bg-surface text-ink-faint border border-hairline"}`}
               >
-            <div className="flex size-28 items-center justify-center overflow-hidden rounded-full bg-canvas/60">
+                <span
+                  className={`size-1.5 rounded-full ${playing ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
+                />
+                {playing ? "TRANSMITTING" : "STANDBY"}
+              </span>
+            </div>
+          </div>
+
+          {/* Player Core View */}
+          <div className="mt-6 grid gap-6 lg:grid-cols-12 items-center">
+            {/* Vinyl & Visualizer Stage */}
+            <div className="lg:col-span-5 flex flex-col items-center justify-center">
+              <div className="relative flex size-44 items-center justify-center rounded-full border-2 border-dashed border-hairline/60 bg-canvas-2 shadow-2xl">
+                <div
+                  className={`absolute inset-2 rounded-full border border-hairline/30 ${playing ? "animate-spin-disc" : ""}`}
+                />
                 {current?.thumbnailUrl ? (
-                // biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
+                  <div
-                <img
+                    className="size-32 rounded-full bg-cover bg-center border-2 border-hairline/80 shadow-lg"
-                  src={current.thumbnailUrl}
+                    style={{ backgroundImage: `url(${current.thumbnailUrl})` }}
-                  alt=""
-                  className="size-full object-cover"
-                  loading="lazy"
                   />
                 ) : (
-                <ListMusic className="size-10 text-signal" />
+                  <div className="flex size-32 items-center justify-center rounded-full bg-surface border border-hairline">
+                    <ListMusic className="size-12 text-ink-faint" />
+                  </div>
+                )}
+                {playing && (
+                  <div className="absolute -inset-2 rounded-full ring-2 ring-signal/40 animate-pulse-ring pointer-events-none" />
                 )}
               </div>
             </div>
 
-          <div className="min-w-0 flex-1">
+            {/* Current Track Telemetry & Controls */}
-            <div className="eyebrow mb-1 flex items-center gap-2">
+            <div className="lg:col-span-7 space-y-4">
-              {playing ? (
+              <div>
-                <>
+                <div className="font-mono text-[10px] font-bold tracking-widest text-signal uppercase">
-                  <span aria-hidden className="flex h-3 items-end gap-[2px]">
+                  {current ? "CURRENT TRANSMISSION" : "DECK UNLOADED"}
-                    {[0, 1, 2].map((i) => (
-                      <span
-                        key={`eq-${i}`}
-                        className="w-[3px] animate-eq rounded-full bg-signal"
-                        style={{
-                          animationDelay: `${i * 160}ms`,
-                          height: "100%",
-                        }}
-                      />
-                    ))}
-                  </span>
-                  <span className="text-signal">Now playing</span>
-                </>
-              ) : current ? (
-                "Paused"
-              ) : (
-                "Nothing queued"
-              )}
                 </div>
-            <h2 className="display text-balance text-2xl text-ink">
+                <h2 className="text-xl font-bold text-ink mt-1 truncate">
-              {current?.title ?? "Nothing queued"}
+                  {current?.title ?? "No active stream"}
                 </h2>
-            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-ink-faint">
+                <div className="font-mono text-xs text-ink-soft mt-1">
-              {current?.source && (
+                  {current?.source
-                <span className="mono truncate">{current.source}</span>
+                    ? `Source: ${current.source}`
-              )}
+                    : "Queue a URL below to broadcast"}
-              {current?.mode && (
-                <span className="pill capitalize">{current.mode}</span>
-              )}
-              {formatDuration(current?.durationMs) && (
-                <span className="mono">
-                  {formatDuration(current?.durationMs)}
-                </span>
-              )}
                 </div>
-            <div className="mt-4 flex flex-wrap items-center gap-2">
+              </div>
+
+              {/* Realtime Equalizer preview */}
+              <div className="h-12 w-full rounded-md border border-hairline bg-canvas-2/50 p-2">
+                <Equalizer
+                  bars={mockLevels}
+                  color={
+                    playing ? "var(--color-signal)" : "var(--color-ink-faint)"
+                  }
+                />
+              </div>
+
+              {/* Interactive Playback Toolbar */}
+              <div className="flex flex-wrap items-center gap-2.5 pt-2">
                 <Button
                   variant="primary"
-                size="sm"
+                  onClick={() => stop.mutateAsync()}
-                onClick={onPlay}
+                  disabled={!playing || stop.isPending}
-                disabled={queue.isPending}
+                  className="font-mono text-xs font-bold"
                 >
-                <Play className="size-4" /> Queue & play
+                  <Square className="mr-1.5 size-3.5" /> STOP
                 </Button>
+
                 <Button
                   variant="outline"
-                size="sm"
+                  onClick={() => skip.mutateAsync()}
-                onClick={() => skip.mutate()}
+                  disabled={!playing || skip.isPending}
-                disabled={skip.isPending}
+                  className="font-mono text-xs font-bold"
                 >
-                <SkipForward className="size-4" /> Skip
+                  <SkipForward className="mr-1.5 size-3.5" /> SKIP
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => stop.mutate()}
-                disabled={stop.isPending}
-              >
-                <Square className="size-4" /> Stop
                 </Button>
+
                 <Button
                   variant={media?.loop ? "primary" : "outline"}
-                size="sm"
+                  onClick={() => loop.mutateAsync(!media?.loop)}
-                onClick={() => loop.mutate(!media?.loop)}
+                  disabled={loop.isPending}
-                aria-pressed={!!media?.loop}
+                  className="font-mono text-xs font-bold"
                 >
-                <Repeat className="size-4" /> Loop
+                  <Repeat className="mr-1.5 size-3.5" /> LOOP{" "}
+                  {media?.loop ? "ON" : "OFF"}
                 </Button>
               </div>
             </div>
           </div>
+        </div>
 
-        <div className="mt-5 flex flex-wrap items-center gap-3">
+        {/* Ingest & Queue Spatial Deck */}
-          <div className="relative min-w-0 flex-1">
+        <div className="grid gap-5 lg:grid-cols-12">
+          {/* URL Ingest Box */}
+          <div className="media-tile lg:col-span-5 space-y-4">
+            <GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl">
+              <div className="font-mono text-xs font-bold tracking-wider text-ink uppercase mb-3 flex items-center justify-between">
+                <span>INJECT AUDIO STREAM</span>
+                <Sliders className="size-4 text-signal" />
+              </div>
+              <div className="space-y-3">
                 <Input
-              placeholder="Paste a YouTube / music URL…"
                   value={url}
                   onChange={(e) => setUrl(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && onPlay()}
+                  placeholder="Paste YouTube or Audio URL..."
+                  className="font-mono text-xs"
                 />
-          </div>
+                <Button
-          <div className="flex shrink-0 items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-2.5">
+                  variant="primary"
-            <Volume2 className="size-4 text-ink-faint" />
+                  onClick={onPlay}
-            <div className="h-1.5 w-24 overflow-hidden rounded-full bg-white/10">
+                  disabled={queue.isPending || !url.trim()}
-              <div
+                  className="w-full font-mono text-xs font-bold py-2.5"
-                className="h-full rounded-full bg-signal/70"
-                style={{
-                  width: `${Math.round((media?.musicVolume ?? 0) * 100)}%`,
-                }}
-              />
-            </div>
-            <span className="mono w-9 text-right text-[0.65rem] text-ink-faint">
-              {Math.round((media?.musicVolume ?? 0) * 100)}%
-            </span>
-          </div>
-        </div>
-      </GlassPanel>
-
-      <GlassPanel>
-        <SectionHeader
-          eyebrow="up next"
-          title="Queue"
-          action={
-            <span className="mono text-xs text-ink-faint">
-              {queueList.length} track{queueList.length === 1 ? "" : "s"}
-              {queueTotal && ` · ${formatDuration(queueTotal)}`}
-            </span>
-          }
-        />
-        {queueList.length === 0 ? (
-          <div className="flex flex-col items-center gap-2 py-10 text-center">
-            <Radio className="size-6 text-ink-faint" />
-            <div className="text-sm text-ink-soft">Queue is empty</div>
-            <div className="text-xs text-ink-faint">
-              Paste a URL above to start playback.
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {queueList.map((item, i) => {
-              const isNext = i === 0 && playing;
-              return (
-                <div
-                  key={`${item.source}-${i}`}
-                  className={`animate-stagger flex items-center gap-3 rounded-[10px] border px-3 py-2.5 ${
-                    isNext
-                      ? "border-signal/40 bg-signal/[0.07]"
-                      : "border-hairline bg-white/5"
-                  }`}
-                  style={staggerDelay(i)}
                 >
-                  <span className="mono w-5 text-ink-faint">{i + 1}</span>
+                  <Play className="mr-1.5 size-4" /> BROADCAST STREAM
-                  {item.thumbnailUrl ? (
+                </Button>
-                    // biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
-                    <img
-                      src={item.thumbnailUrl}
-                      alt=""
-                      className="size-9 shrink-0 rounded-md object-cover"
-                      loading="lazy"
-                    />
-                  ) : (
-                    <span className="flex size-9 shrink-0 items-center justify-center rounded-md border border-hairline bg-white/5">
-                      <ListMusic className="size-4 text-ink-faint" />
-                    </span>
-                  )}
-                  <div className="min-w-0 flex-1">
-                    <div className="truncate text-sm text-ink">
-                      {item.title}
               </div>
-                    <div className="mono truncate text-[0.65rem] text-ink-faint">
-                      {item.source}
-                    </div>
-                  </div>
-                  {isNext && (
-                    <span className="inline-flex shrink-0 items-center gap-1 rounded-full border border-signal/40 bg-signal/10 px-2 py-0.5 text-[0.6rem] font-medium text-signal">
-                      up next
-                    </span>
-                  )}
-                  <span className="pill hidden capitalize sm:inline-flex">
-                    {item.mode ?? "music"}
-                  </span>
-                  {formatDuration(item.durationMs) && (
-                    <span className="mono w-10 text-right text-[0.65rem] text-ink-faint">
-                      {formatDuration(item.durationMs)}
-                    </span>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        )}
             </GlassPanel>
           </div>
+
+          {/* Queue List Stage */}
+          <div className="media-tile lg:col-span-7">
+            <GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl">
+              <div className="flex items-center justify-between border-b border-hairline/60 pb-3 mb-3">
+                <div className="font-mono text-xs font-bold tracking-wider text-ink uppercase">
+                  QUEUE STACK ({queueList.length})
+                </div>
+                <div className="font-mono text-[11px] text-ink-faint">
+                  Total: {formatDuration(queueTotal)}
+                </div>
+              </div>
+
+              <div className="space-y-2 max-h-64 overflow-y-auto pr-1">
+                {queueList.length > 0 ? (
+                  queueList.map((item, idx) => (
+                    <div
+                      key={item.id ?? idx}
+                      className="flex items-center justify-between rounded-lg border border-hairline bg-surface/30 p-2.5 font-mono text-xs transition hover:border-signal/40"
+                    >
+                      <div className="flex items-center gap-2.5 min-w-0">
+                        <span className="text-ink-faint font-bold">
+                          {idx + 1}.
+                        </span>
+                        <span className="truncate text-ink font-medium">
+                          {item.title ?? "Unknown Track"}
+                        </span>
+                      </div>
+                      <span className="text-ink-faint text-[11px] shrink-0 ml-2">
+                        {formatDuration(item.durationMs ?? 0)}
+                      </span>
+                    </div>
+                  ))
+                ) : (
+                  <div className="py-8 text-center font-mono text-xs text-ink-faint">
+                    NO QUEUED AUDIO IN BUFFER
+                  </div>
+                )}
+              </div>
+            </GlassPanel>
+          </div>
+        </div>
+      </div>
+    </PageTransition>
   );
 }

services/frontend/src/app/(dashboard)/messages/view.tsx

@@ -219,6 +219,25 @@ export function MessagesView({
 
   return (
     <div className="space-y-4">
+      {/* Tactical HUD Header Bar */}
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
+        <div className="flex items-center gap-3">
+          <div className="relative flex size-3 items-center justify-center">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-signal" />
+          </div>
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+            CHAT LOG STREAM · SCAN_01
+          </h1>
+        </div>
+        <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+          <span className="text-ink-faint">FEED:</span>
+          <span className="font-bold text-signal">
+            {searching ? "SEARCH" : viewMode.toUpperCase()}
+          </span>
+        </div>
+      </div>
+
       <GlassPanel className="flex flex-wrap items-center gap-3">
         <GuildChannelPicker
           mode="text"
@@ -372,7 +391,7 @@ export function MessagesView({
               )}
               <div
                 ref={scrollRef}
-                className="max-h-[60vh] space-y-1.5 overflow-y-auto pr-1"
+                className="scan-line max-h-[60vh] space-y-1.5 overflow-y-auto pr-1"
                 onScroll={(e) => {
                   const el = e.currentTarget;
                   // Track whether the user is near the bottom (to follow live

services/frontend/src/app/(dashboard)/moderation/view.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import {
   AlertTriangle,
   Ban,
@@ -13,7 +15,7 @@ import {
   UserX,
   XCircle,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
 import { CategoryDrilldown } from "@/components/CategoryDrilldown";
 import { CoverageTiles } from "@/components/CoverageTiles";
@@ -58,6 +60,10 @@ import type {
 } from "@/lib/types";
 import { staggerDelay } from "@/lib/utils";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 const ACTION_ICON: Record<ModerationActionType, React.ReactNode> = {
   delete_message: <Trash2 className="size-3.5" />,
   mute_user: <MicOff className="size-3.5" />,
@@ -127,6 +133,32 @@ export function ModerationView({
     );
   }, [failedRate, ambient]);
 
+  // Alert-priority HUD: a GSAP pulse loop on the inverted mono badge when
+  // there is anything pending review — cleared up when the queue empties.
+  const alertRef = useRef<HTMLDivElement>(null);
+  const pendingCount = stats?.pending ?? 0;
+  useGSAP(
+    () => {
+      if (!alertRef.current || pendingCount <= 0) return;
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) return;
+      const tl = gsap.timeline({ repeat: -1, yoyo: true });
+      tl.to(alertRef.current, {
+        opacity: 0.45,
+        duration: 0.7,
+        ease: "sine.inOut",
+      });
+      return () => {
+        tl.kill();
+        if (alertRef.current)
+          gsap.set(alertRef.current, { clearProps: "opacity" });
+      };
+    },
+    { scope: alertRef, dependencies: [pendingCount] },
+  );
+
   if (error && !stats)
     return <ErrorState error={error} onRetry={() => void mutateStats()} />;
   if (!stats && isLoading)
@@ -160,7 +192,39 @@ export function ModerationView({
   ];
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-4">
+      {/* Alert-priority HUD header */}
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
+        <div className="flex items-center gap-3">
+          <div className="relative flex size-3 items-center justify-center">
+            <span
+              className={`absolute inline-flex size-full rounded-full opacity-75 ${
+                pendingCount > 0 ? "animate-ping bg-ink" : "bg-signal"
+              }`}
+            />
+            <span
+              className={`relative inline-flex size-2 rounded-full ${
+                pendingCount > 0 ? "bg-ink" : "bg-signal"
+              }`}
+            />
+          </div>
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+            AUTO-MOD RADAR · ALERT_QUEUE
+          </h1>
+        </div>
+        <div
+          ref={alertRef}
+          className={`inline-flex items-center gap-1.5 rounded-sm px-2 py-0.5 font-mono text-[11px] font-bold uppercase ${
+            pendingCount > 0
+              ? "border border-ink bg-ink text-canvas"
+              : "bg-surface text-ink-soft"
+          }`}
+        >
+          <span>{pendingCount > 0 ? "PENDING" : "QUEUE CLEAR"}</span>
+          {pendingCount > 0 && <span>· {pendingCount}</span>}
+        </div>
+      </div>
+
       <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
         <MetricTile
           label="Total actions"

services/frontend/src/app/(dashboard)/recordings/view.tsx

@@ -22,9 +22,9 @@ import {
   useRecordings,
   useRecordingsWsSync,
 } from "@/hooks";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { formatBytes, formatRelativeTime } from "@/lib/format";
 import type { VoiceRecording } from "@/lib/types";
-import { staggerDelay } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function RecordingsView({
@@ -39,6 +39,12 @@ export function RecordingsView({
   const ambient = useAmbient();
   const [playingId, setPlayingId] = useState<string | null>(null);
 
+  const deckRef = useStaggerReveal<HTMLDivElement>(".recording-deck-card", {
+    stagger: 0.05,
+    y: 14,
+    dependencies: [items],
+  });
+
   useEffect(() => {
     ambient.set("signal", 0.3, "recordings");
   }, [ambient]);
@@ -83,6 +89,24 @@ export function RecordingsView({
     );
 
   return (
+    <div className="space-y-4">
+      {/* Tactical HUD Header Bar */}
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
+        <div className="flex items-center gap-3">
+          <div className="relative flex size-3 items-center justify-center">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-signal" />
+          </div>
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+            RECORDINGS · TAPE_DECK
+          </h1>
+        </div>
+        <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+          <span className="text-ink-faint">CLIPS:</span>
+          <span className="font-bold text-signal">{(items ?? []).length}</span>
+        </div>
+      </div>
+
       <GlassPanel>
         <SectionHeader
           eyebrow="voice captures"
@@ -100,19 +124,21 @@ export function RecordingsView({
             description="Voice clips captured by the bot appear here."
           />
         ) : (
-        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          <div
-          {(items ?? []).map((r, i) => {
+            ref={deckRef}
+            className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3"
+          >
+            {(items ?? []).map((r) => {
               const up = uploadStatus(r);
               const isPlaying = playingId === r.id;
               return (
                 <GlassCard
                   key={r.id}
-                className={`animate-stagger flex flex-col gap-3 transition-colors hover:bg-white/[0.06] ${
+                  className={`recording-deck-card flex flex-col gap-3 transition-colors hover:bg-white/[0.06] ${
                     isPlaying
                       ? "border-signal/40 shadow-[0_0_36px_-16px_var(--color-signal-glow)]"
                       : ""
                   }`}
-                style={staggerDelay(i)}
                 >
                   <div className="flex items-center gap-3">
                     <Avatar src={r.avatar_url} name={r.username} size={38} />
@@ -132,7 +158,9 @@ export function RecordingsView({
                       </div>
                     </div>
                     {isPlaying && <NowPlayingChip />}
-                  {up && !isPlaying && <Badge tone={up.tone}>{up.label}</Badge>}
+                    {up && !isPlaying && (
+                      <Badge tone={up.tone}>{up.label}</Badge>
+                    )}
                     <span className="mono text-[0.65rem] text-ink-faint">
                       {formatBytes(r.size_bytes)}
                     </span>
@@ -188,6 +216,7 @@ export function RecordingsView({
           </div>
         )}
       </GlassPanel>
+    </div>
   );
 }
 

services/frontend/src/app/(dashboard)/voice/view.tsx

@@ -29,6 +29,7 @@ import {
   useVoiceListen,
   useVoiceStatus,
 } from "@/hooks";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import type { Guild, VoiceStatus } from "@/lib/types";
 import { useWebSocket } from "@/lib/ws/context";
 
@@ -63,6 +64,12 @@ export function VoiceView({
   const [micVol, setMicVol] = useState(100);
   const [listenVol, setListenVol] = useState(75);
 
+  const hudRef = useStaggerReveal<HTMLDivElement>(".hud-tile", {
+    stagger: 0.06,
+    y: 14,
+    dependencies: [status],
+  });
+
   useEffect(() => {
     const unsub = subscribe(ws);
     return unsub;
@@ -124,8 +131,37 @@ export function VoiceView({
   };
 
   return (
-    <div className="space-y-5">
+    <div ref={hudRef} className="space-y-4">
-      <GlassPanel>
+      {/* Tactical HUD Header Bar */}
+      <div className="hud-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
+        <div className="flex items-center gap-3">
+          <div className="relative flex size-3 items-center justify-center">
+            <span
+              className={`absolute inline-flex size-full rounded-full opacity-75 ${
+                connected ? "animate-ping bg-signal" : "bg-vermilion"
+              }`}
+            />
+            <span
+              className={`relative inline-flex size-2 rounded-full ${
+                connected ? "bg-signal" : "bg-vermilion"
+              }`}
+            />
+          </div>
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+            VOICE MATRIX · LIVE_LINK
+          </h1>
+        </div>
+        <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+          <span className="text-ink-faint">LINK:</span>
+          <span
+            className={`font-bold ${connected ? "text-signal" : "text-vermilion"}`}
+          >
+            {connected ? "ESTABLISHED" : "STANDBY"}
+          </span>
+        </div>
+      </div>
+
+      <GlassPanel className="hud-tile">
         <div className="flex flex-wrap items-center justify-between gap-3">
           <GuildChannelPicker
             mode="voice"
@@ -238,10 +274,10 @@ export function VoiceView({
         </div>
       </GlassPanel>
 
-      <div className="grid gap-5 lg:grid-cols-3">
+      <div className="grid gap-4 lg:grid-cols-3">
-        <GlassPanel className="lg:col-span-2">
+        <GlassPanel className="hud-tile lg:col-span-2">
           <SectionHeader
-            eyebrow="stage"
+            eyebrow="stage · radar"
             title="Live speakers"
             action={
               <span className="mono text-xs text-ink-faint">
@@ -283,7 +319,7 @@ export function VoiceView({
           )}
         </GlassPanel>
 
-        <GlassPanel>
+        <GlassPanel className="hud-tile">
           <SectionHeader eyebrow="links" title="Connections" />
           <div className="space-y-2">
             {(status?.connections ?? []).map((c) => (

services/frontend/src/components/ChannelCultureGlossary.tsx

@@ -1,21 +1,60 @@
 "use client";
 
+import { Radio, Signal } from "lucide-react";
+import { useMemo } from "react";
 import { GlassPanel } from "@/components/primitives";
 import { SectionHeader } from "@/components/shared";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { downloadCsv } from "@/lib/csv";
 import { formatRelativeTime } from "@/lib/format";
 import type { ChannelCultureRow } from "@/lib/types";
 
+/**
+ * Deterministic pseudo signal-strength (0..1) derived from recency + summary
+ * richness — purely cosmetic telemetry framing, no backend field for this.
+ */
+function deriveSignalStrength(c: ChannelCultureRow): number {
+  let score = 0.25;
+  if (c.culture_summary) {
+    score += Math.min(0.45, c.culture_summary.length / 400);
+  }
+  if (c.last_analyzed_at) {
+    const ageMs = Date.now() - c.last_analyzed_at;
+    const days = ageMs / (1000 * 60 * 60 * 24);
+    score += Math.max(0, 0.3 - days * 0.02);
+  }
+  return Math.max(0.08, Math.min(1, score));
+}
+
 export function ChannelCultureGlossary({
   cultures,
 }: {
   cultures: ChannelCultureRow[];
 }) {
+  const ranked = useMemo(
+    () =>
+      cultures
+        .map((c) => ({ c, signal: deriveSignalStrength(c) }))
+        .sort((a, b) => b.signal - a.signal),
+    [cultures],
+  );
+
+  const hudRef = useStaggerReveal<HTMLDivElement>(".channel-node", {
+    stagger: 0.045,
+    y: 14,
+    dependencies: [cultures],
+  });
+
   return (
     <GlassPanel className="lg:col-span-3">
       <SectionHeader
-        eyebrow="culture"
+        eyebrow="knowledge · roster"
-        title="Channel Culture Glossary"
+        title={
+          <span className="flex items-center gap-2">
+            <Radio className="size-4 text-signal" />
+            Channel Culture Glossary
+          </span>
+        }
         action={
           cultures.length > 0 ? (
             <button
@@ -30,38 +69,55 @@ export function ChannelCultureGlossary({
                   })),
                 )
               }
-              className="flex items-center gap-1.5 text-xs text-ink-soft hover:text-ink"
+              className="flex items-center gap-1.5 font-mono text-[11px] text-ink-soft hover:text-ink"
             >
-              CSV
+              EXPORT_CSV
             </button>
           ) : null
         }
       />
       {cultures.length === 0 ? (
-        <p className="py-6 text-center text-xs text-ink-faint">
+        <p className="py-6 text-center font-mono text-xs text-ink-faint">
-          No channel cultures captured yet.
+          NO CHANNEL TELEMETRY CAPTURED YET
         </p>
       ) : (
-        <div className="space-y-3">
+        <div ref={hudRef} className="space-y-2">
-          {cultures.map((c) => (
+          {ranked.map(({ c, signal }) => (
-            <div key={c.channel_id} className="text-sm">
+            <div
-              <div className="flex items-baseline justify-between">
+              key={c.channel_id}
-                <span className="font-medium text-ink">
+              className="channel-node group relative overflow-hidden rounded-md border border-hairline bg-surface/40 p-3 backdrop-blur-md transition-colors hover:border-signal/40"
-                  {c.channel_name ?? c.channel_id}
+            >
+              <div className="flex items-baseline justify-between gap-3">
+                <span className="truncate font-mono text-xs font-semibold text-ink">
+                  #{c.channel_name ?? c.channel_id.slice(0, 8)}
                 </span>
+                <div className="flex items-center gap-2 shrink-0">
+                  <Signal className="size-3 text-ink-faint" />
                   {c.last_analyzed_at && (
-                  <span className="text-xs text-ink-faint">
+                    <span className="font-mono text-[10px] text-ink-faint">
                       {formatRelativeTime(c.last_analyzed_at)}
                     </span>
                   )}
                 </div>
+              </div>
+
               {c.culture_summary ? (
-                <p className="mt-1 text-ink-faint">{c.culture_summary}</p>
+                <p className="mt-1.5 line-clamp-2 text-[13px] text-ink-soft">
+                  {c.culture_summary}
+                </p>
               ) : (
-                <span className="text-xs text-ink-faint">
+                <span className="mt-1.5 block font-mono text-[11px] text-ink-faint">
                   (no summary captured)
                 </span>
               )}
+
+              {/* Signal strength readout bar */}
+              <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-canvas-2">
+                <div
+                  className="h-full rounded-full bg-signal transition-[width] duration-700 ease-out"
+                  style={{ width: `${Math.round(signal * 100)}%` }}
+                />
+              </div>
             </div>
           ))}
         </div>

services/frontend/src/components/TermGlossary.tsx

@@ -1,14 +1,91 @@
 "use client";
 
-import { Globe } from "lucide-react";
+import { ChevronDown, Globe } from "lucide-react";
+import { useRef, useState } from "react";
 import { GlassPanel } from "@/components/primitives";
 import { SectionHeader } from "@/components/shared";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { downloadCsv } from "@/lib/csv";
 import { formatRelativeTime } from "@/lib/format";
 import type { GlossaryRow } from "@/lib/types";
 
-export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
+function GlossaryEntry({ t }: { t: GlossaryRow }) {
+  const [open, setOpen] = useState(false);
+  const bodyRef = useRef<HTMLDivElement>(null);
+
   return (
+    <div className="glossary-entry overflow-hidden rounded-md border border-hairline bg-surface/30">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left transition-colors hover:bg-surface/50"
+        aria-expanded={open}
+      >
+        <span className="flex min-w-0 items-baseline gap-2">
+          <span className="truncate font-medium text-ink">{t.term}</span>
+          <span className="mono shrink-0 text-[10px] text-ink-faint">
+            {t.hit_count} uses
+          </span>
+        </span>
+        <span className="flex shrink-0 items-center gap-2 font-mono text-[10px] text-ink-faint">
+          {formatRelativeTime(t.resolved_at)}
+          <ChevronDown
+            className={`size-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+          />
+        </span>
+      </button>
+      <div
+        ref={bodyRef}
+        className="grid transition-[grid-template-rows] duration-300 ease-out"
+        style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
+      >
+        <div className="overflow-hidden">
+          <div className="border-t border-hairline px-3 py-2.5 text-sm">
+            <p className="text-ink-faint">{t.definition}</p>
+            {t.source_url && (
+              <a
+                href={t.source_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-1.5 inline-flex items-center gap-1 text-xs text-ink-soft hover:text-ink"
+              >
+                <Globe className="size-3" />
+                {t.source_url}
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
+  const listRef = useStaggerReveal<HTMLDivElement>(".glossary-entry", {
+    stagger: 0.035,
+    y: 10,
+    dependencies: [terms],
+  });
+
+  return (
+    <div className="space-y-4">
+      {/* Tactical HUD Header Bar */}
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
+        <div className="flex items-center gap-3">
+          <div className="relative flex size-3 items-center justify-center">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-signal" />
+          </div>
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+            TERM GLOSSARY · KB_INDEX
+          </h1>
+        </div>
+        <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+          <span className="text-ink-faint">TERMS:</span>
+          <span className="font-bold text-signal">{terms.length}</span>
+        </div>
+      </div>
+
       <GlassPanel className="lg:col-span-3">
         <SectionHeader
           eyebrow="knowledge"
@@ -29,43 +106,25 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
                     })),
                   )
                 }
-              className="flex items-center gap-1.5 text-xs text-ink-soft hover:text-ink"
+                className="flex items-center gap-1.5 font-mono text-[11px] text-ink-soft hover:text-ink"
               >
-              CSV
+                EXPORT_CSV
               </button>
             ) : null
           }
         />
         {terms.length === 0 ? (
-        <p className="py-6 text-center text-xs text-ink-faint">
+          <p className="py-6 text-center font-mono text-xs text-ink-faint">
-          No term resolutions cached yet.
+            NO TERM RESOLUTIONS CACHED YET
           </p>
         ) : (
-        <div className="space-y-3">
+          <div ref={listRef} className="space-y-2">
             {terms.map((t) => (
-            <div key={t.term} className="text-sm">
+              <GlossaryEntry key={t.term} t={t} />
-              <div className="flex flex-wrap items-baseline justify-between gap-2">
-                <span className="font-medium text-ink">{t.term}</span>
-                <span className="text-xs text-ink-faint">
-                  {t.hit_count} uses · {formatRelativeTime(t.resolved_at)}
-                </span>
-              </div>
-              <p className="mt-1 text-ink-faint">{t.definition}</p>
-              {t.source_url && (
-                <a
-                  href={t.source_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="mt-0.5 text-xs text-ink-soft hover:text-ink"
-                >
-                  <Globe className="mr-1 inline size-3" />
-                  {t.source_url}
-                </a>
-              )}
-            </div>
             ))}
           </div>
         )}
       </GlassPanel>
+    </div>
   );
 }

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

@@ -1,8 +1,8 @@
+export { ErrorBoundary } from "./error-boundary";
 export { GuildChannelPicker } from "./guild-picker";
 export { MarkdownLite } from "./markdown";
 export { PageTransition } from "./page-transition";
 export { MetricTile, SectionHeader } from "./section";
-export { ErrorBoundary } from "./error-boundary";
 export {
   EmptyState,
   ErrorState,

services/frontend/src/components/shared/page-transition.tsx

@@ -1,8 +1,19 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
 import { cn } from "@/lib/utils";
 
+// Register plugin once on client
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 /**
- * Wraps a view's root so the whole panel stack rises + settles on mount.
+ * GSAP-powered page transition wrapper.
- * The animation is disabled under prefers-reduced-motion via globals.css.
+ * Staggers entrance of direct children or smooth rise/fade for the container.
+ * Fully cleans up on unmount and respects reduced-motion.
  */
 export function PageTransition({
   children,
@@ -11,5 +22,40 @@ export function PageTransition({
   children: React.ReactNode;
   className?: string;
 }) {
-  return <div className={cn("animate-fade-up", className)}>{children}</div>;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      if (!containerRef.current) return;
+
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) return;
+
+      gsap.fromTo(
+        containerRef.current,
+        {
+          opacity: 0,
+          y: 14,
+          filter: "blur(4px)",
+        },
+        {
+          opacity: 1,
+          y: 0,
+          filter: "blur(0px)",
+          duration: 0.45,
+          ease: "power2.out",
+          clearProps: "filter,transform",
+        },
+      );
+    },
+    { scope: containerRef },
+  );
+
+  return (
+    <div ref={containerRef} className={cn("w-full opacity-0", className)}>
+      {children}
+    </div>
+  );
 }

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

@@ -1,9 +1,16 @@
 "use client";
 
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import { usePathname } from "next/navigation";
+import { useRef } from "react";
 import { isActivePath, navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 function NavItem({
   href,
   label,
@@ -24,10 +31,10 @@ function NavItem({
       aria-current={active ? "page" : undefined}
       style={{ "--i": index } as React.CSSProperties}
       className={cn(
-        "game-nav-item group flex size-11 items-center justify-center rounded-[13px] transition-colors",
+        "nav-dock-item game-nav-item group relative flex size-11 items-center justify-center rounded-[13px] transition-all duration-200",
         active
-          ? "is-active bg-white/10 text-white"
+          ? "is-active bg-white/10 text-white shadow-sm ring-1 ring-white/20"
-          : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
+          : "text-ink-faint hover:bg-white/5 hover:text-ink-soft hover:scale-105",
       )}
     >
       {active && <span className="game-marker -left-3.5" />}
@@ -38,8 +45,9 @@ function NavItem({
         className="relative z-10 size-[18px]"
         strokeWidth={active ? 2.4 : 2}
       />
-      {/* hover tooltip — labels are hidden in the rail, so surface on hover */}
+      {/* HUD Tooltip on hover */}
-      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 font-mono text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
+      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-md border border-hairline bg-canvas-2/95 px-2.5 py-1 font-mono text-[11px] font-semibold tracking-wider text-ink opacity-0 shadow-xl backdrop-blur-md transition-all group-hover:translate-x-1 group-hover:opacity-100 md:block">
+        <span className="text-signal mr-1.5">›</span>
         {label}
       </span>
     </a>
@@ -49,10 +57,35 @@ function NavItem({
 export function NavRail() {
   const pathname = usePathname();
   const path = pathname ?? "/";
+  const railRef = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      if (!railRef.current) return;
+      const items = railRef.current.querySelectorAll(".nav-dock-item");
+      gsap.fromTo(
+        items,
+        { opacity: 0, x: -8, scale: 0.9 },
+        {
+          opacity: 1,
+          x: 0,
+          scale: 1,
+          duration: 0.4,
+          stagger: 0.04,
+          ease: "power2.out",
+          clearProps: "transform",
+        },
+      );
+    },
+    { scope: railRef },
+  );
 
   return (
-    <nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] py-4 md:flex">
+    <nav
-      <div className="flex flex-1 flex-col gap-1">
+      ref={railRef}
+      className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] border border-hairline/80 py-4 shadow-2xl backdrop-blur-xl md:flex"
+    >
+      <div className="flex flex-1 flex-col gap-1.5">
         {navItems.map((item, i) => (
           <NavItem
             key={item.href}

services/frontend/src/components/voice/voice-stage.tsx

@@ -1,63 +1,135 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import { Radio } from "lucide-react";
+import { useRef } from "react";
 import { Avatar } from "@/components/primitives";
 import type { ActiveSpeaker } from "@/lib/types";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 export function VoiceStage({ speakers }: { speakers: ActiveSpeaker[] }) {
+  const containerRef = useRef<HTMLDivElement>(null);
   const n = speakers.length;
   const speaking = speakers.filter((s) => s.speaking).length;
   const live = speaking > 0;
+  const speakingIds = speakers
+    .filter((s) => s.speaking)
+    .map((s) => s.userId)
+    .join(",");
+
+  useGSAP(
+    () => {
+      if (!containerRef.current) return;
+      const speakerNodes =
+        containerRef.current.querySelectorAll(".speaker-node");
+      if (speakerNodes.length > 0) {
+        gsap.fromTo(
+          speakerNodes,
+          { scale: 0.7, opacity: 0 },
+          {
+            scale: 1,
+            opacity: 1,
+            duration: 0.4,
+            stagger: 0.05,
+            ease: "back.out(1.5)",
+          },
+        );
+      }
+    },
+    { scope: containerRef, dependencies: [speakers.length] },
+  );
+
+  // Reactive pulse ring loop keyed to active speaking set — cleared on stop.
+  useGSAP(
+    () => {
+      if (!containerRef.current) return;
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) return;
+
+      const ringNodes = containerRef.current.querySelectorAll(
+        ".speaker-pulse-ring",
+      );
+      if (ringNodes.length === 0) return;
+
+      const tl = gsap.timeline({ repeat: -1, yoyo: true });
+      tl.to(ringNodes, {
+        scale: 1.18,
+        opacity: 0.35,
+        duration: 0.55,
+        ease: "sine.inOut",
+        stagger: { each: 0.08, from: "random" },
+      });
+
+      return () => {
+        tl.kill();
+        gsap.set(ringNodes, { clearProps: "scale,opacity" });
+      };
+    },
+    { scope: containerRef, dependencies: [speakingIds] },
+  );
 
   return (
-    <div className="relative mx-auto aspect-square w-full max-w-[360px]">
-      {/* orbiting dashed ring */}
-      <div className="absolute inset-8 rounded-full border border-dashed border-hairline opacity-40 animate-spin-disc" />
-      {/* ripple halos */}
-      <div className="absolute left-1/2 top-1/2 size-72 -translate-x-1/2 -translate-y-1/2 rounded-full border border-hairline" />
     <div
-        className="absolute left-1/2 top-1/2 size-48 -translate-x-1/2 -translate-y-1/2 rounded-full bg-signal/5 animate-breathe"
+      ref={containerRef}
-        style={{ opacity: live ? 1 : 0.4 }}
+      className="relative mx-auto aspect-square w-full max-w-[380px]"
+    >
+      {/* Tactical radar coordinate grids & rings */}
+      <div className="absolute inset-4 rounded-full border border-hairline/30" />
+      <div className="absolute inset-12 rounded-full border border-dashed border-hairline/40 animate-spin-disc" />
+      <div className="absolute left-1/2 top-1/2 size-80 -translate-x-1/2 -translate-y-1/2 rounded-full border border-hairline/20" />
+      <div
+        className="absolute left-1/2 top-1/2 size-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-signal/5 transition-opacity duration-500"
+        style={{ opacity: live ? 1 : 0.2 }}
       />
 
-      {/* central core */}
+      {/* Central Command Beacon */}
       <div
-        className="absolute left-1/2 top-1/2 flex size-24 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-full border backdrop-blur transition-colors"
+        className="absolute left-1/2 top-1/2 flex size-28 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-full border backdrop-blur-md transition-all duration-300"
         style={{
           borderColor: live ? "var(--color-signal)" : "var(--color-hairline)",
           boxShadow: live ? "0 0 50px -8px var(--color-signal-glow)" : "none",
-          background: "oklch(1 0 0 / 0.04)",
+          background: "oklch(0.15 0.02 70 / 0.7)",
         }}
       >
         <Radio
-          className={`size-7 ${live ? "text-signal" : "text-ink-faint"}`}
+          className={`size-7 transition-colors ${live ? "text-signal animate-breathe" : "text-ink-faint"}`}
         />
-        <span className="mono mt-1 text-xs text-ink-soft">{n} live</span>
+        <span className="font-mono mt-1 text-[11px] font-bold tracking-wider text-ink uppercase">
+          {live ? `${speaking} SPEAKING` : `${n} CONNECTED`}
+        </span>
       </div>
 
-      {/* speakers on orbit */}
+      {/* Orbiting Speakers */}
       {speakers.map((s, i) => {
         const angle = (i / Math.max(n, 1)) * Math.PI * 2 - Math.PI / 2;
-        const radius = 42;
+        const radius = 44;
         const x = 50 + radius * Math.cos(angle);
         const y = 50 + radius * Math.sin(angle);
         return (
           <div
             key={s.userId}
-            className="absolute -translate-x-1/2 -translate-y-1/2"
+            className="speaker-node absolute -translate-x-1/2 -translate-y-1/2 transition-all duration-300"
             style={{ left: `${x}%`, top: `${y}%` }}
           >
-            <div className="relative flex flex-col items-center gap-1">
+            <div className="relative flex flex-col items-center gap-1.5">
               <span className="relative">
                 <Avatar
                   src={s.avatar}
                   name={s.username}
-                  size={46}
+                  size={50}
                   ring={s.speaking}
                 />
                 {s.speaking && (
-                  <span className="absolute inset-0 rounded-full ring-2 ring-signal animate-pulse-ring" />
+                  <span className="speaker-pulse-ring absolute -inset-1 rounded-full ring-2 ring-signal ring-offset-2 ring-offset-canvas" />
                 )}
               </span>
-              <span className="mono max-w-[88px] truncate rounded-full bg-black/40 px-2 py-0.5 text-[0.6rem] text-ink-soft">
+              <span className="font-mono max-w-[100px] truncate rounded-md border border-hairline bg-canvas-2/90 px-2 py-0.5 text-[10px] font-semibold text-ink shadow-md backdrop-blur-md">
                 {s.username}
               </span>
             </div>

services/frontend/src/hooks/use-gsap-animation.ts

@@ -0,0 +1,96 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { type RefObject, useRef } from "react";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
+/**
+ * Reusable hook for staggered reveal animations on child elements.
+ */
+export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
+  selector: string,
+  options?: {
+    stagger?: number;
+    duration?: number;
+    delay?: number;
+    y?: number;
+    dependencies?: unknown[];
+  },
+) {
+  const containerRef = useRef<T>(null);
+
+  useGSAP(
+    () => {
+      if (!containerRef.current) return;
+      const elements = containerRef.current.querySelectorAll(selector);
+      if (!elements || elements.length === 0) return;
+
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) {
+        gsap.set(elements, { opacity: 1, y: 0 });
+        return;
+      }
+
+      gsap.fromTo(
+        elements,
+        {
+          opacity: 0,
+          y: options?.y ?? 12,
+          scale: 0.98,
+        },
+        {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          duration: options?.duration ?? 0.35,
+          delay: options?.delay ?? 0.05,
+          stagger: options?.stagger ?? 0.04,
+          ease: "power2.out",
+          clearProps: "transform",
+        },
+      );
+    },
+    {
+      scope: containerRef,
+      dependencies: options?.dependencies ?? [],
+      revertOnUpdate: true,
+    },
+  );
+
+  return containerRef;
+}
+
+/**
+ * Animated number counter using GSAP.
+ */
+export function useCounter(
+  targetValue: number,
+  ref: RefObject<HTMLElement | null>,
+  formatter?: (val: number) => string,
+) {
+  useGSAP(
+    () => {
+      if (!ref.current) return;
+      const obj = { val: 0 };
+      gsap.to(obj, {
+        val: targetValue,
+        duration: 0.8,
+        ease: "power2.out",
+        onUpdate: () => {
+          if (ref.current) {
+            ref.current.textContent = formatter
+              ? formatter(obj.val)
+              : Math.round(obj.val).toLocaleString();
+          }
+        },
+      });
+    },
+    { dependencies: [targetValue] },
+  );
+}

services/frontend/src/lib/orpc/client.ts

@@ -29,7 +29,12 @@ const orpc: ORPCClient = (() => {
     basePath: "trpc",
   });
 
-  const link = new RPCLink({ websocket: socket });
+  const link = new RPCLink({
+    websocket: socket as unknown as Pick<
+      WebSocket,
+      "addEventListener" | "readyState" | "removeEventListener" | "send"
+    >,
+  });
   return createORPCClient(link) as unknown as ORPCClient;
 })();
 

services/frontend/src/lib/ws/connection.ts

@@ -126,7 +126,7 @@ export class WsConnection {
 
   sendBinary(data: ArrayBufferLike): void {
     if (this.ws?.readyState === WebSocket.OPEN) {
-      this.ws.send(data);
+      this.ws.send(data as ArrayBuffer);
     }
   }