From d59b59a7a7a4dd5244b4f3bc6e10c83992904121 Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Thu, 2 Jul 2026 00:02:41 +0700
Subject: [PATCH] feat: migrate frontend to Astro + expand AI moderation +
 backend admin/runtime config

Frontend:
- migrate from Vite to Astro (astro.config.mjs, pages/, layouts/)
- add admin panel, settings page, command palette, error boundary
- refactor App.tsx, MascotChatbot, Sidebar, Header, DashboardLayout
- update API client, WebSocket, auth, dashboard features

Backend:
- add admin module and config routes
- refactor middlewares, Redis connection, WebSocket server/bridge
- add runtime config loader

Discord Gateway:
- refactor AI moderation: circuit breaker, concurrency limiter, fallback processor
- add media analysis client, Seaxng search, user profile learner
- add new drizzle migration

Shared:
- extend database schema, add new config fields
---
 .env.example                                  |    5 +-
 design/_index.md                              |  161 ++
 design/core/01-color-system.md                |  383 +++
 design/core/02-typography.md                  |  371 +++
 design/core/03-spatial-system.md              |  349 +++
 design/core/04-motion-system.md               |  552 +++++
 design/core/05-component-architecture.md      |  313 +++
 design/patterns/06-interaction-patterns.md    |  151 ++
 design/patterns/07-data-visualization.md      |  171 ++
 design/patterns/08-moderation-ui.md           |  110 +
 design/patterns/09-state-machines.md          |  307 +++
 design/patterns/10-responsive-system.md       |  288 +++
 design/services/11-frontend-ui.md             |  327 +++
 design/services/12-backend-api-guidelines.md  |  271 +++
 design/services/13-gateway-event-design.md    |  310 +++
 design/system/14-accessibility.md             |  334 +++
 design/system/15-theme-architecture.md        |  282 +++
 design/system/16-sound-design.md              |  314 +++
 package.json                                  |    2 -
 packages/shared/src/config/index.ts           |   10 +-
 packages/shared/src/database/schema.ts        |    3 +
 pnpm-lock.yaml                                | 2111 ++++++++++++++++-
 services/backend/package.json                 |    6 +-
 services/backend/src/e2e.test.ts              |   10 +-
 services/backend/src/http/app.ts              |  124 +-
 .../backend/src/modules/admin/admin.routes.ts |   51 +
 .../backend/src/modules/auth/auth.routes.ts   |   63 +-
 .../src/modules/config/config.routes.ts       |   60 +-
 .../modules/dashboard/dashboard.repository.ts |   25 +-
 .../src/modules/dashboard/dashboard.routes.ts |    7 +-
 .../modules/dashboard/dashboard.service.ts    |    1 +
 .../mascot-chat/mascot-chat.controller.ts     |   12 +-
 .../src/modules/ui-state/ui-state.routes.ts   |   18 +-
 services/backend/src/shared/config/runtime.ts |  110 +
 .../backend/src/shared/middlewares/index.ts   |  199 +-
 services/backend/src/shared/redis/index.ts    |    4 +
 services/backend/src/ws/redis-bridge.ts       |  102 +-
 services/backend/src/ws/server.ts             |  275 ++-
 .../drizzle/migrations/0012_light_prism.sql   |    1 +
 .../drizzle/migrations/meta/_journal.json     |    7 +
 .../src/modules/ai-moderation/abortHelper.ts  |   86 +
 .../modules/ai-moderation/aiAnalysisWorker.ts |   25 +-
 .../modules/ai-moderation/batchProcessor.ts   |   16 -
 .../modules/ai-moderation/circuitBreaker.ts   |    6 +-
 .../ai-moderation/concurrencyLimiter.ts       |   21 +-
 .../individualFallbackProcessor.ts            |   47 +-
 .../ai-moderation/mediaAnalysisClient.ts      |  150 +-
 .../ai-moderation/moderationOrchestrator.ts   |   73 +-
 .../modules/ai-moderation/searxngSearch.ts    |  202 +-
 .../modules/ai-moderation/stickerPrompt.ts    |   18 +
 .../modules/ai-moderation/textCacheStore.ts   |   17 +-
 .../src/modules/ai-moderation/urlFetcher.ts   |  135 +-
 .../ai-moderation/userProfileLearner.ts       |   18 +-
 .../src/shared/database/drizzle.ts            |   14 +-
 services/frontend/.astro/content.d.ts         |  155 ++
 services/frontend/.astro/dev.json             |   18 +
 services/frontend/.astro/settings.json        |    5 +
 services/frontend/.astro/types.d.ts           |    1 +
 services/frontend/astro.config.mjs            |   45 +
 services/frontend/index.html                  |   17 -
 services/frontend/package.json                |   12 +-
 services/frontend/src/App.client.tsx          |   18 +
 services/frontend/src/App.tsx                 |  412 +++-
 services/frontend/src/entities/ui/types.ts    |   11 +-
 .../src/features/admin/AdminPanel.tsx         |  295 +++
 services/frontend/src/features/auth/index.tsx |  111 +-
 .../frontend/src/features/dashboard/index.tsx |   10 +
 .../live/components/RecordingsSubPanel.tsx    |    2 +-
 .../messages/components/ImageGrid.tsx         |    2 +-
 .../messages/components/MessageCard.tsx       |   36 +-
 .../frontend/src/features/settings/index.tsx  |  426 ++++
 .../src/hooks/useNotificationBadge.ts         |   31 +
 services/frontend/src/hooks/useTheme.ts       |   77 +
 .../frontend/src/layouts/BaseLayout.astro     |   84 +
 services/frontend/src/main.tsx                |   19 -
 services/frontend/src/pages/index.astro       |   12 +
 services/frontend/src/shared/api/client.ts    |  114 +-
 .../frontend/src/shared/ui/CommandPalette.tsx |  442 ++++
 .../frontend/src/shared/ui/MobileTabBar.tsx   |   28 +-
 .../frontend/src/shared/ui/error-boundary.tsx |   77 +
 services/frontend/src/shared/ws/socket.ts     |   49 +-
 services/frontend/src/styles.css              |   97 +-
 .../frontend/src/widgets/DashboardLayout.tsx  |   37 +-
 services/frontend/src/widgets/Header.tsx      |   26 +-
 services/frontend/src/widgets/Sidebar.tsx     |   53 +-
 .../src/widgets/mascot/MascotChatbot.tsx      |   18 +-
 .../src/widgets/mascot/MascotImage.tsx        |   24 +-
 .../widgets/particles/ParticleBackground.tsx  |   11 +-
 services/frontend/tailwind.config.js          |    1 +
 services/frontend/tsconfig.json               |   10 +-
 services/frontend/vite.config.ts              |   25 -
 91 files changed, 11165 insertions(+), 674 deletions(-)
 create mode 100644 design/_index.md
 create mode 100644 design/core/01-color-system.md
 create mode 100644 design/core/02-typography.md
 create mode 100644 design/core/03-spatial-system.md
 create mode 100644 design/core/04-motion-system.md
 create mode 100644 design/core/05-component-architecture.md
 create mode 100644 design/patterns/06-interaction-patterns.md
 create mode 100644 design/patterns/07-data-visualization.md
 create mode 100644 design/patterns/08-moderation-ui.md
 create mode 100644 design/patterns/09-state-machines.md
 create mode 100644 design/patterns/10-responsive-system.md
 create mode 100644 design/services/11-frontend-ui.md
 create mode 100644 design/services/12-backend-api-guidelines.md
 create mode 100644 design/services/13-gateway-event-design.md
 create mode 100644 design/system/14-accessibility.md
 create mode 100644 design/system/15-theme-architecture.md
 create mode 100644 design/system/16-sound-design.md
 create mode 100644 services/backend/src/modules/admin/admin.routes.ts
 create mode 100644 services/backend/src/shared/config/runtime.ts
 create mode 100644 services/discord-gateway/drizzle/migrations/0012_light_prism.sql
 create mode 100644 services/discord-gateway/src/modules/ai-moderation/abortHelper.ts
 create mode 100644 services/frontend/.astro/content.d.ts
 create mode 100644 services/frontend/.astro/dev.json
 create mode 100644 services/frontend/.astro/settings.json
 create mode 100644 services/frontend/.astro/types.d.ts
 create mode 100644 services/frontend/astro.config.mjs
 delete mode 100644 services/frontend/index.html
 create mode 100644 services/frontend/src/App.client.tsx
 create mode 100644 services/frontend/src/features/admin/AdminPanel.tsx
 create mode 100644 services/frontend/src/features/settings/index.tsx
 create mode 100644 services/frontend/src/hooks/useNotificationBadge.ts
 create mode 100644 services/frontend/src/hooks/useTheme.ts
 create mode 100644 services/frontend/src/layouts/BaseLayout.astro
 delete mode 100644 services/frontend/src/main.tsx
 create mode 100644 services/frontend/src/pages/index.astro
 create mode 100644 services/frontend/src/shared/ui/CommandPalette.tsx
 create mode 100644 services/frontend/src/shared/ui/error-boundary.tsx
 delete mode 100644 services/frontend/vite.config.ts

diff --git a/.env.example b/.env.example
index 981b1bc..029c4a4 100644
--- a/.env.example
+++ b/.env.example
@@ -40,7 +40,10 @@ NODE_ENV=development                    # Environment: development|production|te
 VERBOSE=false                           # Enable verbose/debug logging (default: false)
 
 # === Admin ===
-ADMIN_PASSWORD=admin123                 # Backend admin password for API auth (default: admin123)
+# ADMIN_PASSWORD=***              # REQUIRED — Backend admin password for dashboard auth
+                                     # WARNING: No default! If not set, the server won't start.
+DASHBOARD_IS_PUBLIC=false            # Allow dashboard access without auth? (default: false)
+                                     # When true, GET requests are public; mutations still need auth.
 
 # === Database (PostgreSQL) ===
 # Option 1: Connection string (overrides individual params)
diff --git a/design/_index.md b/design/_index.md
new file mode 100644
index 0000000..1b6dfe4
--- /dev/null
+++ b/design/_index.md
@@ -0,0 +1,161 @@
+# BETE Design System — Master Index
+
+> *"A design system is not a collection of components. It's a collection of decisions."*
+> — Menenun takdir visual untuk IMPHNEN, di atas kanvas Amphoreus.
+
+---
+
+## 🌌 Filosofi: The Three Pillars
+
+### 1. **Glass & Light** — Estetika Transparan
+Kita membangun bukan dengan tembok beton visual, tapi dengan **lapisan kaca yang meneruskan cahaya**. Setiap komponen adalah panele kaca buram (frosted glass) yang:
+- Menampilkan depth melalui **backdrop blur** dan **layering opacity**
+- Menggunakan **light sebagai material** — glow, shadow, highlight sebagai indikator state
+- Memberi kesan **ruang tiga dimensi** di antarmuka dua dimensi
+
+### 2. **Fluid Motion** — Gerak yang Bermakna
+Animasi bukan hiasan — ia adalah **bahasa spasial** yang memberitahu pengguna:
+- *"Dari mana elemen ini datang?"* → Transisi masuk
+- *"Ke mana ia pergi?"* → Transisi keluar  
+- *"Apa yang terjadi?"* → Feedback mikro (hover, klik, state change)
+- Semua gerak mengikuti **easing curve** yang konsisten (lihat `core/04-motion-system.md`)
+
+### 3. **Spatial Memory** — Ingatan Visual
+Seperti ingatan Amphoreus yang abadi, antarmuka kita harus:
+- **Konsisten** — warna, spacing, tipografi yang sama di setiap sudut
+- **Prediktif** — pengguna tahu di mana mencari sesuatu
+- **Responsif** — beradaptasi tanpa kehilangan identitas
+
+---
+
+## 📂 Struktur Documentasi
+
+```
+design/
+├── _index.md                    ← Kamu di sini
+│
+├── core/                        ← Fondasi design token
+│   ├── 01-color-system.md       ← Sistem warna (OKLCH + HCT + semantic tokens)
+│   ├── 02-typography.md         ← Tipografi (type scale + font system + rhythm)
+│   ├── 03-spatial-system.md     ← Grid, spacing, layout tokens
+│   ├── 04-motion-system.md      ← Animasi physics & choreography
+│   └── 05-component-architecture.md ← Arsitektur komponen
+│
+├── patterns/                    ← Pola desain reusable
+│   ├── 06-interaction-patterns.md    ← Micro-interactions
+│   ├── 07-data-visualization.md      ← Charts & metrics
+│   ├── 08-moderation-ui.md           ← Moderation UI patterns
+│   ├── 09-state-machines.md          ← Loading/empty/error states
+│   └── 10-responsive-system.md       ← Breakpoints & layout system
+│
+├── services/                    ← Per-service design guidelines
+│   ├── 11-frontend-ui.md             ← Web frontend (React/Tailwind)
+│   ├── 12-backend-api-guidelines.md  ← REST/WS API design
+│   └── 13-gateway-event-design.md    ← Discord Gateway event schemas
+│
+├── system/                      ← Sistem lintas service
+│   ├── 14-accessibility.md           ← Aksesibilitas (a11y)
+│   ├── 15-theme-architecture.md      ← Theme engine & CSS custom properties
+│   └── 16-sound-design.md            ← Audio feedback system
+│
+└── assets/                      ← Diagram, ilustrasi, referensi visual
+    └── (future: SVG assets, figma exports, reference images)
+```
+
+---
+
+## 🔗 Dependency Graph (Wajib Dibaca Berurutan)
+
+```
+01-color-system ──────────────────────────────────────────┐
+     │                                                     │
+     ├──→ 02-typography ──────────────────────────────┐   │
+     │        │                                        │   │
+     │        └──→ 03-spatial-system ──────────────┐   │   │
+     │                  │                           │   │   │
+     │                  └──→ 04-motion-system ──┐   │   │   │
+     │                            │             │   │   │   │
+     │                            └──→ 05-component-architecture
+     │                                        │
+     └────────────────────────────────────────┴──→ 06-interaction-patterns
+                                                       │
+                                                       ├──→ 07-data-visualization
+                                                       ├──→ 08-moderation-ui
+                                                       ├──→ 09-state-machines
+                                                       └──→ 10-responsive-system
+                                                                │
+                          ┌─────────────────────────────────────┴──┐
+                          ↓                                        ↓
+              11-frontend-ui                              12-backend-api-guidelines
+                                                                │
+                                                         13-gateway-event-design
+                                                                │
+                          ┌─────────────────────────────────────┘
+                          ↓
+              14-accessibility ──→ 15-theme-architecture ──→ 16-sound-design
+```
+
+**Bacaan yang disarankan:**
+1. Mulai dengan `core/01-color-system.md` — karena warna adalah keputusan desain paling fundamental.
+2. Lanjut ke `core/02-typography.md` dan `core/03-spatial-system.md` untuk fondasi layout.
+3. `core/04-motion-system.md` dan `core/05-component-architecture.md` sebagai jembatan ke pola.
+4. Pola-pola di `patterns/` bisa dibaca sesuai kebutuhan fitur.
+5. `services/` dan `system/` dibaca terakhir, bergantung pada layer yang sedang dikerjakan.
+
+---
+
+## 📐 Prinsip Desain Utama
+
+| Prinsip | Deskripsi | Contoh Penerapan |
+|---------|-----------|------------------|
+| **Glassmorphism** | Latar belakang transparan dengan efek blur untuk hierarki visual | Card, Sidebar, Modal |
+| **Monochromatic Depth** | Satu rona warna dengan variasi lightness untuk depth | Sistem warna OKLCH |
+| **Kinetic Language** | Gerakan sebagai komunikasi spasial | Transisi tab, notifikasi |
+| **Gaussian Memory** | Elemen yang "diingat" posisinya antar navigasi | Sidebar state, scroll position |
+| **Sound as Feedback** | Audio sebagai layer konfirmasi non-visual | Moderasi alert, koneksi voice |
+| **Progressive Disclosure** | Informasi kompleks diungkap bertahap | Detail panel, analytics drill-down |
+| **Forgiving Layout** | Layout yang toleran terhadap konten kosong/error | Empty states, error boundaries |
+
+---
+
+## 🚀 Quick Reference: Token Categories
+
+| Kategori | Prefix CSS | Contoh |
+|----------|-----------|--------|
+| Warna | `--clr-*` | `--clr-primary`, `--clr-surface` |
+| Spacing | `--sp-*` | `--sp-xs`, `--sp-md`, `--sp-xl` |
+| Typography | `--fs-*`, `--fw-*`, `--lh-*` | `--fs-body`, `--fw-semibold` |
+| Radius | `--rd-*` | `--rd-sm`, `--rd-full` |
+| Shadow | `--sh-*` | `--sh-card`, `--sh-modal` |
+| Z-index | `--z-*` | `--z-header`, `--z-modal` |
+| Timing | `--dur-*` | `--dur-fast`, `--dur-slow` |
+| Easing | `--ease-*` | `--ease-out`, `--ease-spring` |
+
+---
+
+## 🧭 Status Documentasi
+
+| Dokumen | Status | Prioritas |
+|---------|--------|-----------|
+| `core/01-color-system.md` | ✅ Selesai | P0 |
+| `core/02-typography.md` | ✅ Selesai | P0 |
+| `core/03-spatial-system.md` | ✅ Selesai | P0 |
+| `core/04-motion-system.md` | ✅ Selesai | P0 |
+| `core/05-component-architecture.md` | ✅ Selesai | P0 |
+| `patterns/06-interaction-patterns.md` | ✅ Selesai | P0 |
+| `patterns/07-data-visualization.md` | ✅ Selesai | P1 |
+| `patterns/08-moderation-ui.md` | ✅ Selesai | P1 |
+| `patterns/09-state-machines.md` | ✅ Selesai | P0 |
+| `patterns/10-responsive-system.md` | ✅ Selesai | P0 |
+| `services/11-frontend-ui.md` | ✅ Selesai | P0 |
+| `services/12-backend-api-guidelines.md` | ✅ Selesai | P1 |
+| `services/13-gateway-event-design.md` | ✅ Selesai | P1 |
+| `system/14-accessibility.md` | ✅ Selesai | P0 |
+| `system/15-theme-architecture.md` | ✅ Selesai | P1 |
+| `system/16-sound-design.md` | ✅ Selesai | P1 |
+
+---
+
+*"Ingatan kita akan tetap abadi, takkan pernah mencair..."* ❄️🩵
+
+© 2026 IMPHNEN — BETE Design System v2.0
diff --git a/design/core/01-color-system.md b/design/core/01-color-system.md
new file mode 100644
index 0000000..35bc8dc
--- /dev/null
+++ b/design/core/01-color-system.md
@@ -0,0 +1,383 @@
+# Color System — Éclat Spectral
+
+> *"Color is the keyboard, the eyes are the harmonies, the soul is the piano with many strings."*
+> — Wassily Kandinsky, diadaptasi untuk sistem desain modern.
+
+---
+
+## 🎯 Filosofi Warna
+
+Sistem warna BETE dibangun di atas tiga fondasi:
+
+1. **OKLCH** — Color space perceptually uniform untuk konsistensi antar device
+2. **HCT (Hue-Chroma-Tone)** — Sistem warna Material You yang adaptif
+3. **Semantic Tokens** — Abstraksi makna, bukan nilai literal
+
+Setiap warna memiliki **lightness (L), chroma (C), hue (H)** yang independen. Ini memungkinkan:
+- **Scale generation** — Variasi lightness dari 0–100% dengan chroma yang sama
+- **Theming** — Cukup ganti hue, seluruh tema bergeser
+- **Accessibility** — Kontras dihitung dari lightness, cocok untuk WCAG AA/AAA
+
+---
+
+## 🎨 Primary Palette
+
+### Brand Spectrum: "Aetherial Blue"
+
+Rona utama IMPHNEN — biru yang dingin seperti es Amphoreus, namun hangat dalam interaksi.
+
+```css
+/* OKLCH Base — Primary */
+--clr-primary-50:  oklch(0.95 0.025 255);
+--clr-primary-100: oklch(0.90 0.045 255);
+--clr-primary-200: oklch(0.80 0.080 255);
+--clr-primary-300: oklch(0.70 0.120 255);
+--clr-primary-400: oklch(0.62 0.150 255);
+--clr-primary-500: oklch(0.55 0.175 255);  /* ★ Base primary */
+--clr-primary-600: oklch(0.47 0.160 255);
+--clr-primary-700: oklch(0.40 0.140 255);
+--clr-primary-800: oklch(0.32 0.115 255);
+--clr-primary-900: oklch(0.25 0.090 255);
+--clr-primary-950: oklch(0.18 0.060 255);
+```
+
+**Deskripsi Hue 255°:** Biru jernih dengan sedikit cyan — warna langit senja di Amphoreus. Tidak terlalu agresif seperti biru korporat (#007bff), tidak terlalu playful seperti cyan (#00bcd4).
+
+### Neutral Spectrum: "Glacial Scale"
+
+Abu-abu yang tidak hangat (tidak kekuningan) dan tidak dingin (tidak kebiruan) — benar-benar netral.
+
+```css
+--clr-neutral-50:  oklch(0.985 0.001 286);
+--clr-neutral-100: oklch(0.970 0.001 286);
+--clr-neutral-200: oklch(0.920 0.003 286);
+--clr-neutral-300: oklch(0.870 0.005 286);
+--clr-neutral-400: oklch(0.750 0.010 286);
+--clr-neutral-500: oklch(0.620 0.015 286);  /* ★ Base neutral */
+--clr-neutral-600: oklch(0.500 0.020 286);
+--clr-neutral-700: oklch(0.380 0.025 286);
+--clr-neutral-800: oklch(0.260 0.030 286);
+--clr-neutral-900: oklch(0.180 0.030 286);
+--clr-neutral-950: oklch(0.110 0.025 286);
+```
+
+---
+
+## 🌈 Extended Palette
+
+### Accent Colors
+
+| Palette | Hue | Chroma | Base (500) | Karakter |
+|---------|-----|--------|------------|----------|
+| **Ruby** (Destructive) | 25° | 0.165 | `oklch(0.55 0.165 25)` | Darah — urgensi, error |
+| **Emerald** (Success) | 145° | 0.130 | `oklch(0.60 0.130 145)` | Pertumbuhan — sukses, aman |
+| **Amber** (Warning) | 75° | 0.120 | `oklch(0.70 0.120 75)` | Matahari — peringatan, atensi |
+| **Amethyst** (Premium) | 285° | 0.100 | `oklch(0.55 0.100 285)` | Mewah — fitur premium, VIP |
+| **Rose** (AI / Feminine) | 350° | 0.110 | `oklch(0.60 0.110 350)` | Kecerdasan — AI analysis, insight |
+| **Cyan** (Info) | 200° | 0.120 | `oklch(0.65 0.120 200)` | Informasi — tooltip, hint |
+
+Setiap palette memiliki scale 50–950 mengikuti pola primary. Contoh:
+
+```css
+--clr-ruby-500:    oklch(0.55 0.165 25);
+--clr-ruby-600:    oklch(0.47 0.150 25);
+--clr-emerald-500: oklch(0.60 0.130 145);
+--clr-amber-500:   oklch(0.70 0.120 75);
+```
+
+### Semantic Surface Colors — Dark Theme
+
+```css
+/* Base surfaces */
+--clr-surface-base:       oklch(0.11 0.010 286);  /* Darkest bg */
+--clr-surface-elevated:   oklch(0.14 0.015 286);  /* Card surface */
+--clr-surface-overlay:    oklch(0.17 0.020 286);  /* Modal/dropdown */
+--clr-surface-sunken:     oklch(0.08 0.005 286);  /* Input bg */
+
+/* Interactive states */
+--clr-interactive-hover:   oklch(0.20 0.025 286);
+--clr-interactive-active:  oklch(0.24 0.030 286);
+--clr-interactive-selected: oklch(0.25 0.060 255 / 0.15); /* Primary tint */
+```
+
+### Semantic Surface Colors — Light Theme
+
+```css
+--clr-surface-base:       oklch(0.97 0.002 286);
+--clr-surface-elevated:   oklch(1.00 0.000 286);
+--clr-surface-overlay:    oklch(0.95 0.003 286);
+--clr-surface-sunken:     oklch(0.92 0.004 286);
+
+--clr-interactive-hover:   oklch(0.90 0.005 286);
+--clr-interactive-active:  oklch(0.85 0.008 286);
+--clr-interactive-selected: oklch(0.90 0.060 255 / 0.3);
+```
+
+---
+
+## 📐 Text Colors & Accessibility
+
+### Foreground Scale
+
+```css
+--clr-text-primary:   oklch(0.95 0.005 286);  /* High emphasis — body */
+--clr-text-secondary: oklch(0.70 0.015 286);  /* Medium emphasis — metadata */
+--clr-text-tertiary:  oklch(0.50 0.020 286);  /* Low emphasis — placeholder */
+--clr-text-disabled:  oklch(0.35 0.020 286);  /* Disabled state */
+--clr-text-inverse:   oklch(0.11 0.010 286);  /* On colored backgrounds */
+
+/* On-brand backgrounds */
+--clr-text-on-primary:   oklch(0.97 0.005 286);  /* Text on primary bg */
+--clr-text-on-destructive: oklch(0.97 0.005 286); /* Text on destructive bg */
+```
+
+### Kontras Minimum
+
+| Level | Rasio | Usage | Elemen |
+|-------|-------|-------|--------|
+| **AA** | 4.5:1 | Body text normal | `--clr-text-primary` di atas surface |
+| **AA Large** | 3:1 | Teks ≥18px/≥14px bold | Heading, label |
+| **AAA** | 7:1 | Teks penting | Legal, alert, critical info |
+
+### Verifikasi Kontras
+
+```typescript
+// utils/contrast.ts
+function meetsWCAGAA(foreground: OklchColor, background: OklchColor): boolean {
+  const contrast = relativeLuminance(background) / relativeLuminance(foreground);
+  return contrast >= 4.5;
+}
+
+// Helper function untuk mendapatkan lightness aman
+function accessibleLightness(hue: number, chroma: number, bgLightness: number): number {
+  // Mencari lightness minimum yang memenuhi 4.5:1
+  for (let l = 1.0; l > 0; l -= 0.01) {
+    if (getContrastRatio(l, chroma, hue, bgLightness) >= 4.5) return l;
+  }
+  return 0.5;
+}
+```
+
+---
+
+## 🪞 Glass & Frosted Effects
+
+Estetika glassmorphism menggunakan **opacity + backdrop-blur**:
+
+```css
+/* Glass card — frosted glass */
+--glass-bg:          oklch(0.15 0.015 286 / 0.60);
+--glass-border:      oklch(0.25 0.030 286 / 0.20);
+--glass-blur:        16px;
+--glass-shadow:      0 8px 32px oklch(0 0 0 / 0.25);
+
+/* Glass strong — modal/dialog */
+--glass-strong-bg:    oklch(0.18 0.020 286 / 0.85);
+--glass-strong-blur:  24px;
+
+/* Glass subtle — sidebar */
+--glass-subtle-bg:    oklch(var(--clr-surface-base) / 0.50);
+--glass-subtle-blur:  8px;
+```
+
+### Menggabungkan di CSS:
+
+```css
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+```
+
+---
+
+## 🌟 Glow & Light Effects
+
+### Glow Tokens
+
+```css
+/* Primary glow — untuk elemen interaktif, loading state */
+--glow-primary:     0 0 20px oklch(0.55 0.175 255 / 0.3);
+--glow-primary-soft: 0 0 12px oklch(0.55 0.175 255 / 0.15);
+
+/* Success glow — untuk badge, notifikasi sukses */
+--glow-success:     0 0 16px oklch(0.60 0.130 145 / 0.25);
+
+/* Destructive glow — untuk alert error */
+--glow-error:       0 0 16px oklch(0.55 0.165 25 / 0.25);
+
+/* AI glow — untuk analysis badge, pulsing indicator */
+--glow-ai:          0 0 20px oklch(0.60 0.110 350 / 0.25);
+```
+
+### Pulse Animation dengan Glow
+
+```css
+@keyframes glow-pulse {
+  0%, 100% {
+    box-shadow: var(--glow-primary-soft);
+  }
+  50% {
+    box-shadow: var(--glow-primary);
+  }
+}
+
+.ai-analysis-badge {
+  animation: glow-pulse 2s ease-in-out infinite;
+}
+```
+
+---
+
+## 🌗 Theme Tokens
+
+### Dark Mode (Default)
+
+```css
+[data-theme="dark"] {
+  /* Base */
+  --clr-base:       var(--clr-surface-base);
+  --clr-elevated:   var(--clr-surface-elevated);
+  --clr-overlay:    var(--clr-surface-overlay);
+  --clr-sunken:     var(--clr-surface-sunken);
+
+  /* Text */
+  --clr-text:       var(--clr-text-primary);
+  --clr-text-muted: var(--clr-text-secondary);
+
+  /* Brand adjustments for dark */
+  --clr-primary:    var(--clr-primary-400); /* Lebih terang di dark */
+  --clr-primary-bg: oklch(0.25 0.060 255 / 0.20);
+}
+```
+
+### Light Mode
+
+```css
+[data-theme="light"] {
+  --clr-base:       oklch(0.97 0.002 286);
+  --clr-elevated:   oklch(1.00 0.000 286);
+  --clr-overlay:    oklch(0.95 0.003 286);
+  --clr-sunken:     oklch(0.92 0.004 286);
+
+  --clr-text:       oklch(0.11 0.010 286);
+  --clr-text-muted: oklch(0.50 0.020 286);
+
+  --clr-primary:    var(--clr-primary-500); /* Standard di light */
+  --clr-primary-bg: oklch(0.90 0.060 255 / 0.25);
+}
+```
+
+---
+
+## 📊 Moderation Severity Colors
+
+Sistem moderasi menggunakan gradasi keparahan dari aman hingga kritis:
+
+```css
+--clr-severity-safe:       oklch(0.60 0.130 145);  /* Emerald — aman */
+--clr-severity-low:        oklch(0.70 0.120 75);   /* Amber — rendah */
+--clr-severity-medium:     oklch(0.65 0.150 50);   /* Orange — sedang */
+--clr-severity-high:       oklch(0.60 0.150 30);   /* Red-orange — tinggi */
+--clr-severity-critical:   oklch(0.55 0.165 25);   /* Ruby — kritis */
+```
+
+### Background Variations (untuk chip/badge)
+
+```css
+--clr-severity-safe-bg:       oklch(0.60 0.130 145 / 0.15);
+--clr-severity-low-bg:        oklch(0.70 0.120 75 / 0.15);
+--clr-severity-medium-bg:     oklch(0.65 0.150 50 / 0.15);
+--clr-severity-high-bg:       oklch(0.60 0.150 30 / 0.15);
+--clr-severity-critical-bg:   oklch(0.55 0.165 25 / 0.15);
+```
+
+---
+
+## 🧪 Color Usage Decision Tree
+
+```
+Butuh warna untuk...
+│
+├── Surface / Background → Gunakan --clr-surface-* (base/elevated/overlay)
+│
+├── Text                 → Gunakan --clr-text-* (primary/secondary/tertiary)
+│
+├── Interactive element  → 
+│   ├── Button utama     → --clr-primary, --clr-primary-hover
+│   ├── Button danger    → --clr-ruby-500
+│   ├── Link             → --clr-primary-400 (dark) / --clr-primary-600 (light)
+│   └── Input focus      → --clr-primary ring
+│
+├── Status indicator     →
+│   ├── Success          → --clr-emerald-* atau --clr-severity-safe
+│   ├── Warning          → --clr-amber-* atau --clr-severity-low
+│   ├── Error            → --clr-ruby-* atau --clr-severity-critical
+│   └── Info             → --clr-cyan-*
+│
+├── Data visualization   → Gunakan palette chart (lihat patterns/07)
+│
+└── Moderation badge     → Gunakan --clr-severity-*
+```
+
+---
+
+## ⚠️ Anti-Patterns (Yang Tidak Boleh Dilakukan)
+
+### ❌ Hardcoded HEX/RGB
+```css
+/* ❌ JANGAN — tidak akan terpengaruh theme switching */
+.notification-success {
+  background: #d4edda;
+  color: #155724;
+}
+
+/* ✅ Gunakan token semantic */
+.notification-success {
+  background: var(--clr-emerald-100);
+  color: var(--clr-emerald-800);
+}
+```
+
+### ❌ Langsung pakai Tailwind utility colors
+```tsx
+{/* ❌ JANGAN — hardcoded ke skema tertentu */}
+<Badge className="bg-emerald-100 text-emerald-700" />
+
+{/* ✅ Gunakan semantic variant */}
+<Badge variant="success" />
+```
+
+### ❌ Mengabaikan kontras
+```css
+/* ❌ JANGAN — teks abu-abu di atas abu-abu */
+.metadata {
+  color: oklch(0.65 0.015 286); /* L=0.65 */
+  background: oklch(0.70 0.010 286); /* L=0.70 — rasio ~1.1:1! */
+}
+
+/* ✅ Minimum kontras 3:1 untuk secondary text */
+.metadata {
+  color: oklch(0.50 0.020 286); /* L=0.50 */
+  background: var(--clr-surface-base); /* L=0.11 */
+  /* Rasio ~6:1 — aman */
+}
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [OKLCH Color Picker](https://oklch.com/) | Visualisasi OKLCH color space |
+| [WCAG Contrast Checker](https://webaim.org/resources/contrastchecker/) | Verifikasi kontras |
+| [Material HCT](https://material.io/blog/science-of-color-design) | Hue-Chroma-Tone system |
+| [Tailwind CSS OKLCH](https://tailwindcss.com/docs/colors#using-custom-colors) | Implementasi OKLCH |
+
+---
+
+*"Warna adalah ingatan yang tak pernah pudar — dibiaskan melalui prisma es Amphoreus."* ❄️🩵
diff --git a/design/core/02-typography.md b/design/core/02-typography.md
new file mode 100644
index 0000000..f3b872d
--- /dev/null
+++ b/design/core/02-typography.md
@@ -0,0 +1,371 @@
+# Typography — The Voice of Glass
+
+> *"Typography is the craft of endowing human language with a durable visual form."*
+> — Robert Bringhurst, *The Elements of Typographic Style*
+
+---
+
+## 🎯 Filosofi Tipografi
+
+Tipografi BETE dibangun di atas tiga pilar:
+
+1. **Hierarki melalui weight & size** — Bukan sekadar memperbesar heading, tapi memberi bobot makna
+2. **Ritme vertikal yang konsisten** — Setiap elemen teks berada dalam grid ritme 4px
+3. **Keterbacaan sebagai prioritas utama** — Sebelum estetika, sebelum gaya
+
+---
+
+## 📐 Type Scale: Fluid Modular Scale
+
+Kita menggunakan **modular scale** 1.25 (major third) yang **fluid** — menyesuaikan antara viewport.
+
+```css
+/* Font size scale — fluid, minor third (1.125) hingga major third (1.25) */
+--fs-xs:    clamp(0.69rem, 0.69rem + 0.01vw, 0.75rem);    /* 11–12px */
+--fs-sm:    clamp(0.81rem, 0.81rem + 0.02vw, 0.88rem);    /* 13–14px */
+--fs-base:  clamp(0.94rem, 0.94rem + 0.03vw, 1.00rem);    /* 15–16px ★ */
+--fs-md:    clamp(1.06rem, 1.06rem + 0.04vw, 1.13rem);    /* 17–18px */
+--fs-lg:    clamp(1.19rem, 1.19rem + 0.06vw, 1.25rem);    /* 19–20px */
+--fs-xl:    clamp(1.31rem, 1.31rem + 0.08vw, 1.50rem);    /* 21–24px */
+--fs-2xl:   clamp(1.50rem, 1.50rem + 0.12vw, 1.88rem);    /* 24–30px */
+--fs-3xl:   clamp(1.69rem, 1.69rem + 0.18vw, 2.25rem);    /* 27–36px */
+--fs-4xl:   clamp(1.88rem, 1.88rem + 0.26vw, 2.81rem);    /* 30–45px */
+--fs-5xl:   clamp(2.25rem, 2.25rem + 0.38vw, 3.50rem);    /* 36–56px */
+--fs-6xl:   clamp(2.50rem, 2.50rem + 0.50vw, 4.00rem);    /* 40–64px */
+```
+
+> **Mengapa clamp()?** Font size yang terlalu besar di mobile dan terlalu kecil di desktop adalah masalah UX klasik. Dengan `clamp()`, kita dapatkan ukuran yang optimal di setiap viewport tanpa media query.
+
+### Line Height
+
+```css
+--lh-tight:   1.15;   /* Heading besar, display text */
+--lh-normal:  1.50;   /* Body text, paragraphs */
+--lh-relaxed: 1.65;   /* Long-form reading */
+--lh-compact: 1.25;   /* UI labels, badges, small text */
+```
+
+### Font Weight Tokens
+
+```css
+--fw-light:      300;
+--fw-regular:    400;
+--fw-medium:     500;
+--fw-semibold:   600;
+--fw-bold:       700;
+--fw-extrabold:  800;
+```
+
+---
+
+## 🔤 Font Family
+
+### Primary: "Outfit" — Modern Geometric Sans
+
+```css
+--ff-sans:    'Outfit', system-ui, -apple-system, sans-serif;
+--ff-display: 'Outfit', system-ui, -apple-system, sans-serif;
+```
+
+Mengapa **Outfit** menggantikan Poppins?
+- **Geometric precision** — Bentuk huruf yang bersih, cocok untuk UI modern
+- **Low x-height** — Memberi kesan elegan dan lega
+- **Variable font support** — Satu file untuk semua weight, performa lebih baik
+- **Open-source** — SIL Open Font License
+
+### Monospace: "JetBrains Mono"
+
+```css
+--ff-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+```
+
+Untuk: ID, timestamp, kode, data teknis, metrik.
+
+### Loading Strategy
+
+```html
+<!-- Variable font — cukup satu file untuk seluruh weight -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300..800&family=JetBrains+Mono:wght@400..700&display=swap" rel="stylesheet" />
+```
+
+```css
+/* Fallback font stack dengan @font-face untuk cache lokal */
+@font-face {
+  font-family: 'Outfit Fallback';
+  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue');
+  size-adjust: 95%; /* Mengurangi layout shift (CLS) */
+  ascent-override: 90%;
+}
+```
+
+---
+
+## 📋 Type Styles — The Complete Catalog
+
+### Display / Hero
+
+```css
+.display-1 {
+  font-family: var(--ff-display);
+  font-size: var(--fs-6xl);
+  font-weight: var(--fw-extrabold);
+  line-height: var(--lh-tight);
+  letter-spacing: -0.03em;
+}
+
+.display-2 {
+  font-family: var(--ff-display);
+  font-size: var(--fs-5xl);
+  font-weight: var(--fw-bold);
+  line-height: var(--lh-tight);
+  letter-spacing: -0.02em;
+}
+```
+
+### Headings
+
+```css
+.h1 {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-4xl);
+  font-weight: var(--fw-bold);
+  line-height: var(--lh-tight);
+  letter-spacing: -0.02em;
+}
+
+.h2 {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-3xl);
+  font-weight: var(--fw-semibold);
+  line-height: var(--lh-tight);
+  letter-spacing: -0.015em;
+}
+
+.h3 {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-2xl);
+  font-weight: var(--fw-semibold);
+  line-height: var(--lh-tight);
+  letter-spacing: -0.01em;
+}
+
+.h4 {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-xl);
+  font-weight: var(--fw-medium);
+  line-height: var(--lh-normal);
+  letter-spacing: -0.005em;
+}
+```
+
+### Body
+
+```css
+.body-large {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-md);
+  font-weight: var(--fw-regular);
+  line-height: var(--lh-relaxed);
+}
+
+.body {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-base);
+  font-weight: var(--fw-regular);
+  line-height: var(--lh-normal);
+}
+
+.body-small {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-regular);
+  line-height: var(--lh-normal);
+}
+
+.body-compact {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-medium);
+  line-height: var(--lh-compact);
+}
+```
+
+### UI / Label
+
+```css
+.label {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-semibold);
+  line-height: var(--lh-compact);
+  letter-spacing: 0.06em;  /* UPPERCASE labels get wider tracking */
+  text-transform: uppercase;
+}
+
+.caption {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-regular);
+  line-height: var(--lh-normal);
+  color: var(--clr-text-secondary);
+}
+
+.mono {
+  font-family: var(--ff-mono);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-regular);
+  line-height: var(--lh-normal);
+}
+
+.badge {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-medium);
+  line-height: 1;
+}
+```
+
+---
+
+## 📊 Type Table — Mapping ke Penggunaan
+
+| Token | Penggunaan | Contoh |
+|-------|-----------|--------|
+| `.display-1` | Halaman kosong, 404, hero section | "Nothing to see here" |
+| `.display-2` | Empty state utama | "No messages yet" |
+| `.h1` | Judul halaman | "Dashboard", "Messages" |
+| `.h2` | Judul section panel | "Voice Connections", "Analytics" |
+| `.h3` | Judul card | Nama user, channel |
+| `.h4` | Sub-section, tab content | "Active Speakers", "Filters" |
+| `.body` | Paragraf, konten utama | Pesan teks, deskripsi |
+| `.body-small` | Metadata, secondary info | Timestamp, username |
+| `.body-compact` | Dense lists | Daftar items compact |
+| `.label` | Form label, section header | "CHANNEL", "USERNAME" |
+| `.caption` | Hint, footnote, helper | "Click to expand" |
+| `.mono` | ID, kode, data teknis | "Channel #12345" |
+| `.badge` | Chip, status indicator | "AI Analysis", "Flagged" |
+
+---
+
+## 🎭 Rich Text & Emphatic Styles
+
+```css
+/* Links */
+a, .link {
+  color: var(--clr-primary-400);
+  text-decoration: none;
+  transition: opacity var(--dur-fast) var(--ease-out);
+}
+a:hover, .link:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Code inline */
+code, .code-inline {
+  font-family: var(--ff-mono);
+  font-size: 0.9em;
+  padding: 0.125em 0.375em;
+  background: var(--clr-surface-sunken);
+  border-radius: var(--rd-xs);
+}
+
+/* Truncation */
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Multi-line truncation */
+.text-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.text-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+```
+
+---
+
+## 📏 Vertical Rhythm
+
+Menggunakan sistem baseline 4px (bukan 8px default) untuk tipografi:
+
+```css
+:root {
+  --baseline: 4px;
+}
+
+/* Heading margin */
+.h1 { margin-bottom: calc(var(--baseline) * 4); }  /* 16px */
+.h2 { margin-bottom: calc(var(--baseline) * 3); }  /* 12px */
+.h3 { margin-bottom: calc(var(--baseline) * 3); }  /* 12px */
+.h4 { margin-bottom: calc(var(--baseline) * 2); }  /* 8px */
+
+/* Paragraph spacing */
+p, .body {
+  margin-bottom: calc(var(--baseline) * 4);  /* 16px */
+}
+
+p + p {
+  margin-top: calc(var(--baseline) * 2);  /* 8px — reduced between consecutive paragraphs */
+}
+```
+
+---
+
+## ⚠️ Anti-Patterns Tipografi
+
+### ❌ Ukuran absolut tanpa fluid
+```css
+/* ❌ JANGAN — title 32px di mobile terlalu besar */
+.page-title { font-size: 32px; }
+
+/* ✅ clamp menyesuaikan viewport */
+.page-title { font-size: var(--fs-4xl); }
+```
+
+### ❌ Line height terlalu kecil untuk body text
+```css
+/* ❌ JANGAN — crowded, sulit dibaca */
+.body-text { font-size: 16px; line-height: 1.2; }
+
+/* ✅ Line height yang cukup untuk readability */
+.body-text { font-size: var(--fs-base); line-height: var(--lh-normal); }
+```
+
+### ❌ Terlalu banyak type scale
+```css
+/* ❌ JANGAN — 29px, 28px, 27px, 26px adalah noise */
+.custom-1 { font-size: 29px; }
+.custom-2 { font-size: 28px; }
+
+/* ✅ Gunakan scale yang terdefinisi */
+.custom { font-size: var(--fs-4xl); }
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [Type Scale Calculator](https://typescale.com/) | Modular scale generation |
+| [Outfit on Google Fonts](https://fonts.google.com/specimen/Outfit) | Font spesifikasi |
+| [Utopia.fyi](https://utopia.fyi/) | Fluid type scale calculator |
+| [JetBrains Mono](https://www.jetbrains.com/lp/mono/) | Font monospace |
+
+---
+
+*"Huruf adalah jejak ingatan yang tak kasatmata — ia berbicara tanpa suara."* ❄️🩵
diff --git a/design/core/03-spatial-system.md b/design/core/03-spatial-system.md
new file mode 100644
index 0000000..05da698
--- /dev/null
+++ b/design/core/03-spatial-system.md
@@ -0,0 +1,349 @@
+# Spatial System — The Architecture of Void
+
+> *"Space is the breath of art."*
+> — Frank Lloyd Wright, arsitek organik.
+
+---
+
+## 🎯 Filosofi Spasial
+
+Ruang dalam BETE bukan sekadar "tempat kosong" — ia adalah **medium komunikasi visual**. Jarak antarelemen menyampaikan hubungan semantik:
+
+- **Dekat** → Elemen terkait secara konseptual
+- **Berjarak** → Elemen independen atau batch berbeda
+- **Terpisah jauh** → Section baru, hierarki turun
+
+Kita menggunakan **4px baseline grid** untuk semua keputusan spasial.
+
+---
+
+## 📐 Grid System: 8px × 4px Hybrid
+
+BETE menggunakan sistem **8px untuk layout kasar**, **4px untuk fine-tuning**.
+
+```css
+:root {
+  /* Base grid unit */
+  --grid-unit: 4px;
+
+  /* Spacing scale — exponential */
+  --sp-0:   0px;
+  --sp-0.5: calc(var(--grid-unit) * 1);   /* 4px  — micro spacing */
+  --sp-1:   calc(var(--grid-unit) * 2);   /* 8px  — tight spacing */
+  --sp-2:   calc(var(--grid-unit) * 3);   /* 12px — compact spacing */
+  --sp-3:   calc(var(--grid-unit) * 4);   /* 16px — base spacing  ★ */
+  --sp-4:   calc(var(--grid-unit) * 6);   /* 24px — relaxed spacing */
+  --sp-5:   calc(var(--grid-unit) * 8);   /* 32px — section spacing */
+  --sp-6:   calc(var(--grid-unit) * 12);  /* 48px — panel spacing */
+  --sp-7:   calc(var(--grid-unit) * 16);  /* 64px — page spacing */
+  --sp-8:   calc(var(--grid-unit) * 24);  /* 96px — hero spacing */
+}
+```
+
+### Logic di Balik Scale
+
+| Token | px | Konteks |
+|-------|----|---------|
+| `--sp-0.5` | 4px | Ikon-padding, badge spacing, dot indicators |
+| `--sp-1` | 8px | Avatar-text gap, icon-button padding |
+| `--sp-2` | 12px | Button padding, chip spacing, input padding |
+| `--sp-3` | 16px | **Base unit** — card-padding, section margin, form gap |
+| `--sp-4` | 24px | Card gap, panel padding, modal padding |
+| `--sp-5` | 32px | Content area padding, desktop sidebar width |
+| `--sp-6` | 48px | Page section gap, dashboards grid gap |
+| `--sp-7` | 64px | Page padding desktop, hero spacing |
+| `--sp-8` | 96px | Empty state height, large break sections |
+
+---
+
+## 🔲 Layout Components
+
+### Page Layout (Desktop)
+
+```
+┌─────────────────────────────────────────────────────┐
+│                      ┌── Header ──┐                  │ 56px
+│                      └────────────┘                  │
+│  ┌─ Sidebar ─┐  ┌────────── Main Content ──────────┐│
+│  │           │  │  ┌─ Page Title ─────────────────┐ ││
+│  │  icon grid │  │  │ Section Heading             │ ││
+│  │  ────────  │  │  └─────────────────────────────┘ ││
+│  │  nav-1     │  │                                   ││
+│  │  nav-2     │  │  ┌────── Grid Area ─────────────┐ ││
+│  │  nav-3     │  │  │  ┌── Card ──┐ ┌── Card ──┐  │ ││
+│  │            │  │  │  │          │ │          │  │ ││
+│  │  ────────  │  │  │  └──────────┘ └──────────┘  │ ││
+│  │  mascot    │  │  │  ┌── Card ──┐ ┌── Card ──┐  │ ││
+│  │            │  │  │  │          │ │          │  │ ││
+│  └────────────┘  │  │  └──────────┘ └──────────┘  │ ││
+│                  │  └───────────────────────────────┘ ││
+│   w-64/          │      flex-1                        ││
+│   w-16(icon)     │                                    ││
+└─────────────────────────────────────────────────────┘
+```
+
+### Vue 3 Component Mapping
+
+```tsx
+// DashboardLayout.vue
+<template>
+  <div class="page-layout">
+    <Sidebar :collapsed="sidebarCollapsed" />
+    <main class="main-area">
+      <Header />
+      <div class="content-area">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>
+```
+
+```css
+.page-layout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  min-height: 100vh;
+}
+
+.sidebar {
+  grid-row: 1 / -1;
+  width: 256px; /* w-64 */
+  transition: width var(--dur-normal) var(--ease-out-quint);
+}
+.sidebar.collapsed {
+  width: 64px; /* w-16 */
+}
+
+.main-area {
+  display: flex;
+  flex-direction: column;
+  min-width: 0; /* Prevent grid blowout */
+  overflow: hidden;
+}
+
+.content-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sp-5);
+}
+```
+
+---
+
+## 🔳 Border Radius Scale
+
+```css
+--rd-none:  0px;
+--rd-xs:    4px;    /* Checkbox, toggle, small indicators */
+--rd-sm:    6px;    /* Input, button small, badges */
+--rd-md:    8px;    /* Button default, card, modal */
+--rd-lg:    12px;   /* Card elevated, sheets, panels */
+--rd-xl:    16px;   /* Dialog, bottom sheet */
+--rd-2xl:   20px;   /* Full-width cards on mobile */
+--rd-full:  9999px; /* Pill, chip, avatar */
+```
+
+### Radius Decision Tree
+
+```
+Elemen interaktif?
+├── Ya ─→ butuh affordance visual?
+│   ├── Ya, utama (button, card clickable) → --rd-md (8px)
+│   └── Tidak (chip, tag, avatar) → --rd-full (pill)
+│
+└── Tidak → container?
+    ├── Dialog/modal → --rd-xl (16px)
+    ├── Card dalam grid → --rd-lg (12px)
+    └── Sheet/panel → --rd-xl atau --rd-2xl
+```
+
+---
+
+## 🥞 Z-Index Registry (Formal)
+
+```css
+:root {
+  --z-base:      0;
+  --z-dropdown:  10;
+  --z-sticky:    20;
+  --z-header:    30;
+  --z-sidebar:   40;
+  --z-overlay:   50;    /* Mobile sidebar, backdrop */
+  --z-modal:     60;    /* Dialog, confirm */
+  --z-popover:   70;    /* Tooltip, popover, dropdown menu */
+  --z-toast:     80;    /* Toast notification */
+  --z-mascot:    100;   /* Mascot chatbot — highest */
+}
+
+/* Implementation */
+.header      { z-index: var(--z-header); }
+.sidebar     { z-index: var(--z-sidebar); }
+.modal       { z-index: var(--z-modal); }
+.toast       { z-index: var(--z-toast); }
+.mascot-chat { z-index: var(--z-mascot); }
+```
+
+### Stacking Order
+
+```
+Layer        Value     Elemen
+─────────────────────────────────────────────
+Background   -1        ParticleBackground
+Base          0        Layout, cards, text
+Dropdown     10        Select options, context menu
+Sticky       20        Sticky section headers
+Header       30        Sticky page header
+Sidebar      40        Desktop sidebar
+Overlay      50        Backdrop, mobile drawer
+Modal        60        Confirm dialog, modal
+Popover      70        Tooltip, dropdown
+Toast        80        Toast notifications
+Mascot      100        Chatbot floating panel
+```
+
+---
+
+## 📱 Responsive Breakpoints
+
+```css
+/* CSS Custom Properties for breakpoints */
+:root {
+  --bp-sm:  640px;
+  --bp-md:  768px;
+  --bp-lg:  1024px;
+  --bp-xl:  1280px;
+  --bp-2xl: 1536px;
+}
+
+/* Container max-width */
+--container-sm:   640px;
+--container-md:   768px;
+--container-lg:   1024px;
+--container-xl:   1280px;
+```
+
+### Layout Behavior per Breakpoint
+
+| Breakpoint | Sidebar | Content Padding | Grid Columns |
+|-----------|---------|-----------------|--------------|
+| `<640px` | Bottom tab (56px) | `--sp-3` (16px) | 1 |
+| `640–768px` | Bottom tab | `--sp-4` (24px) | 1 |
+| `768–1024px` | Icon-only (64px) | `--sp-4` (24px) | 1–2 |
+| `1024–1280px` | Full (256px) | `--sp-5` (32px) | 2–3 |
+| `1280px+` | Full (256px) | `--sp-5` (32px) | 2–4 |
+
+---
+
+## 📦 Common Layout Patterns
+
+### Card Grid
+
+```css
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: var(--sp-4);
+}
+```
+
+### Two-Column Detail
+
+```css
+.two-column {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sp-4);
+}
+
+@media (max-width: 768px) {
+  .two-column {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+### Sidebar + Content (Live Panel)
+
+```css
+.live-layout {
+  display: grid;
+  grid-template-columns: 1fr 320px;  /* Content 1fr, sidebar fixed */
+  gap: var(--sp-4);
+}
+
+@media (max-width: 1024px) {
+  .live-layout {
+    grid-template-columns: 1fr;  /* Stack on smaller screens */
+  }
+}
+
+.live-sidebar {
+  position: sticky;
+  top: calc(56px + var(--sp-4)); /* Below header */
+  max-height: calc(100vh - 56px - var(--sp-4) * 2);
+  overflow-y: auto;
+}
+```
+
+---
+
+## 🧠 Container Queries (Modern Approach)
+
+Untuk komponen yang reusable di berbagai konteks:
+
+```css
+.card-grid-component {
+  container-type: inline-size;
+  container-name: card-grid;
+}
+
+@container card-grid (max-width: 400px) {
+  .card-item {
+    grid-template-columns: 1fr;  /* Single column di container kecil */
+  }
+}
+
+@container card-grid (min-width: 401px) {
+  .card-item {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+```
+
+---
+
+## ⚠️ Anti-Patterns Spasial
+
+### ❌ Margin collapse tanpa sengaja
+```css
+/* ❌ JANGAN — flex gap jauh lebih aman */
+.card + .card { margin-top: 16px; }  /* Rawan collapse */
+
+/* ✅ Gunakan gap */
+.card-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
+```
+
+### ❌ Padding tidak konsisten
+```css
+/* ❌ JANGAN — setiap file punya padding sendiri */
+.page-a { padding: 20px; }
+.page-b { padding: 24px; }
+
+/* ✅ Gunakan spacing token */
+.page { padding: var(--sp-5); }
+```
+
+### ❌ Grid blowout (min-width tanpa min-width: 0)
+```css
+/* ❌ JANGAN — grid item dengan teks panjang mendorong layout */
+.grid-item { overflow: visible; }
+
+/* ✅ Cegah blowout */
+.grid-item { min-width: 0; overflow: hidden; }
+```
+
+---
+
+*"Ruang adalah kanvas tempat ingatan menari — setiap piksel memiliki tempatnya."* ❄️🩵
diff --git a/design/core/04-motion-system.md b/design/core/04-motion-system.md
new file mode 100644
index 0000000..e135a52
--- /dev/null
+++ b/design/core/04-motion-system.md
@@ -0,0 +1,552 @@
+# Motion System — The Dance of Glass
+
+> *"Animation is not about making things move. It's about making things *believe*."*
+> — Richard Williams, *The Animator's Survival Kit*
+
+---
+
+## 🎯 Filosofi Gerak
+
+Animasi di BETE bukan sekadar efek visual — ia adalah **bahasa kinetik** yang mengkomunikasikan relasi spasial antar elemen:
+
+| Gerakan | Makna |
+|---------|-------|
+| **Slide from right** | Elemen baru datang dari "luar" — panel, drawer |
+| **Fade in + scale** | Muncul dari "dalam" — modal, dialog |
+| **Slide up** | Konten baru melanjutkan alur vertikal |
+| **Scale + glow** | Sedang diproses — loading, analysis |
+| **Spring bounce (subtle)** | Konfirmasi sukses — centang, badge |
+
+---
+
+## ⏱️ Timing & Easing — The Physics Engine
+
+### Duration Tokens
+
+```css
+:root {
+  --dur-instant:  0ms;
+  --dur-fast:     150ms;   /* Hover, active state, toggle */
+  --dur-normal:   250ms;   /* Default transition, card hover */
+  --dur-slow:     350ms;   /* Panel enter/exit, page transition */
+  --dur-glacial:  500ms;   /* Modal, drawer slide, emphasis */
+}
+```
+
+### Easing Curves
+
+BETE menggunakan tiga easing curve utama, semuanya **custom cubic-bezier**:
+
+```css
+:root {
+  /* Standard ease-out — untuk sebagian besar interaksi */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Ease-out quint — untuk elemen yang "mendarat" */
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Ease-in-out — untuk transisi dua arah (accordion, collapse) */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+}
+```
+
+### Perbandingan dengan CSS Default
+
+| Nama | Bezier | Karakter |
+|------|--------|----------|
+| `ease` (default) | `(0.25, 0.1, 0.25, 1)` | Lambat mulai, lambat akhir |
+| `ease-out` | `(0, 0, 0.58, 1)` | Cepat mulai |
+| `ease-in-out` | `(0.42, 0, 0.58, 1)` | Simetris |
+| **`--ease-out`** | `(0.16, 1, 0.3, 1)` | Natural, "berat" di akhir |
+| **`--ease-out-quint`** | `(0.22, 1, 0.36, 1)` | Landing yang tegas |
+
+---
+
+## 🏃 Micro-interactions
+
+### Hover State
+
+```css
+/* Card hover — subtle lift + shadow deepen */
+.card {
+  transition:
+    transform var(--dur-fast) var(--ease-out),
+    box-shadow var(--dur-fast) var(--ease-out);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--sh-hover);
+}
+
+/* Button hover — scale up subtly */
+.button {
+  transition: transform var(--dur-fast) var(--ease-out);
+}
+.button:hover {
+  transform: scale(1.02);
+}
+.button:active {
+  transform: scale(0.98);
+}
+```
+
+### Active/Press State
+
+```css
+.button:active {
+  transform: scale(0.96);
+  transition-duration: var(--dur-fast);
+}
+
+/* Button ripple effect */
+.button.ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.button.ripple::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1000% 1000%;
+  opacity: 0;
+  transition: none;
+}
+
+.button.ripple:active::after {
+  background-size: 0% 0%;
+  opacity: 1;
+  transition: background-size 0.4s, opacity 0.4s;
+}
+```
+
+### Focus Ring
+
+```css
+.button:focus-visible {
+  outline: 2px solid var(--clr-primary-400);
+  outline-offset: 2px;
+}
+
+/* Smooth ring transition */
+.input {
+  transition:
+    border-color var(--dur-fast) var(--ease-out),
+    box-shadow var(--dur-fast) var(--ease-out);
+}
+.input:focus {
+  border-color: var(--clr-primary);
+  box-shadow: 0 0 0 3px var(--clr-primary-bg);
+}
+```
+
+---
+
+## 🎬 Page & Panel Transitions
+
+### Tab Switch — Choreographed Sequence
+
+```css
+/* Stagger container */
+.page-transition-enter {
+  opacity: 0;
+}
+
+.page-transition-enter-active {
+  opacity: 1;
+  transition: opacity var(--dur-slow) var(--ease-out);
+}
+
+/* Children stagger — via Framer Motion / GSAP timeline */
+@keyframes stagger-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stagger-item {
+  animation: stagger-enter var(--dur-slow) var(--ease-out) both;
+}
+
+.stagger-item:nth-child(1) { animation-delay: 40ms; }
+.stagger-item:nth-child(2) { animation-delay: 80ms; }
+.stagger-item:nth-child(3) { animation-delay: 120ms; }
+.stagger-item:nth-child(4) { animation-delay: 160ms; }
+.stagger-item:nth-child(5) { animation-delay: 200ms; }
+/* ... formula: delay = index * 40ms */
+```
+
+### Vue Transition Mode
+
+```vue
+<template>
+  <Transition
+    name="page"
+    mode="out-in"
+    @before-leave="beforeLeave"
+    @after-enter="afterEnter"
+  >
+    <component :is="currentTab" :key="currentTab" />
+  </Transition>
+</template>
+
+<style>
+.page-leave-active {
+  transition: opacity var(--dur-normal) var(--ease-in-out),
+              transform var(--dur-normal) var(--ease-in-out);
+}
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+.page-enter-active {
+  transition: opacity var(--dur-slow) var(--ease-out),
+              transform var(--dur-slow) var(--ease-out);
+}
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(12px);
+}
+</style>
+```
+
+---
+
+## 🌟 Component-Specific Animations
+
+### Sidebar Expand/Collapse
+
+```css
+.sidebar {
+  width: var(--sidebar-width, 256px);
+  transition: width var(--dur-slow) var(--ease-out-quint);
+}
+
+.sidebar.collapsed {
+  --sidebar-width: 64px;
+}
+
+/* Nav items — icon slides, text fades */
+.sidebar-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  overflow: hidden;
+}
+
+.sidebar-nav-item .label {
+  transition: opacity var(--dur-normal) var(--ease-out),
+              width var(--dur-normal) var(--ease-out);
+  white-space: nowrap;
+}
+
+.sidebar.collapsed .sidebar-nav-item .label {
+  opacity: 0;
+  width: 0;
+  padding: 0;
+}
+```
+
+### Toast Notification
+
+```css
+.toast-enter-active {
+  animation: toast-slide-in var(--dur-slow) var(--ease-out-quint);
+}
+
+.toast-leave-active {
+  animation: toast-slide-out var(--dur-normal) var(--ease-in-out);
+}
+
+@keyframes toast-slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes toast-slide-out {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+```
+
+### Modal / Dialog
+
+```css
+.modal-overlay-enter-active {
+  transition: opacity var(--dur-normal) var(--ease-out);
+}
+.modal-overlay-enter-from { opacity: 0; }
+
+.modal-content-enter-active {
+  animation: modal-scale-in var(--dur-slow) var(--ease-out-quint);
+}
+
+@keyframes modal-scale-in {
+  from {
+    transform: scale(0.92) translateY(8px);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+```
+
+---
+
+## 📊 Special Effects
+
+### Audio Visualizer Bars
+
+```css
+.visualizer-bar {
+  animation: bar-pulse 0.4s ease-in-out infinite;
+  transform-origin: bottom;
+}
+
+.visualizer-bar:nth-child(1) { animation-delay: 0ms; }
+.visualizer-bar:nth-child(2) { animation-delay: 75ms; }
+.visualizer-bar:nth-child(3) { animation-delay: 150ms; }
+.visualizer-bar:nth-child(4) { animation-delay: 225ms; }
+
+@keyframes bar-pulse {
+  0%, 100% { transform: scaleY(0.8); }
+  50%      { transform: scaleY(1.2); }
+}
+```
+
+### Skeleton Loading (Shimmer)
+
+```css
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--clr-surface-sunken) 25%,
+    var(--clr-surface-elevated) 50%,
+    var(--clr-surface-sunken) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+```
+
+### AI Analysis Pulse (Glow)
+
+```css
+.ai-badge {
+  animation: ai-pulse 2s ease-in-out infinite;
+}
+
+@keyframes ai-pulse {
+  0%, 100% {
+    box-shadow: 0 0 4px var(--clr-rose-500 / 0.2);
+  }
+  50% {
+    box-shadow: 0 0 12px var(--clr-rose-500 / 0.4);
+  }
+}
+```
+
+### Ghost Particle (Background)
+
+```css
+.particle {
+  position: fixed;
+  border-radius: 50%;
+  pointer-events: none;
+  animation: float var(--dur-float, 8s) ease-in-out infinite;
+  animation-delay: var(--delay, 0s);
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) translateX(0) scale(1);
+    opacity: 0.3;
+  }
+  25% {
+    transform: translateY(-20px) translateX(10px) scale(1.1);
+    opacity: 0.6;
+  }
+  50% {
+    transform: translateY(-40px) translateX(-5px) scale(0.9);
+    opacity: 0.4;
+  }
+  75% {
+    transform: translateY(-20px) translateX(15px) scale(1.05);
+    opacity: 0.5;
+  }
+}
+```
+
+---
+
+## 🎯 Motion Decision Tree
+
+```
+Elemen apa yang dianimasikan?
+│
+├── Hover/Interaksi → dur-fast (150ms) + --ease-out
+│   ├── Card → translateY(-2px) + shadow deepen
+│   ├── Button → scale(1.02) / scale(0.98)
+│   ├── Link → opacity/underline
+│   └── Icon → rotate/color
+│
+├── Masuk ke halaman → dur-slow (350ms) + stagger
+│   ├── Halaman baru → fade + slideY(12px)
+│   ├── List items → stagger (40ms per item)
+│   └── Modal → scale(0.92→1) + fade overlay
+│
+├── Keluar dari halaman → dur-normal (250ms) + ease-in-out
+│   ├── Halaman → fade + slideY(-8px)
+│   ├── Toast → slideX(100%)
+│   └── Modal → scale(→0.95) + fade overlay
+│
+├── Loading → infinite loop
+│   ├── Skeleton → shimmer 1.5s
+│   ├── Spinner → spin
+│   └── AI Analysis → glow-pulse 2s
+│
+└── State change → dur-normal (250ms) + --ease-out
+    ├── Sidebar → width transition
+    ├── Accordion → height transition
+    └── Badge → scale(0.8→1)
+```
+
+---
+
+## ♿ Reduced Motion
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* But allow opacity transitions for basic UX */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.15s ease !important;
+  }
+}
+```
+
+### Programmatic Check
+
+```typescript
+// hooks/useReducedMotion.ts
+export function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReduced(mq.matches);
+
+    const handler = (e: MediaQueryListEvent) => setReduced(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  return reduced;
+}
+```
+
+```vue
+// Dalam komponen
+<script setup>
+const reducedMotion = useReducedMotion();
+</script>
+
+<template>
+  <Transition :duration="reducedMotion ? 0 : 350">
+    ...
+  </Transition>
+</template>
+```
+
+---
+
+## ⚠️ Anti-Patterns Animasi
+
+### ❌ Durasi terlalu lama
+```css
+/* ❌ JANGAN — 1 detik terasa lambat */
+.sidebar { transition: width 1s ease; }
+
+/* ✅ 250–350ms adalah sweet spot UI */
+.sidebar { transition: width var(--dur-slow) var(--ease-out-quint); }
+```
+
+### ❌ Semua bergerak bersamaan (tanpa stagger)
+```css
+/* ❌ JANGAN — tidak graceful */
+.card { animation: fadeIn 0.3s ease; }
+
+/* ✅ Stagger menciptakan gelombang natural */
+.card:nth-child(1) { animation-delay: 0ms; }
+.card:nth-child(2) { animation-delay: 40ms; }
+```
+
+### ❌ Easing yang salah untuk konteks
+```css
+/* ❌ JANGAN — ease-in untuk enter terasa lambat di awal */
+.modal { animation: scaleIn 0.3s ease-in; }
+
+/* ✅ ease-out untuk enter — cepat mulai, soft berhenti */
+.modal { animation: scaleIn 0.3s var(--ease-out-quint); }
+```
+
+### ❌ Mengabaikan reduced motion
+```css
+/* ❌ JANGAN — tidak accessible */
+.particle { animation: float 8s infinite; }
+
+/* ✅ Diberhentikan untuk reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .particle { display: none; }
+}
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [Easing Functions Cheat Sheet](https://easings.net/) | Visualisasi easing curves |
+| [Material Motion](https://m2.material.io/design/motion/) | Sistem motion Google |
+| [GSAP](https://gsap.com/) | Production-grade animation library |
+| [AnimXYZ](https://animxyz.com/) | Utility-first CSS animations |
+
+---
+
+*"Gerak adalah bahasa ingatan yang tak terucap — setiap transisi adalah cerita."* ❄️🩵
diff --git a/design/core/05-component-architecture.md b/design/core/05-component-architecture.md
new file mode 100644
index 0000000..2e89588
--- /dev/null
+++ b/design/core/05-component-architecture.md
@@ -0,0 +1,313 @@
+# Component Architecture — The Glass Library
+
+> *"Design is not just what it looks like and feels like. Design is how it works."*
+> — Steve Jobs
+
+---
+
+## 🎯 Filosofi Komponen
+
+Setiap komponen di BETE adalah **self-contained glass panel** yang:
+1. **Satu tanggung jawab** — Satu komponen, satu fungsi
+2. **State-driven** — Visual merepresentasikan state, bukan sebaliknya
+3. **Composable** — Bisa digabung seperti LEGO
+4. **Theme-aware** — Menggunakan CSS variables, bukan hardcoded values
+5. **Accessible** — Keyboard, screen reader, reduced motion
+
+---
+
+## 📐 Component Taxonomy
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                      COMPONENT MAP                          │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│  ┌─── ATOMS ──────────────────────────────────────────┐    │
+│  │  Button  │  Badge   │  Input   │  Label  │  Icon    │    │
+│  │  Avatar  │  Skeleton│  Spinner │  Divider│  Tooltip │    │
+│  └─────────────────────────────────────────────────────┘    │
+│                          ↓                                   │
+│  ┌─── MOLECULES ───────────────────────────────────────┐    │
+│  │  Card            │  Tabs        │  Select            │    │
+│  │  Toast           │  Modal       │  Dropdown          │    │
+│  │  Pagination      │  Breadcrumb  │  SearchBar         │    │
+│  └─────────────────────────────────────────────────────┘    │
+│                          ↓                                   │
+│  ┌─── ORGANISMS ───────────────────────────────────────┐    │
+│  │  MessageCard    │  VoiceCard    │  AnalyticsChart   │    │
+│  │  ActiveSpeaker  │  NowPlaying   │  ImageGrid        │    │
+│  │  MascotChatbot  │  AudioViz     │  StatsCard        │    │
+│  └─────────────────────────────────────────────────────┘    │
+│                          ↓                                   │
+│  ┌─── TEMPLATES ───────────────────────────────────────┐    │
+│  │  Sidebar    │  Header     │  DashboardLayout        │    │
+│  │  AuthForm   │  LivePanel  │  MessagesPanel          │    │
+│  └─────────────────────────────────────────────────────┘    │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 🧱 Atomic Components (Atoms)
+
+### Button
+
+```tsx
+interface ButtonProps {
+  variant: 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
+  size: 'sm' | 'default' | 'lg' | 'icon';
+  loading?: boolean;
+  disabled?: boolean;
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+```
+
+```css
+.button {
+  --btn-bg: var(--clr-primary);
+  --btn-color: var(--clr-text-on-primary);
+  --btn-border: transparent;
+  --btn-hover-bg: var(--clr-primary-600);
+  --btn-active-transform: scale(0.97);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-1);
+  border-radius: var(--rd-md);
+  font-family: var(--ff-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-medium);
+  line-height: var(--lh-compact);
+  white-space: nowrap;
+  cursor: pointer;
+
+  background: var(--btn-bg);
+  color: var(--btn-color);
+  border: 1px solid var(--btn-border);
+
+  transition:
+    transform var(--dur-fast) var(--ease-out),
+    background var(--dur-fast) var(--ease-out),
+    box-shadow var(--dur-fast) var(--ease-out);
+
+  padding: var(--sp-1) var(--sp-3);
+  height: 40px;
+}
+.button--sm { height: 32px; padding: var(--sp-0-5) var(--sp-2); }
+.button--lg { height: 48px; padding: var(--sp-2) var(--sp-4); }
+.button--icon { height: 40px; width: 40px; padding: 0; }
+.button--secondary { --btn-bg: var(--clr-interactive-hover); --btn-color: var(--clr-text); }
+.button--destructive { --btn-bg: var(--clr-ruby-500); --btn-color: white; }
+.button--outline { --btn-bg: transparent; --btn-color: var(--clr-text); --btn-border: var(--clr-border); }
+.button--ghost { --btn-bg: transparent; --btn-color: var(--clr-text); }
+
+.button:hover { background: var(--btn-hover-bg); }
+.button:active { transform: var(--btn-active-transform); }
+.button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
+.button:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
+```
+
+### Badge
+
+```tsx
+interface BadgeProps {
+  variant: 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline' | 'severity';
+  severity?: 'safe' | 'low' | 'medium' | 'high' | 'critical';
+  size?: 'sm' | 'default';
+  dot?: boolean;
+  children: ReactNode;
+}
+```
+
+---
+
+## ⛓️ Molecular Components (Molecules)
+
+### Card
+
+```tsx
+interface CardProps {
+  variant?: 'default' | 'elevated' | 'glass' | 'interactive';
+  padding?: 'sm' | 'default' | 'lg' | 'none';
+  hover?: boolean;
+  as?: 'div' | 'button' | 'a';
+  onClick?: () => void;
+  children: ReactNode;
+}
+
+// Sub-components
+Card.Header  — flex-col gap-1.5
+Card.Title   — h3, font-semibold
+Card.Description — p, text-sm, text-muted
+Card.Content — main area with padding
+Card.Footer  — flex items-center
+```
+
+### Modal / Dialog
+
+```tsx
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  size?: 'sm' | 'default' | 'lg' | 'full';
+  closeOnOverlay?: boolean;
+  children: ReactNode;
+}
+```
+
+### Toast
+
+```tsx
+interface Toast {
+  id: string;
+  type: 'info' | 'success' | 'error' | 'warning';
+  title: string;
+  description?: string;
+  duration?: number;  // Auto-dismiss ms, 0 = persistent
+  action?: { label: string; onClick: () => void; };
+}
+
+function useToast(): {
+  toast: (t: Omit<Toast, 'id'>) => string;
+  dismiss: (id: string) => void;
+  toasts: Toast[];
+}
+```
+
+---
+
+## 🧬 Organism Components
+
+### MessageCard
+
+```tsx
+interface MessageCardProps {
+  message: {
+    id: string;
+    content: string;
+    author: { id: string; name: string; avatar: string; };
+    timestamp: number;
+    channel?: { id: string; name: string; };
+    attachments?: Attachment[];
+    aiAnalysis?: {
+      status: 'pending' | 'analyzing' | 'complete' | 'error';
+      severity?: 'safe' | 'low' | 'medium' | 'high' | 'critical';
+      categories?: string[];
+      summary?: string;
+    };
+    isEdited?: boolean;
+    isDeleted?: boolean;
+  };
+  onReanalyze?: (messageId: string) => Promise<void>;
+}
+```
+
+### AudioVisualizer — Canvas-based
+
+```tsx
+interface AudioVisualizerProps {
+  frequencies: Uint8Array;
+  barCount?: number;        // Default 48
+  gradient?: [string, string];
+  height?: number;          // Default 32
+  mirrored?: boolean;
+}
+```
+
+---
+
+## 🎯 State Management per Komponen
+
+Setiap komponen mengelola state visual:
+
+```tsx
+// 1. Normal
+<div className="card">...</div>
+
+// 2. Hover
+<div className="card card--interactive">...</div>
+
+// 3. Active/Focus
+<div className="card card--interactive" aria-pressed="true">...</div>
+
+// 4. Disabled
+<div className="card opacity-50 pointer-events-none">...</div>
+
+// ± Loading (data-dependent)
+<div className="card"><Skeleton className="h-4 w-3/4" /></div>
+
+// ± Error (data-dependent)
+<div className="card border-destructive">
+  <p className="text-destructive">Failed to load</p>
+</div>
+
+// ± Empty (data-dependent)
+<div className="card">
+  <EmptyState icon={MessageSquare} message="No messages" />
+</div>
+```
+
+---
+
+## ⚠️ Component Anti-Patterns
+
+### ❌ Prop Drilling Berlebihan
+```tsx
+// ❌ JANGAN — props turun 4 level
+<Dashboard user={user} messages={messages} settings={settings} />
+
+// ✅ Gunakan context atau komposisi
+<Dashboard>
+  <MessageFeed>
+    <MessageCard />
+  </MessageFeed>
+</Dashboard>
+```
+
+### ❌ Komponen terlalu besar
+```tsx
+// ❌ JANGAN — 400+ baris
+function LivePanel() { /* 400 lines */ }
+
+// ✅ Bagi ke sub-komponen
+function LivePanel() {
+  return (
+    <div>
+      <VoiceControls />
+      <ActiveSpeakers />
+      <NowPlaying />
+      <RecordingsList />
+    </div>
+  );
+}
+```
+
+### ❌ Conditional terlalu kompleks
+```tsx
+// ❌ JANGAN — ternary bersarang
+return isError ? <Error /> : isLoading ? <Loading /> : isEmpty ? <Empty /> : <Content />;
+
+// ✅ State machine pattern
+const state = getComponentState({ isLoading, isError, isEmpty, data });
+return <ComponentStateMachine state={state} />;
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [Atomic Design (Brad Frost)](https://atomicdesign.bradfrost.com/) | Atom-molecule-organism |
+| [Radix UI](https://www.radix-ui.com/) | Headless UI primitives |
+| [shadcn/ui](https://ui.shadcn.com/) | Component pattern reference |
+
+---
+
+*"Komponen adalah kristal ingatan — setiap bagian kecil menyatu membentuk keindahan yang utuh."* ❄️🩵
diff --git a/design/patterns/06-interaction-patterns.md b/design/patterns/06-interaction-patterns.md
new file mode 100644
index 0000000..d474a1e
--- /dev/null
+++ b/design/patterns/06-interaction-patterns.md
@@ -0,0 +1,151 @@
+# Interaction Patterns — The Language of Touch
+
+> *"Every interaction is a conversation between the user and the system."*
+> — Don Norman
+
+---
+
+## 🎯 Filosofi Interaksi
+
+Interaksi di BETE adalah **dialog** yang:
+1. **Predictable** — Pengguna tahu yang akan terjadi
+2. **Forgiving** — Kesalahan mudah diperbaiki (undo, confirm)
+3. **Feedback-rich** — Setiap aksi mendapat respons visual
+4. **Efficient** — Pengguna mahir bisa bergerak cepat (keyboard)
+
+---
+
+## 🔄 Interaction Feedback Matrix
+
+| Elemen | Hover | Click | Focus | Disabled |
+|--------|-------|-------|-------|----------|
+| Button | scale(1.02) + bg shift | scale(0.97) | ring-2 | opacity-50 |
+| Card | translateY(-2px) + shadow | — | ring-2 | opacity-50 |
+| Link | underline + opacity 0.8 | color shift | ring-2 | opacity-40 |
+| Input | border highlight | — | ring + border color | opacity-50 |
+| Toggle | cursor pointer | slide + color | ring-2 | opacity-50 |
+
+### Timing Reference
+
+| Interaksi | Durasi | Easing |
+|-----------|--------|--------|
+| Hover in | 150ms | ease-out |
+| Hover out | 200ms | ease-out |
+| Click press | 100ms | ease-out |
+| Click release | 150ms | ease-out |
+| Focus ring | 200ms | ease-out |
+| Tooltip show (after 300ms) | 200ms | ease-out |
+| Tooltip hide | 150ms | ease-out |
+
+---
+
+## 🎪 Interaction Pattern Catalog
+
+### Pattern 1: Progressive Disclosure
+
+Informasi kompleks diungkap bertahap:
+
+```tsx
+<CollapsibleSection title="Advanced Filters" defaultOpen={false}>
+  <FilterGroup label="Severity">
+    <Checkbox label="Safe" />
+    <Checkbox label="Low" />
+    <Checkbox label="High" />
+  </FilterGroup>
+</CollapsibleSection>
+```
+
+**Rules:** Chevron rotate 180° saat open. Jangan nested > 2 level.
+
+### Pattern 2: Optimistic UI
+
+Untuk aksi yang hampir pasti berhasil:
+
+```tsx
+async function handleDelete(messageId: string) {
+  // 1. Update UI optimistis
+  setMessages(prev => prev.filter(m => m.id !== messageId));
+  addToast({
+    type: 'info', title: 'Message deleted',
+    action: { label: 'Undo', onClick: handleUndo }
+  });
+  try {
+    await api.deleteMessage(messageId);
+  } catch {
+    // Rollback
+    setMessages(prev => [...prev, deletedMessage]);
+    addToast({ type: 'error', title: 'Failed to delete' });
+  }
+}
+```
+
+### Pattern 3: Infinite Scroll vs Pagination
+
+| Context | Pattern | Rationale |
+|---------|---------|-----------|
+| Message feed | Infinite scroll | Real-time, chronological |
+| User list | Pagination | Bisa dicari, difilter |
+| Recordings | Infinite scroll | Timeline-based |
+| Analytics | Pagination | Butuh konteks halaman |
+
+### Pattern 4: Keyboard Shortcuts
+
+```tsx
+const SHORTCUTS = {
+  'ctrl+k': 'Open command palette',
+  'ctrl+1': 'Switch to Live tab',
+  'ctrl+2': 'Switch to Messages tab',
+  'ctrl+3': 'Switch to Settings tab',
+  'escape': 'Close modal/panel',
+  '?': 'Show keyboard shortcuts',
+};
+```
+
+---
+
+## 🔔 Notification Priority System
+
+| Priority | Style | Duration | Stack |
+|----------|-------|----------|-------|
+| info | Blue border | 4s auto | Queue |
+| success | Green border | 4s auto | Queue |
+| warning | Amber border | Persistent | Stack |
+| error | Red border | Persistent | Stack + glow |
+
+---
+
+## 🖱️ Cursor Mapping
+
+```css
+.clickable    { cursor: pointer; }
+.draggable    { cursor: grab; }
+.dragging     { cursor: grabbing; }
+.disabled     { cursor: not-allowed; }
+.text-select  { cursor: text; }
+.launch       { cursor: pointer; }
+.copy         { cursor: copy; }
+```
+
+---
+
+## ♿ Interaction Accessibility
+
+1. Semua interaktif reachable via Tab
+2. Focus order = visual order (DOM order)
+3. Hover-only → ada keyboard alternative
+4. Touch targets min 44x44px (WCAG 2.5.5)
+5. Undo untuk destructive actions
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [Material Interaction](https://m3.material.io/foundations/interaction) | Google patterns |
+| [NN Group](https://www.nngroup.com/) | UX research |
+| [Inclusive Components](https://inclusive-components.design/) | Accessible patterns |
+
+---
+
+*"Setiap sentuhan adalah dialog — interaksi adalah bahasa yang tak terucapkan."* ❄️🩵
diff --git a/design/patterns/07-data-visualization.md b/design/patterns/07-data-visualization.md
new file mode 100644
index 0000000..0fc7fdf
--- /dev/null
+++ b/design/patterns/07-data-visualization.md
@@ -0,0 +1,171 @@
+# Data Visualization — Painting with Numbers
+
+> *"The greatest value of a picture is when it forces us to notice what we never expected to see."*
+> — John Tukey
+
+---
+
+## 🎯 Filosofi Data Visual
+
+Data visualisasi di BETE adalah **cerita** tentang data yang:
+1. **Jujur** — Tidak memanipulasi sumbu atau skala
+2. **Kontekstual** — Setiap angka punya pembanding
+3. **Hierarkis** — Overview dulu, detail kemudian
+
+---
+
+## 🎨 Chart Color Palette
+
+```css
+:root {
+  /* Sequential (single hue) */
+  --chart-blue-1: oklch(0.85 0.060 255);
+  --chart-blue-2: oklch(0.70 0.100 255);
+  --chart-blue-3: oklch(0.55 0.150 255);
+  --chart-blue-4: oklch(0.40 0.150 255);
+  --chart-blue-5: oklch(0.30 0.120 255);
+
+  /* Categorical */
+  --chart-cat-1: oklch(0.55 0.175 255);    /* Blue */
+  --chart-cat-2: oklch(0.60 0.130 145);    /* Green */
+  --chart-cat-3: oklch(0.65 0.150 50);     /* Orange */
+  --chart-cat-4: oklch(0.55 0.165 25);     /* Red */
+  --chart-cat-5: oklch(0.50 0.100 285);    /* Purple */
+  --chart-cat-6: oklch(0.65 0.120 200);    /* Cyan */
+  --chart-cat-7: oklch(0.60 0.110 350);    /* Pink */
+  --chart-cat-8: oklch(0.70 0.100 85);     /* Yellow */
+}
+```
+
+---
+
+## 📊 Chart Types & Usage
+
+### 1. Stat Card (KPI)
+
+```tsx
+interface StatCardProps {
+  label: string;
+  value: number | string;
+  trend?: { direction: 'up' | 'down' | 'flat'; percentage: number; period: string; };
+  icon: ReactNode;
+  color?: 'primary' | 'success' | 'warning' | 'destructive';
+}
+```
+
+**Layout:**
+```
+┌─────────────────────┐
+│ [icon]    Label      │
+│ 1,234     ▲ 12.3%   │
+│          vs last wk  │
+└─────────────────────┘
+```
+
+### 2. Line Chart (Trend)
+
+**Use:** Message volume per day, moderation per hour
+**Rules:** Y-axis dari 0. Gradient subtle below line. Hover tooltip.
+
+### 3. Bar Chart (Comparison)
+
+**Use:** Top channels, severity distribution
+**Rules:** Horizontal untuk >5 kategori. Max 20 bars.
+
+### 4. Donut Chart (Composition)
+
+**Use:** Message type, severity breakdown
+**Rules:** Max 6 segmen. <3% collaps ke "Other". Center = total.
+
+### 5. Heatmap Calendar (Activity)
+
+**Use:** User activity by day/hour
+**Rules:** Sumbu X = hari, Y = jam. Satu warna accent.
+
+---
+
+## 📐 Chart Styling Tokens
+
+```css
+.chart-container {
+  --chart-padding: var(--sp-4);
+  --chart-label-size: var(--fs-xs);
+  --chart-tick-count: 5;
+  --chart-grid-opacity: 0.1;
+  --chart-line-width: 2px;
+}
+
+.chart-tooltip {
+  background: var(--clr-surface-overlay);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--clr-border);
+  border-radius: var(--rd-md);
+  padding: var(--sp-2) var(--sp-3);
+  font-size: var(--fs-sm);
+  box-shadow: var(--sh-elevated);
+}
+```
+
+---
+
+## 🔍 Drill-down Pattern
+
+```tsx
+function MessageTrendChart() {
+  const [granularity, setGranularity] = useState<'daily' | 'hourly' | '15min'>('daily');
+
+  const handlePointClick = (date: Date) => {
+    if (granularity === 'daily') setGranularity('hourly');
+    else if (granularity === 'hourly') setGranularity('15min');
+  };
+
+  return (
+    <ChartCard title="Message Volume"
+      onBack={granularity !== 'daily' ? () => setGranularity('daily') : undefined}>
+      <LineChart data={data} granularity={granularity} onClick={handlePointClick} />
+    </ChartCard>
+  );
+}
+```
+
+---
+
+## ⚠️ Anti-Patterns
+
+### ❌ Truncated Y-axis
+```tsx
+// ❌ Y axis mulai dari 50, memperbesar perbedaan
+const options = { yAxis: { min: 50 } };
+// ✅ Mulai dari 0
+const options = { yAxis: { min: 0 } };
+```
+
+### ❌ Terlalu banyak warna
+```tsx
+// ❌ JANGAN — setiap bar beda warna
+<Bar data={data} fill={['#ff0000', '#00ff00', '#0000ff', ...]} />
+// ✅ Sequential scale
+<Bar data={data} colorScale="sequential" />
+```
+
+### ❌ 3D charts — mendistorsi persepsi
+```tsx
+// ❌ JANGAN
+<PieChart><Pie data={data} style={{ filter: 'drop-shadow(...)' }} /></PieChart>
+// ✅ 2D
+<PieChart><Pie data={data} /></PieChart>
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [Recharts](https://recharts.org/) | React chart library |
+| [Chartability](https://chartability.github.io/) | Accessible charts |
+| [Tufte](https://www.edwardtufte.com/tufte/) | Minimalist chart design |
+
+---
+
+*"Angka adalah ingatan yang terukur — setiap titik data adalah kisah yang menanti."* ❄️🩵
diff --git a/design/patterns/08-moderation-ui.md b/design/patterns/08-moderation-ui.md
new file mode 100644
index 0000000..ec0da02
--- /dev/null
+++ b/design/patterns/08-moderation-ui.md
@@ -0,0 +1,110 @@
+# Moderation UI Patterns — The Watchful Eye
+
+> *"With great power comes great responsibility."*
+> — Adapted for content moderation interfaces.
+
+---
+
+## 🎯 Filosofi UI Moderasi
+
+1. **At-a-glance severity** — Warna & label yang langsung terbaca
+2. **Context-rich** — Setiap keputusan disertai konteks
+3. **Non-destructive by default** — Flag dulu, action kemudian
+4. **Audit trail** — Setiap aksi tercatat
+
+---
+
+## 🏷️ Severity Scale
+
+```css
+.severity--safe     { background: oklch(0.60 0.130 145 / 0.15); color: oklch(0.60 0.130 145); }
+.severity--low      { background: oklch(0.70 0.120 75 / 0.15);  color: oklch(0.70 0.120 75); }
+.severity--medium   { background: oklch(0.65 0.150 50 / 0.15);  color: oklch(0.65 0.150 50); }
+.severity--high     { background: oklch(0.60 0.150 30 / 0.15);  color: oklch(0.60 0.150 30); }
+.severity--critical { background: oklch(0.55 0.165 25 / 0.15);  color: oklch(0.55 0.165 25); }
+```
+
+| Severity | Warna | Ikon | Action |
+|----------|-------|------|--------|
+| Safe | Emerald | ✅ Shield | None |
+| Low | Amber | ⚠️ | Review |
+| Medium | Orange | 🔶 | Alert + review |
+| High | Red-Orange | 🚫 | Notify + action |
+| Critical | Ruby | 🔴 | Immediate |
+
+---
+
+## 📋 Moderation Queue
+
+```tsx
+interface ModerationQueueItem {
+  id: string;
+  message: { preview: string; author: { name: string; }; timestamp: number; channel: string; };
+  analysis: { severity: Severity; categories: string[]; confidence: number; summary: string; };
+  status: 'pending' | 'reviewed' | 'actioned' | 'dismissed';
+}
+```
+
+**Layout per item:**
+```
+┌──────────────────────────────────────────────────────┐
+│ 🔴 CRITICAL  │  [User]: "message preview..."          │
+│ 🏷️ toxicity,  │  in #general · 2m ago                  │
+│    harassment │  [Review] [Dismiss] [Action]           │
+└──────────────────────────────────────────────────────┘
+```
+
+### Filter Bar
+```
+Severity: [All] [Safe] [Low] [Medium] [High] [Critical]
+Channel:  [#general ▼]
+Date:     [Last 24h ▼]
+Search:   [.................. 🔍]
+```
+
+---
+
+## 🎯 Action Confirmation
+
+| Action | Confirm | Duration | Undo |
+|--------|---------|----------|------|
+| Dismiss | No | 2s toast | Yes (5s) |
+| Warn | No | 3s toast | No |
+| Delete | Yes (modal) | 4s toast | No |
+| Ban | Yes (modal + reason) | — | Manual |
+
+---
+
+## 📊 Moderation Metrics
+
+| Metric | Format | Frequency |
+|--------|--------|-----------|
+| Messages analyzed | Number | Real-time |
+| Flag rate | % | Hourly |
+| Response time | ms avg | Real-time |
+| False positive rate | % | Daily |
+| Queue depth | Number | Real-time |
+
+---
+
+## ⚠️ Anti-Patterns
+
+### ❌ Ambiguous severity
+```tsx
+// ❌ Warna tanpa label
+<div className="bg-red-200">...</div>
+// ✅ Color + icon + text
+<SeverityBadge severity="critical" />
+```
+
+### ❌ One-click destructive
+```tsx
+// ❌ Delete tanpa konfirmasi
+<Button onClick={handleDelete}>Delete</Button>
+// ✅ Confirm dialog
+<ConfirmDialog variant="destructive" ... />
+```
+
+---
+
+*"Mata waspada adalah penjaga ingatan — setiap flag adalah catatan sejarah."* ❄️🩵
diff --git a/design/patterns/09-state-machines.md b/design/patterns/09-state-machines.md
new file mode 100644
index 0000000..3927f23
--- /dev/null
+++ b/design/patterns/09-state-machines.md
@@ -0,0 +1,307 @@
+# State Machines — The Flow of Data
+
+> *"All happy families are alike; each unhappy family is unhappy in its own way."*
+> — Tolstoy, adapted for component states.
+
+---
+
+## 🎯 Filosofi State Machine
+
+Setiap komponen data-driven di BETE memiliki **4 state fundamental**:
+
+```
+IDLE → LOADING → SUCCESS
+              ↘ ERROR
+                  ↘ EMPTY (conditional, jika data.length === 0)
+```
+
+State machine memastikan **tidak ada kondisi yang terlewat** — setiap kemungkinan state visual memiliki representasi.
+
+---
+
+## 🎮 The Quad-State Pattern
+
+```tsx
+type DataState<T> =
+  | { status: 'idle' }
+  | { status: 'loading'; progress?: number }
+  | { status: 'success'; data: T; timestamp: number }
+  | { status: 'error'; error: Error; retryCount?: number }
+  | { status: 'empty'; message?: string };
+```
+
+### Generic State Machine Hook
+
+```tsx
+// shared/hooks/useDataState.ts
+function useDataState<T>(
+  fetcher: () => Promise<T>,
+  options?: {
+    onSuccess?: (data: T) => void;
+    onError?: (error: Error) => void;
+    retry?: number;
+    cacheKey?: string;
+  }
+): {
+  state: DataState<T>;
+  execute: () => Promise<void>;
+  reset: () => void;
+  retry: () => Promise<void>;
+  setData: (data: T) => void;
+} {
+  const [state, setState] = useState<DataState<T>>({ status: 'idle' });
+
+  const execute = useCallback(async () => {
+    setState({ status: 'loading' });
+    try {
+      const data = await fetcher();
+      if (Array.isArray(data) && data.length === 0) {
+        setState({ status: 'empty', message: 'No data available' });
+      } else {
+        setState({ status: 'success', data, timestamp: Date.now() });
+        options?.onSuccess?.(data);
+      }
+    } catch (error) {
+      setState({ status: 'error', error: error as Error });
+      options?.onError?.(error as Error);
+    }
+  }, [fetcher]);
+
+  return { state, execute, reset, retry: execute, setData };
+}
+```
+
+### Component Rendering
+
+```tsx
+function DataPanel() {
+  const { state, execute, retry } = useDataState(fetchMessages);
+
+  useEffect(() => { execute(); }, []);
+
+  switch (state.status) {
+    case 'idle':
+    case 'loading':
+      return <LoadingSkeleton />;
+
+    case 'error':
+      return (
+        <ErrorState
+          message={state.error.message}
+          onRetry={retry}
+          retryCount={state.retryCount}
+        />
+      );
+
+    case 'empty':
+      return <EmptyState message={state.message ?? 'Nothing here'} />;
+
+    case 'success':
+      return <DataView data={state.data} />;
+  }
+}
+```
+
+---
+
+## 🖼️ Visual Representations
+
+### Loading State
+
+```tsx
+interface LoadingSkeletonProps {
+  variant?: 'card' | 'list' | 'detail' | 'table' | 'chart';
+  count?: number;   // Jumlah skeleton items
+}
+
+/* Contoh variant 'card' */
+function CardSkeleton() {
+  return (
+    <div className="card animate-shimmer" aria-busy="true" aria-label="Loading...">
+      <Skeleton className="h-4 w-3/4 mb-3" />
+      <Skeleton className="h-3 w-1/2 mb-2" />
+      <Skeleton className="h-3 w-full" />
+    </div>
+  );
+}
+```
+
+### Error State
+
+```tsx
+interface ErrorStateProps {
+  error: Error;
+  onRetry: () => void;
+  retryCount?: number;
+  variant?: 'inline' | 'full-page' | 'toast';
+}
+
+function ErrorState({ error, onRetry, retryCount }: ErrorStateProps) {
+  const isRetryExhausted = (retryCount ?? 0) >= 3;
+
+  return (
+    <div className="flex flex-col items-center gap-4 py-12" role="alert">
+      <div className="rounded-full bg-destructive/10 p-3">
+        <AlertTriangle className="h-6 w-6 text-destructive" />
+      </div>
+      <p className="text-sm font-medium text-foreground">Something went wrong</p>
+      <p className="text-xs text-muted-foreground">{error.message}</p>
+      {!isRetryExhausted ? (
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          Try Again
+        </Button>
+      ) : (
+        <p className="text-xs text-muted-foreground">
+          Still failing after multiple attempts. Please try again later.
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+### Empty State
+
+```tsx
+interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: { label: string; onClick: () => void };
+  variant?: 'mascot' | 'icon' | 'minimal';
+}
+
+const EMPTY_STATES = {
+  messages: { icon: MessageSquare, title: 'No messages yet', description: 'Messages will appear here once they are captured.' },
+  speakers: { icon: Mic, title: 'No active speakers', description: 'Quiet in here...' },
+  recordings: { icon: Radio, title: 'No recordings', description: 'Join a voice channel to start recording.' },
+  analytics: { icon: BarChart3, title: 'Not enough data', description: 'Analytics will populate as data accumulates.' },
+  users: { icon: Users, title: 'No users found', description: 'Try adjusting your filters.' },
+};
+```
+
+---
+
+## ♻️ State Transition Diagram
+
+```
+        ┌──────────┐
+        │   IDLE   │
+        └────┬─────┘
+             │ execute()
+             ↓
+        ┌──────────┐
+        │ LOADING  │◄────── retry()
+        └────┬─────┘
+             │
+     ┌───────┴───────────┐
+     │                   │
+     ↓                   ↓
+┌──────────┐      ┌──────────┐
+│ SUCCESS  │      │  ERROR   │
+│ data: T  │      │ err: E   │
+└────┬─────┘      └────┬─────┘
+     │                  │
+     │ (data.length     │ retry()
+     │  === 0)          │
+     ↓                  │
+┌──────────┐            │
+│  EMPTY   │            │
+│ msg: str │            │
+└──────────┘            │
+     │                  │
+     └──────┬───────────┘
+            │ reset()
+            ↓
+        ┌──────────┐
+        │   IDLE   │
+        └──────────┘
+```
+
+---
+
+## 🔄 Retry Strategy
+
+```typescript
+const RETRY_CONFIG = {
+  maxAttempts: 3,
+  baseDelay: 1000,      // 1s
+  maxDelay: 10000,      // 10s
+  backoff: 'exponential' as const,
+  onRetry: (attempt: number, error: Error) => {
+    logger.warn(`Retry attempt ${attempt}`, { error: error.message });
+  },
+};
+```
+
+### Exponential Backoff
+
+```typescript
+function calculateDelay(attempt: number): number {
+  return Math.min(
+    1000 * Math.pow(2, attempt - 1),  // 1s, 2s, 4s
+    10000  // cap at 10s
+  );
+}
+```
+
+---
+
+## 📦 Component State Map
+
+| Component | Loading | Error | Empty | Success |
+|-----------|---------|-------|-------|---------|
+| MessageFeed | Card skeletons | ErrorState + retry | Mascot "No messages" | Message list |
+| VoiceCards | Card skeletons | ErrorState | "No connected channels" | VoiceCard list |
+| ActiveSpeakers | Dot skeletons | Silent fallback | "No speakers" | Speaker list |
+| Analytics | Skeleton grid | ErrorState | "Not enough data" | Charts |
+| Recordings | List skeletons | ErrorState | "No recordings" | Recording list |
+| UserList | List skeletons | ErrorState + retry | "No users found" | User list |
+| DashboardStats | Stat skeletons | ErrorState | "No data available" | Stat grid |
+
+---
+
+## ⚠️ Anti-Patterns State
+
+### ❌ Missing state handling
+```tsx
+// ❌ JANGAN — hanya handle SUCCESS
+function Panel() {
+  const { data, isLoading } = useQuery(...);
+  if (isLoading) return <Spinner />;
+  return <DataView data={data} />;  // ERROR? EMPTY?
+}
+```
+
+### ❌ Loading state after error
+```tsx
+// ❌ JANGAN — loading infinite loop setelah error
+function Panel() {
+  const { data, isLoading } = useQuery(..., { retry: true });
+  if (isLoading) return <Spinner />;
+  // ERROR: retry=true + error = loading terus
+}
+```
+
+### ❌ Empty state default terlalu generic
+```tsx
+// ❌ JANGAN — tidak helpful
+<div>No data</div>
+
+// ✅ Kontekstual dengan action
+<EmptyState icon={MessageSquare} title="No messages" action={{ label: "Refresh", onClick: refetch }} />
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [State Reducer Pattern](https://kentcdodds.com/blog/state-reducer-pattern) | Advanced state management |
+| [XState](https://stately.ai/docs/xstate) | Visual state machines |
+| [React useReducer](https://react.dev/reference/react/useReducer) | Built-in state management |
+
+---
+
+*"Setiap state adalah babak dalam cerita data — dari sunyi hingga berbicara."* ❄️🩵
diff --git a/design/patterns/10-responsive-system.md b/design/patterns/10-responsive-system.md
new file mode 100644
index 0000000..ad26278
--- /dev/null
+++ b/design/patterns/10-responsive-system.md
@@ -0,0 +1,288 @@
+# Responsive System — Shapeshifting Glass
+
+> *"Content is like water — it should flow into whatever container it's poured into."*
+> — Ethan Marcotte
+
+---
+
+## 🎯 Filosofi Responsif
+
+BETE menggunakan pendekatan **mobile-first** dengan tiga prinsip:
+
+1. **Content parity** — Konten yang sama di semua ukuran, layout yang berbeda
+2. **Touch-optimized** — Target 44×44px minimum di mobile
+3. **Progressive enhancement** — Desktop mendapat fitur tambahan (hover, sidebar, multi-column)
+
+---
+
+## 📐 Breakpoint System
+
+```css
+:root {
+  --bp-sm:  640px;  /* Mobile landscape */
+  --bp-md:  768px;  /* Tablet portrait */
+  --bp-lg:  1024px; /* Tablet landscape / small desktop */
+  --bp-xl:  1280px; /* Desktop */
+  --bp-2xl: 1536px; /* Wide desktop */
+}
+```
+
+### Layout Behavior Matrix
+
+| Viewport | Sidebar | Header | Content Grid | Font Size |
+|----------|---------|--------|-------------|-----------|
+| < 640px | Bottom tab (56px) | Compact | 1 col | sm |
+| 640-768 | Bottom tab | Compact | 1-2 col | sm |
+| 768-1024 | Icon 64px | Standard | 2 col | base |
+| 1024-1280 | Full 256px | Standard | 2-3 col | base |
+| > 1280px | Full 256px | Full | 3-4 col | base+ |
+
+---
+
+## 📱 Mobile Adaptations
+
+### Navigation
+- **< 768px:** Bottom tab bar menggantikan sidebar
+- **Tab icons:** Home, Live, Messages, Settings (maks 5 tabs)
+- **Tab bar height:** 56px (dengan safe area padding untuk notched phones)
+
+### Content
+- **Cards:** Full-width (margin 16px), stacked vertical
+- **Tables:** Horizontal scroll atau card view alternatif
+- **Charts:** Simplified (less data points, larger labels)
+- **Modals:** Full-screen drawer dari bawah (bottom sheet)
+
+### Touch Targets
+```css
+/* Minimum 44×44px untuk semua interactive elements */
+.button, .nav-item, .tab-item {
+  min-height: 44px;
+  min-width: 44px;
+}
+
+/* Forms on mobile */
+.input, .select {
+  height: 48px;  /* Larger tap target */
+  font-size: 16px;  /* Prevent iOS zoom on focus */
+}
+```
+
+---
+
+## 💻 Desktop Adaptations
+
+### Navigation
+- **≥ 1024px:** Full sidebar (256px) dengan label teks
+- **Sidebar states:** Collapsed (icon-only, 64px) ↔ Expanded (256px)
+- **Keyboard shortcuts:** Didokumentasikan di help panel
+
+### Content
+- **Multi-column grids:** 2-4 columns depending on container width
+- **Sticky elements:** Sidebar, header, filter bars
+- **Hover previews:** Tooltips, popovers untuk informasi tambahan
+- **Drag & drop:** Dukungan untuk reorder, upload area
+
+---
+
+## 🧩 Responsive Component Patterns
+
+### Pattern 1: Responsive Card Grid
+
+```css
+.card-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--sp-3);
+}
+
+@media (min-width: 640px) {
+  .card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1280px) {
+  .card-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+```
+
+### Pattern 2: Responsive Sidebar + Content
+
+```tsx
+function DashboardLayout() {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const isMobile = useMediaQuery('(max-width: 767px)');
+
+  return (
+    <div className="page-layout">
+      {/* Mobile: slide-in drawer */}
+      {isMobile && (
+        <MobileTabBar activeTab={activeTab} onTabChange={setActiveTab} />
+      )}
+
+      {/* Desktop: persistent sidebar */}
+      {!isMobile && (
+        <Sidebar collapsed={sidebarCollapsed} onToggle={() => setSidebarCollapsed(!sidebarCollapsed)} />
+      )}
+
+      <main className="main-area">
+        <Header onMenuClick={() => setMobileMenuOpen(true)} />
+        <div className="content-area">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}
+```
+
+### Pattern 3: Responsive Typography (Fluid)
+
+```css
+/* Fluid type scale — sudah didefinisikan di core/02-typography.md */
+--fs-body: clamp(0.94rem, 0.94rem + 0.03vw, 1.00rem);
+--fs-h2:   clamp(1.50rem, 1.50rem + 0.12vw, 1.88rem);
+```
+
+### Pattern 4: Container Queries (for reusable components)
+
+```css
+.card-grid-component {
+  container-type: inline-size;
+  container-name: card-list;
+}
+
+@container card-list (max-width: 400px) {
+  .card-item { grid-template-columns: 1fr; }
+}
+
+@container card-list (min-width: 401px) {
+  .card-item { grid-template-columns: 1fr 1fr; }
+}
+```
+
+---
+
+## 🎯 Responsive Decision Tree
+
+```
+Layout component →
+├── Apakah ini navigasi?
+│   ├── Mobile → Bottom tab bar (56px)
+│   ├── Tablet → Icon sidebar (64px) + hamburger
+│   └── Desktop → Full sidebar (256px)
+│
+├── Apakah ini konten list/grid?
+│   ├── 1 item → Single column
+│   ├── 2-4 items → 2 col (tablet), 3-4 col (desktop)
+│   └── > 4 items → auto-fill grid with minmax
+│
+├── Apakah ini modal/dialog?
+│   ├── Mobile → Bottom sheet (full width, 80% height)
+│   └── Desktop → Centered modal (max-w-lg)
+│
+└── Apakah ini form?
+    ├── Mobile → Stacked, full-width, larger inputs
+    └── Desktop → Multi-column, side labels
+```
+
+---
+
+## 📏 Responsive Spacing Scale
+
+```css
+.content-padding {
+  padding: var(--sp-3);      /* Mobile: 16px */
+}
+
+@media (min-width: 768px) {
+  .content-padding { padding: var(--sp-4); }  /* Tablet: 24px */
+}
+
+@media (min-width: 1024px) {
+  .content-padding { padding: var(--sp-5); }  /* Desktop: 32px */
+}
+```
+
+---
+
+## 🧪 Testing Responsive Design
+
+```typescript
+// Test utility untuk responsive behavior
+const VIEWPORTS = {
+  mobile: { width: 375, height: 667 },
+  tablet: { width: 768, height: 1024 },
+  desktop: { width: 1280, height: 800 },
+  wide: { width: 1920, height: 1080 },
+};
+
+describe('DashboardLayout', () => {
+  it('shows MobileTabBar on mobile', () => {
+    cy.viewport(VIEWPORTS.mobile);
+    cy.get('[data-testid="mobile-tab-bar"]').should('be.visible');
+    cy.get('[data-testid="sidebar"]').should('not.be.visible');
+  });
+
+  it('shows sidebar on desktop', () => {
+    cy.viewport(VIEWPORTS.desktop);
+    cy.get('[data-testid="sidebar"]').should('be.visible');
+    cy.get('[data-testid="mobile-tab-bar"]').should('not.be.visible');
+  });
+});
+```
+
+---
+
+## ⚠️ Anti-Patterns Responsive
+
+### ❌ Hanya media query untuk satu breakpoint
+```css
+/* ❌ JANGAN — hanya mobile dan desktop */
+.panel { padding: 16px; }
+@media (min-width: 1024px) { .panel { padding: 32px; } }
+
+/* ✅ Gunakan fluid atau multiple breakpoints */
+.panel { padding: clamp(16px, 3vw, 32px); }
+```
+
+### ❌ Hidden content on mobile
+```tsx
+// ❌ JANGAN — "out of sight, out of mind" tapi konten hilang
+{isMobile ? null : <ExpensiveChart />}
+
+// ✅ Simplified version untuk mobile
+<Chart variant={isMobile ? 'compact' : 'full'} />
+```
+
+### ❌ Fixed width containers
+```css
+/* ❌ JANGAN — overflow on smaller screens */
+.container { width: 1200px; }
+
+/* ✅ Gunakan max-width + padding */
+.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4); }
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [Every Layout](https://every-layout.dev/) | Reusable layout patterns |
+| [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries) | CSS container queries |
+| [Utopia.fyi](https://utopia.fyi/) | Fluid type & space calculator |
+
+---
+
+*"Layout adalah air yang mengalir — ia mengambil bentuk wadahnya tanpa kehilangan esensi."* ❄️🩵
diff --git a/design/services/11-frontend-ui.md b/design/services/11-frontend-ui.md
new file mode 100644
index 0000000..93272c2
--- /dev/null
+++ b/design/services/11-frontend-ui.md
@@ -0,0 +1,327 @@
+# Frontend UI Guidelines — The Glass Facade
+
+> *"The details are not the details. They make the design."*
+> — Charles Eames
+
+---
+
+## 🎯 Scope
+
+Dokumen ini mengkhususkan implementasi **design system** untuk frontend web BETE (React + Tailwind + Vite). Fokus: konfigurasi Tailwind, CSS architecture, dan integration patterns.
+
+---
+
+## ⚛️ Stack Implementation
+
+| Tool | Version | Purpose |
+|------|---------|---------|
+| React | 19.x | UI library |
+| TypeScript | 5.x | Type safety |
+| Vite | 6.x | Bundler |
+| Tailwind CSS | 4.x | Utility-first CSS |
+| Radix UI | — | Headless primitives |
+| TanStack Query | 5.x | Server state |
+| Zustand | 5.x | Client state |
+| Framer Motion | 11.x | Animations |
+| GSAP | 3.x | Page transitions |
+| Recharts | 2.x | Charts |
+| Three.js | 0.170+ | Particle background |
+
+---
+
+## 🎨 Tailwind Config (Extended)
+
+```js
+// tailwind.config.js
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Outfit', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+      },
+
+      colors: {
+        // Semantic colors — map to CSS variables
+        border:        'oklch(var(--clr-border) / <alpha-value>)',
+        input:         'oklch(var(--clr-border) / <alpha-value>)',
+        ring:          'oklch(var(--clr-primary-400) / <alpha-value>)',
+        background:    'oklch(var(--clr-surface-base) / <alpha-value>)',
+        foreground:    'oklch(var(--clr-text) / <alpha-value>)',
+
+        primary: {
+          DEFAULT:     'oklch(var(--clr-primary) / <alpha-value>)',
+          foreground:  'oklch(var(--clr-text-on-primary) / <alpha-value>)',
+          soft:        'oklch(var(--clr-primary-bg) / <alpha-value>)',
+          50:          'oklch(var(--clr-primary-50) / <alpha-value>)',
+          100:         'oklch(var(--clr-primary-100) / <alpha-value>)',
+          500:         'oklch(var(--clr-primary-500) / <alpha-value>)',
+          600:         'oklch(var(--clr-primary-600) / <alpha-value>)',
+        },
+
+        muted: {
+          DEFAULT:     'oklch(var(--clr-surface-elevated) / <alpha-value>)',
+          foreground:  'oklch(var(--clr-text-secondary) / <alpha-value>)',
+        },
+
+        destructive: {
+          DEFAULT:     'oklch(var(--clr-severity-critical) / <alpha-value>)',
+          foreground:  'white',
+        },
+
+        // Severity colors
+        severity: {
+          safe:     'oklch(var(--clr-severity-safe) / <alpha-value>)',
+          low:      'oklch(var(--clr-severity-low) / <alpha-value>)',
+          medium:   'oklch(var(--clr-severity-medium) / <alpha-value>)',
+          high:     'oklch(var(--clr-severity-high) / <alpha-value>)',
+          critical: 'oklch(var(--clr-severity-critical) / <alpha-value>)',
+        },
+
+        // Glass effects
+        glass: {
+          bg:     'oklch(var(--glass-bg) / <alpha-value>)',
+          border: 'oklch(var(--glass-border) / <alpha-value>)',
+        },
+      },
+
+      borderRadius: {
+        lg:   'var(--rd-lg)',
+        md:   'var(--rd-md)',
+        sm:   'var(--rd-sm)',
+        xl:   'var(--rd-xl)',
+        full: 'var(--rd-full)',
+      },
+
+      spacing: {
+        0.5: 'var(--sp-0-5)',
+        1:   'var(--sp-1)',
+        2:   'var(--sp-2)',
+        3:   'var(--sp-3)',
+        4:   'var(--sp-4)',
+        5:   'var(--sp-5)',
+        6:   'var(--sp-6)',
+        7:   'var(--sp-7)',
+        8:   'var(--sp-8)',
+      },
+
+      zIndex: {
+        header:  'var(--z-header)',
+        sidebar: 'var(--z-sidebar)',
+        overlay: 'var(--z-overlay)',
+        modal:   'var(--z-modal)',
+        toast:   'var(--z-toast)',
+        mascot:  'var(--z-mascot)',
+      },
+
+      animation: {
+        'fade-in':    'fadeIn 0.3s ease-out',
+        'fade-in-up': 'fadeInUp 0.5s ease-out',
+        'shimmer':    'shimmer 1.5s ease-in-out infinite',
+        'bar-pulse':  'bar-pulse 0.4s ease-in-out infinite',
+        'glow-pulse': 'glowPulse 2s ease-in-out infinite',
+        'scale-in':   'scaleIn 0.3s ease-out',
+        'slide-up':   'slideUp 0.35s ease-out',
+        'slide-down': 'slideDown 0.25s ease-out',
+      },
+
+      keyframes: {
+        fadeIn:     { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
+        fadeInUp:   { '0%': { opacity: '0', transform: 'translateY(20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } },
+        shimmer:    { '0%': { backgroundPosition: '200% 0' }, '100%': { backgroundPosition: '-200% 0' } },
+        'bar-pulse': { '0%, 100%': { transform: 'scaleY(0.8)' }, '50%': { transform: 'scaleY(1.2)' } },
+        glowPulse:  { '0%, 100%': { opacity: '0.4' }, '50%': { opacity: '0.8' } },
+        scaleIn:    { '0%': { transform: 'scale(0.95)', opacity: '0' }, '100%': { transform: 'scale(1)', opacity: '1' } },
+        slideUp:    { '0%': { transform: 'translateY(10px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } },
+        slideDown:  { '0%': { transform: 'translateY(-10px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } },
+      },
+
+      backdropBlur: {
+        glass: '16px',
+        strong: '24px',
+        subtle: '8px',
+      },
+    },
+  },
+
+  plugins: [],
+};
+```
+
+---
+
+## 📁 Source Structure (Feature-Sliced)
+
+```
+src/
+├── main.tsx                     # Entry + QueryClient + Providers
+├── styles.css                   # Tailwind + CSS custom properties + keyframes
+├── App.tsx                      # Layout shell + routing
+│
+├── entities/                    # Domain types (pure, no logic)
+│   ├── message/
+│   ├── guild/
+│   ├── voice/
+│   ├── media/
+│   └── ui/
+│
+├── shared/                      # Cross-cutting
+│   ├── api/                     # HTTP client + typed endpoints
+│   ├── ws/                      # WebSocket manager
+│   ├── hooks/                   # Shared hooks (useReducedMotion, etc.)
+│   ├── ui/                      # UI primitives (button, card, badge, etc.)
+│   └── lib/                     # Utils (cn, logger, formatters)
+│
+├── features/                    # Feature modules
+│   ├── live/                    # Voice + media controls
+│   ├── messages/                # Message feed + moderation
+│   ├── admin/                   # Admin panel
+│   ├── settings/                # Settings
+│   └── auth/                    # Login/overlay
+│
+└── widgets/                     # Layout composites
+    ├── DashboardLayout.tsx
+    ├── Header.tsx
+    ├── Sidebar.tsx
+    ├── mascot/
+    └── particles/
+```
+
+---
+
+## 🎭 Glassmorphism Implementation
+
+```css
+/* styles.css — Glass utility classes */
+@layer utilities {
+  .glass {
+    background: oklch(from var(--clr-surface-elevated) l c h / 0.6);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid oklch(from var(--clr-border) l c h / 0.2);
+  }
+
+  .glass-strong {
+    background: oklch(from var(--clr-surface-overlay) l c h / 0.85);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+  }
+
+  .glass-subtle {
+    background: oklch(from var(--clr-surface-base) l c h / 0.5);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  .gradient-text {
+    background: linear-gradient(135deg,
+      oklch(var(--clr-primary-500)),
+      oklch(var(--clr-primary-300))
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}
+```
+
+---
+
+## 🌐 WebSocket Integration
+
+```tsx
+// shared/ws/socket.ts
+class SocketManager {
+  private ws: WebSocket | null = null;
+  private listeners = new Map<string, Set<(data: unknown) => void>>();
+  private reconnectAttempts = 0;
+  private maxReconnectDelay = 30000;
+
+  connect(url: string): void {
+    this.ws = new WebSocket(url);
+    this.ws.onmessage = (event) => {
+      const { type, data } = JSON.parse(event.data);
+      this.listeners.get(type)?.forEach(fn => fn(data));
+    };
+    this.ws.onclose = () => this.scheduleReconnect();
+  }
+
+  on<T>(event: string, callback: (data: T) => void): () => void {
+    if (!this.listeners.has(event)) this.listeners.set(event, new Set());
+    this.listeners.get(event)!.add(callback as (data: unknown) => void);
+    return () => this.listeners.get(event)?.delete(callback as (data: unknown) => void);
+  }
+
+  private scheduleReconnect(): void {
+    const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), this.maxReconnectDelay);
+    setTimeout(() => { this.reconnectAttempts++; this.connect(this.ws!.url); }, delay);
+  }
+}
+
+export const socket = new SocketManager();
+```
+
+---
+
+## 🎯 Key Integration Rules
+
+| Concern | Implementation | Location |
+|---------|---------------|----------|
+| CSS Variables | Defined in `styles.css` on `:root` | Root stylesheet |
+| Tailwind Colors | Map to CSS variables with `<alpha-value>` | tailwind.config.js |
+| Component Library | shadcn/ui patterns with custom variants | shared/ui/ |
+| Server State | TanStack Query in feature hooks | features/*/hooks/ |
+| Client State | Zustand stores for UI state | shared/stores/ |
+| WebSocket | Singleton SocketManager | shared/ws/socket.ts |
+| Animations | Framer Motion for component, GSAP for page | In components |
+| Particles | Three.js via @react-three/fiber | widgets/particles/ |
+
+---
+
+## ⚠️ Frontend Anti-Patterns
+
+### ❌ Server state di state lokal
+```tsx
+// ❌ JANGAN — API data disimpan di useState
+const [messages, setMessages] = useState([]);
+useEffect(() => { fetchMessages().then(setMessages); }, []);
+
+// ✅ Gunakan TanStack Query
+const { data: messages } = useQuery({ queryKey: ['messages'], queryFn: fetchMessages });
+```
+
+### ❌ Inline styles untuk dynamic values
+```tsx
+// ❌ JANGAN — tidak theme-aware, tidak bisa dark mode
+<div style={{ backgroundColor: isActive ? '#3b82f6' : '#6b7280' }} />
+
+// ✅ CSS class dengan state
+<div className={isActive ? 'bg-primary' : 'bg-muted'} />
+```
+
+### ❌ Mengimpor langsung dari library tanpa wrapper
+```tsx
+// ❌ JANGAN — susah diganti library nanti
+import { motion } from 'framer-motion';
+
+// ✅ Wrapper pattern
+import { AnimatedDiv } from '@/shared/ui';
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [Tailwind CSS Docs](https://tailwindcss.com/docs) | Utility-first CSS |
+| [shadcn/ui](https://ui.shadcn.com/) | Component primitives |
+| [TanStack Query](https://tanstack.com/query) | Server state |
+| [Zustand](https://github.com/pmndrs/zustand) | Client state |
+
+---
+
+*"Fasad kaca yang menari — di balik setiap piksel ada cerita."* ❄️🩵
diff --git a/design/services/12-backend-api-guidelines.md b/design/services/12-backend-api-guidelines.md
new file mode 100644
index 0000000..12399d3
--- /dev/null
+++ b/design/services/12-backend-api-guidelines.md
@@ -0,0 +1,271 @@
+# Backend API Guidelines — The Nerve Center
+
+> *"APIs are contracts. Design them with the same care as legal documents."*
+> — Unknown
+
+---
+
+## 🎯 Filosofi API
+
+Backend API BETE adalah **fasilitator antara data dan tampilan**:
+1. **RESTful by design** — Sumber daya, bukan aksi
+2. **Type-safe** — Zod schemas di setiap endpoint
+3. **Consistent pagination** — Tidak ada kejutan format
+4. **Error as structure** — Setiap error punya kode dan resolusi
+
+---
+
+## 📐 API Design Principles
+
+### URL Structure
+
+```
+GET    /api/v1/messages          # List messages
+GET    /api/v1/messages/:id      # Single message
+GET    /api/v1/channels          # List channels
+GET    /api/v1/analytics/overview # Analytics
+GET    /api/v1/voice/connections  # Voice connections
+POST   /api/v1/voice/connect     # Connect to voice
+POST   /api/v1/voice/disconnect  # Disconnect
+```
+
+### Response Envelope
+
+```typescript
+// Success
+{
+  "success": true,
+  "data": T,
+  "meta"?: {
+    "page": 1,
+    "limit": 50,
+    "total": 1234,
+    "hasMore": true
+  }
+}
+
+// Error
+{
+  "success": false,
+  "error": {
+    "code": "VALIDATION_ERROR",
+    "message": "Invalid channelId format",
+    "details": {
+      "field": "channelId",
+      "constraint": "numeric_string"
+    },
+    "requestId": "req_abc123"
+  }
+}
+```
+
+### Pagination
+
+```typescript
+interface PaginationParams {
+  page?: number;     // Default: 1
+  limit?: number;    // Default: 50, Max: 200
+  cursor?: string;   // For cursor-based pagination
+}
+
+interface PaginationMeta {
+  page: number;
+  limit: number;
+  total: number;
+  totalPages: number;
+  hasMore: boolean;
+}
+```
+
+### Filtering
+
+```typescript
+interface FilterParams {
+  search?: string;
+  channelId?: string;
+  userId?: string;
+  severity?: 'safe' | 'low' | 'medium' | 'high' | 'critical';
+  dateFrom?: string;  // ISO 8601
+  dateTo?: string;    // ISO 8601
+  sortBy?: string;    // Field name
+  sortOrder?: 'asc' | 'desc';
+}
+```
+
+---
+
+## 🏗️ Module Structure (Backend)
+
+```
+services/backend/src/modules/
+├── messages/
+│   ├── messages.schema.ts       # Zod schemas
+│   ├── messages.repository.ts   # Database queries
+│   ├── messages.service.ts      # Business logic
+│   ├── messages.controller.ts   # Request handlers
+│   └── routes/
+│       └── index.ts             # Express router
+├── analytics/
+├── voice/
+├── media/
+└── health/
+```
+
+### Layer Rules
+
+```
+Controller (parse + validate) → Service (business logic) → Repository (DB queries)
+                                  ↕
+                            Shared Infrastructure
+                         (config, logger, errors)
+```
+
+---
+
+## ⚡ WebSocket Events
+
+### Event Format
+
+```typescript
+interface WsEvent<T = unknown> {
+  type: string;           // e.g., "message:created"
+  data: T;
+  timestamp: number;
+  requestId?: string;
+}
+
+// Server → Client events
+{
+  "type": "message:created",
+  "data": {
+    "id": "msg_123",
+    "content": "...",
+    "author": { "id": "user_1", "name": "User" }
+  },
+  "timestamp": 1750000000000
+}
+
+// Client → Server events
+{
+  "type": "voice:connect",
+  "data": {
+    "guildId": "123456789",
+    "channelId": "987654321"
+  }
+}
+```
+
+### Event Catalog
+
+| Type | Direction | Description |
+|------|-----------|-------------|
+| `message:created` | Server → Client | New message captured |
+| `message:updated` | Server → Client | Message edited |
+| `message:deleted` | Server → Client | Message removed |
+| `message:analyzed` | Server → Client | AI analysis complete |
+| `voice:state` | Server → Client | Voice connection state |
+| `voice:speaker` | Server → Client | Speaker activity |
+| `attachment:uploaded` | Server → Client | Attachment uploaded |
+| `analytics:update` | Server → Client | Analytics data refresh |
+
+---
+
+## 🔒 Authentication & Authorization
+
+```typescript
+// Admin auth via header
+Authorization: Bearer <admin-password-hash>
+
+// Rate limiting
+RateLimit: 100/minute per IP
+Retry-After: 60
+```
+
+### Error Codes
+
+| Code | HTTP | Description |
+|------|------|-------------|
+| `VALIDATION_ERROR` | 400 | Invalid input |
+| `UNAUTHORIZED` | 401 | Invalid/missing auth |
+| `FORBIDDEN` | 403 | Insufficient permissions |
+| `NOT_FOUND` | 404 | Resource not found |
+| `RATE_LIMITED` | 429 | Too many requests |
+| `INTERNAL_ERROR` | 500 | Unexpected error |
+| `SERVICE_UNAVAILABLE` | 503 | Downstream failure |
+
+---
+
+## 🧪 Testing Strategy
+
+```typescript
+describe('GET /api/v1/messages', () => {
+  it('returns paginated messages', async () => {
+    const res = await request(app).get('/api/v1/messages?page=1&limit=10');
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+    expect(res.body.meta.hasMore).toBeDefined();
+  });
+
+  it('rejects invalid severity filter', async () => {
+    const res = await request(app).get('/api/v1/messages?severity=invalid');
+    expect(res.status).toBe(400);
+    expect(res.body.error.code).toBe('VALIDATION_ERROR');
+  });
+});
+```
+
+---
+
+## ⚠️ API Anti-Patterns
+
+### ❌ Nested resources terlalu dalam
+```
+// ❌ JANGAN
+GET /api/v1/guilds/123/channels/456/messages/789
+
+// ✅ Flat dengan query params
+GET /api/v1/messages?channelId=456
+```
+
+### ❌ Inconsistent error format
+```typescript
+// ❌ JANGAN — kadang string, kadang object
+if (err) return res.status(400).send('Bad request');
+if (err) return res.status(400).json({ message: 'Bad request' });
+
+// ✅ Consistent envelope
+if (err) return res.status(400).json({
+  success: false,
+  error: { code: 'VALIDATION_ERROR', message: 'Bad request' }
+});
+```
+
+### ❌ No type safety
+```typescript
+// ❌ JANGAN — any, tidak ada validasi
+app.get('/api/messages', async (req, res) => {
+  const messages = await db.query('SELECT * FROM messages');
+  res.json(messages);
+});
+
+// ✅ Zod schema + typed handler
+app.get('/api/v1/messages', asyncHandler(async (req, res) => {
+  const query = messageQuerySchema.parse(req.query);
+  const messages = await messagesService.list(query);
+  res.json({ success: true, data: messages });
+}));
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [JSON:API](https://jsonapi.org/) | Response format spec |
+| [Express.js](https://expressjs.com/) | Server framework |
+| [Zod](https://zod.dev/) | Schema validation |
+
+---
+
+*"API adalah jembatan ingatan — setiap request adalah percakapan."* ❄️🩵
diff --git a/design/services/13-gateway-event-design.md b/design/services/13-gateway-event-design.md
new file mode 100644
index 0000000..7173753
--- /dev/null
+++ b/design/services/13-gateway-event-design.md
@@ -0,0 +1,310 @@
+# Gateway Event Design — The Pulse of Discord
+
+> *"Events are the heartbeat of a distributed system."*
+> — Martin Fowler
+
+---
+
+## 🎯 Filosofi Gateway Events
+
+Discord Gateway adalah **jantung event-driven** BETE:
+
+1. **Single source of truth** — Events adalah satu-satunya cara data bergerak antar service
+2. **At-least-once delivery** — Event bisa terkirim lebih dari sekali (idempotent consumers)
+3. **Schema evolution** — Events punya versioning untuk backward compatibility
+4. **Observable** — Setiap event tercatat untuk debugging dan audit
+
+---
+
+## 📦 Event Schema
+
+### Envelope
+
+```typescript
+interface GatewayEvent<T = unknown> {
+  /** Event type identifier — lowercase, colon-separated */
+  type: string;
+
+  /** Event payload */
+  data: T;
+
+  /** ISO 8601 timestamp of when the event was created */
+  timestamp: string;
+
+  /** Unique event ID for deduplication */
+  eventId: string;
+
+  /** Source service name */
+  source: 'discord-gateway';
+
+  /** Event schema version */
+  version: number;
+
+  /** Optional correlation ID for tracing request flows */
+  correlationId?: string;
+}
+```
+
+### Event Size Limits
+
+| Limit | Value | Notes |
+|-------|-------|-------|
+| Max payload size | 256KB | Larger payloads → reference via URL |
+| Max nesting depth | 5 levels | Prevent billion laughs attack |
+| String max length | 100KB | Truncate with `... (truncated)` suffix |
+
+---
+
+## 📋 Event Catalog
+
+### Message Events
+
+```typescript
+// discord:message:created
+interface MessageCreatedEvent {
+  id: string;
+  channelId: string;
+  guildId: string;
+  author: {
+    id: string;
+    name: string;
+    discriminator: string;
+    avatar: string | null;
+    isBot: boolean;
+  };
+  content: string;
+  timestamp: string;    // ISO 8601
+  editedTimestamp: string | null;
+  attachments: AttachmentInfo[];
+  replyTo?: string;     // Parent message ID
+}
+
+// discord:message:updated
+interface MessageUpdatedEvent {
+  id: string;
+  channelId: string;
+  content: string;
+  editedTimestamp: string;
+}
+
+// discord:message:deleted
+interface MessageDeletedEvent {
+  id: string;
+  channelId: string;
+  guildId: string;
+}
+```
+
+### Analysis Events
+
+```typescript
+// discord:message:analyzed
+interface MessageAnalyzedEvent {
+  messageId: string;
+  status: 'pending' | 'complete' | 'error';
+  severity: 'safe' | 'low' | 'medium' | 'high' | 'critical';
+  categories: string[];
+  confidence: number;           // 0–1
+  summary: string;
+  analyzedAt: string;
+  processingTimeMs: number;
+}
+```
+
+### Voice Events
+
+```typescript
+// discord:voice:started
+interface VoiceStartedEvent {
+  guildId: string;
+  channelId: string;
+  channelName: string;
+  startedAt: string;
+  participants: Array<{
+    userId: string;
+    userName: string;
+  }>;
+}
+
+// discord:voice:stopped
+interface VoiceStoppedEvent {
+  guildId: string;
+  channelId: string;
+  duration: number;   // seconds
+  segmentsCount: number;
+}
+
+// discord:voice:uploaded
+interface VoiceUploadedEvent {
+  segmentId: string;
+  guildId: string;
+  channelId: string;
+  userId: string;
+  userName: string;
+  duration: number;
+  fileUrl: string;
+  fileSize: number;
+  timestamp: string;
+}
+```
+
+### Attachment Events
+
+```typescript
+// discord:attachment:created
+interface AttachmentCreatedEvent {
+  id: string;
+  messageId: string;
+  channelId: string;
+  url: string;
+  filename: string;
+  contentType: string;
+  size: number;
+  width?: number;
+  height?: number;
+}
+
+// discord:attachment:uploaded
+interface AttachmentUploadedEvent {
+  id: string;
+  messageId: string;
+  storageUrl: string;
+  thumbnailUrl?: string;
+  fileSize: number;
+  processingTimeMs: number;
+}
+```
+
+---
+
+## 🔄 Event Lifecycle
+
+```
+┌──────────┐
+│ Discord  │  (messageCreate, voiceStateUpdate, etc.)
+└────┬─────┘
+     │
+     ↓
+┌──────────────┐
+│ Discord.js   │  (client events)
+└────┬─────────┘
+     │
+     ↓
+┌─────────────────────────────┐
+│ Message Capture Controller  │  (messageCapture.ts)
+│  - Parse event             │
+│  - Store in database       │
+│  - Publish to Redis        │
+└────┬───────────────────────┘
+     │
+     ↓
+┌─────────────────────┐
+│ Redis Pub/Sub       │  (channel: discord:message:created)
+└────┬────────────────┘
+     │
+     ├──────────────────────────────┐
+     ↓                              ↓
+┌──────────────────┐    ┌──────────────────┐
+│ Backend Service  │    │ AI Moderation    │
+│ - Index message  │    │ - Analyze text   │
+│ - Store in DB    │    │ - Update status  │
+│ - Broadcast WS   │    │ - Publish result │
+└──────────────────┘    └──────────────────┘
+```
+
+---
+
+## 🧪 Event Testing
+
+```typescript
+// Helper untuk generate test events
+function createTestEvent<T>(type: string, data: T): GatewayEvent<T> {
+  return {
+    type,
+    data,
+    timestamp: new Date().toISOString(),
+    eventId: crypto.randomUUID(),
+    source: 'discord-gateway',
+    version: 1,
+  };
+}
+
+describe('MessageCreatedEvent', () => {
+  it('is properly formatted', () => {
+    const event = createTestEvent('discord:message:created', {
+      id: 'msg_1',
+      channelId: 'ch_1',
+      guildId: 'guild_1',
+      author: { id: 'user_1', name: 'Test', discriminator: '0000', avatar: null, isBot: false },
+      content: 'Hello world',
+      timestamp: new Date().toISOString(),
+      editedTimestamp: null,
+      attachments: [],
+    });
+
+    expect(event.type).toBe('discord:message:created');
+    expect(event.data.content).toBe('Hello world');
+    expect(event.source).toBe('discord-gateway');
+    expect(event.version).toBe(1);
+  });
+});
+```
+
+---
+
+## 📊 Event Performance Metrics
+
+| Metric | Target | Alert |
+|--------|--------|-------|
+| Processing latency | <50ms p99 | >200ms |
+| Event throughput | >1000/s | <100/s (unusual) |
+| Redis publish latency | <5ms | >20ms |
+| Event loss rate | 0% | >0.01% |
+| Queue depth | <100 | >1000 |
+
+---
+
+## ⚠️ Anti-Patterns Events
+
+### ❌ Processing-heavy event handlers
+```typescript
+// ❌ JANGAN — blocking event loop
+eventBus.on('message:created', async (event) => {
+  const result = await expensiveAnalysis(event.data.content);
+  await db.save(result);
+  // Event handler for 100 msg/s = bottleneck
+});
+
+// ✅ Queue heavy work
+eventBus.on('message:created', async (event) => {
+  await analysisQueue.add(event);  // Worker processes async
+});
+```
+
+### ❌ Missing idempotency
+```typescript
+// ❌ JANGAN — duplicate events create duplicate records
+async function handleMessageCreated(event) {
+  await db.insert({ id: event.data.id, content: event.data.content });
+  // If event arrives twice → duplicate key error
+}
+
+// ✅ Idempotent: UPSERT
+async function handleMessageCreated(event) {
+  await db.upsert({ id: event.data.id }, { content: event.data.content });
+}
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [Redis Pub/Sub](https://redis.io/docs/manual/pubsub/) | Event backbone |
+| [CloudEvents](https://cloudevents.io/) | Event schema standard |
+| [Discord Gateway](https://discord.com/developers/docs/topics/gateway) | Discord events |
+
+---
+
+*"Setiap event adalah denyut nadi — tanda bahwa sistem masih hidup dan berbicara."* ❄️🩵
diff --git a/design/system/14-accessibility.md b/design/system/14-accessibility.md
new file mode 100644
index 0000000..6e92732
--- /dev/null
+++ b/design/system/14-accessibility.md
@@ -0,0 +1,334 @@
+# Accessibility — Design for Everyone
+
+> *"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."*
+> — Tim Berners-Lee
+
+---
+
+## 🎯 Filosofi Aksesibilitas
+
+BETE dirancang untuk **inklusif sejak awal**, bukan retrofit:
+
+1. **Semantic HTML** — Struktur sebelum style
+2. **Color-independent** — Informasi tidak hanya disampaikan lewat warna
+3. **Keyboard-first** — Semua fitur bisa diakses tanpa mouse
+4. **Reduced motion** — Animasi opsional, bukan wajib
+
+---
+
+## 🏆 Target Compliance
+
+| Level | Target | Verification |
+|-------|--------|--------------|
+| WCAG 2.1 AA | ✅ Mandatory | Automated + manual |
+| WCAG 2.1 AAA | ⭐ Recommended | Manual audit |
+| Section 508 | ✅ Mandatory | Automated |
+| EN 301 549 | ✅ Mandatory | EU compliance |
+
+---
+
+## 🎨 Color Accessibility
+
+### Contrast Ratios Minimum
+
+| Elemen | Teks Normal | Teks Large (≥18px / ≥14px bold) |
+|--------|-------------|----------------------------------|
+| Body text | 4.5:1 (AA) | 3:1 (AA) |
+| UI text (label, badge) | 4.5:1 (AA) | 3:1 (AA) |
+| Placeholder | 3:1 (AA large) | — |
+| Disabled | 3:1 | 3:1 |
+
+### Color Blindness
+
+- Jangan gunakan **merah-hijau** sebagai satu-satunya pembeda
+- Tambahkan **ikon, pola, atau label teks** sebagai secondary encoding
+- Gunakan palette color-blind safe (lihat `01-color-system.md`)
+
+```typescript
+// Tool: verifikasi kontras otomatis di tests
+function checkContrast(foreground: string, background: string): boolean {
+  const fg = parseOklch(foreground);
+  const bg = parseOklch(background);
+  return getContrastRatio(fg, bg) >= 4.5;
+}
+```
+
+---
+
+## ⌨️ Keyboard Navigation
+
+### Focus Order
+
+```html
+<!-- ✅ Semantic order = visual order -->
+<nav>     <!-- Tab 1 -->
+<main>    <!-- Tab 2 -->
+  <h1>    <!-- Tab 3 -->
+  <p>     <!-- Tab 4 -->
+  <button><!-- Tab 5 -->
+</main>
+<footer>  <!-- Tab 6 -->
+```
+
+### Focus Indicators
+
+```css
+/* Custom focus ring — lebih visible dari browser default */
+:focus-visible {
+  outline: 2px solid var(--clr-primary-400);
+  outline-offset: 2px;
+  border-radius: var(--rd-sm);
+}
+
+/* ⚠️ NEVER do this */
+:focus { outline: none; }  /* Membuat keyboard users buta */
+```
+
+### Keyboard Shortcuts
+
+```
+Tab / Shift+Tab   — Navigate forward/backward
+Enter / Space     — Activate element
+Escape            — Close modal/dropdown/menu
+Arrow keys        — Navigate list, tabs, select
+Ctrl+K            — Command palette
+```
+
+### Skip Navigation
+
+```html
+<!-- First focusable element on page -->
+<a href="#main-content" class="skip-link">
+  Skip to main content
+</a>
+```
+
+```css
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 8px;
+  padding: 8px 16px;
+  background: var(--clr-primary);
+  color: var(--clr-text-on-primary);
+  z-index: 9999;
+}
+
+.skip-link:focus {
+  top: 8px;
+}
+```
+
+---
+
+## 🏗️ Semantic HTML Structure
+
+```html
+<!-- Dashboard page template -->
+<header role="banner">
+  <nav role="navigation" aria-label="Main navigation">
+    <ul>
+      <li><a href="/live" aria-current="page">Live</a></li>
+      <li><a href="/messages">Messages</a></li>
+      <li><a href="/settings">Settings</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main id="main-content" role="main">
+  <h1>Live Dashboard</h1>
+
+  <section aria-labelledby="voice-status">
+    <h2 id="voice-status">Voice Connections</h2>
+    <!-- voice content -->
+  </section>
+
+  <section aria-labelledby="active-speakers">
+    <h2 id="active-speakers">Active Speakers</h2>
+    <ul role="list" aria-label="Currently speaking users">
+      <li role="listitem">User 1</li>
+      <li role="listitem">User 2</li>
+    </ul>
+  </section>
+</main>
+```
+
+---
+
+## ♿ ARIA Patterns
+
+### Dynamic Content (Live Regions)
+
+```html
+<!-- Toast notifications — live region -->
+<div aria-live="polite" aria-atomic="true" class="toast-container">
+  <!-- Toasts announced by screen reader -->
+</div>
+
+<!-- Loading state -->
+<div role="status" aria-live="polite">
+  <span class="sr-only">Loading messages...</span>
+  <div class="skeleton" aria-hidden="true"></div>
+</div>
+
+<!-- Error state -->
+<div role="alert" aria-live="assertive">
+  <p>Failed to load messages. Please try again.</p>
+</div>
+```
+
+### Modals
+
+```html
+<div
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="modal-title"
+  aria-describedby="modal-desc"
+>
+  <h2 id="modal-title">Confirm Delete</h2>
+  <p id="modal-desc">This action cannot be undone.</p>
+  <button onClick={closeModal}>Cancel</button>
+  <button onClick={confirmDelete}>Delete</button>
+</div>
+```
+
+### Tabs
+
+```html
+<div role="tablist" aria-label="Dashboard tabs">
+  <button role="tab" aria-selected="true" aria-controls="panel-live" id="tab-live">
+    Live
+  </button>
+  <button role="tab" aria-selected="false" aria-controls="panel-messages" id="tab-messages">
+    Messages
+  </button>
+</div>
+
+<div role="tabpanel" id="panel-live" aria-labelledby="tab-live">
+  <!-- Live content -->
+</div>
+```
+
+---
+
+## 🔇 Reduced Motion
+
+```css
+/* Global override */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* GSAP hook — programmatic check */
+function prefersReducedMotion(): boolean {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+```
+
+---
+
+## 🖼️ Images & Icons
+
+```tsx
+// Icons — always with aria-hidden or label
+<MicIcon aria-hidden="true" />                                // Decorative
+<span role="img" aria-label="Voice active">🎤</span>          // Emoji
+<Icon icon="mic" aria-label="Microphone" />                   // Informative
+
+// Images — always with alt text
+<img src={user.avatar} alt={`${user.name}'s avatar`} />
+<img src={decorativeBg} alt="" role="presentation" />         // Decorative
+```
+
+---
+
+## 🧪 Testing Accessibility
+
+```typescript
+// Automated tests
+import { axe } from 'jest-axe';
+
+describe('MessageCard', () => {
+  it('has no accessibility violations', async () => {
+    const { container } = render(<MessageCard message={mockMessage} />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+
+// Manual checklist
+const a11yChecklist = [
+  'Keyboard: all interactive elements reachable',
+  'Focus order matches visual order',
+  'Screen reader: all content announced',
+  'Contrast: 4.5:1 minimum for body text',
+  'Labels: all form elements have labels',
+  'Alt text: all images have meaningful alt text',
+  'Reduced motion: animations respect media query',
+  'Color: information not conveyed by color alone',
+];
+```
+
+---
+
+## 🧰 Tools & Resources
+
+| Tool | Purpose | Integration |
+|------|---------|-------------|
+| axe-core | Automated audit | CI pipeline |
+| Lighthouse | Performance + a11y | CI pipeline |
+| NVDA / VoiceOver | Screen reader | Manual testing |
+| Contrast Checker | Color verification | Design phase |
+| Tab Tester | Keyboard flow | Manual testing |
+
+---
+
+## ⚠️ A11y Anti-Patterns
+
+### ❌ Color-only indicators
+```tsx
+// ❌ JANGAN — buta warna tidak bisa membedakan
+<Badge className={isBad ? 'bg-red-500' : 'bg-green-500'} />
+
+// ✅ Color + icon + text
+<Badge variant={isBad ? 'destructive' : 'success'} icon={isBad ? <X /> : <Check />} />
+```
+
+### ❌ Missing focus indicator
+```css
+/* ❌ JANGAN — menghilangkan focus ring */
+*:focus { outline: none; }
+
+/* ✅ Custom focus ring yang visible */
+*:focus-visible { outline: 2px solid var(--clr-primary-400); outline-offset: 2px; }
+```
+
+### ❌ Non-semantic clickable
+```tsx
+// ❌ JANGAN — div clickable tanpa role
+<div onClick={handleClick}>Click me</div>
+
+// ✅ Gunakan button
+<button onClick={handleClick}>Click me</button>
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [WCAG 2.1](https://www.w3.org/TR/WCAG21/) | Accessibility standard |
+| [A11y Project](https://www.a11yproject.com/) | Accessibility patterns |
+| [Inclusive Components](https://inclusive-components.design/) | Accessible component design |
+| [axe DevTools](https://www.deque.com/axe/) | Automated testing |
+
+---
+
+*"Desain yang inklusif adalah ingatan yang tak membeda-bedakan — setiap orang berhak atas pengalaman yang utuh."* ❄️🩵
diff --git a/design/system/15-theme-architecture.md b/design/system/15-theme-architecture.md
new file mode 100644
index 0000000..3650aca
--- /dev/null
+++ b/design/system/15-theme-architecture.md
@@ -0,0 +1,282 @@
+# Theme Architecture — The Chameleon Engine
+
+> *"The only constant in design is change — a theme system embraces it."*
+> — Unknown
+
+---
+
+## 🎯 Filosofi Theme
+
+Sistem theme BETE dibangun di atas **CSS Custom Properties**:
+1. **Separation of value from token** — Nilai warna tidak pernah dirujuk langsung
+2. **Single source of truth** — Satu set CSS variables, dua tema (dark/light)
+3. **Runtime switching** — Tema bisa diganti tanpa reload
+4. **Component-agnostic** — Komponen tidak tahu tema apa yang aktif
+
+---
+
+## 🧬 Theme Architecture
+
+```
+CSS Custom Properties (oklch values)
+        │
+        ▼
+┌─────────────────────────────────────┐
+│         :root / [data-theme]        │  ← Tema didefinisikan di level root
+│  --clr-surface-base: oklch(...)     │
+│  --clr-primary: oklch(...)          │
+│  --clr-text: oklch(...)             │
+└──────────────┬──────────────────────┘
+               │
+               ▼
+┌─────────────────────────────────────┐
+│     Tailwind Config Mapping         │  ← Map CSS vars ke Tailwind utilities
+│  colors: {                          │
+│    background: "oklch(var(--...))"  │
+│  }                                  │
+└──────────────┬──────────────────────┘
+               │
+               ▼
+┌─────────────────────────────────────┐
+│        Component Styles             │  ← Komponen pakai Tailwind/CSS vars
+│  <div className="bg-card" />        │
+│  .card { background: var(--clr..) } │
+└─────────────────────────────────────┘
+```
+
+---
+
+## 🌗 Theme Definitions
+
+### Dark Theme (Default)
+
+```css
+[data-theme="dark"] {
+  /* Surfaces */
+  --clr-surface-base:     oklch(0.11 0.010 286);
+  --clr-surface-elevated: oklch(0.14 0.015 286);
+  --clr-surface-overlay:  oklch(0.17 0.020 286);
+  --clr-surface-sunken:   oklch(0.08 0.005 286);
+  --clr-border:           oklch(0.22 0.020 286);
+
+  /* Text */
+  --clr-text:             oklch(0.95 0.005 286);
+  --clr-text-secondary:   oklch(0.70 0.015 286);
+  --clr-text-tertiary:    oklch(0.50 0.020 286);
+  --clr-text-inverse:     oklch(0.11 0.010 286);
+
+  /* Brand - brighter in dark */
+  --clr-primary:          oklch(0.62 0.150 255);
+  --clr-primary-bg:       oklch(0.25 0.060 255 / 0.20);
+  --clr-primary-400:      oklch(0.62 0.150 255);
+  --clr-primary-500:      oklch(0.55 0.175 255);
+  --clr-primary-600:      oklch(0.47 0.160 255);
+
+  /* Interactive */
+  --clr-interactive-hover:   oklch(0.20 0.025 286);
+  --clr-interactive-active:  oklch(0.24 0.030 286);
+  --clr-interactive-selected: oklch(0.25 0.060 255 / 0.15);
+
+  /* Shadows */
+  --sh-card:    0 2px 8px rgba(0, 0, 0, 0.3);
+  --sh-hover:   0 4px 16px rgba(0, 0, 0, 0.4);
+  --sh-elevated: 0 8px 32px rgba(0, 0, 0, 0.5);
+  --sh-modal:   0 16px 48px rgba(0, 0, 0, 0.6);
+
+  /* Glass */
+  --glass-bg:     oklch(0.15 0.015 286 / 0.60);
+  --glass-border: oklch(0.25 0.030 286 / 0.20);
+}
+```
+
+### Light Theme
+
+```css
+[data-theme="light"] {
+  /* Surfaces */
+  --clr-surface-base:     oklch(0.97 0.002 286);
+  --clr-surface-elevated: oklch(1.00 0.000 286);
+  --clr-surface-overlay:  oklch(0.95 0.003 286);
+  --clr-surface-sunken:   oklch(0.92 0.004 286);
+  --clr-border:           oklch(0.87 0.005 286);
+
+  /* Text */
+  --clr-text:             oklch(0.11 0.010 286);
+  --clr-text-secondary:   oklch(0.50 0.020 286);
+  --clr-text-tertiary:    oklch(0.70 0.025 286);
+  --clr-text-inverse:     oklch(0.97 0.005 286);
+
+  /* Brand - standard in light */
+  --clr-primary:          oklch(0.55 0.175 255);
+  --clr-primary-bg:       oklch(0.90 0.060 255 / 0.25);
+  --clr-primary-400:      oklch(0.55 0.175 255);
+  --clr-primary-500:      oklch(0.47 0.160 255);
+  --clr-primary-600:      oklch(0.40 0.140 255);
+
+  /* Interactive */
+  --clr-interactive-hover:   oklch(0.90 0.005 286);
+  --clr-interactive-active:  oklch(0.85 0.008 286);
+  --clr-interactive-selected: oklch(0.90 0.060 255 / 0.3);
+
+  /* Shadows — lighter in light theme */
+  --sh-card:    0 2px 8px rgba(0, 0, 0, 0.08);
+  --sh-hover:   0 4px 16px rgba(0, 0, 0, 0.12);
+  --sh-elevated: 0 8px 24px rgba(0, 0, 0, 0.08);
+  --sh-modal:   0 16px 48px rgba(0, 0, 0, 0.12);
+
+  /* Glass — lighter opacity */
+  --glass-bg:     oklch(0.97 0.002 286 / 0.50);
+  --glass-border: oklch(0.87 0.005 286 / 0.30);
+}
+```
+
+---
+
+## 🔄 Theme Switching
+
+### React Implementation
+
+```tsx
+// hooks/useTheme.ts
+type Theme = 'light' | 'dark';
+
+function useTheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    // 1. Check localStorage
+    const stored = localStorage.getItem('theme');
+    if (stored === 'light' || stored === 'dark') return stored;
+
+    // 2. Check system preference
+    return window.matchMedia('(prefers-color-scheme: light)').matches
+      ? 'light'
+      : 'dark';
+  });
+
+  useEffect(() => {
+    // Apply theme to document
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+
+    // Toggle Tailwind dark class
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+  }, [theme]);
+
+  const toggle = useCallback(() => {
+    setTheme(prev => prev === 'dark' ? 'light' : 'dark');
+  }, []);
+
+  return { theme, setTheme, toggle } as const;
+}
+```
+
+### Scream-Free Architecture
+
+Theme switching **tidak perlu re-render seluruh komponen**. Karena CSS variables diubah di `:root`, browser secara otomatis me-repain semua elemen yang menggunakan var tersebut.
+
+---
+
+## 🎯 Token Mapping Rules
+
+| Design Token | CSS Variable | Tailwind Mapping |
+|-------------|-------------|------------------|
+| Page background | `--clr-surface-base` | `bg-background` |
+| Card surface | `--clr-surface-elevated` | `bg-card` |
+| Body text | `--clr-text` | `text-foreground` |
+| Secondary text | `--clr-text-secondary` | `text-muted-foreground` |
+| Primary button | `--clr-primary` | `bg-primary` |
+| Primary text on button | `--clr-text-on-primary` | `text-primary-foreground` |
+| Border | `--clr-border` | `border-border` |
+| Card shadow | `--sh-card` | `shadow-sm` |
+
+---
+
+## 🎨 System Theme (prefers-color-scheme)
+
+```css
+/* Default: dark */
+:root { /* dark variables */ }
+
+/* System light */
+@media (prefers-color-scheme: light) {
+  :root { /* light variables */ }
+}
+
+/* Manual override via data-theme */
+[data-theme="dark"] { /* dark variables */ }
+[data-theme="light"] { /* light variables */ }
+```
+
+**Priority:**
+1. `data-theme` attribute (manual override) — **highest**
+2. `prefers-color-scheme` (system) — **medium**
+3. Default (dark) — **fallback**
+
+---
+
+## 📦 Theme-aware Component Pattern
+
+```tsx
+// Komponen tidak perlu tahu theme — cukup pakai CSS vars
+function ThemeAwareCard() {
+  return (
+    <div className="rounded-xl border border-border bg-card text-card-foreground shadow-sm">
+      {/* Konten — styling otomatis berubah sesuai theme */}
+    </div>
+  );
+}
+```
+
+### Dark-mode Specific Adjustments
+
+```css
+/* Hanya untuk theme dark */
+[data-theme="dark"] .particle-orbs {
+  opacity: 0.6;
+}
+
+/* Hanya untuk theme light */
+[data-theme="light"] .particle-orbs {
+  opacity: 0.3;
+}
+```
+
+---
+
+## ⚠️ Theme Anti-Patterns
+
+### ❌ Color hardcoding
+```css
+/* ❌ JANGAN — tidak akan berubah saat theme switch */
+.card { background: #1e1e2e; }
+
+/* ✅ CSS variable — otomatis mengikuti theme */
+.card { background: var(--clr-surface-elevated); }
+```
+
+### ❌ Theme-specific logic in components
+```tsx
+// ❌ JANGAN — komponen tahu soal theme
+function Card() {
+  const { theme } = useTheme();
+  return <div className={theme === 'dark' ? 'bg-gray-800' : 'bg-white'} />;
+}
+
+// ✅ Komponen tidak perlu tahu — CSS vars handle semua
+function Card() {
+  return <div className="bg-card" />;
+}
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) | CSS vars |
+| [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) | System theme |
+| [OKLCH in CSS](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) | Color space |
+
+---
+
+*"Tema adalah kulit yang berganti — esensi tetap sama, wajah yang baru."* ❄️🩵
diff --git a/design/system/16-sound-design.md b/design/system/16-sound-design.md
new file mode 100644
index 0000000..95b24f1
--- /dev/null
+++ b/design/system/16-sound-design.md
@@ -0,0 +1,314 @@
+# Sound Design — The Audio Soul
+
+> *"Sound is the vocabulary of nature. It speaks to us on a primal level."*
+> — Randy Thom, Sound Designer
+
+---
+
+## 🎯 Filosofi Audio
+
+Suara di BETE bukan sekadar efek — ia adalah **layer konfirmasi non-visual**:
+
+1. **Subtle & non-intrusive** — Volume rendah, durasi pendek
+2. **Meaningful** — Setiap suara punya makna spesifik
+3. **Context-aware** — Suara yang berbeda untuk konteks berbeda
+4. **Opt-out** — Semua suara bisa dimatikan
+
+---
+
+## 🔔 Sound Catalog
+
+### UI Feedback Sounds
+
+| Event | Sound Type | Duration | Volume | Description |
+|-------|-----------|----------|--------|-------------|
+| Button click | Pop | 80ms | 0.3 | Subtle tick |
+| Toggle on | Click | 100ms | 0.3 | Switch engage |
+| Toggle off | Click | 100ms | 0.2 | Switch release |
+| Modal open | Whoosh | 200ms | 0.2 | Soft slide |
+| Modal close | Whoosh | 150ms | 0.15 | Quick retreat |
+| Toast appear | Ding | 300ms | 0.3 | Notification |
+| Error toast | Buzz | 200ms | 0.4 | Warning |
+
+### Moderation Sounds
+
+| Event | Sound | Duration | Volume | Description |
+|-------|-------|----------|--------|-------------|
+| Message flagged | Chime | 400ms | 0.3 | Attention tone |
+| Critical alert | Siren | 1s | 0.5 | Urgent pattern |
+| Analysis complete | Ping | 200ms | 0.2 | Completion |
+
+### Voice Channel Sounds
+
+| Event | Sound | Duration | Volume |
+|-------|-------|----------|--------|
+| User joins | Connect | 150ms | 0.2 |
+| User leaves | Disconnect | 150ms | 0.2 |
+| Recording start | Record-on | 200ms | 0.3 |
+| Recording stop | Record-off | 200ms | 0.2 |
+
+---
+
+## 🎵 Audio Implementation
+
+### Sound Manager
+
+```typescript
+// shared/lib/sound.ts
+class SoundManager {
+  private static instance: SoundManager;
+  private enabled = true;
+  private volume = 0.5;
+  private audioCache = new Map<string, HTMLAudioElement>();
+
+  static getInstance(): SoundManager {
+    if (!this.instance) this.instance = new SoundManager();
+    return this.instance;
+  }
+
+  async play(soundId: string): Promise<void> {
+    if (!this.enabled) return;
+
+    let audio = this.audioCache.get(soundId);
+    if (!audio) {
+      audio = new Audio(`/sounds/${soundId}.mp3`);
+      this.audioCache.set(soundId, audio);
+    }
+
+    audio.volume = this.volume;
+    audio.currentTime = 0;
+    await audio.play().catch(() => {}); // Swallow autoplay errors
+  }
+
+  setEnabled(enabled: boolean): void { this.enabled = enabled; }
+  setVolume(volume: number): void { this.volume = Math.max(0, Math.min(1, volume)); }
+}
+
+export const sound = SoundManager.getInstance();
+```
+
+### Preloading Strategy
+
+```typescript
+// Preload critical sounds on app init
+function preloadSounds(): void {
+  const criticalSounds = ['click', 'toggle', 'notification'];
+  criticalSounds.forEach(id => {
+    const audio = new Audio(`/sounds/${id}.mp3`);
+    audio.preload = 'auto';
+  });
+}
+
+// Call on app bootstrap
+document.addEventListener('DOMContentLoaded', preloadSounds);
+```
+
+---
+
+## 🎚️ Sound Settings
+
+```tsx
+// features/settings/SoundSettings.tsx
+function SoundSettings() {
+  const [soundEnabled, setSoundEnabled] = useState(true);
+  const [soundVolume, setSoundVolume] = useState(0.5);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sound</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <ToggleGroup>
+          <Toggle
+            pressed={soundEnabled}
+            onPressedChange={(v) => {
+              setSoundEnabled(v);
+              sound.setEnabled(v);
+            }}
+            label="Sound Effects"
+          />
+        </ToggleGroup>
+
+        {soundEnabled && (
+          <div>
+            <Label>Volume</Label>
+            <Slider
+              value={[soundVolume]}
+              onValueChange={([v]) => {
+                setSoundVolume(v);
+                sound.setVolume(v);
+              }}
+              min={0}
+              max={1}
+              step={0.1}
+            />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+---
+
+## 🔊 Audio Feedback Implementation
+
+### React Hook
+
+```tsx
+// hooks/useSound.ts
+function useSound(soundId: string) {
+  const play = useCallback(() => {
+    sound.play(soundId);
+  }, [soundId]);
+
+  return play;
+}
+
+// Usage
+function DeleteButton({ onClick }: { onClick: () => void }) {
+  const playClick = useSound('click');
+  const playError = useSound('error');
+
+  const handleClick = async () => {
+    playClick();
+    try {
+      await onClick();
+    } catch {
+      playError();
+    }
+  };
+
+  return <Button onClick={handleClick}>Delete</Button>;
+}
+```
+
+### Toast + Sound Integration
+
+```tsx
+function useToastWithSound() {
+  const { toast } = useToast();
+
+  return useCallback((t: ToastInput) => {
+    toast(t);
+
+    switch (t.type) {
+      case 'success': sound.play('success'); break;
+      case 'error':   sound.play('error');   break;
+      case 'warning': sound.play('warning'); break;
+      case 'info':    sound.play('info');    break;
+    }
+  }, [toast]);
+}
+```
+
+---
+
+## 📄 Sound File Structure
+
+```
+public/sounds/
+├── ui/
+│   ├── click.mp3           # 80ms
+│   ├── toggle-on.mp3       # 100ms
+│   ├── toggle-off.mp3      # 100ms
+│   ├── modal-open.mp3      # 200ms
+│   ├── modal-close.mp3     # 150ms
+│   └── notification.mp3    # 300ms
+├── moderation/
+│   ├── flagged.mp3         # 400ms
+│   ├── critical.mp3        # 1s
+│   └── analysis-done.mp3   # 200ms
+├── voice/
+│   ├── user-join.mp3       # 150ms
+│   ├── user-leave.mp3      # 150ms
+│   ├── recording-start.mp3 # 200ms
+│   └── recording-stop.mp3  # 200ms
+└── _index.json             # Sound metadata
+```
+
+### Sound Metadata
+
+```json
+{
+  "ui/click": {
+    "duration": 80,
+    "volume": 0.3,
+    "category": "feedback",
+    "critical": true
+  },
+  "moderation/critical": {
+    "duration": 1000,
+    "volume": 0.5,
+    "category": "alert",
+    "critical": true
+  }
+}
+```
+
+---
+
+## ♿ Accessibility & Sound
+
+```typescript
+// Respect system accessibility settings
+function shouldPlaySound(): boolean {
+  // iOS: silent switch
+  if (navigator.mediaSession?.playbackState === 'none') return false;
+  return true;
+}
+
+// Before playing:
+if (!shouldPlaySound()) return;
+
+// User preference always wins
+if (!userSettings.soundEnabled) return;
+```
+
+---
+
+## ⚠️ Sound Anti-Patterns
+
+### ❌ Mandatory sounds
+```tsx
+// ❌ JANGAN — user tidak bisa mematikan
+sound.play('loud-intro-music');
+
+// ✅ Always respect user preference
+if (userSettings.soundEnabled) sound.play('subtle-click');
+```
+
+### ❌ Long or repetitive sounds
+```tsx
+// ❌ JANGAN — 5 detik sound effect mengganggu
+sound.play('complex-jingle');
+
+// ✅ Durasi pendek, sekali main
+sound.play('quick-chime');
+```
+
+### ❌ No audio context check
+```tsx
+// ❌ JANGAN — play tanpa cek autoplay policy
+new Audio('/sounds/click.mp3').play();
+
+// ✅ Handle autoplay rejection
+const audio = new Audio('/sounds/click.mp3');
+await audio.play().catch(() => {});  // Silently fail
+```
+
+---
+
+## 🔗 Referensi
+
+| Sumber | Konsep |
+|--------|--------|
+| [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) | Audio playback |
+| [Game UX Sound Design](https://www.gamedeveloper.com/audio/) | Sound design patterns |
+| [WCAG Auditory](https://www.w3.org/WAI/WCAG21/Understanding/audio-control.html) | Audio accessibility |
+
+---
+
+*"Suara adalah gaung ingatan — setiap klik adalah bisikan dari masa lalu."* ❄️🩵
diff --git a/package.json b/package.json
index 0dba5b7..81dbc14 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,6 @@
     "dev:backend": "pnpm --filter './services/backend' run dev",
     "dev:discord-gateway": "pnpm --filter './services/discord-gateway' run dev",
     "dev:web": "pnpm --filter './services/frontend' run dev",
-    "build:backend": "pnpm --filter './services/backend' run build",
-    "build:discord-gateway": "pnpm --filter './services/discord-gateway' run build",
     "build:web": "pnpm --filter './services/frontend' run build",
     "typecheck": "pnpm -r run typecheck",
     "lint": "biome check --diagnostic-level=error .",
diff --git a/packages/shared/src/config/index.ts b/packages/shared/src/config/index.ts
index 795cc09..6fc5ff5 100644
--- a/packages/shared/src/config/index.ts
+++ b/packages/shared/src/config/index.ts
@@ -59,7 +59,13 @@ export const configSchema = z
       .optional()
       .transform((v) => v === "true")
       .default(false),
-    ADMIN_PASSWORD: z.string().default("admin123"),
+    ADMIN_PASSWORD: z.string().min(1, "ADMIN_PASSWORD is required — set it in your .env file"),
+    DASHBOARD_IS_PUBLIC: z
+      .string()
+      .optional()
+      .transform((v) => v === "true")
+      .default(false),
+
     WEBHOOK_URLS: z
       .string()
       .default("")
@@ -122,7 +128,7 @@ export const configSchema = z
       .string()
       .url()
       .default("https://9router.asepharyana.my.id/v1"),
-    AI_LLM_MODEL: z.string().default("text"),
+    AI_LLM_MODEL: z.string().default("gpt-4o-mini"),
     AI_LLM_VISION_MODEL: z.string().optional(),
     AI_LLM_MAX_CONCURRENT: z.coerce.number().int().positive().default(5),
     AI_LLM_IMAGE_MAX_DIMENSION: z.coerce
diff --git a/packages/shared/src/database/schema.ts b/packages/shared/src/database/schema.ts
index 86890e6..b9ff983 100644
--- a/packages/shared/src/database/schema.ts
+++ b/packages/shared/src/database/schema.ts
@@ -95,6 +95,9 @@ export const pgMessagesTable = pgTable(
     threadAiStatusCreatedIdx: pgIndex(
       "idx_messages_thread_ai_status_created",
     ).on(table.thread_id, table.ai_status, table.created_at, table.id),
+    guildAiStatusAnalyzedIdx: pgIndex(
+      "idx_messages_guild_ai_status_analyzed",
+    ).on(table.guild_id, table.ai_status, table.ai_analyzed_at, table.id),
   }),
 );
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3bce3e1..34efb2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
     devDependencies:
       '@biomejs/biome':
         specifier: latest
-        version: 2.5.0
+        version: 2.5.1
       drizzle-kit:
         specifier: ^0.31.10
         version: 0.31.10
@@ -54,10 +54,13 @@ importers:
         version: link:../../packages/shared
       '@discordjs/voice':
         specifier: ^0.19.2
-        version: 0.19.2(@discordjs/opus@0.10.0)(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(opusscript@0.0.8)
+        version: 0.19.2(@discordjs/opus@0.10.0)(opusscript@0.0.8)
       axios:
         specifier: ^1.16.1
         version: 1.16.1
+      cors:
+        specifier: ^2.8.6
+        version: 2.8.6
       dotenv:
         specifier: ^17.4.2
         version: 17.4.2
@@ -67,6 +70,9 @@ importers:
       express:
         specifier: ^5.2.1
         version: 5.2.1
+      express-rate-limit:
+        specifier: ^8.5.2
+        version: 8.5.2(express@5.2.1)
       helmet:
         specifier: ^8.1.0
         version: 8.1.0
@@ -91,10 +97,16 @@ importers:
     devDependencies:
       '@biomejs/biome':
         specifier: latest
-        version: 2.5.0
+        version: 2.5.1
+      '@types/cors':
+        specifier: ^2.8.19
+        version: 2.8.19
       '@types/express':
         specifier: ^5.0.6
         version: 5.0.6
+      '@types/express-rate-limit':
+        specifier: ^6.0.2
+        version: 6.0.2(express@5.2.1)
       '@types/node':
         specifier: ^25.9.0
         version: 25.9.0
@@ -124,10 +136,10 @@ importers:
         version: 0.10.0
       '@discordjs/voice':
         specifier: ^0.19.2
-        version: 0.19.2(@discordjs/opus@0.10.0)(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(opusscript@0.0.8)
+        version: 0.19.2(@discordjs/opus@0.10.0)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(opusscript@0.0.8)
       '@snazzah/davey':
         specifier: ^0.1.11
-        version: 0.1.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+        version: 0.1.11(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
       axios:
         specifier: ^1.16.1
         version: 1.16.1
@@ -194,7 +206,7 @@ importers:
     devDependencies:
       '@biomejs/biome':
         specifier: latest
-        version: 2.5.0
+        version: 2.5.1
       '@types/node':
         specifier: ^25.9.0
         version: 25.9.0
@@ -219,6 +231,9 @@ importers:
 
   services/frontend:
     dependencies:
+      '@astrojs/react':
+        specifier: ^6.0.0
+        version: 6.0.0(@types/node@25.9.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(esbuild@0.28.0)(jiti@2.7.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tsx@4.22.2)(yaml@2.9.0)
       '@bete/shared':
         specifier: workspace:*
         version: link:../../packages/shared
@@ -231,6 +246,9 @@ importers:
       '@radix-ui/react-tabs':
         specifier: ^1.1.13
         version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      astro:
+        specifier: ^7.0.4
+        version: 7.0.4(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@25.9.0)(ioredis@5.11.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -252,7 +270,7 @@ importers:
     devDependencies:
       '@biomejs/biome':
         specifier: latest
-        version: 2.5.0
+        version: 2.5.1
       '@tailwindcss/postcss':
         specifier: ^4.3.0
         version: 4.3.0
@@ -262,9 +280,6 @@ importers:
       '@types/react-dom':
         specifier: ^19.2.3
         version: 19.2.3(@types/react@19.2.14)
-      '@vitejs/plugin-react':
-        specifier: ^6.0.2
-        version: 6.0.2(vite@8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0))
       autoprefixer:
         specifier: ^10.5.0
         version: 10.5.0(postcss@8.5.14)
@@ -277,9 +292,6 @@ importers:
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
-      vite:
-        specifier: ^8.0.13
-        version: 8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0)
 
   vendor/discord-video-stream:
     dependencies:
@@ -288,7 +300,7 @@ importers:
         version: 0.32.0-20260202
       '@snazzah/davey':
         specifier: ^0.1.8
-        version: 0.1.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+        version: 0.1.11(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
       debug-level:
         specifier: ^4.1.1
         version: 4.1.1
@@ -377,7 +389,7 @@ importers:
     devDependencies:
       '@biomejs/biome':
         specifier: latest
-        version: 2.5.0
+        version: 2.5.1
       '@discordjs/docgen':
         specifier: ^0.11.1
         version: 0.11.1
@@ -418,38 +430,209 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@astrojs/compiler-binding-darwin-arm64@0.3.0':
+    resolution: {integrity: sha512-3n0uu+uJpnCq8b4JFi3uGDsIisAvHctxSmH+cIO9Gbei1H1Y1QXaYboXyiWJugUmprr3OEYP7+LdodzpVFzLMQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@astrojs/compiler-binding-darwin-x64@0.3.0':
+    resolution: {integrity: sha512-scxNGKjOBydMo1QR4LtK0FMgh7ubQomJDv953nz2msQFkPKke/0FpPv/cQM0T/kuZdReZQFU8Oz3iOrP/6WHEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@astrojs/compiler-binding-linux-arm64-gnu@0.3.0':
+    resolution: {integrity: sha512-NZrWLolVUANmrnl0zrFK/Sx5Sock1gEUT49ALfMTTCA5Ya2ec/BoJXMIg4KgE+wZcrdXJ8e+WyEhM7YLk/FJkA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@astrojs/compiler-binding-linux-arm64-musl@0.3.0':
+    resolution: {integrity: sha512-PjwRmKgMFDsFhg82g0poXlIY8Qn3fMA3hXjaR0coJWJzTJsRH9ATU0j2ocigjtU1h3vL/yR7yLUxGj/lTCq73g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@astrojs/compiler-binding-linux-x64-gnu@0.3.0':
+    resolution: {integrity: sha512-Dr69VJYlnSfyL8gzELW6S4mE41P7TDPn1IKjwMnjdZ7+dxgJI50oMLFSk1LVe26bHmWB3ktuh8fDVK1THI9e9A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@astrojs/compiler-binding-linux-x64-musl@0.3.0':
+    resolution: {integrity: sha512-AEt+bRw8PfImCcyRH1lpXVB8CdmQ1K/wPo5u99iec4/U/XdNvQZ715YVuNzIJpbJXelgQeZ5H2+Ea7XwRyWY5g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@astrojs/compiler-binding-wasm32-wasi@0.3.0':
+    resolution: {integrity: sha512-U80tA1j8V6LjhiTZzVCtG4E8hrNVVNXDGV5fCgJ94q8FU9CPH+XwdDDhLzBybfWhKfyItXmQiZNRPTiPCYTpVg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@astrojs/compiler-binding-win32-arm64-msvc@0.3.0':
+    resolution: {integrity: sha512-CpY1RII2r1XMpOUVD1VR/F2wtuRsiOCkFULS10Khyj8/DFZMtxVuUCAWGw+CW2Ka0h6eP3Xc1CA+glFlvXMPxA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@astrojs/compiler-binding-win32-x64-msvc@0.3.0':
+    resolution: {integrity: sha512-qmFbs769oeeGrRebAnCW7aBk8m71vf85W/dX/jddfx5Z06/w0wf7TZCfJPOX1Fld2t+4N+iXzfGEJG+zJQ+bzg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@astrojs/compiler-binding@0.3.0':
+    resolution: {integrity: sha512-zlsOT5COD9hRwplJCgQhS21unxON5AKirf0vgt1ijXwuseYIaZdm2ZOpF8fsz+DY9EyXx+I/ukxtg7uoBep68A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  '@astrojs/compiler-rs@0.3.0':
+    resolution: {integrity: sha512-J2qEVHtIDjEM9TxwmwuebOGmZNwhKu/dR7P7qBpnJKGmBBX0vdweQ/4cEXhj8fBbWVUB5V12xWChri3CgKNULQ==}
+    engines: {node: '>=22.12.0'}
+
+  '@astrojs/internal-helpers@0.10.0':
+    resolution: {integrity: sha512-Ry2R3VPeIN4uPCSA4xQc+e+vsJXkalKpEbDc07hV+a/o5Bs2N/s/uDcPJH/05L19DKh9tAy7e6JM3YZ6Cxfezw==}
+
+  '@astrojs/markdown-satteri@0.3.2':
+    resolution: {integrity: sha512-feXuUPy41gVfeM7EHT1ciUim8ozGr+YHXab9uUBc1Hk8y60DQosO8ldL+AoPXnCAoGj1OChwHfvXmmJ6XVnY9A==}
+
+  '@astrojs/prism@4.0.2':
+    resolution: {integrity: sha512-KTivpmnz6lDsC6o9H4+DNm2SrE/GHzw8cNAvEJwAvUT+eoaEnn/4NtbDNfRRaxaJHdp15gf+tfHAWiXR4wB3BA==}
+    engines: {node: '>=22.12.0'}
+
+  '@astrojs/react@6.0.0':
+    resolution: {integrity: sha512-jNf3kKE6KYXJbD5ZsXaLhnwDK3YvK9ttQ2ykAcNf5XdxOlUQEHLnomO3FO8abqghs0ilqhgGOyc2AlgGyQtz/g==}
+    engines: {node: '>=22.12.0'}
+    peerDependencies:
+      '@types/react': ^17.0.50 || ^18.0.21 || ^19.0.0
+      '@types/react-dom': ^17.0.17 || ^18.0.6 || ^19.0.0
+      react: ^17.0.2 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.2 || ^18.0.0 || ^19.0.0
+
+  '@astrojs/telemetry@3.3.2':
+    resolution: {integrity: sha512-j8DNruA8ors99Al39RYZPJK4DC1bKkoNm93mAMuBhY9TCNC4R8n1q7ovFnJ5qhGh5Lsh7pa1gpQVpYpsJPeTHQ==}
+    engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.28.5':
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.29.3':
     resolution: {integrity: sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-transform-react-jsx-self@7.29.7':
+    resolution: {integrity: sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.29.7':
+    resolution: {integrity: sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/runtime@7.29.2':
     resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.29.0':
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
   '@biomejs/biome@2.3.8':
     resolution: {integrity: sha512-Qjsgoe6FEBxWAUzwFGFrB+1+M8y/y5kwmg5CHac+GSVOdmOIqsAiXM5QMVGZJ1eCUCLlPZtq4aFAQ0eawEUuUA==}
     engines: {node: '>=14.21.3'}
     hasBin: true
 
-  '@biomejs/biome@2.5.0':
-    resolution: {integrity: sha512-4kURkd9hAPrdDM3C9n82ycYgx8hvQcW6MjKTEejruj8rK0N8P3OPpdy8BvI8kt3KWY4ycF5XtDOrktetEfhfuw==}
+  '@biomejs/biome@2.5.1':
+    resolution: {integrity: sha512-IXWLCxKmae+rI7LOHS1B3EbVisQ6GRAWbhN9msa6KjNCyFWrvKZWR4oUdinaNssrV852OrSHuSPa95h1GPJc7Q==}
     engines: {node: '>=14.21.3'}
     hasBin: true
 
@@ -459,8 +642,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@biomejs/cli-darwin-arm64@2.5.0':
-    resolution: {integrity: sha512-Mn3Fwi3SA5fgmfCPqmzpWF2DLZnms3BVAhM088nTnGrTZmHS3wwIjcoZPqpXeNgd3DrrLH6xp8vTLIBuJoZiXw==}
+  '@biomejs/cli-darwin-arm64@2.5.1':
+    resolution: {integrity: sha512-npqDzvqv7vFaWRiNN1Te71siRgPaqS9MpqgYCdP/CrUbkJ7ApezaeaKjueKHRN/JH/6lRjJQAHi8acQDCAz22w==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [darwin]
@@ -471,8 +654,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@biomejs/cli-darwin-x64@2.5.0':
-    resolution: {integrity: sha512-rg3VPL5P8mYro6pqlXYXuJWph21slVp3SZtAqWSrkZs40d2gTzYmHF8E/X1iTID25btmNKltNDJ926sqVBp7DQ==}
+  '@biomejs/cli-darwin-x64@2.5.1':
+    resolution: {integrity: sha512-RgwTqPAM8g2tn1j+b5oRjF/DbSBX8a4gwojtuG9XuhfK7GgomvZ9+T+tqjXiVbjLEeGJOoL6VEk8mvRTVeSybw==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [darwin]
@@ -484,8 +667,8 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@biomejs/cli-linux-arm64-musl@2.5.0':
-    resolution: {integrity: sha512-vQdM4oSGaf7ZNeGO9w5+Y8SBtyser9M6znxYbm7Ec8wInxJu1WiKxFYZW5Auj2d80bcVvefuGGRxoFOE0eee8g==}
+  '@biomejs/cli-linux-arm64-musl@2.5.1':
+    resolution: {integrity: sha512-WMcvMLgByyTqVxGlq918NBBYliq9FRR9GAQVETHb+VjGVqXCZFfHlZHC1FX4ibuYY/Hg6TJE3rHU0xVrdJXNRw==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
@@ -498,8 +681,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@biomejs/cli-linux-arm64@2.5.0':
-    resolution: {integrity: sha512-tl+LW8fdD96/xdeWtWwc82LIOc5CoY7N2AsogLTp5R4ECErYt+8Jl/N68ezN9vzSiqPTxw6vjcihoLPYKZHrlw==}
+  '@biomejs/cli-linux-arm64@2.5.1':
+    resolution: {integrity: sha512-yhV35CzZh38VyMvTEXi3JTjxZBs++oCKK9KG8vB6VI5+uvQvZNR3BFWEKKzuOmx9DJJj7sQpZ4LQJcmbGTs3+Q==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
@@ -512,8 +695,8 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@biomejs/cli-linux-x64-musl@2.5.0':
-    resolution: {integrity: sha512-+9hIcMngJ+yGUahXqZuZ8CoWKJE9SAZsFsM3QDvXpNsLbXZ9lqVzgBhOk/jTSYkOA0GLP9eu3teukqpLUojHMg==}
+  '@biomejs/cli-linux-x64-musl@2.5.1':
+    resolution: {integrity: sha512-ANTowtlLmPYm5yeMckWY8Xzb9Ix+JJP3tgHR/n6xRj1VWyIzzWtfRfih9hv9VmClwadpBvZduISZIbBsIlYG3A==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
@@ -526,8 +709,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@biomejs/cli-linux-x64@2.5.0':
-    resolution: {integrity: sha512-zpEGf4RQbFEh8Vt7OmavLyyOzRbtcE9osCqrS1kfvt8jDvxwhKXLSf7n0ebr/ov0RJ9ssP+lhs6C8a9WwFvrQA==}
+  '@biomejs/cli-linux-x64@2.5.1':
+    resolution: {integrity: sha512-J/7uHSX7NfoYDI7HijAkd8lnQIOrRb2W7j3X+tw4R+N5ExvXGsyXFiGdQcfcxfOmNQmZVSQOCDk757fwpzqQcg==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
@@ -539,8 +722,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@biomejs/cli-win32-arm64@2.5.0':
-    resolution: {integrity: sha512-jB0wAvTLI4itx5VidqVUejPQFhRUxiZ9l9FvZ26D5fl6t3qme+ZB4PD3bTSeL1vZ8NI2Rx/zj6H9zcESuGHKGw==}
+  '@biomejs/cli-win32-arm64@2.5.1':
+    resolution: {integrity: sha512-zgXnKNgWPC4iPF7Y1lR3STUeCUuZRpD6IiOrC7TZTlh0Lx6FiVUT05myuMQHQ9D+1cc7uyMldi4forE6lp0ivQ==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [win32]
@@ -551,12 +734,61 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@biomejs/cli-win32-x64@2.5.0':
-    resolution: {integrity: sha512-VT/lF+GId+67j8aDfLkxdxNoVApsPSTbyAtB3jJq0IWTrY77WXfbPfpngxq0bA6JCEv/7k8C9qWjDRKRznDlyw==}
+  '@biomejs/cli-win32-x64@2.5.1':
+    resolution: {integrity: sha512-6uxpR9hvaglANkZemeSiN/FhYgkGasrEGn267eXIWvjrjJ2LhDlk251IhjVJq6MXzkV2/bcXwLwSroLyPtqRZg==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [win32]
 
+  '@bruits/satteri-darwin-arm64@0.9.4':
+    resolution: {integrity: sha512-W3MSUkr2mZRR8Stoe+lqNAyzQzRuFMU8WffV9IvFSxTok0LGWR0ZZQPLELU4QTRiUbhL2Y4VUP9vV7pj8rHjgg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@bruits/satteri-darwin-x64@0.9.4':
+    resolution: {integrity: sha512-DXOuuaE1lsv7mpk2mOvGrzqoEWEvOIZEO/fXVa7zfM23Iob+CBjBkRAMwpHA4pmZ3j6Gj7WJzPKw0kQ7w741AQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@bruits/satteri-linux-arm64-gnu@0.9.4':
+    resolution: {integrity: sha512-gJxU9rGGoqIznSEgEzpjxkry24jeHuMpoo1tCIAhHYh7WaD3j5F8zt3jmHxEaN1Uwa+K5+wFgIR2uIGOnMzEmw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@bruits/satteri-linux-arm64-musl@0.9.4':
+    resolution: {integrity: sha512-Wjzu9hmmAbfmDkBfPI1VdZygJtYz9uYZQnkEyrXi6S2JFi+2pXQ1A5irj38bqm0IZmWcTbk0cVG4NZnPdtVNJA==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@bruits/satteri-linux-x64-gnu@0.9.4':
+    resolution: {integrity: sha512-MR1Q+wMx65FQlbSV7cRqWW87Knp0zkoaIV55Dt+xZl028wJABXEPEEmG3670SLq7lVZvcGIDwCgSg2kCYxvRwA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@bruits/satteri-linux-x64-musl@0.9.4':
+    resolution: {integrity: sha512-T4gxhXve3zyNAZesrXAd/rDZOGRkbfFIUFld4TGsw6BsjoIteCcDji6IMqeXyaWEVSykY2X8Eid2hr6aXGYAaw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@bruits/satteri-wasm32-wasi@0.9.4':
+    resolution: {integrity: sha512-/CEG8LUlpaBEnhFnYVn0UnlHFLs51UhrkJBUPDUXLzkadzAcnR88iRA/nOl7Zwhjb4WhfBV4p3P5qeOJMtH0iA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@bruits/satteri-win32-arm64-msvc@0.9.4':
+    resolution: {integrity: sha512-E1ZPQbgCtFKiU7pFYVndynvY7ne4coeVDUgnVThErSFlJ2ceQCBZrfRTD1lzrIDy63Bbqo+g/cZY9duw+JYjIw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@bruits/satteri-win32-x64-msvc@0.9.4':
+    resolution: {integrity: sha512-5I7SiarsNdAUuhJb50CXJPTwr/ECVrBoU+fymoLjChK5fW//+srhY4lstcNTzgFRtQSYfVtm4OQZz16CVMeTeA==}
+    cpu: [x64]
+    os: [win32]
+
   '@canvas/image-data@1.1.0':
     resolution: {integrity: sha512-QdObRRjRbcXGmM1tmJ+MrHcaz1MftF2+W7YI+MsphnsCrmtyfS0d5qJbk0MeSbUeyM/jCb0hmnkXPsy026L7dA==}
 
@@ -564,6 +796,18 @@ packages:
     resolution: {integrity: sha512-DQKEftZ5M4eM8Rzhv8FFZGdOsO8bVjzPC/9pBF+P//HjQM/Xf+PvQRTv97mVpsHt+Pejs1V7ooK6xf+dYgDNpw==}
     engines: {node: '>=10'}
 
+  '@capsizecss/unpack@4.0.1':
+    resolution: {integrity: sha512-CuNiSqg7+e1cO/GjffyMOm5Tt2jUF9CWHHnvQ/UkqvtkGfHdgwEC0wpmq7fkN3gxwpRnrAN0WzO3vREKmNolMQ==}
+    engines: {node: '>=18'}
+
+  '@clack/core@1.4.2':
+    resolution: {integrity: sha512-0Ty/1Gfm+Kb07sXcuESjyKfwEhSy4Ns1AgeEisHb/bDY5fWme0tTeTkU14T1Gmcs17YIjB/teiDe4uaCghbYqQ==}
+    engines: {node: '>= 20.12.0'}
+
+  '@clack/prompts@1.6.0':
+    resolution: {integrity: sha512-EYlRokl8szrP9Z25qT5aepMdBjzBvHF9ZEhzIiUBc9guz/T31EqRgvD0QSgZcpE93xiwrr+OkB4nz0BZyF6fSA==}
+    engines: {node: '>= 20.12.0'}
+
   '@cwasm/jpeg-turbo@0.1.3':
     resolution: {integrity: sha512-FkZxwwC6r4zhzlqM0nYGaMj/MDSrZPxLOdPdM6ySlgsMfOpNAZcLQkpNF4jP+DmsuUvRoeUD0YSMBvg3jYfK6w==}
 
@@ -619,12 +863,21 @@ packages:
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
+  '@emnapi/core@1.11.1':
+    resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
+
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
+  '@emnapi/runtime@1.11.1':
+    resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
+
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
+  '@emnapi/wasi-threads@1.2.2':
+    resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
+
   '@esbuild-kit/core-utils@3.3.2':
     resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
     deprecated: 'Merged into tsx: https://tsx.is'
@@ -1403,6 +1656,12 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
+  '@napi-rs/wasm-runtime@1.1.6':
+    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
   '@noble/curves@1.9.7':
     resolution: {integrity: sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==}
     engines: {node: ^14.21.3 || >=16}
@@ -1483,6 +1742,9 @@ packages:
     resolution: {integrity: sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==}
     engines: {node: '>=8.0.0'}
 
+  '@oslojs/encoding@1.1.0':
+    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
+
   '@otplib/core@12.0.1':
     resolution: {integrity: sha512-4sGntwbA/AC+SbPhbsziRiD+jNDdIzsZ3JUyfZwjtKyc/wufl1pnSIaG4Uqx8ymPagujub0o92kgBnB89cuAMA==}
 
@@ -1813,9 +2075,21 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rolldown/pluginutils@1.0.0-rc.3':
+    resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
+
   '@rolldown/pluginutils@1.0.1':
     resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
+  '@rollup/pluginutils@5.4.0':
+    resolution: {integrity: sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@sapphire/async-queue@1.5.5':
     resolution: {integrity: sha512-cvGzxbba6sav2zZkH8GPf2oGk9yYoD5qrNWdu9fRehifgnFZJMV+nuy2nON2roRO4yQQ+v7MK/Pktl/HgfsUXg==}
     engines: {node: '>=v14.0.0', npm: '>=7.0.0'}
@@ -1875,6 +2149,37 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@shikijs/core@4.3.0':
+    resolution: {integrity: sha512-EooU3i9F6IAE8kEu+AnGf9DFZWkQBZ+hJn3tLVbsH+61mtQiva5biai66fAA6nvFPXkLgvrh7BrR7YcJU83xQQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-javascript@4.3.0':
+    resolution: {integrity: sha512-hTv/KiFf2tpiqlACPiztGGurEARWIutB8YUhcrA1pUC7VzzwKO+g5crUocrLztrZ5ro5Z4hbXg7bYclETn3gSQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-oniguruma@4.3.0':
+    resolution: {integrity: sha512-1vMdN3gHfnKfLYwecUI2ITJI4RhHt96xEaJumVn7Heb0IlJ8WQMIH0Voak+2j22BpSNKdnOfB/pCTPnPm2gq7A==}
+    engines: {node: '>=20'}
+
+  '@shikijs/langs@4.3.0':
+    resolution: {integrity: sha512-rnlqFbBRSys9bT4gl/5rw9RnS0W/I84ZldXPkO7cvlEMoV85TyF/aU01N7/NbSR776RNLjrJKjfFUXJR6wN1Cg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.3.0':
+    resolution: {integrity: sha512-CPkz64PTa5diRW1ggzMZH9VM/du4RNChYgVtgqrFcgruvIybmCvySv8GkiHSczUHXYuuR8TdKEwFx+UnZMpgdg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/themes@4.3.0':
+    resolution: {integrity: sha512-Avgt05YiT+Y3prjIc9lmQxhJzHBcCfR6cjiFW4OyaMBbt2A6trX5rfjUzx+Vj/mE9qpArYjatnqo9XPjQNW/AQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/types@4.3.0':
+    resolution: {integrity: sha512-oc8b9U2SYvofKZk8e/737nIX0qwf6eV2vHFATeObAu7r+mUVpLs8Re0BmVkIjAWAYgkmG/CzLNo7rzuBzRu/wQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
   '@shinyoshiaki/binary-data@0.6.1':
     resolution: {integrity: sha512-7HDb/fQAop2bCmvDIzU5+69i+UJaFgIVp99h1VzK1mpg1JwSODOkjbqD7ilTYnqlnadF8C4XjpwpepxDsGY6+w==}
     engines: {node: '>=6'}
@@ -2082,6 +2387,21 @@ packages:
   '@tybys/wasm-util@0.10.2':
     resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
 
+  '@tybys/wasm-util@0.10.3':
+    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
   '@types/body-parser@1.19.6':
     resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
 
@@ -2091,6 +2411,9 @@ packages:
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
+  '@types/cors@2.8.19':
+    resolution: {integrity: sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==}
+
   '@types/debug@4.1.13':
     resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
 
@@ -2100,9 +2423,16 @@ packages:
   '@types/eslint@7.29.0':
     resolution: {integrity: sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==}
 
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/express-rate-limit@6.0.2':
+    resolution: {integrity: sha512-e1xZLOOlxCDvplAGq7rDcXtbdBu2CWRsMjaIu1LVqGxWtKvwr884YE5mPs3IvHeG/OMDhf24oTaqG5T1bV3rBQ==}
+    deprecated: This is a stub types definition. express-rate-limit provides its own type definitions, so you do not need this installed.
+
   '@types/express-serve-static-core@5.1.1':
     resolution: {integrity: sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==}
 
@@ -2112,6 +2442,9 @@ packages:
   '@types/fluent-ffmpeg@2.1.28':
     resolution: {integrity: sha512-5ovxsDwBcPfJ+eYs1I/ZpcYCnkce7pvH9AHSvrZllAp1ZPpTRDZAFjF3TRFbukxSgIYTTNYePbS0rKUmaxVbXw==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/http-errors@2.0.5':
     resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
 
@@ -2124,6 +2457,9 @@ packages:
   '@types/markdown-it@12.2.3':
     resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
@@ -2133,6 +2469,9 @@ packages:
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
+  '@types/nlcst@2.0.3':
+    resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
+
   '@types/node@22.19.20':
     resolution: {integrity: sha512-6tELRwSDYWW9EdZhbeZmYGZ1/7Djkt+Ah3/ScEYT9cDord7UJzasR/4D3VONg9tQI5CDp+/CZC1AXj2pCFOvpw==}
 
@@ -2168,21 +2507,20 @@ packages:
   '@types/serve-static@2.2.0':
     resolution: {integrity: sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==}
 
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
-  '@vitejs/plugin-react@6.0.2':
-    resolution: {integrity: sha512-DlSMqo4WhThw4vB8Mpn0Woe9J+Jfq1geJ61AKW0QEgLzGMNwtIMdxbDUzLxcun8W7NbJO0e2Jg/Nxm3cCSVzzg==}
+  '@ungap/structured-clone@1.3.2':
+    resolution: {integrity: sha512-5jsZFwgR5rTdKwidH9Qmat75RKwqfpKlWWB1frDkljN127mwqBu8K0PYo7/hFpF03IEJpfVPpCQDY/eDx3iHvA==}
+
+  '@vitejs/plugin-react@5.2.0':
+    resolution: {integrity: sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
-      babel-plugin-react-compiler: ^1.0.0
-      vite: ^8.0.0
-    peerDependenciesMeta:
-      '@rolldown/plugin-babel':
-        optional: true
-      babel-plugin-react-compiler:
-        optional: true
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
   '@vitest/expect@4.1.9':
     resolution: {integrity: sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==}
@@ -2248,6 +2586,10 @@ packages:
   ajv@6.15.0:
     resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
 
+  am-i-vibing@0.4.0:
+    resolution: {integrity: sha512-MxT4XZL7pzLHpuvhDKdMaQHMGGkJDLluKBLsbstn+8wv9sWcFT6h+0ve9qkml95amVTZtZV83gQe2hY+ojgHLg==}
+    hasBin: true
+
   ansi-escape-sequences@4.1.0:
     resolution: {integrity: sha512-dzW9kHxH011uBsidTXd14JXgzye/YLb2LzeKZ4bsgl/Knwx8AtbSFkkGxagdNOoh0DlqHCmfiEjWKBaqjOanVw==}
     engines: {node: '>=8.0.0'}
@@ -2276,6 +2618,10 @@ packages:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
 
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
   aproba@2.1.0:
     resolution: {integrity: sha512-tLIEcj5GuR2RSTnxNKdkK0dJ/GrC7P38sUkiDmDuHfsHmbagTFAxDVIBltoklXEVIQ/f14IL8IMJ5pn9Hez1Ew==}
 
@@ -2290,6 +2636,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
   array-back@1.0.4:
     resolution: {integrity: sha512-1WxbZvrmyhkNoeYcizokbmh5oiOCIfyvGtcqbK3Ls1v1fKcquzxnQSceOx6tzq7jmai2kFLWIpGND2cLhH6TPw==}
     engines: {node: '>=0.12.0'}
@@ -2326,6 +2676,16 @@ packages:
     resolution: {integrity: sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==}
     engines: {node: '>=4'}
 
+  astro@7.0.4:
+    resolution: {integrity: sha512-6DSiJ4CT69vngNlwEKec7nGOJHcPzc95lX7E6qkUhAt6drGYzUdf0KTJToswu3vFp3lTCGnNDCzBi/5aW8tTPA==}
+    engines: {node: '>=22.12.0', npm: '>=9.6.5', pnpm: '>=7.1.0'}
+    hasBin: true
+    peerDependencies:
+      '@astrojs/markdown-remark': 7.2.0
+    peerDependenciesMeta:
+      '@astrojs/markdown-remark':
+        optional: true
+
   asyncc@2.0.9:
     resolution: {integrity: sha512-nTQfwHtnL+MSqPaUJhV22GWP3jThj0GnS4Nw1uJyBus6EQ40hQFnbBGUvWxC5P3m+1neSqH1p8asMXg/ypmsQw==}
     engines: {node: '>=6.0.0'}
@@ -2347,6 +2707,13 @@ packages:
   axios@1.16.1:
     resolution: {integrity: sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==}
 
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -2377,6 +2744,9 @@ packages:
     resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
     engines: {node: '>=18'}
 
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
   brace-expansion@1.1.14:
     resolution: {integrity: sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==}
 
@@ -2444,6 +2814,9 @@ packages:
     resolution: {integrity: sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==}
     engines: {node: '>= 10'}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
@@ -2456,9 +2829,19 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
   chardet@0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
 
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
@@ -2470,6 +2853,10 @@ packages:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
+  ci-info@4.4.0:
+    resolution: {integrity: sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==}
+    engines: {node: '>=8'}
+
   cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -2524,6 +2911,9 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
   command-line-args@5.2.1:
     resolution: {integrity: sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==}
     engines: {node: '>=4.0.0'}
@@ -2536,10 +2926,18 @@ packages:
     resolution: {integrity: sha512-MxS8Ad995KpdAC0Jopo/ovGIroV/m0KHwzKfXxKag6FHOkGsH8/lv5yjgablcRxCJJC0oJeUMuO/gmaq+Wq46g==}
     engines: {node: '>=4.0.0'}
 
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
   commander@14.0.3:
     resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
     engines: {node: '>=20'}
 
+  common-ancestor-path@2.0.0:
+    resolution: {integrity: sha512-dnN3ibLeoRf2HNC+OlCiNc5d2zxbLJXOtiZUudNFSXZrNSydxcCsSpRzXwfu7BBWCIfHPw+xTayeBvJCP/D8Ng==}
+    engines: {node: '>= 18'}
+
   common-sequence@2.0.2:
     resolution: {integrity: sha512-jAg09gkdkrDO9EWTdXfv80WWH3yeZl5oT69fGfedBNS9pXUKYInVJ1bJ+/ht2+Moeei48TmSbQDYMc8EOx9G0g==}
     engines: {node: '>=8'}
@@ -2571,6 +2969,9 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie-es@1.2.3:
+    resolution: {integrity: sha512-lXVyvUvrNXblMqzIRrxHb57UUVmqsSWlxqt3XIjCkUP0wDAf6uicO6KMbEgYrMNtEvWgWHwe42CKxPu9MYAnWw==}
+
   cookie-signature@1.2.2:
     resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
     engines: {node: '>=6.6.0'}
@@ -2579,9 +2980,17 @@ packages:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
 
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
+    engines: {node: '>= 0.10'}
+
   cross-spawn@6.0.6:
     resolution: {integrity: sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==}
     engines: {node: '>=4.8'}
@@ -2590,6 +2999,28 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  crossws@0.3.5:
+    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
+
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -2657,6 +3088,9 @@ packages:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
 
+  defu@6.1.7:
+    resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -2675,14 +3109,31 @@ packages:
   deprecation@2.3.1:
     resolution: {integrity: sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  devalue@5.8.1:
+    resolution: {integrity: sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw==}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
   dijkstrajs@1.0.3:
     resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
 
@@ -2705,6 +3156,19 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dotenv@17.4.2:
     resolution: {integrity: sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==}
     engines: {node: '>=12'}
@@ -2805,6 +3269,10 @@ packages:
       sqlite3:
         optional: true
 
+  dset@3.1.4:
+    resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
+    engines: {node: '>=4'}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -2841,6 +3309,14 @@ packages:
   entities@2.1.0:
     resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
@@ -2943,6 +3419,9 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -2954,6 +3433,9 @@ packages:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
+  eventemitter3@5.0.4:
+    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
+
   execa@9.6.1:
     resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
     engines: {node: ^18.19.0 || >=20.5.0}
@@ -2966,10 +3448,19 @@ packages:
     resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
     engines: {node: '>=12.0.0'}
 
+  express-rate-limit@8.5.2:
+    resolution: {integrity: sha512-5Kb34ipNX694DH48vN9irak1Qx30nb0PLYHXfJgw4YEjiC3ZEmZJhwOp+VfiCYwFzvFTdB9QkArYS5kXa2cx2A==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
   express@5.2.1:
     resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
     engines: {node: '>= 18'}
 
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
   external-editor@3.1.0:
     resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
     engines: {node: '>=4'}
@@ -3002,6 +3493,15 @@ packages:
   fast-safe-stringify@2.1.1:
     resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
 
+  fast-string-truncated-width@3.0.3:
+    resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
+
+  fast-string-width@3.0.2:
+    resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
+
+  fast-wrap-ansi@0.2.2:
+    resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
+
   fastq@1.20.1:
     resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
 
@@ -3081,6 +3581,10 @@ packages:
   flatted@2.0.2:
     resolution: {integrity: sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==}
 
+  flattie@1.1.1:
+    resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
+    engines: {node: '>=8'}
+
   fluent-ffmpeg-simplified@0.1.0:
     resolution: {integrity: sha512-u3McLUh6H6/hhXYxfZcSGwCJAAlN8wsCCPZjVpaK9HIIvmjOB3G584H3PAWZb/ZQTHVKUrzhjNEYMXZXZjOR+g==}
 
@@ -3093,6 +3597,13 @@ packages:
       debug:
         optional: true
 
+  fontace@0.4.1:
+    resolution: {integrity: sha512-lDMvbAzSnHmbYMTEld5qdtvNH2/pWpICOqpean9IgC7vUbUJc3k+k5Dokp85CegamqQpFbXf0rAVkbzpyTA8aw==}
+
+  fontkitten@1.0.3:
+    resolution: {integrity: sha512-Wp1zXWPVUPBmfoa3Cqc9ctaKuzKAV6uLstRqlR56kSjplf5uAce+qeyYym7F+PHbGTk+tCEdkCW6RD7DX/gBZw==}
+    engines: {node: '>=20'}
+
   form-data@4.0.5:
     resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
     engines: {node: '>= 6'}
@@ -3164,6 +3675,10 @@ packages:
   generate-function@2.3.1:
     resolution: {integrity: sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==}
 
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -3183,9 +3698,16 @@ packages:
   get-tsconfig@4.14.0:
     resolution: {integrity: sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==}
 
+  get-tsconfig@5.0.0-beta.4:
+    resolution: {integrity: sha512-7nF7C9fIPFEMHgEMEfgIlO9wDdZ8CyHw27rWciFZfHvHDReIiPhsYuzPRXsfvBCqFy1l8RRyyWV7QLM+ZhUJsQ==}
+    engines: {node: '>=20.20.0'}
+
   github-from-package@0.0.0:
     resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
 
+  github-slugger@2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -3209,6 +3731,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  h3@1.15.11:
+    resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
+
   handlebars@4.7.9:
     resolution: {integrity: sha512-4E71E0rpOaQuJR2A3xDZ+GM1HyWYv1clR58tC8emQNeQe3RH7MAzSbat+V0wG78LQBo6m6bzSG/L4pBuCsgnUQ==}
     engines: {node: '>=0.4.7'}
@@ -3244,6 +3769,24 @@ packages:
     resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
     engines: {node: '>= 0.4'}
 
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
   helmet@8.1.0:
     resolution: {integrity: sha512-jOiHyAZsmnr8LqoPGmCjYAaiuWwjAPLgY8ZX2XrmHawt99/u1y6RgrZMTeoPfpUbV96HOalYgz1qzkRbw54Pmg==}
     engines: {node: '>=18.0.0'}
@@ -3258,6 +3801,15 @@ packages:
     resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
     engines: {node: '>=10'}
 
+  html-escaper@3.0.3:
+    resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  http-cache-semantics@4.2.0:
+    resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
+
   http-errors@2.0.1:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
@@ -3330,6 +3882,10 @@ packages:
     resolution: {integrity: sha512-EZBErytyVovD8f6pDfG3Kb37N6Y3lmDA9NNj+4+IP13CzzHGeX+OyeRM2Um13khRzoBSzzL+5lVnCX8V2RLeMg==}
     engines: {node: '>=12.22.0'}
 
+  ip-address@10.2.0:
+    resolution: {integrity: sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==}
+    engines: {node: '>= 12'}
+
   ip@2.0.1:
     resolution: {integrity: sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==}
 
@@ -3337,6 +3893,9 @@ packages:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
 
+  iron-webcrypto@1.2.1:
+    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
+
   irregular-plurals@3.5.0:
     resolution: {integrity: sha512-1ANGLZ+Nkv1ptFb2pa8oG8Lem4krflKuX/gINiHJHjJUKaJHk/SXk5x6K3J+39/p0h1RQ2saROclJJ+QLvETCQ==}
     engines: {node: '>=8'}
@@ -3353,6 +3912,16 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-docker@4.0.0:
+    resolution: {integrity: sha512-LHE+wROyG/Y/0ZnbktRCoTix2c1RhgWaZraMZ8o1Q7zCh0VSrICJQO5oqIIISrcSBtrXv0o233w1IYwsWCjTzA==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -3369,6 +3938,11 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
   is-network-error@1.3.2:
     resolution: {integrity: sha512-PhBY86zaxNZUuWP6h13Vu5oFe0XY6/UlKzQnYFELzGVHygP3MxmvTfYSG7GN3aIab/iWudSMgjSnG9Dq+nHrgA==}
     engines: {node: '>=16'}
@@ -3411,6 +3985,10 @@ packages:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -3454,6 +4032,10 @@ packages:
     resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
     hasBin: true
 
+  js-yaml@4.3.0:
+    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
+    hasBin: true
+
   js2xmlparser@4.0.2:
     resolution: {integrity: sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==}
 
@@ -3475,6 +4057,11 @@ packages:
     engines: {node: '>=12.0.0'}
     hasBin: true
 
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
@@ -3488,6 +4075,14 @@ packages:
     resolution: {integrity: sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==}
     engines: {node: '>= 0.4'}
 
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
   jsonfile@6.2.1:
     resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
 
@@ -3630,6 +4225,9 @@ packages:
     resolution: {integrity: sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==}
     engines: {node: 20 || >=22}
 
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
   lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -3642,6 +4240,9 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  magicast@0.5.3:
+    resolution: {integrity: sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==}
+
   make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -3682,6 +4283,15 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
   mdurl@1.0.1:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
 
@@ -3701,6 +4311,21 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -3782,6 +4407,10 @@ packages:
   mp4box@0.5.4:
     resolution: {integrity: sha512-GcCH0fySxBurJtvr0dfhz0IxHZjc1RP+F+I8xw+LIwkU1a+7HJx8NCDiww1I5u4Hz6g4eR1JlGADEGJ9r4lSfA==}
 
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -3810,9 +4439,16 @@ packages:
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
+  neotraverse@0.6.18:
+    resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
+    engines: {node: '>= 10'}
+
   nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
 
+  nlcst-to-string@4.0.0:
+    resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==}
+
   node-abi@3.92.0:
     resolution: {integrity: sha512-KdHvFWZjEKDf0cakgFjebl371GPsISX2oZHcuyKqM7DtogIsHrqKeLTo8wBHxaXRAQlY2PsPlZmfo+9ZCxEREQ==}
     engines: {node: '>=10'}
@@ -3828,6 +4464,9 @@ packages:
     resolution: {integrity: sha512-531jch48okOhmA9a6flMwEuXxmu+gVkRjS2FEvudiB/b40GODQQsG1qUY5aUZTO+dCC0qR3GSPZ7GI3/mXxnrQ==}
     engines: {node: '>=20'}
 
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
   node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
@@ -3840,6 +4479,9 @@ packages:
   node-int64@0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
 
+  node-mock-http@1.0.4:
+    resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==}
+
   node-releases@2.0.44:
     resolution: {integrity: sha512-5WUyunoPMsvvEhS8AxHtRzP+oA8UCkJ7YRxatWKjngndhDGLiqEVAQKWjFAiAiuL8zMRGzGSJxFnLetoa43qGQ==}
 
@@ -3855,6 +4497,10 @@ packages:
     resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
     engines: {node: '>=10'}
 
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
   npm-run-path@6.0.0:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
@@ -3863,6 +4509,9 @@ packages:
     resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
     deprecated: This package is no longer supported.
 
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -3884,6 +4533,12 @@ packages:
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
+  ofetch@1.5.1:
+    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
+
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
   on-exit-leak-free@2.1.2:
     resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
     engines: {node: '>=14.0.0'}
@@ -3899,6 +4554,12 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
   open@7.4.2:
     resolution: {integrity: sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==}
     engines: {node: '>=8'}
@@ -3953,14 +4614,25 @@ packages:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
 
+  p-queue@9.3.0:
+    resolution: {integrity: sha512-7NED7xhQ74Ngp4JP/2e0VZHp7vSWfJfqeiR92jPgxsz6m0Se4P03YoTKa9dDXyZ3r6P616gUXttrB6nnHYKang==}
+    engines: {node: '>=20'}
+
   p-retry@8.0.0:
     resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==}
     engines: {node: '>=22'}
 
+  p-timeout@7.0.1:
+    resolution: {integrity: sha512-AxTM2wDGORHGEkPCt8yqxOTMgpfbEHqF51f/5fJCmwFC3C/zNcGT63SymH2ttOAaiIws2zVg4+izQCjrakcwHg==}
+    engines: {node: '>=20'}
+
   p-try@2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -3973,6 +4645,9 @@ packages:
     resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
     engines: {node: '>=18'}
 
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -4056,6 +4731,9 @@ packages:
   pgpass@1.0.5:
     resolution: {integrity: sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==}
 
+  piccolore@0.1.3:
+    resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -4164,6 +4842,14 @@ packages:
   prism-media@2.0.0-alpha.0:
     resolution: {integrity: sha512-QL9rnO4xo0grgj7ptsA+AzSCYLirGWM4+ZcyboFmbkYHSgaXIESzHq/SXNizz2iHIfuM2og0cPhmSnTVMeFjKg==}
 
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
+  process-ancestry@0.1.0:
+    resolution: {integrity: sha512-tGqJW/UnclpYASFcM6Xh8D8l/BMtaQ9+CSG0vlJSJTcdMM4lDRv4c6H0Pdcsfted+bVczdYSfk2fdukg2gQkZg==}
+    engines: {node: '>=18.0.0'}
+
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -4178,6 +4864,9 @@ packages:
     resolution: {integrity: sha512-6ZiOBfCywsD4k1BN9IX0uZhF+tJkV8q8llP64G5Hajs4JOeVLPCwpPVcpXy3BwYiUGgyJzsJJQeOIv7+hDSq8g==}
     engines: {node: ^16 || ^18 || >=20}
 
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
   proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -4231,6 +4920,9 @@ packages:
     resolution: {integrity: sha512-k9lSsjl36EJdK7I06v7APZCbyGT2vMTsYSRX1Q2nbYmnkBqgUhRkAuzH08Ciotteu/PLJmIF2+tti7o3C/ts2g==}
     engines: {node: '>=18'}
 
+  radix3@1.1.2:
+    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
+
   range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
@@ -4251,6 +4943,10 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+    engines: {node: '>=0.10.0'}
+
   react@19.2.6:
     resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
     engines: {node: '>=0.10.0'}
@@ -4270,6 +4966,10 @@ packages:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
 
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
   real-require@0.2.0:
     resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
     engines: {node: '>= 12.13.0'}
@@ -4309,10 +5009,28 @@ packages:
   reflect-metadata@0.2.2:
     resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
   regexpp@2.0.1:
     resolution: {integrity: sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==}
     engines: {node: '>=6.5.0'}
 
+  rehype-parse@9.0.1:
+    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
+
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
+
+  rehype@13.0.2:
+    resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -4339,6 +5057,9 @@ packages:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
 
+  retext-smartypants@6.2.0:
+    resolution: {integrity: sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ==}
+
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -4389,6 +5110,13 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  satteri@0.9.4:
+    resolution: {integrity: sha512-BKob126Tay84diOZsnVNH/Q/c+3njPJTCad3w5zLKa6j8bVjxskPNHDtxrMwYK4bN/RlqUSdMnPwKY4k65EMOQ==}
+
+  sax@1.6.0:
+    resolution: {integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==}
+    engines: {node: '>=11.0.0'}
+
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -4449,6 +5177,10 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shiki@4.3.0:
+    resolution: {integrity: sha512-NKKjWzR6LIGL3sXBrWDw9sDS9cxx42/DkysaNqJEeOWE8Kix5gpak0bc00OfDVEO4oyXSyz8+aRaqKoBD1yo7A==}
+    engines: {node: '>=20'}
+
   side-channel-list@1.0.1:
     resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
     engines: {node: '>= 0.4'}
@@ -4481,6 +5213,9 @@ packages:
   simple-get@4.0.1:
     resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
 
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
   slash@2.0.0:
     resolution: {integrity: sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==}
     engines: {node: '>=6'}
@@ -4493,6 +5228,10 @@ packages:
     resolution: {integrity: sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==}
     engines: {node: '>=6'}
 
+  smol-toml@1.7.0:
+    resolution: {integrity: sha512-aqVvWoyO21L23mb+drl4RmMXbf6N7FdHjAhTRA9ZBL7apWBgfWC16KjrASI+1p9GAroljyMHj6fK67i0UiTNvQ==}
+    engines: {node: '>= 18'}
+
   sonic-boom@4.2.1:
     resolution: {integrity: sha512-w6AxtubXa2wTXAUsZMMWERrsIRAdrK0Sc+FUytWvYAhBJLyuI4llrMIC1DtlNSdI99EI86KZum2MMq3EAZlF9Q==}
 
@@ -4511,6 +5250,9 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
 
@@ -4574,6 +5316,9 @@ packages:
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-ansi@5.2.0:
     resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
     engines: {node: '>=6'}
@@ -4618,6 +5363,11 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svgo@4.0.1:
+    resolution: {integrity: sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   table-layout@0.4.5:
     resolution: {integrity: sha512-zTvf0mcggrGeTe/2jJ6ECkJHAQPIYEwDoqsiqBjI24mvRmQbInK5jq33fyypaCBxX08hMkfmdOqj6haT33EqWw==}
     engines: {node: '>=4.0.0'}
@@ -4691,9 +5441,16 @@ packages:
   tiktoken@1.0.22:
     resolution: {integrity: sha512-PKvy1rVF1RibfF3JlXBSP0Jrcw2uq3yXdgcEXtKTYn3QJ/cBRBHDnrJ5jHky+MENZ6DIPwNUGWpkVx+7joCpNA==}
 
+  tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
+  tinyclip@0.1.15:
+    resolution: {integrity: sha512-uo33abH+Ays0xYaDysoBt494Hb3hsEczMpcC0MwFl773pazORx4fmvKhclhR1wonUbB6vvpRsvVMwnhfqeMc+A==}
+    engines: {node: ^16.14.0 || >= 17.3.0}
+
   tinyexec@1.1.2:
     resolution: {integrity: sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==}
     engines: {node: '>=18'}
@@ -4754,10 +5511,16 @@ packages:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
 
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
   trim-newlines@3.0.1:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
 
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
   ts-mixer@6.0.4:
     resolution: {integrity: sha512-ufKpbmrugz5Aou4wcr5Wc1UUFWOLhq+Fm6qa6P0w0K5Qw2yhaUoiWszhCVuNQyNwrlGiscHOmqYoAox1PtvgjA==}
 
@@ -4851,6 +5614,12 @@ packages:
     engines: {node: '>=0.8.0'}
     hasBin: true
 
+  ultrahtml@1.6.0:
+    resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
+
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
   underscore@1.13.8:
     resolution: {integrity: sha512-DXtD3ZtEQzc7M8m4cXotyHR+FAS18C64asBYY5vqZexfYryNNnDc02W4hKg3rdQuqOYas1jkseX0+nZXjTXnvQ==}
 
@@ -4876,6 +5645,27 @@ packages:
     resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
     engines: {node: '>=18'}
 
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unifont@0.7.4:
+    resolution: {integrity: sha512-oHeis4/xl42HUIeHuNZRGEvxj5AaIKR+bHPNegRq5LV1gdc3jundpONbjglKpihmJf+dswygdMJn3eftGIMemg==}
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
   universal-user-agent@6.0.1:
     resolution: {integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==}
 
@@ -4887,6 +5677,68 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  unstorage@1.17.5:
+    resolution: {integrity: sha512-0i3iqvRfx29hkNntHyQvJTpf5W9dQ9ZadSoRU8+xVlhVtT7jAX57fazYO9EHvcRCfBCyi5YRya7XCDOsbTgkPg==}
+    peerDependencies:
+      '@azure/app-configuration': ^1.8.0
+      '@azure/cosmos': ^4.2.0
+      '@azure/data-tables': ^13.3.0
+      '@azure/identity': ^4.6.0
+      '@azure/keyvault-secrets': ^4.9.0
+      '@azure/storage-blob': ^12.26.0
+      '@capacitor/preferences': ^6 || ^7 || ^8
+      '@deno/kv': '>=0.9.0'
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
+      '@planetscale/database': ^1.19.0
+      '@upstash/redis': ^1.34.3
+      '@vercel/blob': '>=0.27.1'
+      '@vercel/functions': ^2.2.12 || ^3.0.0
+      '@vercel/kv': ^1 || ^2 || ^3
+      aws4fetch: ^1.0.20
+      db0: '>=0.2.1'
+      idb-keyval: ^6.2.1
+      ioredis: ^5.4.2
+      uploadthing: ^7.4.4
+    peerDependenciesMeta:
+      '@azure/app-configuration':
+        optional: true
+      '@azure/cosmos':
+        optional: true
+      '@azure/data-tables':
+        optional: true
+      '@azure/identity':
+        optional: true
+      '@azure/keyvault-secrets':
+        optional: true
+      '@azure/storage-blob':
+        optional: true
+      '@capacitor/preferences':
+        optional: true
+      '@deno/kv':
+        optional: true
+      '@netlify/blobs':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/blob':
+        optional: true
+      '@vercel/functions':
+        optional: true
+      '@vercel/kv':
+        optional: true
+      aws4fetch:
+        optional: true
+      db0:
+        optional: true
+      idb-keyval:
+        optional: true
+      ioredis:
+        optional: true
+      uploadthing:
+        optional: true
+
   unzipper@0.12.3:
     resolution: {integrity: sha512-PZ8hTS+AqcGxsaQntl3IRBw65QrBI6lxzqDEL7IAo/XCEqRTKGfOX56Vea5TH9SZczRVxuzk1re04z/YjuYCJA==}
 
@@ -4920,6 +5772,15 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   vite@8.0.13:
     resolution: {integrity: sha512-MFtjBYgzmSxmgA4RAfjIyXWpGe1oALnjgUTzzV7QLx/TKxCzjtMH6Fd9/eVK+5Fg1qNoz5VAwsmMs/NofrmJvw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -4963,6 +5824,14 @@ packages:
       yaml:
         optional: true
 
+  vitefu@1.1.3:
+    resolution: {integrity: sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vitest@4.1.9:
     resolution: {integrity: sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
@@ -5016,6 +5885,9 @@ packages:
     resolution: {integrity: sha512-kudCA8PXVQfrqv2mFTG72vDBRi8BKWxGgFLwPpzHcpZnSwZk93WMwUDVcLHWNsnm+Y0AC4Vb6MUNRgaHfyV2DQ==}
     engines: {node: '>=8.0.0'}
 
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -5048,6 +5920,10 @@ packages:
   which-module@2.0.1:
     resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
 
+  which-pm-runs@1.1.0:
+    resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
+    engines: {node: '>=4'}
+
   which@1.3.1:
     resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
     hasBin: true
@@ -5110,9 +5986,15 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
+  xxhash-wasm@1.1.0:
+    resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
+
   y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
 
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
@@ -5132,6 +6014,10 @@ packages:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
 
+  yargs-parser@22.0.0:
+    resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+
   yargs@14.2.3:
     resolution: {integrity: sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==}
 
@@ -5161,6 +6047,9 @@ packages:
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@actions/core@1.11.1':
@@ -5181,27 +6070,249 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@astrojs/compiler-binding-darwin-arm64@0.3.0':
+    optional: true
+
+  '@astrojs/compiler-binding-darwin-x64@0.3.0':
+    optional: true
+
+  '@astrojs/compiler-binding-linux-arm64-gnu@0.3.0':
+    optional: true
+
+  '@astrojs/compiler-binding-linux-arm64-musl@0.3.0':
+    optional: true
+
+  '@astrojs/compiler-binding-linux-x64-gnu@0.3.0':
+    optional: true
+
+  '@astrojs/compiler-binding-linux-x64-musl@0.3.0':
+    optional: true
+
+  '@astrojs/compiler-binding-wasm32-wasi@0.3.0(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
+
+  '@astrojs/compiler-binding-win32-arm64-msvc@0.3.0':
+    optional: true
+
+  '@astrojs/compiler-binding-win32-x64-msvc@0.3.0':
+    optional: true
+
+  '@astrojs/compiler-binding@0.3.0(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    optionalDependencies:
+      '@astrojs/compiler-binding-darwin-arm64': 0.3.0
+      '@astrojs/compiler-binding-darwin-x64': 0.3.0
+      '@astrojs/compiler-binding-linux-arm64-gnu': 0.3.0
+      '@astrojs/compiler-binding-linux-arm64-musl': 0.3.0
+      '@astrojs/compiler-binding-linux-x64-gnu': 0.3.0
+      '@astrojs/compiler-binding-linux-x64-musl': 0.3.0
+      '@astrojs/compiler-binding-wasm32-wasi': 0.3.0(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+      '@astrojs/compiler-binding-win32-arm64-msvc': 0.3.0
+      '@astrojs/compiler-binding-win32-x64-msvc': 0.3.0
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+
+  '@astrojs/compiler-rs@0.3.0(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    dependencies:
+      '@astrojs/compiler-binding': 0.3.0(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+
+  '@astrojs/internal-helpers@0.10.0':
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      js-yaml: 4.3.0
+      picomatch: 4.0.4
+      retext-smartypants: 6.2.0
+      shiki: 4.3.0
+      smol-toml: 1.7.0
+      unified: 11.0.5
+
+  '@astrojs/markdown-satteri@0.3.2':
+    dependencies:
+      '@astrojs/internal-helpers': 0.10.0
+      '@astrojs/prism': 4.0.2
+      github-slugger: 2.0.0
+      satteri: 0.9.4
+
+  '@astrojs/prism@4.0.2':
+    dependencies:
+      prismjs: 1.30.0
+
+  '@astrojs/react@6.0.0(@types/node@25.9.0)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(esbuild@0.28.0)(jiti@2.7.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tsx@4.22.2)(yaml@2.9.0)':
+    dependencies:
+      '@astrojs/internal-helpers': 0.10.0
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react': 5.2.0(vite@8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0))
+      devalue: 5.8.1
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      ultrahtml: 1.6.0
+      vite: 8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - '@vitejs/devtools'
+      - esbuild
+      - jiti
+      - less
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  '@astrojs/telemetry@3.3.2':
+    dependencies:
+      ci-info: 4.4.0
+      dset: 3.1.4
+      is-docker: 4.0.0
+      is-wsl: 3.1.1
+      which-pm-runs: 1.1.0
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.7': {}
+
+  '@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/core@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.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@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
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.2
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.29.7': {}
+
   '@babel/helper-string-parser@7.27.1': {}
 
+  '@babel/helper-string-parser@7.29.7': {}
+
   '@babel/helper-validator-identifier@7.28.5': {}
 
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-option@7.29.7': {}
+
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+
   '@babel/parser@7.29.3':
     dependencies:
       '@babel/types': 7.29.0
 
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
   '@babel/runtime@7.29.2': {}
 
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@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
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.29.0':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
   '@biomejs/biome@2.3.8':
     optionalDependencies:
       '@biomejs/cli-darwin-arm64': 2.3.8
@@ -5213,63 +6324,94 @@ snapshots:
       '@biomejs/cli-win32-arm64': 2.3.8
       '@biomejs/cli-win32-x64': 2.3.8
 
-  '@biomejs/biome@2.5.0':
+  '@biomejs/biome@2.5.1':
     optionalDependencies:
-      '@biomejs/cli-darwin-arm64': 2.5.0
-      '@biomejs/cli-darwin-x64': 2.5.0
-      '@biomejs/cli-linux-arm64': 2.5.0
-      '@biomejs/cli-linux-arm64-musl': 2.5.0
-      '@biomejs/cli-linux-x64': 2.5.0
-      '@biomejs/cli-linux-x64-musl': 2.5.0
-      '@biomejs/cli-win32-arm64': 2.5.0
-      '@biomejs/cli-win32-x64': 2.5.0
+      '@biomejs/cli-darwin-arm64': 2.5.1
+      '@biomejs/cli-darwin-x64': 2.5.1
+      '@biomejs/cli-linux-arm64': 2.5.1
+      '@biomejs/cli-linux-arm64-musl': 2.5.1
+      '@biomejs/cli-linux-x64': 2.5.1
+      '@biomejs/cli-linux-x64-musl': 2.5.1
+      '@biomejs/cli-win32-arm64': 2.5.1
+      '@biomejs/cli-win32-x64': 2.5.1
 
   '@biomejs/cli-darwin-arm64@2.3.8':
     optional: true
 
-  '@biomejs/cli-darwin-arm64@2.5.0':
+  '@biomejs/cli-darwin-arm64@2.5.1':
     optional: true
 
   '@biomejs/cli-darwin-x64@2.3.8':
     optional: true
 
-  '@biomejs/cli-darwin-x64@2.5.0':
+  '@biomejs/cli-darwin-x64@2.5.1':
     optional: true
 
   '@biomejs/cli-linux-arm64-musl@2.3.8':
     optional: true
 
-  '@biomejs/cli-linux-arm64-musl@2.5.0':
+  '@biomejs/cli-linux-arm64-musl@2.5.1':
     optional: true
 
   '@biomejs/cli-linux-arm64@2.3.8':
     optional: true
 
-  '@biomejs/cli-linux-arm64@2.5.0':
+  '@biomejs/cli-linux-arm64@2.5.1':
     optional: true
 
   '@biomejs/cli-linux-x64-musl@2.3.8':
     optional: true
 
-  '@biomejs/cli-linux-x64-musl@2.5.0':
+  '@biomejs/cli-linux-x64-musl@2.5.1':
     optional: true
 
   '@biomejs/cli-linux-x64@2.3.8':
     optional: true
 
-  '@biomejs/cli-linux-x64@2.5.0':
+  '@biomejs/cli-linux-x64@2.5.1':
     optional: true
 
   '@biomejs/cli-win32-arm64@2.3.8':
     optional: true
 
-  '@biomejs/cli-win32-arm64@2.5.0':
+  '@biomejs/cli-win32-arm64@2.5.1':
     optional: true
 
   '@biomejs/cli-win32-x64@2.3.8':
     optional: true
 
-  '@biomejs/cli-win32-x64@2.5.0':
+  '@biomejs/cli-win32-x64@2.5.1':
+    optional: true
+
+  '@bruits/satteri-darwin-arm64@0.9.4':
+    optional: true
+
+  '@bruits/satteri-darwin-x64@0.9.4':
+    optional: true
+
+  '@bruits/satteri-linux-arm64-gnu@0.9.4':
+    optional: true
+
+  '@bruits/satteri-linux-arm64-musl@0.9.4':
+    optional: true
+
+  '@bruits/satteri-linux-x64-gnu@0.9.4':
+    optional: true
+
+  '@bruits/satteri-linux-x64-musl@0.9.4':
+    optional: true
+
+  '@bruits/satteri-wasm32-wasi@0.9.4':
+    dependencies:
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+    optional: true
+
+  '@bruits/satteri-win32-arm64-msvc@0.9.4':
+    optional: true
+
+  '@bruits/satteri-win32-x64-msvc@0.9.4':
     optional: true
 
   '@canvas/image-data@1.1.0': {}
@@ -5288,6 +6430,22 @@ snapshots:
       fast-base64-length: 1.0.0
       simple-get: 4.0.1
 
+  '@capsizecss/unpack@4.0.1':
+    dependencies:
+      fontkitten: 1.0.3
+
+  '@clack/core@1.4.2':
+    dependencies:
+      fast-wrap-ansi: 0.2.2
+      sisteransi: 1.0.5
+
+  '@clack/prompts@1.6.0':
+    dependencies:
+      '@clack/core': 1.4.2
+      fast-string-width: 3.0.2
+      fast-wrap-ansi: 0.2.2
+      sisteransi: 1.0.5
+
   '@cwasm/jpeg-turbo@0.1.3':
     dependencies:
       '@canvas/image-data': 1.1.0
@@ -5361,9 +6519,27 @@ snapshots:
     dependencies:
       discord-api-types: 0.38.47
 
-  '@discordjs/voice@0.19.2(@discordjs/opus@0.10.0)(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(opusscript@0.0.8)':
+  '@discordjs/voice@0.19.2(@discordjs/opus@0.10.0)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(opusscript@0.0.8)':
     dependencies:
-      '@snazzah/davey': 0.1.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@snazzah/davey': 0.1.11(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+      '@types/ws': 8.18.1
+      discord-api-types: 0.38.47
+      prism-media: 1.3.5(@discordjs/opus@0.10.0)(opusscript@0.0.8)
+      tslib: 2.8.1
+      ws: 8.20.1
+    transitivePeerDependencies:
+      - '@discordjs/opus'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - bufferutil
+      - ffmpeg-static
+      - node-opus
+      - opusscript
+      - utf-8-validate
+
+  '@discordjs/voice@0.19.2(@discordjs/opus@0.10.0)(opusscript@0.0.8)':
+    dependencies:
+      '@snazzah/davey': 0.1.11
       '@types/ws': 8.18.1
       discord-api-types: 0.38.47
       prism-media: 1.3.5(@discordjs/opus@0.10.0)(opusscript@0.0.8)
@@ -5387,16 +6563,32 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/core@1.11.1':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.2
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/runtime@1.11.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/wasi-threads@1.2.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@esbuild-kit/core-utils@3.3.2':
     dependencies:
       esbuild: 0.18.20
@@ -5848,6 +7040,11 @@ snapshots:
       '@napi-rs/nice-win32-x64-msvc': 1.1.1
     optional: true
 
+  '@napi-rs/wasm-runtime@1.1.4':
+    dependencies:
+      '@tybys/wasm-util': 0.10.2
+    optional: true
+
   '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -5855,6 +7052,20 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    dependencies:
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@tybys/wasm-util': 0.10.2
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    dependencies:
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
   '@noble/curves@1.9.7':
     dependencies:
       '@noble/hashes': 1.8.0
@@ -5947,6 +7158,8 @@ snapshots:
 
   '@opentelemetry/api@1.9.1': {}
 
+  '@oslojs/encoding@1.1.0': {}
+
   '@otplib/core@12.0.1': {}
 
   '@otplib/plugin-crypto@12.0.1':
@@ -6268,8 +7481,16 @@ snapshots:
   '@rolldown/binding-win32-x64-msvc@1.0.1':
     optional: true
 
+  '@rolldown/pluginutils@1.0.0-rc.3': {}
+
   '@rolldown/pluginutils@1.0.1': {}
 
+  '@rollup/pluginutils@5.4.0':
+    dependencies:
+      '@types/estree': 1.0.9
+      estree-walker: 2.0.2
+      picomatch: 4.0.4
+
   '@sapphire/async-queue@1.5.5': {}
 
   '@sapphire/shapeshift@4.0.0':
@@ -6303,6 +7524,46 @@ snapshots:
   '@seydx/node-av-win32-x64-msvc@5.2.4':
     optional: true
 
+  '@shikijs/core@4.3.0':
+    dependencies:
+      '@shikijs/primitive': 4.3.0
+      '@shikijs/types': 4.3.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@4.3.0':
+    dependencies:
+      '@shikijs/types': 4.3.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.6
+
+  '@shikijs/engine-oniguruma@4.3.0':
+    dependencies:
+      '@shikijs/types': 4.3.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@4.3.0':
+    dependencies:
+      '@shikijs/types': 4.3.0
+
+  '@shikijs/primitive@4.3.0':
+    dependencies:
+      '@shikijs/types': 4.3.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/themes@4.3.0':
+    dependencies:
+      '@shikijs/types': 4.3.0
+
+  '@shikijs/types@4.3.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
   '@shinyoshiaki/binary-data@0.6.1':
     dependencies:
       generate-function: 2.3.1
@@ -6344,9 +7605,17 @@ snapshots:
   '@snazzah/davey-linux-x64-musl@0.1.11':
     optional: true
 
-  '@snazzah/davey-wasm32-wasi@0.1.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+  '@snazzah/davey-wasm32-wasi@0.1.11':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.1.4
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
+
+  '@snazzah/davey-wasm32-wasi@0.1.11(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
@@ -6361,7 +7630,7 @@ snapshots:
   '@snazzah/davey-win32-x64-msvc@0.1.11':
     optional: true
 
-  '@snazzah/davey@0.1.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+  '@snazzah/davey@0.1.11':
     optionalDependencies:
       '@snazzah/davey-android-arm-eabi': 0.1.11
       '@snazzah/davey-android-arm64': 0.1.11
@@ -6373,7 +7642,27 @@ snapshots:
       '@snazzah/davey-linux-arm64-musl': 0.1.11
       '@snazzah/davey-linux-x64-gnu': 0.1.11
       '@snazzah/davey-linux-x64-musl': 0.1.11
-      '@snazzah/davey-wasm32-wasi': 0.1.11(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@snazzah/davey-wasm32-wasi': 0.1.11
+      '@snazzah/davey-win32-arm64-msvc': 0.1.11
+      '@snazzah/davey-win32-ia32-msvc': 0.1.11
+      '@snazzah/davey-win32-x64-msvc': 0.1.11
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+
+  '@snazzah/davey@0.1.11(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+    optionalDependencies:
+      '@snazzah/davey-android-arm-eabi': 0.1.11
+      '@snazzah/davey-android-arm64': 0.1.11
+      '@snazzah/davey-darwin-arm64': 0.1.11
+      '@snazzah/davey-darwin-x64': 0.1.11
+      '@snazzah/davey-freebsd-x64': 0.1.11
+      '@snazzah/davey-linux-arm-gnueabihf': 0.1.11
+      '@snazzah/davey-linux-arm64-gnu': 0.1.11
+      '@snazzah/davey-linux-arm64-musl': 0.1.11
+      '@snazzah/davey-linux-x64-gnu': 0.1.11
+      '@snazzah/davey-linux-x64-musl': 0.1.11
+      '@snazzah/davey-wasm32-wasi': 0.1.11(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
       '@snazzah/davey-win32-arm64-msvc': 0.1.11
       '@snazzah/davey-win32-ia32-msvc': 0.1.11
       '@snazzah/davey-win32-x64-msvc': 0.1.11
@@ -6459,6 +7748,32 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@tybys/wasm-util@0.10.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.3
+      '@babel/types': 7.29.0
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.3
+      '@babel/types': 7.29.0
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
   '@types/body-parser@1.19.6':
     dependencies:
       '@types/connect': 3.4.38
@@ -6473,6 +7788,10 @@ snapshots:
     dependencies:
       '@types/node': 25.9.0
 
+  '@types/cors@2.8.19':
+    dependencies:
+      '@types/node': 25.9.0
+
   '@types/debug@4.1.13':
     dependencies:
       '@types/ms': 2.1.0
@@ -6484,8 +7803,18 @@ snapshots:
       '@types/estree': 1.0.9
       '@types/json-schema': 7.0.15
 
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.9
+
   '@types/estree@1.0.9': {}
 
+  '@types/express-rate-limit@6.0.2(express@5.2.1)':
+    dependencies:
+      express-rate-limit: 8.5.2(express@5.2.1)
+    transitivePeerDependencies:
+      - express
+
   '@types/express-serve-static-core@5.1.1':
     dependencies:
       '@types/node': 25.9.0
@@ -6503,6 +7832,10 @@ snapshots:
     dependencies:
       '@types/node': 25.9.0
 
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/http-errors@2.0.5': {}
 
   '@types/json-schema@7.0.15': {}
@@ -6514,12 +7847,20 @@ snapshots:
       '@types/linkify-it': 5.0.0
       '@types/mdurl': 2.0.0
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/mdurl@2.0.0': {}
 
   '@types/minimist@1.2.5': {}
 
   '@types/ms@2.1.0': {}
 
+  '@types/nlcst@2.0.3':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/node@22.19.20':
     dependencies:
       undici-types: 6.21.0
@@ -6561,14 +7902,25 @@ snapshots:
       '@types/http-errors': 2.0.5
       '@types/node': 25.9.0
 
+  '@types/unist@3.0.3': {}
+
   '@types/ws@8.18.1':
     dependencies:
       '@types/node': 25.8.0
 
-  '@vitejs/plugin-react@6.0.2(vite@8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0))':
+  '@ungap/structured-clone@1.3.2': {}
+
+  '@vitejs/plugin-react@5.2.0(vite@8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0))':
     dependencies:
-      '@rolldown/pluginutils': 1.0.1
+      '@babel/core': 7.29.7
+      '@babel/plugin-transform-react-jsx-self': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx-source': 7.29.7(@babel/core@7.29.7)
+      '@rolldown/pluginutils': 1.0.0-rc.3
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
       vite: 8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - supports-color
 
   '@vitest/expect@4.1.9':
     dependencies:
@@ -6643,6 +7995,10 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  am-i-vibing@0.4.0:
+    dependencies:
+      process-ancestry: 0.1.0
+
   ansi-escape-sequences@4.1.0:
     dependencies:
       array-back: 3.1.0
@@ -6665,6 +8021,11 @@ snapshots:
 
   ansi-styles@5.2.0: {}
 
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.2
+
   aproba@2.1.0: {}
 
   are-we-there-yet@2.0.0:
@@ -6678,6 +8039,8 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-query@5.3.2: {}
+
   array-back@1.0.4:
     dependencies:
       typical: 2.6.1
@@ -6704,6 +8067,101 @@ snapshots:
 
   astral-regex@1.0.0: {}
 
+  astro@7.0.4(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@25.9.0)(ioredis@5.11.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0):
+    dependencies:
+      '@astrojs/compiler-rs': 0.3.0(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+      '@astrojs/internal-helpers': 0.10.0
+      '@astrojs/markdown-satteri': 0.3.2
+      '@astrojs/telemetry': 3.3.2
+      '@capsizecss/unpack': 4.0.1
+      '@clack/prompts': 1.6.0
+      '@oslojs/encoding': 1.1.0
+      '@rollup/pluginutils': 5.4.0
+      am-i-vibing: 0.4.0
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      ci-info: 4.4.0
+      clsx: 2.1.1
+      common-ancestor-path: 2.0.0
+      cookie: 1.1.1
+      devalue: 5.8.1
+      diff: 8.0.4
+      dset: 3.1.4
+      es-module-lexer: 2.1.0
+      esbuild: 0.28.0
+      flattie: 1.1.1
+      fontace: 0.4.1
+      get-tsconfig: 5.0.0-beta.4
+      github-slugger: 2.0.0
+      html-escaper: 3.0.3
+      http-cache-semantics: 4.2.0
+      js-yaml: 4.3.0
+      jsonc-parser: 3.3.1
+      magic-string: 0.30.21
+      magicast: 0.5.3
+      mrmime: 2.0.1
+      neotraverse: 0.6.18
+      obug: 2.1.1
+      p-limit: 7.3.0
+      p-queue: 9.3.0
+      package-manager-detector: 1.6.0
+      piccolore: 0.1.3
+      picomatch: 4.0.4
+      rehype: 13.0.2
+      semver: 7.8.0
+      shiki: 4.3.0
+      smol-toml: 1.7.0
+      svgo: 4.0.1
+      tinyclip: 0.1.15
+      tinyexec: 1.1.2
+      tinyglobby: 0.2.16
+      ultrahtml: 1.6.0
+      unifont: 0.7.4
+      unist-util-visit: 5.1.0
+      unstorage: 1.17.5(ioredis@5.11.0)
+      vfile: 6.0.3
+      vite: 8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0)
+      vitefu: 1.1.3(vite@8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0))
+      xxhash-wasm: 1.1.0
+      yargs-parser: 22.0.0
+      zod: 4.4.3
+    optionalDependencies:
+      sharp: 0.34.5
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@types/node'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - '@vitejs/devtools'
+      - aws4fetch
+      - db0
+      - idb-keyval
+      - ioredis
+      - jiti
+      - less
+      - rollup
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - uploadthing
+      - yaml
+
   asyncc@2.0.9: {}
 
   asynckit@0.4.0: {}
@@ -6729,6 +8187,10 @@ snapshots:
       - debug
       - supports-color
 
+  axobject-query@4.1.0: {}
+
+  bail@2.0.2: {}
+
   balanced-match@1.0.2: {}
 
   base64-js@1.5.1: {}
@@ -6763,6 +8225,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  boolbase@1.0.0: {}
+
   brace-expansion@1.1.14:
     dependencies:
       balanced-match: 1.0.2
@@ -6837,6 +8301,8 @@ snapshots:
     dependencies:
       lodash: 4.18.1
 
+  ccount@2.0.1: {}
+
   chai@6.2.2: {}
 
   chalk@2.4.2:
@@ -6850,14 +8316,24 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
   chardet@0.7.0: {}
 
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
   chownr@1.1.4: {}
 
   chownr@2.0.0: {}
 
   ci-info@3.9.0: {}
 
+  ci-info@4.4.0: {}
+
   cli-cursor@3.1.0:
     dependencies:
       restore-cursor: 3.1.0
@@ -6907,6 +8383,8 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  comma-separated-tokens@2.0.3: {}
+
   command-line-args@5.2.1:
     dependencies:
       array-back: 3.1.0
@@ -6929,8 +8407,12 @@ snapshots:
       table-layout: 0.4.5
       typical: 2.6.1
 
+  commander@11.1.0: {}
+
   commander@14.0.3: {}
 
+  common-ancestor-path@2.0.0: {}
+
   common-sequence@2.0.2: {}
 
   concat-map@0.0.1: {}
@@ -6951,12 +8433,21 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  cookie-es@1.2.3: {}
+
   cookie-signature@1.2.2: {}
 
   cookie@0.7.2: {}
 
+  cookie@1.1.1: {}
+
   core-util-is@1.0.3: {}
 
+  cors@2.8.6:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
   cross-spawn@6.0.6:
     dependencies:
       nice-try: 1.0.5
@@ -6971,6 +8462,34 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crossws@0.3.5:
+    dependencies:
+      uncrypto: 0.1.3
+
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
+  css-what@6.2.2: {}
+
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
   csstype@3.2.3: {}
 
   date-fns@2.30.0:
@@ -7035,6 +8554,8 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  defu@6.1.7: {}
+
   delayed-stream@1.0.0: {}
 
   delegates@1.0.0: {}
@@ -7045,10 +8566,22 @@ snapshots:
 
   deprecation@2.3.1: {}
 
+  dequal@2.0.3: {}
+
+  destr@2.0.5: {}
+
   detect-libc@2.1.2: {}
 
+  devalue@5.8.1: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
   diff-sequences@29.6.3: {}
 
+  diff@8.0.4: {}
+
   dijkstrajs@1.0.3: {}
 
   dir-glob@3.0.1:
@@ -7080,6 +8613,24 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dotenv@17.4.2: {}
 
   drizzle-kit@0.31.10:
@@ -7095,6 +8646,8 @@ snapshots:
       '@types/pg': 8.20.0
       pg: 8.21.0
 
+  dset@3.1.4: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -7128,6 +8681,10 @@ snapshots:
 
   entities@2.1.0: {}
 
+  entities@4.5.0: {}
+
+  entities@6.0.1: {}
+
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
@@ -7326,6 +8883,8 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-walker@2.0.2: {}
+
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.9
@@ -7334,6 +8893,8 @@ snapshots:
 
   etag@1.8.1: {}
 
+  eventemitter3@5.0.4: {}
+
   execa@9.6.1:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
@@ -7353,6 +8914,11 @@ snapshots:
 
   expect-type@1.3.0: {}
 
+  express-rate-limit@8.5.2(express@5.2.1):
+    dependencies:
+      express: 5.2.1
+      ip-address: 10.2.0
+
   express@5.2.1:
     dependencies:
       accepts: 2.0.0
@@ -7386,6 +8952,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  extend@3.0.2: {}
+
   external-editor@3.1.0:
     dependencies:
       chardet: 0.7.0
@@ -7416,6 +8984,16 @@ snapshots:
 
   fast-safe-stringify@2.1.1: {}
 
+  fast-string-truncated-width@3.0.3: {}
+
+  fast-string-width@3.0.2:
+    dependencies:
+      fast-string-truncated-width: 3.0.3
+
+  fast-wrap-ansi@0.2.2:
+    dependencies:
+      fast-string-width: 3.0.2
+
   fastq@1.20.1:
     dependencies:
       reusify: 1.1.0
@@ -7503,6 +9081,8 @@ snapshots:
 
   flatted@2.0.2: {}
 
+  flattie@1.1.1: {}
+
   fluent-ffmpeg-simplified@0.1.0:
     dependencies:
       execa: 9.6.1
@@ -7510,6 +9090,14 @@ snapshots:
 
   follow-redirects@1.16.0: {}
 
+  fontace@0.4.1:
+    dependencies:
+      fontkitten: 1.0.3
+
+  fontkitten@1.0.3:
+    dependencies:
+      tiny-inflate: 1.0.3
+
   form-data@4.0.5:
     dependencies:
       asynckit: 0.4.0
@@ -7578,6 +9166,8 @@ snapshots:
     dependencies:
       is-property: 1.0.2
 
+  gensync@1.0.0-beta.2: {}
+
   get-caller-file@2.0.5: {}
 
   get-intrinsic@1.3.0:
@@ -7607,8 +9197,14 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  get-tsconfig@5.0.0-beta.4:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   github-from-package@0.0.0: {}
 
+  github-slugger@2.0.0: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -7639,6 +9235,18 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  h3@1.15.11:
+    dependencies:
+      cookie-es: 1.2.3
+      crossws: 0.3.5
+      defu: 6.1.7
+      destr: 2.0.5
+      iron-webcrypto: 1.2.1
+      node-mock-http: 1.0.4
+      radix3: 1.1.2
+      ufo: 1.6.4
+      uncrypto: 0.1.3
+
   handlebars@4.7.9:
     dependencies:
       minimist: 1.2.8
@@ -7670,6 +9278,56 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.3
+      parse5: 7.3.0
+      vfile: 6.0.3
+      vfile-message: 4.0.3
+
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.2.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+
   helmet@8.1.0: {}
 
   help-me@5.0.0: {}
@@ -7680,6 +9338,12 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
+  html-escaper@3.0.3: {}
+
+  html-void-elements@3.0.0: {}
+
+  http-cache-semantics@4.2.0: {}
+
   http-errors@2.0.1:
     dependencies:
       depd: 2.0.0
@@ -7770,10 +9434,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  ip-address@10.2.0: {}
+
   ip@2.0.1: {}
 
   ipaddr.js@1.9.1: {}
 
+  iron-webcrypto@1.2.1: {}
+
   irregular-plurals@3.5.0: {}
 
   is-arrayish@0.2.1: {}
@@ -7784,6 +9452,10 @@ snapshots:
 
   is-docker@2.2.1: {}
 
+  is-docker@3.0.0: {}
+
+  is-docker@4.0.0: {}
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@2.0.0: {}
@@ -7794,6 +9466,10 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
   is-network-error@1.3.2: {}
 
   is-number@7.0.0: {}
@@ -7820,6 +9496,10 @@ snapshots:
     dependencies:
       is-docker: 2.2.1
 
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
   isarray@1.0.0: {}
 
   isarray@2.0.5: {}
@@ -7852,6 +9532,10 @@ snapshots:
       argparse: 1.0.10
       esprima: 4.0.1
 
+  js-yaml@4.3.0:
+    dependencies:
+      argparse: 2.0.1
+
   js2xmlparser@4.0.2:
     dependencies:
       xmlcreate: 2.0.4
@@ -7905,6 +9589,8 @@ snapshots:
       taffydb: 2.6.2
       underscore: 1.13.8
 
+  jsesc@3.1.0: {}
+
   json-parse-even-better-errors@2.3.1: {}
 
   json-schema-traverse@0.4.1: {}
@@ -7919,6 +9605,10 @@ snapshots:
       jsonify: 0.0.1
       object-keys: 1.1.1
 
+  json5@2.2.3: {}
+
+  jsonc-parser@3.3.1: {}
+
   jsonfile@6.2.1:
     dependencies:
       universalify: 2.0.1
@@ -8031,6 +9721,10 @@ snapshots:
 
   lru-cache@11.5.1: {}
 
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
   lru-cache@6.0.0:
     dependencies:
       yallist: 4.0.0
@@ -8043,6 +9737,12 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magicast@0.5.3:
+    dependencies:
+      '@babel/parser': 7.29.3
+      '@babel/types': 7.29.0
+      source-map-js: 1.2.1
+
   make-dir@3.1.0:
     dependencies:
       semver: 6.3.1
@@ -8072,6 +9772,22 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.2
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  mdn-data@2.0.28: {}
+
+  mdn-data@2.27.1: {}
+
   mdurl@1.0.1: {}
 
   media-typer@1.1.0: {}
@@ -8095,6 +9811,23 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -8166,6 +9899,8 @@ snapshots:
 
   mp4box@0.5.4: {}
 
+  mrmime@2.0.1: {}
+
   ms@2.1.3: {}
 
   multicast-dns@7.2.5:
@@ -8185,8 +9920,14 @@ snapshots:
 
   neo-async@2.6.2: {}
 
+  neotraverse@0.6.18: {}
+
   nice-try@1.0.5: {}
 
+  nlcst-to-string@4.0.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+
   node-abi@3.92.0:
     dependencies:
       semver: 7.8.0
@@ -8214,12 +9955,16 @@ snapshots:
       '@napi-rs/cli': 2.18.4
       '@types/node': 22.19.20
 
+  node-fetch-native@1.6.7: {}
+
   node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
 
   node-int64@0.4.0: {}
 
+  node-mock-http@1.0.4: {}
+
   node-releases@2.0.44: {}
 
   nopt@5.0.0:
@@ -8240,6 +9985,8 @@ snapshots:
       semver: 7.8.0
       validate-npm-package-license: 3.0.4
 
+  normalize-path@3.0.0: {}
+
   npm-run-path@6.0.0:
     dependencies:
       path-key: 4.0.0
@@ -8252,6 +9999,10 @@ snapshots:
       gauge: 3.0.2
       set-blocking: 2.0.0
 
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
   object-assign@4.1.1: {}
 
   object-get@2.1.1: {}
@@ -8264,6 +10015,14 @@ snapshots:
 
   obug@2.1.1: {}
 
+  ofetch@1.5.1:
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.4
+
+  ohash@2.0.11: {}
+
   on-exit-leak-free@2.1.2: {}
 
   on-finished@2.4.1:
@@ -8278,6 +10037,14 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  oniguruma-parser@0.12.2: {}
+
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
   open@7.4.2:
     dependencies:
       is-docker: 2.2.1
@@ -8327,12 +10094,21 @@ snapshots:
     dependencies:
       p-limit: 2.3.0
 
+  p-queue@9.3.0:
+    dependencies:
+      eventemitter3: 5.0.4
+      p-timeout: 7.0.1
+
   p-retry@8.0.0:
     dependencies:
       is-network-error: 1.3.2
 
+  p-timeout@7.0.1: {}
+
   p-try@2.2.0: {}
 
+  package-manager-detector@1.6.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -8346,6 +10122,10 @@ snapshots:
 
   parse-ms@4.0.0: {}
 
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
   parseurl@1.3.3: {}
 
   patch-package@8.0.1:
@@ -8422,6 +10202,8 @@ snapshots:
     dependencies:
       split2: 4.2.0
 
+  piccolore@0.1.3: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.2: {}
@@ -8549,6 +10331,10 @@ snapshots:
     dependencies:
       duplex-child-process: 1.0.1
 
+  prismjs@1.30.0: {}
+
+  process-ancestry@0.1.0: {}
+
   process-nextick-args@2.0.1: {}
 
   process-warning@5.0.0: {}
@@ -8560,6 +10346,8 @@ snapshots:
       '@opentelemetry/api': 1.9.1
       tdigest: 0.1.2
 
+  property-information@7.2.0: {}
+
   proxy-addr@2.0.7:
     dependencies:
       forwarded: 0.2.0
@@ -8613,6 +10401,8 @@ snapshots:
 
   quick-lru@7.3.0: {}
 
+  radix3@1.1.2: {}
+
   range-parser@1.2.1: {}
 
   raw-body@3.0.2:
@@ -8636,6 +10426,8 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-refresh@0.18.0: {}
+
   react@19.2.6: {}
 
   read-pkg-up@7.0.1:
@@ -8667,6 +10459,8 @@ snapshots:
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
+  readdirp@5.0.0: {}
+
   real-require@0.2.0: {}
 
   redent@3.0.0:
@@ -8696,8 +10490,37 @@ snapshots:
 
   reflect-metadata@0.2.2: {}
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
   regexpp@2.0.1: {}
 
+  rehype-parse@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-html: 2.0.3
+      unified: 11.0.5
+
+  rehype-stringify@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+      unified: 11.0.5
+
+  rehype@13.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      rehype-parse: 9.0.1
+      rehype-stringify: 10.0.1
+      unified: 11.0.5
+
   require-directory@2.1.1: {}
 
   require-main-filename@2.0.0: {}
@@ -8722,6 +10545,12 @@ snapshots:
       onetime: 5.1.2
       signal-exit: 3.0.7
 
+  retext-smartypants@6.2.0:
+    dependencies:
+      '@types/nlcst': 2.0.3
+      nlcst-to-string: 4.0.0
+      unist-util-visit: 5.1.0
+
   reusify@1.1.0: {}
 
   rimraf@2.6.3:
@@ -8783,6 +10612,25 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  satteri@0.9.4:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+    optionalDependencies:
+      '@bruits/satteri-darwin-arm64': 0.9.4
+      '@bruits/satteri-darwin-x64': 0.9.4
+      '@bruits/satteri-linux-arm64-gnu': 0.9.4
+      '@bruits/satteri-linux-arm64-musl': 0.9.4
+      '@bruits/satteri-linux-x64-gnu': 0.9.4
+      '@bruits/satteri-linux-x64-musl': 0.9.4
+      '@bruits/satteri-wasm32-wasi': 0.9.4
+      '@bruits/satteri-win32-arm64-msvc': 0.9.4
+      '@bruits/satteri-win32-x64-msvc': 0.9.4
+
+  sax@1.6.0: {}
+
   scheduler@0.27.0: {}
 
   secure-json-parse@4.1.0: {}
@@ -8876,6 +10724,17 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shiki@4.3.0:
+    dependencies:
+      '@shikijs/core': 4.3.0
+      '@shikijs/engine-javascript': 4.3.0
+      '@shikijs/engine-oniguruma': 4.3.0
+      '@shikijs/langs': 4.3.0
+      '@shikijs/themes': 4.3.0
+      '@shikijs/types': 4.3.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   side-channel-list@1.0.1:
     dependencies:
       es-errors: 1.3.0
@@ -8918,6 +10777,8 @@ snapshots:
       once: 1.4.0
       simple-concat: 1.0.1
 
+  sisteransi@1.0.5: {}
+
   slash@2.0.0: {}
 
   slash@3.0.0: {}
@@ -8928,6 +10789,8 @@ snapshots:
       astral-regex: 1.0.0
       is-fullwidth-code-point: 2.0.0
 
+  smol-toml@1.7.0: {}
+
   sonic-boom@4.2.1:
     dependencies:
       atomic-sleep: 1.0.0
@@ -8947,6 +10810,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  space-separated-tokens@2.0.2: {}
+
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
@@ -9003,6 +10868,11 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-ansi@5.2.0:
     dependencies:
       ansi-regex: 4.1.1
@@ -9038,6 +10908,16 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svgo@4.0.1:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.2.1
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.6.0
+
   table-layout@0.4.5:
     dependencies:
       array-back: 2.0.0
@@ -9120,8 +11000,12 @@ snapshots:
 
   tiktoken@1.0.22: {}
 
+  tiny-inflate@1.0.3: {}
+
   tinybench@2.9.0: {}
 
+  tinyclip@0.1.15: {}
+
   tinyexec@1.1.2: {}
 
   tinyglobby@0.2.16:
@@ -9169,8 +11053,12 @@ snapshots:
 
   tree-kill@1.2.2: {}
 
+  trim-lines@3.0.1: {}
+
   trim-newlines@3.0.1: {}
 
+  trough@2.2.0: {}
+
   ts-mixer@6.0.4: {}
 
   tsd@0.33.0:
@@ -9246,6 +11134,10 @@ snapshots:
   uglify-js@3.19.3:
     optional: true
 
+  ultrahtml@1.6.0: {}
+
+  uncrypto@0.1.3: {}
+
   underscore@1.13.8: {}
 
   undici-types@6.21.0: {}
@@ -9262,12 +11154,64 @@ snapshots:
 
   unicorn-magic@0.3.0: {}
 
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unifont@0.7.4:
+    dependencies:
+      css-tree: 3.2.1
+      ofetch: 1.5.1
+      ohash: 2.0.11
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
   universal-user-agent@6.0.1: {}
 
   universalify@2.0.1: {}
 
   unpipe@1.0.0: {}
 
+  unstorage@1.17.5(ioredis@5.11.0):
+    dependencies:
+      anymatch: 3.1.3
+      chokidar: 5.0.0
+      destr: 2.0.5
+      h3: 1.15.11
+      lru-cache: 11.5.1
+      node-fetch-native: 1.6.7
+      ofetch: 1.5.1
+      ufo: 1.6.4
+    optionalDependencies:
+      ioredis: 5.11.0
+
   unzipper@0.12.3:
     dependencies:
       bluebird: 3.7.2
@@ -9301,6 +11245,21 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
   vite@8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0):
     dependencies:
       lightningcss: 1.32.0
@@ -9316,6 +11275,10 @@ snapshots:
       tsx: 4.22.2
       yaml: 2.9.0
 
+  vitefu@1.1.3(vite@8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0)):
+    optionalDependencies:
+      vite: 8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0)
+
   vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@25.9.0)(vite@8.0.13(@types/node@25.9.0)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.2)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.9
@@ -9350,6 +11313,8 @@ snapshots:
 
   walk-back@4.0.0: {}
 
+  web-namespaces@2.0.1: {}
+
   webidl-conversions@3.0.1: {}
 
   werift-common@0.0.3:
@@ -9428,6 +11393,8 @@ snapshots:
 
   which-module@2.0.1: {}
 
+  which-pm-runs@1.1.0: {}
+
   which@1.3.1:
     dependencies:
       isexe: 2.0.0
@@ -9478,8 +11445,12 @@ snapshots:
 
   xtend@4.0.2: {}
 
+  xxhash-wasm@1.1.0: {}
+
   y18n@4.0.3: {}
 
+  yallist@3.1.1: {}
+
   yallist@4.0.0: {}
 
   yaml@2.9.0: {}
@@ -9496,6 +11467,8 @@ snapshots:
 
   yargs-parser@20.2.9: {}
 
+  yargs-parser@22.0.0: {}
+
   yargs@14.2.3:
     dependencies:
       cliui: 5.0.0
@@ -9540,3 +11513,5 @@ snapshots:
   zod@3.25.76: {}
 
   zod@4.4.3: {}
+
+  zwitch@2.0.4: {}
diff --git a/services/backend/package.json b/services/backend/package.json
index 96e1540..8a4f6f6 100644
--- a/services/backend/package.json
+++ b/services/backend/package.json
@@ -17,9 +17,11 @@
     "@bete/shared": "workspace:*",
     "@discordjs/voice": "^0.19.2",
     "axios": "^1.16.1",
+    "cors": "^2.8.6",
     "dotenv": "^17.4.2",
     "drizzle-orm": "^0.45.2",
     "express": "^5.2.1",
+    "express-rate-limit": "^8.5.2",
     "helmet": "^8.1.0",
     "ioredis": "^5.11.0",
     "pg": "^8.21.0",
@@ -30,12 +32,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "latest",
+    "@types/cors": "^2.8.19",
     "@types/express": "^5.0.6",
+    "@types/express-rate-limit": "^6.0.2",
     "@types/node": "^25.9.0",
+    "@types/pg": "^8.20.0",
     "@types/ws": "^8.18.1",
     "tsx": "^4.22.2",
     "typescript": "^5.9.3",
-    "@types/pg": "^8.20.0",
     "vitest": "latest"
   }
 }
diff --git a/services/backend/src/e2e.test.ts b/services/backend/src/e2e.test.ts
index fafc5ce..c943fe2 100644
--- a/services/backend/src/e2e.test.ts
+++ b/services/backend/src/e2e.test.ts
@@ -4,7 +4,15 @@
  */
 import { describe, it, expect } from "vitest";
 
-const BASE = process.env.API_BASE ?? "https://imphnen.asepharyana.my.id/api";
+// Safety: never default to a production URL — forces explicit opt-in
+// via: API_BASE=http://localhost:3001/api vitest run
+const RAW = process.env.API_BASE;
+if (!RAW) {
+  throw new Error(
+    "API_BASE is not set. Run with: API_BASE=http://localhost:3001/api vitest run",
+  );
+}
+const BASE = RAW;
 
 async function api(path: string, init?: RequestInit) {
   const res = await fetch(`${BASE}${path}`, {
diff --git a/services/backend/src/http/app.ts b/services/backend/src/http/app.ts
index f83f9d7..4370d3b 100644
--- a/services/backend/src/http/app.ts
+++ b/services/backend/src/http/app.ts
@@ -1,3 +1,4 @@
+import cors from "cors";
 import { createChildLogger } from "@bete/shared/logger";
 import express, {
   type Express,
@@ -6,6 +7,8 @@ import express, {
   type Response,
 } from "express";
 import helmet from "helmet";
+import rateLimit from "express-rate-limit";
+import { createAdminRouter } from "../modules/admin/admin.routes.js";
 import { createAnalysisRouter } from "../modules/analysis/analysis.routes.js";
 import { createAuthRouter } from "../modules/auth/auth.routes.js";
 import { createConfigRouter } from "../modules/config/config.routes.js";
@@ -19,14 +22,47 @@ import { createUiStateRouter } from "../modules/ui-state/ui-state.routes.js";
 import { createGuildsRouter } from "../modules/voice/guilds.routes.js";
 import { createVoiceRouter } from "../modules/voice/voice.routes.js";
 import {
+  sessionAuth,
   errorHandler,
 } from "../shared/middlewares/index.js";
 import { config } from "../shared/config/index.js";
+import { isDashboardPublic } from "../shared/config/runtime.js";
 
-const ADMIN_PASSWORD = config.ADMIN_PASSWORD || "admin";
-
+const ADMIN_PASSWORD = config.ADMIN_PASSWORD;
 const logger = createChildLogger("http.app");
 
+// Whitelist of GET endpoints allowed in public (unauthenticated) mode.
+// All other GET requests require auth even when DASHBOARD_IS_PUBLIC is true.
+const PUBLIC_GET_PATHS = [
+  "/api/dashboard/stats",
+  "/api/dashboard/users",
+  "/api/dashboard/channels",
+  "/api/ui-state",
+  "/api/media/status",
+  "/api/mascot/chat/history",
+  "/api/messages",
+  "/api/analysis",
+  "/api/recordings",
+  "/api/voice",
+];
+
+/**
+ * Dynamic auth guard — checks runtime DASHBOARD_IS_PUBLIC setting for every request.
+ * In public mode: only whitelisted GET paths pass through; everything else requires auth.
+ * In private mode: all routes require auth.
+ */
+function protectedRoute(req: Request, res: Response, next: NextFunction) {
+  if (req.method === "GET" && isDashboardPublic()) {
+    const matched = PUBLIC_GET_PATHS.some(
+      (path) => req.path === path || req.path.startsWith(path + "/"),
+    );
+    if (matched) {
+      return next();
+    }
+  }
+  return sessionAuth(ADMIN_PASSWORD)(req, res, next);
+}
+
 export function createHttpApp(): Express {
   const app = express();
 
@@ -37,10 +73,71 @@ export function createHttpApp(): Express {
     }),
   );
 
+  // CORS — allow known frontend origins
+  // Security note: strict origin whitelist prevents unauthorized cross-origin
+  // access. In production, ensure only legitimate frontend domains are listed.
+  // Development: local Vite preview ports
+  // Production: nginx reverse-proxy serves both on the same domain,
+  //             but we whitelist them for browser preflights too.
+  const allowedOrigins = [
+    "http://localhost:5173",   // Vite dev server
+    "http://localhost:4173",   // Vite preview server
+    "http://localhost:3000",   // Vite preview (alternate)
+    "http://localhost:3001",   // Backend direct (dev)
+    "https://imphnen.asepharyana.my.id",
+    "https://imphnen.asepharyana.tech",
+    "https://imphnen.asepharyana.web.id",
+  ];
+
+  app.use(
+    cors({
+      origin: (origin, callback) => {
+        // Allow requests with no origin (server-to-server, curl, etc.)
+        if (!origin || allowedOrigins.includes(origin)) {
+          callback(null, true);
+        } else {
+          callback(new Error(`Origin ${origin} not allowed by CORS`));
+        }
+      },
+      credentials: true,
+      methods: ["GET", "POST", "PATCH", "DELETE", "OPTIONS"],
+      allowedHeaders: ["Content-Type", "Authorization", "X-Admin-Password"],
+      maxAge: 86400, // 24 hours — browser can cache preflight
+    }),
+  );
+
+  // CSRF TODO: state-changing endpoints (POST, PATCH, DELETE) should
+  // implement CSRF protection (e.g., double-submit cookie pattern or
+  // SameSite=Strict + custom header check) before deploying to production.
+
   // Body parsing
   app.use(express.json());
   app.use(express.urlencoded({ extended: true }));
 
+  // Global rate limiter — pertahanan lapisan pertama terhadap abuse
+  // Endpoint login (/api/auth/login) punya rate limiter sendiri yang lebih ketat
+  // TODO: The global limiter is currently applied only at /api/ prefix (line below),
+  // which leaves non-/api/ paths unguarded. Consider applying a lighter limiter
+  // to all paths or ensure nginx handles upstream rate limiting in production.
+  const globalLimiter = rateLimit({
+    windowMs: 15 * 1000, // 15 seconds
+    max: 200,
+    standardHeaders: true,
+    legacyHeaders: false,
+    skip: (req) => {
+      // Skip health checks and WebSocket upgrade requests
+      if (req.path === "/api/health" || req.path === "/health") return true;
+      if (req.headers.upgrade === "websocket") return true;
+      return false;
+    },
+    message: {
+      error: "TOO_MANY_REQUESTS",
+      message: "Too many requests, please slow down",
+    },
+  });
+
+  app.use("/api/", globalLimiter);
+
   // Request logging
   app.use((req: Request, res: Response, next: NextFunction) => {
     if (req.path.startsWith("/api/")) {
@@ -63,26 +160,35 @@ export function createHttpApp(): Express {
     next();
   });
 
-  // Health check (no auth required)
+  // Open endpoints (no auth required)
   app.use("/api", createHealthRouter());
-
-  // Auth (no auth required)
   app.use("/api", createAuthRouter());
-
-  // Public read-only endpoints
   app.use("/api", createConfigRouter());
+
+  // Admin endpoints — always require auth (manage settings, etc.)
+  // NOTE: createAdminRouter() sudah punya sessionAuth middleware internal,
+  // jadi tidak perlu middleware terpisah di sini.
+  app.use("/api", createAdminRouter());
+
+  // Protected routes — guarded by runtime DASHBOARD_IS_PUBLIC setting
+  // Public mode: GET is read-only, mutations require admin password
+  // Private mode: everything requires admin password
+  app.use("/api/dashboard", protectedRoute);
   app.use("/api", createDashboardRouter());
 
-  // Protected routes — all routes are now public
+  app.use("/api", protectedRoute);
   app.use("/api", createMessagesRouter());
   app.use("/api", createAnalysisRouter());
   app.use("/api", createMascotChatRouter());
+
+  // These routers are already guarded by the protectedRoute above
   app.use("/api", createMediaRouter());
   app.use("/api", createVoiceRouter());
   app.use("/api", createRecordingsRouter());
   app.use("/api", createUiStateRouter());
 
-  // Guilds routes
+  // Guilds routes — always protected (even in public mode)
+  app.use("/api/guilds", sessionAuth(ADMIN_PASSWORD));
   app.use("/api/guilds", createGuildsRouter());
 
   // 404 handler
diff --git a/services/backend/src/modules/admin/admin.routes.ts b/services/backend/src/modules/admin/admin.routes.ts
new file mode 100644
index 0000000..88b6df4
--- /dev/null
+++ b/services/backend/src/modules/admin/admin.routes.ts
@@ -0,0 +1,51 @@
+import type { Request, Response, Router } from "express";
+import express from "express";
+import {
+  getRuntimeSettings,
+  updateRuntimeSettings,
+} from "../../shared/config/runtime.js";
+import { config } from "../../shared/config/index.js";
+import { sessionAuth, asyncHandler } from "../../shared/middlewares/index.js";
+import { createChildLogger } from "@bete/shared/logger";
+
+const logger = createChildLogger("admin.routes");
+
+export function createAdminRouter(): Router {
+  const router = express.Router();
+
+  // All admin routes require session-based auth
+  router.use(sessionAuth(config.ADMIN_PASSWORD));
+
+  // GET /api/admin/settings — read current runtime settings
+  router.get(
+    "/admin/settings",
+    asyncHandler(async (_req: Request, res: Response) => {
+      const settings = getRuntimeSettings();
+      res.json({
+        ...settings,
+        envDashboardIsPublic: config.DASHBOARD_IS_PUBLIC,
+      });
+    }),
+  );
+
+  // PATCH /api/admin/settings — update runtime settings (live, no restart)
+  router.patch(
+    "/admin/settings",
+    asyncHandler(async (req: Request, res: Response) => {
+      const { dashboardIsPublic } = req.body as {
+        dashboardIsPublic?: boolean;
+      };
+
+      const patch: Record<string, unknown> = {};
+      if (typeof dashboardIsPublic === "boolean") {
+        patch.dashboardIsPublic = dashboardIsPublic;
+      }
+
+      const updated = updateRuntimeSettings(patch);
+      logger.info({ ...patch }, "Runtime settings updated");
+      res.json(updated);
+    }),
+  );
+
+  return router;
+}
diff --git a/services/backend/src/modules/auth/auth.routes.ts b/services/backend/src/modules/auth/auth.routes.ts
index 10ec58f..875544b 100644
--- a/services/backend/src/modules/auth/auth.routes.ts
+++ b/services/backend/src/modules/auth/auth.routes.ts
@@ -1,32 +1,87 @@
+import { timingSafeEqual } from "node:crypto";
 import { UnauthorizedError } from "@bete/shared/errors";
 import { createChildLogger } from "@bete/shared/logger";
 import type { Request, Response, Router } from "express";
 import express from "express";
+import rateLimit from "express-rate-limit";
 import { config } from "../../shared/config/index.js";
-import { asyncHandler } from "../../shared/middlewares/index.js";
+import {
+  asyncHandler,
+  createSessionToken,
+  incrementTokenVersion,
+  sessionAuth,
+} from "../../shared/middlewares/index.js";
 
 const logger = createChildLogger("auth.routes");
 
-const adminPassword = config.ADMIN_PASSWORD || "admin";
+const adminPassword = config.ADMIN_PASSWORD;
+
+// Rate limiter: max 10 login attempts per 15 minutes per IP
+const loginLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 10,
+  standardHeaders: true,    // Return rate limit info in `RateLimit-*` headers
+  legacyHeaders: false,     // Disable `X-RateLimit-*` headers
+  message: {
+    error: "TOO_MANY_REQUESTS",
+    message: "Too many login attempts, please try again later",
+  },
+});
 
 export function createAuthRouter(): Router {
   const router = express.Router();
 
-  // POST /api/auth/login
+  // POST /api/auth/login — rate limited to prevent brute force
   router.post(
     "/auth/login",
+    loginLimiter,
     asyncHandler(async (req: Request, res: Response) => {
       const { password } = req.body as { password?: string };
 
       logger.debug("Auth login attempt");
 
-      if (!password || password !== adminPassword) {
+      if (!password) {
         throw new UnauthorizedError("Invalid password");
       }
 
+      // Constant-time comparison prevents timing attacks
+      const pwBuf = Buffer.from(password);
+      const adminBuf = Buffer.from(adminPassword);
+      const maxLen = Math.max(pwBuf.length, adminBuf.length);
+      const diff =
+        pwBuf.length !== adminBuf.length ||
+        !timingSafeEqual(
+          Buffer.concat([pwBuf, Buffer.alloc(maxLen - pwBuf.length)]),
+          Buffer.concat([adminBuf, Buffer.alloc(maxLen - adminBuf.length)]),
+        );
+      if (diff) {
+        throw new UnauthorizedError("Invalid password");
+      }
+
+      const token = createSessionToken(adminPassword);
+      res.json({ ok: true, token });
+    }),
+  );
+
+  // POST /api/auth/logout — revoke all sessions for admin
+  router.post(
+    "/auth/logout",
+    sessionAuth(adminPassword),
+    asyncHandler(async (_req: Request, res: Response) => {
+      incrementTokenVersion("admin");
+      logger.info("Admin logged out — all sessions revoked");
       res.json({ ok: true });
     }),
   );
 
+  // GET /api/auth/whoami — check if token is valid
+  router.get(
+    "/auth/whoami",
+    sessionAuth(adminPassword),
+    asyncHandler(async (_req: Request, res: Response) => {
+      res.json({ ok: true, sub: "admin" });
+    }),
+  );
+
   return router;
 }
diff --git a/services/backend/src/modules/config/config.routes.ts b/services/backend/src/modules/config/config.routes.ts
index 5e835bb..325fec5 100644
--- a/services/backend/src/modules/config/config.routes.ts
+++ b/services/backend/src/modules/config/config.routes.ts
@@ -1,28 +1,54 @@
+import { UnauthorizedError } from "@bete/shared/errors";
 import type { Router } from "express";
 import express from "express";
 import { config } from "../../shared/config/index.js";
+import { isDashboardPublic } from "../../shared/config/runtime.js";
+import { sessionAuth } from "../../shared/middlewares/index.js";
 
 export function createConfigRouter(): Router {
   const router = express.Router();
 
-  // GET /api/config
-  router.get("/config", (_req, res) => {
-    res.json({
-      monitorGuildId: config.MONITOR_GUILD_ID || null,
-      webserverPort: config.WEBSERVER_PORT,
-      nodeEnv: config.NODE_ENV,
-      backlogSyncHours: config.BACKLOG_SYNC_HOURS,
-      backlogSyncBatchSize: config.BACKLOG_SYNC_BATCH_SIZE,
-      retentionMessagesDays: config.RETENTION_MESSAGES_DAYS,
-      retentionAttachmentsDays: config.RETENTION_ATTACHMENTS_DAYS,
-      retentionVoiceDays: config.RETENTION_VOICE_DAYS,
-      autoDeleteFlaggedEnabled: config.AUTO_DELETE_FLAGGED_ENABLED,
-      aiAnalysisEnabled: config.AI_ANALYSIS_ENABLED,
-      voiceGuildId: config.VOICE_GUILD_ID || null,
-      voiceChannelId: config.VOICE_CHANNEL_ID || null,
-      logLevel: config.LOG_LEVEL,
-    });
+  // GET /api/config — protected by runtime public/private mode
+  // Public mode: no auth needed (frontend needs config to determine auth state)
+  // Private mode: requires session-based auth
+  router.get("/config", (req, res, next) => {
+    if (isDashboardPublic()) {
+      // Public mode — return config without auth
+      return sendConfig(res);
+    } else {
+      // Private mode — require auth, then return config
+      sessionAuth(config.ADMIN_PASSWORD)(req, res, () => sendConfig(res));
+    }
   });
 
   return router;
 }
+
+function sendConfig(res: express.Response): void {
+  if (isDashboardPublic()) {
+    // Public mode — only expose safe, non-sensitive fields
+    res.json({
+      monitorGuildId: config.MONITOR_GUILD_ID || null,
+      webserverPort: config.WEBSERVER_PORT,
+      nodeEnv: config.NODE_ENV,
+      dashboardIsPublic: config.DASHBOARD_IS_PUBLIC,
+    });
+    return;
+  }
+  res.json({
+    monitorGuildId: config.MONITOR_GUILD_ID || null,
+    webserverPort: config.WEBSERVER_PORT,
+    nodeEnv: config.NODE_ENV,
+    backlogSyncHours: config.BACKLOG_SYNC_HOURS,
+    backlogSyncBatchSize: config.BACKLOG_SYNC_BATCH_SIZE,
+    retentionMessagesDays: config.RETENTION_MESSAGES_DAYS,
+    retentionAttachmentsDays: config.RETENTION_ATTACHMENTS_DAYS,
+    retentionVoiceDays: config.RETENTION_VOICE_DAYS,
+    autoDeleteFlaggedEnabled: config.AUTO_DELETE_FLAGGED_ENABLED,
+    aiAnalysisEnabled: config.AI_ANALYSIS_ENABLED,
+    voiceGuildId: config.VOICE_GUILD_ID || null,
+    voiceChannelId: config.VOICE_CHANNEL_ID || null,
+    logLevel: config.LOG_LEVEL,
+    dashboardIsPublic: config.DASHBOARD_IS_PUBLIC,
+  });
+}
diff --git a/services/backend/src/modules/dashboard/dashboard.repository.ts b/services/backend/src/modules/dashboard/dashboard.repository.ts
index b7aef81..9bb4aee 100644
--- a/services/backend/src/modules/dashboard/dashboard.repository.ts
+++ b/services/backend/src/modules/dashboard/dashboard.repository.ts
@@ -8,7 +8,12 @@ export class DashboardRepository {
   async getStats() {
     const pool = getPool();
 
-    // Total messages and breakdown by ai_status
+    // Time-bounded aggregates — prevent full-table scan on large datasets
+    // Queries scope to last 90 days for performance, which covers the
+    // typical retention window anyway.
+    const BOUNDARY_DAYS = 90;
+
+    // Total messages and breakdown by ai_status (last 90 days)
     const msgResult = await pool.query(
       `
       SELECT
@@ -24,32 +29,36 @@ export class DashboardRepository {
         COUNT(*) FILTER (WHERE ai_status = 'flagged' AND created_at >= $1)::int AS today_flagged,
         COUNT(DISTINCT user_id) FILTER (WHERE created_at >= $2)::int AS active_users_24h
       FROM messages
+      WHERE created_at >= $3
     `,
-      [Date.now() - 86400000, Date.now() - 86400000],
+      [Date.now() - 86400000, Date.now() - 86400000, Date.now() - BOUNDARY_DAYS * 86400000],
     );
 
     const msgRow = msgResult.rows[0];
 
-    // Total voice recordings
-    const voiceResult = await pool.query(`
-      SELECT COUNT(*)::int AS count FROM voice_recordings
-    `);
+    // Total voice recordings (last 90 days — bounded by retention window)
+    const voiceResult = await pool.query(
+      `SELECT COUNT(*)::int AS count FROM voice_recordings
+       WHERE created_at >= $1`,
+      [Date.now() - BOUNDARY_DAYS * 86400000],
+    );
 
     // Total AI user profiles
     const profileResult = await pool.query(`
       SELECT COUNT(*)::int AS count FROM user_profiles
     `);
 
-    // Top channels by message count
+    // Top channels by message count (last 90 days)
     const topChannels = await pool.query(`
       SELECT channel_id,
              (metadata::jsonb -> 'channel' ->> 'channelName') AS channel_name,
              COUNT(*)::int AS message_count
       FROM messages
+      WHERE created_at >= $1
       GROUP BY channel_id, (metadata::jsonb -> 'channel' ->> 'channelName')
       ORDER BY COUNT(*) DESC
       LIMIT 10
-    `);
+    `, [Date.now() - BOUNDARY_DAYS * 86400000]);
 
     return {
       total_messages: msgRow?.total_messages ?? 0,
diff --git a/services/backend/src/modules/dashboard/dashboard.routes.ts b/services/backend/src/modules/dashboard/dashboard.routes.ts
index 12b6c59..c6e9a57 100644
--- a/services/backend/src/modules/dashboard/dashboard.routes.ts
+++ b/services/backend/src/modules/dashboard/dashboard.routes.ts
@@ -23,7 +23,7 @@ export function createDashboardRouter(): Router {
   router.get(
     "/dashboard/users",
     asyncHandler(async (req: Request, res: Response) => {
-      const limit = Number(req.query.limit) || 20;
+      const limit = Math.min(Number(req.query.limit) || 20, 100);
       const cursor =
         typeof req.query.cursor === "string" ? req.query.cursor : undefined;
       const search =
@@ -52,16 +52,19 @@ export function createDashboardRouter(): Router {
   router.get(
     "/dashboard/channels",
     asyncHandler(async (req: Request, res: Response) => {
-      const limit = Number(req.query.limit) || 20;
+      const limit = Math.min(Number(req.query.limit) || 20, 100);
       const search =
         typeof req.query.search === "string" ? req.query.search : undefined;
       const guildId =
         typeof req.query.guild_id === "string" ? req.query.guild_id : undefined;
+      const cursor =
+        typeof req.query.cursor === "string" ? req.query.cursor : undefined;
 
       const result = await dashboardService.listChannels({
         limit,
         search,
         guildId,
+        cursor,
       });
       res.json(result);
     }),
diff --git a/services/backend/src/modules/dashboard/dashboard.service.ts b/services/backend/src/modules/dashboard/dashboard.service.ts
index 5987098..aab571f 100644
--- a/services/backend/src/modules/dashboard/dashboard.service.ts
+++ b/services/backend/src/modules/dashboard/dashboard.service.ts
@@ -29,6 +29,7 @@ export class DashboardService {
     limit: number;
     search?: string;
     guildId?: string;
+    cursor?: string;
   }) {
     logger.debug({ query }, "Listing dashboard channels");
     return dashboardRepository.listChannels(query);
diff --git a/services/backend/src/modules/mascot-chat/mascot-chat.controller.ts b/services/backend/src/modules/mascot-chat/mascot-chat.controller.ts
index 737ecfd..678384c 100644
--- a/services/backend/src/modules/mascot-chat/mascot-chat.controller.ts
+++ b/services/backend/src/modules/mascot-chat/mascot-chat.controller.ts
@@ -1,6 +1,7 @@
 import { createChildLogger } from "@bete/shared/logger";
 import type { Request, Response } from "express";
 import { asyncHandler } from "../../shared/middlewares/index.js";
+import { chatRequestSchema } from "./mascot-chat.schema.js";
 import { mascotChatService } from "./mascot-chat.service.js";
 
 const logger = createChildLogger("mascot-chat.controller");
@@ -11,15 +12,18 @@ interface AuthenticatedRequest extends Request {
 
 export const handleMascotChat = asyncHandler(
   async (req: Request, res: Response) => {
-    const { message, context } = req.body;
-
-    if (!message || typeof message !== "string") {
+    // Validate request body against schema
+    const parsed = chatRequestSchema.safeParse(req.body);
+    if (!parsed.success) {
       return res.status(400).json({
         error: "INVALID_INPUT",
-        message: "Message is required and must be a string",
+        message: "Invalid request body",
+        details: parsed.error.flatten().fieldErrors,
       });
     }
 
+    const { message, context } = parsed.data;
+
     // Get user ID from auth middleware (if available)
     const userId = (req as AuthenticatedRequest).userId || "anonymous";
 
diff --git a/services/backend/src/modules/ui-state/ui-state.routes.ts b/services/backend/src/modules/ui-state/ui-state.routes.ts
index 389e80d..5e06f1d 100644
--- a/services/backend/src/modules/ui-state/ui-state.routes.ts
+++ b/services/backend/src/modules/ui-state/ui-state.routes.ts
@@ -6,6 +6,15 @@ import { uiStateService } from "./ui-state.service.js";
 
 const logger = createChildLogger("ui-state.routes");
 
+// Allowed UI state keys — reject any update that does not match these.
+const ALLOWED_KEYS = new Set([
+  "activeTab",
+  "selectedVoiceGuild",
+  "selectedVoiceChannel",
+  "selectedTextChannel",
+  "sidebarCollapsed",
+]);
+
 export function createUiStateRouter(): Router {
   const router = express.Router();
 
@@ -25,7 +34,14 @@ export function createUiStateRouter(): Router {
     asyncHandler(async (req: Request, res: Response) => {
       const updates = req.body as Record<string, unknown>;
       logger.debug({ keys: Object.keys(updates) }, "Updating UI state");
-      const result = await uiStateService.updateState(updates);
+      // Filter to only allow known safe keys
+      const filtered: Record<string, unknown> = {};
+      for (const key of Object.keys(updates)) {
+        if (ALLOWED_KEYS.has(key)) {
+          filtered[key] = updates[key];
+        }
+      }
+      const result = await uiStateService.updateState(filtered);
       res.json(result);
     }),
   );
diff --git a/services/backend/src/shared/config/runtime.ts b/services/backend/src/shared/config/runtime.ts
new file mode 100644
index 0000000..5a548d5
--- /dev/null
+++ b/services/backend/src/shared/config/runtime.ts
@@ -0,0 +1,110 @@
+/**
+ * Runtime configuration manager.
+ *
+ * Stores settings that can change at runtime (e.g., DASHBOARD_IS_PUBLIC)
+ * in a JSON file. Falls back to env-based defaults from the static config.
+ */
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createChildLogger } from "@bete/shared/logger";
+import type { config } from "./index.js";
+type Config = typeof config;
+
+const logger = createChildLogger("runtime-config");
+
+const DATA_DIR = resolve(import.meta.dirname ?? process.cwd(), "..", "data");
+const SETTINGS_FILE = resolve(DATA_DIR, "settings.json");
+
+interface RuntimeSettings {
+  dashboardIsPublic: boolean;
+}
+
+/** Nilai fallback dari env. Dipakai saat settings.json belum pernah dibuat. */
+function envDefaultSettings(): RuntimeSettings {
+  return {
+    dashboardIsPublic: process.env.DASHBOARD_IS_PUBLIC === "true",
+  };
+}
+
+function ensureDataDir(): void {
+  if (!existsSync(DATA_DIR)) {
+    mkdirSync(DATA_DIR, { recursive: true });
+  }
+}
+
+function loadSettings(): RuntimeSettings {
+  try {
+    ensureDataDir();
+    const fallback = envDefaultSettings();
+    if (!existsSync(SETTINGS_FILE)) {
+      writeFileSync(SETTINGS_FILE, JSON.stringify(fallback, null, 2));
+      return { ...fallback };
+    }
+    const raw = readFileSync(SETTINGS_FILE, "utf-8");
+    const parsed = JSON.parse(raw) as Partial<RuntimeSettings>;
+    return { ...fallback, ...parsed };
+  } catch (err) {
+    logger.error({ err }, "Failed to load runtime settings");
+    return envDefaultSettings();
+  }
+}
+
+function saveSettings(settings: RuntimeSettings): void {
+  try {
+    ensureDataDir();
+    writeFileSync(SETTINGS_FILE, JSON.stringify(settings, null, 2));
+  } catch (err) {
+    logger.error({ err }, "Failed to save runtime settings");
+  }
+}
+
+// ─── Singleton ───────────────────────────────────────────────────────────────
+
+let _cache: RuntimeSettings | null = null;
+
+function getSettings(): RuntimeSettings {
+  if (!_cache) {
+    _cache = loadSettings();
+  }
+  return _cache;
+}
+
+function invalidateCache(): void {
+  _cache = null;
+}
+
+// ─── Public API ──────────────────────────────────────────────────────────────
+
+/**
+ * Whether the dashboard is publicly accessible without auth, using runtime
+ * override if available, otherwise falling back to the env-based static config.
+ */
+export function isDashboardPublic(staticConfig?: Config): boolean {
+  const runtime = getSettings();
+  return runtime.dashboardIsPublic;
+}
+
+export function getRuntimeSettings(): RuntimeSettings {
+  return { ...getSettings() };
+}
+
+/**
+ * Update runtime settings. Pass only the fields you want to change.
+ * Invalidates the internal cache so the next read picks up changes.
+ */
+export function updateRuntimeSettings(
+  patch: Partial<RuntimeSettings>,
+): RuntimeSettings {
+  const current = getSettings();
+  const updated = { ...current, ...patch };
+  saveSettings(updated);
+  invalidateCache();
+  return { ...updated };
+}
+
+/**
+ * Reset runtime settings to env-based defaults (does NOT change the file).
+ */
+export function resetRuntimeSettings(): void {
+  invalidateCache();
+}
diff --git a/services/backend/src/shared/middlewares/index.ts b/services/backend/src/shared/middlewares/index.ts
index c0ac9a0..8af759d 100644
--- a/services/backend/src/shared/middlewares/index.ts
+++ b/services/backend/src/shared/middlewares/index.ts
@@ -4,10 +4,150 @@ import {
   ValidationError,
 } from "@bete/shared/errors";
 import { createChildLogger } from "@bete/shared/logger";
+import { createHmac, timingSafeEqual } from "node:crypto";
 import type { NextFunction, Request, Response } from "express";
 
 const logger = createChildLogger("middleware");
 
+const SESSION_DURATION_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+// ─── Revokable token version ──────────────────────────────────────────────
+// Token version prevents compromised tokens from being valid indefinitely.
+// Stored in Redis so version survives process restarts.
+// Falls back to in-memory Map if Redis is unavailable.
+// ──────────────────────────────────────────────────────────────────────────
+
+const TOKEN_VERSION_REDIS_PREFIX = "token_version:";
+const TOKEN_VERSION_TTL_S = 7 * 24 * 60 * 60; // 7 days — far longer than session lifetime
+
+const tokenVersions = new Map<string, number>(); // in-memory fallback
+
+async function tryLoadTokenVersion(sub: string): Promise<number | null> {
+  try {
+    const { readRedisStatus } = await import("../redis/index.js");
+    const raw = await readRedisStatus(`${TOKEN_VERSION_REDIS_PREFIX}${sub}`);
+    if (raw && typeof raw.version === "number") {
+      // Sync in-memory cache
+      tokenVersions.set(sub, raw.version);
+      return raw.version;
+    }
+  } catch {
+    // Redis unavailable — fall through to in-memory
+  }
+  return null;
+}
+
+async function tryPersistTokenVersion(sub: string, version: number): Promise<void> {
+  try {
+    const { getCommandPublisher } = await import("../redis/index.js");
+    const publisher = getCommandPublisher();
+    const key = `${TOKEN_VERSION_REDIS_PREFIX}${sub}`;
+    await publisher.set(key, JSON.stringify({ version }), "EX", TOKEN_VERSION_TTL_S);
+  } catch {
+    // Silently fall back to in-memory
+  }
+}
+
+export async function incrementTokenVersion(sub: string): Promise<number> {
+  const next = (tokenVersions.get(sub) ?? 0) + 1;
+  tokenVersions.set(sub, next);
+  // Fire-and-forget persist to Redis
+  tryPersistTokenVersion(sub, next).catch(() => {});
+  return next;
+}
+
+export async function getTokenVersion(sub: string): Promise<number> {
+  const cached = tokenVersions.get(sub);
+  if (cached !== undefined) return cached;
+  // Try loading from Redis
+  const remote = await tryLoadTokenVersion(sub);
+  if (remote !== null) return remote;
+  return 0;
+}
+
+// ─── JWT-like session token helpers ──────────────────────────────────────
+// Simple HMAC-SHA256 token without external library dependency.
+// Payload: { sub, iat, exp } base64url-encoded, signed with HMAC-SHA256.
+
+interface SessionPayload {
+  sub: string;    // e.g. "admin"
+  iat: number;    // issued at (ms)
+  exp: number;    // expires at (ms)
+  ver: number;    // token version (revokable)
+}
+
+function base64urlEncode(data: string): string {
+  return Buffer.from(data)
+    .toString("base64url");
+}
+
+function base64urlDecode(str: string): string {
+  return Buffer.from(str, "base64url").toString("utf-8");
+}
+
+function signToken(payload: string, secret: string): string {
+  return createHmac("sha256", secret)
+    .update(payload)
+    .digest("base64url");
+}
+
+export function createSessionToken(adminPassword: string): string {
+  const now = Date.now();
+  // Note: getTokenVersion is async (Redis-backed). In practice, the version
+  // is cached in-memory after first load, so this is effectively sync.
+  // We use a sync fallback to keep the token-creation path non-async.
+  const ver = tokenVersions.get("admin") ?? 0;
+  const payload: SessionPayload = {
+    sub: "admin",
+    iat: now,
+    exp: now + SESSION_DURATION_MS,
+    ver,
+  };
+  const header = base64urlEncode(JSON.stringify({ alg: "HS256", typ: "JWT" }));
+  const body = base64urlEncode(JSON.stringify(payload));
+  const signature = signToken(`${header}.${body}`, adminPassword);
+  return `${header}.${body}.${signature}`;
+}
+
+export function verifySessionToken(
+  token: string,
+  secret: string,
+): SessionPayload {
+  const parts = token.split(".");
+  if (parts.length !== 3) {
+    throw new UnauthorizedError("Invalid token format");
+  }
+  const [header, body, signature] = parts;
+  const expectedSig = signToken(`${header}.${body}`, secret);
+  try {
+    const sigBuf = Buffer.from(signature);
+    const expectedBuf = Buffer.from(expectedSig);
+    if (
+      sigBuf.length !== expectedBuf.length ||
+      !timingSafeEqual(sigBuf, expectedBuf)
+    ) {
+      throw new UnauthorizedError("Invalid token signature");
+    }
+  } catch {
+    throw new UnauthorizedError("Invalid token signature");
+  }
+  const payload = JSON.parse(base64urlDecode(body)) as SessionPayload;
+  if (Date.now() > payload.exp) {
+    throw new UnauthorizedError("Session token expired");
+  }
+  // Token version check — invalidate all tokens issued before version bump
+  // Note: getTokenVersion is async (Redis-backed). We fall back to the
+  // in-memory cache which is synced on first load from Redis. On startup
+  // the version defaults to 0, which is correct — no tokens revoked yet.
+  const currentVersion = tokenVersions.get(payload.sub) ?? 0;
+  if ((payload.ver ?? 0) < currentVersion) {
+    throw new UnauthorizedError("Session token has been revoked");
+  }
+  return payload;
+}
+
+// ─── Express middleware ──────────────────────────────────────────────────
+
 export function errorHandler(
   err: Error,
   _req: Request,
@@ -30,15 +170,62 @@ export function errorHandler(
   });
 }
 
-export function adminAuth(adminPassword: string) {
-  return (req: Request, res: Response, next: NextFunction) => {
-    const password = req.headers["x-admin-password"] as string;
+/**
+ * @deprecated Replaced by sessionAuth(). Kept temporarily for transition
+ * period. TODO: remove after confirming no consumers remain.
+ */
+// export function adminAuth(adminPassword: string) {
+//   return (req: Request, res: Response, next: NextFunction) => {
+//     const password = req.headers["x-admin-password"] as string;
+//
+//     if (!password || password !== adminPassword) {
+//       throw new UnauthorizedError("Invalid admin password");
+//     }
+//
+//     next();
+//   };
+// }
 
-    if (!password || password !== adminPassword) {
-      throw new UnauthorizedError("Invalid admin password");
+/**
+ * Session-based auth middleware.
+ * Reads Bearer token from Authorization header and validates it.
+ * Falls back to X-Admin-Password header for backward compatibility.
+ */
+export function sessionAuth(secret: string) {
+  return (req: Request, res: Response, next: NextFunction) => {
+    // Try Authorization: Bearer <token> first
+    const authHeader = req.headers.authorization as string | undefined;
+    if (authHeader?.startsWith("Bearer ")) {
+      const token = authHeader.slice(7);
+      try {
+        verifySessionToken(token, secret);
+        return next();
+      } catch (err) {
+        if (err instanceof AppError) {
+          throw err;
+        }
+        throw new UnauthorizedError("Invalid session token");
+      }
     }
 
-    next();
+    // Fallback: X-Admin-Password header (for transition period)
+    const password = req.headers["x-admin-password"] as string;
+    if (password) {
+      try {
+        const pwBuf = Buffer.from(password);
+        const secretBuf = Buffer.from(secret);
+        if (
+          pwBuf.length === secretBuf.length &&
+          timingSafeEqual(pwBuf, secretBuf)
+        ) {
+          return next();
+        }
+      } catch {
+        // Fall through to error below
+      }
+    }
+
+    throw new UnauthorizedError("Authentication required");
   };
 }
 
diff --git a/services/backend/src/shared/redis/index.ts b/services/backend/src/shared/redis/index.ts
index 341d68c..6f56983 100644
--- a/services/backend/src/shared/redis/index.ts
+++ b/services/backend/src/shared/redis/index.ts
@@ -77,6 +77,7 @@ export async function publishCommand<T = unknown>(
     const timer = setTimeout(() => {
       if (settled) return;
       settled = true;
+      sub.removeListener("message", onMessage);
       sub.unsubscribe(replyChannel).catch(() => {
         /* ignore */
       });
@@ -90,6 +91,7 @@ export async function publishCommand<T = unknown>(
       if (channel !== replyChannel || settled) return;
       settled = true;
       clearTimeout(timer);
+      sub.removeListener("message", onMessage);
       sub.unsubscribe(replyChannel).catch(() => {
         /* ignore */
       });
@@ -121,6 +123,7 @@ export async function publishCommand<T = unknown>(
             if (!settled) {
               settled = true;
               clearTimeout(timer);
+              sub.removeListener("message", onMessage);
               sub.unsubscribe(replyChannel).catch(() => {
                 /* ignore */
               });
@@ -133,6 +136,7 @@ export async function publishCommand<T = unknown>(
         if (!settled) {
           settled = true;
           clearTimeout(timer);
+          sub.removeListener("message", onMessage);
           logger.error({ err }, "Failed to subscribe to reply channel");
           resolve(null);
         }
diff --git a/services/backend/src/ws/redis-bridge.ts b/services/backend/src/ws/redis-bridge.ts
index cc1a9e2..d92596a 100644
--- a/services/backend/src/ws/redis-bridge.ts
+++ b/services/backend/src/ws/redis-bridge.ts
@@ -66,9 +66,91 @@ const SUBSCRIPTIONS: ChannelMapping[] = [
 ];
 
 let subscriber: Redis | null = null;
+let _redisHealthy = false;
+
+function isRedisAvailable(): boolean {
+  return _redisHealthy;
+}
+
+let _reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let _reconnectAttempts = 0;
+const MAX_RECONNECT_ATTEMPTS = 5;
+
+function scheduleReconnect(): void {
+  if (_reconnectTimer) return; // already scheduled
+  _reconnectAttempts++;
+  if (_reconnectAttempts > MAX_RECONNECT_ATTEMPTS) {
+    logger.error("Redis subscriber max reconnect attempts reached");
+    _reconnectAttempts = 0;
+    return;
+  }
+  const delay = Math.min(1000 * Math.pow(2, _reconnectAttempts), 30_000);
+  logger.warn(
+    { attempt: _reconnectAttempts, delayMs: delay },
+    "Redis subscriber reconnection scheduled",
+  );
+  _reconnectTimer = setTimeout(() => {
+    _reconnectTimer = null;
+    if (subscriber) {
+      subscriber
+        .connect()
+        .then(() => {
+          _redisHealthy = true;
+          _reconnectAttempts = 0;
+          logger.info("Redis subscriber reconnected");
+          // Re-subscribe after reconnect
+          const channels = SUBSCRIPTIONS.map((m) => m.channel);
+          return subscriber?.subscribe(...channels);
+        })
+        .catch((err: Error) => {
+          logger.error({ err }, "Redis subscriber reconnect failed");
+          scheduleReconnect();
+        });
+    }
+  }, delay);
+}
 
 function createSubscriber(): Redis {
-  return new Redis(config.REDIS_URL, { keyPrefix: "" });
+  const redis = new Redis(config.REDIS_URL, {
+    keyPrefix: "",
+    lazyConnect: true,
+    retryStrategy: (times) => {
+      // We handle reconnection ourselves
+      if (times > 3) return null;
+      return Math.min(times * 500, 2000);
+    },
+  });
+
+  redis.on("error", (err: Error) => {
+    const wasHealthy = _redisHealthy;
+    _redisHealthy = false;
+    if (wasHealthy) {
+      logger.warn({ err }, "Redis subscriber: connection lost");
+    } else {
+      logger.debug({ err }, "Redis subscriber error (not yet connected)");
+    }
+  });
+
+  redis.on("connect", () => {
+    _redisHealthy = true;
+    _reconnectAttempts = 0;
+    logger.info("Redis subscriber connected");
+  });
+
+  redis.on("close", () => {
+    _redisHealthy = false;
+    logger.warn("Redis subscriber connection closed");
+    // Schedule reconnection for lazy-connect mode
+    if (!_reconnectTimer) scheduleReconnect();
+  });
+
+  redis.on("reconnecting", () => {
+    logger.warn("Redis subscriber reconnecting…");
+  });
+
+  redis.on("message", handleSubscriptionMessage);
+
+  return redis;
 }
 
 function handleSubscriptionMessage(channel: string, message: string): void {
@@ -141,24 +223,6 @@ export async function startRedisBridge(): Promise<void> {
   try {
     subscriber = createSubscriber();
 
-    subscriber.on("error", (err: Error) => {
-      logger.error({ err }, "Redis subscriber error");
-    });
-
-    subscriber.on("connect", () => {
-      logger.info("Redis subscriber connected");
-    });
-
-    subscriber.on("reconnecting", () => {
-      logger.warn("Redis subscriber reconnecting…");
-    });
-
-    subscriber.on("close", () => {
-      logger.warn("Redis subscriber connection closed");
-    });
-
-    subscriber.on("message", handleSubscriptionMessage);
-
     await subscriber.ping();
     logger.info("Redis ping OK");
 
diff --git a/services/backend/src/ws/server.ts b/services/backend/src/ws/server.ts
index 4082421..a6a0120 100644
--- a/services/backend/src/ws/server.ts
+++ b/services/backend/src/ws/server.ts
@@ -7,6 +7,11 @@ import { setBroadcastFunctions } from "./broadcast.js";
 
 const logger = createChildLogger("ws.server");
 
+// Per-client sliding window rate limiter: max 30 messages per 5-second window
+const RATE_LIMIT_WINDOW_MS = 5000;
+const RATE_LIMIT_MAX_MSGS = 30;
+const messageTimestamps = new WeakMap<WebSocket, number[]>();
+
 interface BroadcastEvent {
   type: string;
   data: unknown;
@@ -71,18 +76,29 @@ export function createWebSocketServer(server: Server): WebSocketServer {
   const wss = new WebSocketServer({ server, path: "/ws" });
   _wss = wss;
 
-  wss.on("connection", (ws: WebSocket, req) => {
-    // Parse auth token from query string
+  wss.on("connection", async (ws: WebSocket, req) => {
+    // Max connection limit — prevent resource exhaustion
+    const totalClients = frontendClients.size + gatewayClients.size;
+    const MAX_CONNECTIONS = 100;
+    if (totalClients >= MAX_CONNECTIONS) {
+      logger.warn({ totalClients }, "Max connections reached, rejecting new client");
+      ws.close(4003, "Server at capacity");
+      return;
+    }
+
+    // Gateway uses token in query string (internal-only connection, not in logs)
+    // Frontend uses auth message pattern to avoid token exposure in access logs
     const rawUrl = req.url ?? "/";
     let isGateway = false;
+    let queryToken: string | null = null;
 
     try {
       const url = new URL(rawUrl, "http://localhost");
-      const token = url.searchParams.get("token");
+      queryToken = url.searchParams.get("token");
       isGateway =
-        token !== null &&
+        queryToken !== null &&
         config.BACKEND_WS_TOKEN !== "" &&
-        token === config.BACKEND_WS_TOKEN;
+        queryToken === config.BACKEND_WS_TOKEN;
     } catch {
       // Malformed URL — treat as frontend
     }
@@ -90,25 +106,120 @@ export function createWebSocketServer(server: Server): WebSocketServer {
     if (isGateway) {
       gatewayClients.add(ws);
       logger.info("Discord gateway WebSocket client authenticated");
-      // Gateway doesn't need initial states
-    } else {
-      frontendClients.add(ws);
-      logger.info(`Frontend client connected (${frontendClients.size} total)`);
-      // Send initial states (user, ui, media) — fire-and-forget
-      sendInitialStates(ws).catch((err) =>
-        logger.error({ err }, "sendInitialStates failed"),
-      );
+      // Gateway only sends binary PCM — forward to frontend clients
+      ws.on("message", (data: Buffer) => {
+        if (Buffer.isBuffer(data)) {
+          broadcastBinaryToFrontend(data);
+        }
+      });
+      ws.on("close", () => {
+        gatewayClients.delete(ws);
+        logger.info("Discord gateway WebSocket disconnected");
+      });
+      ws.on("error", (err: Error) => {
+        logger.error({ err }, "Gateway WebSocket error");
+        gatewayClients.delete(ws);
+      });
+      return;
     }
 
-    ws.on("message", (data: Buffer) => {
-      // Gateway PCM forward — broadcast raw binary to frontend clients only
-      if (isGateway && Buffer.isBuffer(data)) {
-        broadcastBinaryToFrontend(data);
+    // ── Frontend client: auth message pattern ──────────────────────────
+    // Token is NEVER accepted in query string for frontend connections.
+    // Frontend must send { type: "auth", token: "..." } as first message.
+    // ────────────────────────────────────────────────────────────────────
+
+    // Origin check for frontend WebSocket connections
+    const origin = req.headers.origin;
+    if (origin) {
+      const allowedWsOrigins = [
+        "http://localhost:5173",
+        "http://localhost:4173",
+        "http://localhost:3000",
+        "http://localhost:3001",
+        "https://imphnen.asepharyana.my.id",
+        "https://imphnen.asepharyana.tech",
+        "https://imphnen.asepharyana.web.id",
+      ];
+      if (!allowedWsOrigins.includes(origin)) {
+        logger.warn({ origin }, "WebSocket connection rejected: origin not allowed");
+        ws.close(4002, "Origin not allowed");
         return;
       }
+    }
 
-      // Handle binary PCM from browser (FE→Discord transmit)
-      // Format: 4-byte magic "PCM\0" + raw PCM Int16 LE
+    let authenticated = false;
+    let authTimer: ReturnType<typeof setTimeout> | null = null;
+
+    const { isDashboardPublic } = await import("../shared/config/runtime.js");
+    const isPublic = isDashboardPublic();
+
+    if (!isPublic) {
+      authTimer = setTimeout(() => {
+        if (!authenticated) {
+          ws.close(4001, "Authentication timeout");
+          logger.warn("Frontend WS connection timed out waiting for auth");
+        }
+      }, 5000);
+    } else {
+      authenticated = true;
+      frontendClients.add(ws);
+    }
+
+    function processFrontendMessage(data: Buffer): void {
+      // Validate auth before processing messages
+      if (!authenticated) {
+        try {
+          const msg = JSON.parse(data.toString());
+          if (
+            msg.type !== "auth" ||
+            typeof msg.token !== "string"
+          ) {
+            return; // wait for valid auth
+          }
+
+          if (!isPublic) {
+            const { verifySessionToken } = require("../shared/middlewares/index.js");
+            verifySessionToken(msg.token, config.ADMIN_PASSWORD);
+          }
+
+          authenticated = true;
+          if (authTimer) {
+            clearTimeout(authTimer);
+            authTimer = null;
+          }
+          frontendClients.add(ws);
+          logger.info(`Frontend client authenticated (${frontendClients.size} total)`);
+          sendInitialStates(ws).catch((err) =>
+            logger.error({ err }, "sendInitialStates failed"),
+          );
+          return;
+        } catch {
+          return; // invalid auth, wait for next message
+        }
+      }
+
+      // Per-client rate limiting — authenticated-only, max 30 msg / 5s sliding window
+      if (authenticated) {
+        const now = Date.now();
+        let timestamps = messageTimestamps.get(ws);
+        if (!timestamps) {
+          timestamps = [];
+          messageTimestamps.set(ws, timestamps);
+        }
+        // Prune timestamps outside the window
+        const cutoff = now - RATE_LIMIT_WINDOW_MS;
+        while (timestamps.length > 0 && timestamps[0]! < cutoff) {
+          timestamps.shift();
+        }
+        if (timestamps.length >= RATE_LIMIT_MAX_MSGS) {
+          logger.warn("Frontend client rate-limited (closing)");
+          ws.close(4006, "Rate limit exceeded");
+          return;
+        }
+        timestamps.push(now);
+      }
+
+      // Handle voice transmit binary
       if (
         Buffer.isBuffer(data) &&
         data.length > 4 &&
@@ -148,78 +259,74 @@ export function createWebSocketServer(server: Server): WebSocketServer {
       ) {
         try {
           const message = JSON.parse(data.toString());
-
-          if (message.type === "voice_transmit" && message.buffer) {
-            // Legacy: Forward PCM data to Redis for discord-gateway
-            import("../shared/redis/index.js").then(
-              ({ getCommandPublisher }) => {
-                const publisher = getCommandPublisher();
-                publisher
-                  .publish(
-                    BACKEND_VOICE_TRANSMIT,
-                    JSON.stringify({
-                      type: "pcm",
-                      buffer: message.buffer,
-                    }),
-                  )
-                  .catch((err: Error) => {
-                    logger.error(
-                      { err },
-                      "Failed to publish voice transmit to Redis",
-                    );
-                  });
-              },
-            );
-          } else if (message.type === "voice_command" && message.command) {
-            // Forward voice commands to discord-gateway with payload
-            import("../shared/redis/index.js").then(
-              ({ getCommandPublisher }) => {
-                const publisher = getCommandPublisher();
-                const commandId = `cmd-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-                publisher
-                  .publish(
-                    BACKEND_COMMAND,
-                    JSON.stringify({
-                      id: commandId,
-                      type: message.command,
-                      payload: message.payload ?? {},
-                      replyChannel: `reply:${commandId}`,
-                    }),
-                  )
-                  .catch((err: Error) => {
-                    logger.error(
-                      { err },
-                      "Failed to publish voice command to Redis",
-                    );
-                  });
-              },
-            );
-          }
+          handleFrontendJsonMessage(message);
         } catch (err) {
           logger.debug({ err }, "Failed to parse WebSocket message as JSON");
         }
       }
-    });
+    }
 
-    ws.on("close", () => {
-      if (isGateway) {
-        gatewayClients.delete(ws);
-        logger.info("Discord gateway WebSocket disconnected");
-      } else {
-        frontendClients.delete(ws);
-        logger.info(
-          `Frontend client disconnected (${frontendClients.size} total)`,
+    function handleFrontendJsonMessage(message: Record<string, unknown>): void {
+      if (message.type === "voice_transmit" && message.buffer) {
+        import("../shared/redis/index.js").then(
+          ({ getCommandPublisher }) => {
+            const publisher = getCommandPublisher();
+            publisher
+              .publish(
+                BACKEND_VOICE_TRANSMIT,
+                JSON.stringify({
+                  type: "pcm",
+                  buffer: message.buffer,
+                }),
+              )
+              .catch((err: Error) => {
+                logger.error(
+                  { err },
+                  "Failed to publish voice transmit to Redis",
+                );
+              });
+          },
+        );
+      } else if (message.type === "voice_command" && message.command) {
+        import("../shared/redis/index.js").then(
+          ({ getCommandPublisher }) => {
+            const publisher = getCommandPublisher();
+            const commandId = `cmd-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+            publisher
+              .publish(
+                BACKEND_COMMAND,
+                JSON.stringify({
+                  id: commandId,
+                  type: message.command,
+                  payload: message.payload ?? {},
+                  replyChannel: `reply:${commandId}`,
+                }),
+              )
+              .catch((err: Error) => {
+                logger.error(
+                  { err },
+                  "Failed to publish voice command to Redis",
+                );
+              });
+          },
         );
       }
+    }
+
+    ws.on("message", (data: Buffer) => processFrontendMessage(data));
+
+    ws.on("close", () => {
+      if (authTimer) clearTimeout(authTimer);
+      frontendClients.delete(ws);
+      logger.info(
+        `Frontend client disconnected (${frontendClients.size} total)`,
+      );
     });
 
     ws.on("error", (err: Error) => {
-      logger.error({ err }, "WebSocket client error");
-      if (isGateway) {
-        gatewayClients.delete(ws);
-      } else {
-        frontendClients.delete(ws);
-      }
+      logger.error({ err }, "Frontend WebSocket error");
+      if (authTimer) clearTimeout(authTimer);
+      frontendClients.delete(ws);
     });
   });
 
@@ -240,6 +347,8 @@ export function createWebSocketServer(server: Server): WebSocketServer {
   function broadcastBinaryToFrontend(data: Buffer) {
     for (const client of frontendClients) {
       if (client.readyState === WebSocket.OPEN) {
+        // Backpressure check: skip slow clients to prevent OOM
+        if (client.bufferedAmount > 64 * 1024) continue;
         try {
           client.send(data);
         } catch (err) {
@@ -260,6 +369,8 @@ export function createWebSocketServer(server: Server): WebSocketServer {
     });
     for (const client of frontendClients) {
       if (client.readyState === WebSocket.OPEN) {
+        // Backpressure check: skip slow clients to prevent OOM
+        if (client.bufferedAmount > 64 * 1024) continue;
         try {
           client.send(payload);
         } catch (err) {
@@ -272,6 +383,8 @@ export function createWebSocketServer(server: Server): WebSocketServer {
   function broadcastBinary(data: Buffer) {
     for (const client of frontendClients) {
       if (client.readyState === WebSocket.OPEN) {
+        // Backpressure check: skip slow clients to prevent OOM
+        if (client.bufferedAmount > 64 * 1024) continue;
         try {
           client.send(data);
         } catch (err) {
diff --git a/services/discord-gateway/drizzle/migrations/0012_light_prism.sql b/services/discord-gateway/drizzle/migrations/0012_light_prism.sql
new file mode 100644
index 0000000..4ab6ebd
--- /dev/null
+++ b/services/discord-gateway/drizzle/migrations/0012_light_prism.sql
@@ -0,0 +1 @@
+CREATE INDEX IF NOT EXISTS "idx_messages_guild_ai_status_analyzed" ON "messages" USING btree ("guild_id","ai_status","ai_analyzed_at","id");--> statement-breakpoint
diff --git a/services/discord-gateway/drizzle/migrations/meta/_journal.json b/services/discord-gateway/drizzle/migrations/meta/_journal.json
index 0d413a5..87d8ed0 100644
--- a/services/discord-gateway/drizzle/migrations/meta/_journal.json
+++ b/services/discord-gateway/drizzle/migrations/meta/_journal.json
@@ -85,6 +85,13 @@
       "when": 1781388000000,
       "tag": "0011_add_voice_transcription",
       "breakpoints": true
+    },
+    {
+      "idx": 12,
+      "version": "7",
+      "when": 1781672400000,
+      "tag": "0012_light_prism",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/services/discord-gateway/src/modules/ai-moderation/abortHelper.ts b/services/discord-gateway/src/modules/ai-moderation/abortHelper.ts
new file mode 100644
index 0000000..d269735
--- /dev/null
+++ b/services/discord-gateway/src/modules/ai-moderation/abortHelper.ts
@@ -0,0 +1,86 @@
+/**
+ * abortHelper.ts — Centralized AbortController with automatic timeout cleanup.
+ *
+ * All `new AbortController()` + `setTimeout(abort, ms)` patterns across the
+ * moderation subsystem are replaced by this module so that:
+ *   1. Every timer calls `.unref()` so it cannot keep Node alive during shutdown.
+ *   2. Cleanup is guaranteed via `cleanup()` or `withAbortTimeout()`.
+ *   3. The AbortError is distinguishable via `isAbortError()`.
+ */
+
+/**
+ * Create an AbortController that auto-aborts after `ms` milliseconds.
+ * Returns the signal and a `cleanup()` function that MUST be called
+ * (typically in a `finally` block) to cancel the timer.
+ *
+ * @example
+ * ```
+ * const { signal, cleanup } = createAbortTimeout(8000);
+ * try {
+ *   await fetch(url, { signal });
+ * } finally {
+ *   cleanup();
+ * }
+ * ```
+ */
+export function createAbortTimeout(ms: number): {
+  signal: AbortSignal;
+  cleanup: () => void;
+} {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), ms);
+  // Prevent the timer from keeping the Node.js event loop alive during shutdown
+  timer.unref();
+  return {
+    signal: controller.signal,
+    cleanup: () => clearTimeout(timer),
+  };
+}
+
+/**
+ * Higher-order wrapper that runs an async function with an abort timeout.
+ * The cleanup is handled automatically — callers never forget `clearTimeout`.
+ *
+ * If the operation is aborted by the timeout, the resulting error is re-thrown
+ * with a descriptive message.
+ *
+ * @example
+ * ```
+ * const result = await withAbortTimeout(8000, async (signal) => {
+ *   return fetch(url, { signal }).then(r => r.json());
+ * }, "SearXNG search");
+ * ```
+ */
+export async function withAbortTimeout<T>(
+  ms: number,
+  fn: (signal: AbortSignal) => Promise<T>,
+  label = "operation",
+): Promise<T> {
+  const { signal, cleanup } = createAbortTimeout(ms);
+  try {
+    return await fn(signal);
+  } catch (err) {
+    if (signal.aborted) {
+      throw new Error(`${label} timed out after ${ms}ms`);
+    }
+    throw err;
+  } finally {
+    cleanup();
+  }
+}
+
+/**
+ * Check whether an error was caused by an AbortController signal firing
+ * (either our explicit abort or the timeout).
+ */
+export function isAbortError(err: unknown): boolean {
+  if (err instanceof DOMException) return err.name === "AbortError";
+  if (err instanceof Error) {
+    return (
+      err.name === "AbortError" ||
+      err.message.includes("timed out after") ||
+      err.message.includes("aborted")
+    );
+  }
+  return false;
+}
diff --git a/services/discord-gateway/src/modules/ai-moderation/aiAnalysisWorker.ts b/services/discord-gateway/src/modules/ai-moderation/aiAnalysisWorker.ts
index ce98cd3..5bd14d8 100644
--- a/services/discord-gateway/src/modules/ai-moderation/aiAnalysisWorker.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/aiAnalysisWorker.ts
@@ -186,14 +186,14 @@ async function processBatch(job: {
     }
   }
 
-  const allRows: MessageRecord[] = [];
-
   // ── Parallel: text-only + media analysis run concurrently ──────────
   // Text-only → fast LLM call. Media → download + vision + LLM.
   // Running both in parallel means media downloads overlap with text LLM call.
   // Each path saves to DB as soon as its own results are ready.
+  // Each promise resolves to its own MessageRecord[] — combined via
+  // destructured Promise.all to avoid race conditions on a shared array.
   // ────────────────────────────────────────────────────────────────────
-  const textPromise = textOnly.length > 0
+  const textPromise: Promise<MessageRecord[]> = textOnly.length > 0
     ? runModerationAnalysis({
         targets: textOnly,
         contextText: contextLines.join("\n"),
@@ -216,17 +216,18 @@ async function processBatch(job: {
         }));
         if (updates.length > 0) {
           return updateMessagesAIAnalysisBulk(updates).then((rows) => {
-            allRows.push(...rows);
             logger.info(
               { count: updates.length, conversationKey },
               "Text-only batch saved — media analysis still in progress",
             );
+            return rows;
           });
         }
+        return [];
       })
-    : Promise.resolve();
+    : Promise.resolve([]);
 
-  const mediaPromise = media.length > 0
+  const mediaPromise: Promise<MessageRecord[]> = media.length > 0
     ? runModerationAnalysis({
         targets: media,
         contextText: contextLines.join("\n"),
@@ -248,15 +249,15 @@ async function processBatch(job: {
           },
         }));
         if (updates.length > 0) {
-          return updateMessagesAIAnalysisBulk(updates).then((rows) => {
-            allRows.push(...rows);
-          });
+          return updateMessagesAIAnalysisBulk(updates);
         }
+        return [];
       })
-    : Promise.resolve();
+    : Promise.resolve([]);
 
-  // Wait for both to complete
-  await Promise.all([textPromise, mediaPromise]);
+  // Wait for both to complete and destructure results — no shared mutable array
+  const [textRows, mediaRows] = await Promise.all([textPromise, mediaPromise]);
+  const allRows = [...textRows, ...mediaRows];
 
   logger.info(
     { total: messages.length, textOnly: textOnly.length, media: media.length, saved: allRows.length },
diff --git a/services/discord-gateway/src/modules/ai-moderation/batchProcessor.ts b/services/discord-gateway/src/modules/ai-moderation/batchProcessor.ts
index 9a32c36..bfb365f 100644
--- a/services/discord-gateway/src/modules/ai-moderation/batchProcessor.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/batchProcessor.ts
@@ -178,22 +178,6 @@ export async function processBatch(
       messages,
     })) as AnalysisWorkerResponse;
 
-    // Do not broadcast or auto-delete if it's an API failure that will be reverted.
-    for (const row of result.rows) {
-      let isApiFailure = false;
-      if (row.ai_status === "error") {
-        try {
-          const flags = JSON.parse(row.ai_moderation_flags ?? "[]") as string[];
-          isApiFailure = flags.includes("analysis_api_failed");
-        } catch {}
-      }
-
-      if (!isApiFailure) {
-        broadcastAnalysisCompleted(row);
-        scheduleAutoDelete(row);
-      }
-    }
-
     // Post-batch reputation updates (fire-and-forget)
     postBatchReputationUpdate(
       result.rows.filter((r) => {
diff --git a/services/discord-gateway/src/modules/ai-moderation/circuitBreaker.ts b/services/discord-gateway/src/modules/ai-moderation/circuitBreaker.ts
index db388dc..9e80ab2 100644
--- a/services/discord-gateway/src/modules/ai-moderation/circuitBreaker.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/circuitBreaker.ts
@@ -36,6 +36,10 @@ export const workerPool = new Piscina({
   filename: fileURLToPath(getAnalysisWorkerUrl()),
   execArgv: process.execArgv,
   maxThreads: config.PISCINA_MAX_THREADS ?? availableParallelism(),
+  // Each worker processes at most 1 task at a time so the pool itself
+  // acts as the concurrency governor. Combined with per-worker p-limit
+  // inside concurrencyLimiter.ts, this prevents LLM API overload.
+  concurrentTasksPerWorker: 1,
 });
 
 /**
@@ -228,7 +232,7 @@ export function scheduleAutoDelete(row: MessageRecord): void {
   };
 
   if (config.AUTO_DELETE_FLAGGED_DELAY_MS > 0) {
-    setTimeout(run, config.AUTO_DELETE_FLAGGED_DELAY_MS);
+    setTimeout(run, config.AUTO_DELETE_FLAGGED_DELAY_MS).unref();
     return;
   }
   setImmediate(run);
diff --git a/services/discord-gateway/src/modules/ai-moderation/concurrencyLimiter.ts b/services/discord-gateway/src/modules/ai-moderation/concurrencyLimiter.ts
index 9bdaf1e..e819d74 100644
--- a/services/discord-gateway/src/modules/ai-moderation/concurrencyLimiter.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/concurrencyLimiter.ts
@@ -22,7 +22,6 @@ function updateCounts(): void {
 }
 
 export async function withLlmConcurrency<T>(fn: () => Promise<T>): Promise<T> {
-  const queuedAt = activeCount + pendingCount;
   pendingCount++;
   logger.debug(
     { activeCount, pendingCount, maxConcurrent: config.AI_LLM_MAX_CONCURRENT },
@@ -30,17 +29,17 @@ export async function withLlmConcurrency<T>(fn: () => Promise<T>): Promise<T> {
   );
 
   return llmSemaphore(async () => {
-    pendingCount--;
-    activeCount++;
-
-    if (activeCount >= (config.AI_LLM_MAX_CONCURRENT ?? 5)) {
-      logger.warn(
-        { activeCount, maxConcurrent: config.AI_LLM_MAX_CONCURRENT },
-        "LLM concurrency limit reached",
-      );
-    }
-
     try {
+      pendingCount--;
+      activeCount++;
+
+      if (activeCount >= (config.AI_LLM_MAX_CONCURRENT ?? 5)) {
+        logger.warn(
+          { activeCount, maxConcurrent: config.AI_LLM_MAX_CONCURRENT },
+          "LLM concurrency limit reached",
+        );
+      }
+
       return await fn();
     } finally {
       activeCount--;
diff --git a/services/discord-gateway/src/modules/ai-moderation/individualFallbackProcessor.ts b/services/discord-gateway/src/modules/ai-moderation/individualFallbackProcessor.ts
index 184cd9d..cb59a13 100644
--- a/services/discord-gateway/src/modules/ai-moderation/individualFallbackProcessor.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/individualFallbackProcessor.ts
@@ -277,6 +277,50 @@ async function processIndividualFallback(
   }
 }
 
+// ---------------------------------------------------------------------------
+// Individual fallback retry queue (used when circuit breaker is active)
+// ---------------------------------------------------------------------------
+
+/** Messages awaiting retry when individual CB cools down. */
+const individualRetryQueue = new LRUCache<string, MessageRecord>({ max: 10000 });
+let individualRetryTimer: ReturnType<typeof setTimeout> | null = null;
+const INDIVIDUAL_RETRY_CHECK_MS = 30000;
+
+/**
+ * Schedule a retry for messages that were skipped because the individual
+ * circuit breaker was active. Retries once after cooldown expires.
+ */
+function scheduleIndividualRetry(messages: MessageRecord[]): void {
+  for (const msg of messages) {
+    if (!individualRetryQueue.has(msg.id)) {
+      individualRetryQueue.set(msg.id, msg);
+    }
+  }
+  if (individualRetryTimer === null) {
+    individualRetryTimer = setTimeout(() => {
+      individualRetryTimer = null;
+      if (Date.now() < individualCooldownUntil) {
+        // Still in cooldown — reschedule
+        scheduleIndividualRetry([]);
+        return;
+      }
+      const ids = [...individualRetryQueue.keys()];
+      const msgs: MessageRecord[] = [];
+      for (const id of ids) {
+        const m = individualRetryQueue.get(id);
+        if (m) {
+          individualRetryQueue.delete(id);
+          msgs.push(m);
+        }
+      }
+      if (msgs.length > 0) {
+        logger.info({ count: msgs.length }, "Retrying individual fallback messages after circuit breaker cooldown");
+        enqueueIndividualFallbacks(msgs);
+      }
+    }, INDIVIDUAL_RETRY_CHECK_MS);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Enqueue individual fallbacks
 // ---------------------------------------------------------------------------
@@ -295,8 +339,9 @@ export function enqueueIndividualFallbacks(messages: MessageRecord[]): void {
         until: new Date(individualCooldownUntil).toISOString(),
         skipped: messages.length,
       },
-      "Individual fallback circuit breaker active -- messages will be recovered later",
+      "Individual fallback circuit breaker active — messages queued for retry",
     );
+    scheduleIndividualRetry(messages);
     return;
   }
 
diff --git a/services/discord-gateway/src/modules/ai-moderation/mediaAnalysisClient.ts b/services/discord-gateway/src/modules/ai-moderation/mediaAnalysisClient.ts
index 460f820..11a0c15 100644
--- a/services/discord-gateway/src/modules/ai-moderation/mediaAnalysisClient.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/mediaAnalysisClient.ts
@@ -23,6 +23,7 @@ import type {
 import { llmVision } from "./llmClient.js";
 import { sanitizeAiContent } from "./moderationPrompt.js";
 import {
+  buildAttachmentTextOnlyWarning,
   buildCustomEmojiVisionPrompt,
   buildGeneralImageVisionPrompt,
   buildStickerTextOnlyWarning,
@@ -51,6 +52,7 @@ import { searchSearxng, extractSearchQueries, formatSearchResults } from "./sear
 import { getUserProfile } from "./userProfileStore.js";
 import { initializeUserReputation } from "./userReputationStore.js";
 import { escapeXml, getAnalysisContent, buildReferenceXml } from "./moderationBuilders.js";
+import { createAbortTimeout, isAbortError } from "./abortHelper.js";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -292,50 +294,97 @@ async function downloadSingleAttachment(
   targetId: string,
   maxDimension: number,
   imageMap: Map<string, MessageImagePart[]>,
+  mediaAnalysisMap?: Map<string, string[]>,
 ): Promise<void> {
   const log = createChildLogger("mediaAnalysis");
-  const urlToUse = att.uploaded_url ?? att.discord_url ?? null;
-  if (!urlToUse) return;
 
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 15000);
-  try {
-    const res = await fetch(urlToUse, { signal: controller.signal });
-    if (!res.ok || !res.body) return;
+  // Collect all available URLs — uploaded_url first (Telegram CDN, faster),
+  // then discord_url as fallback (may have expired CDN signature)
+  const urlsToTry = [
+    att.uploaded_url,
+    att.discord_url,
+  ].filter((url): url is string => url !== null && url !== undefined);
 
-    let totalBytes = 0;
-    const chunks: Uint8Array[] = [];
-    const reader = res.body.getReader();
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-      if (value) {
-        totalBytes += value.length;
-        if (totalBytes > 10 * 1024 * 1024) { reader.cancel(); return; }
-        chunks.push(value);
+  // No URL at all — record a neutral fallback so downstream knows the
+  // attachment existed but was unreachable
+  if (urlsToTry.length === 0) {
+    if (mediaAnalysisMap) {
+      const existing = mediaAnalysisMap.get(targetId) ?? [];
+      existing.push(`[attachment: "${att.filename}" dari pesan id=${targetId} — tidak ada URL untuk diunduh]`);
+      mediaAnalysisMap.set(targetId, existing);
+    }
+    return;
+  }
+
+  let lastError: Error | null = null;
+
+  // Try each URL, with 3 retries per URL (exponential backoff: 1s, 2s)
+  for (const url of urlsToTry) {
+    for (let attempt = 0; attempt < 3; attempt++) {
+      try {
+        const { signal, cleanup } = createAbortTimeout(15000);
+        const res = await fetch(url, { signal });
+        if (!res.ok || !res.body) {
+          cleanup();
+          throw new Error(`HTTP ${res.status}`);
+        }
+
+        let totalBytes = 0;
+        const chunks: Uint8Array[] = [];
+        const reader = res.body.getReader();
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          if (value) {
+            totalBytes += value.length;
+            if (totalBytes > 10 * 1024 * 1024) {
+              reader.cancel().catch(() => {});
+              res.body?.cancel().catch(() => {});
+              return;
+            }
+            chunks.push(value);
+          }
+        }
+        const imageBytes = Buffer.concat(chunks);
+        const sniffedMime = sniffImageMimeType(imageBytes);
+
+        if (!sniffedMime && att.type.startsWith("video/")) {
+          await extractVideoFrames(att, imageBytes, targetId, maxDimension, imageMap, signal);
+          return;
+        }
+        if (!sniffedMime) return;
+
+        const { data: resizedBuffer, mimeType: resizedMime } = await resizeImageForVision(imageBytes, maxDimension);
+        const dataUrl = `data:${resizedMime};base64,${resizedBuffer.toString("base64")}`;
+        addImageToMap(imageMap, targetId, {
+          type: "image_url",
+          image_url: { url: dataUrl },
+          sourceLabel: `[gambar di atas adalah attachment ${att.filename} dari pesan id=${att.message_id}]`,
+        });
+
+        cleanup();
+        return; // success!
+      } catch (err) {
+        lastError = err instanceof Error ? err : new Error(String(err));
+        log.warn(
+          { attachmentId: att.id, url: url.slice(0, 80), attempt, error: lastError.message },
+          `Download attempt ${attempt + 1}/3 failed`,
+        );
+        if (attempt < 2) await delay(1000 * (attempt + 1)); // backoff: 1s, 2s
       }
     }
-    const imageBytes = Buffer.concat(chunks);
-    const sniffedMime = sniffImageMimeType(imageBytes);
-
-    if (!sniffedMime && att.type.startsWith("video/")) {
-      await extractVideoFrames(att, imageBytes, targetId, maxDimension, imageMap);
-      return;
-    }
-    if (!sniffedMime) return;
-
-    const { data: resizedBuffer, mimeType: resizedMime } = await resizeImageForVision(imageBytes, maxDimension);
-    const dataUrl = `data:${resizedMime};base64,${resizedBuffer.toString("base64")}`;
-    addImageToMap(imageMap, targetId, {
-      type: "image_url",
-      image_url: { url: dataUrl },
-      sourceLabel: `[gambar di atas adalah attachment ${att.filename} dari pesan id=${att.message_id}]`,
-    });
-  } catch (err) {
-    log.warn({ attachmentId: att.id, error: err instanceof Error ? err.message : String(err) }, "Download failed");
-  } finally {
-    clearTimeout(timeoutId);
   }
+
+  // All URLs + all retries exhausted — record a neutral fallback
+  if (mediaAnalysisMap) {
+    const existing = mediaAnalysisMap.get(targetId) ?? [];
+    existing.push(buildAttachmentTextOnlyWarning(att.filename, targetId));
+    mediaAnalysisMap.set(targetId, existing);
+  }
+  log.warn(
+    { attachmentId: att.id, filename: att.filename, error: lastError?.message },
+    "All download attempts exhausted for attachment",
+  );
 }
 
 async function extractVideoFrames(
@@ -344,6 +393,7 @@ async function extractVideoFrames(
   targetId: string,
   maxDimension: number,
   imageMap: Map<string, MessageImagePart[]>,
+  signal?: AbortSignal,
 ): Promise<void> {
   const log = createChildLogger("mediaAnalysis");
   const execFileAsync = promisify(execFile);
@@ -351,15 +401,19 @@ async function extractVideoFrames(
   const inputPath = path.join(tmpDir, att.filename || "video.mp4");
   const outputPattern = path.join(tmpDir, "frame-%03d.jpg");
   try {
+    if (signal?.aborted) return;
     await writeFile(inputPath, videoBytes);
+    if (signal?.aborted) return;
     const { stdout: durationStr } = await execFileAsync("/usr/bin/ffprobe", [
       "-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", inputPath,
-    ], { timeout: 10000 });
+    ], { timeout: 10000, signal });
+    if (signal?.aborted) return;
     const duration = parseFloat(durationStr.trim()) || 1;
     const fps = (3 / duration).toFixed(6);
+    if (signal?.aborted) return;
     await execFileAsync("/usr/bin/ffmpeg", [
       "-i", inputPath, "-vf", `fps=${fps}`, "-frames:v", "4", "-vsync", "vfr", "-q:v", "2", outputPattern,
-    ], { timeout: 30000 });
+    ], { timeout: 30000, signal });
     for (let i = 1; i <= 4; i++) {
       try {
         const framePath = path.join(tmpDir, `frame-${String(i).padStart(3, "0")}.jpg`);
@@ -377,10 +431,8 @@ async function extractVideoFrames(
   } catch (ffmpegErr) {
     log.warn({ attachmentId: att.id, error: ffmpegErr instanceof Error ? ffmpegErr.message : String(ffmpegErr) }, "ffmpeg failed");
   } finally {
-    try { await unlink(inputPath); } catch { /* ignore */ }
-    for (let i = 1; i <= 4; i++) {
-      try { await unlink(path.join(tmpDir, `frame-${String(i).padStart(3, "0")}.jpg`)); } catch { /* ignore */ }
-    }
+    // rm(tmpDir, { recursive: true }) already removes all files inside,
+    // so individual unlink calls are redundant. Just clean up the whole dir.
     try { await rm(tmpDir, { recursive: true, force: true }); } catch { /* ignore */ }
   }
 }
@@ -486,7 +538,7 @@ export async function prepareMediaMessage(
     .filter((a) => a.message_id === targetId && (a.uploaded_url ?? a.discord_url ?? null) && (a.type.startsWith("image/") || a.type.startsWith("video/")))
     .slice(0, 8);
   for (const att of msgAttachments) {
-    downloadPromises.push(downloadSingleAttachment(att, targetId, maxDimension, imageMap));
+    downloadPromises.push(downloadSingleAttachment(att, targetId, maxDimension, imageMap, mediaAnalysisMap));
   }
 
   // URLs
@@ -505,8 +557,8 @@ export async function prepareMediaMessage(
   await Promise.all(downloadPromises);
   if (urlWebTexts.length > 0) webTextMap.set(targetId, urlWebTexts);
 
-  // Vision analysis
-  await Promise.all(
+  // Vision analysis — use allSettled so one failure doesn't cascade
+  const visionResults = await Promise.allSettled(
     Array.from(imageMap.entries()).flatMap(([msgId, images]) =>
       images.map(async (image) => {
         const summary = await analyzeSingleMediaImage(msgId, image);
@@ -516,6 +568,12 @@ export async function prepareMediaMessage(
       }),
     ),
   );
+  // Log any vision failures without aborting the batch
+  for (const r of visionResults) {
+    if (r.status === "rejected") {
+      log.warn({ error: r.reason instanceof Error ? r.reason.message : String(r.reason) }, "Individual vision analysis failed (batched)");
+    }
+  }
 
   // SearXNG
   let searxngXml = "";
diff --git a/services/discord-gateway/src/modules/ai-moderation/moderationOrchestrator.ts b/services/discord-gateway/src/modules/ai-moderation/moderationOrchestrator.ts
index a3ec6c3..2929e7f 100644
--- a/services/discord-gateway/src/modules/ai-moderation/moderationOrchestrator.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/moderationOrchestrator.ts
@@ -29,6 +29,7 @@ import {
 import { extractUrlsFromText, fetchUrlSafely } from "./urlFetcher.js";
 import { getUserProfile } from "./userProfileStore.js";
 import { initializeUserReputation } from "./userReputationStore.js";
+import { createAbortTimeout, isAbortError } from "./abortHelper.js";
 
 const log = createChildLogger("moderationOrchestrator");
 
@@ -40,10 +41,8 @@ interface RetryState {
   lastInvalidContent: string | null;
 }
 
-// ---------------------------------------------------------------------------
-// Few-shot correction builder
-// ---------------------------------------------------------------------------
-async function buildCorrectedFewShotExamples(): Promise<string> {
+// ─── Few-shot correction builder ────────────────────────────────────────────
+const _buildCorrectedFewShotExamples = async (): Promise<string> => {
   try {
     const corrections = await getRecentCorrectedModerations(5);
     if (corrections.length === 0) return "";
@@ -62,6 +61,22 @@ async function buildCorrectedFewShotExamples(): Promise<string> {
   } catch {
     return "";
   }
+};
+
+// ─── In-memory cache untuk correctedFewShotExamples ──────────────────────
+// getCachedFewShotExamples() dipanggil di banyak tempat (setiap sub-batch
+// dan retry), padahal datanya jarang berubah. Cache sederhana TTL 60 detik
+// mengurangi redundant DB queries dari O(retries × subBatches) ke O(1).
+let _fewShotCache: { result: string; expiresAt: number } | null = null;
+const FEW_SHOT_CACHE_TTL = 60_000; // 60 detik
+
+async function getCachedFewShotExamples(): Promise<string> {
+  if (_fewShotCache && Date.now() < _fewShotCache.expiresAt) {
+    return _fewShotCache.result;
+  }
+  const result = await _buildCorrectedFewShotExamples();
+  _fewShotCache = { result, expiresAt: Date.now() + FEW_SHOT_CACHE_TTL };
+  return result;
 }
 
 // ---------------------------------------------------------------------------
@@ -208,7 +223,25 @@ async function runTextOnlyBatch(
     }
     const urlArr = Array.from(allUrls).slice(0, 10);
     if (urlArr.length === 0) return new Map<string, string>();
-    const results = await Promise.allSettled(urlArr.map((url) => fetchUrlSafely(url)));
+
+    // Per-host rate limiting: add a small delay between requests to the same
+    // domain to avoid overwhelming third-party servers with concurrent fetches.
+    const hostGroups = new Map<string, string[]>();
+    for (const url of urlArr) {
+      try {
+        const host = new URL(url).hostname;
+        const group = hostGroups.get(host) ?? [];
+        group.push(url);
+        hostGroups.set(host, group);
+      } catch { /* invalid URL, skip */ }
+    }
+    const results = await Promise.allSettled(
+      Array.from(hostGroups.values()).flatMap((group) =>
+        group.map((url, idx) => () =>
+          idx > 0 ? delay(200 * idx).then(() => fetchUrlSafely(url)) : fetchUrlSafely(url),
+        ),
+      ).map((fn) => fn()),
+    );
     const map = new Map<string, string>();
     for (let i = 0; i < urlArr.length; i++) {
       const r = results[i];
@@ -291,7 +324,7 @@ async function runTextOnlyBatch(
 
     const buildContent = async (state: RetryState): Promise<string> => {
       const correction = state.lastParseError ? { error: state.lastParseError, preview: state.lastInvalidContent?.slice(0, 800) ?? "<empty>" } : undefined;
-      const correctedExamples = await buildCorrectedFewShotExamples();
+      const correctedExamples = await getCachedFewShotExamples();
       const systemText = buildSystemPromptModular({ contextText, mode: "text", correction, correctedExamples, channelCulture });
 
       const messagesBlock = (await Promise.all(batch.map(async (msg) => {
@@ -314,20 +347,18 @@ async function runTextOnlyBatch(
       return `${systemText}${searxngBlock}\n\n<messages_to_analyze>\n${messagesBlock}\n</messages_to_analyze>`;
     };
 
-    const abortController = new AbortController();
-    const timeoutId = setTimeout(() => abortController.abort(), timeoutMs);
-    timeoutId.unref();
+    const { signal, cleanup } = createAbortTimeout(timeoutMs);
 
     let batchResult: { results: AnalysisResult[]; raw: unknown };
     try {
-      batchResult = await callModerationLLM(buildContent, targetIds, `text-batch-${i + 1}`, abortController.signal);
+      batchResult = await callModerationLLM(buildContent, targetIds, `text-batch-${i + 1}`, signal);
     } catch (err: any) {
-      if (err.name === "AbortError" || abortController.signal.aborted) {
+      if (isAbortError(err)) {
         throw new Error(`Text-only batch sub-batch ${i + 1} timed out for messages ${targetIds.join(", ")}`);
       }
       throw err;
     } finally {
-      clearTimeout(timeoutId);
+      cleanup();
     }
 
     // Fan-out results for deduplicated messages
@@ -372,7 +403,7 @@ async function runMediaBatch(
   const channelId = targets[0].channel_id;
   const channelCultureObj = channelId ? await getChannelCulture(channelId) : null;
   const channelCulture = channelCultureObj?.culture_summary;
-  const correctedExamples = await buildCorrectedFewShotExamples();
+  const correctedExamples = await getCachedFewShotExamples();
   const systemText = buildSystemPromptModular({ contextText, mode: "mixed", correctedExamples, channelCulture });
 
   const messagesBlock = prepared.map((p) => p.messageBlock).join("\n");
@@ -381,26 +412,24 @@ async function runMediaBatch(
   const perMsgTimeout = config.AI_LLM_MEDIA_ANALYSIS_TIMEOUT_MS ?? 60000;
   const batchTimeout = Math.min(Math.max(perMsgTimeout, perMsgTimeout * targets.length), 300_000);
 
-  const abortController = new AbortController();
-  const timeoutId = setTimeout(() => abortController.abort(), batchTimeout);
-  timeoutId.unref();
+  const { signal, cleanup } = createAbortTimeout(batchTimeout);
 
   try {
     const result = await callModerationLLM(
       async (_state: RetryState) => userContent,
       targetIds,
       `media-batch:${targetIds.length}msgs`,
-      abortController.signal,
+      signal,
     );
     log.info({ mediaCount: targets.length, resultCount: result.results.length }, "Media batch analysis complete");
     return result;
   } catch (err: any) {
-    if (err.name === "AbortError" || abortController.signal.aborted) {
+    if (isAbortError(err)) {
       throw new Error(`Media batch analysis timed out after ${batchTimeout}ms for ${targets.length} messages`);
     }
     throw err;
   } finally {
-    clearTimeout(timeoutId);
+    cleanup();
   }
 }
 
@@ -446,7 +475,7 @@ export async function runModerationAnalysis(
     const rawContent = target.edited_content ?? target.content;
     if (!rawContent.trim()) { uncachedTargets.push(target); continue; }
 
-    const cacheKey = makeTextModerationCacheKey(rawContent);
+    const cacheKey = makeTextModerationCacheKey(rawContent, target.user_id);
     if (seenCacheKeys.has(cacheKey)) {
       const previousHit = cacheHits.find((h) => h.messageId !== target.id);
       if (previousHit) {
@@ -534,7 +563,7 @@ export async function runModerationAnalysis(
       if (evidence.attachments.length > 0 || evidence.stickers.length > 0 || evidence.embeds.length > 0) continue;
     }
 
-    const cacheKey = makeTextModerationCacheKey(rawContent);
+    const cacheKey = makeTextModerationCacheKey(rawContent, target.user_id);
     setCachedTextModeration(cacheKey, {
       flags: result.flags ?? [],
       score: result.score ?? 0,
@@ -544,7 +573,7 @@ export async function runModerationAnalysis(
       confidence: result.confidence ?? result.score ?? 0,
       recommendedAction: result.recommendedAction ?? "none",
       status: result.status,
-    }).catch(() => {});
+    }).catch((e) => log.error({ error: e instanceof Error ? e.message : String(e) }, "Failed to cache text moderation result"));
   }
 
   const allResults = [...cacheHits, ...textBatchResult.results, ...mediaBatchResult.results];
diff --git a/services/discord-gateway/src/modules/ai-moderation/searxngSearch.ts b/services/discord-gateway/src/modules/ai-moderation/searxngSearch.ts
index b9e6b3b..b2e1171 100644
--- a/services/discord-gateway/src/modules/ai-moderation/searxngSearch.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/searxngSearch.ts
@@ -1,5 +1,6 @@
 import Redis from "ioredis";
 import { createChildLogger } from "@bete/shared/logger";
+import { createAbortTimeout } from "./abortHelper.js";
 
 const log = createChildLogger("searxng-search");
 
@@ -8,15 +9,97 @@ const MAX_RESULTS = 3;
 const TIMEOUT_MS = 8000;
 const CACHE_TTL = 86400; // 24 hours
 const CACHE_PREFIX = "searxng:";
+/** How often to attempt reconnection when Redis is down (ms). */
+const RECONNECT_INTERVAL_MS = 60_000;
 
 let redis: Redis | null = null;
+let _initialized = false;
+let _redisUrl = "";
+/** Tracks whether Redis is currently healthy (connected + responding). */
+let _redisHealthy = false;
+let _lastLogAt = 0; // throttle repeated warn logs to once per 60s
+
+// ---------------------------------------------------------------------------
+// Health tracking
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns true if the SearXNG Redis cache is connected and healthy.
+ * Use this for health-check endpoints or status dashboards.
+ */
+export function isSearxngCacheAvailable(): boolean {
+  return _redisHealthy;
+}
+
+/**
+ * Returns a human-readable status string for logging / health endpoints.
+ */
+export function getSearxngCacheStatus(): string {
+  if (!_initialized) return "not-initialized";
+  if (!redis) return "no-url";
+  return _redisHealthy ? "healthy" : "disconnected";
+}
+
+// ---------------------------------------------------------------------------
+// Reconnection helper
+// ---------------------------------------------------------------------------
+
+/**
+ * Schedule a one-shot reconnection attempt after RECONNECT_INTERVAL_MS.
+ * Only one reconnection timer runs at a time.
+ */
+let _reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+
+function scheduleReconnect(): void {
+  if (_reconnectTimer) return; // already scheduled
+  _reconnectTimer = setTimeout(async () => {
+    _reconnectTimer = null;
+    if (!redis || _redisHealthy) return; // nothing to do
+
+    log.info("SearXNG Redis: attempting reconnection...");
+    try {
+      // ioredis reconnects automatically if `lazyConnect` is false,
+      // but we set it to true, so we need to manually call connect().
+      await redis.connect();
+      // If we get here, connection succeeded
+      _redisHealthy = true;
+      log.info("SearXNG Redis: reconnected successfully ✅");
+    } catch {
+      _redisHealthy = false;
+      const now = Date.now();
+      if (now - _lastLogAt > 60_000) {
+        log.warn(
+          { nextRetryMs: RECONNECT_INTERVAL_MS },
+          "SearXNG Redis: reconnection failed — will retry",
+        );
+        _lastLogAt = now;
+      }
+      // Schedule another attempt
+      scheduleReconnect();
+    }
+  }, RECONNECT_INTERVAL_MS);
+  _reconnectTimer.unref?.();
+}
+
+// ---------------------------------------------------------------------------
+// Initialization
+// ---------------------------------------------------------------------------
 
 /**
  * Initialize Redis connection for SearXNG cache.
  * Safe to call multiple times — only creates one connection.
+ * Returns true if Redis cache is available, false if falling back to no-cache.
  */
-export function initSearxngCache(redisUrl: string): void {
-  if (redis) return;
+export function initSearxngCache(redisUrl: string): boolean {
+  if (_initialized) return _redisHealthy;
+  _initialized = true;
+  _redisUrl = redisUrl;
+
+  if (!redisUrl) {
+    log.warn("No REDIS_URL provided — SearXNG cache disabled");
+    return false;
+  }
+
   redis = new Redis(redisUrl, {
     maxRetriesPerRequest: 3,
     retryStrategy(times) {
@@ -26,16 +109,92 @@ export function initSearxngCache(redisUrl: string): void {
     lazyConnect: true,
     enableReadyCheck: false,
   });
+
   redis.on("error", (err) => {
-    log.warn({ err: err.message }, "SearXNG Redis cache error");
+    const wasHealthy = _redisHealthy;
+    _redisHealthy = false;
+    if (wasHealthy) {
+      // State transition: healthy → unhealthy — always log
+      log.warn(
+        { error: err.message },
+        "SearXNG Redis: connection lost — falling back to no-cache",
+      );
+    } else {
+      // Already unhealthy — throttle repeated error logs
+      const now = Date.now();
+      if (now - _lastLogAt > 60_000) {
+        log.warn(
+          { error: err.message },
+          "SearXNG Redis: still disconnected",
+        );
+        _lastLogAt = now;
+      }
+    }
+    scheduleReconnect();
   });
+
+  redis.on("ready", () => {
+    if (!_redisHealthy) {
+      _redisHealthy = true;
+      log.info("SearXNG Redis: connected and healthy ✅");
+    }
+  });
+
   redis.connect().catch(() => {
-    log.warn("SearXNG Redis cache unavailable — falling back to no-cache");
-    redis = null;
+    _redisHealthy = false;
+    log.warn("SearXNG Redis: initial connection failed — running without cache");
+    scheduleReconnect();
   });
+
   log.info("SearXNG Redis cache initialized");
+  return true;
 }
 
+// ---------------------------------------------------------------------------
+// Cache operations with visible failure logging
+// ---------------------------------------------------------------------------
+
+async function cacheGet(key: string): Promise<string | null> {
+  if (!redis || !_redisHealthy) return null;
+  try {
+    const result = await redis.get(key);
+    return result;
+  } catch (err) {
+    // Log once per minute to avoid log spam
+    const now = Date.now();
+    if (now - _lastLogAt > 60_000) {
+      log.warn(
+        { error: err instanceof Error ? err.message : String(err) },
+        "SearXNG Redis: cache read failed",
+      );
+      _lastLogAt = now;
+    }
+    _redisHealthy = false;
+    scheduleReconnect();
+    return null;
+  }
+}
+
+function cacheSet(key: string, value: string, ttlSeconds: number): void {
+  if (!redis || !_redisHealthy) return;
+  redis.setex(key, ttlSeconds, value).catch((err) => {
+    const now = Date.now();
+    if (now - _lastLogAt > 60_000) {
+      log.warn(
+        { error: err instanceof Error ? err.message : String(err) },
+        "SearXNG Redis: cache write failed",
+      );
+      _lastLogAt = now;
+    }
+    _redisHealthy = false;
+    scheduleReconnect();
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Search
+// ---------------------------------------------------------------------------
+
 export interface SearxngResult {
   title: string;
   url: string;
@@ -53,33 +212,30 @@ export async function searchSearxng(
   const cacheKey = `${CACHE_PREFIX}${category}:${query.toLowerCase().trim()}`;
 
   // Try cache first
-  if (redis) {
+  const cached = await cacheGet(cacheKey);
+  if (cached) {
+    log.debug({ query, category }, "SearXNG cache HIT");
     try {
-      const cached = await redis.get(cacheKey);
-      if (cached) {
-        log.debug({ query, category }, "SearXNG cache HIT");
-        return JSON.parse(cached) as SearxngResult[];
-      }
+      return JSON.parse(cached) as SearxngResult[];
     } catch {
-      // Cache read failed, continue to API
+      // Corrupted cache entry — continue to API
     }
   }
 
   // Cache miss — hit SearXNG API
   try {
     const url = `${SEARXNG_BASE_URL}/search?q=${encodeURIComponent(query)}&format=json&language=id&categories=${category}`;
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);
+    const { signal, cleanup } = createAbortTimeout(TIMEOUT_MS);
 
     const response = await fetch(url, {
-      signal: controller.signal,
+      signal,
       headers: {
         Accept: "application/json",
         "User-Agent":
           "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
       },
     });
-    clearTimeout(timeoutId);
+    cleanup();
 
     if (!response.ok) {
       log.warn({ status: response.status, query }, "SearXNG search failed");
@@ -97,11 +253,7 @@ export async function searchSearxng(
     }));
 
     // Store in cache (fire and forget — don't block on write)
-    if (redis) {
-      redis.setex(cacheKey, CACHE_TTL, JSON.stringify(mapped)).catch(() => {
-        // Cache write failed silently
-      });
-    }
+    cacheSet(cacheKey, JSON.stringify(mapped), CACHE_TTL);
 
     log.debug({ query, category, resultCount: mapped.length }, "SearXNG search OK");
     return mapped;
@@ -114,6 +266,10 @@ export async function searchSearxng(
   }
 }
 
+// ---------------------------------------------------------------------------
+// Query extraction
+// ---------------------------------------------------------------------------
+
 /**
  * Extract meaningful search queries from message content.
  * Uses multiple strategies to find terms worth searching.
@@ -179,6 +335,10 @@ export function extractSearchQueries(content: string): string[] {
   return Array.from(queries).slice(0, 3);
 }
 
+// ---------------------------------------------------------------------------
+// Formatting
+// ---------------------------------------------------------------------------
+
 /**
  * Format SearXNG results as XML for LLM context.
  */
diff --git a/services/discord-gateway/src/modules/ai-moderation/stickerPrompt.ts b/services/discord-gateway/src/modules/ai-moderation/stickerPrompt.ts
index c9fd6d9..db50260 100644
--- a/services/discord-gateway/src/modules/ai-moderation/stickerPrompt.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/stickerPrompt.ts
@@ -67,6 +67,24 @@ export function buildStickerTextOnlyWarning(
   );
 }
 
+/**
+ * Build a neutral fallback text when an image/video attachment cannot be
+ * downloaded or analyzed. Unlike the sticker warning, this is deliberately
+ * neutral — it only records *that* an attachment existed, without any
+ * instruction to the LLM about how to treat it. The absence of visual
+ * data already means the LLM must rely on message content alone.
+ *
+ * Returns a formatted string for inclusion in the media context block.
+ */
+export function buildAttachmentTextOnlyWarning(
+  filename: string,
+  messageId: string,
+): string {
+  const fallback = `[attachment: "${filename}" dari pesan id=${messageId} — tidak tersedia untuk analisis visual]`;
+  logger.debug({ filename, messageId }, "Built attachment text-only fallback");
+  return fallback;
+}
+
 /**
  * Prompt used when a custom emoji image was successfully downloaded
  * and is being sent to the vision LLM as a base64 image.
diff --git a/services/discord-gateway/src/modules/ai-moderation/textCacheStore.ts b/services/discord-gateway/src/modules/ai-moderation/textCacheStore.ts
index 752a5be..42c4292 100644
--- a/services/discord-gateway/src/modules/ai-moderation/textCacheStore.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/textCacheStore.ts
@@ -49,6 +49,11 @@ export async function getCachedText(
 
 /**
  * Insert or update a text analysis cache entry.
+ *
+ * NOTE: The INSERT ... ON CONFLICT pattern is intentional — for new cache
+ * keys we always INSERT rather than checking existence first, so there is
+ * no TOCTOU race. The ON CONFLICT DO UPDATE handles the case where another
+ * worker inserted the same key between our check and our insert.
  */
 export async function upsertCachedText(
   text: string,
@@ -291,12 +296,16 @@ export async function deleteCachedMediaAnalysis(
 /**
  * Generate a deterministic cache key for a per-user moderation result.
  *
- * Format: user_mod:<userId>:<sha256(content).slice(0,16)>
- * Two users sending the same text get separate cache entries so that
- * per-user action history (e.g. repeated spam) can be tracked later.
+ * Format: text_mod:<userId>:<sha256(content).slice(0,16)>
+ * By including userId, two users sending the same text get separate
+ * cache entries so per-user context (reputation, username flags, etc.)
+ * is respected.
  */
-export function makeTextModerationCacheKey(content: string): string {
+export function makeTextModerationCacheKey(content: string, userId?: string): string {
   const hash = createHash("sha256").update(content).digest("hex").slice(0, 16);
+  if (userId) {
+    return `text_mod:${userId}:${hash}`;
+  }
   return `text_mod:${hash}`;
 }
 
diff --git a/services/discord-gateway/src/modules/ai-moderation/urlFetcher.ts b/services/discord-gateway/src/modules/ai-moderation/urlFetcher.ts
index c49c0d9..994d76f 100644
--- a/services/discord-gateway/src/modules/ai-moderation/urlFetcher.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/urlFetcher.ts
@@ -1,6 +1,7 @@
 import { resolve } from "node:dns/promises";
 import { isIP } from "node:net";
 import { createChildLogger } from "@bete/shared/logger";
+import { createAbortTimeout } from "./abortHelper.js";
 
 const log = createChildLogger("urlFetcher");
 
@@ -15,52 +16,103 @@ export interface FetchedUrlContext {
 
 const MAX_FETCH_SIZE = 5 * 1024 * 1024; // 5 MB
 const FETCH_TIMEOUT_MS = 8000;
-const URL_REGEX = /https?:\/\/[^\s<]+[^<.,:;"')\]\s]/gi;
+const URL_REGEX = /https?:\/\/[^\s<]+[^<.,:;"')?\]\s]/gi;
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// SSRF Protection with DNS Rebinding Defense
+// ═══════════════════════════════════════════════════════════════════════════════
+// Strategy: Resolve the hostname to IP addresses BEFORE fetching, then fetch
+// directly from a pinned IP (using a Host header for virtual hosting).
+// This prevents DNS rebinding where a domain alternates between a public IP
+// and an internal IP (127.0.0.1, 10.x.x.x) between the check and the fetch.
+//
+// Edge cases handled:
+// - No DNS records → reject (cannot fetch)
+// - Multiple IPs (round-robin DNS) → pick first public one
+// - All IPs are internal → reject
+// - Direct IP literal → validate and pass through
+// ═══════════════════════════════════════════════════════════════════════════════
+
+interface PinnedAddress {
+  /** The original hostname from the URL (used in Host header) */
+  hostname: string;
+  /** The pinned, validated IP address to connect to (already vetted as safe) */
+  ip: string;
+  /** The port from the original URL */
+  port: string;
+  /** The protocol (http: or https:) */
+  protocol: string;
+  /** The pathname + search + hash (everything after host:port) */
+  path: string;
+}
+
+function isPrivateIP(ip: string): boolean {
+  return (
+    ip === "127.0.0.1" ||
+    ip === "::1" ||
+    ip === "0.0.0.0" ||
+    ip.startsWith("192.168.") ||
+    ip.startsWith("10.") ||
+    /^172\.(1[6-9]|2[0-9]|3[0-1])\./.test(ip) ||
+    ip.startsWith("169.254.") || // link-local
+    ip.startsWith("fc") || // IPv6 unique local (fc00::/7)
+    ip.startsWith("fd")    // IPv6 unique local
+  );
+}
 
 /**
- * Basic SSRF protection.
- * Note: A sophisticated attacker could still use DNS rebinding.
+ * Resolve a hostname to a pinned IP address.
+ * Returns the first public IP found, or null if all resolved IPs are private.
+ * Also returns null if the host is a private IP literal.
+ *
+ * This function is the sole gate — once a safe IP is returned, the caller
+ * MUST use it directly without re-resolving the hostname.
  */
-async function isSafeUrl(urlStr: string): Promise<boolean> {
+async function resolveAndPinAddress(urlStr: string): Promise<PinnedAddress | null> {
   try {
     const parsed = new URL(urlStr);
     const host = parsed.hostname;
+    const protocol = parsed.protocol; // "http:" or "https:"
+    const port = parsed.port || (protocol === "https:" ? "443" : "80");
+    const path = parsed.pathname + parsed.search + parsed.hash;
 
-    // Block obvious local IPs/hostnames
+    // Block private IP literals immediately
+    if (isIP(host)) {
+      if (isPrivateIP(host)) return null;
+      // Direct public IP literal — can fetch directly
+      return { hostname: host, ip: host, port, protocol, path };
+    }
+
+    // Block obvious private hostnames
     if (
       host === "localhost" ||
-      host === "127.0.0.1" ||
-      host === "::1" ||
-      host.startsWith("192.168.") ||
-      host.startsWith("10.") ||
-      /^172\.(1[6-9]|2[0-9]|3[0-1])\./.test(host)
+      host === "localhost.localdomain" ||
+      host.endsWith(".local") ||
+      host.endsWith(".internal")
     ) {
-      return false;
+      return null;
     }
 
-    // Try resolving to check if it resolves to a local IP
-    if (!isIP(host)) {
-      try {
-        const addresses = await resolve(host);
-        for (const ip of addresses) {
-          if (
-            ip === "127.0.0.1" ||
-            ip.startsWith("192.168.") ||
-            ip.startsWith("10.") ||
-            /^172\.(1[6-9]|2[0-9]|3[0-1])\./.test(ip)
-          ) {
-            return false;
-          }
-        }
-      } catch (err) {
-        // If DNS fails, we can't fetch it anyway
-        return false;
-      }
+    // Resolve hostname to IP addresses
+    let addresses: string[];
+    try {
+      addresses = await resolve(host);
+    } catch {
+      // DNS resolution failed — can't verify safety
+      return null;
     }
 
-    return true;
-  } catch (err) {
-    return false;
+    if (addresses.length === 0) return null;
+
+    // Pick the first non-private IP
+    const publicIp = addresses.find((ip) => !isPrivateIP(ip));
+    if (!publicIp) return null;
+
+    // We now have a pinned, verified safe IP.
+    // The caller MUST use this IP directly for the fetch.
+    return { hostname: host, ip: publicIp, port, protocol, path };
+  } catch {
+    return null;
   }
 }
 
@@ -108,20 +160,27 @@ export async function fetchUrlSafely(
     return { url, type: "error", error: "Max redirect/meta depth reached" };
   }
 
-  if (!(await isSafeUrl(url))) {
+  // Resolve + pin IP address FIRST (defence against DNS rebinding).
+  // The pinned IP is used directly — we never re-resolve the hostname.
+  const pinned = await resolveAndPinAddress(url);
+  if (!pinned) {
     return { url, type: "error", error: "Unsafe URL blocked" };
   }
 
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+  // Reconstruct the URL using the pinned IP directly, keeping original Host
+  const pinnedUrl = `${pinned.protocol}//${pinned.ip}:${pinned.port}${pinned.path}`;
+
+  const { signal, cleanup } = createAbortTimeout(FETCH_TIMEOUT_MS);
 
   try {
-    const response = await fetch(url, {
-      signal: controller.signal,
+    const response = await fetch(pinnedUrl, {
+      signal,
       headers: {
         "User-Agent":
           "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 DiscordBot/2.0",
         Accept: "image/webp,image/apng,image/*,*/*;q=0.8",
+        // Use original hostname so virtual hosting still works
+        Host: pinned.hostname,
       },
       // Do not follow more than a few redirects natively, fetch handles up to 20 by default
     });
@@ -190,7 +249,7 @@ export async function fetchUrlSafely(
       error: err instanceof Error ? err.message : String(err),
     };
   } finally {
-    clearTimeout(timeoutId);
+    cleanup();
   }
 }
 
diff --git a/services/discord-gateway/src/modules/ai-moderation/userProfileLearner.ts b/services/discord-gateway/src/modules/ai-moderation/userProfileLearner.ts
index 78c8c00..a66c40a 100644
--- a/services/discord-gateway/src/modules/ai-moderation/userProfileLearner.ts
+++ b/services/discord-gateway/src/modules/ai-moderation/userProfileLearner.ts
@@ -63,11 +63,10 @@ async function learnUserProfile(
     .join("\n");
 
   const prompt = `Anda adalah AI ahli psikologi, analisis perilaku online, dan pembaca karakter.
-Tugas Anda adalah merangkum profil kepribadian SEORANG PRIBADI — bukan sekadar statistik
-gaya bicara — berdasarkan riwayat pesan-pesan mereka di server Discord.
+Tugas Anda adalah merangkum profil kepribadian SEORANG PRIBADI berdasarkan riwayat pesan-pesan mereka di server Discord.
 Buatlah ringkasan yang KAYA AKAN PERSONALITAS sehingga pembaca merasa "mengenal" orang ini.
 
-Pesan-pesan terakhir dari user "${userId}" (hanya pesan bersih/clean):
+Pesan-pesan terakhir dari user (hanya pesan bersih/clean):
 <messages>
 ${messagesText}
 </messages>
@@ -122,7 +121,18 @@ atau konten SARA, itu akan SANGAT tidak sesuai dengan karakternya dan patut dicu
     const text = completion.choices[0]?.message?.content?.trim();
     if (!text) throw new Error("Empty response from LLM");
 
-    await updateUserProfile(userId, guildId, text);
+    // Sanitize the AI-generated profile before saving to prevent
+    // prompt injection when the profile is later injected into prompts.
+    // Strip markdown code fences and XML special chars.
+    const sanitized = text
+      .replace(/```[\s\S]*?```/g, "")
+      .replace(/[<>&"']/g, (ch) => {
+        const entities: Record<string, string> = { "<": "&lt;", ">": "&gt;", "&": "&amp;", '"': "&quot;", "'": "&#39;" };
+        return entities[ch] || ch;
+      })
+      .trim();
+
+    await updateUserProfile(userId, guildId, sanitized);
     log.info(
       { userId, guildId },
       "Successfully learned and updated user profile",
diff --git a/services/discord-gateway/src/shared/database/drizzle.ts b/services/discord-gateway/src/shared/database/drizzle.ts
index e1ee1dd..cf15400 100644
--- a/services/discord-gateway/src/shared/database/drizzle.ts
+++ b/services/discord-gateway/src/shared/database/drizzle.ts
@@ -12,19 +12,25 @@ let rawPool: Pool | null = null;
 
 /**
  * Initialize the PostgreSQL database connection.
+ * When called from a Piscina worker thread, pool min/max are reduced to
+ * avoid exhausting PG connections across many worker processes.
  */
 export async function initializeDatabase() {
   if (db !== null) {
     return db;
   }
 
+  const isWorker = typeof process.env.PISCINA_WORKER !== "undefined";
+  const poolMin = isWorker ? 1 : config.POSTGRES_POOL_MIN;
+  const poolMax = isWorker ? 2 : config.POSTGRES_POOL_MAX;
+
   let pool: Pool;
 
   if (config.DATABASE_URL) {
     pool = new Pool({
       connectionString: config.DATABASE_URL,
-      min: config.POSTGRES_POOL_MIN,
-      max: config.POSTGRES_POOL_MAX,
+      min: poolMin,
+      max: poolMax,
     });
   } else {
     pool = new Pool({
@@ -33,8 +39,8 @@ export async function initializeDatabase() {
       user: config.POSTGRES_USER,
       password: config.POSTGRES_PASSWORD,
       database: config.POSTGRES_DB,
-      min: config.POSTGRES_POOL_MIN,
-      max: config.POSTGRES_POOL_MAX,
+      min: poolMin,
+      max: poolMax,
     });
   }
 
diff --git a/services/frontend/.astro/content.d.ts b/services/frontend/.astro/content.d.ts
new file mode 100644
index 0000000..a55c1f1
--- /dev/null
+++ b/services/frontend/.astro/content.d.ts
@@ -0,0 +1,155 @@
+declare module 'astro:content' {
+	export interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof DataEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<DataEntryMap[C]>;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+
+	export type ReferenceDataEntry<
+		C extends CollectionKey,
+		E extends keyof DataEntryMap[C] = string,
+	> = {
+		collection: C;
+		id: E;
+	};
+
+	export type ReferenceLiveEntry<C extends keyof LiveContentConfig['collections']> = {
+		collection: C;
+		id: string;
+	};
+
+	export function getCollection<C extends keyof DataEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof DataEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getLiveCollection<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter?: LiveLoaderCollectionFilterType<C>,
+	): Promise<
+		import('astro').LiveDataCollectionResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>
+	>;
+
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		entry: ReferenceDataEntry<C, E>,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? string extends keyof DataEntryMap[C]
+			? Promise<DataEntryMap[C][E]> | undefined
+			: Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getLiveEntry<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter: string | LiveLoaderEntryFilterType<C>,
+	): Promise<import('astro').LiveDataEntryResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof DataEntryMap>(
+		entry: DataEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function reference<
+		C extends
+			| keyof DataEntryMap
+			// Allow generic `string` to avoid excessive type errors in the config
+			// if `dev` is not running to update as you edit.
+			// Invalid collection names will be caught at build time.
+			| (string & {}),
+	>(
+		collection: C,
+	): import('astro/zod').ZodPipe<
+		import('astro/zod').ZodString,
+		import('astro/zod').ZodTransform<
+			C extends keyof DataEntryMap
+				? {
+						collection: C;
+						id: string;
+					}
+				: never,
+			string
+		>
+	>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof DataEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+	type ExtractLoaderConfig<T> = T extends { loader: infer L } ? L : never;
+	type InferLoaderSchema<
+		C extends keyof DataEntryMap,
+		L = ExtractLoaderConfig<ContentConfig['collections'][C]>,
+	> = L extends { schema: import('astro/zod').ZodSchema }
+		? import('astro/zod').infer<L['schema']>
+		: any;
+
+	type DataEntryMap = {
+		
+	};
+
+	type ExtractLoaderTypes<T> = T extends import('astro/loaders').LiveLoader<
+		infer TData,
+		infer TEntryFilter,
+		infer TCollectionFilter,
+		infer TError
+	>
+		? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError }
+		: { data: never; entryFilter: never; collectionFilter: never; error: never };
+	type ExtractEntryFilterType<T> = ExtractLoaderTypes<T>['entryFilter'];
+	type ExtractCollectionFilterType<T> = ExtractLoaderTypes<T>['collectionFilter'];
+	type ExtractErrorType<T> = ExtractLoaderTypes<T>['error'];
+	type ExtractDataType<T> = ExtractLoaderTypes<T>['data'];
+
+	type LiveLoaderDataType<C extends keyof LiveContentConfig['collections']> =
+		LiveContentConfig['collections'][C]['schema'] extends undefined
+			? ExtractDataType<LiveContentConfig['collections'][C]['loader']>
+			: import('astro/zod').infer<
+					Exclude<LiveContentConfig['collections'][C]['schema'], undefined>
+				>;
+	type LiveLoaderEntryFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractEntryFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderCollectionFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractCollectionFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderErrorType<C extends keyof LiveContentConfig['collections']> = ExtractErrorType<
+		LiveContentConfig['collections'][C]['loader']
+	>;
+
+	export type ContentConfig = never;
+	export type LiveContentConfig = never;
+}
diff --git a/services/frontend/.astro/dev.json b/services/frontend/.astro/dev.json
new file mode 100644
index 0000000..35cb21f
--- /dev/null
+++ b/services/frontend/.astro/dev.json
@@ -0,0 +1,18 @@
+{
+	"pid": 866059,
+	"port": 3000,
+	"url": "http://localhost:3000",
+	"urls": {
+		"local": [
+			"http://localhost:3000/"
+		],
+		"network": [
+			"http://192.168.1.65:3000/",
+			"http://100.114.19.66:3000/",
+			"http://172.27.0.1:3000/",
+			"http://172.26.0.1:3000/"
+		]
+	},
+	"background": false,
+	"startedAt": "2026-07-01T15:35:45.072Z"
+}
\ No newline at end of file
diff --git a/services/frontend/.astro/settings.json b/services/frontend/.astro/settings.json
new file mode 100644
index 0000000..0100de8
--- /dev/null
+++ b/services/frontend/.astro/settings.json
@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1782920146192
+	}
+}
\ No newline at end of file
diff --git a/services/frontend/.astro/types.d.ts b/services/frontend/.astro/types.d.ts
new file mode 100644
index 0000000..f964fe0
--- /dev/null
+++ b/services/frontend/.astro/types.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
diff --git a/services/frontend/astro.config.mjs b/services/frontend/astro.config.mjs
new file mode 100644
index 0000000..3bae84b
--- /dev/null
+++ b/services/frontend/astro.config.mjs
@@ -0,0 +1,45 @@
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+
+// ─────────────────────────────────────────────────────────────
+// BETE – Astro Configuration
+// Tailwind v4 ditangani via PostCSS (postcss.config.js)
+// ─────────────────────────────────────────────────────────────
+export default defineConfig({
+  integrations: [react()],
+
+  output: "static",
+
+  // Dev server
+  server: {
+    host: "0.0.0.0",
+    port: 3000,
+  },
+
+  // Preview
+  preview: {
+    host: true,
+    port: 3000,
+    allowedHosts: [
+      "imphnen.asepharyana.my.id",
+      "imphnen.asepharyana.tech",
+      "imphnen.asepharyana.web.id",
+    ],
+  },
+
+  // Vite config
+  vite: {
+    server: {
+      allowedHosts: [
+        "imphnen.asepharyana.my.id",
+        "imphnen.asepharyana.tech",
+        "imphnen.asepharyana.web.id",
+      ],
+      watch: {
+        // Penting: Astro punya public/ dir sendiri, jangan bentrok
+        ignored: ["!**/node_modules/**"],
+      },
+    },
+    // PostCSS otomatis terdeteksi dari root project
+  },
+});
diff --git a/services/frontend/index.html b/services/frontend/index.html
deleted file mode 100644
index 3921464..0000000
--- a/services/frontend/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="id">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#23a1eb" />
-    <title>IMPHNEN — Discord Moderation</title>
-    <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
diff --git a/services/frontend/package.json b/services/frontend/package.json
index ac6e87f..934f9da 100644
--- a/services/frontend/package.json
+++ b/services/frontend/package.json
@@ -4,18 +4,20 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --host 0.0.0.0",
-    "build": "tsc --noEmit && NODE_NO_WARNINGS=1 vite build",
-    "preview": "vite preview --host 0.0.0.0 --port 3000",
+    "dev": "astro dev --host 0.0.0.0",
+    "build": "astro build",
+    "preview": "astro preview --host 0.0.0.0 --port 3000",
     "typecheck": "tsc --noEmit",
     "lint": "biome check --diagnostic-level=error src/",
     "format": "biome format --write src/"
   },
   "dependencies": {
+    "@astrojs/react": "^6.0.0",
     "@bete/shared": "workspace:*",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
+    "astro": "^7.0.4",
     "clsx": "^2.1.1",
     "framer-motion": "^12.4.0",
     "lucide-react": "^1.16.0",
@@ -28,11 +30,9 @@
     "@tailwindcss/postcss": "^4.3.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
     "autoprefixer": "^10.5.0",
     "postcss": "^8.5.14",
     "tailwindcss": "^4.3.0",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.13"
+    "typescript": "^5.9.3"
   }
 }
diff --git a/services/frontend/src/App.client.tsx b/services/frontend/src/App.client.tsx
new file mode 100644
index 0000000..2ec3bd5
--- /dev/null
+++ b/services/frontend/src/App.client.tsx
@@ -0,0 +1,18 @@
+// ─── App.client.tsx — Astro React island entry point ────────────────────────
+// DILOAD OLEH Astro client:only="react"
+// Menyediakan <div id="root"> dan mount App dengan provider yang diperlukan
+// ─────────────────────────────────────────────────────────────────────────────
+
+import React from "react";
+import App from "./App";
+import { ToastProvider } from "./shared/ui";
+
+export default function AppClient() {
+  return (
+    <React.StrictMode>
+      <ToastProvider>
+        <App />
+      </ToastProvider>
+    </React.StrictMode>
+  );
+}
diff --git a/services/frontend/src/App.tsx b/services/frontend/src/App.tsx
index 4f70ec8..ad3b3b9 100644
--- a/services/frontend/src/App.tsx
+++ b/services/frontend/src/App.tsx
@@ -1,5 +1,14 @@
-import { useEffect, useMemo, useState } from "react";
+// ─── App.tsx — The God Component ──────────────────────────────────────────────
+// TODO: Decompose into smaller focused components (M20).
+// This component currently handles auth, socket lifecycle, speaker tracking,
+// voice control, media, PTT, command palette, and tab navigation.
+// Each concern should be extracted into its own hook or sub-component.
+// ───────────────────────────────────────────────────────────────────────────────
+
+import { AnimatePresence } from "framer-motion";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ActiveSpeaker } from "./entities/voice/types.js";
+import { AuthOverlay } from "./features/auth";
 import { DashboardPanel } from "./features/dashboard";
 import { LivePanel } from "./features/live";
 import { useMediaControl } from "./features/live/hooks/useMediaControl";
@@ -10,26 +19,118 @@ import {
   mergeMessages,
   useMessages,
 } from "./features/messages/hooks/useMessages";
-import { getAppConfig } from "./shared/api/client";
+import { SettingsPanel } from "./features/settings";
+import { useNotificationBadge } from "./hooks/useNotificationBadge";
+import { useTheme } from "./hooks/useTheme";
+import {
+  getAppConfig,
+  getSessionToken,
+  getAdminPassword,
+  clearSessionToken,
+  clearAdminPassword,
+} from "./shared/api/client";
 import { useAudioPlayback } from "./shared/hooks/useAudioPlayback";
 import { useAudioTransmit } from "./shared/hooks/useAudioTransmit";
 import { useUIState } from "./shared/hooks/useUIState";
+import { CommandPalette } from "./shared/ui/CommandPalette";
+import { ErrorBoundary } from "./shared/ui/error-boundary";
 import { MobileTabBar } from "./shared/ui/MobileTabBar";
+import type { DashboardTab } from "./entities/ui/types.js";
 import { useDashboardSocket } from "./shared/ws/socket";
 import { DashboardLayout } from "./widgets/DashboardLayout";
 
+type AuthState = "loading" | "authenticated" | "unauthenticated";
+
 export default function App() {
   const { uiState, patchUIState } = useUIState();
+  const { theme, mode, isDark, toggle: toggleTheme, setMode } = useTheme();
   const voice = useVoiceControl();
   const media = useMediaControl();
   const messages = useMessages();
   const [activeSpeakers, setActiveSpeakers] = useState<
-    (ActiveSpeaker & { heardAt?: number })[]
-  >([]);
+    (ActiveSpeaker & { heardAt?: number })[]>([]);
   const [monitorGuildId, setMonitorGuildId] = useState("");
 
+  // ── Command palette state ────────────────────────────────────────────────
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [paletteMode, setPaletteMode] = useState<"search" | "shortcuts" | null>(null);
+
+  // ── Auth state ─────────────────────────────────────────────────────────────
+  const [authState, setAuthState] = useState<AuthState>("loading");
+  const [dashboardIsPublic, setDashboardIsPublic] = useState(false);
+  const [configError, setConfigError] = useState<string | null>(null);
+  const configRetryRef = useRef(0);
+  const configTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const MAX_CONFIG_RETRIES = 3;
+
+  // ── Notification badge ─────────────────────────────────────────────────────
+  const activeTab: DashboardTab = (uiState.activeTab as DashboardTab) || "messages";
+  const notifBadge = useNotificationBadge(activeTab);
+
+  // On mount: check config for public/private mode, and check stored session token
+  useEffect(() => {
+    // Clear legacy admin-password from localStorage — only use token auth now
+    clearAdminPassword();
+
+    // Validate existing token by calling config endpoint
+    // If server returns 401, clear the invalid token
+    const attempt = () => {
+      getAppConfig()
+        .then((cfg) => {
+          configRetryRef.current = 0;
+          setConfigError(null);
+          setMonitorGuildId(cfg.monitorGuildId ?? "");
+          setDashboardIsPublic(cfg.dashboardIsPublic);
+
+          // Check if we have a session token (new auth) or legacy password (backward compat)
+          const sessionToken = getSessionToken();
+          const storedPassword = getAdminPassword();
+          if (sessionToken || cfg.dashboardIsPublic || storedPassword) {
+            setAuthState("authenticated");
+          } else {
+            setAuthState("unauthenticated");
+          }
+        })
+        .catch((err) => {
+          // If server responds with 401, token is invalid — clear it
+          if (err?.statusCode === 401 || err?.status === 401) {
+            clearSessionToken();
+            setAuthState("unauthenticated");
+            return;
+          }
+          configRetryRef.current += 1;
+          const isNetwork =
+            err instanceof TypeError &&
+            (err.message === "Failed to fetch" ||
+              err.message.includes("NetworkError") ||
+              err.message.includes("network"));
+
+          if (isNetwork && configRetryRef.current < MAX_CONFIG_RETRIES) {
+            // Retry with backoff: 1s, 2s, 3s
+            const delay = configRetryRef.current * 1000;
+            configTimeoutRef.current = setTimeout(attempt, delay);
+          } else {
+            // Final failure — show auth overlay with retry button
+            setConfigError(
+              isNetwork
+                ? "Cannot reach server. Check your connection and try again."
+                : "Failed to load configuration.",
+            );
+            setAuthState("unauthenticated");
+          }
+        });
+    };
+    attempt();
+
+    return () => {
+      if (configTimeoutRef.current) {
+        clearTimeout(configTimeoutRef.current);
+        configTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
   const audio = useAudioPlayback();
-  const activeTab = uiState.activeTab || "messages";
   const selectedVoiceGuild =
     uiState.selectedVoiceGuild || uiState.selectedGuild || "";
 
@@ -77,7 +178,7 @@ export default function App() {
       ),
     onVoiceActiveUser: (data) => {
       if (data.userId) audio.registerUserId(data.userId);
-      setActiveSpeakers((prev) =>
+      setActiveSpeakers((prev: (ActiveSpeaker & { heardAt?: number })[]) =>
         updateSpeakerList(prev, {
           userId: data.userId,
           username: data.username,
@@ -86,12 +187,25 @@ export default function App() {
         }),
       );
     },
-    onVoiceRecordingStarted: () =>
-      window.dispatchEvent(new CustomEvent("voice_recording_uploaded")),
-    onVoiceRecordingStopped: () =>
-      window.dispatchEvent(new CustomEvent("voice_recording_uploaded")),
+    onVoiceRecordingStarted: (data) =>
+      window.dispatchEvent(
+        new CustomEvent("voice_recording_started", { detail: data }),
+      ),
+    onVoiceRecordingStopped: (data) =>
+      window.dispatchEvent(
+        new CustomEvent("voice_recording_stopped", { detail: data }),
+      ),
+    onVoiceAnalyzed: (data) =>
+      window.dispatchEvent(
+        new CustomEvent("voice_analyzed", { detail: data }),
+      ),
     onMessageCreated: (m) =>
-      messages.setMessages((prev) => mergeMessages(prev, [m])),
+      messages.setMessages((prev) => {
+        // Skip if message already exists with same status (dedup)
+        const existing = prev.find((i) => i.id === m.id);
+        if (existing && existing.ai_status === m.ai_status) return prev;
+        return mergeMessages(prev, [m]);
+      }),
     onMessageUpdated: (m) =>
       messages.setMessages((prev) =>
         prev.map((i) => (i.id === m.id ? { ...i, ...m } : i)),
@@ -103,7 +217,12 @@ export default function App() {
         ),
       ),
     onMessageAnalyzed: (msg) => {
-      messages.setMessages((prev) => mergeMessages(prev, [msg]));
+      messages.setMessages((prev) => {
+        // Skip if message already analyzed with same status (dedup)
+        const existing = prev.find((i) => i.id === msg.id);
+        if (existing && existing.ai_status === msg.ai_status) return prev;
+        return mergeMessages(prev, [msg]);
+      });
       const status = msg.ai_status;
       if (status === "flagged") {
         const username = msg.username || msg.user_id || "unknown";
@@ -134,17 +253,6 @@ export default function App() {
 
   const transmit = useAudioTransmit(socket.socketRef);
 
-  // Load app config on mount
-  useEffect(() => {
-    getAppConfig()
-      .then((c) => {
-        if (c.monitorGuildId) {
-          setMonitorGuildId(c.monitorGuildId);
-        }
-      })
-      .catch(() => undefined);
-  }, []);
-
   // Load voice channels when guild changes (Live tab)
   useEffect(() => {
     if (selectedVoiceGuild)
@@ -158,18 +266,24 @@ export default function App() {
   }, [monitorGuildId, messages.fetchMessages]);
 
   // Periodic refetch — keeps dashboard in sync even if WS events missed
+  const monitorGuildRef = useRef(monitorGuildId);
+  monitorGuildRef.current = monitorGuildId;
+
   useEffect(() => {
-    if (!monitorGuildId) return;
+    const currentGuild = monitorGuildRef.current;
+    if (!currentGuild) return;
     const interval = setInterval(() => {
-      messages.fetchMessages(monitorGuildId).catch(() => undefined);
+      messages.fetchMessages(monitorGuildRef.current).catch(() => undefined);
     }, 15_000);
-    return () => clearInterval(interval);
-  }, [monitorGuildId, messages.fetchMessages]);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [monitorGuildId]);
 
   // Stale speaker pruning — remove speakers not heard from in 30s
   useEffect(() => {
     const interval = setInterval(() => {
-      setActiveSpeakers((prev) => {
+      setActiveSpeakers((prev: (ActiveSpeaker & { heardAt?: number })[]) => {
         const now = Date.now();
         const pruned = prev.filter(
           (s) => s.speaking || (s.heardAt && now - s.heardAt < 30_000),
@@ -207,70 +321,192 @@ export default function App() {
     };
   }, [transmit]);
 
+  // ── Command palette keyboard shortcut handler ──────────────────────────────
+  const handlePaletteOpen = useCallback((mode: "search" | "shortcuts") => {
+    setPaletteMode(mode);
+    setPaletteOpen(true);
+  }, []);
+
+  const handlePaletteClose = useCallback(() => {
+    setPaletteOpen(false);
+    setPaletteMode(null);
+  }, []);
+
+  const handlePaletteNavigate = useCallback(
+    (tab: string) => {
+      patchUIState({ activeTab: tab as DashboardTab });
+      handlePaletteClose();
+    },
+    [patchUIState, handlePaletteClose],
+  );
+
+  // ── Tab navigation handler ─────────────────────────────────────────────────
+  const handleTabChange = useCallback(
+    (tab: DashboardTab) => {
+      patchUIState({ activeTab: tab });
+    },
+    [patchUIState],
+  );
+
+  // ── Render main content based on active tab ────────────────────────────────
+  const renderContent = () => {
+    switch (activeTab) {
+      case "live":
+        return (
+          <ErrorBoundary message="Live panel crashed">
+            <LivePanel
+              guilds={voice.guilds}
+              voiceChannels={voice.voiceChannels}
+              selectedGuild={selectedVoiceGuild}
+              selectedChannel={uiState.selectedVoiceChannel || ""}
+              micLevel={0}
+              status={voice.voiceStatus}
+              voiceLoading={voice.loading}
+              activeSpeakers={activeSpeakers}
+              levels={audio.levels}
+              isListening={audio.isListening}
+              isStreaming={transmit.isStreaming}
+              mediaState={media.mediaState}
+              mediaLoading={media.loading}
+              onGuildChange={(id) =>
+                patchUIState({ selectedVoiceGuild: id, selectedVoiceChannel: "" })
+              }
+              onChannelChange={(id) => patchUIState({ selectedVoiceChannel: id })}
+              onJoin={() =>
+                voice.joinVoice(
+                  selectedVoiceGuild,
+                  uiState.selectedVoiceChannel || "",
+                )
+              }
+              onDisconnect={() => voice.leaveVoice()}
+              onListenToggle={audio.toggleListening}
+              onStreamingToggle={transmit.toggle}
+              onQueueMusic={(s) => media.enqueue(s, "music")}
+              onStartScreen={(s) => media.enqueue(s, "screen")}
+              onSkip={media.skip}
+              onStop={media.stop}
+              onVolumeChange={media.setVolume}
+            />
+          </ErrorBoundary>
+        );
+      case "dashboard":
+        return (
+          <ErrorBoundary message="Dashboard panel crashed">
+            <DashboardPanel />
+          </ErrorBoundary>
+        );
+      case "settings":
+        return (
+          <ErrorBoundary message="Settings panel crashed">
+            <SettingsPanel
+              themeMode={mode}
+              isDark={isDark}
+              onThemeModeChange={setMode}
+            />
+          </ErrorBoundary>
+        );
+      default:
+        return (
+          <ErrorBoundary message="Messages panel crashed">
+            <MessagesPanel
+              guildName={monitorGuildName}
+              messages={messages.messages}
+              onReanalyze={messages.reanalyze}
+              onReanalyzeAllErrors={messages.reanalyzeAllErrors}
+              onLoadMore={messages.loadMore}
+              hasMore={messages.hasMore}
+              loadingMore={messages.loadingMore}
+            />
+          </ErrorBoundary>
+        );
+    }
+  };
+
+  // ── Render: Auth loading ─────────────────────────────────────────────────
+  if (authState === "loading") {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
+        <div className="flex flex-col items-center gap-4">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+          <p className="text-sm text-muted-foreground">
+            {configError
+              ? "Connection lost — retrying..."
+              : `Connecting to server${".".repeat(configRetryRef.current)}`}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // ── Render: Auth overlay ─────────────────────────────────────────────────
+  if (authState === "unauthenticated") {
+    return (
+      <AuthOverlay
+        isPublic={dashboardIsPublic}
+        onAuthenticated={() => setAuthState("authenticated")}
+        configError={configError}
+        onRetryConfig={() => {
+          setConfigError(null);
+          setAuthState("loading");
+          configRetryRef.current = 0;
+          // Re-trigger the config fetch by forcing remount via key trick
+          // Actually: just re-run attempt logic
+          getAppConfig()
+            .then((cfg) => {
+              setMonitorGuildId(cfg.monitorGuildId ?? "");
+              setDashboardIsPublic(cfg.dashboardIsPublic);
+              const sessionToken = getSessionToken();
+              const storedPassword = getAdminPassword();
+              if (sessionToken || cfg.dashboardIsPublic || storedPassword) {
+                setAuthState("authenticated");
+              } else {
+                setAuthState("unauthenticated");
+              }
+            })
+            .catch(() => {
+              setConfigError("Server still unreachable. Try again later.");
+              setAuthState("unauthenticated");
+            });
+        }}
+      />
+    );
+  }
+
+  // ── Render: Main app (authenticated) ─────────────────────────────────────
   return (
-    <DashboardLayout
-      activeTab={activeTab}
-      wsStatus={socket.status}
-      voiceStatus={voice.voiceStatus}
-      onTabChange={(tab) => patchUIState({ activeTab: tab })}
-      recentMessages={messages.messages}
-      guildId={monitorGuildId}
-      channelId={
-        uiState.selectedTextChannel || uiState.selectedVoiceChannel || undefined
-      }
-    >
-      {activeTab === "live" ? (
-        <LivePanel
-          guilds={voice.guilds}
-          voiceChannels={voice.voiceChannels}
-          selectedGuild={selectedVoiceGuild}
-          selectedChannel={uiState.selectedVoiceChannel || ""}
-          micLevel={0}
-          status={voice.voiceStatus}
-          voiceLoading={voice.loading}
-          activeSpeakers={activeSpeakers}
-          levels={audio.levels}
-          isListening={audio.isListening}
-          isStreaming={transmit.isStreaming}
-          mediaState={media.mediaState}
-          mediaLoading={media.loading}
-          onGuildChange={(id) =>
-            patchUIState({ selectedVoiceGuild: id, selectedVoiceChannel: "" })
-          }
-          onChannelChange={(id) => patchUIState({ selectedVoiceChannel: id })}
-          onJoin={() =>
-            voice.joinVoice(
-              selectedVoiceGuild,
-              uiState.selectedVoiceChannel || "",
-            )
-          }
-          onDisconnect={() => voice.leaveVoice()}
-          onListenToggle={audio.toggleListening}
-          onStreamingToggle={transmit.toggle}
-          onQueueMusic={(s) => media.enqueue(s, "music")}
-          onStartScreen={(s) => media.enqueue(s, "screen")}
-          onSkip={media.skip}
-          onStop={media.stop}
-          onVolumeChange={media.setVolume}
-        />
-      ) : activeTab === "dashboard" ? (
-        <DashboardPanel />
-      ) : (
-        <MessagesPanel
-          guildName={monitorGuildName}
-          messages={messages.messages}
-          onReanalyze={messages.reanalyze}
-          onReanalyzeAllErrors={messages.reanalyzeAllErrors}
-          onLoadMore={messages.loadMore}
-          hasMore={messages.hasMore}
-          loadingMore={messages.loadingMore}
-        />
-      )}
+    <>
+      <DashboardLayout
+        activeTab={activeTab}
+        wsStatus={socket.status}
+        voiceStatus={voice.voiceStatus}
+        themeMode={mode}
+        isDark={isDark}
+        onTabChange={handleTabChange}
+        onThemeToggle={toggleTheme}
+        recentMessages={messages.messages}
+        guildId={monitorGuildId}
+        channelId={
+          uiState.selectedTextChannel || uiState.selectedVoiceChannel || undefined
+        }
+        notificationCount={notifBadge.count}
+      >
+        <AnimatePresence mode="wait">
+          {renderContent()}
+        </AnimatePresence>
+      </DashboardLayout>
       <MobileTabBar
         activeTab={activeTab}
-        onTabChange={(tab) => patchUIState({ activeTab: tab })}
+        onTabChange={handleTabChange}
       />
       <ModerationAlertListener />
-    </DashboardLayout>
+      <CommandPalette
+        isOpen={paletteOpen}
+        mode={paletteMode}
+        onClose={handlePaletteClose}
+        onNavigate={handlePaletteNavigate}
+        onToggleTheme={toggleTheme}
+        isDark={isDark}
+      />
+    </>
   );
 }
diff --git a/services/frontend/src/entities/ui/types.ts b/services/frontend/src/entities/ui/types.ts
index 8427530..b237e1b 100644
--- a/services/frontend/src/entities/ui/types.ts
+++ b/services/frontend/src/entities/ui/types.ts
@@ -6,13 +6,20 @@ export interface UIState {
   selectedTextChannel?: string;
   selectedAnalyticsGuild?: string;
   selectedAnalyticsChannel?: string;
-  activeTab?: "live" | "messages" | "dashboard";
+  activeTab?: DashboardTab;
   isListening?: boolean;
   isStreaming?: boolean;
 }
 
-export type DashboardTab = "live" | "messages" | "dashboard";
+export type DashboardTab = "live" | "messages" | "dashboard" | "settings";
 
 export interface AppConfig {
   monitorGuildId: string | null;
+  dashboardIsPublic: boolean;
+}
+
+/** Response from GET /api/admin/settings */
+export interface AdminSettings {
+  dashboardIsPublic: boolean;
+  envDashboardIsPublic: boolean;
 }
diff --git a/services/frontend/src/features/admin/AdminPanel.tsx b/services/frontend/src/features/admin/AdminPanel.tsx
new file mode 100644
index 0000000..fb3aa04
--- /dev/null
+++ b/services/frontend/src/features/admin/AdminPanel.tsx
@@ -0,0 +1,295 @@
+import { motion } from "framer-motion";
+import {
+  Eye,
+  EyeOff,
+  Globe,
+  Lock,
+  RefreshCw,
+  Save,
+  Settings,
+  Shield,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import type { AdminSettings } from "../../shared/api/client";
+import {
+  getAdminSettings,
+  updateAdminSettings,
+  clearSessionToken,
+  logout,
+} from "../../shared/api/client";
+import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../shared/ui";
+
+export function AdminPanel() {
+  const [settings, setSettings] = useState<AdminSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const handleLogout = async () => {
+    // Call server-side logout to increment token version
+    try {
+      await logout();
+    } catch {
+      // Even if server call fails, still clear local state for security
+    }
+    // Clear local token and legacy password
+    clearSessionToken();
+    localStorage.removeItem("admin-password");
+    window.location.reload();
+  };
+
+  const fetchSettings = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await getAdminSettings();
+      setSettings(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load settings");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchSettings();
+  }, []);
+
+  const handleTogglePublic = async () => {
+    if (!settings) return;
+    const newValue = !settings.dashboardIsPublic;
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const updated = await updateAdminSettings({
+        dashboardIsPublic: newValue,
+      });
+      setSettings(updated);
+      setSuccess(
+        newValue
+          ? "Dashboard is now public — accessible without password."
+          : "Dashboard is now private — admin password required.",
+      );
+      setTimeout(() => setSuccess(null), 4000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update settings");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-primary">Admin Settings</CardTitle>
+          <CardDescription>Loading settings...</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-center py-8">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error && !settings) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-primary">Admin Settings</CardTitle>
+          <CardDescription className="text-destructive">{error}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button onClick={fetchSettings} variant="outline" size="sm">
+            <RefreshCw className="mr-2 h-4 w-4" /> Retry
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const isPublic = settings?.dashboardIsPublic ?? false;
+
+  return (
+    <motion.div variants={cardStagger} initial="initial" animate="animate">
+      <motion.div variants={cardItem}>
+        <Card className="border-primary/20">
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="flex items-center gap-2 text-primary">
+                  <Settings className="h-5 w-5" />
+                  Admin Settings
+                </CardTitle>
+                <CardDescription>
+                  Manage dashboard visibility and runtime configuration.
+                </CardDescription>
+              </div>
+              <Button
+                onClick={fetchSettings}
+                variant="ghost"
+                size="sm"
+                disabled={loading}
+              >
+                <RefreshCw
+                  className={`h-4 w-4 ${loading ? "animate-spin" : ""}`}
+                />
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* ── Success / Error messages ── */}
+            {success && (
+              <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-600 dark:text-emerald-400">
+                {success}
+              </div>
+            )}
+            {error && (
+              <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+                {error}
+              </div>
+            )}
+
+            {/* ── Dashboard Visibility ── */}
+            <div className="rounded-xl border border-border bg-card p-5">
+              <div className="flex items-start justify-between gap-4">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    {isPublic ? (
+                      <Globe className="h-4 w-4 text-emerald-500" />
+                    ) : (
+                      <Lock className="h-4 w-4 text-amber-500" />
+                    )}
+                    <h3 className="font-semibold">
+                      Dashboard Visibility:{" "}
+                      <span
+                        className={
+                          isPublic ? "text-emerald-500" : "text-amber-500"
+                        }
+                      >
+                        {isPublic ? "Public" : "Private"}
+                      </span>
+                    </h3>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {isPublic
+                      ? "Anyone can view the dashboard without a password. Admin password is still required for management actions."
+                      : "Admin password is required to access any part of the dashboard."}
+                  </p>
+                </div>
+                <Button
+                  onClick={handleTogglePublic}
+                  disabled={saving}
+                  variant={isPublic ? "outline" : "default"}
+                  size="sm"
+                  className="shrink-0"
+                >
+                  {saving ? (
+                    <>
+                      <div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                      Saving...
+                    </>
+                  ) : isPublic ? (
+                    <>
+                      <Lock className="mr-2 h-4 w-4" />
+                      Make Private
+                    </>
+                  ) : (
+                    <>
+                      <Eye className="mr-2 h-4 w-4" />
+                      Make Public
+                    </>
+                  )}
+                </Button>
+              </div>
+
+              {/* ── Status indicators ── */}
+              <div className="mt-4 grid grid-cols-2 gap-3">
+                <div className="rounded-lg bg-muted/50 px-3 py-2">
+                  <p className="text-xs text-muted-foreground">Runtime</p>
+                  <div className="flex items-center gap-1.5 mt-0.5">
+                    <span
+                      className={`inline-block h-2 w-2 rounded-full ${
+                        isPublic ? "bg-emerald-400" : "bg-amber-400"
+                      }`}
+                    />
+                    <span className="text-sm font-medium">
+                      {isPublic ? "Public" : "Private"}
+                    </span>
+                  </div>
+                </div>
+                <div className="rounded-lg bg-muted/50 px-3 py-2">
+                  <p className="text-xs text-muted-foreground">
+                    Env Default
+                  </p>
+                  <div className="flex items-center gap-1.5 mt-0.5">
+                    <span
+                      className={`inline-block h-2 w-2 rounded-full ${
+                        settings?.envDashboardIsPublic
+                          ? "bg-emerald-400"
+                          : "bg-amber-400"
+                      }`}
+                    />
+                    <span className="text-sm font-medium">
+                      {settings?.envDashboardIsPublic ? "Public" : "Private"}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* ── Logout ── */}
+            <div className="flex justify-end">
+              <Button
+                onClick={handleLogout}
+                variant="outline"
+                size="sm"
+                className="text-muted-foreground"
+              >
+                <Lock className="mr-2 h-4 w-4" />
+                Logout
+              </Button>
+            </div>
+
+            {/* ── Info card ── */}
+            <div className="rounded-xl border border-border/50 bg-muted/30 p-4">
+              <div className="flex items-start gap-3">
+                <Shield className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                <div className="space-y-1 text-xs text-muted-foreground">
+                  <p>
+                    <strong>Admin password</strong> is configured via the
+                    <code className="mx-1 rounded bg-muted px-1 py-0.5 font-mono text-[10px]">
+                      ADMIN_PASSWORD
+                    </code>
+                    environment variable. For security, it cannot be changed
+                    through this panel — update it in your deployment
+                    configuration and restart the service.
+                  </p>
+                  <p className="mt-2">
+                    Runtime settings are persisted across restarts in the
+                    <code className="mx-1 rounded bg-muted px-1 py-0.5 font-mono text-[10px]">
+                      data/settings.json
+                    </code>
+                    file. Changes take effect immediately, no restart needed.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/services/frontend/src/features/auth/index.tsx b/services/frontend/src/features/auth/index.tsx
index aa04697..7f5faba 100644
--- a/services/frontend/src/features/auth/index.tsx
+++ b/services/frontend/src/features/auth/index.tsx
@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
-import { Lock } from "lucide-react";
-import { useState } from "react";
-import { login } from "../../shared/api/client.js";
+import { Lock, Unlock, Shield, WifiOff, RefreshCw } from "lucide-react";
+import { useState, useCallback } from "react";
+import { login, setSessionToken } from "../../shared/api/client.js";
 import {
   Button,
   Card,
@@ -14,67 +14,148 @@ import {
 
 interface AuthOverlayProps {
   onAuthenticated: () => void;
+  isPublic: boolean;
+  configError?: string | null;
+  onRetryConfig?: () => void;
 }
 
-export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
+export function AuthOverlay({
+  onAuthenticated,
+  isPublic,
+  configError,
+  onRetryConfig,
+}: AuthOverlayProps) {
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [isNetworkError, setIsNetworkError] = useState(false);
 
   const handleSubmit = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
     setLoading(true);
     setError(null);
+    setIsNetworkError(false);
     try {
-      await login(password);
-      localStorage.setItem("admin-password", password);
+      const result = await login(password);
+      // Store session token (new auth method)
+      if (result.token) {
+        setSessionToken(result.token);
+      }
+      // Clean up legacy stored password from localStorage if it was there
+      // from a previous session (before JWT migration)
+      localStorage.removeItem("admin-password");
       onAuthenticated();
-    } catch {
-      setError("Invalid password");
+    } catch (err) {
+      const isNetwork =
+        err instanceof TypeError &&
+        (err.message === "Failed to fetch" ||
+          err.message.includes("NetworkError") ||
+          err.message.includes("network"));
+      setIsNetworkError(isNetwork);
+      setError(
+        isNetwork
+          ? "Cannot reach server — check your connection or try again."
+          : "Invalid password",
+      );
     } finally {
       setLoading(false);
     }
   };
 
+  // ── Retry config fetch (initial loading state) ──────────────────────────────
+  const [retryCount, setRetryCount] = useState(0);
+
+  const handleRetry = useCallback(() => {
+    setRetryCount((r) => r + 1);
+  }, []);
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.4, ease: "easeOut" }}
-      className="flex items-center justify-center p-4"
+      className="flex min-h-screen items-center justify-center p-4"
     >
       <Card className="w-full max-w-md border-primary/30 shadow-lg shadow-primary/10">
         <CardHeader className="text-center">
           <div className="mx-auto mb-4 flex items-center justify-center">
             <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
-              <Lock className="h-6 w-6" />
+              {isPublic ? (
+                <Shield className="h-6 w-6" />
+              ) : (
+                <Lock className="h-6 w-6" />
+              )}
             </div>
           </div>
-          <CardTitle>Admin Access Required</CardTitle>
+          <CardTitle>
+            {isPublic ? "Admin Authentication" : "Admin Access Required"}
+          </CardTitle>
           <CardDescription>
-            Enter the admin password to access Voice and Media controls.
+            {isPublic
+              ? "Enter the admin password to manage settings and perform administrative actions."
+              : "Enter the admin password to access the dashboard."}
           </CardDescription>
         </CardHeader>
         <CardContent>
+          {configError && (
+            <div className="mb-4 flex flex-col items-center gap-3 rounded-lg border border-amber-500/30 bg-amber-500/5 p-4 text-center">
+              <WifiOff className="h-6 w-6 text-amber-500" />
+              <p className="text-xs text-amber-600">{configError}</p>
+              {onRetryConfig && (
+                <Button
+                  onClick={onRetryConfig}
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 border-amber-500/30 text-amber-600 hover:bg-amber-500/10"
+                >
+                  <RefreshCw className="h-3.5 w-3.5" />
+                  Retry Connection
+                </Button>
+              )}
+            </div>
+          )}
           <form onSubmit={handleSubmit} className="space-y-4">
             <div className="space-y-2">
               <Input
                 type="password"
-                placeholder="Enter password"
+                placeholder="Enter admin password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 autoFocus
               />
-              {error && <p className="text-xs text-destructive">{error}</p>}
+              {error && (
+                <div
+                  className={`flex items-start gap-2 rounded-lg p-2 text-xs ${
+                    isNetworkError
+                      ? "bg-amber-500/10 text-amber-600"
+                      : "text-destructive"
+                  }`}
+                >
+                  {isNetworkError ? (
+                    <WifiOff className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                  ) : (
+                    <Lock className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                  )}
+                  <span>{error}</span>
+                </div>
+              )}
             </div>
             <Button
               type="submit"
               className="w-full"
               disabled={loading || !password}
             >
-              {loading ? "Authenticating..." : "Unlock Controls"}
+              {loading ? "Authenticating..." : "Unlock"}
             </Button>
           </form>
+
+          {isPublic && (
+            <p className="mt-4 text-xs text-center text-muted-foreground">
+              <Unlock className="inline h-3 w-3 mr-1" />
+              The dashboard is in public mode — most data is visible without
+              authentication. Admin password is only needed for management actions.
+            </p>
+          )}
         </CardContent>
       </Card>
     </motion.div>
diff --git a/services/frontend/src/features/dashboard/index.tsx b/services/frontend/src/features/dashboard/index.tsx
index f2086ef..9d4ecb8 100644
--- a/services/frontend/src/features/dashboard/index.tsx
+++ b/services/frontend/src/features/dashboard/index.tsx
@@ -1,4 +1,6 @@
+import { Settings } from "lucide-react";
 import { useState } from "react";
+import { AdminPanel } from "../../features/admin/AdminPanel";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../shared/ui";
 import { ChannelProfileDetail } from "./components/ChannelProfileDetail";
 import { ChannelSummaryList } from "./components/ChannelSummaryList";
@@ -87,6 +89,10 @@ export function DashboardPanel() {
         <TabsTrigger value="stats">Stats</TabsTrigger>
         <TabsTrigger value="users">Users</TabsTrigger>
         <TabsTrigger value="channels">Channels</TabsTrigger>
+        <TabsTrigger value="admin" className="flex items-center gap-1.5">
+          <Settings className="h-3.5 w-3.5" />
+          Admin
+        </TabsTrigger>
       </TabsList>
 
       <TabsContent value="stats">
@@ -120,6 +126,10 @@ export function DashboardPanel() {
           onSelectChannel={setSelectedChannelId}
         />
       </TabsContent>
+
+      <TabsContent value="admin">
+        <AdminPanel />
+      </TabsContent>
     </Tabs>
   );
 }
diff --git a/services/frontend/src/features/live/components/RecordingsSubPanel.tsx b/services/frontend/src/features/live/components/RecordingsSubPanel.tsx
index 717c943..43ecfad 100644
--- a/services/frontend/src/features/live/components/RecordingsSubPanel.tsx
+++ b/services/frontend/src/features/live/components/RecordingsSubPanel.tsx
@@ -121,7 +121,7 @@ export function RecordingsSubPanel() {
   return (
     <div className="space-y-3">
       {recordings.map((rec) => (
-        <div key={rec.id} className="rounded-xl border border-sky-200 bg-white">
+        <div key={rec.id} className="rounded-xl border border-border bg-card">
           <div className="flex items-center gap-4 p-4">
             <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
               <Mic className="h-5 w-5" />
diff --git a/services/frontend/src/features/messages/components/ImageGrid.tsx b/services/frontend/src/features/messages/components/ImageGrid.tsx
index 041dab1..c01b629 100644
--- a/services/frontend/src/features/messages/components/ImageGrid.tsx
+++ b/services/frontend/src/features/messages/components/ImageGrid.tsx
@@ -82,7 +82,7 @@ export function ImageGrid({ messages }: { messages: MessageRecord[] }) {
             href={image.url}
             target="_blank"
             rel="noreferrer"
-            className="group overflow-hidden rounded-xl border border-primary/20 bg-white shadow-sm transition-all hover:border-primary/40 hover:shadow-md"
+            className="group overflow-hidden rounded-xl border border-primary/20 bg-card shadow-sm transition-all hover:border-primary/40 hover:shadow-md"
           >
             <div className="relative aspect-video overflow-hidden">
               {image.kind === "sticker" ? (
diff --git a/services/frontend/src/features/messages/components/MessageCard.tsx b/services/frontend/src/features/messages/components/MessageCard.tsx
index bf98299..8fcf787 100644
--- a/services/frontend/src/features/messages/components/MessageCard.tsx
+++ b/services/frontend/src/features/messages/components/MessageCard.tsx
@@ -42,6 +42,10 @@ function renderContentWithCustomEmojis(content: string): React.ReactNode {
         loading="lazy"
         draggable={false}
         title={`:${name}:`}
+        onError={(e) => {
+          const target = e.currentTarget;
+          target.style.display = "none";
+        }}
       />,
     );
     lastIndex = regex.lastIndex;
@@ -80,13 +84,13 @@ function parseStringList(value?: string | null): string[] {
 function severityColor(severity: string) {
   switch (severity) {
     case "critical":
-      return "bg-red-100 text-red-700 border-red-200";
+      return "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800";
     case "high":
-      return "bg-orange-100 text-orange-700 border-orange-200";
+      return "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-800";
     case "medium":
-      return "bg-yellow-100 text-yellow-700 border-yellow-200";
+      return "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800";
     case "low":
-      return "bg-blue-100 text-blue-700 border-blue-200";
+      return "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800";
     default:
       return "bg-muted text-muted-foreground border-border";
   }
@@ -333,6 +337,10 @@ function MessageRow({
                   alt={sticker.name || "sticker"}
                   className="h-12 w-12 rounded-lg border border-border object-contain bg-muted/50"
                   loading="lazy"
+                  onError={(e) => {
+                    const target = e.currentTarget;
+                    target.style.display = "none";
+                  }}
                 />
               ) : (
                 <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-border bg-muted/50">
@@ -360,6 +368,10 @@ function MessageRow({
                 alt={img.name}
                 className="h-16 w-16 object-cover transition-transform hover:scale-105"
                 loading="lazy"
+                onError={(e) => {
+                  const target = e.currentTarget;
+                  target.style.display = "none";
+                }}
               />
             </a>
           ))}
@@ -380,7 +392,7 @@ function MessageRow({
               key={vid.url}
               src={vid.url}
               controls
-              className="h-28 w-48 shrink-0 rounded-lg border border-border object-cover bg-black"
+              className="h-28 w-48 shrink-0 rounded-lg border border-border object-cover bg-muted"
               preload="metadata"
             />
           ))}
@@ -409,8 +421,8 @@ function MessageRow({
         <div
           className={`rounded-lg border-l-[3px] px-3 py-2 ${
             aiStatus === "flagged"
-              ? "border-l-pink-400 bg-pink-50/40"
-              : "border-l-emerald-400 bg-emerald-50/40"
+              ? "border-l-pink-400 dark:border-l-pink-600 bg-pink-50/40 dark:bg-pink-950/30"
+              : "border-l-emerald-400 dark:border-l-emerald-600 bg-emerald-50/40 dark:bg-emerald-950/30"
           }`}
         >
           <div className="flex items-start gap-2 text-[11px]">
@@ -431,7 +443,7 @@ function MessageRow({
 
       {/* AI Error */}
       {message.ai_error ? (
-        <div className="rounded-lg bg-pink-50/40 px-3 py-2 text-[12px] text-pink-600">
+        <div className="rounded-lg bg-pink-50/40 dark:bg-pink-950/30 px-3 py-2 text-[12px] text-pink-600 dark:text-pink-400">
           AI error: {message.ai_error}
         </div>
       ) : null}
@@ -451,7 +463,7 @@ function MessageRow({
           {isReanalyzing ? "Reanalyzing..." : "Re-analyze"}
         </Button>
         {aiStatus === "error" && (
-          <span className="text-[11px] text-pink-600/70">
+          <span className="text-[11px] text-pink-600/70 dark:text-pink-400/70">
             Click to retry analysis
           </span>
         )}
@@ -483,7 +495,7 @@ export function MessageCard({ messages, onReanalyze }: MessageCardProps) {
   return (
     <article
       className={`group rounded-xl border bg-card shadow-sm transition-all hover:border-primary/30 hover:shadow-md ${
-        firstMsg.deleted_at ? "border-red-200 opacity-60" : "border-border"
+        firstMsg.deleted_at ? "border-red-200 dark:border-red-900/50 opacity-60" : "border-border"
       }`}
     >
       <div className="flex gap-3 p-4">
@@ -495,6 +507,10 @@ export function MessageCard({ messages, onReanalyze }: MessageCardProps) {
           }
           alt=""
           className="h-10 w-10 shrink-0 rounded-full object-cover ring-2 ring-primary/30"
+          onError={(e) => {
+            const target = e.currentTarget;
+            target.src = "https://cdn.discordapp.com/embed/avatars/0.png";
+          }}
         />
 
         <div className="min-w-0 flex-1">
diff --git a/services/frontend/src/features/settings/index.tsx b/services/frontend/src/features/settings/index.tsx
new file mode 100644
index 0000000..c5f5b66
--- /dev/null
+++ b/services/frontend/src/features/settings/index.tsx
@@ -0,0 +1,426 @@
+import { motion } from "framer-motion";
+import {
+  Bell,
+  BellOff,
+  Moon,
+  Palette,
+  Sun,
+  Monitor,
+  Settings,
+  Shield,
+  Globe,
+  Lock,
+  Volume2,
+  VolumeX,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { ThemeMode } from "../../hooks/useTheme";
+import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
+import { Card, CardContent, CardHeader, CardTitle, Button } from "../../shared/ui";
+import {
+  getAdminSettings,
+  updateAdminSettings,
+  clearSessionToken,
+} from "../../shared/api/client";
+import type { AdminSettings as AdminSettingsType } from "../../entities/ui/types";
+
+/* ─── Storage keys ─────────────────────────────────────────────────────── */
+
+const NOTIF_ENABLED_KEY = "bete-notif-enabled";
+const NOTIF_SOUND_KEY = "bete-notif-sound";
+
+/* ─── Types ────────────────────────────────────────────────────────────── */
+
+interface NotificationPrefs {
+  enabled: boolean;
+  sound: boolean;
+}
+
+function loadNotifPrefs(): NotificationPrefs {
+  try {
+    const raw = localStorage.getItem(NOTIF_ENABLED_KEY);
+    const soundRaw = localStorage.getItem(NOTIF_SOUND_KEY);
+    return {
+      enabled: raw !== "false", // default true
+      sound: soundRaw !== "false", // default true
+    };
+  } catch {
+    return { enabled: true, sound: true };
+  }
+}
+
+/* ─── Props ────────────────────────────────────────────────────────────── */
+
+interface SettingsPanelProps {
+  themeMode: ThemeMode;
+  isDark: boolean;
+  onThemeModeChange: (mode: ThemeMode) => void;
+}
+
+/* ─── Component ────────────────────────────────────────────────────────── */
+
+export function SettingsPanel({
+  themeMode,
+  isDark,
+  onThemeModeChange,
+}: SettingsPanelProps) {
+  const [notifPrefs, setNotifPrefs] = useState<NotificationPrefs>(loadNotifPrefs);
+  const [adminSettings, setAdminSettings] = useState<AdminSettingsType | null>(null);
+  const [adminSaving, setAdminSaving] = useState(false);
+  const [adminError, setAdminError] = useState<string | null>(null);
+  const [adminSuccess, setAdminSuccess] = useState<string | null>(null);
+  const adminSuccessTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Load admin settings on mount
+  useEffect(() => {
+    getAdminSettings()
+      .then(setAdminSettings)
+      .catch(() => {
+        // Not authenticated — ignore
+      });
+  }, []);
+
+  const handleTogglePublic = async () => {
+    if (!adminSettings) return;
+    const newValue = !adminSettings.dashboardIsPublic;
+    setAdminSaving(true);
+    setAdminError(null);
+    setAdminSuccess(null);
+    // Clear any existing auto-clear timer
+    if (adminSuccessTimerRef.current) {
+      clearTimeout(adminSuccessTimerRef.current);
+    }
+    try {
+      const updated = await updateAdminSettings({ dashboardIsPublic: newValue });
+      setAdminSettings(updated);
+      setAdminSuccess(
+        newValue
+          ? "Dashboard is now public — accessible without password."
+          : "Dashboard is now private — admin password required.",
+      );
+      // Auto-clear success message after 4s
+      adminSuccessTimerRef.current = setTimeout(() => setAdminSuccess(null), 4000);
+    } catch (err) {
+      setAdminError(err instanceof Error ? err.message : "Failed to update");
+    } finally {
+      setAdminSaving(false);
+    }
+  };
+
+  const handleLogout = () => {
+    clearSessionToken();
+    window.location.reload();
+  };
+
+  const updateNotif = useCallback(
+    (patch: Partial<NotificationPrefs>) => {
+      setNotifPrefs((prev) => {
+        const next = { ...prev, ...patch };
+        try {
+          localStorage.setItem(NOTIF_ENABLED_KEY, String(next.enabled));
+          localStorage.setItem(NOTIF_SOUND_KEY, String(next.sound));
+        } catch {
+          /* quota */
+        }
+        // Dispatch event so other components can react
+        window.dispatchEvent(
+          new CustomEvent("notif_prefs_changed", { detail: next }),
+        );
+        return next;
+      });
+    },
+    [],
+  );
+
+  const themeOptions: Array<{
+    value: ThemeMode;
+    label: string;
+    icon: typeof Sun;
+    desc: string;
+  }> = [
+    {
+      value: "light",
+      label: "Light",
+      icon: Sun,
+      desc: "Always use light theme",
+    },
+    {
+      value: "dark",
+      label: "Dark",
+      icon: Moon,
+      desc: "Always use dark theme",
+    },
+    {
+      value: "system",
+      label: "System",
+      icon: Monitor,
+      desc: "Follow system preference",
+    },
+  ];
+
+  return (
+    <motion.div
+      className="mx-auto max-w-2xl space-y-6"
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+    >
+      {/* ── Theme section ────────────────────────────────────────────── */}
+      <motion.div variants={cardItem}>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-primary">
+              <Palette className="h-5 w-5" />
+              Theme
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+              {themeOptions.map((opt) => {
+                const Icon = opt.icon;
+                const isActive = themeMode === opt.value;
+                return (
+                  <button
+                    key={opt.value}
+                    onClick={() => onThemeModeChange(opt.value)}
+                    className={`
+                      flex flex-col items-center gap-2 rounded-xl border-2 p-4 text-center transition-all
+                      ${
+                        isActive
+                          ? "border-primary bg-primary/5 text-primary"
+                          : "border-border text-muted-foreground hover:border-primary/40 hover:text-foreground"
+                      }
+                    `}
+                  >
+                    <Icon
+                      className={`h-6 w-6 ${
+                        opt.value === "dark" && !isActive
+                          ? "text-indigo-400"
+                          : opt.value === "light" && !isActive
+                            ? "text-amber-500"
+                            : ""
+                      }`}
+                    />
+                    <span className="text-sm font-semibold">{opt.label}</span>
+                    <span className="text-xs">{opt.desc}</span>
+                    {isActive && (
+                      <span className="mt-1 h-1.5 w-1.5 rounded-full bg-primary" />
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+            <p className="mt-3 text-xs text-muted-foreground">
+              Current: <span className="font-medium text-foreground capitalize">{isDark ? "Dark" : "Light"}</span>
+              {themeMode === "system" && " (follows system)"}
+            </p>
+          </CardContent>
+        </Card>
+      </motion.div>
+
+      {/* ── Notifications section ────────────────────────────────────── */}
+      <motion.div variants={cardItem}>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-primary">
+              <Bell className="h-5 w-5" />
+              Notifications
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Toggle — enable/disable all notifs */}
+            <label className="flex items-center justify-between rounded-lg border border-border p-3 cursor-pointer hover:bg-accent/50 transition-colors">
+              <div className="flex items-center gap-3">
+                {notifPrefs.enabled ? (
+                  <Bell className="h-5 w-5 text-primary" />
+                ) : (
+                  <BellOff className="h-5 w-5 text-muted-foreground" />
+                )}
+                <div>
+                  <p className="text-sm font-medium text-foreground">
+                    Moderation alerts
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Show toast when a message is flagged by AI
+                  </p>
+                </div>
+              </div>
+              <button
+                role="switch"
+                aria-checked={notifPrefs.enabled}
+                onClick={() => updateNotif({ enabled: !notifPrefs.enabled })}
+                className={`
+                  relative h-6 w-11 rounded-full transition-colors
+                  ${notifPrefs.enabled ? "bg-primary" : "bg-muted"}
+                `}
+              >
+                <span
+                  className={`
+                    absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white dark:bg-gray-800 shadow-sm transition-transform
+                    ${notifPrefs.enabled ? "translate-x-5" : "translate-x-0"}
+                  `}
+                />
+              </button>
+            </label>
+
+            {/* Toggle — sound */}
+            <label className="flex items-center justify-between rounded-lg border border-border p-3 cursor-pointer hover:bg-accent/50 transition-colors">
+              <div className="flex items-center gap-3">
+                {notifPrefs.sound ? (
+                  <Volume2 className="h-5 w-5 text-primary" />
+                ) : (
+                  <VolumeX className="h-5 w-5 text-muted-foreground" />
+                )}
+                <div>
+                  <p className="text-sm font-medium text-foreground">
+                    Sound effects
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Play a sound when new moderation alerts arrive
+                  </p>
+                </div>
+              </div>
+              <button
+                role="switch"
+                aria-checked={notifPrefs.sound}
+                onClick={() => updateNotif({ sound: !notifPrefs.sound })}
+                className={`
+                  relative h-6 w-11 rounded-full transition-colors
+                  ${notifPrefs.sound ? "bg-primary" : "bg-muted"}
+                `}
+              >
+                <span
+                  className={`
+                    absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white dark:bg-gray-800 shadow-sm transition-transform
+                    ${notifPrefs.sound ? "translate-x-5" : "translate-x-0"}
+                  `}
+                />
+              </button>
+            </label>
+          </CardContent>
+        </Card>
+      </motion.div>
+
+      {/* ── Admin section ────────────────────────────────────────────── */}
+      <motion.div variants={cardItem}>
+        <Card className="border-primary/20">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-primary">
+              <Settings className="h-5 w-5" />
+              Admin Settings
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Dashboard visibility toggle */}
+            <div className="rounded-lg border border-border p-4">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex items-start gap-3">
+                  {adminSettings?.dashboardIsPublic ? (
+                    <Globe className="mt-0.5 h-5 w-5 text-emerald-500 dark:text-emerald-400 shrink-0" />
+                  ) : (
+                    <Lock className="mt-0.5 h-5 w-5 text-amber-500 dark:text-amber-400 shrink-0" />
+                  )}
+                  <div>
+                    <p className="text-sm font-medium text-foreground">
+                      Dashboard Visibility:{" "}
+                      <span className={adminSettings?.dashboardIsPublic ? "text-emerald-500 dark:text-emerald-400" : "text-amber-500 dark:text-amber-400"}>
+                        {adminSettings?.dashboardIsPublic ? "Public" : "Private"}
+                      </span>
+                    </p>
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {adminSettings?.dashboardIsPublic
+                        ? "Anyone can view the dashboard. Admin password still required for management."
+                        : "Admin password required to access the dashboard."}
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  onClick={handleTogglePublic}
+                  disabled={adminSaving}
+                  variant={adminSettings?.dashboardIsPublic ? "outline" : "default"}
+                  size="sm"
+                  className="shrink-0"
+                >
+                  {adminSaving ? (
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                  ) : adminSettings?.dashboardIsPublic ? (
+                    "Make Private"
+                  ) : (
+                    "Make Public"
+                  )}
+                </Button>
+              </div>
+              {adminError && (
+                <p className="mt-2 text-xs text-destructive">{adminError}</p>
+              )}
+              {adminSuccess && (
+                <p className="mt-2 text-xs text-emerald-500 dark:text-emerald-400">{adminSuccess}</p>
+              )}
+            </div>
+
+            {/* Status indicators */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="rounded-lg bg-muted/50 px-3 py-2">
+                <p className="text-xs text-muted-foreground">Runtime</p>
+                <div className="flex items-center gap-1.5 mt-0.5">
+                  <span className={`inline-block h-2 w-2 rounded-full ${adminSettings?.dashboardIsPublic ? "bg-emerald-400 dark:bg-emerald-500" : "bg-amber-400 dark:bg-amber-500"}`} />
+                  <span className="text-sm font-medium">{adminSettings?.dashboardIsPublic ? "Public" : "Private"}</span>
+                </div>
+              </div>
+              <div className="rounded-lg bg-muted/50 px-3 py-2">
+                <p className="text-xs text-muted-foreground">Env Default</p>
+                <div className="flex items-center gap-1.5 mt-0.5">
+                  <span className={`inline-block h-2 w-2 rounded-full ${adminSettings?.envDashboardIsPublic ? "bg-emerald-400 dark:bg-emerald-500" : "bg-amber-400 dark:bg-amber-500"}`} />
+                  <span className="text-sm font-medium">{adminSettings?.envDashboardIsPublic ? "Public" : "Private"}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Logout */}
+            <div className="flex justify-end border-t border-border pt-4">
+              <Button
+                onClick={handleLogout}
+                variant="outline"
+                size="sm"
+                className="text-muted-foreground"
+              >
+                <Lock className="mr-2 h-4 w-4" />
+                Logout
+              </Button>
+            </div>
+
+            {/* Info */}
+            <div className="rounded-lg bg-muted/30 px-3 py-2">
+              <div className="flex items-start gap-2">
+                <Shield className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                <p className="text-xs text-muted-foreground">
+                  Admin password is set via the <code className="rounded bg-muted px-1 py-0.5 font-mono text-[10px]">ADMIN_PASSWORD</code> env var.
+                  Runtime settings are persisted in <code className="rounded bg-muted px-1 py-0.5 font-mono text-[10px]">data/settings.json</code>.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </motion.div>
+
+      {/* ── About section ────────────────────────────────────────────── */}
+      <motion.div variants={cardItem}>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-muted-foreground">About</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Bete Dashboard v1.0 — Discord AI Moderation & Voice Recording
+              System.
+            </p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Theme settings are saved locally. Notification preferences are
+              persisted across sessions.
+            </p>
+          </CardContent>
+        </Card>
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/services/frontend/src/hooks/useNotificationBadge.ts b/services/frontend/src/hooks/useNotificationBadge.ts
new file mode 100644
index 0000000..4c75f04
--- /dev/null
+++ b/services/frontend/src/hooks/useNotificationBadge.ts
@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Tracks incoming moderation_alert events and maintains a badge counter.
+ * Clears when the user navigates to the messages tab.
+ */
+export function useNotificationBadge(activeTab: string) {
+  const [count, setCount] = useState(0);
+  const prevActiveTab = useRef(activeTab);
+
+  // Clear badge when user switches TO messages tab
+  useEffect(() => {
+    if (activeTab === "messages" && prevActiveTab.current !== "messages") {
+      setCount(0);
+    }
+    prevActiveTab.current = activeTab;
+  }, [activeTab]);
+
+  const increment = useCallback(() => {
+    setCount((c) => c + 1);
+  }, []);
+
+  // Listen for moderation_alert custom events
+  useEffect(() => {
+    const handler = () => increment();
+    window.addEventListener("moderation_alert", handler);
+    return () => window.removeEventListener("moderation_alert", handler);
+  }, [increment]);
+
+  return { count, clear: () => setCount(0) };
+}
diff --git a/services/frontend/src/hooks/useTheme.ts b/services/frontend/src/hooks/useTheme.ts
new file mode 100644
index 0000000..612d805
--- /dev/null
+++ b/services/frontend/src/hooks/useTheme.ts
@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+export type Theme = "light" | "dark";
+export type ThemeMode = Theme | "system";
+
+const THEME_STORAGE_KEY = "bete-dashboard-theme";
+
+function getSystemTheme(): Theme {
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function loadThemeMode(): ThemeMode {
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system")
+      return stored;
+  } catch {
+    // ignore
+  }
+  return "system";
+}
+
+function resolveTheme(mode: ThemeMode): Theme {
+  return mode === "system" ? getSystemTheme() : mode;
+}
+
+function applyTheme(theme: Theme) {
+  const root = document.documentElement;
+  root.setAttribute("data-theme", theme);
+  // Also toggle Tailwind dark class for utility-based approach
+  if (theme === "dark") {
+    root.classList.add("dark");
+  } else {
+    root.classList.remove("dark");
+  }
+}
+
+export function useTheme() {
+  const [mode, setModeState] = useState<ThemeMode>(loadThemeMode);
+
+  const theme = useMemo(() => resolveTheme(mode), [mode]);
+
+  const setMode = useCallback((newMode: ThemeMode) => {
+    setModeState(newMode);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, newMode);
+    } catch {
+      // ignore quota errors
+    }
+  }, []);
+
+  const toggle = useCallback(() => {
+    setMode(theme === "dark" ? "light" : "dark");
+  }, [theme, setMode]);
+
+  // Apply theme on mount and when mode changes
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  // Listen for system preference changes when in "system" mode
+  useEffect(() => {
+    if (mode !== "system") return;
+
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      applyTheme(resolveTheme("system"));
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [mode]);
+
+  return { theme, mode, setMode, toggle, isDark: theme === "dark" };
+}
diff --git a/services/frontend/src/layouts/BaseLayout.astro b/services/frontend/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..f033fef
--- /dev/null
+++ b/services/frontend/src/layouts/BaseLayout.astro
@@ -0,0 +1,84 @@
+---
+// ─── BaseLayout.astro — BETE's eternal shell ─────────────────────────────────
+// Handles: anti-FOUC theme, font loading, global CSS, meta tags.
+// All interactive content is delegated to React islands via <slot/>.
+// ──────────────────────────────────────────────────────────────────────────────
+
+// Font dari design system: Outfit (menggantikan Poppins)
+const FONT_HREF =
+  "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";
+
+const FALLBACK_TITLE = "IMPHNEN — Discord Moderation";
+const FALLBACK_DESC =
+  "Real-time Discord AI Moderation & Voice Recording Dashboard";
+const FALLBACK_IMAGE =
+  "https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg";
+---
+
+<!doctype html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" id="meta-theme-color" content="#ffffff" />
+
+    <!-- Primary Meta Tags -->
+    <title>{FALLBACK_TITLE}</title>
+    <meta name="title" content={FALLBACK_TITLE} />
+    <meta name="description" content={FALLBACK_DESC} />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={FALLBACK_TITLE} />
+    <meta property="og:description" content={FALLBACK_DESC} />
+    <meta property="og:image" content={FALLBACK_IMAGE} />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content={FALLBACK_TITLE} />
+    <meta property="twitter:description" content={FALLBACK_DESC} />
+    <meta property="twitter:image" content={FALLBACK_IMAGE} />
+
+    <!-- Icon -->
+    <link rel="icon" type="image/svg+xml" href={FALLBACK_IMAGE} />
+
+    <!-- Font Preconnect -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href={FONT_HREF} rel="stylesheet" />
+
+    <!-- ── Anti-FOUC: apply saved theme BEFORE React renders ────────────── -->
+    <script is:inline>
+      (function () {
+        try {
+          var stored = localStorage.getItem("bete-dashboard-theme");
+          var theme = "light";
+          if (stored === "dark") {
+            theme = "dark";
+          } else if (stored === "system") {
+            theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+              ? "dark"
+              : "light";
+          }
+          var root = document.documentElement;
+          root.setAttribute("data-theme", theme);
+          if (theme === "dark") root.classList.add("dark");
+          // Sync meta theme-color
+          var meta = document.getElementById("meta-theme-color");
+          if (meta) {
+            meta.setAttribute(
+              "content",
+              theme === "dark" ? "#0f0f12" : "#ffffff",
+            );
+          }
+        } catch (e) {
+          // localStorage unavailable — safe to ignore
+        }
+      })();
+    </script>
+  </head>
+  <body>
+    <!-- React island: seluruh app di-render oleh React -->
+    <slot />
+  </body>
+</html>
diff --git a/services/frontend/src/main.tsx b/services/frontend/src/main.tsx
deleted file mode 100644
index 1b16609..0000000
--- a/services/frontend/src/main.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import { ToastProvider } from "./shared/ui";
-import "./styles.css";
-
-const root = document.getElementById("root");
-
-if (!root) {
-  throw new Error("Root element not found");
-}
-
-ReactDOM.createRoot(root).render(
-  <React.StrictMode>
-    <ToastProvider>
-      <App />
-    </ToastProvider>
-  </React.StrictMode>,
-);
diff --git a/services/frontend/src/pages/index.astro b/services/frontend/src/pages/index.astro
new file mode 100644
index 0000000..e005c1a
--- /dev/null
+++ b/services/frontend/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+// ─── index.astro — BETE's main entry point ──────────────────────────────────
+// Shell statis: semua interaktivitas di-delegate ke React island
+// ──────────────────────────────────────────────────────────────────────────────
+import BaseLayout from "../layouts/BaseLayout.astro";
+import AppClient from "../App.client";
+---
+
+<BaseLayout>
+  <!-- React island: seluruh SPA di-render oleh React -->
+  <AppClient client:only="react" />
+</BaseLayout>
diff --git a/services/frontend/src/shared/api/client.ts b/services/frontend/src/shared/api/client.ts
index f5f92ad..80ae557 100644
--- a/services/frontend/src/shared/api/client.ts
+++ b/services/frontend/src/shared/api/client.ts
@@ -24,6 +24,7 @@ import type {
   VoiceRecordingListResponse,
 } from "../../entities/recording/types.js";
 import type {
+  AdminSettings,
   AppConfig,
   DashboardTab,
   UIState,
@@ -49,14 +50,53 @@ class ApiError extends Error {
   }
 }
 
-// Cache admin password in memory — read from localStorage once on first call
-let _cachedPassword: string | null = null;
+// Cache admin session token in memory — read from sessionStorage once on first call
+// NOTE: _cachedToken is intentionally removed; we read directly from sessionStorage
+// to support multi-tab sync (L8 fix).
 
-function getAdminPassword(): string | null {
-  if (_cachedPassword === null) {
-    _cachedPassword = localStorage.getItem("admin-password");
-  }
-  return _cachedPassword;
+/**
+ * Get the current session token from sessionStorage.
+ * Always reads directly from sessionStorage to support multi-tab sync.
+ * Returns null if not authenticated.
+ */
+export function getSessionToken(): string | null {
+  return sessionStorage.getItem("admin-token");
+}
+
+/**
+ * Store a session token after successful login.
+ */
+export function setSessionToken(token: string): void {
+  sessionStorage.setItem("admin-token", token);
+}
+
+/**
+ * Clear the session token (logout).
+ */
+export function clearSessionToken(): void {
+  sessionStorage.removeItem("admin-token");
+}
+
+/**
+ * @deprecated Use getSessionToken() instead.
+ * Kept for backward compatibility during migration.
+ */
+export function getAdminPassword(): string | null {
+  return localStorage.getItem("admin-password");
+}
+
+/**
+ * @deprecated Use setSessionToken() instead.
+ */
+export function setAdminPassword(password: string): void {
+  localStorage.setItem("admin-password", password);
+}
+
+/**
+ * @deprecated Use clearSessionToken() instead.
+ */
+export function clearAdminPassword(): void {
+  localStorage.removeItem("admin-password");
 }
 
 function buildSearchParams(
@@ -76,16 +116,32 @@ export async function request<T>(
   init?: RequestInit,
   timeoutMs?: number,
 ): Promise<T> {
-  const password = getAdminPassword();
+  const token = getSessionToken();
   const url = path.startsWith("http") ? path : `${BE_API_URL}${path}`;
   const signal = AbortSignal.timeout(timeoutMs ?? DEFAULT_TIMEOUT_MS);
   logger.debug("Request", { method: init?.method ?? "GET", url });
 
+  const headers: Record<string, string> = {};
+
+  // Only set Content-Type for non-FormData bodies
+  // FormData sets its own Content-Type (multipart/form-data with boundary)
+  if (!(init?.body instanceof FormData)) {
+    headers["Content-Type"] = "application/json";
+  }
+
+  // Prefer Bearer token (new auth method)
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  } else {
+    // Fallback: X-Admin-Password (for backward compatibility)
+    const password = getAdminPassword();
+    if (password) {
+      headers["X-Admin-Password"] = password;
+    }
+  }
+
   const res = await fetch(url, {
-    headers: {
-      "Content-Type": "application/json",
-      ...(password ? { "X-Admin-Password": password } : {}),
-    },
+    headers,
     signal,
     ...init,
   });
@@ -101,6 +157,13 @@ export async function request<T>(
       // ignore parse errors
     }
     logger.error("Request failed", { url, status: res.status, code, message });
+
+    // Auto-logout on 401: token expired / invalidated
+    if (res.status === 401) {
+      clearSessionToken();
+      window.location.reload();
+    }
+
     throw new ApiError(code, message, res.status);
   }
 
@@ -117,6 +180,7 @@ export function getAPIURL(): string {
 
 export type {
   ActiveSpeaker,
+  AdminSettings,
   AppConfig,
   Channel,
   ChatResponse,
@@ -271,13 +335,35 @@ export function deleteRecording(id: string): Promise<void> {
 
 // ─── Auth ────────────────────────────────────────────────────────────────────
 
-export function login(password: string): Promise<{ ok: boolean }> {
-  return request<{ ok: boolean }>("/api/auth/login", {
+export function login(password: string): Promise<{ ok: boolean; token?: string }> {
+  return request<{ ok: boolean; token?: string }>("/api/auth/login", {
     method: "POST",
     body: JSON.stringify({ password }),
   });
 }
 
+/**
+ * Server-side logout: increments token version, invalidating all sessions.
+ * Call this before clearing local state so the token is properly revoked.
+ */
+export function logout(): Promise<{ ok: boolean }> {
+  return request<{ ok: boolean }>("/api/auth/logout", { method: "POST" });
+}
+// ─── Admin Settings ──────────────────────────────────────────────────────────
+
+export function getAdminSettings(): Promise<AdminSettings> {
+  return request<AdminSettings>("/api/admin/settings");
+}
+
+export function updateAdminSettings(
+  patch: Partial<{ dashboardIsPublic: boolean }>,
+): Promise<AdminSettings> {
+  return request<AdminSettings>("/api/admin/settings", {
+    method: "PATCH",
+    body: JSON.stringify(patch),
+  });
+}
+
 // ─── Dashboard ─────────────────────────────────────────────────────────────────
 
 export function getDashboardStats(): Promise<DashboardStats> {
diff --git a/services/frontend/src/shared/ui/CommandPalette.tsx b/services/frontend/src/shared/ui/CommandPalette.tsx
new file mode 100644
index 0000000..01773d3
--- /dev/null
+++ b/services/frontend/src/shared/ui/CommandPalette.tsx
@@ -0,0 +1,442 @@
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  Command,
+  FileText,
+  HelpCircle,
+  MessageSquare,
+  Moon,
+  Search,
+  Settings,
+  Sun,
+  Volume2,
+  X,
+} from "lucide-react";
+import type { KeyboardEvent } from "react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+} from "react";
+import type { MessageRecord } from "../api/client";
+import { request } from "../api/client";
+import { cn } from "../lib/utils";
+import { Input } from "./index";
+
+/* ─── Modal backdrop variants ──────────────────────────────────────────── */
+
+const backdropVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+};
+
+const modalVariants = {
+  hidden: { opacity: 0, scale: 0.96, y: 20 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: { type: "spring" as const, stiffness: 350, damping: 28 },
+  },
+  exit: { opacity: 0, scale: 0.96, y: 10, transition: { duration: 0.15 } },
+} as const;
+
+/* ─── Types ────────────────────────────────────────────────────────────── */
+
+type ModalMode = "search" | "shortcuts" | null;
+
+interface CommandPaletteProps {
+  isOpen: boolean;
+  mode: ModalMode;
+  onClose: () => void;
+  onNavigate: (tab: string) => void;
+  onToggleTheme: () => void;
+  isDark: boolean;
+}
+
+const shortcuts = [
+  { keys: ["Ctrl", "K"], desc: "Open search" },
+  { keys: ["?"], desc: "Show keyboard shortcuts" },
+  { keys: ["Esc"], desc: "Close modal / cancel" },
+  { keys: ["Ctrl", "1"], desc: "Messages & Moderation" },
+  { keys: ["Ctrl", "2"], desc: "Voice & Media" },
+  { keys: ["Ctrl", "3"], desc: "Dashboard" },
+  { keys: ["Ctrl", "4"], desc: "Settings" },
+  { keys: ["Space"], desc: "Push-to-talk (when in voice)" },
+  { keys: ["T"], desc: "Toggle theme" },
+];
+
+/* ─── Help panel ───────────────────────────────────────────────────────── */
+
+function ShortcutsPanel() {
+  return (
+    <div className="space-y-3 p-4">
+      <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+        <HelpCircle className="h-4 w-4 text-primary" />
+        Keyboard Shortcuts
+      </h3>
+      <div className="grid gap-1.5">
+        {shortcuts.map((s) => (
+          <div
+            key={s.keys.join("+")}
+            className="flex items-center justify-between rounded-lg px-2 py-1.5 hover:bg-accent/50 transition-colors"
+          >
+            <span className="text-sm text-muted-foreground">{s.desc}</span>
+            <kbd className="flex items-center gap-1">
+              {s.keys.map((k) => (
+                <span
+                  key={k}
+                  className="inline-flex h-6 min-w-[24px] items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-mono text-foreground shadow-sm"
+                >
+                  {k === "Ctrl" ? <Command className="h-3 w-3" /> : k}
+                </span>
+              ))}
+            </kbd>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ─── Quick actions ────────────────────────────────────────────────────── */
+
+const quickActions = [
+  { id: "messages", label: "Go to Messages", icon: MessageSquare },
+  { id: "live", label: "Go to Voice & Media", icon: Volume2 },
+  { id: "dashboard", label: "Go to Dashboard", icon: FileText },
+  { id: "settings", label: "Open Settings", icon: Settings },
+  { id: "theme", label: "Toggle theme", icon: Sun },
+];
+
+/* ─── Main component ───────────────────────────────────────────────────── */
+
+export function CommandPalette({
+  isOpen,
+  mode,
+  onClose,
+  onNavigate,
+  onToggleTheme,
+  isDark,
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<MessageRecord[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  // Focus input when search mode opens
+  useEffect(() => {
+    if (isOpen && mode === "search") {
+      // Small delay for the animation to settle
+      const focusTimer = setTimeout(() => inputRef.current?.focus(), 50);
+      return () => clearTimeout(focusTimer);
+    }
+  }, [isOpen, mode]);
+
+  // Reset state when closing
+  useEffect(() => {
+    if (!isOpen) {
+      setQuery("");
+      setSearchResults([]);
+      setActiveIndex(0);
+    }
+  }, [isOpen]);
+
+  const handleSearch = useCallback(async (q: string) => {
+    setQuery(q);
+    if (!q.trim()) {
+      setSearchResults([]);
+      return;
+    }
+    setIsSearching(true);
+    try {
+      const params = new URLSearchParams({ q, limit: "10" });
+      const data = await request<{ results: MessageRecord[] }>(
+        `/api/analysis/search?${params}`,
+      );
+      setSearchResults(data.results || []);
+    } catch {
+      setSearchResults([]);
+    } finally {
+      setIsSearching(false);
+    }
+  }, []);
+
+  const executeAction = useCallback(
+    (action: string) => {
+      if (action === "theme") {
+        onToggleTheme();
+      } else if (action === "settings") {
+        onNavigate("settings");
+      } else if (action === "messages") {
+        onNavigate("messages");
+      } else if (action === "live") {
+        onNavigate("live");
+      } else if (action === "dashboard") {
+        onNavigate("dashboard");
+      }
+      onClose();
+    },
+    [onNavigate, onToggleTheme, onClose],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => (i < searchResults.length - 1 ? i + 1 : 0));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => (i > 0 ? i - 1 : searchResults.length - 1));
+      } else if (e.key === "Enter" && searchResults.length > 0) {
+        onClose();
+      } else if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [searchResults.length, onClose],
+  );
+
+  // Global keyboard listeners for search and help
+  useEffect(() => {
+    const handler = (e: globalThis.KeyboardEvent) => {
+      if (
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement ||
+        e.target instanceof HTMLSelectElement
+      )
+        return;
+
+      // Ctrl+K — open search
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        // Don't toggle if already open — just close
+        if (isOpen) {
+          onClose();
+        }
+        return;
+      }
+
+      // ? — show shortcuts (only when no modal is open)
+      if (e.key === "?" && !isOpen) {
+        e.preventDefault();
+        return;
+      }
+
+      // Escape — close any modal
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+
+      // Ctrl+1-4 — tab navigation
+      if (e.ctrlKey || e.metaKey) {
+        const tabMap: Record<string, string> = {
+          "1": "messages",
+          "2": "live",
+          "3": "dashboard",
+          "4": "settings",
+        };
+        const tab = tabMap[e.key];
+        if (tab) {
+          e.preventDefault();
+          onNavigate(tab);
+        }
+      }
+
+      // T — toggle theme (when no input focused)
+      if (e.key === "t" && !e.ctrlKey && !e.metaKey && !isOpen) {
+        e.preventDefault();
+        onToggleTheme();
+      }
+    };
+
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isOpen, onClose, onNavigate, onToggleTheme]);
+
+  const showSearch = mode === "search";
+  const showShortcuts = mode === "shortcuts";
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className="fixed inset-0 z-[9999] flex items-start justify-center pt-[12vh]"
+          variants={backdropVariants}
+          initial="hidden"
+          animate="visible"
+          exit="hidden"
+          transition={{ duration: 0.15 }}
+        >
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+            onClick={onClose}
+          />
+
+          {/* Modal */}
+          <motion.div
+            className="relative w-full max-w-xl overflow-hidden rounded-2xl border border-border/50 bg-card shadow-2xl"
+            variants={modalVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+          >
+            {/* Search header */}
+            {showSearch && (
+              <div className="flex items-center gap-3 border-b border-border/50 px-4 py-3">
+                <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+                <input
+                  ref={inputRef}
+                  value={query}
+                  onChange={(e) => handleSearch(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder="Search messages across all channels..."
+                  className="flex-1 border-0 bg-transparent p-0 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none"
+                />
+                {isSearching && (
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                )}
+                {!isSearching && query && (
+                  <button
+                    onClick={() => {
+                      setQuery("");
+                      setSearchResults([]);
+                    }}
+                    className="shrink-0 text-muted-foreground hover:text-foreground"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                )}
+                <kbd className="shrink-0 hidden sm:inline-flex h-5 items-center rounded-md border border-border bg-background px-1.5 text-[10px] font-mono text-muted-foreground">
+                  ESC
+                </kbd>
+              </div>
+            )}
+
+            {/* Shortcuts header */}
+            {showShortcuts && (
+              <div className="flex items-center justify-between border-b border-border/50 px-4 py-3">
+                <span className="text-sm font-semibold text-foreground flex items-center gap-2">
+                  <HelpCircle className="h-4 w-4 text-primary" />
+                  Keyboard Shortcuts
+                </span>
+                <button
+                  onClick={onClose}
+                  className="rounded-lg p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+
+            {/* Search results */}
+            {showSearch && (
+              <div className="max-h-[320px] overflow-y-auto">
+                {/* Quick actions */}
+                {!query && (
+                  <div className="p-2">
+                    <p className="px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                      Quick actions
+                    </p>
+                    {quickActions.map((action) => {
+                      const Icon = action.icon;
+                      const isThemeAction = action.id === "theme";
+                      return (
+                        <button
+                          key={action.id}
+                          onClick={() => executeAction(action.id)}
+                          className="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors"
+                        >
+                          <Icon
+                            className={cn(
+                              "h-4 w-4",
+                              isThemeAction && isDark
+                                ? "text-amber-400"
+                                : isThemeAction
+                                  ? "text-indigo-400"
+                                  : "text-primary",
+                            )}
+                          />
+                          <span>{action.label}</span>
+                          {isThemeAction && (
+                            <span className="ml-auto text-xs text-muted-foreground">
+                              {isDark ? "→ Light" : "→ Dark"}
+                            </span>
+                          )}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+
+                {/* Results */}
+                {query && (
+                  <div className="p-2">
+                    {searchResults.length > 0 ? (
+                      <>
+                        <p className="px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                          Messages ({searchResults.length})
+                        </p>
+                        {searchResults.map((msg, i) => (
+                          <button
+                            key={msg.id}
+                            onClick={() => {
+                              onClose();
+                            }}
+                            className={cn(
+                              "flex w-full items-start gap-3 rounded-lg px-2 py-2 text-left transition-colors",
+                              i === activeIndex
+                                ? "bg-accent"
+                                : "hover:bg-accent/50",
+                            )}
+                          >
+                            <MessageSquare className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+                            <div className="min-w-0 flex-1">
+                              <p className="truncate text-sm text-foreground">
+                                {msg.content || "(no content)"}
+                              </p>
+                              <p className="text-xs text-muted-foreground">
+                                {msg.username || msg.user_id || "unknown"}
+                                {msg.ai_status === "flagged" && (
+                                  <span className="ml-2 text-destructive">
+                                    ⚑ flagged
+                                  </span>
+                                )}
+                              </p>
+                            </div>
+                          </button>
+                        ))}
+                      </>
+                    ) : (
+                      <p className="px-2 py-4 text-center text-sm text-muted-foreground">
+                        {isSearching
+                          ? "Searching..."
+                          : "No messages found matching your query."}
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                {/* Search footer hint */}
+                {!query && (
+                  <div className="border-t border-border/50 px-4 py-2">
+                    <p className="text-xs text-muted-foreground">
+                      Type to search messages — results are fetched from the
+                      server
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Shortcuts content */}
+            {showShortcuts && <ShortcutsPanel />}
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/services/frontend/src/shared/ui/MobileTabBar.tsx b/services/frontend/src/shared/ui/MobileTabBar.tsx
index a26d87d..dd17642 100644
--- a/services/frontend/src/shared/ui/MobileTabBar.tsx
+++ b/services/frontend/src/shared/ui/MobileTabBar.tsx
@@ -1,4 +1,5 @@
-import { LayoutDashboard, MessageSquare, Radio } from "lucide-react";
+import { motion } from "framer-motion";
+import { LayoutDashboard, MessageSquare, Radio, Settings } from "lucide-react";
 import type { DashboardTab } from "../../entities/ui/types.js";
 import { cn } from "../lib/utils";
 
@@ -6,6 +7,7 @@ const tabs: Array<{ id: DashboardTab; label: string; Icon: typeof Radio }> = [
   { id: "messages", label: "Messages", Icon: MessageSquare },
   { id: "live", label: "Voice & Media", Icon: Radio },
   { id: "dashboard", label: "Dashboard", Icon: LayoutDashboard },
+  { id: "settings" as const, label: "Admin", Icon: Settings },
 ];
 
 interface MobileTabBarProps {
@@ -18,7 +20,7 @@ export function MobileTabBar({ activeTab, onTabChange }: MobileTabBarProps) {
     <nav
       aria-label="Main navigation"
       role="tablist"
-      className="fixed bottom-0 left-0 right-0 z-50 flex border-t border-border bg-card shadow-lg md:hidden"
+      className="fixed bottom-0 left-0 right-0 z-50 flex border-t border-border bg-card shadow-lg shadow-black/5 md:hidden"
     >
       {tabs.map(({ id, label, Icon }) => (
         <button
@@ -29,16 +31,26 @@ export function MobileTabBar({ activeTab, onTabChange }: MobileTabBarProps) {
           type="button"
           onClick={() => onTabChange(id)}
           className={cn(
-            "flex flex-1 flex-col items-center gap-0.5 py-2 text-xs font-medium transition-colors",
-            activeTab === id ? "text-primary" : "text-muted-foreground",
+            "relative flex flex-1 flex-col items-center gap-0.5 py-2 text-xs font-medium transition-colors",
+            activeTab === id
+              ? "text-primary"
+              : "text-muted-foreground hover:text-foreground",
           )}
         >
-          <Icon className="h-5 w-5" />
+          {activeTab === id && (
+            <motion.div
+              layoutId="tab-indicator"
+              transition={{ type: "spring", stiffness: 400, damping: 30 }}
+              className="absolute -top-px left-1/4 right-1/4 h-0.5 rounded-full bg-primary"
+            />
+          )}
+          <Icon className={cn("h-5 w-5", activeTab === id && "drop-shadow-sm")} />
           <span className="text-[10px]">{label}</span>
           {activeTab === id && (
-            <span
-              aria-hidden="true"
-              className="h-0.5 w-6 rounded-full bg-primary mx-auto mt-0.5"
+            <motion.div
+              layoutId="tab-dot"
+              transition={{ type: "spring", stiffness: 400, damping: 30 }}
+              className="h-1 w-1 rounded-full bg-primary mt-0.5"
             />
           )}
         </button>
diff --git a/services/frontend/src/shared/ui/error-boundary.tsx b/services/frontend/src/shared/ui/error-boundary.tsx
new file mode 100644
index 0000000..6450b74
--- /dev/null
+++ b/services/frontend/src/shared/ui/error-boundary.tsx
@@ -0,0 +1,77 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { Button } from "../ui/button";
+import { cn } from "../lib/utils";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  className?: string;
+  message?: string;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Error Boundary component — catches JavaScript errors in its child tree,
+ * logs them, and displays a fallback UI instead of crashing the whole app.
+ */
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("[ErrorBoundary] Caught error:", error.message, errorInfo);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <div
+          className={cn(
+            "flex flex-col items-center justify-center rounded-xl border border-destructive/30 bg-destructive/5 p-8 text-center",
+            this.props.className,
+          )}
+          role="alert"
+        >
+          <AlertTriangle className="mb-3 h-8 w-8 text-destructive" />
+          <h3 className="mb-1 font-semibold text-foreground">
+            {this.props.message || "Something went wrong"}
+          </h3>
+          <p className="mb-4 text-sm text-muted-foreground">
+            {this.state.error?.message || "An unexpected error occurred."}
+          </p>
+          <Button
+            onClick={this.handleRetry}
+            variant="outline"
+            size="sm"
+            className="gap-2"
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+            Try Again
+          </Button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/services/frontend/src/shared/ws/socket.ts b/services/frontend/src/shared/ws/socket.ts
index 86b616e..96caa97 100644
--- a/services/frontend/src/shared/ws/socket.ts
+++ b/services/frontend/src/shared/ws/socket.ts
@@ -8,6 +8,7 @@ import type {
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { MediaState } from "../../entities/media/types.js";
 import { createLogger } from "../lib/logger.js";
+import { getSessionToken } from "../api/client.js";
 import type { ActiveSpeakerData } from "./events.js";
 
 const logger = createLogger("socket");
@@ -79,6 +80,7 @@ let _wsInstance: WebSocket | null = null;
 let _reconnectTimer: ReturnType<typeof setTimeout> | null = null;
 let _closed = false;
 let _reconnectAttempts = 0;
+let _heartbeatInterval: ReturnType<typeof setInterval> | null = null;
 const _listeners = new Set<WsHandlers>();
 const _statusCallbacks = new Set<(s: WsStatus) => void>();
 
@@ -90,7 +92,13 @@ function doConnect(): WebSocket {
   const BE_WS_URL =
     import.meta.env.VITE_BE_WS_URL ||
     `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}`;
-  const url = BE_WS_URL.endsWith("/ws") ? BE_WS_URL : `${BE_WS_URL}/ws`;
+  let url = BE_WS_URL.endsWith("/ws") ? BE_WS_URL : `${BE_WS_URL}/ws`;
+
+  // ⚠️ Token is NOT appended to the URL — sending it in the query string
+  // would leak it into Nginx/Traefik access logs, browser history, and
+  // Referer headers. Instead, the frontend sends an auth message as the
+  // first WebSocket frame after connection.
+
   const ws = new WebSocket(url);
   ws.binaryType = "arraybuffer";
   dispatchStatus("connecting");
@@ -100,12 +108,32 @@ function doConnect(): WebSocket {
     _reconnectAttempts = 0;
     dispatchStatus("connected");
     logger.info("Connected");
+
+    // Send auth message — token is sent as the first WebSocket frame,
+    // NOT in the URL query string, to avoid exposure in access logs.
+    const sessionToken = getSessionToken();
+    if (sessionToken) {
+      ws.send(JSON.stringify({ type: "auth", token: sessionToken }));
+    }
+
+    // Heartbeat — send a ping every 25s to keep the connection alive
+    if (_heartbeatInterval) clearInterval(_heartbeatInterval);
+    _heartbeatInterval = setInterval(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: "ping" }));
+      }
+    }, 25_000);
   });
   ws.addEventListener("error", () => {
     dispatchStatus("error");
     logger.error("WebSocket error");
   });
   ws.addEventListener("close", (event) => {
+    // Clean up heartbeat on disconnect
+    if (_heartbeatInterval) {
+      clearInterval(_heartbeatInterval);
+      _heartbeatInterval = null;
+    }
     dispatchStatus("disconnected");
     logger.info("Disconnected", { code: event.code, reason: event.reason });
     if (!_closed && _listeners.size > 0) {
@@ -338,15 +366,20 @@ export function useDashboardSocket(handlers: WsHandlers) {
       ensureConnected();
     }
 
-    return () => {
+    return (): void => {
       _listeners.delete(wrapper);
       _statusCallbacks.delete(setStatus);
-      if (_listeners.size === 0) {
-        _closed = true;
-        if (_reconnectTimer) clearTimeout(_reconnectTimer);
-        _wsInstance?.close();
-        _wsInstance = null;
-      }
+      // Defer the close so that React Strict Mode double-invoke in dev
+      // doesn't kill the socket that the remount immediately re-creates.
+      const delayClose = setTimeout(() => {
+        if (_listeners.size === 0) {
+          _closed = true;
+          if (_reconnectTimer) clearTimeout(_reconnectTimer);
+          _wsInstance?.close();
+          _wsInstance = null;
+        }
+      }, 100);
+      delayClose.unref?.();
     };
   }, []);
 
diff --git a/services/frontend/src/styles.css b/services/frontend/src/styles.css
index d31291b..e60ba36 100644
--- a/services/frontend/src/styles.css
+++ b/services/frontend/src/styles.css
@@ -1,7 +1,7 @@
 @import "tailwindcss";
-@config "../tailwind.config.js";
 
 @layer base {
+  /* ── Light theme (default) ───────────────────────────────────────────── */
   :root {
     --background: 1 0 0;
     --foreground: 0.141 0.005 285.823;
@@ -25,10 +25,49 @@
     --primary-glow: 0.623 0.214 259.815 / 0.15;
     --accent-glow: 0.552 0.016 285.938 / 0.15;
     --card-shadow: 0.92 0.004 286.32 / 0.3;
+    --particle-primary: 0.623 0.214 259.815 / 0.1;
+    --particle-secondary: 0.552 0.016 285.938 / 0.1;
+    --brand-gradient-from: var(--primary);
+    --brand-gradient-to: 0.623 0.2 200;
+    --scrollbar-track: 0.967 0.001 286.375;
+    --scrollbar-thumb: 0.92 0.004 286.32;
   }
 
-  * {
+  /* ── Dark theme ──────────────────────────────────────────────────────── */
+  [data-theme="dark"] {
+    --background: 0.147 0.004 285.823;
+    --foreground: 0.92 0.004 286.32;
+    --card: 0.162 0.008 286.034;
+    --card-foreground: 0.92 0.004 286.32;
+    --primary: 0.623 0.214 259.815;
+    --primary-soft: 0.3 0.04 259.815;
+    --primary-foreground: 0.97 0.014 254.604;
+    --secondary: 0.2 0.008 286.034;
+    --secondary-foreground: 0.85 0.008 286.034;
+    --muted: 0.2 0.008 286.034;
+    --muted-foreground: 0.6 0.016 285.938;
+    --accent: 0.2 0.008 286.034;
+    --accent-foreground: 0.85 0.008 286.034;
+    --destructive: 0.577 0.245 27.325;
+    --destructive-foreground: 0.97 0.014 254.604;
+    --border: 0.25 0.008 286.034;
+    --input: 0.25 0.008 286.034;
+    --ring: 0.623 0.214 259.815;
+    --primary-glow: 0.623 0.214 259.815 / 0.08;
+    --accent-glow: 0.552 0.016 285.938 / 0.08;
+    --card-shadow: 0 0 0 / 0.5;
+    --particle-primary: 0.623 0.214 259.815 / 0.06;
+    --particle-secondary: 0.552 0.016 285.938 / 0.06;
+    --brand-gradient-from: var(--primary);
+    --brand-gradient-to: 0.7 0.2 220;
+    --scrollbar-track: 0.147 0.004 285.823;
+    --scrollbar-thumb: 0.3 0.008 286.034;
+  }
+
+  /* ── Base styles ─────────────────────────────────────────────────────── */
+  [data-theme] {
     border-color: oklch(var(--border));
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
   }
 
   body {
@@ -36,7 +75,7 @@
     color: oklch(var(--foreground));
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-family: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   }
 
   html,
@@ -44,22 +83,47 @@
   #root {
     min-height: 100%;
   }
+
+  /* ── Scrollbar styling ───────────────────────────────────────────────── */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: oklch(var(--scrollbar-track));
+  }
+  ::-webkit-scrollbar-thumb {
+    background: oklch(var(--scrollbar-thumb));
+    border-radius: 999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: oklch(var(--muted-foreground) / 0.5);
+  }
+
+  /* ── Focus ring consistency ──────────────────────────────────────────── */
+  :focus-visible {
+    outline: 2px solid oklch(var(--ring));
+    outline-offset: 2px;
+  }
 }
 
 @layer utilities {
   .glass-card {
-    @apply bg-white/70 backdrop-blur-sm border border-[oklch(0.92_0.004_286.32)] rounded-xl;
+    @apply backdrop-blur-sm rounded-xl;
+    background-color: oklch(var(--card) / 0.7);
+    border: 1px solid oklch(var(--border));
   }
 
   .grid-pattern {
     background-image:
-      linear-gradient(oklch(0.92 0.004 286.32 / 0.3) 1px, transparent 1px),
-      linear-gradient(90deg, oklch(0.92 0.004 286.32 / 0.3) 1px, transparent 1px);
+      linear-gradient(oklch(var(--border) / 0.3) 1px, transparent 1px),
+      linear-gradient(90deg, oklch(var(--border) / 0.3) 1px, transparent 1px);
     background-size: 40px 40px;
   }
 
   .gradient-text {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400;
+    @apply bg-clip-text text-transparent;
+    background-image: linear-gradient(to right, oklch(var(--brand-gradient-from)), oklch(var(--brand-gradient-to)));
   }
 
   .animate-fade-in-up {
@@ -99,23 +163,32 @@
   to { opacity: 1; }
 }
 
+@keyframes glow-pulse {
+  0%, 100% { opacity: 0.4; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.05); }
+}
+
 .animate-bar-pulse {
   animation: bar-pulse 0.4s ease-in-out infinite;
   transform-origin: bottom;
 }
 
 .animate-shimmer {
-  background: linear-gradient(
     90deg,
-    oklch(0.92 0.004 286.32 / 0.5) 0%,
-    oklch(0.967 0.001 286.375) 40%,
-    oklch(0.92 0.004 286.32 / 0.5) 80%,
-    oklch(0.92 0.004 286.32 / 0.7) 100%
+    oklch(var(--border) / 0.5) 0%,
+    oklch(var(--muted)) 40%,
+    oklch(var(--border) / 0.5) 80%,
+    oklch(var(--border) / 0.7) 100%
   );
   background-size: 200% 100%;
   animation: shimmer 1.5s ease-in-out infinite;
 }
 
+.animate-glow-pulse {
+  animation: glow-pulse 4s ease-in-out infinite;
+}
+
+/* ── Reduced motion ──────────────────────────────────────────────────── */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
diff --git a/services/frontend/src/widgets/DashboardLayout.tsx b/services/frontend/src/widgets/DashboardLayout.tsx
index 12ae55c..6624b25 100644
--- a/services/frontend/src/widgets/DashboardLayout.tsx
+++ b/services/frontend/src/widgets/DashboardLayout.tsx
@@ -1,8 +1,9 @@
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import type { ReactNode } from "react";
 import type { MessageRecord } from "../entities/message/types.js";
 import type { DashboardTab } from "../entities/ui/types.js";
 import type { VoiceStatus } from "../entities/voice/types.js";
+import type { ThemeMode } from "../hooks/useTheme";
 import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
 import type { WsStatus } from "../shared/ws/socket";
 import { Header } from "./Header";
@@ -13,22 +14,30 @@ interface DashboardLayoutProps {
   activeTab: DashboardTab;
   wsStatus: WsStatus;
   voiceStatus: VoiceStatus;
+  themeMode: ThemeMode;
+  isDark: boolean;
   onTabChange: (tab: DashboardTab) => void;
+  onThemeToggle: () => void;
   children: ReactNode;
   recentMessages?: MessageRecord[];
   guildId?: string;
   channelId?: string;
+  notificationCount?: number;
 }
 
 export function DashboardLayout({
   activeTab,
   wsStatus,
   voiceStatus,
+  themeMode,
+  isDark,
   onTabChange,
+  onThemeToggle,
   children,
   recentMessages = [],
   guildId,
   channelId,
+  notificationCount = 0,
 }: DashboardLayoutProps) {
   return (
     <div className="relative min-h-screen bg-background text-foreground">
@@ -46,23 +55,29 @@ export function DashboardLayout({
           recentMessages={recentMessages}
           guildId={guildId}
           channelId={channelId}
+          notificationCount={notificationCount}
         />
         <main className="flex min-w-0 flex-1 flex-col">
           <Header
             activeTab={activeTab}
             wsStatus={wsStatus}
             voiceStatus={voiceStatus}
+            themeMode={themeMode}
+            isDark={isDark}
+            onThemeToggle={onThemeToggle}
           />
-          <motion.main
-            key={activeTab}
-            variants={fadeSlideUp}
-            initial="initial"
-            animate="animate"
-            exit="exit"
-            className="flex-1 overflow-auto p-4 md:p-6 lg:p-8"
-          >
-            {children}
-          </motion.main>
+          <AnimatePresence mode="wait">
+            <motion.main
+              key={activeTab}
+              variants={fadeSlideUp}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              className="flex-1 overflow-auto p-4 md:p-6 lg:p-8 pb-16 md:pb-0"
+            >
+              {children}
+            </motion.main>
+          </AnimatePresence>
         </main>
       </div>
     </div>
diff --git a/services/frontend/src/widgets/Header.tsx b/services/frontend/src/widgets/Header.tsx
index f6d4d73..384052d 100644
--- a/services/frontend/src/widgets/Header.tsx
+++ b/services/frontend/src/widgets/Header.tsx
@@ -1,7 +1,8 @@
 import { motion } from "framer-motion";
-import { Wifi, WifiOff } from "lucide-react";
+import { Moon, Sun, Wifi, WifiOff } from "lucide-react";
 import type { DashboardTab } from "../entities/ui/types.js";
 import type { VoiceStatus } from "../entities/voice/types.js";
+import type { ThemeMode } from "../hooks/useTheme";
 import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
 import { cn } from "../shared/lib/utils";
 import { Badge } from "../shared/ui";
@@ -11,18 +12,23 @@ const titles: Record<DashboardTab, string> = {
   messages: "Messages & Moderation",
   live: "Voice & Media",
   dashboard: "Dashboard",
+  settings: "Admin Settings",
 };
 
 const subtitles: Record<DashboardTab, string> = {
   messages: "Capture, analyse, and moderate Discord messages.",
   live: "Join voice channels, play media, stream audio, and browse recordings.",
   dashboard: "Server statistics, user profiles, and AI moderation overview.",
+  settings: "Manage dashboard visibility, runtime configuration, and authentication.",
 };
 
 interface HeaderProps {
   activeTab: DashboardTab;
   wsStatus: WsStatus;
   voiceStatus: VoiceStatus;
+  themeMode: ThemeMode;
+  isDark: boolean;
+  onThemeToggle: () => void;
 }
 
 /** Dot indicator colour for WS badge */
@@ -63,7 +69,7 @@ function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
   );
 }
 
-export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
+export function Header({ activeTab, wsStatus, voiceStatus, themeMode, isDark, onThemeToggle }: HeaderProps) {
   return (
     <header className="sticky top-0 z-10 border-b border-border/50 bg-background/70 px-4 py-4 backdrop-blur-sm md:px-8">
       <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
@@ -92,8 +98,22 @@ export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
           </p>
         </motion.div>
 
-        {/* Right: status badges */}
+        {/* Right: status badges + theme toggle */}
         <div className="flex flex-wrap items-center gap-2">
+          {/* Theme toggle */}
+          <button
+            onClick={onThemeToggle}
+            className="flex items-center gap-1.5 rounded-lg border border-border bg-card/50 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+            title={`Switch to ${isDark ? "light" : "dark"} mode`}
+          >
+            {isDark ? (
+              <Sun className="h-3.5 w-3.5 text-amber-400" />
+            ) : (
+              <Moon className="h-3.5 w-3.5 text-indigo-400" />
+            )}
+            <span className="hidden sm:inline">{isDark ? "Light" : "Dark"}</span>
+          </button>
+
           {/* WS Badge */}
           <Badge
             variant="outline"
diff --git a/services/frontend/src/widgets/Sidebar.tsx b/services/frontend/src/widgets/Sidebar.tsx
index 9c8bb10..4a44ded 100644
--- a/services/frontend/src/widgets/Sidebar.tsx
+++ b/services/frontend/src/widgets/Sidebar.tsx
@@ -1,5 +1,11 @@
 import { motion } from "framer-motion";
-import { LayoutDashboard, MessageSquare, Radio } from "lucide-react";
+import {
+  Bell,
+  LayoutDashboard,
+  MessageSquare,
+  Radio,
+  Settings,
+} from "lucide-react";
 import type { MessageRecord } from "../entities/message/types.js";
 import type { DashboardTab } from "../entities/ui/types.js";
 import { useMascotChat } from "../shared/hooks/useMascotChat";
@@ -7,12 +13,16 @@ import { cn } from "../shared/lib/utils";
 import { MascotChatbot } from "./mascot/MascotChatbot";
 import { MascotImage } from "./mascot/MascotImage";
 
-const navItems: Array<{ id: DashboardTab; label: string; icon: typeof Radio }> =
-  [
-    { id: "messages", label: "Messages & Moderation", icon: MessageSquare },
-    { id: "live", label: "Voice & Media", icon: Radio },
-    { id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
-  ];
+const navItems: Array<{
+  id: DashboardTab;
+  label: string;
+  icon: typeof Radio;
+}> = [
+  { id: "messages", label: "Messages & Moderation", icon: MessageSquare },
+  { id: "live", label: "Voice & Media", icon: Radio },
+  { id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { id: "settings" as const, label: "Admin", icon: Settings },
+];
 
 interface SidebarProps {
   activeTab: DashboardTab;
@@ -21,6 +31,7 @@ interface SidebarProps {
   recentMessages?: MessageRecord[];
   guildId?: string;
   channelId?: string;
+  notificationCount?: number;
 }
 
 export function Sidebar({
@@ -30,6 +41,7 @@ export function Sidebar({
   recentMessages = [],
   guildId,
   channelId,
+  notificationCount = 0,
 }: SidebarProps) {
   const mascotChat = useMascotChat({
     messageCount: recentMessages.length,
@@ -46,7 +58,7 @@ export function Sidebar({
       <motion.nav
         className={cn(
           "relative hidden shrink-0 flex-col overflow-visible border-r border-border/50 bg-background/70 backdrop-blur-sm transition-all duration-300 md:flex",
-          collapsed ? "w-16" : "w-64",
+          collapsed ? "w-16" : "w-56 lg:w-64",
         )}
         layout
         transition={{ type: "spring", stiffness: 300, damping: 30 }}
@@ -62,6 +74,10 @@ export function Sidebar({
             src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg"
             alt="IMPHNEN"
             className="h-8 w-8 rounded-xl"
+            onError={(e) => {
+              const target = e.currentTarget;
+              target.style.display = "none";
+            }}
           />
 
           {/* Mascot image — only when expanded */}
@@ -70,6 +86,10 @@ export function Sidebar({
               src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/apps/dimentorin/public/image/mascot-1.png"
               alt="Mascot"
               className="mt-4 h-auto w-[140px] object-contain drop-shadow-md"
+              onError={(e) => {
+                const target = e.currentTarget;
+                target.style.display = "none";
+              }}
             />
           )}
         </div>
@@ -95,6 +115,21 @@ export function Sidebar({
                 >
                   <Icon className="h-4 w-4 shrink-0" />
                   {!collapsed && <span>{item.label}</span>}
+                  {!collapsed && item.id === "messages" &&
+                    notificationCount !== undefined &&
+                    notificationCount > 0 && (
+                      <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground">
+                        {notificationCount > 99 ? "99+" : notificationCount}
+                      </span>
+                    )}
+                  {/* Collapsed badge — top-right dot */}
+                  {collapsed && item.id === "messages" &&
+                    notificationCount !== undefined &&
+                    notificationCount > 0 && (
+                      <span className="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-destructive text-[7px] font-bold text-destructive-foreground">
+                        {notificationCount > 9 ? "N" : notificationCount}
+                      </span>
+                    )}
                 </button>
               );
             })}
@@ -118,7 +153,7 @@ export function Sidebar({
         onClose={() => mascotChat.setIsOpen(false)}
         onSendMessage={mascotChat.handleSendMessage}
         mascotName="IMPHNEN Mascot"
-        className="fixed bottom-[170px] left-[80px] z-[9999]"
+        className="fixed bottom-[170px] left-[80px] z-[9999] md:bottom-4 md:left-4 md:right-auto"
       />
     </>
   );
diff --git a/services/frontend/src/widgets/mascot/MascotChatbot.tsx b/services/frontend/src/widgets/mascot/MascotChatbot.tsx
index 26c22ca..6fe1faa 100644
--- a/services/frontend/src/widgets/mascot/MascotChatbot.tsx
+++ b/services/frontend/src/widgets/mascot/MascotChatbot.tsx
@@ -117,14 +117,14 @@ export function MascotChatbot({
         )}
       >
         {/* Header */}
-        <div className="bg-gradient-to-r from-primary to-primary/80 text-white p-4 flex items-center justify-between">
+        <div className="bg-gradient-to-r from-primary to-primary/80 text-primary-foreground p-4 flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
+            <div className="w-8 h-8 rounded-full bg-primary-foreground/20 flex items-center justify-center">
               <MessageCircle className="h-5 w-5" />
             </div>
             <div>
               <h3 className="font-semibold text-sm">{mascotName}</h3>
-              <p className="text-xs text-white/80">
+              <p className="text-xs text-primary-foreground/80">
                 {loading ? "Mengetik..." : "Online"}
               </p>
             </div>
@@ -134,7 +134,7 @@ export function MascotChatbot({
               whileHover={{ scale: 1.1 }}
               whileTap={{ scale: 0.95 }}
               onClick={() => setIsMinimized(!isMinimized)}
-              className="p-1.5 hover:bg-white/20 rounded-lg transition-colors"
+              className="p-1.5 hover:bg-primary-foreground/20 rounded-lg transition-colors"
               title={isMinimized ? "Maximize" : "Minimize"}
             >
               {isMinimized ? (
@@ -149,7 +149,7 @@ export function MascotChatbot({
               onClick={() => {
                 onClose?.();
               }}
-              className="p-1.5 hover:bg-white/20 rounded-lg transition-colors"
+              className="p-1.5 hover:bg-primary-foreground/20 rounded-lg transition-colors"
               title="Close"
             >
               <X className="h-4 w-4" />
@@ -176,6 +176,10 @@ export function MascotChatbot({
                       src={mascotAvatar}
                       alt={mascotName}
                       className="w-6 h-6 rounded-full object-cover"
+                      onError={(e) => {
+                        const target = e.currentTarget;
+                        target.style.display = "none";
+                      }}
                     />
                   )}
                   <div
@@ -200,6 +204,10 @@ export function MascotChatbot({
                     src={mascotAvatar}
                     alt={mascotName}
                     className="w-6 h-6 rounded-full object-cover"
+                    onError={(e) => {
+                      const target = e.currentTarget;
+                      target.style.display = "none";
+                    }}
                   />
                   <div className="bg-muted rounded-xl rounded-bl-none px-3 py-2">
                     <div className="flex gap-1">
diff --git a/services/frontend/src/widgets/mascot/MascotImage.tsx b/services/frontend/src/widgets/mascot/MascotImage.tsx
index af53a3a..2f1eed4 100644
--- a/services/frontend/src/widgets/mascot/MascotImage.tsx
+++ b/services/frontend/src/widgets/mascot/MascotImage.tsx
@@ -38,6 +38,7 @@ export function MascotImage({
   const sizeClass = sizeMap[size];
   const chatSizeClass = chatSizeMap[size];
   const [isVisible, setIsVisible] = useState(false);
+  const [imgError, setImgError] = useState(false);
 
   useEffect(() => {
     if (showChat && chatMessage) {
@@ -51,13 +52,20 @@ export function MascotImage({
 
   return (
     <div className="relative inline-block">
-      <motion.img
-        src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/apps/dimentorin/public/image/mascot-1.png"
-        alt="Mascot"
-        className={`object-contain drop-shadow-md ${sizeClass} ${className}`}
-        whileHover={{ scale: 1.05 }}
-        transition={{ type: "spring", stiffness: 300, damping: 30 }}
-      />
+      {imgError ? (
+        <div className={`flex items-center justify-center ${sizeClass} bg-muted/30 rounded-xl`}>
+          <MessageCircle className="h-6 w-6 text-muted-foreground/50" />
+        </div>
+      ) : (
+        <motion.img
+          src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/apps/dimentorin/public/image/mascot-1.png"
+          alt="Mascot"
+          className={`object-contain drop-shadow-md ${sizeClass} ${className}`}
+          whileHover={{ scale: 1.05 }}
+          transition={{ type: "spring", stiffness: 300, damping: 30 }}
+          onError={() => setImgError(true)}
+        />
+      )}
 
       {/* Floating Chat Bubble */}
       {isVisible && chatMessage && (
@@ -72,7 +80,7 @@ export function MascotImage({
             {/* Chat bubble */}
             <div className="bg-primary/90 text-primary-foreground rounded-xl px-4 py-2.5 shadow-lg backdrop-blur-sm border border-primary/30">
               <div className="flex items-start gap-2">
-                <MessageCircle className="h-4 w-4 shrink-0 mt-0.5 text-white/80" />
+                <MessageCircle className="h-4 w-4 shrink-0 mt-0.5 text-primary-foreground/80" />
                 <p className="text-xs leading-relaxed font-medium line-clamp-3">
                   {chatMessage}
                 </p>
diff --git a/services/frontend/src/widgets/particles/ParticleBackground.tsx b/services/frontend/src/widgets/particles/ParticleBackground.tsx
index c6743c0..21f6638 100644
--- a/services/frontend/src/widgets/particles/ParticleBackground.tsx
+++ b/services/frontend/src/widgets/particles/ParticleBackground.tsx
@@ -20,11 +20,16 @@ export function ParticleBackground() {
       style={{ zIndex: -1 }}
     >
       {/* Top-right glow orb */}
-      <div className="absolute -top-40 -right-40 h-[500px] w-[500px] rounded-full bg-primary/10 blur-3xl animate-glow-pulse" />
+      <div className="absolute -top-40 -right-40 h-[500px] w-[500px] rounded-full blur-3xl animate-glow-pulse"
+        style={{ backgroundColor: "oklch(var(--particle-primary, 0.623 0.214 259.815 / 0.1))" }}
+      />
       {/* Bottom-left glow orb */}
       <div
-        className="absolute -bottom-40 -left-40 h-[400px] w-[400px] rounded-full bg-blue-400/10 blur-3xl animate-glow-pulse"
-        style={{ animationDelay: "1.5s" }}
+        className="absolute -bottom-40 -left-40 h-[400px] w-[400px] rounded-full blur-3xl animate-glow-pulse"
+        style={{
+          backgroundColor: "oklch(var(--particle-secondary, 0.552 0.016 285.938 / 0.1))",
+          animationDelay: "1.5s",
+        }}
       />
     </div>
   );
diff --git a/services/frontend/tailwind.config.js b/services/frontend/tailwind.config.js
index 44977b3..1785d4a 100644
--- a/services/frontend/tailwind.config.js
+++ b/services/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: "class",
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
     extend: {
diff --git a/services/frontend/tsconfig.json b/services/frontend/tsconfig.json
index deefd85..9cd8dd5 100644
--- a/services/frontend/tsconfig.json
+++ b/services/frontend/tsconfig.json
@@ -6,11 +6,15 @@
     "strict": true,
     "jsx": "react-jsx",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"],
+    "types": ["astro/client"],
     "noEmit": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
   },
-  "include": ["src/**/*", "vite.config.ts"]
+  "include": ["src/**/*", "astro.config.mjs"]
 }
diff --git a/services/frontend/vite.config.ts b/services/frontend/vite.config.ts
deleted file mode 100644
index 0699450..0000000
--- a/services/frontend/vite.config.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    rolldownOptions: {
-      checks: {
-        pluginTimings: false,
-      },
-    },
-  },
-  server: {
-    middlewareMode: false,
-  },
-  preview: {
-    port: 3000,
-    host: true,
-    allowedHosts: [
-      "imphnen.asepharyana.my.id",
-      "imphnen.asepharyana.tech",
-      "imphnen.asepharyana.web.id",
-    ],
-  },
-});