Refactor code structure for improved readability and maintainability

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,17 @@
+name: Dependabot Auto-Merge
+on: pull_request
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  auto-merge:
+    runs-on: ubuntu-latest
+    if: github.actor == 'dependabot[bot]'
+    steps:
+      - name: Enable auto-merge for Dependabot PR
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          PR_URL: ${{ github.event.pull_request.html_url }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/dependabot.yml

@@ -0,0 +1,38 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/services/backend"
+    schedule:
+      interval: "daily"
+    open-pull-requests-limit: 10
+    groups:
+      production:
+        dependency-type: "production"
+        update-types: ["minor", "patch"]
+      development:
+        dependency-type: "development"
+        update-types: ["minor", "patch"]
+  - package-ecosystem: "npm"
+    directory: "/services/discord-gateway"
+    schedule:
+      interval: "daily"
+    open-pull-requests-limit: 10
+    groups:
+      production:
+        dependency-type: "production"
+        update-types: ["minor", "patch"]
+      development:
+        dependency-type: "development"
+        update-types: ["minor", "patch"]
+  - package-ecosystem: "npm"
+    directory: "/services/frontend"
+    schedule:
+      interval: "daily"
+    open-pull-requests-limit: 10
+    groups:
+      production:
+        dependency-type: "production"
+        update-types: ["minor", "patch"]
+      development:
+        dependency-type: "development"
+        update-types: ["minor", "patch"]

.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,
   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,
+  MetricTile,
+  PageTransition,
+  SectionHeader,
   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>(".linear-tile", {
+    stagger: 0.035,
+    y: 8,
+    dependencies: [stats],
+  });
+
   useEffect(() => {
     const s = deriveSignal(stats);
     ambient.set(
@@ -74,20 +82,16 @@ export function DashboardView({
     return <ErrorState error={error} onRetry={() => void mutateStats()} />;
   if (!stats && isLoading)
     return (
-      <div className="space-y-5">
+      <div className="space-y-4">
         <SkeletonHero />
         <SkeletonMetricRow cols={4} />
-        <SkeletonPanel rows={5} />
+        <SkeletonPanel rows={4} />
-        <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()}
       />
     );
@@ -97,284 +101,155 @@ export function DashboardView({
   const cleanRatio = s.total_clean / total;
 
   return (
-    <div className="space-y-5">
+    <PageTransition>
-      {/* Hero */}
+      <div ref={hudRef} className="space-y-4">
-      <GlassPanel glow className="game-frame relative overflow-hidden">
+        {/* Precision Sub-Header Bar */}
-        <div className="scan-line absolute inset-x-0 top-0" />
+        <div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
-        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div className="flex items-center gap-2.5">
-          <div>
+            <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
-            <div className="eyebrow mb-2">GMW · Operations Grid</div>
+            <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
-            <h2 className="display hero-clamp leading-none text-ink glow-signal">
+              Telemetry Overview · Node 01
-              Ambient Field
+            </h1>
-            </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="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
-            <Radio className="size-4 text-signal animate-breathe" />
+            <span>SIGNAL:</span>
-            <span className="mono text-xs uppercase tracking-wider">
+            <span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
-              {deriveSignal(s).label}
+              STABLE_STREAM
             </span>
           </div>
         </div>
 
-        <div className="mt-5 grid grid-cols-2 gap-3 md:grid-cols-4">
+        {/* Primary Metric Deck */}
+        <div className="linear-tile grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
           <MetricTile
-            label="Messages"
+            label="Total Messages"
             value={formatNumber(s.total_messages)}
+            hint={`${formatNumber(s.today_messages)} today`}
+            icon={<MessageSquare className="size-4" />}
+          />
+          <MetricTile
+            label="Clean Filter Ratio"
+            value={`${Math.round(cleanRatio * 100)}%`}
+            hint={`${formatNumber(s.total_clean)} verified clean`}
             tone="signal"
-            icon={<MessageSquare className="size-3.5" />}
+            icon={<Shield className="size-4" />}
-            className="animate-stagger"
-            style={staggerDelay(0)}
           />
           <MetricTile
-            label="Flagged"
+            label="Voice Recordings"
-            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" />}
+            hint="Archived audio sessions"
-            className="animate-stagger"
+            icon={<Mic className="size-4" />}
-            style={staggerDelay(3)}
+          />
+          <MetricTile
+            label="Total Profiles"
+            value={formatNumber(s.total_profiles)}
+            hint={`${formatNumber(s.active_users_24h)} active 24h`}
+            icon={<Users className="size-4" />}
           />
         </div>
-      </GlassPanel>
 
-      {/* Activity */}
+        {/* Dynamic Activity Area & Telemetry Gauges */}
-      <GlassPanel>
+        <div className="grid gap-3 lg:grid-cols-3">
-        <SectionHeader
+          <GlassPanel className="linear-tile lg:col-span-2">
-          eyebrow="14-day signal"
+            <SectionHeader
-          title={
+              eyebrow="Activity Stream"
-            <span className="flex items-center gap-2">
+              title="Message Volume & Signal Density"
-              <Activity className="size-4 text-signal" /> Activity & moderation
+            />
-            </span>
+            <div className="mt-4">
-          }
+              <AreaActivity daily={activity?.daily ?? []} />
-          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>
-          }
+          </GlassPanel>
-        />
-        {activity ? (
-          <AreaActivity daily={activity.daily} />
-        ) : (
-          <LoadingState label="streaming" />
-        )}
-      </GlassPanel>
 
-      {/* Two-column: channels + moderation */}
+          <GlassPanel className="linear-tile flex flex-col justify-between">
-      <div className="grid gap-5 lg:grid-cols-5">
+            <div>
-        <GlassPanel className="lg:col-span-3">
+              <SectionHeader
-          <SectionHeader eyebrow="throughput" title="Top channels" />
+                eyebrow="Security State"
-          <div className="space-y-2.5">
+                title="Moderation Accuracy"
-            {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">
-          <SectionHeader eyebrow="trust" title="Moderation" />
-          <div className="flex items-center gap-5">
-            <RadialGauge
-              value={cleanRatio}
-              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
+              <div className="my-6 flex items-center justify-center">
-                icon={<Flag className="size-4 text-vermilion" />}
+                <RadialGauge
-                label="Flagged"
+                  value={Math.round(cleanRatio * 100)}
-                value={formatNumber(s.total_flagged)}
+                  label="Clean Ratio"
-              />
+                  tone={cleanRatio > 0.85 ? "signal" : "amber"}
-              <Row
+                  size={140}
-                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}
-                    </span>
-                  ))}
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="truncate text-sm text-ink">
-                    {m.content || "(no text)"}
-                  </div>
-                  <div className="mono text-[0.65rem] text-ink-faint">
-                    {m.username} · {m.channel_name ?? m.channel_id.slice(0, 8)}
-                  </div>
-                </div>
-                <span className="mono text-xs text-ink-soft">
-                  {m.reaction_count}
-                </span>
               </div>
-            ))}
+            </div>
-            {(reactions ?? []).length === 0 && <EmptyHint />}
+            <div className="grid grid-cols-2 gap-2 border-t border-white/[0.06] pt-3 text-center">
-          </div>
+              <div>
-        </GlassPanel>
+                <div className="font-mono text-[10px] text-[#8a8f98]">CLEAN</div>
+                <div className="font-sans text-sm font-semibold text-[#10b981]">
+                  {formatNumber(s.total_clean)}
+                </div>
+              </div>
+              <div>
+                <div className="font-mono text-[10px] text-[#8a8f98]">FLAGGED</div>
+                <div className="font-sans text-sm font-semibold text-[#f43f5e]">
+                  {formatNumber(s.total_flagged)}
+                </div>
+              </div>
+            </div>
+          </GlassPanel>
+        </div>
+
+        {/* Secondary Insights Deck */}
+        <div className="grid gap-3 lg:grid-cols-2">
+          {reactions && reactions.length > 0 && (
+            <GlassPanel className="linear-tile">
+              <SectionHeader
+                eyebrow="Engagement"
+                title="Top Reacted Messages"
+              />
+              <div className="mt-3 space-y-2">
+                {reactions.slice(0, 4).map((r) => (
+                  <div
+                    key={r.message_id}
+                    className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 hover:bg-white/[0.04]"
+                  >
+                    <span className="truncate pr-2 text-xs text-[#d0d6e0]">
+                      {r.content || "[Media/Attachment]"}
+                    </span>
+                    <span className="font-mono text-xs font-semibold text-[#7170ff] shrink-0">
+                      {formatNumber(r.reaction_count)} reactions
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </GlassPanel>
+          )}
+
+          <GlassPanel className="linear-tile flex flex-col justify-between">
+            <div>
+              <SectionHeader
+                eyebrow="Navigation"
+                title="Quick Diagnostics"
+              />
+              <div className="mt-2 space-y-1.5">
+                <Link
+                  href="/moderation"
+                  className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
+                >
+                  <span className="flex items-center gap-2">
+                    <Shield className="size-3.5 text-[#7170ff]" />
+                    Review Live Moderation Queue
+                  </span>
+                  <ChevronRight className="size-3.5 text-[#8a8f98]" />
+                </Link>
+                <Link
+                  href="/voice"
+                  className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
+                >
+                  <span className="flex items-center gap-2">
+                    <AudioWaveform className="size-3.5 text-[#10b981]" />
+                    Inspect Active Voice Stages
+                  </span>
+                  <ChevronRight className="size-3.5 text-[#8a8f98]" />
+                </Link>
+              </div>
+            </div>
+          </GlassPanel>
+        </div>
       </div>
-    </div>
+    </PageTransition>
-  );
-}
-
-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>
   );
 }

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

@@ -1,19 +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,
+  PageTransition,
   SectionHeader,
   SkeletonHero,
   SkeletonPanel,
@@ -26,9 +28,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 }) {
@@ -51,30 +53,32 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
   const playing = media?.playing ?? false;
   const current = media?.current ?? null;
   const queueList = media?.queue ?? [];
-  const queueTotal = queueList.reduce(
+
-    (acc, it) => acc + (it.durationMs ?? 0),
+  const mediaRef = useStaggerReveal<HTMLDivElement>(".media-tile", {
-    0,
+    stagger: 0.04,
-  );
+    y: 8,
+    dependencies: [playing, queueList.length],
+  });
 
   const tone = playing ? "signal" : queueList.length ? "amber" : "signal";
   useEffect(() => {
     ambient.set(
       tone,
-      playing ? 0.5 : 0.25,
+      playing ? 0.45 : 0.2,
-      playing ? "now playing" : "media idle",
+      playing ? "playing stream" : "media ready",
     );
   }, [tone, playing, ambient]);
 
   const onPlay = async () => {
     const u = url.trim();
     if (!u) {
-      toast({ title: "Enter a media URL", tone: "vermilion" });
+      toast({ title: "Enter media URL", tone: "vermilion" });
       return;
     }
     try {
       await queue.mutateAsync({ url: u, mode: "music" });
       setUrl("");
-      toast({ title: "Queued", tone: "signal" });
+      toast({ title: "Track queued", tone: "signal" });
     } catch (e) {
       toast({
         title: "Queue failed",
@@ -88,212 +92,153 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
     return <ErrorState error={error} onRetry={() => void mutate()} />;
   if (!media && isLoading)
     return (
-      <div className="space-y-5">
+      <div className="space-y-4">
         <SkeletonHero />
-        <SkeletonPanel rows={4} />
+        <SkeletonPanel rows={3} />
       </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.08, 0.08, 0.08, 0.08, 0.08, 0.08];
+
   return (
-    <div className="space-y-5">
+    <PageTransition>
-      <GlassPanel glow className="relative overflow-hidden">
+      <div ref={mediaRef} className="space-y-4">
-        <div className="scan-line absolute inset-x-0 top-0" />
+        {/* Precision Sub-Header Bar */}
-        <div className="flex flex-col gap-5 sm:flex-row sm:items-center">
+        <div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
-          <div
+          <div className="flex items-center gap-2.5">
-            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"}`}
+            <span
-          >
+              className={`h-2 w-2 rounded-full ${
-            <div className="flex size-28 items-center justify-center overflow-hidden rounded-full bg-canvas/60">
+                playing
-              {current?.thumbnailUrl ? (
+                  ? "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
-                // biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
+                  : "bg-[#8a8f98]"
-                <img
+              }`}
-                  src={current.thumbnailUrl}
-                  alt=""
-                  className="size-full object-cover"
-                  loading="lazy"
-                />
-              ) : (
-                <ListMusic className="size-10 text-signal" />
-              )}
-            </div>
-          </div>
-
-          <div className="min-w-0 flex-1">
-            <div className="eyebrow mb-1 flex items-center gap-2">
-              {playing ? (
-                <>
-                  <span aria-hidden className="flex h-3 items-end gap-[2px]">
-                    {[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">
-              {current?.title ?? "Nothing queued"}
-            </h2>
-            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-ink-faint">
-              {current?.source && (
-                <span className="mono truncate">{current.source}</span>
-              )}
-              {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">
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={onPlay}
-                disabled={queue.isPending}
-              >
-                <Play className="size-4" /> Queue & play
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => skip.mutate()}
-                disabled={skip.isPending}
-              >
-                <SkipForward className="size-4" /> 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.mutate(!media?.loop)}
-                aria-pressed={!!media?.loop}
-              >
-                <Repeat className="size-4" /> Loop
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-5 flex flex-wrap items-center gap-3">
-          <div className="relative min-w-0 flex-1">
-            <Input
-              placeholder="Paste a YouTube / music URL…"
-              value={url}
-              onChange={(e) => setUrl(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && onPlay()}
             />
+            <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+              Audio Engine · Media Gateway
+            </h1>
           </div>
-          <div className="flex shrink-0 items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-2.5">
+          <div className="flex items-center gap-2 font-mono text-[11px]">
-            <Volume2 className="size-4 text-ink-faint" />
+            <span className="text-[#8a8f98]">ENGINE:</span>
-            <div className="h-1.5 w-24 overflow-hidden rounded-full bg-white/10">
+            <span
-              <div
+              className={`rounded px-1.5 py-0.5 font-medium border ${
-                className="h-full rounded-full bg-signal/70"
+                playing
-                style={{
+                  ? "border-[#7170ff]/30 bg-[#7170ff]/10 text-[#7170ff]"
-                  width: `${Math.round((media?.musicVolume ?? 0) * 100)}%`,
+                  : "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
-                }}
+              }`}
-              />
+            >
-            </div>
+              {playing ? "STREAMING" : "IDLE"}
-            <span className="mono w-9 text-right text-[0.65rem] text-ink-faint">
-              {Math.round((media?.musicVolume ?? 0) * 100)}%
             </span>
           </div>
         </div>
-      </GlassPanel>
 
-      <GlassPanel>
+        {/* Media Playback Deck */}
-        <SectionHeader
+        <div className="media-tile">
-          eyebrow="up next"
+          <GlassPanel className="p-5">
-          title="Queue"
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          action={
+              <div className="flex items-center gap-3.5">
-            <span className="mono text-xs text-ink-faint">
+                <div className="flex size-11 items-center justify-center rounded-[8px] border border-white/[0.08] bg-white/[0.03] text-[#7170ff]">
-              {queueList.length} track{queueList.length === 1 ? "" : "s"}
+                  <Disc
-              {queueTotal && ` · ${formatDuration(queueTotal)}`}
+                    className={`size-6 ${playing ? "animate-spin-disc text-[#7170ff]" : "text-[#8a8f98]"}`}
-            </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>
-                  {item.thumbnailUrl ? (
-                    // 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>
-            })}
+                  <div className="text-sm font-semibold tracking-tight text-[#f7f8f8]">
-          </div>
+                    {current?.title ?? "No Active Media Stream"}
-        )}
+                  </div>
-      </GlassPanel>
+                  <div className="font-mono text-[11px] text-[#8a8f98]">
-    </div>
+                    {current
+                      ? `${formatDuration(current.durationMs ?? 0)} · High Fidelity Stream`
+                      : "Queue a track via URL below"}
+                  </div>
+                </div>
+              </div>
+
+              {/* Controls */}
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => loop.mutateAsync()}
+                  className={media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""}
+                >
+                  <Repeat className="size-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => skip.mutateAsync()}
+                >
+                  <SkipForward className="size-3.5" />
+                </Button>
+                <Button
+                  variant="danger"
+                  size="sm"
+                  onClick={() => stop.mutateAsync()}
+                >
+                  <Square className="size-3.5" />
+                </Button>
+              </div>
+            </div>
+
+            {/* Quick URL Input */}
+            <div className="mt-4 flex gap-2 border-t border-white/[0.06] pt-4">
+              <Input
+                placeholder="Paste YouTube, SoundCloud, or Direct Stream URL..."
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                className="flex-1 text-xs"
+              />
+              <Button variant="primary" size="md" onClick={onPlay}>
+                <Play className="size-3.5" />
+                Queue Track
+              </Button>
+            </div>
+          </GlassPanel>
+        </div>
+
+        {/* Spectrum & Queue Grid */}
+        <div className="grid gap-3 lg:grid-cols-3">
+          <GlassPanel className="media-tile lg:col-span-2">
+            <SectionHeader
+              eyebrow="Visualizer"
+              title="Realtime Frequency Array"
+            />
+            <div className="my-6 flex items-center justify-center">
+              <Equalizer bars={mockLevels} />
+            </div>
+          </GlassPanel>
+
+          <GlassPanel className="media-tile">
+            <SectionHeader
+              eyebrow="Playlist"
+              title={`Queue (${queueList.length})`}
+            />
+            <div className="mt-3 space-y-2">
+              {queueList.length === 0 ? (
+                <div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
+                  QUEUE EMPTY
+                </div>
+              ) : (
+                queueList.map((item, idx) => (
+                  <div
+                    key={item.id ?? idx}
+                    className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0]"
+                  >
+                    <span className="truncate pr-2 font-medium">
+                      {item.title}
+                    </span>
+                    <span className="font-mono text-[10px] text-[#8a8f98] shrink-0">
+                      {formatDuration(item.durationMs ?? 0)}
+                    </span>
+                  </div>
+                ))
+              )}
+            </div>
+          </GlassPanel>
+        </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

@@ -2,435 +2,197 @@
 
 import {
   AlertTriangle,
-  Ban,
   CheckCircle2,
-  Clock,
   Filter,
-  MessageSquareWarning,
+  Shield,
-  MicOff,
   ShieldAlert,
-  Trash2,
-  UserX,
-  XCircle,
 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import { useAmbient } from "@/components/ambient/ambient-context";
-import { CategoryDrilldown } from "@/components/CategoryDrilldown";
-import { CoverageTiles } from "@/components/CoverageTiles";
-import { Donut } from "@/components/charts";
 import { LiveModerationFeed } from "@/components/LiveModerationFeed";
 import { ModerationHeatmap } from "@/components/ModerationHeatmap";
-import {
+import { Button, GlassPanel } from "@/components/primitives";
-  Badge,
-  GlassPanel,
-  Select,
-  type SelectOption,
-} from "@/components/primitives";
-import { ScamDomains } from "@/components/ScamDomains";
 import {
   ErrorState,
   MetricTile,
+  PageTransition,
   SectionHeader,
   SkeletonMetricRow,
   SkeletonPanel,
-  SkeletonRows,
 } from "@/components/shared";
-import { TopChannels } from "@/components/TopChannels";
-import { TopicTrends } from "@/components/TopicTrends";
 import {
   useHourlyModeration,
-  useLiveModeration,
   useModerationActions,
-  useModerationByCategory,
   useModerationCoverage,
   useModerationStats,
   useModerationTrends,
-  useTopFlaggedChannels,
-  useTopFlaggedDomains,
 } from "@/hooks";
-import { aiTone } from "@/lib/ai-status";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
-import { downloadCsv } from "@/lib/csv";
+import { formatNumber } from "@/lib/format";
-import { formatNumber, formatRelativeTime } from "@/lib/format";
 import type {
   ModerationAction,
-  ModerationActionType,
+  ModerationCoverage,
   ModerationStats,
 } from "@/lib/types";
-import { staggerDelay } from "@/lib/utils";
 
-const ACTION_ICON: Record<ModerationActionType, React.ReactNode> = {
+if (typeof window !== "undefined") {
-  delete_message: <Trash2 className="size-3.5" />,
+  gsap.registerPlugin(useGSAP);
-  mute_user: <MicOff className="size-3.5" />,
+}
-  warn_user: <MessageSquareWarning className="size-3.5" />,
-  kick_user: <UserX className="size-3.5" />,
-  ban_user: <Ban className="size-3.5" />,
-};
-
-const ACTION_LABEL: Record<ModerationActionType, string> = {
-  delete_message: "Delete",
-  mute_user: "Mute",
-  warn_user: "Warn",
-  kick_user: "Kick",
-  ban_user: "Ban",
-};
 
 export function ModerationView({
   initialStats,
   initialActions,
+  initialCoverage,
 }: {
   initialStats?: ModerationStats;
   initialActions?: ModerationAction[];
+  initialCoverage?: ModerationCoverage;
 }) {
   const {
     data: stats,
     isLoading,
     error,
-    mutate: mutateStats,
+    mutate,
   } = useModerationStats(initialStats);
-  const [statusFilter, setStatusFilter] = useState<string>("");
-  const [typeFilter, setTypeFilter] = useState<string>("");
   const { data: actions } = useModerationActions(
-    statusFilter || undefined,
+    undefined,
-    typeFilter || undefined,
+    undefined,
-    !statusFilter && !typeFilter ? initialActions : undefined,
+    initialActions,
   );
-  const liveActions = useLiveModeration(initialActions ?? [], 50);
+  const { data: hourly } = useHourlyModeration();
-  const { data: trends } = useModerationTrends(30);
+  const { data: trends } = useModerationTrends(14);
-  const { data: domains } = useTopFlaggedDomains(30);
-  const { data: channels } = useTopFlaggedChannels(30);
-  const { data: hourly } = useHourlyModeration(30);
   const { data: coverage } = useModerationCoverage(30);
-  const [drilldown, setDrilldown] = useState<string | null>(null);
-  const { data: categoryActions, isValidating: categoryLoading } =
-    useModerationByCategory(drilldown ? 30 : 0, drilldown);
-
-  const failedRate = stats ? stats.failed_rate * 100 : 0;
-
-  const byAction = stats?.by_action ?? {};
-  const segments = Object.entries(byAction).map(([k, _v]) => ({
-    value: 1,
-    color:
-      k === "ban_user" || k === "kick_user"
-        ? "var(--color-vermilion)"
-        : k === "warn_user"
-          ? "var(--color-amber)"
-          : "var(--color-signal)",
-    label: k,
-  }));
-
   const ambient = useAmbient();
+
+  const [filterMode, setFilterMode] = useState<"all" | "flagged" | "clean">(
+    "all",
+  );
+
+  const containerRef = useStaggerReveal<HTMLDivElement>(".mod-tile", {
+    stagger: 0.035,
+    y: 8,
+    dependencies: [stats],
+  });
+
+  const executed = stats?.executed ?? 0;
+  const failed = stats?.failed ?? 0;
+  const total = stats?.total || 1;
+  const failedRatio = failed / total;
+
   useEffect(() => {
-    ambient.set(
+    if (failedRatio > 0.15) ambient.set("vermilion", 0.5, "high failure rate");
-      failedRate > 20 ? "vermilion" : failedRate > 5 ? "amber" : "signal",
+    else if (failedRatio > 0.05) ambient.set("amber", 0.35, "moderate issues");
-      0.3 + Math.min(0.4, failedRate / 50),
+    else ambient.set("signal", 0.25, "moderation nominal");
-      "moderation",
+  }, [failedRatio, ambient]);
-    );
-  }, [failedRate, ambient]);
 
   if (error && !stats)
-    return <ErrorState error={error} onRetry={() => void mutateStats()} />;
+    return <ErrorState error={error} onRetry={() => void mutate()} />;
   if (!stats && isLoading)
     return (
-      <div className="space-y-5">
+      <div className="space-y-4">
-        <SkeletonMetricRow cols={4} />
+        <SkeletonMetricRow cols={3} />
-        <SkeletonPanel rows={5} />
+        <SkeletonPanel rows={6} />
-        <SkeletonRows rows={6} />
       </div>
     );
-  if (!stats)
+  if (!stats) return null;
-    return (
-      <ErrorState
-        error={error ?? new Error("No data")}
-        onRetry={() => void mutateStats()}
-      />
-    );
-
-  const statusOpts: SelectOption[] = [
-    { value: "", label: "All statuses" },
-    { value: "pending", label: "Pending" },
-    { value: "executed", label: "Executed" },
-    { value: "failed", label: "Failed" },
-  ];
-  const typeOpts: SelectOption[] = [
-    { value: "", label: "All actions" },
-    ...Object.keys(byAction).map((k) => ({
-      value: k,
-      label: ACTION_LABEL[k as ModerationActionType] ?? k,
-    })),
-  ];
 
   return (
-    <div className="space-y-5">
+    <PageTransition>
-      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+      <div ref={containerRef} className="space-y-4">
-        <MetricTile
+        {/* Precision Sub-Header Bar */}
-          label="Total actions"
+        <div className="mod-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
-          value={formatNumber(stats.total)}
+          <div className="flex items-center gap-2.5">
-          tone="signal"
+            <span
-          icon={<ShieldAlert className="size-3.5" />}
+              className={`h-2 w-2 rounded-full ${
-        />
+                failedRatio > 0.1
-        <MetricTile
+                  ? "bg-[#f43f5e] shadow-[0_0_8px_#f43f5e]"
-          label="Executed"
+                  : "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
-          value={formatNumber(stats.executed)}
+              }`}
-          tone="signal"
-          icon={<CheckCircle2 className="size-3.5" />}
-        />
-        <MetricTile
-          label="Failed"
-          value={formatNumber(stats.failed)}
-          tone={stats.failed > 0 ? "vermilion" : "neutral"}
-          icon={<XCircle className="size-3.5" />}
-        />
-        <MetricTile
-          label="Pending"
-          value={formatNumber(stats?.pending)}
-          tone={stats?.pending > 0 ? "amber" : "neutral"}
-          icon={<Clock className="size-3.5" />}
-        />
-      </div>
-
-      <div className="grid gap-5 lg:grid-cols-5">
-        <div className="lg:col-span-2">
-          {trends ? (
-            <TopicTrends trends={trends} />
-          ) : (
-            <SkeletonPanel rows={6} />
-          )}
-        </div>
-
-        <div className="lg:col-span-5">
-          <LiveModerationFeed actions={liveActions} />
-        </div>
-
-        {coverage ? (
-          <CoverageTiles coverage={coverage} />
-        ) : (
-          <SkeletonPanel rows={3} className="lg:col-span-5" />
-        )}
-
-        <div className="lg:col-span-2">
-          {domains ? (
-            <ScamDomains domains={domains} />
-          ) : (
-            <SkeletonPanel rows={6} />
-          )}
-        </div>
-        <div className="lg:col-span-2">
-          {hourly ? (
-            <ModerationHeatmap hours={hourly} />
-          ) : (
-            <SkeletonPanel rows={6} />
-          )}
-        </div>
-        <div className="lg:col-span-1">
-          {channels ? (
-            <TopChannels channels={channels} />
-          ) : (
-            <SkeletonPanel rows={6} />
-          )}
-        </div>
-
-        <div className="lg:col-span-3">
-          <CategoryDrilldown
-            trends={trends ?? { categories: [], severities: [], actions: [] }}
-            selected={drilldown}
-            actions={categoryActions ?? []}
-            loading={categoryLoading}
-            onSelect={setDrilldown}
-          />
-        </div>
-
-        <GlassPanel className="lg:col-span-2">
-          <SectionHeader eyebrow="health" title="Breakdown" />
-          <div className="flex items-center gap-5">
-            <Donut
-              segments={
-                segments.length
-                  ? segments
-                  : [
-                      {
-                        value: 1,
-                        color: "var(--color-ink-faint)",
-                        label: "none",
-                      },
-                    ]
-              }
-              centerLabel={`${Math.round(failedRate)}%`}
-              centerSub="fail rate"
             />
-            <div className="flex-1 space-y-2 text-sm">
+            <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
-              {Object.entries(byAction).map(([k, v]) => {
+              Moderation Intelligence Console
-                const count = typeof v === "number" ? v : null;
+            </h1>
-                return (
-                  <div key={k} className="flex items-center gap-2.5">
-                    <span className="text-ink-soft">
-                      {ACTION_ICON[k as ModerationActionType]}
-                    </span>
-                    <span className="flex-1 text-ink-soft">
-                      {ACTION_LABEL[k as ModerationActionType] ?? k}
-                    </span>
-                    {count !== null && (
-                      <span className="mono text-ink">{count}</span>
-                    )}
-                  </div>
-                );
-              })}
-              {Object.keys(byAction).length === 0 && (
-                <div className="text-xs text-ink-faint">
-                  No actions recorded yet.
-                </div>
-              )}
-            </div>
           </div>
-        </GlassPanel>
+          <div className="flex items-center gap-1.5 rounded-[5px] border border-white/[0.06] bg-white/[0.02] p-0.5">
-
+            {(["all", "flagged", "clean"] as const).map((mode) => (
-        <GlassPanel className="lg:col-span-3">
+              <button
-          <SectionHeader
+                key={mode}
-            eyebrow="filter"
+                type="button"
-            title="Action log"
+                onClick={() => setFilterMode(mode)}
-            action={
+                className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
-              <div className="flex items-center gap-2">
+                  filterMode === mode
-                <Filter className="size-3.5 text-ink-faint" />
+                    ? "bg-white/[0.08] text-white border border-white/[0.12]"
-                <Select
+                    : "text-[#8a8f98] hover:text-[#d0d6e0]"
-                  value={typeFilter}
+                }`}
-                  onChange={setTypeFilter}
+              >
-                  options={typeOpts}
+                {mode.toUpperCase()}
-                  size="sm"
+              </button>
-                  className="w-36"
-                />
-                <Select
-                  value={statusFilter}
-                  onChange={setStatusFilter}
-                  options={statusOpts}
-                  size="sm"
-                  className="w-32"
-                />
-                <button
-                  type="button"
-                  onClick={() =>
-                    downloadCsv(
-                      "moderation-actions.csv",
-                      (actions ?? []).map((a) => ({
-                        id: a.id,
-                        user: a.username ?? a.user_id,
-                        action_type: a.action_type,
-                        status: a.status,
-                        severity: a.severity ?? "",
-                        categories: (a.categories ?? []).join("|"),
-                        reason: a.reason ?? "",
-                        created_at: a.created_at
-                          ? new Date(a.created_at).toISOString()
-                          : "",
-                      })),
-                    )
-                  }
-                  className="rounded-full border border-hairline bg-white/[0.03] px-3 py-1 text-xs text-ink-soft transition-colors hover:bg-white/[0.06]"
-                  title="Download moderation actions as CSV"
-                >
-                  CSV
-                </button>
-              </div>
-            }
-          />
-          <div className="max-h-[60vh] space-y-1.5 overflow-y-auto pr-1">
-            {(actions ?? []).map((a, i) => (
-              <ActionRow key={a.id} a={a} index={i} />
             ))}
-            {(actions ?? []).length === 0 && (
-              <div className="py-10 text-center text-xs text-ink-faint">
-                No matching actions.
-              </div>
-            )}
           </div>
-        </GlassPanel>
-      </div>
-    </div>
-  );
-}
-
-function ActionRow({ a, index = 0 }: { a: ModerationAction; index?: number }) {
-  const tone =
-    a.status === "executed"
-      ? "signal"
-      : a.status === "failed"
-        ? "vermilion"
-        : "amber";
-  const icon = ACTION_ICON[a.action_type] ?? (
-    <AlertTriangle className="size-3.5" />
-  );
-  // Map moderation severity → design-system tone (reuse aiTone with a
-  // severity→status projection so "none" reads as clean/signal).
-  const severityTone =
-    a.severity == null
-      ? null
-      : aiTone(
-          a.severity === "none"
-            ? "clean"
-            : a.severity === "low" || a.severity === "medium"
-              ? "warn"
-              : "flagged",
-        );
-  return (
-    <div
-      className="animate-stagger flex items-start gap-3 rounded-[10px] border border-hairline bg-white/[0.03] p-3"
-      style={staggerDelay(index)}
-    >
-      <span
-        className={`mt-0.5 ${tone === "vermilion" ? "text-vermilion" : tone === "amber" ? "text-amber" : "text-signal"}`}
-      >
-        {icon}
-      </span>
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold text-ink">
-            {a.username ?? "unknown"}
-          </span>
-          <Badge tone={tone}>{a.status}</Badge>
-          <span className="mono ml-auto text-[0.6rem] text-ink-faint">
-            {formatRelativeTime(a.created_at)}
-          </span>
         </div>
-        {a.reason && (
+
-          <div className="mt-0.5 text-xs text-ink-soft">“{a.reason}”</div>
+        {/* Primary Metric Grid */}
-        )}
+        <div className="mod-tile grid gap-3 sm:grid-cols-3">
-        {severityTone && a.severity && (
+          <MetricTile
-          <div className="mt-1 flex flex-wrap items-center gap-1">
+            label="Total Audited"
-            <Badge tone={severityTone}>{a.severity}</Badge>
+            value={formatNumber(stats.total)}
-            {a.confidence != null && (
+            hint="Continuous LLM inspection"
-              <span className="mono text-[0.6rem] text-ink-faint">
+            icon={<Shield className="size-4" />}
-                conf {(a.confidence * 100).toFixed(0)}%
+          />
-              </span>
+          <MetricTile
-            )}
+            label="Clean Executed"
+            value={formatNumber(stats.executed)}
+            hint={`${Math.round((executed / total) * 100)}% execution rate`}
+            tone="signal"
+            icon={<CheckCircle2 className="size-4" />}
+          />
+          <MetricTile
+            label="Pending / Failed"
+            value={formatNumber(stats.pending + stats.failed)}
+            hint={`${stats.failed} failed items`}
+            tone={failedRatio > 0.05 ? "vermilion" : "neutral"}
+            icon={<AlertTriangle className="size-4" />}
+          />
+        </div>
+
+        {/* Live Moderation Stream */}
+        <div className="mod-tile">
+          <GlassPanel>
+            <SectionHeader
+              eyebrow="Realtime Feed"
+              title="Live Stream Audit Log"
+            />
+            <div className="mt-3">
+              <LiveModerationFeed
+                actions={
+                  actions?.filter((r) => {
+                    if (filterMode === "flagged") return r.status === "failed";
+                    if (filterMode === "clean") return r.status === "executed";
+                    return true;
+                  }) ?? []
+                }
+              />
+            </div>
+          </GlassPanel>
+        </div>
+
+        {/* Heatmap Section */}
+        {hourly && hourly.length > 0 && (
+          <div className="mod-tile">
+            <GlassPanel>
+              <SectionHeader
+                eyebrow="Distribution"
+                title="Hourly Incident Heatmap"
+              />
+              <div className="mt-3">
+                <ModerationHeatmap hours={hourly} />
+              </div>
+            </GlassPanel>
           </div>
         )}
-        {a.flags?.length ? (
-          <div className="mt-1 flex flex-wrap gap-1">
-            {a.flags.slice(0, 6).map((f) => (
-              <Badge key={f} tone="amber">
-                {f}
-              </Badge>
-            ))}
-          </div>
-        ) : null}
-        {a.evidence?.length ? (
-          <div className="mt-1 border-l-2 border-hairline pl-2 text-xs text-ink-faint">
-            &ldquo;{a.evidence[0]}&rdquo;
-          </div>
-        ) : null}
-        {a.executed_by && (
-          <div className="mono mt-0.5 text-[0.6rem] text-ink-faint">
-            by {a.executed_by}
-            {a.executed_at ? ` · ${formatRelativeTime(a.executed_at)}` : ""}
-          </div>
-        )}
-        {a.content && (
-          <div className="mt-1 line-clamp-2 rounded-[8px] bg-white/[0.03] px-2 py-1 text-xs text-ink-faint">
-            {a.content}
-          </div>
-        )}
-        {a.error && (
-          <div className="mt-1 text-xs text-vermilion">{a.error}</div>
-        )}
       </div>
-    </div>
+    </PageTransition>
   );
 }

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,111 +89,134 @@ export function RecordingsView({
     );
 
   return (
-    <GlassPanel>
+    <div className="space-y-4">
-      <SectionHeader
+      {/* Tactical HUD Header Bar */}
-        eyebrow="voice captures"
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
-        title="Recordings"
+        <div className="flex items-center gap-3">
-        action={
+          <div className="relative flex size-3 items-center justify-center">
-          <span className="mono text-xs text-ink-faint">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
-            {(items ?? []).length} clips
+            <span className="relative inline-flex size-2 rounded-full bg-signal" />
-          </span>
+          </div>
-        }
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
-      />
+            RECORDINGS · TAPE_DECK
-      {(items ?? []).length === 0 ? (
+          </h1>
-        <EmptyState
-          icon={<Headphones className="size-7" />}
-          title="No recordings"
-          description="Voice clips captured by the bot appear here."
-        />
-      ) : (
-        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-          {(items ?? []).map((r, i) => {
-            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] ${
-                  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} />
-                  <div className="min-w-0 flex-1">
-                    <div className="truncate text-sm font-semibold text-ink">
-                      {r.username}
-                    </div>
-                    <div className="flex items-center gap-1.5 text-[0.65rem] text-ink-faint">
-                      <Hash className="size-3" />
-                      <span className="truncate">
-                        {r.channel_name ?? "voice"}
-                      </span>
-                      <span className="text-ink-faint/60">·</span>
-                      <span className="mono">
-                        {formatRelativeTime(r.created_at)}
-                      </span>
-                    </div>
-                  </div>
-                  {isPlaying && <NowPlayingChip />}
-                  {up && !isPlaying && <Badge tone={up.tone}>{up.label}</Badge>}
-                  <span className="mono text-[0.65rem] text-ink-faint">
-                    {formatBytes(r.size_bytes)}
-                  </span>
-                </div>
-
-                {r.download_url ? (
-                  <RecordingAudioPlayer
-                    src={r.download_url}
-                    label={`Voice recording by ${r.username}`}
-                    onPlayStateChange={(active) =>
-                      setPlayingId((prev) => {
-                        if (active) return r.id;
-                        // Only clear if THIS card was the one playing.
-                        return prev === r.id ? null : prev;
-                      })
-                    }
-                  />
-                ) : (
-                  <div className="flex items-center gap-1.5 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-faint">
-                    <Loader2 className="size-3.5 animate-spin" />
-                    {r.upload_status === "pending"
-                      ? "Upload pending…"
-                      : r.upload_error
-                        ? r.upload_error
-                        : "Processing…"}
-                  </div>
-                )}
-
-                <div className="flex items-center gap-2">
-                  {r.download_url && (
-                    <a
-                      href={r.download_url}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-1.5 rounded-[9px] border border-hairline px-2.5 py-1.5 text-xs text-ink-soft hover:text-ink hover:border-signal/40"
-                    >
-                      <Download className="size-3.5" /> Download
-                    </a>
-                  )}
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="ml-auto"
-                    onClick={() => onDelete(r.id)}
-                    disabled={del.isPending}
-                  >
-                    <Trash2 className="size-3.5" /> Delete
-                  </Button>
-                </div>
-              </GlassCard>
-            );
-          })}
         </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">
-    </GlassPanel>
+          <span className="text-ink-faint">CLIPS:</span>
+          <span className="font-bold text-signal">{(items ?? []).length}</span>
+        </div>
+      </div>
+
+      <GlassPanel>
+        <SectionHeader
+          eyebrow="voice captures"
+          title="Recordings"
+          action={
+            <span className="mono text-xs text-ink-faint">
+              {(items ?? []).length} clips
+            </span>
+          }
+        />
+        {(items ?? []).length === 0 ? (
+          <EmptyState
+            icon={<Headphones className="size-7" />}
+            title="No recordings"
+            description="Voice clips captured by the bot appear here."
+          />
+        ) : (
+          <div
+            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={`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)]"
+                      : ""
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <Avatar src={r.avatar_url} name={r.username} size={38} />
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate text-sm font-semibold text-ink">
+                        {r.username}
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[0.65rem] text-ink-faint">
+                        <Hash className="size-3" />
+                        <span className="truncate">
+                          {r.channel_name ?? "voice"}
+                        </span>
+                        <span className="text-ink-faint/60">·</span>
+                        <span className="mono">
+                          {formatRelativeTime(r.created_at)}
+                        </span>
+                      </div>
+                    </div>
+                    {isPlaying && <NowPlayingChip />}
+                    {up && !isPlaying && (
+                      <Badge tone={up.tone}>{up.label}</Badge>
+                    )}
+                    <span className="mono text-[0.65rem] text-ink-faint">
+                      {formatBytes(r.size_bytes)}
+                    </span>
+                  </div>
+
+                  {r.download_url ? (
+                    <RecordingAudioPlayer
+                      src={r.download_url}
+                      label={`Voice recording by ${r.username}`}
+                      onPlayStateChange={(active) =>
+                        setPlayingId((prev) => {
+                          if (active) return r.id;
+                          // Only clear if THIS card was the one playing.
+                          return prev === r.id ? null : prev;
+                        })
+                      }
+                    />
+                  ) : (
+                    <div className="flex items-center gap-1.5 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-faint">
+                      <Loader2 className="size-3.5 animate-spin" />
+                      {r.upload_status === "pending"
+                        ? "Upload pending…"
+                        : r.upload_error
+                          ? r.upload_error
+                          : "Processing…"}
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-2">
+                    {r.download_url && (
+                      <a
+                        href={r.download_url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-1.5 rounded-[9px] border border-hairline px-2.5 py-1.5 text-xs text-ink-soft hover:text-ink hover:border-signal/40"
+                      >
+                        <Download className="size-3.5" /> Download
+                      </a>
+                    )}
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="ml-auto"
+                      onClick={() => onDelete(r.id)}
+                      disabled={del.isPending}
+                    >
+                      <Trash2 className="size-3.5" /> Delete
+                    </Button>
+                  </div>
+                </GlassCard>
+              );
+            })}
+          </div>
+        )}
+      </GlassPanel>
+    </div>
   );
 }
 

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

@@ -1,6 +1,8 @@
 "use client";
 
 import {
+  AudioWaveform,
+  Disc,
   Headphones,
   Mic,
   MicOff,
@@ -16,6 +18,7 @@ import { Button, GlassPanel, toast } from "@/components/primitives";
 import {
   EmptyState,
   ErrorState,
+  PageTransition,
   SectionHeader,
   SkeletonPanel,
 } from "@/components/shared";
@@ -29,6 +32,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";
 
@@ -59,259 +63,218 @@ export function VoiceView({
   const [channelId, setChannelId] = useState<string | null>(
     initialStatus?.activeChannelId ?? null,
   );
-  const [micOn, setMicOn] = useState(false);
   const [micVol, setMicVol] = useState(100);
   const [listenVol, setListenVol] = useState(75);
 
+  const containerRef = useStaggerReveal<HTMLDivElement>(".voice-tile", {
+    stagger: 0.04,
+    y: 8,
+    dependencies: [status],
+  });
+
   useEffect(() => {
     const unsub = subscribe(ws);
     return unsub;
   }, [subscribe, ws]);
 
   useEffect(() => {
-    if (status?.connected) ambient.set("signal", 0.55, "voice live");
+    if (status?.connected) ambient.set("signal", 0.45, "voice active");
-    else ambient.set("vermilion", 0.35, "voice idle");
+    else ambient.set("vermilion", 0.25, "voice disconnected");
   }, [status?.connected, ambient]);
 
   if (error && !status)
     return <ErrorState error={error} onRetry={() => void mutate()} />;
   if (!status && isLoading)
     return (
-      <div className="space-y-5">
+      <div className="space-y-4">
-        <SkeletonPanel rows={2} />
+        <SkeletonPanel rows={3} />
-        <div className="grid gap-5 lg:grid-cols-3">
+        <SkeletonPanel rows={5} />
-          <SkeletonPanel className="lg:col-span-2" rows={4} />
-          <SkeletonPanel rows={4} />
-        </div>
       </div>
     );
 
   const connected = status?.connected ?? false;
-  const listenBars = Array.from(listen.levels.values()).slice(0, 32);
-  const micBars = mic.micLevel
-    ? Array.from({ length: 12 }, (_, i) =>
-        Math.max(
-          0.08,
-          Math.min(1, mic.micLevel * (1 - i * 0.06) + (i % 3) * 0.05),
-        ),
-      )
-    : [];
 
   const onConnect = async () => {
     if (!guildId || !channelId) {
-      toast({ title: "Pick a guild + channel", tone: "vermilion" });
+      toast({ title: "Select target channel", tone: "vermilion" });
       return;
     }
     try {
       await connect.mutateAsync({ guildId, channelId });
-      toast({ title: "Connected to voice", tone: "signal" });
+      toast({ title: "Connected to voice channel", tone: "signal" });
     } catch (e) {
       toast({
-        title: "Connect failed",
+        title: "Connection failed",
         description: String(e),
         tone: "vermilion",
       });
     }
   };
 
-  const onMic = async (on: boolean) => {
+  const onDisconnect = async () => {
     try {
-      await mic.mutateAsync(on);
+      await disconnect.mutateAsync();
-      setMicOn(on);
+      toast({ title: "Disconnected from voice", tone: "neutral" });
     } catch (e) {
-      toast({ title: "Mic error", description: String(e), tone: "vermilion" });
+      toast({
+        title: "Disconnect failed",
+        description: String(e),
+        tone: "vermilion",
+      });
     }
   };
 
   return (
-    <div className="space-y-5">
+    <PageTransition>
-      <GlassPanel>
+      <div ref={containerRef} className="space-y-4">
-        <div className="flex flex-wrap items-center justify-between gap-3">
+        {/* Precision Sub-Header Bar */}
-          <GuildChannelPicker
+        <div className="voice-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
-            mode="voice"
+          <div className="flex items-center gap-2.5">
-            guildsInitial={initialGuilds}
+            <span
-            guildId={guildId}
+              className={`h-2 w-2 rounded-full ${
-            channelId={channelId}
-            onChange={(g, c) => {
-              setGuildId(g);
-              setChannelId(c);
-            }}
-          />
-          <div className="flex items-center gap-2">
-            {connected ? (
-              <Button
-                variant="danger"
-                size="sm"
-                onClick={() => disconnect.mutate()}
-                disabled={disconnect.isPending}
-              >
-                <PhoneOff className="size-4" /> Disconnect
-              </Button>
-            ) : (
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={onConnect}
-                disabled={connect.isPending}
-              >
-                <Radio className="size-4" /> Connect
-              </Button>
-            )}
-          </div>
-        </div>
-
-        <div className="mt-3 flex flex-wrap items-center gap-2">
-          <Button
-            variant={micOn ? "primary" : "outline"}
-            size="sm"
-            onClick={() => onMic(!micOn)}
-            disabled={mic.isPending}
-            aria-pressed={micOn}
-          >
-            {micOn ? <Mic className="size-4" /> : <MicOff className="size-4" />}
-            {micOn ? "Mic live" : "Push-to-talk"}
-          </Button>
-          {micOn && (
-            <div
-              className="flex items-center gap-2 rounded-[10px] border border-signal/30 bg-signal/[0.06] px-3 py-1.5"
-              role="status"
-              aria-label="Microphone level meter"
-            >
-              <Mic className="size-4 text-signal" />
-              <Equalizer bars={micBars} className="w-28" />
-            </div>
-          )}
-          <Button
-            variant={listen.active ? "primary" : "outline"}
-            size="sm"
-            onClick={() => listen.toggle(!listen.active)}
-          >
-            {listen.active ? (
-              <Headphones className="size-4" />
-            ) : (
-              <Volume2 className="size-4" />
-            )}
-            {listen.active ? "Listening" : "Listen in"}
-          </Button>
-          {listen.active && (
-            <div className="flex items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-1.5">
-              <Waves className="size-4 text-signal" />
-              <Equalizer bars={listenBars} className="w-40" />
-            </div>
-          )}
-          <div className="ml-auto flex items-center gap-3">
-            <label className="flex items-center gap-2 text-xs text-ink-faint">
-              <MicOff className="size-3.5" />
-              <input
-                type="range"
-                min={0}
-                max={100}
-                value={micVol}
-                onChange={(e) => {
-                  const v = Number(e.target.value);
-                  setMicVol(v);
-                  mic.setVolume(v);
-                }}
-                aria-label="Mic transmit volume"
-                className="h-1 w-24 cursor-pointer accent-[var(--color-signal)]"
-              />
-              <span className="mono w-8 text-right">{micVol}%</span>
-            </label>
-            <label className="flex items-center gap-2 text-xs text-ink-faint">
-              <Volume2 className="size-3.5" />
-              <input
-                type="range"
-                min={0}
-                max={100}
-                value={listenVol}
-                onChange={(e) => {
-                  const v = Number(e.target.value);
-                  setListenVol(v);
-                  listen.setVolume(v);
-                }}
-                aria-label="Listen volume"
-                className="h-1 w-24 cursor-pointer accent-[var(--color-signal)]"
-              />
-              <span className="mono w-8 text-right">{listenVol}%</span>
-            </label>
-          </div>
-        </div>
-      </GlassPanel>
-
-      <div className="grid gap-5 lg:grid-cols-3">
-        <GlassPanel className="lg:col-span-2">
-          <SectionHeader
-            eyebrow="stage"
-            title="Live speakers"
-            action={
-              <span className="mono text-xs text-ink-faint">
-                {speakers.length} present
-              </span>
-            }
-          />
-          {speakers.length === 0 ? (
-            <EmptyState
-              icon={<MicOff className="size-7" />}
-              title={connected ? "Silent right now" : "Not connected"}
-              description={
                 connected
-                  ? "Speakers appear as they talk."
+                  ? "bg-[#10b981] shadow-[0_0_8px_#10b981]"
-                  : "Connect to a voice channel to see presence."
+                  : "bg-[#8a8f98]"
-              }
+              }`}
             />
-          ) : (
+            <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
-            <>
+              Voice Spectrum & Stage Controls
-              <VoiceStage speakers={speakers} />
+            </h1>
-              <div className="mt-2 flex flex-wrap justify-center gap-2">
+          </div>
-                {speakers.map((sp) => (
+          <div className="flex items-center gap-2 font-mono text-[11px]">
-                  <span
+            <span className="text-[#8a8f98]">STAGE:</span>
-                    key={sp.userId}
+            <span
-                    className={`mono flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${
+              className={`rounded px-1.5 py-0.5 font-medium border ${
-                      sp.speaking
+                connected
-                        ? "border-signal/40 bg-signal/10 text-signal"
+                  ? "border-[#10b981]/30 bg-[#10b981]/10 text-[#10b981]"
-                        : "border-hairline bg-white/5 text-ink-soft"
+                  : "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
-                    }`}
+              }`}
-                  >
+            >
-                    <span
+              {connected ? "LIVE_BRIDGE" : "OFFLINE"}
-                      className={`size-1.5 rounded-full ${sp.speaking ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
+            </span>
-                    />
+          </div>
-                    {sp.username}
+        </div>
-                  </span>
-                ))}
-              </div>
-            </>
-          )}
-        </GlassPanel>
 
-        <GlassPanel>
+        {/* Channel Router Stage */}
-          <SectionHeader eyebrow="links" title="Connections" />
+        <div className="voice-tile">
-          <div className="space-y-2">
+          <GlassPanel className="p-4">
-            {(status?.connections ?? []).map((c) => (
+            <div className="flex flex-wrap items-center justify-between gap-3">
-              <div
+              <div className="flex-1 min-w-[240px]">
-                key={`${c.guildId}-${c.channelId}`}
+                <GuildChannelPicker
-                className="flex items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-sm"
+                  guildId={guildId}
-              >
+                  channelId={channelId}
-                <span className="size-2 rounded-full bg-signal" />
+                  guildsInitial={initialGuilds}
-                <span className="flex-1 truncate text-ink-soft">
+                  onChange={(g, c) => {
-                  {c.channelName}
+                    setGuildId(g);
-                </span>
+                    setChannelId(c);
-                <span className="mono text-[0.6rem] text-ink-faint">
+                  }}
-                  {new Date(c.connectedAt).toLocaleTimeString()}
+                  mode="voice"
-                </span>
+                />
               </div>
-            ))}
+              <div className="flex items-center gap-2">
-            {(status?.connections ?? []).length === 0 && (
+                {connected ? (
-              <div className="py-6 text-center text-xs text-ink-faint">
+                  <Button
-                No active links
+                    variant="danger"
+                    size="md"
+                    onClick={onDisconnect}
+                    className="gap-1.5"
+                  >
+                    <PhoneOff className="size-3.5" />
+                    Disconnect
+                  </Button>
+                ) : (
+                  <Button
+                    variant="primary"
+                    size="md"
+                    onClick={onConnect}
+                    className="gap-1.5"
+                  >
+                    <Radio className="size-3.5" />
+                    Connect Bridge
+                  </Button>
+                )}
               </div>
-            )}
+            </div>
-          </div>
+          </GlassPanel>
-          <div className="mt-3 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-soft">
+        </div>
-            <span className="mono text-ink-faint">channel</span>{" "}
+
-            {status?.activeChannelName ?? "—"}
+        {/* Voice Stage Grid */}
-          </div>
+        <div className="grid gap-3 lg:grid-cols-3">
-        </GlassPanel>
+          <GlassPanel className="voice-tile lg:col-span-2">
+            <SectionHeader
+              eyebrow="Participants"
+              title="Active Stage Members"
+            />
+            <div className="mt-4 min-h-[160px]">
+              <VoiceStage speakers={speakers} />
+            </div>
+          </GlassPanel>
+
+          <GlassPanel className="voice-tile flex flex-col justify-between">
+            <div>
+              <SectionHeader
+                eyebrow="Telemetry"
+                title="Input / Output Mix"
+              />
+              <div className="mt-4 space-y-4">
+                <div>
+                  <div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
+                    <span className="flex items-center gap-1.5">
+                      <Mic className="size-3.5 text-[#7170ff]" />
+                      Mic Sensitivity
+                    </span>
+                    <span className="font-mono text-[11px] text-[#8a8f98]">
+                      {micVol}%
+                    </span>
+                  </div>
+                  <input
+                    type="range"
+                    min={0}
+                    max={150}
+                    value={micVol}
+                    onChange={(e) => {
+                      const v = Number(e.target.value);
+                      setMicVol(v);
+                      mic.setVolume(v / 100);
+                    }}
+                    className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#7170ff]"
+                  />
+                </div>
+
+                <div>
+                  <div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
+                    <span className="flex items-center gap-1.5">
+                      <Volume2 className="size-3.5 text-[#10b981]" />
+                      Monitor Output
+                    </span>
+                    <span className="font-mono text-[11px] text-[#8a8f98]">
+                      {listenVol}%
+                    </span>
+                  </div>
+                  <input
+                    type="range"
+                    min={0}
+                    max={150}
+                    value={listenVol}
+                    onChange={(e) => {
+                      const v = Number(e.target.value);
+                      setListenVol(v);
+                      listen.setVolume(v / 100);
+                    }}
+                    className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#10b981]"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 border-t border-white/[0.06] pt-3">
+              <div className="font-mono text-[10px] text-[#8a8f98]">
+                CODEC: OPUS 48KHZ · LOW_LATENCY
+              </div>
+            </div>
+          </GlassPanel>
+        </div>
       </div>
-    </div>
+    </PageTransition>
   );
 }

services/frontend/src/app/globals.css

@@ -3,88 +3,98 @@
 @custom-variant dark (&:is(.dark *));
 
 /*
- * GMW — Ambient Ops Console design system.
+ * GMW — Linear Precision Clean Dark Design System
  *
- * A signal-driven, immersive ops aesthetic. Hierarchy comes from scale/weight
+ * Inspired by Linear's ultra-precise, dark-mode native interface.
- * and tonal surface blocks, not borders. The whole app sits behind a live
+ * Built on achromatic luminance hierarchy, near-black canvas (#08090a),
- * WebGL haze (see components/ambient) tinted by a semantic signal:
+ * ultra-crisp hairline borders, subtle indigo/violet accents (#5e6ad2 / #7170ff),
- *   lime      = OK / live
+ * and buttery smooth GSAP-driven micro-interactions.
- *   amber     = warn
- *   vermilion = flag / danger
  */
 
 @theme {
-  /* ── Surfaces (dark-first; light overrides below) ── */
+  /* ── Canvas & Surface Stack (Luminance Stacking) ── */
-  --color-canvas: oklch(0.12 0.014 70);
+  --color-canvas: #08090a;
-  --color-canvas-2: oklch(0.16 0.02 70);
+  --color-canvas-2: #0f1011;
-  --color-surface: oklch(0.2 0.022 70 / 0.45);
+  --color-surface: rgba(255, 255, 255, 0.035);
-  --color-surface-2: oklch(0.26 0.024 70 / 0.45);
+  --color-surface-2: rgba(255, 255, 255, 0.06);
+  --color-surface-elevated: #191a1b;
+  --color-surface-hover: rgba(255, 255, 255, 0.08);
 
-  /* ── Ink ── */
+  /* ── Typography & Ink ── */
-  --color-ink: oklch(0.95 0.008 75);
+  --color-ink: #f7f8f8;
-  --color-ink-soft: oklch(0.66 0.02 75);
+  --color-ink-soft: #d0d6e0;
-  --color-ink-faint: oklch(0.5 0.02 75);
+  --color-ink-muted: #8a8f98;
+  --color-ink-faint: #62666d;
 
-  /* ── Structural ── */
+  /* ── Hairline Structural Borders ── */
-  --color-hairline: oklch(1 0 0 / 0.1);
+  --color-hairline: rgba(255, 255, 255, 0.08);
+  --color-hairline-subtle: rgba(255, 255, 255, 0.05);
+  --color-hairline-focus: rgba(255, 255, 255, 0.16);
   --hairline-w: 1px;
 
-  /* ── Semantic signals (monochrome: tone = luminance steps) ── */
+  /* ── Brand & Accent Signals (Subdued Precision) ── */
-  --color-signal: oklch(0.97 0 0);
+  --color-brand: #5e6ad2;
-  --color-signal-ink: oklch(0.1 0 0);
+  --color-brand-accent: #7170ff;
-  --color-signal-glow: oklch(1 0 0 / 0.35);
+  --color-brand-hover: #828fff;
-  --color-amber: oklch(0.72 0 0);
+  --color-brand-subtle: rgba(94, 106, 210, 0.15);
-  --color-vermilion: oklch(0.85 0 0);
-  --color-vermilion-glow: oklch(1 0 0 / 0.45);
 
-  --color-ring: var(--color-signal);
+  --color-signal: #7170ff;
+  --color-signal-ink: #ffffff;
+  --color-signal-glow: rgba(113, 112, 255, 0.25);
 
-  /* ── Fonts ── */
+  /* Semantic status colors (crisp, purposeful) */
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --color-status-success: #10b981;
-  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --color-status-success-subtle: rgba(16, 185, 129, 0.15);
-  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
+  --color-amber: #f59e0b;
+  --color-amber-subtle: rgba(245, 158, 11, 0.15);
+  --color-vermilion: #f43f5e;
+  --color-vermilion-subtle: rgba(244, 63, 94, 0.15);
+  --color-vermilion-glow: rgba(244, 63, 94, 0.3);
 
-  /* ── Radii ── */
+  --color-ring: var(--color-brand-accent);
-  --radius-r: 16px;
+
-  --radius-r-panel: 12px;
+  /* ── Typography Stack ── */
-  --radius-r-control: 9px;
+  --font-sans: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-display: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+
+  /* ── Radii (Refined, tighter precision) ── */
+  --radius-r: 10px;
+  --radius-r-panel: 8px;
+  --radius-r-control: 6px;
   --radius-r-pill: 9999px;
 }
 
-/* ── Light theme overrides ── */
+/* ── Light Theme Fallbacks ── */
 .light {
   color-scheme: light;
-  --color-canvas: oklch(0.96 0.012 80);
+  --color-canvas: #f7f8f8;
-  --color-canvas-2: oklch(0.92 0.014 80);
+  --color-canvas-2: #f3f4f5;
-  --color-surface: oklch(1 0 0 / 0.7);
+  --color-surface: rgba(0, 0, 0, 0.03);
-  --color-surface-2: oklch(1 0 0 / 0.5);
+  --color-surface-2: rgba(0, 0, 0, 0.05);
+  --color-surface-elevated: #ffffff;
+  --color-surface-hover: rgba(0, 0, 0, 0.06);
 
-  --color-ink: oklch(0.22 0.02 70);
+  --color-ink: #171717;
-  --color-ink-soft: oklch(0.46 0.02 70);
+  --color-ink-soft: #404040;
-  --color-ink-faint: oklch(0.6 0.02 70);
+  --color-ink-muted: #737373;
+  --color-ink-faint: #a3a3a3;
 
-  --color-hairline: oklch(0.22 0.02 70 / 0.12);
+  --color-hairline: rgba(0, 0, 0, 0.08);
-}
+  --color-hairline-subtle: rgba(0, 0, 0, 0.04);
-
+  --color-hairline-focus: rgba(0, 0, 0, 0.18);
-/* Light-theme scrollbar + selection tuned for pale canvas */
-.light ::-webkit-scrollbar-thumb {
-  background: oklch(0.22 0.02 70 / 0.2);
-}
-.light ::-webkit-scrollbar-thumb:hover {
-  background: oklch(0.22 0.02 70 / 0.34);
-}
-.light ::selection {
-  background: oklch(0.2 0 0 / 0.9);
-  color: oklch(1 0 0);
 }
 
 @layer base {
   * {
     @apply border-transparent;
+    font-feature-settings: "cv01", "ss03";
   }
 
   html {
     @apply font-sans antialiased scroll-smooth;
+    background-color: var(--color-canvas);
+    color: var(--color-ink);
   }
 
   body {
@@ -93,72 +103,87 @@
   }
 
   ::selection {
-    background: var(--color-signal-glow);
+    background: rgba(113, 112, 255, 0.28);
-    color: inherit;
+    color: #ffffff;
   }
 
-  /* Scrollbar */
+  /* Linear-style minimalist slim scrollbar */
   ::-webkit-scrollbar {
-    width: 8px;
+    width: 6px;
-    height: 8px;
+    height: 6px;
   }
   ::-webkit-scrollbar-track {
     background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background: oklch(1 0 0 / 0.14);
+    background: rgba(255, 255, 255, 0.12);
-    border-radius: 999px;
+    border-radius: 9999px;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: oklch(1 0 0 / 0.26);
+    background: rgba(255, 255, 255, 0.22);
   }
 
   :focus-visible {
-    outline: 2px solid var(--color-signal);
+    outline: 2px solid var(--color-brand-accent);
     outline-offset: 2px;
   }
 }
 
 @layer components {
-  /* Glass panel — the workhorse container. Floating, blurred, faint glow. */
+  /* Precision Surface Panel (Linear Card) */
   .glass {
     background: var(--color-surface);
-    border: var(--hairline-w) solid var(--color-hairline);
+    border: 1px solid var(--color-hairline);
     border-radius: var(--radius-r);
-    backdrop-filter: blur(18px) saturate(140%);
+    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(18px) saturate(140%);
+    -webkit-backdrop-filter: blur(12px);
     box-shadow:
-      0 1px 0 0 oklch(1 0 0 / 0.06) inset,
+      0 1px 0 0 rgba(255, 255, 255, 0.03) inset,
-      0 18px 50px -28px oklch(0 0 0 / 0.8);
+      0 12px 32px -16px rgba(0, 0, 0, 0.7);
+    transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
   }
 
   .glass-2 {
     background: var(--color-surface-2);
-    border: var(--hairline-w) solid var(--color-hairline);
+    border: 1px solid var(--color-hairline-subtle);
     border-radius: var(--radius-r-panel);
-    backdrop-filter: blur(14px) saturate(130%);
+    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(14px) saturate(130%);
+    -webkit-backdrop-filter: blur(8px);
   }
 
-  /* Section label — small uppercase mono eyebrow */
+  /* Linear-style subtle interactive hover card */
+  .linear-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: var(--radius-r-panel);
+    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .linear-card:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    transform: translateY(-1px);
+  }
+
+  /* Precision Eyebrow Header */
   .eyebrow {
     font-family: var(--font-mono);
     font-size: 0.68rem;
-    letter-spacing: 0.18em;
+    font-weight: 500;
+    letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--color-ink-faint);
+    color: var(--color-ink-muted);
   }
 
+  /* Micro-Pill Tag */
   .pill {
     display: inline-flex;
     align-items: center;
-    gap: 0.4rem;
+    gap: 0.35rem;
-    padding: 0.22rem 0.7rem;
+    padding: 0.18rem 0.55rem;
     border-radius: var(--radius-r-pill);
-    font-size: 0.72rem;
+    font-size: 0.7rem;
-    font-weight: 600;
+    font-weight: 500;
-    letter-spacing: 0.01em;
+    background: rgba(255, 255, 255, 0.04);
-    background: oklch(1 0 0 / 0.06);
     border: 1px solid var(--color-hairline);
     color: var(--color-ink-soft);
   }
@@ -166,294 +191,83 @@
   .mono {
     font-family: var(--font-mono);
     font-variant-numeric: tabular-nums;
-    letter-spacing: -0.01em;
   }
 
+  /* Display Typography (Compressed Linear-style tracking) */
   .display {
-    font-family: var(--font-display);
+    font-family: var(--font-sans);
-    font-weight: 800;
+    font-weight: 600;
-    letter-spacing: -0.03em;
+    letter-spacing: -0.035em;
-    line-height: 0.96;
+    line-height: 1.05;
   }
 }
 
 @layer utilities {
-  .text-signal { color: var(--color-signal); }
+  .text-signal { color: var(--color-brand-accent); }
+  .text-brand { color: var(--color-brand-accent); }
   .text-amber { color: var(--color-amber); }
   .text-vermilion { color: var(--color-vermilion); }
+  .text-success { color: var(--color-status-success); }
   .text-ink-soft { color: var(--color-ink-soft); }
+  .text-ink-muted { color: var(--color-ink-muted); }
   .text-ink-faint { color: var(--color-ink-faint); }
 
-  /* Fluid hero title — never overflows on small screens. */
+  .hero-clamp {
-  .hero-clamp { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); }
+    font-size: clamp(1.85rem, 1.2rem + 3.5vw, 2.5rem);
+    letter-spacing: -0.04em;
+    font-weight: 600;
+  }
 
   .glow-signal {
-    text-shadow: 0 0 22px var(--color-signal-glow);
+    text-shadow: 0 0 16px var(--color-signal-glow);
-  }
-  .glow-vermilion {
-    text-shadow: 0 0 22px var(--color-vermilion-glow);
-  }
-
-  /* animated scan line for live headers */
-  .scan-line {
-    position: relative;
-    overflow: hidden;
-  }
-  .scan-line::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 1px;
-    width: 100%;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      var(--color-signal) 25%,
-      var(--color-signal) 75%,
-      transparent
-    );
-    background-size: 200% 100%;
-    animation: scan 2.8s linear infinite;
-    opacity: 0.7;
   }
 
   .ring-focus {
-    transition: box-shadow 0.18s ease, border-color 0.18s ease;
+    transition: box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
   }
   .ring-focus:hover {
-    box-shadow: 0 0 0 1px var(--color-signal-glow);
+    border-color: rgba(255, 255, 255, 0.16);
+  }
+  .ring-focus:focus-visible {
+    box-shadow: 0 0 0 2px var(--color-brand-accent);
   }
 }
 
+/* ═══ Micro Navigation Elements ═══ */
+.nav-dock-item {
+  position: relative;
+  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.nav-dock-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--color-ink);
+}
+.nav-dock-item.is-active {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
 /* ── Keyframes ── */
-@keyframes scan {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-@keyframes eq {
-  0%, 100% { transform: scaleY(0.25); }
-  30% { transform: scaleY(1); }
-  60% { transform: scaleY(0.5); }
-}
-@keyframes fade-up {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
 @keyframes spin-disc {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
 @keyframes pulse-ring {
-  0% { transform: scale(0.85); opacity: 1; }
+  0% { transform: scale(0.85); opacity: 0.8; }
-  100% { transform: scale(2.6); opacity: 0; }
+  100% { transform: scale(2.2); opacity: 0; }
-}
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-@keyframes breathe {
-  0%, 100% { opacity: 0.55; }
-  50% { opacity: 1; }
 }
 
-.animate-eq {
+.animate-spin-disc { animation: spin-disc 10s linear infinite; }
-  animation: eq 0.9s ease-in-out infinite;
+.animate-pulse-ring { animation: pulse-ring 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
-  transform-origin: bottom;
-}
-.animate-spin-disc { animation: spin-disc 9s linear infinite; }
-.animate-spin-disc.paused { animation-play-state: paused; }
-.animate-pulse-ring { animation: pulse-ring 1.6s ease-out infinite; }
-.animate-shimmer {
-  background: linear-gradient(
-    90deg,
-    transparent,
-    oklch(0.86 0.19 128 / 0.1),
-    transparent
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.6s infinite;
-}
-.animate-breathe { animation: breathe 3.5s ease-in-out infinite; }
-
-/* Page-enter: subtle rise+settle. Respect reduced-motion (handled globally). */
-.animate-fade-up {
-  animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-/* List stagger: each child rises in sequence. Pair with inline
-   style={{ animationDelay }} set via staggerDelay(). */
-.animate-stagger {
-  animation: fade-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-/* Toast: slide up + settle from the dock edge. */
-.animate-toast-in {
-  animation: toast-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-@keyframes toast-in {
-  from {
-    opacity: 0;
-    transform: translateY(14px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-/* ═══ Game-menu nav (monochrome) ═══
-   Corner brackets + one-shot light sweep + staggered entrance.
-   Pure transform/opacity — compositor only. */
-
-.game-nav-item {
-  --i: 0;
-  position: relative;
-  isolation: isolate;
-  animation: nav-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
-  animation-delay: calc(var(--i) * 45ms);
-}
-/* corner brackets on hover/active */
-.game-nav-item::before,
-.game-nav-item::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  pointer-events: none;
-}
-.game-nav-item::before {
-  border-left: 2px solid currentColor;
-  border-top: 2px solid currentColor;
-  border-top-left-radius: 13px;
-  clip-path: polygon(0 0, 62% 0, 62% 30%, 30% 30%, 30% 100%, 0 100%);
-}
-.game-nav-item::after {
-  border-right: 2px solid currentColor;
-  border-bottom: 2px solid currentColor;
-  border-bottom-right-radius: 13px;
-  clip-path: polygon(100% 100%, 38% 100%, 38% 70%, 70% 70%, 70% 0, 100% 0);
-}
-.game-nav-item:hover::before,
-.game-nav-item:hover::after,
-.game-nav-item.is-active::before,
-.game-nav-item.is-active::after {
-  opacity: 1;
-}
-/* one-shot sweep */
-.game-nav-item .game-sweep {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  border-radius: inherit;
-  pointer-events: none;
-}
-.game-nav-item .game-sweep > i {
-  position: absolute;
-  top: -20%;
-  bottom: -20%;
-  width: 34%;
-  left: -60%;
-  background: linear-gradient(
-    105deg,
-    transparent,
-    oklch(1 0 0 / 0.16),
-    transparent
-  );
-  transform: skewX(-14deg);
-}
-.game-nav-item:hover .game-sweep > i,
-.game-nav-item.is-active .game-sweep > i {
-  animation: sweep-x 0.55s ease-out both;
-}
-/* active triangle marker (game cursor) */
-.game-marker {
-  position: absolute;
-  top: 50%;
-  width: 0;
-  height: 0;
-  border-block: 7px solid transparent;
-  border-left: 11px solid currentColor;
-  transform: translateY(-50%);
-  filter: drop-shadow(0 0 6px var(--color-signal-glow));
-  animation: marker-nudge 1.6s ease-in-out infinite;
-}
-
-@keyframes marker-nudge {
-  0%, 100% { transform: translateY(-50%) translateX(0); }
-  50% { transform: translateY(-50%) translateX(3px); }
-}
-
-@keyframes sweep-x {
-  from { left: -60%; }
-  to   { left: 130%; }
-}
-@keyframes nav-in {
-  from { opacity: 0; transform: translateX(-10px); }
-  to   { opacity: 1; transform: translateX(0); }
-}
-
-/* ── Game frame: panel with cut corners + drawn-in edge lines ── */
-.game-frame {
-  position: relative;
-}
-.game-frame::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  background:
-    linear-gradient(var(--color-hairline), var(--color-hairline)) top left /
-      26px 1.5px,
-    linear-gradient(var(--color-hairline), var(--color-hairline)) top left / 1.5px
-      26px,
-    linear-gradient(var(--color-hairline), var(--color-hairline)) top right /
-      26px 1.5px,
-    linear-gradient(var(--color-hairline), var(--color-hairline)) top right / 1.5px
-      26px,
-    linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
-      26px 1.5px,
-    linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
-      1.5px 26px,
-    linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
-      26px 1.5px,
-    linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
-      1.5px 26px;
-  background-repeat: no-repeat;
-}
-
-/* ── Mobile lightness (<md): cheaper blur, shorter animations ── */
-@media (max-width: 767px) {
-  .glass {
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-  }
-  .game-nav-item {
-    animation-duration: 0.25s;
-    animation-delay: calc(var(--i) * 18ms);
-  }
-  .scan-line::after,
-  .animate-shimmer {
-    display: none;
-  }
-}
 
+/* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  .scan-line::after,
-  .scan-line,
-  .animate-eq,
   .animate-spin-disc,
-  .animate-pulse-ring,
+  .animate-pulse-ring {
-  .animate-shimmer,
-  .animate-breathe,
-  .animate-fade-up,
-  .animate-stagger,
-  .animate-toast-in {
     animation: none !important;
   }
-  .scan-line {
-    background: none !important;
-  }
   *,
   *::before,
   *::after {

services/frontend/src/components/ChannelCultureGlossary.tsx

@@ -1,21 +1,51 @@
 "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";
 
+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 containerRef = useStaggerReveal<HTMLDivElement>(".channel-row", {
+    stagger: 0.025,
+    y: 6,
+    dependencies: [cultures],
+  });
+
   return (
-    <GlassPanel className="lg:col-span-3">
+    <GlassPanel>
       <SectionHeader
-        eyebrow="culture"
+        eyebrow="Roster Intelligence"
-        title="Channel Culture Glossary"
+        title="Channel Culture & Activity Roster"
         action={
           cultures.length > 0 ? (
             <button
@@ -30,37 +60,38 @@ export function ChannelCultureGlossary({
                   })),
                 )
               }
-              className="flex items-center gap-1.5 text-xs text-ink-soft hover:text-ink"
+              className="font-mono text-[11px] text-[#8a8f98] transition-colors hover:text-[#f7f8f8]"
             >
-              CSV
+              EXPORT_CSV
             </button>
           ) : null
         }
       />
       {cultures.length === 0 ? (
-        <p className="py-6 text-center text-xs text-ink-faint">
+        <div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
-          No channel cultures captured yet.
+          NO CHANNELS LOGGED
-        </p>
+        </div>
       ) : (
-        <div className="space-y-3">
+        <div ref={containerRef} className="space-y-2 mt-3">
-          {cultures.map((c) => (
+          {ranked.map(({ c }) => (
-            <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-row flex flex-col gap-1 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]"
-                  {c.channel_name ?? c.channel_id}
+            >
+              <div className="flex items-center justify-between">
+                <span className="font-mono text-xs font-semibold text-[#f7f8f8]">
+                  #{c.channel_name ?? c.channel_id.slice(0, 8)}
                 </span>
                 {c.last_analyzed_at && (
-                  <span className="text-xs text-ink-faint">
+                  <span className="font-mono text-[10px] text-[#8a8f98]">
                     {formatRelativeTime(c.last_analyzed_at)}
                   </span>
                 )}
               </div>
-              {c.culture_summary ? (
+              {c.culture_summary && (
-                <p className="mt-1 text-ink-faint">{c.culture_summary}</p>
+                <p className="font-sans text-xs text-[#8a8f98] leading-relaxed line-clamp-2">
-              ) : (
+                  {c.culture_summary}
-                <span className="text-xs text-ink-faint">
+                </p>
-                  (no summary captured)
-                </span>
               )}
             </div>
           ))}

services/frontend/src/components/TermGlossary.tsx

@@ -1,71 +1,130 @@
 "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 (
-    <GlassPanel className="lg:col-span-3">
+    <div className="glossary-entry overflow-hidden rounded-md border border-hairline bg-surface/30">
-      <SectionHeader
+      <button
-        eyebrow="knowledge"
+        type="button"
-        title="Term Knowledge Base"
+        onClick={() => setOpen((v) => !v)}
-        action={
+        className="flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left transition-colors hover:bg-surface/50"
-          terms.length > 0 ? (
+        aria-expanded={open}
-            <button
+      >
-              type="button"
+        <span className="flex min-w-0 items-baseline gap-2">
-              onClick={() =>
+          <span className="truncate font-medium text-ink">{t.term}</span>
-                downloadCsv(
+          <span className="mono shrink-0 text-[10px] text-ink-faint">
-                  "glossary.csv",
+            {t.hit_count} uses
-                  terms.map((t) => ({
+          </span>
-                    term: t.term,
+        </span>
-                    definition: t.definition,
+        <span className="flex shrink-0 items-center gap-2 font-mono text-[10px] text-ink-faint">
-                    source: t.source_url,
+          {formatRelativeTime(t.resolved_at)}
-                    resolved: t.resolved_at,
+          <ChevronDown
-                    hits: t.hit_count,
+            className={`size-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
-                  })),
+          />
-                )
+        </span>
-              }
+      </button>
-              className="flex items-center gap-1.5 text-xs text-ink-soft hover:text-ink"
+      <div
-            >
+        ref={bodyRef}
-              CSV
+        className="grid transition-[grid-template-rows] duration-300 ease-out"
-            </button>
+        style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
-          ) : null
+      >
-        }
+        <div className="overflow-hidden">
-      />
+          <div className="border-t border-hairline px-3 py-2.5 text-sm">
-      {terms.length === 0 ? (
+            <p className="text-ink-faint">{t.definition}</p>
-        <p className="py-6 text-center text-xs text-ink-faint">
+            {t.source_url && (
-          No term resolutions cached yet.
+              <a
-        </p>
+                href={t.source_url}
-      ) : (
+                target="_blank"
-        <div className="space-y-3">
+                rel="noopener noreferrer"
-          {terms.map((t) => (
+                className="mt-1.5 inline-flex items-center gap-1 text-xs text-ink-soft hover:text-ink"
-            <div key={t.term} className="text-sm">
+              >
-              <div className="flex flex-wrap items-baseline justify-between gap-2">
+                <Globe className="size-3" />
-                <span className="font-medium text-ink">{t.term}</span>
+                {t.source_url}
-                <span className="text-xs text-ink-faint">
+              </a>
-                  {t.hit_count} uses · {formatRelativeTime(t.resolved_at)}
+            )}
-                </span>
+          </div>
-              </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>
-      )}
+      </div>
-    </GlassPanel>
+    </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"
+          title="Term Knowledge Base"
+          action={
+            terms.length > 0 ? (
+              <button
+                type="button"
+                onClick={() =>
+                  downloadCsv(
+                    "glossary.csv",
+                    terms.map((t) => ({
+                      term: t.term,
+                      definition: t.definition,
+                      source: t.source_url,
+                      resolved: t.resolved_at,
+                      hits: t.hit_count,
+                    })),
+                  )
+                }
+                className="flex items-center gap-1.5 font-mono text-[11px] text-ink-soft hover:text-ink"
+              >
+                EXPORT_CSV
+              </button>
+            ) : null
+          }
+        />
+        {terms.length === 0 ? (
+          <p className="py-6 text-center font-mono text-xs text-ink-faint">
+            NO TERM RESOLUTIONS CACHED YET
+          </p>
+        ) : (
+          <div ref={listRef} className="space-y-2">
+            {terms.map((t) => (
+              <GlossaryEntry key={t.term} t={t} />
+            ))}
+          </div>
+        )}
+      </GlassPanel>
+    </div>
   );
 }

services/frontend/src/components/chatbot/chatbot.tsx

@@ -2,20 +2,24 @@
 
 import {
   Bot,
-  Check,
+  MessageSquare,
-  Copy,
+  Send,
-  MessageCircle,
-  RotateCw,
   Trash2,
   X,
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import { Avatar, Button, GlassPanel, toast } from "@/components/primitives";
 import { MarkdownLite } from "@/components/shared";
 import { useChatbotUserId } from "@/hooks/use-chatbot-user";
 import { chatbotApi } from "@/lib/api";
 import { cn } from "@/lib/utils";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 interface Msg {
   id: string;
   role: "user" | "bot";
@@ -34,32 +38,27 @@ function formatTime(ts: number): string {
   }
 }
 
-function TypingDots() {
-  return (
-    <div className="flex items-center gap-1 py-1">
-      {[0, 1, 2].map((i) => (
-        <span
-          key={i}
-          className="size-1.5 rounded-full bg-ink-faint animate-bounce"
-          style={{ animationDelay: `${i * 0.15}s`, animationDuration: "0.9s" }}
-        />
-      ))}
-    </div>
-  );
-}
-
 export function Chatbot() {
   const userId = useChatbotUserId();
   const [open, setOpen] = useState(false);
   const [msgs, setMsgs] = useState<Msg[]>([]);
   const [input, setInput] = useState("");
   const [loading, setLoading] = useState(false);
-  const [failed, setFailed] = useState<string | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-  const taRef = useRef<HTMLTextAreaElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
 
+  useGSAP(
+    () => {
+      if (!open || !panelRef.current) return;
+      gsap.fromTo(
+        panelRef.current,
+        { opacity: 0, y: 12, scale: 0.98 },
+        { opacity: 1, y: 0, scale: 1, duration: 0.22, ease: "power2.out" },
+      );
+    },
+    { dependencies: [open] },
+  );
+
   useEffect(() => {
     if (!open || !userId) return;
     chatbotApi
@@ -85,44 +84,12 @@ export function Chatbot() {
       .catch(() => {});
   }, [open, userId]);
 
-  // Auto-scroll to newest whenever the thread or typing state changes.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll must fire on thread/typing changes even though the body only reads the ref
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [msgs, loading, open]);
+  }, [msgs, loading]);
-
-  // Auto-grow the composer.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: height recompute is keyed to input changes; body only reads the textarea element
-  useEffect(() => {
-    const ta = taRef.current;
-    if (!ta) return;
-    ta.style.height = "auto";
-    ta.style.height = `${Math.min(ta.scrollHeight, 140)}px`;
-  }, [input]);
-
-  const copy = async (id: string, text: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedId(id);
-      window.setTimeout(() => setCopiedId((c) => (c === id ? null : c)), 1200);
-    } catch {
-      /* clipboard unavailable */
-    }
-  };
-
-  const clearAll = async () => {
-    if (!userId) return;
-    setMsgs([]);
-    try {
-      await chatbotApi.clearHistory(userId);
-    } catch {
-      /* best-effort */
-    }
-  };
 
   const send = async (text: string) => {
     if (!text.trim() || loading || !userId) return;
-    setFailed(null);
     setInput("");
     setMsgs((m) => [
       ...m,
@@ -141,172 +108,116 @@ export function Chatbot() {
         },
       ]);
     } catch (e) {
-      setFailed(text);
       toast({ title: "Chat error", description: String(e), tone: "vermilion" });
     } finally {
       setLoading(false);
     }
   };
 
+  const clearAll = async () => {
+    if (!userId) return;
+    setMsgs([]);
+    try {
+      await chatbotApi.clearHistory(userId);
+    } catch {
+      /* best-effort */
+    }
+  };
+
   return (
     <>
       <button
         type="button"
         aria-label="Open assistant"
         onClick={() => setOpen((o) => !o)}
-        className="fixed right-4 bottom-24 z-50 flex items-center justify-center rounded-full bg-signal text-signal-ink shadow-[0_10px_30px_-8px_var(--color-signal-glow)] transition-transform hover:scale-105 md:right-5 md:bottom-5"
+        className="fixed right-4 bottom-5 z-50 flex size-10 items-center justify-center rounded-full border border-white/[0.12] bg-[#0f1011] text-[#f7f8f8] shadow-2xl transition-all duration-150 hover:scale-105 hover:border-[#7170ff] hover:bg-[#191a1b]"
-        style={{ width: 52, height: 52 }}
       >
-        {open ? <X className="size-5" /> : <MessageCircle className="size-5" />}
+        {open ? <X className="size-4" /> : <MessageSquare className="size-4 text-[#7170ff]" />}
       </button>
 
       {open && (
-        <GlassPanel
+        <div
-          className="fixed right-4 bottom-24 z-50 flex w-[min(94vw,360px)] flex-col p-0 md:right-5 md:bottom-20"
+          ref={panelRef}
-          style={{
+          className="fixed right-4 bottom-18 z-50 flex h-[min(65dvh,480px)] w-[min(92vw,350px)] flex-col rounded-[10px] border border-white/[0.08] bg-[#0f1011]/95 p-0 shadow-2xl backdrop-blur-xl"
-            animation: "fade-up 0.16s ease",
-            height: "min(68dvh, 520px)",
-          }}
         >
-          <div className="flex items-center gap-2 border-b border-hairline px-4 py-3">
+          <div className="flex items-center justify-between border-b border-white/[0.06] px-3.5 py-2.5">
-            <span className="flex size-8 items-center justify-center rounded-full bg-signal/15 text-signal">
+            <div className="flex items-center gap-2">
-              <Bot className="size-4" />
+              <span className="flex size-6 items-center justify-center rounded-md bg-[#7170ff]/15 text-[#7170ff]">
-            </span>
+                <Bot className="size-3.5" />
-            <div>
+              </span>
-              <div className="text-sm font-semibold text-ink">
+              <div>
-                GMW Assistant
+                <div className="text-xs font-semibold text-[#f7f8f8]">
-              </div>
+                  Linear Assistant
-              <div className="mono text-[0.6rem] text-ink-faint">
+                </div>
-                context-aware
+                <div className="font-mono text-[9px] text-[#62666d]">
+                  active context
+                </div>
               </div>
             </div>
             <button
               type="button"
-              aria-label="Clear conversation"
               onClick={clearAll}
-              className="ml-auto rounded-[9px] p-1.5 text-ink-faint transition-colors hover:bg-white/5 hover:text-ink-soft"
+              className="rounded-[5px] p-1 text-[#62666d] hover:bg-white/[0.05] hover:text-[#d0d6e0]"
             >
-              <Trash2 className="size-4" />
+              <Trash2 className="size-3.5" />
             </button>
           </div>
 
-          <div
+          <div className="flex-1 space-y-2.5 overflow-y-auto px-3.5 py-3">
-            ref={listRef}
-            className="flex-1 space-y-3 overflow-y-auto px-4 py-3"
-          >
             {msgs.length === 0 && !loading && (
-              <div className="py-8 text-center text-xs text-ink-faint">
+              <div className="py-8 text-center text-xs text-[#62666d]">
-                Ask about moderation, voice, or media.
+                Ask anything about telemetry, moderation, or media.
               </div>
             )}
             {msgs.map((m) => (
               <div
                 key={m.id}
                 className={cn(
-                  "group flex gap-2",
+                  "flex flex-col text-xs",
-                  m.role === "user" ? "justify-end" : "justify-start",
+                  m.role === "user" ? "items-end" : "items-start",
                 )}
               >
-                {m.role === "bot" && (
+                <div
-                  <Avatar
+                  className={cn(
-                    name="GMW"
+                    "max-w-[85%] rounded-[6px] px-2.5 py-1.5",
-                    size={26}
+                    m.role === "user"
-                    className="mt-0.5 bg-signal/15 text-signal"
+                      ? "bg-[#5e6ad2] text-white"
-                  />
+                      : "border border-white/[0.06] bg-white/[0.03] text-[#d0d6e0]",
-                )}
+                  )}
-                <div className="flex max-w-[82%] flex-col">
+                >
-                  <div
+                  {m.role === "bot" ? (
-                    className={cn(
+                    <MarkdownLite content={m.content} />
-                      "rounded-2xl px-3 py-2 text-sm",
+                  ) : (
-                      m.role === "user"
+                    <span>{m.content}</span>
-                        ? "rounded-br-sm bg-signal/20 text-ink"
+                  )}
-                        : "rounded-bl-sm bg-white/5 text-ink-soft",
-                    )}
-                  >
-                    {m.role === "bot" ? (
-                      <MarkdownLite content={m.content} />
-                    ) : (
-                      <span className="whitespace-pre-wrap break-words">
-                        {m.content}
-                      </span>
-                    )}
-                  </div>
-                  <div
-                    className={cn(
-                      "mt-0.5 flex items-center gap-1.5 text-[0.6rem] text-ink-faint",
-                      m.role === "user" && "flex-row-reverse",
-                    )}
-                  >
-                    <span className="mono">{formatTime(m.ts)}</span>
-                    <button
-                      type="button"
-                      aria-label="Copy message"
-                      onClick={() => copy(m.id, m.content)}
-                      className="rounded p-0.5 opacity-0 transition-opacity hover:text-ink-soft group-hover:opacity-100"
-                    >
-                      {copiedId === m.id ? (
-                        <Check className="size-3 text-signal" />
-                      ) : (
-                        <Copy className="size-3" />
-                      )}
-                    </button>
-                  </div>
                 </div>
+                <span className="font-mono mt-0.5 text-[9px] text-[#62666d]">
+                  {formatTime(m.ts)}
+                </span>
               </div>
             ))}
-            {loading && (
-              <div className="flex gap-2">
-                <Avatar
-                  name="GMW"
-                  size={26}
-                  className="bg-signal/15 text-signal"
-                />
-                <div className="rounded-2xl rounded-bl-sm bg-white/5 px-3 py-2">
-                  <TypingDots />
-                </div>
-              </div>
-            )}
             <div ref={bottomRef} />
           </div>
 
-          {failed && (
+          <form
-            <div className="mx-3 mb-1 flex items-center gap-2 rounded-[10px] border border-vermilion/30 bg-vermilion/10 px-3 py-1.5 text-xs text-vermilion">
+            onSubmit={(e) => {
-              <span className="flex-1 truncate">Send failed</span>
+              e.preventDefault();
-              <button
+              send(input);
-                type="button"
+            }}
-                onClick={() => send(failed)}
+            className="flex items-center gap-1.5 border-t border-white/[0.06] p-2"
-                className="inline-flex items-center gap-1 font-medium hover:underline"
+          >
-              >
+            <input
-                <RotateCw className="size-3" /> Retry
+              type="text"
-              </button>
-            </div>
-          )}
-
-          <div className="flex items-end gap-2 border-t border-hairline p-3">
-            <textarea
-              ref={taRef}
-              rows={1}
-              placeholder="Message…"
               value={input}
               onChange={(e) => setInput(e.target.value)}
-              onKeyDown={(e) => {
+              placeholder="Ask command..."
-                if (e.key === "Enter" && !e.shiftKey) {
+              className="flex-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2.5 py-1.5 text-xs text-[#f7f8f8] placeholder:text-[#62666d] focus:border-[#7170ff] focus:outline-none"
-                  e.preventDefault();
-                  send(input);
-                }
-              }}
-              className="max-h-[140px] min-h-[40px] flex-1 resize-none rounded-[11px] bg-white/5 border border-hairline px-3 py-2 text-sm text-ink placeholder:text-ink-faint transition-colors focus:outline-none focus:border-signal/50 focus:bg-white/8"
             />
-            <Button
+            <Button type="submit" size="sm" variant="primary">
-              variant="primary"
+              <Send className="size-3" />
-              size="icon"
-              onClick={() => send(input)}
-              disabled={loading}
-            >
-              <MessageCircle className="size-4" />
             </Button>
-          </div>
+          </form>
-        </GlassPanel>
+        </div>
       )}
     </>
   );

services/frontend/src/components/primitives/badge.tsx

@@ -1,39 +1,52 @@
+import type React from "react";
 import { cn } from "@/lib/utils";
 
-type Tone = "signal" | "amber" | "vermilion" | "neutral";
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-
+  tone?: "neutral" | "signal" | "amber" | "vermilion" | "success";
-const tones: Record<Tone, string> = {
+  size?: "sm" | "md";
-  signal: "bg-signal/12 text-signal border-signal/30",
+  dot?: boolean;
-  amber: "bg-amber/12 text-amber border-amber/30",
+}
-  vermilion: "bg-vermilion/12 text-vermilion border-vermilion/30",
-  neutral: "bg-white/6 text-ink-soft border-white/10",
-};
 
 export function Badge({
   tone = "neutral",
-  dot,
+  size = "md",
+  dot = false,
   className,
   children,
-}: {
+  ...props
-  tone?: Tone;
+}: BadgeProps) {
-  dot?: boolean;
+  const tones = {
-  className?: string;
+    neutral: "bg-white/[0.04] text-[#d0d6e0] border-white/[0.08]",
-  children: React.ReactNode;
+    signal: "bg-[#7170ff]/10 text-[#7170ff] border-[#7170ff]/25",
-}) {
+    success: "bg-[#10b981]/10 text-[#10b981] border-[#10b981]/25",
+    amber: "bg-[#f59e0b]/10 text-[#f59e0b] border-[#f59e0b]/25",
+    vermilion: "bg-[#f43f5e]/10 text-[#f43f5e] border-[#f43f5e]/25",
+  };
+
+  const dots = {
+    neutral: "bg-[#8a8f98]",
+    signal: "bg-[#7170ff]",
+    success: "bg-[#10b981]",
+    amber: "bg-[#f59e0b]",
+    vermilion: "bg-[#f43f5e]",
+  };
+
+  const sizes = {
+    sm: "px-1.5 py-0.5 text-[10px]",
+    md: "px-2 py-0.5 text-[11px]",
+  };
+
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[0.7rem] font-semibold tracking-wide",
+        "inline-flex items-center gap-1.5 rounded-[4px] border font-mono font-medium tracking-tight",
         tones[tone],
+        sizes[size],
         className,
       )}
+      {...props}
     >
-      {dot && (
+      {dot && <span className={cn("size-1.5 rounded-full", dots[tone])} />}
-        <span className="relative flex h-1.5 w-1.5">
-          <span className="absolute inline-flex h-full w-full rounded-full bg-current opacity-60 animate-pulse-ring" />
-          <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
-        </span>
-      )}
       {children}
     </span>
   );

services/frontend/src/components/primitives/button.tsx

@@ -1,51 +1,60 @@
+import type React from "react";
 import { cn } from "@/lib/utils";
-import { Slot } from "./slot";
 
-type Variant = "primary" | "ghost" | "outline" | "danger" | "subtle";
+export const buttonVariants = ({
-type Size = "sm" | "md" | "lg" | "icon";
+  variant = "primary",
+  size = "md",
+  className,
+}: {
+  variant?: "primary" | "ghost" | "danger" | "secondary" | "subtle" | "outline";
+  size?: "sm" | "md" | "lg" | "icon";
+  className?: string;
+}) => {
+  const base =
+    "inline-flex items-center justify-center font-sans font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7170ff] disabled:pointer-events-none disabled:opacity-40 cursor-pointer";
 
-const variants: Record<Variant, string> = {
+  const variants = {
-  primary:
+    primary:
-    "bg-signal text-signal-ink hover:brightness-110 shadow-[0_8px_24px_-10px_var(--color-signal-glow)] font-semibold",
+      "bg-[#5e6ad2] text-white hover:bg-[#7170ff] shadow-sm active:scale-[0.98]",
-  ghost: "text-ink-soft hover:text-ink hover:bg-white/5",
+    ghost:
-  outline:
+      "bg-white/[0.03] text-[#d0d6e0] border border-white/[0.08] hover:bg-white/[0.06] hover:text-[#f7f8f8] hover:border-white/[0.14] active:scale-[0.98]",
-    "border border-hairline bg-white/0 text-ink hover:bg-white/5 hover:border-signal/40",
+    outline:
-  danger:
+      "bg-transparent text-[#d0d6e0] border border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8] active:scale-[0.98]",
-    "bg-vermilion text-white hover:brightness-110 shadow-[0_8px_24px_-10px_var(--color-vermilion-glow)] font-semibold",
+    secondary:
-  subtle: "bg-white/5 text-ink hover:bg-white/10",
+      "bg-white/[0.06] text-[#f7f8f8] hover:bg-white/[0.1] border border-white/[0.08] active:scale-[0.98]",
-};
+    subtle:
+      "bg-transparent text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#f7f8f8]",
+    danger:
+      "bg-[#f43f5e]/15 text-[#f43f5e] border border-[#f43f5e]/30 hover:bg-[#f43f5e]/25 active:scale-[0.98]",
+  };
 
-const sizes: Record<Size, string> = {
+  const sizes = {
-  sm: "h-8 px-3 text-xs rounded-[9px] gap-1.5",
+    sm: "h-7 px-2.5 text-xs rounded-[5px] gap-1.5",
-  md: "h-10 px-4 text-sm rounded-[11px] gap-2",
+    md: "h-8.5 px-3.5 text-xs rounded-[6px] gap-2",
-  lg: "h-12 px-6 text-base rounded-[13px] gap-2",
+    lg: "h-10 px-4 text-sm rounded-[7px] gap-2.5",
-  icon: "h-10 w-10 rounded-[11px]",
+    icon: "size-8.5 rounded-[6px] p-0",
+  };
+
+  return cn(base, variants[variant], sizes[size], className);
 };
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: Variant;
+  variant?: "primary" | "ghost" | "danger" | "secondary" | "subtle" | "outline";
-  size?: Size;
+  size?: "sm" | "md" | "lg" | "icon";
-  asChild?: boolean;
 }
 
 export const Button = ({
   className,
-  variant = "subtle",
+  variant = "ghost",
   size = "md",
-  asChild,
+  type = "button",
   ...props
 }: ButtonProps) => {
-  const Comp = asChild ? Slot : "button";
   return (
-    <Comp
+    <button
-      className={cn(
+      type={type}
-        "inline-flex items-center justify-center whitespace-nowrap transition-all duration-150 select-none active:scale-[0.97]",
+      className={buttonVariants({ variant, size, className })}
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-signal/60 disabled:opacity-40 disabled:pointer-events-none",
-        variants[variant],
-        sizes[size],
-        className,
-      )}
       {...props}
     />
   );

services/frontend/src/components/primitives/card.tsx

@@ -1,19 +1,24 @@
 import { cn } from "@/lib/utils";
 
-/** Floating glass panel — primary container. */
+export interface GlassPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  glow?: boolean;
+}
+
 export function GlassPanel({
-  className,
   children,
+  className,
+  style,
   glow,
   ...props
-}: React.HTMLAttributes<HTMLDivElement> & { glow?: boolean }) {
+}: GlassPanelProps) {
   return (
     <div
       className={cn(
-        "glass p-5",
+        "relative rounded-[10px] border border-white/[0.08] bg-[#0f1011]/80 p-5 shadow-xl backdrop-blur-md transition-all duration-200",
-        glow && "shadow-[0_0_40px_-18px_var(--color-signal-glow)]",
+        glow && "shadow-[0_0_24px_rgba(113,112,255,0.12)] border-[#7170ff]/30",
         className,
       )}
+      style={style}
       {...props}
     >
       {children}
@@ -21,14 +26,21 @@ export function GlassPanel({
   );
 }
 
-/** Smaller glass sub-panel. */
 export function GlassCard({
-  className,
   children,
+  className,
+  style,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={cn("glass-2 p-4", className)} {...props}>
+    <div
+      className={cn(
+        "relative rounded-[8px] border border-white/[0.06] bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.12] hover:bg-white/[0.04]",
+        className,
+      )}
+      style={style}
+      {...props}
+    >
       {children}
     </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/shared/section.tsx

@@ -14,13 +14,19 @@ export function SectionHeader({
   return (
     <div
       className={cn(
-        "mb-3 flex flex-wrap items-start justify-between gap-2 sm:gap-3",
+        "mb-3.5 flex flex-wrap items-center justify-between gap-3",
         className,
       )}
     >
       <div className="min-w-0">
-        {eyebrow && <div className="eyebrow mb-1">{eyebrow}</div>}
+        {eyebrow && (
-        <h2 className="display text-balance text-xl text-ink">{title}</h2>
+          <div className="font-mono text-[10px] font-medium tracking-wider uppercase text-[#8a8f98] mb-0.5">
+            {eyebrow}
+          </div>
+        )}
+        <h2 className="font-sans text-[1.1rem] font-semibold tracking-tight text-[#f7f8f8]">
+          {title}
+        </h2>
       </div>
       {action && (
         <div className="flex flex-wrap items-center gap-2">{action}</div>
@@ -50,45 +56,45 @@ export function MetricTile({
 }) {
   const toneColor =
     tone === "vermilion"
-      ? "var(--color-vermilion)"
+      ? "#f43f5e"
       : tone === "amber"
-        ? "var(--color-amber)"
+        ? "#f59e0b"
         : tone === "signal"
-          ? "var(--color-signal)"
+          ? "#7170ff"
-          : "var(--color-ink)";
+          : "#f7f8f8";
+
   return (
     <div
       className={cn(
-        "glass p-4 ring-focus transition-transform duration-200 hover:-translate-y-0.5",
+        "relative rounded-[8px] border border-white/[0.07] bg-white/[0.025] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04]",
         className,
       )}
       style={style}
     >
       <div className="flex items-center justify-between">
-        <div className="eyebrow">{label}</div>
+        <div className="font-mono text-[10px] font-medium uppercase tracking-wider text-[#8a8f98]">
-        {icon && <span className="text-ink-faint">{icon}</span>}
+          {label}
+        </div>
+        {icon && <span className="text-[#8a8f98]">{icon}</span>}
       </div>
       <div
-        className="display mt-1 text-[1.9rem] leading-none"
+        className="font-sans mt-1.5 text-[1.65rem] font-semibold leading-none tracking-tight"
         style={{ color: tone === "neutral" ? undefined : toneColor }}
       >
         {value}
       </div>
       {hint && (
-        <div className="mono mt-1 text-[0.68rem] text-ink-faint">{hint}</div>
+        <div className="font-mono mt-1 text-[10px] text-[#62666d]">{hint}</div>
       )}
       {spark && spark.length > 1 && (
-        <div className="mt-2">
+        <div className="mt-2.5">
-          <div
+          <div className="h-[3px] w-full overflow-hidden rounded-full bg-white/[0.06]">
-            className="h-1 w-full overflow-hidden rounded-full"
-            style={{ background: "oklch(1 0 0 / 0.08)" }}
-          >
             <div
               className="h-full rounded-full"
               style={{
                 width: `${Math.min(100, (spark[spark.length - 1] / (Math.max(...spark) || 1)) * 100)}%`,
                 background: toneColor,
-                opacity: 0.7,
+                opacity: 0.8,
               }}
             />
           </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,
@@ -22,24 +29,23 @@ function NavItem({
       href={href}
       aria-label={label}
       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 group relative flex size-9 items-center justify-center rounded-[7px] transition-all duration-150",
         active
-          ? "is-active bg-white/10 text-white"
+          ? "is-active bg-white/[0.08] text-[#f7f8f8] shadow-sm border border-white/[0.12]"
-          : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
+          : "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]",
       )}
     >
-      {active && <span className="game-marker -left-3.5" />}
-      <span className="game-sweep" aria-hidden="true">
-        <i />
-      </span>
       <Icon
-        className="relative z-10 size-[18px]"
+        className="relative z-10 size-4"
-        strokeWidth={active ? 2.4 : 2}
+        strokeWidth={active ? 2.2 : 1.8}
       />
-      {/* hover tooltip — labels are hidden in the rail, so surface on hover */}
+      {/* Precision Micro-Indicator */}
-      <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">
+      {active && (
+        <span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-[#7170ff]" />
+      )}
+      {/* Tooltip on hover */}
+      <span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-[5px] border border-white/[0.08] bg-[#0f1011] px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-[#f7f8f8] opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
         {label}
       </span>
     </a>
@@ -49,9 +55,33 @@ 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: -6 },
+        {
+          opacity: 1,
+          x: 0,
+          duration: 0.3,
+          stagger: 0.025,
+          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
+      ref={railRef}
+      className="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-[54px] flex-col items-center gap-1 rounded-[10px] border border-white/[0.08] bg-[#0f1011]/80 py-3 shadow-xl backdrop-blur-md md:flex"
+    >
       <div className="flex flex-1 flex-col gap-1">
         {navItems.map((item, i) => (
           <NavItem

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]">
+    <div
-      {/* orbiting dashed ring */}
+      ref={containerRef}
-      <div className="absolute inset-8 rounded-full border border-dashed border-hairline opacity-40 animate-spin-disc" />
+      className="relative mx-auto aspect-square w-full max-w-[380px]"
-      {/* 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" />
+      {/* 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-48 -translate-x-1/2 -translate-y-1/2 rounded-full bg-signal/5 animate-breathe"
+        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.4 }}
+        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,132 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { type RefObject, useRef } from "react";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+  // Set default Linear-style crisp easing & duration
+  gsap.defaults({
+    ease: "power2.out",
+    duration: 0.35,
+  });
+}
+
+/**
+ * Reusable hook for staggered reveal animations on child elements.
+ * Linear-style: crisp entry, very subtle vertical displacement, no layout shift.
+ */
+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 ?? 8,
+        },
+        {
+          opacity: 1,
+          y: 0,
+          duration: options?.duration ?? 0.32,
+          delay: options?.delay ?? 0.02,
+          stagger: options?.stagger ?? 0.03,
+          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.75,
+        ease: "power2.out",
+        onUpdate: () => {
+          if (ref.current) {
+            ref.current.textContent = formatter
+              ? formatter(obj.val)
+              : Math.round(obj.val).toLocaleString();
+          }
+        },
+      });
+    },
+    { dependencies: [targetValue] },
+  );
+}
+
+/**
+ * Micro-interaction hook for interactive elements (hover card tilt/glow, pulse)
+ */
+export function useLinearHover<T extends HTMLElement = HTMLDivElement>() {
+  const elementRef = useRef<T>(null);
+
+  useGSAP(
+    (_, contextSafe) => {
+      if (!elementRef.current || !contextSafe) return;
+      const el = elementRef.current;
+
+      const onEnter = contextSafe(() => {
+        gsap.to(el, { y: -2, duration: 0.18, ease: "power2.out" });
+      });
+      const onLeave = contextSafe(() => {
+        gsap.to(el, { y: 0, duration: 0.22, ease: "power2.out" });
+      });
+
+      el.addEventListener("mouseenter", onEnter);
+      el.addEventListener("mouseleave", onLeave);
+
+      return () => {
+        el.removeEventListener("mouseenter", onEnter);
+        el.removeEventListener("mouseleave", onLeave);
+      };
+    },
+    { scope: elementRef },
+  );
+
+  return elementRef;
+}

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);
     }
   }