feat(frontend): add tactical HUD header and GSAP stagger deck to recordings route

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

.env.example

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

.github/dependabot-auto-merge.yml

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

.github/dependabot.yml

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

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

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

services/backend/package.json

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

services/discord-gateway/package.json

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

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

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

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

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

services/frontend/bun.lock

@@ -0,0 +1,465 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "frontend",
+      "dependencies": {
+        "@gsap/react": "^2.1.2",
+        "@orpc/client": "1.15.0",
+        "clsx": "^2.1.1",
+        "gsap": "^3.15.0",
+        "lucide-react": "^1.33.0",
+        "next": "16.3.2",
+        "next-themes": "^0.4.6",
+        "partysocket": "1.3.0",
+        "react": "19.2.8",
+        "react-dom": "19.2.8",
+        "swr": "^2.5.1",
+        "tailwind-merge": "^3.6.0",
+        "three": "^0.185.1",
+      },
+      "devDependencies": {
+        "@biomejs/biome": "2.5.10",
+        "@tailwindcss/postcss": "^4",
+        "@types/node": "^26",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "@types/three": "^0.185.4",
+        "babel-plugin-react-compiler": "1.0.0",
+        "puppeteer-core": "^25.8.0",
+        "tailwindcss": "^4",
+        "typescript": "^7",
+      },
+    },
+  },
+  "packages": {
+    "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
+
+    "@babel/code-frame": ["@babel/code-frame@7.29.7", "", { "dependencies": { "@babel/helper-validator-identifier": "7.29.7", "js-tokens": "4.0.0", "picocolors": "1.1.1" } }, "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw=="],
+
+    "@babel/compat-data": ["@babel/compat-data@7.29.7", "", {}, "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg=="],
+
+    "@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "7.29.7", "@babel/generator": "7.29.7", "@babel/helper-compilation-targets": "7.29.7", "@babel/helper-module-transforms": "7.29.7", "@babel/helpers": "7.29.7", "@babel/parser": "7.29.7", "@babel/template": "7.29.7", "@babel/traverse": "7.29.7", "@babel/types": "7.29.7", "@jridgewell/remapping": "2.3.5", "convert-source-map": "2.0.0", "debug": "4.4.3", "gensync": "1.0.0-beta.2", "json5": "2.2.3", "semver": "6.Line truncated
+
+    "@babel/generator": ["@babel/generator@7.29.7", "", { "dependencies": { "@babel/parser": "7.29.7", "@babel/types": "7.29.7", "@jridgewell/gen-mapping": "0.3.13", "@jridgewell/trace-mapping": "0.3.31", "jsesc": "3.1.0" } }, "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ=="],
+
+    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.29.7", "", { "dependencies": { "@babel/compat-data": "7.29.7", "@babel/helper-validator-option": "7.29.7", "browserslist": "4.28.7", "lru-cache": "5.1.1", "semver": "6.3.1" } }, "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g=="],
+
+    "@babel/helper-globals": ["@babel/helper-globals@7.29.7", "", {}, "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA=="],
+
+    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.29.7", "", { "dependencies": { "@babel/traverse": "7.29.7", "@babel/types": "7.29.7" } }, "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g=="],
+
+    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.29.7", "", { "dependencies": { "@babel/helper-module-imports": "7.29.7", "@babel/helper-validator-identifier": "7.29.7", "@babel/traverse": "7.29.7" }, "peerDependencies": { "@babel/core": "7.29.7" } }, "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg=="],
+
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.29.7", "", {}, "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
+
+    "@babel/helper-validator-option": ["@babel/helper-validator-option@7.29.7", "", {}, "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw=="],
+
+    "@babel/helpers": ["@babel/helpers@7.29.7", "", { "dependencies": { "@babel/template": "7.29.7", "@babel/types": "7.29.7" } }, "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg=="],
+
+    "@babel/parser": ["@babel/parser@7.29.7", "", { "dependencies": { "@babel/types": "7.29.7" }, "bin": "./bin/babel-parser.js" }, "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg=="],
+
+    "@babel/template": ["@babel/template@7.29.7", "", { "dependencies": { "@babel/code-frame": "7.29.7", "@babel/parser": "7.29.7", "@babel/types": "7.29.7" } }, "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg=="],
+
+    "@babel/traverse": ["@babel/traverse@7.29.7", "", { "dependencies": { "@babel/code-frame": "7.29.7", "@babel/generator": "7.29.7", "@babel/helper-globals": "7.29.7", "@babel/parser": "7.29.7", "@babel/template": "7.29.7", "@babel/types": "7.29.7", "debug": "4.4.3" } }, "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw=="],
+
+    "@babel/types": ["@babel/types@7.29.7", "", { "dependencies": { "@babel/helper-string-parser": "7.29.7", "@babel/helper-validator-identifier": "7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],
+
+    "@biomejs/biome": ["@biomejs/biome@2.5.10", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.5.10", "@biomejs/cli-darwin-x64": "2.5.10", "@biomejs/cli-linux-arm64": "2.5.10", "@biomejs/cli-linux-arm64-musl": "2.5.10", "@biomejs/cli-linux-x64": "2.5.10", "@biomejs/cli-linux-x64-musl": "2.5.10", "@biomejs/cli-win32-arm64": "2.5.10", "@biomejs/cli-win32-x64": "2.5.10" }, "bin": { "biome": "bin/biome" } }, "sha512-WRKXARA3kTuiV5sxqTpobJ/I0MVd4vk3pOL6wnp5az4LntFIhWTj1RWZq3DI9PCEN3Line truncated
+
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.5.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ItCrxKK6SXVT6flYs0qIuBd4AA3TTTl4d66Re6YI2FuGZnN85NmuYNzkiTJUyYw8qBLv69L5zTUB6uyWd++h3Q=="],
+
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@2.5.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-yLsPU9pAmtChXDu8vhKAzErqe+LeeYuwuUB2FZMkRitsmdodxsYRa9KHrFispsUHzzOu+9HB3nP/TQxyia+Sjw=="],
+
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@2.5.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-VG8uQW/86a1roLaIFvtIbEigxIdzdJ190oGyg1tV7VYeQtOS+x10sflk7WbuXgw91EtZX5DlIIIej1YqkNLlcg=="],
+
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@2.5.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-t1QAKZwQJRB4dvgJSgFiQ4BNfNPChg69BNonz854qLVxnjT3UvDzQg9mbkTJRu35ZqU0Rw10A73J8Urgbg2RPw=="],
+
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@2.5.10", "", { "os": "linux", "cpu": "x64" }, "sha512-4O6T0eq2heoHZN0a9UX+rWQoxXEBaKf+lRi2hbsGlHneUz9BWXM76nEWMK7Eeq8gzMxR1khQB6BFpAASpeXqGg=="],
+
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@2.5.10", "", { "os": "linux", "cpu": "x64" }, "sha512-pgDDqp9JybHm2I0KRgzN6i4+lt8xu4iqxUwLzglUMmOmyRTU1AYBGKzh9sNMOtIjah7xoWvKHlLVetvyifzoiQ=="],
+
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@2.5.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-pxAbxduPO4xq/Cvgaa2lOrs9BB0hEXmmDqfMNP4ZOffGOkUrD1/QGw9UAMpFQpX2P8MqTIIRuQKcmetum4Oa6A=="],
+
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.5.10", "", { "os": "win32", "cpu": "x64" }, "sha512-M+2dgBsl3lXRiTfgPVc2p3anS4Tocojke4rzFLScZ2Y/wmF+36dRb1iHCLiyGqOzQGyTplZH1HnEYviiAqi3nA=="],
+
+    "@dimforge/rapier3d-compat": ["@dimforge/rapier3d-compat@0.12.0", "", {}, "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow=="],
+
+    "@emnapi/runtime": ["@emnapi/runtime@1.11.3", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA=="],
+
+    "@gsap/react": ["@gsap/react@2.1.2", "", { "peerDependencies": { "gsap": "^3.12.5", "react": ">=17" } }, "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw=="],
+
+    "@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],
+
+    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.3.2" }, "os": "darwin", "cpu": "arm64" }, "sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg=="],
+
+    "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.3.2" }, "os": "darwin", "cpu": "x64" }, "sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w=="],
+
+    "@img/sharp-freebsd-wasm32": ["@img/sharp-freebsd-wasm32@0.35.3", "", { "dependencies": { "@img/sharp-wasm32": "0.35.3" }, "os": "freebsd" }, "sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg=="],
+
+    "@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.3.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg=="],
+
+    "@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.3.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw=="],
+
+    "@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.3.2", "", { "os": "linux", "cpu": "arm" }, "sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ=="],
+
+    "@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.3.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA=="],
+
+    "@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.3.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw=="],
+
+    "@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.3.2", "", { "os": "linux", "cpu": "none" }, "sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w=="],
+
+    "@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.3.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ=="],
+
+    "@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.3.2", "", { "os": "linux", "cpu": "x64" }, "sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w=="],
+
+    "@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.3.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw=="],
+
+    "@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.3.2", "", { "os": "linux", "cpu": "x64" }, "sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ=="],
+
+    "@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.3.2" }, "os": "linux", "cpu": "arm" }, "sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA=="],
+
+    "@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.3.2" }, "os": "linux", "cpu": "arm64" }, "sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ=="],
+
+    "@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.3.2" }, "os": "linux", "cpu": "ppc64" }, "sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA=="],
+
+    "@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.3.2" }, "os": "linux", "cpu": "none" }, "sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ=="],
+
+    "@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.3.2" }, "os": "linux", "cpu": "s390x" }, "sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw=="],
+
+    "@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.3.2" }, "os": "linux", "cpu": "x64" }, "sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA=="],
+
+    "@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.3.2" }, "os": "linux", "cpu": "arm64" }, "sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w=="],
+
+    "@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.35.3", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.3.2" }, "os": "linux", "cpu": "x64" }, "sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg=="],
+
+    "@img/sharp-wasm32": ["@img/sharp-wasm32@0.35.3", "", { "dependencies": { "@emnapi/runtime": "^1.11.1" } }, "sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w=="],
+
+    "@img/sharp-webcontainers-wasm32": ["@img/sharp-webcontainers-wasm32@0.35.3", "", { "dependencies": { "@img/sharp-wasm32": "0.35.3" }, "cpu": "none" }, "sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q=="],
+
+    "@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.35.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w=="],
+
+    "@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.35.3", "", { "os": "win32", "cpu": "ia32" }, "sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw=="],
+
+    "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.35.3", "", { "os": "win32", "cpu": "x64" }, "sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "1.5.5", "@jridgewell/trace-mapping": "0.3.31" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "0.3.13", "@jridgewell/trace-mapping": "0.3.31" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "3.1.2", "@jridgewell/sourcemap-codec": "1.5.5" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@next/env": ["@next/env@16.3.2", "", {}, "sha512-8k4YoG8cM7LWlkfzGNYCRBbFNlernLiMw4s0btVl+CmmWqn3VpYypA72/5Feb1UWdxe6tHqr5KHP4p4Y4m9luA=="],
+
+    "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ib5Llm93YCKoKWDh6ZaHq6QWTuOZ2bRkSnUwMmX8dsRIOkBNL1vVlSiUKSfixPL9SSh9pvukzqajk/klkn5vqg=="],
+
+    "@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.3.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-qd98fX2+I5nYJDioW2o7nSjoxM5KvWdeDefM80igia4+C/qSIEhH4MhTE+hO/7qKM7W37/Mq+dOWp8UePSyLHw=="],
+
+    "@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.3.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-vqsgb6FAOzcrCccsLXiKtAy5t8EzO+uOazuFaSkQxeY0tNONG3vpHYy8pyBafcI5SNFPTeyard6yTr6SzNGo2A=="],
+
+    "@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.3.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-xIe1eujfHUB2XcxHGddxJyu6TJRPjC5NpIkQYB/32ESkt5VkQyIAjmLRS38c+s6QY+qjtY/4KarVDzXRuD7lZQ=="],
+
+    "@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.3.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Fe0SA2j8X0kmc3aveuHD7UktO3AE2+mH3LguP60vGbz7u0z+MrDXbeb5iZFYAwR7EzzzXJ2Yk966w9mGTFMqfA=="],
+
+    "@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.3.2", "", { "os": "linux", "cpu": "x64" }, "sha512-TFBipb+gyesI/2Ve4zVu7kGltBWN/R466G5/1gtt2lECfc22G1pjkTxu68Q9aFcOaXiRGTQfvDbQQFe7mYgxiQ=="],
+
+    "@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.3.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-rVtmnNpBYIosDnKD/96dKxFsJnwnn1WRGG/HioSe8XCm2ksSHNrd2R6+hSjvTBxeMNhJ9pYeu/90cWB1nQLuNA=="],
+
+    "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.3.2", "", { "os": "win32", "cpu": "x64" }, "sha512-H4Y2o2/JcHu8LtwzD5CXfHhwxwz8gfsx2HXDEw46Mtev5xHnEmB7HNtZtmriw5ReUOjRtcDqo7XSbU01FT9NlA=="],
+
+    "@orpc/client": ["@orpc/client@1.15.0", "", { "dependencies": { "@orpc/shared": "1.15.0", "@orpc/standard-server": "1.15.0", "@orpc/standard-server-fetch": "1.15.0", "@orpc/standard-server-peer": "1.15.0" } }, "sha512-Qt0FdPSGySdQwy83iUWOq+Iqhw2gM9qHtyxfBbcw1mwOz1s4O2BwUFA3ymVTLIRRNYRgPrQLaBZhp8CacqeePg=="],
+
+    "@orpc/shared": ["@orpc/shared@1.15.0", "", { "dependencies": { "radash": "12.1.1", "type-fest": "5.8.0" } }, "sha512-A3/JE7pQYSrrRm6/WYJxV3GBhpMdJRPM3h47slQtWBUZe9Sao5En5WBc4tISGQNP2emcez6qIvDziSgD2T+img=="],
+
+    "@orpc/standard-server": ["@orpc/standard-server@1.15.0", "", { "dependencies": { "@orpc/shared": "1.15.0" } }, "sha512-bje/xn6thDqJY/JQ7xoOjmD1KWE4FsyZOPgnPxwqTZLx/r00stRhLuFvk1hDEGj9UlG7NLZEijDVx0wqvcyDzA=="],
+
+    "@orpc/standard-server-fetch": ["@orpc/standard-server-fetch@1.15.0", "", { "dependencies": { "@orpc/shared": "1.15.0", "@orpc/standard-server": "1.15.0" } }, "sha512-XYVfgmIt71YrPJSI7RKRiNWjcyktPYHpevkjeohGNBP5aSMAUL95quZArAWr+XOPp4U56XRao54I6wFMZa4How=="],
+
+    "@orpc/standard-server-peer": ["@orpc/standard-server-peer@1.15.0", "", { "dependencies": { "@orpc/shared": "1.15.0", "@orpc/standard-server": "1.15.0" } }, "sha512-fsTN+FrdPkseVx99yRenGJYSp0xOrEk9fODk8oh3zzricNYzlZ8GGgCYtDNgt9vFIR/J05dc+Nk76KhcPBQpLw=="],
+
+    "@puppeteer/browsers": ["@puppeteer/browsers@3.2.1", "", { "dependencies": { "modern-tar": "^0.8.0", "yargs": "^18.0.0" }, "peerDependencies": { "proxy-agent": ">=8.0.1", "yauzl": "^2.10.0 || ^3.4.0" }, "optionalPeers": ["proxy-agent", "yauzl"], "bin": { "browsers": "lib/main-cli.js" } }, "sha512-KDz+3qDRdBAlRlMjmKyj6dEs33YHTk/xRHEENSXq6TNnhgoU15ruSHtEBeVF6OZ9tBDY55Se4P0nFMNsipzU9A=="],
+
+    "@swc/helpers": ["@swc/helpers@0.5.23", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw=="],
+
+    "@tailwindcss/node": ["@tailwindcss/node@4.3.3", "", { "dependencies": { "@jridgewell/remapping": "2.3.5", "enhanced-resolve": "5.24.4", "jiti": "2.7.0", "lightningcss": "1.32.0", "magic-string": "0.30.21", "source-map-js": "1.2.1", "tailwindcss": "4.3.3" } }, "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.3", "@tailwindcss/oxide-darwin-arm64": "4.3.3", "@tailwindcss/oxide-darwin-x64": "4.3.3", "@tailwindcss/oxide-freebsd-x64": "4.3.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", "@tailwindcss/oxide-linux-x64-musl": "4.3.3", "Line truncated
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.3", "", { "os": "android", "cpu": "arm64" }, "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3", "", { "os": "linux", "cpu": "arm" }, "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img=="],
+
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.3", "", { "cpu": "none" }, "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ=="],
+
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ=="],
+
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.3", "", { "os": "win32", "cpu": "x64" }, "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw=="],
+
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.3.3", "", { "dependencies": { "@alloc/quick-lru": "5.2.0", "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "postcss": "8.5.25", "tailwindcss": "4.3.3" } }, "sha512-JTSZZGQi1AyKirbLN3azmjVzef92tcX7h+iSqPdaeStyFpGpDlKvvpxeOE8njhbUanbRwr3z8DyzhICWnMtQeg=="],
+
+    "@tweenjs/tween.js": ["@tweenjs/tween.js@23.1.3", "", {}, "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA=="],
+
+    "@types/node": ["@types/node@26.3.0", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-L3fgrnchriRC2ExBflb8j4uZZURHZfQsmQeyVzhjcHW4kkwVyo8/0h1B2MVzMTrYUJYu6G7EWs14hW/L9putqw=="],
+
+    "@types/react": ["@types/react@19.2.17", "", { "dependencies": { "csstype": "3.2.3" } }, "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw=="],
+
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "19.2.17" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
+    "@types/stats.js": ["@types/stats.js@0.17.4", "", {}, "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA=="],
+
+    "@types/three": ["@types/three@0.185.4", "", { "dependencies": { "@dimforge/rapier3d-compat": "~0.12.0", "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", "@types/webxr": ">=0.5.17", "fflate": "~0.8.2", "meshoptimizer": "~1.1.1" } }, "sha512-gAsBIC07NIFrxjbf7tH2t71c38uulFfk/RFoC7FNBSjMRAQ8J1x/RBvusX0N5PJouaYFJawXQqfCQ0RKUx/1nA=="],
+
+    "@types/webxr": ["@types/webxr@0.5.24", "", {}, "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg=="],
+
+    "@typescript/typescript-aix-ppc64": ["@typescript/typescript-aix-ppc64@7.0.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ=="],
+
+    "@typescript/typescript-darwin-arm64": ["@typescript/typescript-darwin-arm64@7.0.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA=="],
+
+    "@typescript/typescript-darwin-x64": ["@typescript/typescript-darwin-x64@7.0.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA=="],
+
+    "@typescript/typescript-freebsd-arm64": ["@typescript/typescript-freebsd-arm64@7.0.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ=="],
+
+    "@typescript/typescript-freebsd-x64": ["@typescript/typescript-freebsd-x64@7.0.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw=="],
+
+    "@typescript/typescript-linux-arm": ["@typescript/typescript-linux-arm@7.0.2", "", { "os": "linux", "cpu": "arm" }, "sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ=="],
+
+    "@typescript/typescript-linux-arm64": ["@typescript/typescript-linux-arm64@7.0.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ=="],
+
+    "@typescript/typescript-linux-loong64": ["@typescript/typescript-linux-loong64@7.0.2", "", { "os": "linux", "cpu": "none" }, "sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ=="],
+
+    "@typescript/typescript-linux-mips64el": ["@typescript/typescript-linux-mips64el@7.0.2", "", { "os": "linux", "cpu": "none" }, "sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA=="],
+
+    "@typescript/typescript-linux-ppc64": ["@typescript/typescript-linux-ppc64@7.0.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA=="],
+
+    "@typescript/typescript-linux-riscv64": ["@typescript/typescript-linux-riscv64@7.0.2", "", { "os": "linux", "cpu": "none" }, "sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ=="],
+
+    "@typescript/typescript-linux-s390x": ["@typescript/typescript-linux-s390x@7.0.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw=="],
+
+    "@typescript/typescript-linux-x64": ["@typescript/typescript-linux-x64@7.0.2", "", { "os": "linux", "cpu": "x64" }, "sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A=="],
+
+    "@typescript/typescript-netbsd-arm64": ["@typescript/typescript-netbsd-arm64@7.0.2", "", { "os": "none", "cpu": "arm64" }, "sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA=="],
+
+    "@typescript/typescript-netbsd-x64": ["@typescript/typescript-netbsd-x64@7.0.2", "", { "os": "none", "cpu": "x64" }, "sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA=="],
+
+    "@typescript/typescript-openbsd-arm64": ["@typescript/typescript-openbsd-arm64@7.0.2", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ=="],
+
+    "@typescript/typescript-openbsd-x64": ["@typescript/typescript-openbsd-x64@7.0.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg=="],
+
+    "@typescript/typescript-sunos-x64": ["@typescript/typescript-sunos-x64@7.0.2", "", { "os": "sunos", "cpu": "x64" }, "sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g=="],
+
+    "@typescript/typescript-win32-arm64": ["@typescript/typescript-win32-arm64@7.0.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ=="],
+
+    "@typescript/typescript-win32-x64": ["@typescript/typescript-win32-x64@7.0.2", "", { "os": "win32", "cpu": "x64" }, "sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g=="],
+
+    "ansi-regex": ["ansi-regex@6.3.0", "", {}, "sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ=="],
+
+    "ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
+
+    "babel-plugin-react-compiler": ["babel-plugin-react-compiler@1.0.0", "", { "dependencies": { "@babel/types": "7.29.7" } }, "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw=="],
+
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.11.7", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-APw5YuIQAg6L9w4sHDI6j26DGFJI6RpYOhnkMPdC9lWbkKvsyPHzDsve1yd73lk21yz7Y09Kci8B2Pp9FonzWA=="],
+
+    "browserslist": ["browserslist@4.28.7", "", { "dependencies": { "baseline-browser-mapping": "2.11.7", "caniuse-lite": "1.0.30001806", "electron-to-chromium": "1.5.398", "node-releases": "2.0.51", "update-browserslist-db": "1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw=="],
+
+    "caniuse-lite": ["caniuse-lite@1.0.30001806", "", {}, "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw=="],
+
+    "chromium-bidi": ["chromium-bidi@17.0.2", "", { "dependencies": { "mitt": "3.0.1", "zod": "3.25.76" }, "peerDependencies": { "devtools-protocol": "0.0.1666840" } }, "sha512-5v9GQFhTktFvotn/OFNJBmKLKRAb6n9r0bVCwf7sHgWc3/JryK0bj1nn93L3pHFrfgcsu6Be6EWsDi+1XHTGDg=="],
+
+    "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
+
+    "cliui": ["cliui@9.0.1", "", { "dependencies": { "string-width": "7.2.0", "strip-ansi": "7.2.0", "wrap-ansi": "9.0.2" } }, "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w=="],
+
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
+    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
+
+    "devtools-protocol": ["devtools-protocol@0.0.1666840", "", {}, "sha512-gCcO42XCHKEs7Ag0S7aGYsnJ7hlgrO3qderYqeiY0Eqk+0GFfuvT13IA0hHreJTa2KCdDVyGMeOhdMNmrrTjVg=="],
+
+    "electron-to-chromium": ["electron-to-chromium@1.5.398", "", {}, "sha512-AsvhAxopJGh6museTDMIjn6JpDYOfgu4RLlygomt87MUwBUqTfd/1EiPtx10/LZE8xpTvkP2E9Gafq7lkLtodQ=="],
+
+    "emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
+
+    "enhanced-resolve": ["enhanced-resolve@5.24.4", "", { "dependencies": { "graceful-fs": "4.2.11", "tapable": "2.3.3" } }, "sha512-GVoi+ICHocoOIU7qVVM48wOJziRsqrsyqlI0Ce0LdowRn6v3bcH2zUa9kp85ncx0nwIb9/HOCOLS3fdThDG/XQ=="],
+
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "event-target-polyfill": ["event-target-polyfill@0.0.4", "", {}, "sha512-Gs6RLjzlLRdT8X9ZipJdIZI/Y6/HhRLyq9RdDlCsnpxr/+Nn6bU2EFGuC94GjxqhM+Nmij2Vcq98yoHrU8uNFQ=="],
+
+    "fflate": ["fflate@0.8.3", "", {}, "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="],
+
+    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
+
+    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
+
+    "get-east-asian-width": ["get-east-asian-width@1.6.0", "", {}, "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA=="],
+
+    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
+
+    "gsap": ["gsap@3.15.0", "", {}, "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A=="],
+
+    "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
+
+    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
+
+    "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
+
+    "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
+
+    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "2.1.2" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcssLine truncated
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
+
+    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "3.1.1" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+
+    "lucide-react": ["lucide-react@1.34.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-vnjGJNI7Htk5+oWW8gXGuaLgwgAb0T6/iZbBrp9JCfRFwdNWZ0YTm3eyxjOLgwN6r8iyAf3UA70zNmBRBNv7yg=="],
+
+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "meshoptimizer": ["meshoptimizer@1.1.1", "", {}, "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g=="],
+
+    "mitt": ["mitt@3.0.1", "", {}, "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="],
+
+    "modern-tar": ["modern-tar@0.8.4", "", {}, "sha512-gN54ddmyzEg10orwZ2u4OOv+bjpMWdIl5jIkodK97bMq8QBSL5c0D7YX0lT1Ooz+99S7+PvFbnxzdjgHo1r41g=="],
+
+    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
+    "nanoid": ["nanoid@3.3.16", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q=="],
+
+    "next": ["next@16.3.2", "", { "dependencies": { "@next/env": "16.3.2", "@swc/helpers": "0.5.23", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.5.23", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.3.2", "@next/swc-darwin-x64": "16.3.2", "@next/swc-linux-arm64-gnu": "16.3.2", "@next/swc-linux-arm64-musl": "16.3.2", "@next/swc-linux-x64-gnu": "16.3.2", "@next/swc-linux-x64-musl": "16.3.2", "@next/swc-win32-arm64-msvc": Line truncated
+
+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "19.2.4", "react-dom": "19.2.4" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
+
+    "node-releases": ["node-releases@2.0.51", "", {}, "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ=="],
+
+    "partysocket": ["partysocket@1.3.0", "", { "dependencies": { "event-target-polyfill": "0.0.4" }, "optionalDependencies": { "react": "19.2.4" } }, "sha512-1zToNyolZFK/7nuAw/K2bZrNzFqaZyRoCEkS+9vG6WSC5ikrN6qWRe96q6ImU51uptz2r+dAwSkwhJVdQi4LiA=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "postcss": ["postcss@8.5.25", "", { "dependencies": { "nanoid": "3.3.16", "picocolors": "1.1.1", "source-map-js": "1.2.1" } }, "sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw=="],
+
+    "puppeteer-core": ["puppeteer-core@25.9.0", "", { "dependencies": { "@puppeteer/browsers": "3.2.1", "chromium-bidi": "17.0.2", "devtools-protocol": "0.0.1666840", "typed-query-selector": "^2.12.2", "webdriver-bidi-protocol": "0.4.2", "ws": "^8.21.3" } }, "sha512-U61rCwSMha62CA/Opy6tCx2Fx+ck7ouiKnbpEApzSoLYMoEu9F71nuFpHL55vmIt33/GYm6eKZVhH2ev0nAIeg=="],
+
+    "radash": ["radash@12.1.1", "", {}, "sha512-h36JMxKRqrAxVD8201FrCpyeNuUY9Y5zZwujr20fFO77tpUtGa6EZzfKw/3WaiBX95fq7+MpsuMLNdSnORAwSA=="],
+
+    "react": ["react@19.2.8", "", {}, "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw=="],
+
+    "react-dom": ["react-dom@19.2.8", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.8" } }, "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ=="],
+
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+
+    "semver": ["semver@7.8.5", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA=="],
+
+    "sharp": ["sharp@0.35.3", "", { "dependencies": { "@img/colour": "^1.1.0", "detect-libc": "^2.1.2", "semver": "^7.8.5" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.35.3", "@img/sharp-darwin-x64": "0.35.3", "@img/sharp-freebsd-wasm32": "0.35.3", "@img/sharp-libvips-darwin-arm64": "1.3.2", "@img/sharp-libvips-darwin-x64": "1.3.2", "@img/sharp-libvips-linux-arm": "1.3.2", "@img/sharp-libvips-linux-arm64": "1.3.2", "@img/sharp-libvips-linux-ppc64": "1.3.2", "@img/sharp-libvips-linLine truncated
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "string-width": ["string-width@8.2.2", "", { "dependencies": { "get-east-asian-width": "1.6.0", "strip-ansi": "7.2.0" } }, "sha512-GaPUh5gfdrYzqeVNZvUfT23vYYxXzKYidUcnMtJg/3rxRV63EFZy3k6xfKlmfeJD0176lnUV/Usr3XcwSvFzpg=="],
+
+    "strip-ansi": ["strip-ansi@7.2.0", "", { "dependencies": { "ansi-regex": "6.3.0" } }, "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w=="],
+
+    "styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "optionalDependencies": { "@babel/core": "7.29.7" }, "peerDependencies": { "react": "19.2.4" } }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
+
+    "swr": ["swr@2.5.1", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-BRw55e8r0B7SpDN20CAzoQAHl7y1yP7/Zt7oqUjMv0vSt2u2Xnkm88Ws+VypbV9BXHQVuSuyVq7zMjO16wSExw=="],
+
+    "tagged-tag": ["tagged-tag@1.0.0", "", {}, "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="],
+
+    "tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="],
+
+    "tailwindcss": ["tailwindcss@4.3.3", "", {}, "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ=="],
+
+    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
+
+    "three": ["three@0.185.1", "", {}, "sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg=="],
+
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "type-fest": ["type-fest@5.8.0", "", { "dependencies": { "tagged-tag": "1.0.0" } }, "sha512-YGYEVz3Fm5iy/AybuA0oyNFq7H4CgQNfRp/qfe8nurE1kuCeNm3/vfm9X4Mtl+qLyaKJUh5xrFZwogr41SMjYA=="],
+
+    "typed-query-selector": ["typed-query-selector@2.12.2", "", {}, "sha512-EOPFbyIub4ngnEdqi2yOcNeDLaX/0jcE1JoAXQDDMIthap7FoN795lc/SHfIq2d416VufXpM8z/lD+WRm2gfOQ=="],
+
+    "typescript": ["typescript@7.0.2", "", { "optionalDependencies": { "@typescript/typescript-aix-ppc64": "7.0.2", "@typescript/typescript-darwin-arm64": "7.0.2", "@typescript/typescript-darwin-x64": "7.0.2", "@typescript/typescript-freebsd-arm64": "7.0.2", "@typescript/typescript-freebsd-x64": "7.0.2", "@typescript/typescript-linux-arm": "7.0.2", "@typescript/typescript-linux-arm64": "7.0.2", "@typescript/typescript-linux-loong64": "7.0.2", "@typescript/typescript-linux-mips64el": "7.0.2", "@Line truncated
+
+    "undici-types": ["undici-types@8.3.0", "", {}, "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ=="],
+
+    "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "3.2.0", "picocolors": "1.1.1" }, "peerDependencies": { "browserslist": "4.28.7" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
+
+    "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "19.2.4" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
+
+    "webdriver-bidi-protocol": ["webdriver-bidi-protocol@0.4.2", "", {}, "sha512-VSV+fzfChirL3e7jay2yUC7B4HQCGtEWEg/MSSQbK+qWbqeGlRLlXTzPpYr3XGUvbpDHumWZBJxgesg4N7dbtA=="],
+
+    "wrap-ansi": ["wrap-ansi@9.0.2", "", { "dependencies": { "ansi-styles": "6.2.3", "string-width": "7.2.0", "strip-ansi": "7.2.0" } }, "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww=="],
+
+    "ws": ["ws@8.21.3", "", {}, "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw=="],
+
+    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+
+    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
+
+    "yargs": ["yargs@18.1.0", "", { "dependencies": { "cliui": "9.0.1", "escalade": "3.2.0", "get-caller-file": "2.0.5", "string-width": "8.2.2", "y18n": "5.0.8", "yargs-parser": "22.0.0" } }, "sha512-2rAgRKu54VsHkqI0/tYkmluGXHD4KW7yZoycuqDQ15QOTnc2VVfy0nN/1eMhnQLO00A+dwtK20xuCnc1YGeUyg=="],
+
+    "yargs-parser": ["yargs-parser@22.0.0", "", {}, "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw=="],
+
+    "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
+
+    "@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "@babel/helper-compilation-targets/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "cliui/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "10.6.0", "get-east-asian-width": "1.6.0", "strip-ansi": "7.2.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+
+    "next/postcss": ["postcss@8.5.23", "", { "dependencies": { "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg=="],
+
+    "partysocket/react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
+
+    "wrap-ansi/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "10.6.0", "get-east-asian-width": "1.6.0", "strip-ansi": "7.2.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+  }
+}

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)/channels/view.tsx

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

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

@@ -1,46 +1,49 @@
 "use client";
 
 import {
-  Activity,
+  AudioWaveform,
-  Flag,
+  ChevronRight,
+  Flame,
   MessageSquare,
   Mic,
-  Radio,
+  Shield,
   ShieldAlert,
+  Terminal,
   Users,
 } from "lucide-react";
+import Link from "next/link";
 import { useEffect } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
 import { AreaActivity, RadialGauge } from "@/components/charts";
 import { GlassPanel } from "@/components/primitives";
 import {
   ErrorState,
-  LoadingState,
+  PageTransition,
   SkeletonHero,
   SkeletonMetricRow,
   SkeletonPanel,
 } from "@/components/shared";
-import { MetricTile, SectionHeader } from "@/components/shared/section";
+import { useActivity, useStats, useTopReactions } from "@/hooks";
-import {
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
-  useActivity,
-  useStats,
-  useTopReactions,
-  useTopReactors,
-} from "@/hooks";
 import { formatNumber } from "@/lib/format";
 import type { DashboardStats } from "@/lib/types";
-import { staggerDelay } from "@/lib/utils";
 
 function deriveSignal(stats?: DashboardStats) {
-  if (!stats) return { tone: "signal" as const, label: "nominal" };
+  if (!stats)
+    return { tone: "signal" as const, label: "NOMINAL", state: "STABLE" };
   const total = stats.total_flagged + stats.total_clean || 1;
   const ratio = stats.total_flagged / total;
   if (stats.moderation_overview.error > 0)
-    return { tone: "vermilion" as const, label: "moderation fault" };
+    return { tone: "vermilion" as const, label: "FAULT", state: "MOD_ERR" };
   if (ratio > 0.25)
-    return { tone: "vermilion" as const, label: "elevated flags" };
+    return {
-  if (ratio > 0.1) return { tone: "amber" as const, label: "watch" };
+      tone: "vermilion" as const,
-  return { tone: "signal" as const, label: "nominal" };
+      label: "ELEVATED",
+      state: "HIGH_RISK",
+    };
+  if (ratio > 0.1)
+    return { tone: "amber" as const, label: "WATCH", state: "ADVISORY" };
+  return { tone: "signal" as const, label: "NOMINAL", state: "OPTIMAL" };
 }
 
 export function DashboardView({
@@ -57,10 +60,15 @@ export function DashboardView({
     mutate: mutateStats,
   } = useStats(initialStats);
   const { data: activity } = useActivity(14, initialActivity as never);
-  const { data: reactors } = useTopReactors();
   const { data: reactions } = useTopReactions();
   const ambient = useAmbient();
 
+  const hudRef = useStaggerReveal<HTMLDivElement>(".hud-tile", {
+    stagger: 0.05,
+    y: 16,
+    dependencies: [stats],
+  });
+
   useEffect(() => {
     const s = deriveSignal(stats);
     ambient.set(
@@ -78,16 +86,12 @@ export function DashboardView({
         <SkeletonHero />
         <SkeletonMetricRow cols={4} />
         <SkeletonPanel rows={5} />
-        <div className="grid gap-5 lg:grid-cols-5">
-          <SkeletonPanel className="lg:col-span-3" rows={4} />
-          <SkeletonPanel className="lg:col-span-2" rows={4} />
-        </div>
       </div>
     );
   if (!stats)
     return (
       <ErrorState
-        error={error ?? new Error("No data")}
+        error={error ?? new Error("No telemetry stream")}
         onRetry={() => void mutateStats()}
       />
     );
@@ -95,286 +99,278 @@ export function DashboardView({
   const s = stats;
   const total = s.total_flagged + s.total_clean || 1;
   const cleanRatio = s.total_clean / total;
+  const sig = deriveSignal(s);
 
   return (
-    <div className="space-y-5">
+    <PageTransition>
-      {/* Hero */}
+      <div ref={hudRef} className="space-y-4">
-      <GlassPanel glow className="game-frame relative overflow-hidden">
+        {/* Tactical HUD Header Bar */}
-        <div className="scan-line absolute inset-x-0 top-0" />
+        <div className="hud-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
-        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div className="flex items-center gap-3">
-          <div>
+            <div className="relative flex size-3 items-center justify-center">
-            <div className="eyebrow mb-2">GMW · Operations Grid</div>
+              <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
-            <h2 className="display hero-clamp leading-none text-ink glow-signal">
+              <span className="relative inline-flex size-2 rounded-full bg-signal" />
-              Ambient Field
+            </div>
-            </h2>
+            <div className="flex items-baseline gap-2">
-            <p className="mt-2 max-w-md text-pretty text-sm text-ink-soft">
+              <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
-              Real-time moderation, voice & media presence across the monitored
+                GMW TELEMETRY · MATRIX_01
-              guild. {formatNumber(s.total_messages)} messages captured.
+              </h1>
-            </p>
+              <span className="font-mono text-[10px] text-ink-faint">
+                [LIVE_MONITOR]
+              </span>
+            </div>
           </div>
-          <div className="flex items-center gap-2 text-ink-soft">
+
-            <Radio className="size-4 text-signal animate-breathe" />
+          <div className="flex items-center gap-2">
-            <span className="mono text-xs uppercase tracking-wider">
+            <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">
-              {deriveSignal(s).label}
+              <span className="text-ink-faint">SYS_STATUS:</span>
-            </span>
+              <span className="font-bold text-signal">{sig.state}</span>
+            </div>
+            <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+              <span className="text-ink-faint">VER:</span>
+              <span className="text-ink">v2.4-GSAP</span>
+            </div>
           </div>
         </div>
 
-        <div className="mt-5 grid grid-cols-2 gap-3 md:grid-cols-4">
+        {/* Spatial HUD Grid: Live Mission Control */}
-          <MetricTile
+        <div className="grid gap-4 lg:grid-cols-12">
-            label="Messages"
+          {/* Main Telemetry & Activity Area */}
-            value={formatNumber(s.total_messages)}
+          <div className="space-y-4 lg:col-span-8">
-            tone="signal"
+            {/* Primary Telemetry Cluster */}
-            icon={<MessageSquare className="size-3.5" />}
+            <div className="hud-tile grid grid-cols-2 gap-2.5 sm:grid-cols-4">
-            className="animate-stagger"
+              <div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
-            style={staggerDelay(0)}
+                <div className="flex items-center justify-between text-ink-faint">
-          />
+                  <span className="font-mono text-[10px] tracking-wider uppercase">
-          <MetricTile
+                    Messages
-            label="Flagged"
-            value={formatNumber(s.total_flagged)}
-            tone={s.total_flagged > 0 ? "vermilion" : "neutral"}
-            hint={`${s.today_flagged} today`}
-            className="animate-stagger"
-            style={staggerDelay(1)}
-          />
-          <MetricTile
-            label="Active 24h"
-            value={formatNumber(s.active_users_24h)}
-            tone="signal"
-            icon={<Users className="size-3.5" />}
-            className="animate-stagger"
-            style={staggerDelay(2)}
-          />
-          <MetricTile
-            label="Voice clips"
-            value={formatNumber(s.total_voice_recordings)}
-            icon={<Mic className="size-3.5" />}
-            className="animate-stagger"
-            style={staggerDelay(3)}
-          />
-        </div>
-      </GlassPanel>
-
-      {/* Activity */}
-      <GlassPanel>
-        <SectionHeader
-          eyebrow="14-day signal"
-          title={
-            <span className="flex items-center gap-2">
-              <Activity className="size-4 text-signal" /> Activity & moderation
-            </span>
-          }
-          action={
-            <div className="flex items-center gap-3 text-xs text-ink-soft">
-              <span className="flex items-center gap-1.5">
-                <span className="size-2 rounded-full bg-signal" /> messages
-              </span>
-              <span className="flex items-center gap-1.5">
-                <span className="size-2 rounded-full bg-vermilion" /> flagged
-              </span>
-            </div>
-          }
-        />
-        {activity ? (
-          <AreaActivity daily={activity.daily} />
-        ) : (
-          <LoadingState label="streaming" />
-        )}
-      </GlassPanel>
-
-      {/* Two-column: channels + moderation */}
-      <div className="grid gap-5 lg:grid-cols-5">
-        <GlassPanel className="lg:col-span-3">
-          <SectionHeader eyebrow="throughput" title="Top channels" />
-          <div className="space-y-2.5">
-            {s.top_channels.slice(0, 7).map((c) => {
-              const pct =
-                (c.message_count / (s.top_channels[0]?.message_count || 1)) *
-                100;
-              return (
-                <div key={c.channel_id} className="flex items-center gap-3">
-                  <span className="w-28 shrink-0 truncate text-sm text-ink-soft sm:w-40">
-                    {c.channel_name ?? c.channel_id.slice(0, 8)}
-                  </span>
-                  <div className="h-2 flex-1 overflow-hidden rounded-full bg-white/8">
-                    <div
-                      className="h-full rounded-full bg-signal/70"
-                      style={{ width: `${pct}%` }}
-                    />
-                  </div>
-                  <span className="mono w-14 text-right text-xs text-ink-faint">
-                    {formatNumber(c.message_count)}
                   </span>
+                  <MessageSquare className="size-3.5 text-signal" />
                 </div>
-              );
+                <div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
-            })}
+                  {formatNumber(s.total_messages)}
-          </div>
-        </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
-                icon={<Flag className="size-4 text-vermilion" />}
-                label="Flagged"
-                value={formatNumber(s.total_flagged)}
-              />
-              <Row
-                icon={<Activity className="size-4 text-amber" />}
-                label="Warned"
-                value={formatNumber(s.total_warned)}
-              />
-            </div>
-          </div>
-          <div className="mt-4 flex items-center justify-around border-t border-hairline pt-3 text-center">
-            <Mini
-              label="pending"
-              value={s.moderation_overview.pending}
-              tone="amber"
-            />
-            <Mini
-              label="processing"
-              value={s.moderation_overview.processing}
-              tone="signal"
-            />
-            <Mini
-              label="errors"
-              value={s.moderation_overview.error}
-              tone="vermilion"
-            />
-          </div>
-        </GlassPanel>
-      </div>
-
-      {/* Reactors + reactions */}
-      <div className="grid gap-5 lg:grid-cols-2">
-        <GlassPanel>
-          <SectionHeader eyebrow="engagement" title="Top reactors" />
-          <div className="space-y-2">
-            {(reactors ?? []).slice(0, 6).map((r, i) => {
-              const maxNet = reactors?.[0]?.net_count || 1;
-              const pct = Math.max(4, Math.round((r.net_count / maxNet) * 100));
-              return (
-                <div key={r.user_id} className="flex items-center gap-3">
-                  <span className="mono w-5 text-ink-faint">{i + 1}</span>
-                  <span className="w-28 shrink-0 truncate text-sm text-ink-soft sm:w-40">
-                    {r.username}
-                  </span>
-                  <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-white/8">
-                    <div
-                      className="h-full rounded-full bg-signal/70"
-                      style={{ width: `${pct}%` }}
-                    />
-                  </div>
-                  <span className="mono w-12 text-right text-xs text-signal">
-                    +{formatNumber(r.net_count)}
-                  </span>
                 </div>
-              );
+                <div className="mt-1 flex items-center gap-1 font-mono text-[10px] text-ink-faint">
-            })}
+                  <span className="text-signal">↑ live</span> ingest
-            {(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>
-            ))}
+
-            {(reactions ?? []).length === 0 && <EmptyHint />}
+              <div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
+                <div className="flex items-center justify-between text-ink-faint">
+                  <span className="font-mono text-[10px] tracking-wider uppercase">
+                    Flagged
+                  </span>
+                  <ShieldAlert className="size-3.5 text-vermilion" />
+                </div>
+                <div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
+                  {formatNumber(s.total_flagged)}
+                </div>
+                <div className="mt-1 font-mono text-[10px] text-ink-faint">
+                  <span className="text-vermilion">{s.today_flagged}</span>{" "}
+                  today
+                </div>
+              </div>
+
+              <div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
+                <div className="flex items-center justify-between text-ink-faint">
+                  <span className="font-mono text-[10px] tracking-wider uppercase">
+                    Active 24h
+                  </span>
+                  <Users className="size-3.5 text-signal" />
+                </div>
+                <div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
+                  {formatNumber(s.active_users_24h)}
+                </div>
+                <div className="mt-1 font-mono text-[10px] text-ink-faint">
+                  <span>unique accounts</span>
+                </div>
+              </div>
+
+              <div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
+                <div className="flex items-center justify-between text-ink-faint">
+                  <span className="font-mono text-[10px] tracking-wider uppercase">
+                    Voice Captures
+                  </span>
+                  <Mic className="size-3.5 text-signal" />
+                </div>
+                <div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
+                  {formatNumber(s.total_voice_recordings)}
+                </div>
+                <div className="mt-1 font-mono text-[10px] text-ink-faint">
+                  <span>audio buffers</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Activity Waveform / Time Series */}
+            <GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
+              <div className="mb-4 flex items-center justify-between">
+                <div>
+                  <div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
+                    CHRONO TELEMETRY (14D)
+                  </div>
+                  <div className="text-sm font-medium text-ink">
+                    Message & Activity Stream
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 font-mono text-[11px]">
+                  <div className="flex items-center gap-1 text-ink-soft">
+                    <span className="size-2 rounded-full bg-signal" />
+                    <span>Activity Trend</span>
+                  </div>
+                </div>
+              </div>
+              <div className="h-56 w-full">
+                {activity?.daily ? (
+                  <AreaActivity daily={activity.daily} />
+                ) : (
+                  <div className="flex h-full items-center justify-center font-mono text-xs text-ink-faint">
+                    ACQUIRING SIGNAL...
+                  </div>
+                )}
+              </div>
+            </GlassPanel>
+
+            {/* Quick Tactical Links */}
+            <div className="hud-tile grid grid-cols-1 gap-2.5 sm:grid-cols-3">
+              <Link
+                href="/voice"
+                className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
+              >
+                <div className="flex items-center gap-2.5">
+                  <div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
+                    <AudioWaveform className="size-4" />
+                  </div>
+                  <div>
+                    <div className="font-mono text-xs font-semibold text-ink">
+                      Voice Matrix
+                    </div>
+                    <div className="text-[11px] text-ink-faint">
+                      Realtime speaker stream
+                    </div>
+                  </div>
+                </div>
+                <ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
+              </Link>
+
+              <Link
+                href="/messages"
+                className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
+              >
+                <div className="flex items-center gap-2.5">
+                  <div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
+                    <Terminal className="size-4" />
+                  </div>
+                  <div>
+                    <div className="font-mono text-xs font-semibold text-ink">
+                      Chat Log Stream
+                    </div>
+                    <div className="text-[11px] text-ink-faint">
+                      Live telemetry feed
+                    </div>
+                  </div>
+                </div>
+                <ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
+              </Link>
+
+              <Link
+                href="/moderation"
+                className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
+              >
+                <div className="flex items-center gap-2.5">
+                  <div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
+                    <Shield className="size-4" />
+                  </div>
+                  <div>
+                    <div className="font-mono text-xs font-semibold text-ink">
+                      Auto-Mod Radar
+                    </div>
+                    <div className="text-[11px] text-ink-faint">
+                      Classification & audits
+                    </div>
+                  </div>
+                </div>
+                <ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
+              </Link>
+            </div>
           </div>
-        </GlassPanel>
+
+          {/* Side Telemetry Panel: Health, Dials, & Nodes */}
+          <div className="space-y-4 lg:col-span-4">
+            {/* Safety & Moderation Integrity Gauge */}
+            <GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
+              <div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
+                INTEGRITY MATRIX
+              </div>
+              <div className="mt-1 text-sm font-medium text-ink">
+                Clean Stream Ratio
+              </div>
+              <div className="my-4 flex items-center justify-center">
+                <RadialGauge
+                  value={Math.round(cleanRatio * 100)}
+                  size={140}
+                  tone={cleanRatio > 0.9 ? "signal" : "amber"}
+                  label={`${Math.round(cleanRatio * 100)}%`}
+                  sublabel="CLEAN RATIO"
+                />
+              </div>
+              <div className="space-y-2 border-t border-hairline pt-3 font-mono text-xs">
+                <div className="flex justify-between">
+                  <span className="text-ink-faint">Clean Messages:</span>
+                  <span className="font-medium text-ink">
+                    {formatNumber(s.total_clean)}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-ink-faint">Pending Flags:</span>
+                  <span className="font-medium text-vermilion">
+                    {formatNumber(s.total_flagged)}
+                  </span>
+                </div>
+              </div>
+            </GlassPanel>
+
+            {/* Top Reacted Messages / Emitters */}
+            <GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
+                    FREQUENT EMITTERS
+                  </div>
+                  <div className="text-sm font-medium text-ink">
+                    Top Reacted Messages
+                  </div>
+                </div>
+                <Flame className="size-4 text-amber" />
+              </div>
+
+              <div className="mt-3 space-y-2">
+                {reactions && reactions.length > 0 ? (
+                  reactions.slice(0, 4).map((r) => (
+                    <div
+                      key={r.message_id}
+                      className="flex items-center justify-between rounded bg-surface/30 px-2.5 py-1.5 font-mono text-xs"
+                    >
+                      <span className="max-w-[150px] truncate text-ink-soft">
+                        {r.username ? `@${r.username}` : "anonymous"}
+                      </span>
+                      <div className="flex items-center gap-2">
+                        <span className="text-ink-faint">reacts:</span>
+                        <span className="font-bold text-signal">
+                          {r.reaction_count}
+                        </span>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="py-4 text-center font-mono text-xs text-ink-faint">
+                    NO EMITTER TELEMETRY
+                  </div>
+                )}
+              </div>
+            </GlassPanel>
+          </div>
+        </div>
       </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,20 +1,21 @@
 "use client";
 
 import {
+  Disc,
   ListMusic,
   Play,
-  Radio,
   Repeat,
   SkipForward,
+  Sliders,
   Square,
-  Volume2,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
+import { Equalizer } from "@/components/charts";
 import { Button, GlassPanel, Input, toast } from "@/components/primitives";
 import {
   ErrorState,
-  SectionHeader,
+  PageTransition,
   SkeletonHero,
   SkeletonPanel,
 } from "@/components/shared";
@@ -26,9 +27,9 @@ import {
   useMediaStop,
   useMediaWsSync,
 } from "@/hooks";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { formatDuration } from "@/lib/format";
 import type { MediaState } from "@/lib/types";
-import { staggerDelay } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
@@ -56,6 +57,12 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
     0,
   );
 
+  const mediaRef = useStaggerReveal<HTMLDivElement>(".media-tile", {
+    stagger: 0.06,
+    y: 16,
+    dependencies: [playing, queueList.length],
+  });
+
   const tone = playing ? "signal" : queueList.length ? "amber" : "signal";
   useEffect(() => {
     ambient.set(
@@ -74,7 +81,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
     try {
       await queue.mutateAsync({ url: u, mode: "music" });
       setUrl("");
-      toast({ title: "Queued", tone: "signal" });
+      toast({ title: "Queued track", tone: "signal" });
     } catch (e) {
       toast({
         title: "Queue failed",
@@ -94,206 +101,201 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
       </div>
     );
 
+  const mockLevels = playing
+    ? [0.4, 0.7, 0.9, 0.6, 0.8, 0.5, 0.9, 0.7, 0.4, 0.8, 0.6, 0.9]
+    : [0.1, 0.1, 0.1, 0.1, 0.1, 0.1];
+
   return (
-    <div className="space-y-5">
+    <PageTransition>
-      <GlassPanel glow className="relative overflow-hidden">
+      <div ref={mediaRef} className="space-y-5">
-        <div className="scan-line absolute inset-x-0 top-0" />
+        {/* Top Media Matrix Stage */}
-        <div className="flex flex-col gap-5 sm:flex-row sm:items-center">
+        <div className="media-tile relative overflow-hidden rounded-xl border border-hairline/80 bg-surface/40 p-6 shadow-2xl backdrop-blur-xl">
-          <div
+          {/* Spatial Grid Header */}
-            className={`flex size-32 shrink-0 items-center justify-center rounded-full border border-hairline bg-gradient-to-br from-white/10 to-white/[0.02] ${playing ? "animate-spin-disc" : "animate-spin-disc paused"}`}
+          <div className="flex flex-wrap items-center justify-between gap-4 border-b border-hairline/60 pb-4">
-          >
+            <div className="flex items-center gap-3">
-            <div className="flex size-28 items-center justify-center overflow-hidden rounded-full bg-canvas/60">
+              <div className="flex size-9 items-center justify-center rounded-lg bg-canvas-2 border border-hairline text-signal shadow-inner">
-              {current?.thumbnailUrl ? (
+                <Disc
-                // biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
+                  className={`size-5 ${playing ? "animate-spin-disc text-signal" : "text-ink-faint"}`}
-                <img
-                  src={current.thumbnailUrl}
-                  alt=""
-                  className="size-full object-cover"
-                  loading="lazy"
                 />
-              ) : (
+              </div>
-                <ListMusic className="size-10 text-signal" />
+              <div>
-              )}
+                <h1 className="font-mono text-sm font-bold tracking-widest text-ink uppercase">
-            </div>
+                  MEDIA FREQUENCY DECK
-          </div>
+                </h1>
-
+                <div className="font-mono text-[11px] text-ink-faint">
-          <div className="min-w-0 flex-1">
+                  {playing
-            <div className="eyebrow mb-1 flex items-center gap-2">
+                    ? "STREAM_ACTIVE · 48KHZ STEREO"
-              {playing ? (
+                    : "DECK_IDLE · STANDBY"}
-                <>
-                  <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()}
-            />
-          </div>
-          <div className="flex shrink-0 items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-2.5">
-            <Volume2 className="size-4 text-ink-faint" />
-            <div className="h-1.5 w-24 overflow-hidden rounded-full bg-white/10">
-              <div
-                className="h-full rounded-full bg-signal/70"
-                style={{
-                  width: `${Math.round((media?.musicVolume ?? 0) * 100)}%`,
-                }}
-              />
-            </div>
-            <span className="mono w-9 text-right text-[0.65rem] text-ink-faint">
-              {Math.round((media?.musicVolume ?? 0) * 100)}%
-            </span>
-          </div>
-        </div>
-      </GlassPanel>
-
-      <GlassPanel>
-        <SectionHeader
-          eyebrow="up next"
-          title="Queue"
-          action={
-            <span className="mono text-xs text-ink-faint">
-              {queueList.length} track{queueList.length === 1 ? "" : "s"}
-              {queueTotal && ` · ${formatDuration(queueTotal)}`}
-            </span>
-          }
-        />
-        {queueList.length === 0 ? (
-          <div className="flex flex-col items-center gap-2 py-10 text-center">
-            <Radio className="size-6 text-ink-faint" />
-            <div className="text-sm text-ink-soft">Queue is empty</div>
-            <div className="text-xs text-ink-faint">
-              Paste a URL above to start playback.
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {queueList.map((item, i) => {
-              const isNext = i === 0 && playing;
-              return (
-                <div
-                  key={`${item.source}-${i}`}
-                  className={`animate-stagger flex items-center gap-3 rounded-[10px] border px-3 py-2.5 ${
-                    isNext
-                      ? "border-signal/40 bg-signal/[0.07]"
-                      : "border-hairline bg-white/5"
-                  }`}
-                  style={staggerDelay(i)}
-                >
-                  <span className="mono w-5 text-ink-faint">{i + 1}</span>
-                  {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>
+
+            <div className="flex items-center gap-2">
+              <span
+                className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 font-mono text-xs font-semibold ${playing ? "bg-signal/10 text-signal border border-signal/30" : "bg-surface text-ink-faint border border-hairline"}`}
+              >
+                <span
+                  className={`size-1.5 rounded-full ${playing ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
+                />
+                {playing ? "TRANSMITTING" : "STANDBY"}
+              </span>
+            </div>
           </div>
-        )}
+
-      </GlassPanel>
+          {/* Player Core View */}
-    </div>
+          <div className="mt-6 grid gap-6 lg:grid-cols-12 items-center">
+            {/* Vinyl & Visualizer Stage */}
+            <div className="lg:col-span-5 flex flex-col items-center justify-center">
+              <div className="relative flex size-44 items-center justify-center rounded-full border-2 border-dashed border-hairline/60 bg-canvas-2 shadow-2xl">
+                <div
+                  className={`absolute inset-2 rounded-full border border-hairline/30 ${playing ? "animate-spin-disc" : ""}`}
+                />
+                {current?.thumbnailUrl ? (
+                  <div
+                    className="size-32 rounded-full bg-cover bg-center border-2 border-hairline/80 shadow-lg"
+                    style={{ backgroundImage: `url(${current.thumbnailUrl})` }}
+                  />
+                ) : (
+                  <div className="flex size-32 items-center justify-center rounded-full bg-surface border border-hairline">
+                    <ListMusic className="size-12 text-ink-faint" />
+                  </div>
+                )}
+                {playing && (
+                  <div className="absolute -inset-2 rounded-full ring-2 ring-signal/40 animate-pulse-ring pointer-events-none" />
+                )}
+              </div>
+            </div>
+
+            {/* Current Track Telemetry & Controls */}
+            <div className="lg:col-span-7 space-y-4">
+              <div>
+                <div className="font-mono text-[10px] font-bold tracking-widest text-signal uppercase">
+                  {current ? "CURRENT TRANSMISSION" : "DECK UNLOADED"}
+                </div>
+                <h2 className="text-xl font-bold text-ink mt-1 truncate">
+                  {current?.title ?? "No active stream"}
+                </h2>
+                <div className="font-mono text-xs text-ink-soft mt-1">
+                  {current?.source
+                    ? `Source: ${current.source}`
+                    : "Queue a URL below to broadcast"}
+                </div>
+              </div>
+
+              {/* Realtime Equalizer preview */}
+              <div className="h-12 w-full rounded-md border border-hairline bg-canvas-2/50 p-2">
+                <Equalizer
+                  bars={mockLevels}
+                  color={
+                    playing ? "var(--color-signal)" : "var(--color-ink-faint)"
+                  }
+                />
+              </div>
+
+              {/* Interactive Playback Toolbar */}
+              <div className="flex flex-wrap items-center gap-2.5 pt-2">
+                <Button
+                  variant="primary"
+                  onClick={() => stop.mutateAsync()}
+                  disabled={!playing || stop.isPending}
+                  className="font-mono text-xs font-bold"
+                >
+                  <Square className="mr-1.5 size-3.5" /> STOP
+                </Button>
+
+                <Button
+                  variant="outline"
+                  onClick={() => skip.mutateAsync()}
+                  disabled={!playing || skip.isPending}
+                  className="font-mono text-xs font-bold"
+                >
+                  <SkipForward className="mr-1.5 size-3.5" /> SKIP
+                </Button>
+
+                <Button
+                  variant={media?.loop ? "primary" : "outline"}
+                  onClick={() => loop.mutateAsync(!media?.loop)}
+                  disabled={loop.isPending}
+                  className="font-mono text-xs font-bold"
+                >
+                  <Repeat className="mr-1.5 size-3.5" /> LOOP{" "}
+                  {media?.loop ? "ON" : "OFF"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Ingest & Queue Spatial Deck */}
+        <div className="grid gap-5 lg:grid-cols-12">
+          {/* URL Ingest Box */}
+          <div className="media-tile lg:col-span-5 space-y-4">
+            <GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl">
+              <div className="font-mono text-xs font-bold tracking-wider text-ink uppercase mb-3 flex items-center justify-between">
+                <span>INJECT AUDIO STREAM</span>
+                <Sliders className="size-4 text-signal" />
+              </div>
+              <div className="space-y-3">
+                <Input
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  placeholder="Paste YouTube or Audio URL..."
+                  className="font-mono text-xs"
+                />
+                <Button
+                  variant="primary"
+                  onClick={onPlay}
+                  disabled={queue.isPending || !url.trim()}
+                  className="w-full font-mono text-xs font-bold py-2.5"
+                >
+                  <Play className="mr-1.5 size-4" /> BROADCAST STREAM
+                </Button>
+              </div>
+            </GlassPanel>
+          </div>
+
+          {/* Queue List Stage */}
+          <div className="media-tile lg:col-span-7">
+            <GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl">
+              <div className="flex items-center justify-between border-b border-hairline/60 pb-3 mb-3">
+                <div className="font-mono text-xs font-bold tracking-wider text-ink uppercase">
+                  QUEUE STACK ({queueList.length})
+                </div>
+                <div className="font-mono text-[11px] text-ink-faint">
+                  Total: {formatDuration(queueTotal)}
+                </div>
+              </div>
+
+              <div className="space-y-2 max-h-64 overflow-y-auto pr-1">
+                {queueList.length > 0 ? (
+                  queueList.map((item, idx) => (
+                    <div
+                      key={item.id ?? idx}
+                      className="flex items-center justify-between rounded-lg border border-hairline bg-surface/30 p-2.5 font-mono text-xs transition hover:border-signal/40"
+                    >
+                      <div className="flex items-center gap-2.5 min-w-0">
+                        <span className="text-ink-faint font-bold">
+                          {idx + 1}.
+                        </span>
+                        <span className="truncate text-ink font-medium">
+                          {item.title ?? "Unknown Track"}
+                        </span>
+                      </div>
+                      <span className="text-ink-faint text-[11px] shrink-0 ml-2">
+                        {formatDuration(item.durationMs ?? 0)}
+                      </span>
+                    </div>
+                  ))
+                ) : (
+                  <div className="py-8 text-center font-mono text-xs text-ink-faint">
+                    NO QUEUED AUDIO IN BUFFER
+                  </div>
+                )}
+              </div>
+            </GlassPanel>
+          </div>
+        </div>
+      </div>
+    </PageTransition>
   );
 }

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

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

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

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

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

@@ -22,9 +22,9 @@ import {
   useRecordings,
   useRecordingsWsSync,
 } from "@/hooks";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { formatBytes, formatRelativeTime } from "@/lib/format";
 import type { VoiceRecording } from "@/lib/types";
-import { staggerDelay } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function RecordingsView({
@@ -39,6 +39,12 @@ export function RecordingsView({
   const ambient = useAmbient();
   const [playingId, setPlayingId] = useState<string | null>(null);
 
+  const deckRef = useStaggerReveal<HTMLDivElement>(".recording-deck-card", {
+    stagger: 0.05,
+    y: 14,
+    dependencies: [items],
+  });
+
   useEffect(() => {
     ambient.set("signal", 0.3, "recordings");
   }, [ambient]);
@@ -83,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

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

services/frontend/src/components/ChannelCultureGlossary.tsx

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

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

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

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

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

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

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

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

@@ -1,63 +1,135 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import { Radio } from "lucide-react";
+import { useRef } from "react";
 import { Avatar } from "@/components/primitives";
 import type { ActiveSpeaker } from "@/lib/types";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 export function VoiceStage({ speakers }: { speakers: ActiveSpeaker[] }) {
+  const containerRef = useRef<HTMLDivElement>(null);
   const n = speakers.length;
   const speaking = speakers.filter((s) => s.speaking).length;
   const live = speaking > 0;
+  const speakingIds = speakers
+    .filter((s) => s.speaking)
+    .map((s) => s.userId)
+    .join(",");
+
+  useGSAP(
+    () => {
+      if (!containerRef.current) return;
+      const speakerNodes =
+        containerRef.current.querySelectorAll(".speaker-node");
+      if (speakerNodes.length > 0) {
+        gsap.fromTo(
+          speakerNodes,
+          { scale: 0.7, opacity: 0 },
+          {
+            scale: 1,
+            opacity: 1,
+            duration: 0.4,
+            stagger: 0.05,
+            ease: "back.out(1.5)",
+          },
+        );
+      }
+    },
+    { scope: containerRef, dependencies: [speakers.length] },
+  );
+
+  // Reactive pulse ring loop keyed to active speaking set — cleared on stop.
+  useGSAP(
+    () => {
+      if (!containerRef.current) return;
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) return;
+
+      const ringNodes = containerRef.current.querySelectorAll(
+        ".speaker-pulse-ring",
+      );
+      if (ringNodes.length === 0) return;
+
+      const tl = gsap.timeline({ repeat: -1, yoyo: true });
+      tl.to(ringNodes, {
+        scale: 1.18,
+        opacity: 0.35,
+        duration: 0.55,
+        ease: "sine.inOut",
+        stagger: { each: 0.08, from: "random" },
+      });
+
+      return () => {
+        tl.kill();
+        gsap.set(ringNodes, { clearProps: "scale,opacity" });
+      };
+    },
+    { scope: containerRef, dependencies: [speakingIds] },
+  );
 
   return (
-    <div className="relative mx-auto aspect-square w-full max-w-[360px]">
+    <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,96 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { type RefObject, useRef } from "react";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
+/**
+ * Reusable hook for staggered reveal animations on child elements.
+ */
+export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
+  selector: string,
+  options?: {
+    stagger?: number;
+    duration?: number;
+    delay?: number;
+    y?: number;
+    dependencies?: unknown[];
+  },
+) {
+  const containerRef = useRef<T>(null);
+
+  useGSAP(
+    () => {
+      if (!containerRef.current) return;
+      const elements = containerRef.current.querySelectorAll(selector);
+      if (!elements || elements.length === 0) return;
+
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) {
+        gsap.set(elements, { opacity: 1, y: 0 });
+        return;
+      }
+
+      gsap.fromTo(
+        elements,
+        {
+          opacity: 0,
+          y: options?.y ?? 12,
+          scale: 0.98,
+        },
+        {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          duration: options?.duration ?? 0.35,
+          delay: options?.delay ?? 0.05,
+          stagger: options?.stagger ?? 0.04,
+          ease: "power2.out",
+          clearProps: "transform",
+        },
+      );
+    },
+    {
+      scope: containerRef,
+      dependencies: options?.dependencies ?? [],
+      revertOnUpdate: true,
+    },
+  );
+
+  return containerRef;
+}
+
+/**
+ * Animated number counter using GSAP.
+ */
+export function useCounter(
+  targetValue: number,
+  ref: RefObject<HTMLElement | null>,
+  formatter?: (val: number) => string,
+) {
+  useGSAP(
+    () => {
+      if (!ref.current) return;
+      const obj = { val: 0 };
+      gsap.to(obj, {
+        val: targetValue,
+        duration: 0.8,
+        ease: "power2.out",
+        onUpdate: () => {
+          if (ref.current) {
+            ref.current.textContent = formatter
+              ? formatter(obj.val)
+              : Math.round(obj.val).toLocaleString();
+          }
+        },
+      });
+    },
+    { dependencies: [targetValue] },
+  );
+}

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

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

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

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