From 25dbd8413bf090fbaf76f9d2944035f4872b0777 Mon Sep 17 00:00:00 2001
From: MythEclipse <asepharyanalm001@gmail.com>
Date: Wed, 13 May 2026 22:13:03 +0700
Subject: [PATCH] feat: implement WebCodecs Opus decode for browser listen

- Add broadcastOpusToWeb to PcmBroadcaster interface for raw Opus packets
- Server broadcasts Opus frames with mode byte (1) + user hash + packet data
- Browser detects packet mode: mode=1 for Opus, mode=0 for legacy PCM
- Implement WebCodecs AudioDecoder for Opus decoding in browser
- Keep existing PCM playback as fallback for compatibility
- Show error if WebCodecs unsupported
- Fixes listen feature under Bun where native Opus decode unavailable
---
 bun.lockb                                     | Bin 159658 -> 161508 bytes
 .../plans/2026-05-13-react-ssr-dashboard.md   |  60 ++
 package.json                                  |   4 +
 public/dashboard.css                          | 417 ++++++++
 public/dashboard.js                           | 555 ++++++++++
 public/index.html                             | 958 +-----------------
 src/recorder.ts                               |   1 +
 src/types.ts                                  |   1 +
 src/web/dashboardPage.tsx                     | 217 ++++
 src/webserver.ts                              |  50 +
 tsconfig.json                                 |   3 +-
 11 files changed, 1308 insertions(+), 958 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-05-13-react-ssr-dashboard.md
 create mode 100644 public/dashboard.css
 create mode 100644 public/dashboard.js
 create mode 100644 src/web/dashboardPage.tsx

diff --git a/bun.lockb b/bun.lockb
index 04ee2b725d496918e61b9a331fdf2a7c6072247e..aece00d4b517fb744f20fca1db36c5c7e0ed49f2 100755
GIT binary patch
delta 29463
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%0A$!7=m*3DeStne
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

delta 28201
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

diff --git a/docs/superpowers/plans/2026-05-13-react-ssr-dashboard.md b/docs/superpowers/plans/2026-05-13-react-ssr-dashboard.md
new file mode 100644
index 0000000..0a5bda3
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-13-react-ssr-dashboard.md
@@ -0,0 +1,60 @@
+# React SSR Dashboard Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace static client-rendered homepage with React server-side rendering while keeping live WebSocket/voice behavior as progressive enhancement.
+
+**Architecture:** Express `GET /` builds dashboard data, renders React component to HTML with `react-dom/server`, injects bootstrap JSON for client script. CSS/JS move to static assets; React owns initial markup only, lightweight browser JS handles tab switching, voice bridge, WebSocket updates, and async thread discovery.
+
+**Tech Stack:** React, ReactDOM server, Bun, Express, TypeScript, vanilla browser JS for progressive enhancement.
+
+---
+
+### Task 1: Add React dependencies
+
+**Files:**
+- Modify: `package.json`
+- Modify: `bun.lockb`
+
+- [ ] Run `bun add react react-dom`.
+- [ ] Run `bun add -d @types/react @types/react-dom`.
+- [ ] Verify `bun run typecheck`.
+
+### Task 2: Extract dashboard assets
+
+**Files:**
+- Create: `public/dashboard.css`
+- Create: `public/dashboard.js`
+- Modify: `public/index.html`
+
+- [ ] Move current `<style>` content to `dashboard.css`.
+- [ ] Move current `<script>` content to `dashboard.js`.
+- [ ] Keep client behavior independent from static HTML.
+
+### Task 3: Create React SSR renderer
+
+**Files:**
+- Create: `src/web/dashboardPage.tsx`
+
+- [ ] Create `DashboardPage` React component accepting: guilds, voiceChannels, watchChannels, selectedChannel, messages, status.
+- [ ] Render same Voice/Text layout as current homepage.
+- [ ] Render message cards server-side from DB metadata.
+- [ ] Export `renderDashboardPage(props)` returning full HTML with CSS/JS links and bootstrap JSON.
+
+### Task 4: Wire Express SSR route
+
+**Files:**
+- Modify: `src/webserver.ts`
+
+- [ ] Add `GET /` before static middleware fallback or before static index handling.
+- [ ] Build props from `voiceController` and `getMessagesByChannel`.
+- [ ] Respect query `?guild=<id>&channel=<id>`.
+- [ ] Render HTML with `renderDashboardPage`.
+
+### Task 5: Verify
+
+**Files:** all touched files
+
+- [ ] Run `bun run typecheck`.
+- [ ] Run `bun run test`.
+- [ ] Run short SSR import smoke if possible.
diff --git a/package.json b/package.json
index eedd919..7ee5804 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,8 @@
     "pino-http": "^11.0.0",
     "prism-media": "2.0.0-alpha.0",
     "prom-client": "^15.1.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "sodium-native": "^4.3.2",
     "ws": "^8.20.1",
     "zod": "^4.4.3"
@@ -39,6 +41,8 @@
     "@types/better-sqlite3": "^7.6.13",
     "@types/express": "^5.0.6",
     "@types/fluent-ffmpeg": "^2.1.28",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/ws": "^8.18.1",
     "bun-types": "latest",
     "pino-pretty": "^10.3.1",
diff --git a/public/dashboard.css b/public/dashboard.css
new file mode 100644
index 0000000..d0e5c52
--- /dev/null
+++ b/public/dashboard.css
@@ -0,0 +1,417 @@
+:root {
+      --bg: #080a0f;
+      --panel: rgba(18, 22, 32, 0.86);
+      --panel-strong: #121720;
+      --line: rgba(255, 255, 255, 0.12);
+      --text: #edf4ff;
+      --muted: #91a0b6;
+      --faint: #536176;
+      --cyan: #00e5ff;
+      --green: #39ff88;
+      --yellow: #ffe45e;
+      --red: #ff4f6d;
+      --blue: #6275ff;
+      --shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--text);
+      font-family: Manrope, sans-serif;
+      background:
+        radial-gradient(circle at 12% 8%, rgba(0, 229, 255, 0.18), transparent 32rem),
+        radial-gradient(circle at 88% 0%, rgba(98, 117, 255, 0.2), transparent 28rem),
+        linear-gradient(145deg, #05060a, var(--bg));
+      overflow-x: hidden;
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background-image:
+        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
+      background-size: 42px 42px;
+      mask-image: linear-gradient(to bottom, black, transparent 84%);
+    }
+
+    button, select { font: inherit; }
+
+    .shell {
+      width: min(1440px, calc(100% - 32px));
+      margin: 0 auto;
+      padding: 28px 0 44px;
+    }
+
+    .hero {
+      display: grid;
+      grid-template-columns: 1.2fr 0.8fr;
+      gap: 18px;
+      align-items: stretch;
+      margin-bottom: 18px;
+    }
+
+    .brand-card,
+    .status-card,
+    .tab-panel,
+    .content-card {
+      border: 1px solid var(--line);
+      background: var(--panel);
+      backdrop-filter: blur(18px);
+      box-shadow: var(--shadow);
+    }
+
+    .brand-card {
+      position: relative;
+      padding: 28px;
+      border-radius: 28px;
+      overflow: hidden;
+      min-height: 190px;
+    }
+
+    .brand-card::after {
+      content: "WATCHER";
+      position: absolute;
+      right: -14px;
+      bottom: -20px;
+      font-family: "Archivo Black", sans-serif;
+      font-size: clamp(58px, 9vw, 132px);
+      letter-spacing: -0.08em;
+      color: rgba(255,255,255,0.035);
+      line-height: 0.78;
+    }
+
+    .eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 18px;
+      color: var(--cyan);
+      font: 700 12px/1 "JetBrains Mono", monospace;
+      text-transform: uppercase;
+      letter-spacing: 0.18em;
+    }
+
+    .pulse {
+      width: 9px;
+      height: 9px;
+      border-radius: 999px;
+      background: var(--green);
+      box-shadow: 0 0 20px var(--green);
+    }
+
+    h1 {
+      margin: 0;
+      max-width: 840px;
+      font-family: "Archivo Black", sans-serif;
+      font-size: clamp(40px, 6vw, 82px);
+      line-height: 0.88;
+      letter-spacing: -0.06em;
+      text-transform: uppercase;
+    }
+
+    .subtitle {
+      margin: 18px 0 0;
+      max-width: 720px;
+      color: var(--muted);
+      font-size: 15px;
+      line-height: 1.7;
+    }
+
+    .status-card {
+      border-radius: 28px;
+      padding: 24px;
+      display: grid;
+      gap: 14px;
+    }
+
+    .status-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 14px 0;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .status-row:last-child { border-bottom: 0; }
+
+    .status-label {
+      color: var(--muted);
+      font: 700 12px/1 "JetBrains Mono", monospace;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+    }
+
+    .status-value {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text);
+      font: 700 13px/1 "JetBrains Mono", monospace;
+    }
+
+    .dot {
+      width: 9px;
+      height: 9px;
+      border-radius: 99px;
+      background: var(--faint);
+    }
+
+    .dot.on { background: var(--green); box-shadow: 0 0 16px var(--green); }
+    .dot.warn { background: var(--yellow); box-shadow: 0 0 16px var(--yellow); }
+
+    .tab-panel {
+      position: sticky;
+      top: 14px;
+      z-index: 5;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 12px;
+      border-radius: 24px;
+      margin-bottom: 18px;
+    }
+
+    .tabs {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .tab-btn {
+      border: 1px solid transparent;
+      color: var(--muted);
+      background: transparent;
+      border-radius: 16px;
+      padding: 12px 16px;
+      cursor: pointer;
+      font-weight: 800;
+      transition: 160ms ease;
+    }
+
+    .tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
+    .tab-btn.active {
+      color: #061014;
+      background: linear-gradient(135deg, var(--cyan), var(--green));
+      box-shadow: 0 12px 28px rgba(0,229,255,0.18);
+    }
+
+    .filter-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    select {
+      min-width: 240px;
+      color: var(--text);
+      background: rgba(5,8,14,0.78);
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      padding: 11px 14px;
+      outline: none;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 18px;
+    }
+
+    .tab-content { display: none; }
+    .tab-content.active { display: block; }
+
+    .voice-layout {
+      display: grid;
+      grid-template-columns: 380px 1fr;
+      gap: 18px;
+    }
+
+    .content-card {
+      border-radius: 28px;
+      padding: 22px;
+    }
+
+    .card-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 18px;
+    }
+
+    .card-title h2 {
+      margin: 0;
+      font-family: "Archivo Black", sans-serif;
+      font-size: 26px;
+      letter-spacing: -0.04em;
+      text-transform: uppercase;
+    }
+
+    .mini {
+      color: var(--faint);
+      font: 700 11px/1 "JetBrains Mono", monospace;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+    }
+
+    .field-group { display: grid; gap: 8px; margin-bottom: 14px; }
+    .field-group label { color: var(--muted); font-size: 13px; font-weight: 800; }
+
+    .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+
+    .btn {
+      border: 0;
+      border-radius: 16px;
+      padding: 13px 16px;
+      color: #061014;
+      cursor: pointer;
+      font-weight: 900;
+      transition: transform 140ms ease, filter 140ms ease;
+    }
+
+    .btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
+    .btn-primary { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: white; }
+    .btn-success { background: linear-gradient(135deg, var(--green), var(--cyan)); }
+    .btn-danger { background: linear-gradient(135deg, var(--red), #ff9a6b); color: white; }
+
+    .voice-status { color: var(--muted); font-size: 13px; margin-top: 12px; min-height: 20px; }
+
+    .visualizer {
+      display: flex;
+      align-items: flex-end;
+      gap: 5px;
+      height: 130px;
+      padding: 16px;
+      border: 1px solid var(--line);
+      border-radius: 20px;
+      background: rgba(0,0,0,0.22);
+      overflow: hidden;
+    }
+
+    .bar {
+      flex: 1;
+      min-width: 5px;
+      border-radius: 999px;
+      height: 3px;
+      background: linear-gradient(to top, var(--blue), var(--cyan), var(--green));
+      box-shadow: 0 0 18px rgba(0,229,255,0.16);
+    }
+
+    .participants {
+      display: grid;
+      gap: 10px;
+    }
+
+    .user-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      border: 1px solid var(--line);
+      border-radius: 18px;
+      background: rgba(255,255,255,0.035);
+    }
+
+    .user-item.speaking { border-color: rgba(57,255,136,0.55); background: rgba(57,255,136,0.08); }
+    .user-item img { width: 34px; height: 34px; border-radius: 999px; }
+
+    .feed {
+      display: grid;
+      gap: 12px;
+    }
+
+    .event-card {
+      display: grid;
+      gap: 10px;
+      padding: 16px;
+      border: 1px solid var(--line);
+      border-radius: 20px;
+      background: rgba(255,255,255,0.035);
+    }
+
+    .event-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
+    .author {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+    }
+
+    .avatar {
+      width: 34px;
+      height: 34px;
+      border-radius: 999px;
+      background: linear-gradient(135deg, var(--blue), var(--cyan));
+      flex: 0 0 auto;
+    }
+
+    .avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+
+    .name { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .time { color: var(--faint); font: 600 11px/1 "JetBrains Mono", monospace; white-space: nowrap; }
+    .message-text { color: #dbe6f7; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
+
+    .sticker-strip, .attachment-strip { display: flex; gap: 10px; flex-wrap: wrap; }
+    .sticker-img { width: 96px; height: 96px; object-fit: contain; border-radius: 16px; background: rgba(0,0,0,0.22); border: 1px solid var(--line); padding: 8px; }
+    .attachment-chip { color: var(--cyan); text-decoration: none; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; font: 700 12px/1 "JetBrains Mono", monospace; background: rgba(0,229,255,0.06); }
+    .embed-card { border-left: 4px solid var(--blue); border-radius: 16px; padding: 12px; background: rgba(98,117,255,0.08); display: grid; gap: 8px; }
+    .embed-title { font-weight: 900; color: var(--text); }
+    .embed-description { color: var(--muted); line-height: 1.5; white-space: pre-wrap; }
+    .embed-image { max-width: 360px; width: 100%; border-radius: 14px; border: 1px solid var(--line); }
+
+    .badges { display: flex; gap: 8px; flex-wrap: wrap; }
+    .badge {
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      padding: 5px 9px;
+      color: var(--muted);
+      font: 700 10px/1 "JetBrains Mono", monospace;
+      text-transform: uppercase;
+    }
+    .badge.edit { color: var(--yellow); border-color: rgba(255,228,94,0.36); }
+    .badge.delete { color: var(--red); border-color: rgba(255,79,109,0.42); }
+
+    .filename { font-size: 13px; font-weight: 900; word-break: break-word; }
+    .link { color: var(--cyan); text-decoration: none; font-weight: 900; }
+    .link:hover { text-decoration: underline; }
+
+    .empty {
+      padding: 34px;
+      text-align: center;
+      color: var(--faint);
+      border: 1px dashed var(--line);
+      border-radius: 22px;
+    }
+
+    .error {
+      display: none;
+      margin-bottom: 14px;
+      padding: 12px 14px;
+      color: #ffd8df;
+      border: 1px solid rgba(255,79,109,0.5);
+      border-radius: 16px;
+      background: rgba(255,79,109,0.12);
+    }
+
+    @media (max-width: 980px) {
+      .hero, .voice-layout { grid-template-columns: 1fr; }
+      .tab-panel { align-items: stretch; flex-direction: column; }
+      .filter-row { align-items: stretch; flex-direction: column; }
+      select { width: 100%; min-width: 0; }
+    }
diff --git a/public/dashboard.js b/public/dashboard.js
new file mode 100644
index 0000000..2d6091d
--- /dev/null
+++ b/public/dashboard.js
@@ -0,0 +1,555 @@
+const bootstrapData = JSON.parse(document.getElementById('__DASHBOARD_DATA__')?.textContent || '{}');
+const state = {
+      socket: null,
+      activeTab: 'voice',
+      selectedChannel: bootstrapData.selectedChannelId || '',
+      text: bootstrapData.messages || [],
+      isStreaming: false,
+      isListening: false,
+      audioContextTransmit: null,
+      audioContextListen: null,
+      processor: null,
+      nextStartTime: 0,
+      noiseGateHold: 0,
+      opusDecoder: null,
+      opusDecoderReady: false,
+      opusDecodeQueue: [],
+    };
+
+    const SAMPLE_RATE = 24000;
+    const NOISE_GATE_THRESHOLD = 0.01;
+    const NOISE_GATE_HOLD_FRAMES = 3;
+
+    const el = {
+      wsDot: document.getElementById('wsDot'),
+      wsStatusText: document.getElementById('wsStatusText'),
+      activeTabLabel: document.getElementById('activeTabLabel'),
+      errorBox: document.getElementById('errorBox'),
+      guildSelect: document.getElementById('guildSelect'),
+      channelSelect: document.getElementById('channelSelect'),
+      channelFilter: document.getElementById('channelFilter'),
+      joinVoiceBtn: document.getElementById('joinVoiceBtn'),
+      disconnectVoiceBtn: document.getElementById('disconnectVoiceBtn'),
+      voiceStatusText: document.getElementById('voiceStatusText'),
+      voiceStatusNote: document.getElementById('voiceStatusNote'),
+      toggleBtn: document.getElementById('toggleBtn'),
+      listenBtn: document.getElementById('listenBtn'),
+      listenStatus: document.getElementById('listenStatus'),
+      visualizer: document.getElementById('visualizer'),
+      userList: document.getElementById('userList'),
+      textList: document.getElementById('textList'),
+    };
+
+    for (let i = 0; i < 32; i++) {
+      const bar = document.createElement('div');
+      bar.className = 'bar';
+      el.visualizer.appendChild(bar);
+    }
+    const bars = [...document.querySelectorAll('.bar')];
+
+    async function apiRequest(url, options = {}) {
+      const response = await fetch(url, {
+        headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
+        ...options,
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ message: response.statusText }));
+        throw new Error(error.message || response.statusText);
+      }
+      return response.json();
+    }
+
+    function showError(message) {
+      el.errorBox.textContent = message;
+      el.errorBox.style.display = 'block';
+      setTimeout(() => { el.errorBox.style.display = 'none'; }, 4500);
+    }
+
+    function renderOptions(select, items, placeholder) {
+      select.replaceChildren();
+      const first = document.createElement('option');
+      first.value = '';
+      first.textContent = placeholder;
+      select.appendChild(first);
+      for (const item of items) {
+        const option = document.createElement('option');
+        option.value = item.id;
+        option.textContent = item.name;
+        select.appendChild(option);
+      }
+    }
+
+    async function loadGuilds() {
+      const guilds = bootstrapData.guilds || await apiRequest('/api/guilds');
+      renderOptions(el.guildSelect, guilds, 'Select guild');
+      const guildId = bootstrapData.selectedGuildId || guilds[0]?.id || '';
+      if (guildId) {
+        el.guildSelect.value = guildId;
+        await loadChannels(guildId);
+      }
+    }
+
+    async function loadChannels(guildId) {
+      const useBootstrap = guildId === bootstrapData.selectedGuildId;
+      const [voiceChannels, watchChannels] = await Promise.all([
+        useBootstrap && bootstrapData.voiceChannels ? bootstrapData.voiceChannels : apiRequest(`/api/guilds/${guildId}/voice-channels`),
+        useBootstrap && bootstrapData.watchChannels ? bootstrapData.watchChannels : apiRequest(`/api/guilds/${guildId}/channels`),
+      ]);
+      renderOptions(el.channelSelect, voiceChannels, 'Select voice channel');
+      renderOptions(el.channelFilter, watchChannels, 'Select channel');
+      el.channelFilter.value = state.selectedChannel;
+      apiRequest(`/api/guilds/${guildId}/threads`)
+        .then((threads) => appendOptions(el.channelFilter, threads))
+        .catch((error) => showError(`Thread discovery failed: ${error.message}`));
+    }
+
+    function appendOptions(select, items) {
+      const existing = new Set([...select.options].map((option) => option.value));
+      for (const item of items) {
+        if (existing.has(item.id)) continue;
+        const option = document.createElement('option');
+        option.value = item.id;
+        option.textContent = item.name;
+        select.appendChild(option);
+      }
+    }
+
+    async function refreshStatus() {
+      try {
+        const status = await apiRequest('/api/status');
+        el.voiceStatusText.textContent = status.connected ? status.activeChannelName || 'Connected' : 'Not connected';
+        el.voiceStatusNote.textContent = status.connected ? `Connected to ${status.activeChannelName}` : 'Idle';
+      } catch (error) {
+        showError(error.message);
+      }
+    }
+
+    async function connectVoice() {
+      const guildId = el.guildSelect.value;
+      const channelId = el.channelSelect.value;
+      if (!guildId || !channelId) return showError('Select guild and voice channel first');
+      const status = await apiRequest('/api/connect', { method: 'POST', body: JSON.stringify({ guildId, channelId }) });
+      el.voiceStatusText.textContent = status.activeChannelName || 'Connected';
+      el.voiceStatusNote.textContent = `Connected to ${status.activeChannelName}`;
+    }
+
+    async function disconnectVoice() {
+      await apiRequest('/api/disconnect', { method: 'POST' });
+      await refreshStatus();
+    }
+
+    function connectWebSocket() {
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      state.socket = new WebSocket(`${protocol}//${window.location.host}/ws`);
+      state.socket.binaryType = 'arraybuffer';
+
+      state.socket.onopen = () => {
+        el.wsDot.classList.add('on');
+        el.wsStatusText.textContent = 'Connected';
+      };
+
+      state.socket.onclose = () => {
+        el.wsDot.classList.remove('on');
+        el.wsStatusText.textContent = 'Reconnecting';
+        setTimeout(connectWebSocket, 2500);
+      };
+
+      state.socket.onerror = () => {
+        el.wsDot.classList.remove('on');
+        el.wsDot.classList.add('warn');
+        el.wsStatusText.textContent = 'Socket error';
+      };
+
+      state.socket.onmessage = (event) => {
+        if (typeof event.data === 'string') {
+          handleJsonEvent(event.data);
+          return;
+        }
+        if (!state.isListening) return;
+        const bytes = new Uint8Array(event.data);
+        if (bytes.byteLength < 5) {
+          playPcm(event.data);
+          return;
+        }
+        const mode = bytes[0];
+        if (mode === 1) {
+          const opusData = bytes.slice(5);
+          decodeOpus(opusData);
+        } else {
+          playPcm(event.data);
+        }
+      };
+    }
+
+    function handleJsonEvent(raw) {
+      const message = JSON.parse(raw);
+      if (message.type === 'user_state') return renderUsers(message.users || []);
+      if (message.type === 'message_created') {
+        state.text.unshift(message.data);
+        renderText();
+      }
+      if (message.type === 'message_updated') {
+        const item = state.text.find((entry) => entry.id === message.data.id);
+        if (item) Object.assign(item, { edited_content: message.data.edited_content, edited_at: message.data.edited_at, type: 'edited' });
+        renderText();
+      }
+      if (message.type === 'message_deleted') {
+        const item = state.text.find((entry) => entry.id === message.data.id);
+        if (item) Object.assign(item, { deleted_at: message.data.deleted_at, type: 'deleted' });
+        renderText();
+      }
+      if (message.type === 'attachment_uploaded') fetchText();
+    }
+
+    function renderUsers(users) {
+      el.userList.replaceChildren();
+      if (users.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'empty';
+        empty.textContent = 'No active speakers';
+        el.userList.appendChild(empty);
+        return;
+      }
+      for (const user of users) {
+        const row = document.createElement('div');
+        row.className = `user-item${user.speaking ? ' speaking' : ''}`;
+        const img = document.createElement('img');
+        img.src = user.avatar || '';
+        img.alt = '';
+        const name = document.createElement('span');
+        name.textContent = user.username;
+        row.append(img, name);
+        el.userList.appendChild(row);
+      }
+    }
+
+    async function fetchText() {
+      if (!state.selectedChannel) return renderText();
+      const result = await apiRequest(`/api/messages?channel=${encodeURIComponent(state.selectedChannel)}&type=text&limit=80`);
+      state.text = result.data || [];
+      renderText();
+    }
+
+    function parseMetadata(value) {
+      if (!value) return {};
+      try { return JSON.parse(value); } catch { return {}; }
+    }
+
+    function renderText() {
+      el.textList.replaceChildren();
+      if (!state.selectedChannel) return appendEmpty(el.textList, 'Select channel to view text captures');
+      if (state.text.length === 0) return appendEmpty(el.textList, 'No text captures yet');
+      for (const msg of state.text) {
+        const metadata = parseMetadata(msg.metadata);
+        const card = document.createElement('article');
+        card.className = 'event-card';
+        const head = document.createElement('div');
+        head.className = 'event-head';
+        const author = document.createElement('div');
+        author.className = 'author';
+        const avatar = document.createElement('div');
+        avatar.className = 'avatar';
+        if (msg.avatar_url) {
+          const img = document.createElement('img');
+          img.src = msg.avatar_url;
+          img.alt = '';
+          avatar.appendChild(img);
+        }
+        const name = document.createElement('div');
+        name.className = 'name';
+        name.textContent = msg.username || msg.user_id;
+        author.append(avatar, name);
+        const time = document.createElement('div');
+        time.className = 'time';
+        time.textContent = new Date(msg.created_at).toLocaleString();
+        head.append(author, time);
+        const text = document.createElement('div');
+        text.className = 'message-text';
+        text.textContent = msg.edited_content || msg.content || '(empty message)';
+        const stickers = renderStickers(metadata.stickers || []);
+        const embeds = renderEmbeds(metadata.embeds || []);
+        const attachments = renderAttachments(metadata.attachments || []);
+        const badges = document.createElement('div');
+        badges.className = 'badges';
+        if (metadata.reference?.messageId) appendBadge(badges, 'reply', '');
+        if (msg.thread_id) appendBadge(badges, metadata.channel?.threadName ? `thread: ${metadata.channel.threadName}` : 'thread', '');
+        if (msg.edited_at) appendBadge(badges, 'edited', 'edit');
+        if (msg.deleted_at) appendBadge(badges, 'deleted', 'delete');
+        card.append(head, text);
+        if (stickers.childElementCount > 0) card.appendChild(stickers);
+        if (embeds.childElementCount > 0) card.appendChild(embeds);
+        if (attachments.childElementCount > 0) card.appendChild(attachments);
+        card.appendChild(badges);
+        el.textList.appendChild(card);
+      }
+    }
+
+    function renderStickers(stickers) {
+      const wrap = document.createElement('div');
+      wrap.className = 'sticker-strip';
+      for (const sticker of stickers) {
+        const img = document.createElement('img');
+        img.className = 'sticker-img';
+        img.src = sticker.url;
+        img.alt = sticker.name;
+        wrap.appendChild(img);
+      }
+      return wrap;
+    }
+
+    function renderEmbeds(embeds) {
+      const wrap = document.createElement('div');
+      wrap.className = 'feed';
+      for (const embed of embeds) {
+        const card = document.createElement('div');
+        card.className = 'embed-card';
+        if (embed.title) {
+          const title = document.createElement(embed.url ? 'a' : 'div');
+          title.className = 'embed-title';
+          title.textContent = embed.title;
+          if (embed.url) {
+            title.href = embed.url;
+            title.target = '_blank';
+            title.rel = 'noreferrer';
+          }
+          card.appendChild(title);
+        }
+        if (embed.description) {
+          const desc = document.createElement('div');
+          desc.className = 'embed-description';
+          desc.textContent = embed.description;
+          card.appendChild(desc);
+        }
+        for (const field of embed.fields || []) {
+          const fieldNode = document.createElement('div');
+          fieldNode.className = 'embed-description';
+          fieldNode.textContent = `${field.name}: ${field.value}`;
+          card.appendChild(fieldNode);
+        }
+        if (embed.image || embed.thumbnail) {
+          const img = document.createElement('img');
+          img.className = 'embed-image';
+          img.src = embed.image || embed.thumbnail;
+          img.alt = embed.title || 'embed image';
+          card.appendChild(img);
+        }
+        wrap.appendChild(card);
+      }
+      return wrap;
+    }
+
+    function renderAttachments(attachments) {
+      const wrap = document.createElement('div');
+      wrap.className = 'attachment-strip';
+      for (const attachment of attachments) {
+        const link = document.createElement('a');
+        link.className = 'attachment-chip';
+        link.href = attachment.url;
+        link.target = '_blank';
+        link.rel = 'noreferrer';
+        link.textContent = `${attachment.name} (${(attachment.size / 1024).toFixed(1)}KB)`;
+        wrap.appendChild(link);
+      }
+      return wrap;
+    }
+
+    function appendBadge(parent, label, className) {
+      const badge = document.createElement('span');
+      badge.className = `badge ${className}`;
+      badge.textContent = label;
+      parent.appendChild(badge);
+    }
+
+    function appendEmpty(parent, message) {
+      const empty = document.createElement('div');
+      empty.className = 'empty';
+      empty.textContent = message;
+      parent.appendChild(empty);
+    }
+
+    async function startStreaming() {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        state.audioContextTransmit = new AudioContext({ sampleRate: SAMPLE_RATE });
+        const source = state.audioContextTransmit.createMediaStreamSource(stream);
+        state.processor = state.audioContextTransmit.createScriptProcessor(2048, 1, 1);
+        source.connect(state.processor);
+        state.processor.connect(state.audioContextTransmit.destination);
+        state.processor.onaudioprocess = (event) => {
+          if (!state.isStreaming || state.socket?.readyState !== WebSocket.OPEN) return;
+          const input = event.inputBuffer.getChannelData(0);
+          let sum = 0;
+          for (let i = 0; i < input.length; i++) sum += input[i] * input[i];
+          const rms = Math.sqrt(sum / input.length);
+          if (rms < NOISE_GATE_THRESHOLD && state.noiseGateHold <= 0) return;
+          state.noiseGateHold = rms >= NOISE_GATE_THRESHOLD ? NOISE_GATE_HOLD_FRAMES : state.noiseGateHold - 1;
+          const pcm = new Int16Array(input.length);
+          for (let i = 0; i < input.length; i++) pcm[i] = Math.max(-1, Math.min(1, input[i])) * 32767;
+          state.socket.send(pcm.buffer);
+          updateVisualizer(rms);
+        };
+        state.isStreaming = true;
+        el.toggleBtn.textContent = 'Stop Transmitting';
+      } catch (error) {
+        showError(`Microphone error: ${error.message}`);
+      }
+    }
+
+    function stopStreaming() {
+      state.isStreaming = false;
+      state.processor?.disconnect();
+      state.audioContextTransmit?.close();
+      state.processor = null;
+      state.audioContextTransmit = null;
+      el.toggleBtn.textContent = 'Start Transmitting';
+      updateVisualizer(0);
+    }
+
+    function toggleListen() {
+      state.isListening = !state.isListening;
+      if (state.isListening) {
+        state.audioContextListen = new AudioContext({ sampleRate: 24000 });
+        state.nextStartTime = state.audioContextListen.currentTime;
+        initOpusDecoder();
+        el.listenBtn.textContent = 'Leave Listen Channel';
+        el.listenStatus.textContent = 'speaker on';
+      } else {
+        state.audioContextListen?.close();
+        state.audioContextListen = null;
+        state.opusDecoder = null;
+        state.opusDecoderReady = false;
+        state.opusDecodeQueue = [];
+        el.listenBtn.textContent = 'Join Listen Channel';
+        el.listenStatus.textContent = 'speaker off';
+      }
+    }
+
+    async function initOpusDecoder() {
+      if (!window.AudioDecoder) {
+        showError('WebCodecs AudioDecoder not supported in this browser');
+        state.isListening = false;
+        el.listenBtn.textContent = 'Join Listen Channel';
+        el.listenStatus.textContent = 'speaker off';
+        return;
+      }
+      try {
+        state.opusDecoder = new AudioDecoder({
+          output: (audioData) => playAudioData(audioData),
+          error: (error) => {
+            console.error('Opus decode error:', error);
+            showError(`Opus decode error: ${error.message}`);
+          },
+        });
+        state.opusDecoder.configure({
+          codec: 'opus',
+          sampleRate: 48000,
+          numberOfChannels: 2,
+        });
+        state.opusDecoderReady = true;
+        processOpusQueue();
+      } catch (error) {
+        showError(`Failed to init Opus decoder: ${error.message}`);
+        state.isListening = false;
+        el.listenBtn.textContent = 'Join Listen Channel';
+        el.listenStatus.textContent = 'speaker off';
+      }
+    }
+
+    function decodeOpus(opusBuffer) {
+      if (!state.opusDecoderReady) {
+        state.opusDecodeQueue.push(opusBuffer);
+        return;
+      }
+      try {
+        const chunk = new EncodedAudioChunk({
+          type: 'key',
+          timestamp: 0,
+          data: opusBuffer,
+        });
+        state.opusDecoder.decode(chunk);
+      } catch (error) {
+        console.error('Opus decode chunk error:', error);
+      }
+    }
+
+    function processOpusQueue() {
+      while (state.opusDecodeQueue.length > 0 && state.opusDecoderReady) {
+        const buffer = state.opusDecodeQueue.shift();
+        decodeOpus(buffer);
+      }
+    }
+
+    function playAudioData(audioData) {
+      if (!state.audioContextListen) return;
+      const sampleRate = audioData.sampleRate;
+      const frameCount = audioData.numberOfFrames;
+      const audioBuffer = state.audioContextListen.createBuffer(
+        audioData.numberOfChannels,
+        frameCount,
+        sampleRate
+      );
+      audioData.copyTo(audioBuffer);
+      const source = state.audioContextListen.createBufferSource();
+      source.buffer = audioBuffer;
+      source.connect(state.audioContextListen.destination);
+      const startAt = Math.max(state.nextStartTime, state.audioContextListen.currentTime);
+      source.start(startAt);
+      state.nextStartTime = startAt + audioBuffer.duration;
+      audioData.close();
+    }
+
+    function playPcm(arrayBuffer) {
+      if (!state.audioContextListen) return;
+      const bytes = new Uint8Array(arrayBuffer);
+      if (bytes.byteLength <= 4) return;
+      const pcm = new Int16Array(bytes.buffer, bytes.byteOffset + 4, (bytes.byteLength - 4) / 2);
+      const audioBuffer = state.audioContextListen.createBuffer(1, pcm.length, 24000);
+      const channel = audioBuffer.getChannelData(0);
+      for (let i = 0; i < pcm.length; i++) channel[i] = pcm[i] / 32768;
+      const source = state.audioContextListen.createBufferSource();
+      source.buffer = audioBuffer;
+      source.connect(state.audioContextListen.destination);
+      const startAt = Math.max(state.nextStartTime, state.audioContextListen.currentTime);
+      source.start(startAt);
+      state.nextStartTime = startAt + audioBuffer.duration;
+    }
+
+    function updateVisualizer(level) {
+      bars.forEach((bar, index) => {
+        const wave = Math.sin(index * 0.55 + Date.now() / 140) * 0.35 + 0.65;
+        bar.style.height = `${Math.max(3, level * 190 * wave)}px`;
+      });
+    }
+
+    document.querySelectorAll('.tab-btn').forEach((button) => {
+      button.addEventListener('click', async () => {
+        document.querySelectorAll('.tab-btn').forEach((item) => item.classList.remove('active'));
+        document.querySelectorAll('.tab-content').forEach((item) => item.classList.remove('active'));
+        button.classList.add('active');
+        state.activeTab = button.dataset.tab;
+        document.getElementById(state.activeTab).classList.add('active');
+        el.activeTabLabel.textContent = button.textContent;
+        if (state.activeTab === 'text') await fetchText();
+      });
+    });
+
+    el.guildSelect.addEventListener('change', () => loadChannels(el.guildSelect.value).catch((error) => showError(error.message)));
+    el.joinVoiceBtn.addEventListener('click', () => connectVoice().catch((error) => showError(error.message)));
+    el.disconnectVoiceBtn.addEventListener('click', () => disconnectVoice().catch((error) => showError(error.message)));
+    el.toggleBtn.addEventListener('click', () => state.isStreaming ? stopStreaming() : startStreaming());
+    el.listenBtn.addEventListener('click', toggleListen);
+    el.channelFilter.addEventListener('change', async () => {
+      state.selectedChannel = el.channelFilter.value;
+      const url = new URL(window.location.href);
+      if (state.selectedChannel) url.searchParams.set('channel', state.selectedChannel);
+      else url.searchParams.delete('channel');
+      if (el.guildSelect.value) url.searchParams.set('guild', el.guildSelect.value);
+      window.history.replaceState({}, '', url);
+      await fetchText().catch((error) => showError(error.message));
+    });
+
+    connectWebSocket();
+    loadGuilds().then(refreshStatus).catch((error) => showError(error.message));
+    setInterval(() => {
+      if (state.activeTab === 'text') fetchText().catch(() => {});
+    }, 7000);
diff --git a/public/index.html b/public/index.html
index e0bc045..7d3e719 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,957 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Discord Moderation Watcher</title>
-  <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=Archivo+Black&family=JetBrains+Mono:wght@400;600;700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg: #080a0f;
-      --panel: rgba(18, 22, 32, 0.86);
-      --panel-strong: #121720;
-      --line: rgba(255, 255, 255, 0.12);
-      --text: #edf4ff;
-      --muted: #91a0b6;
-      --faint: #536176;
-      --cyan: #00e5ff;
-      --green: #39ff88;
-      --yellow: #ffe45e;
-      --red: #ff4f6d;
-      --blue: #6275ff;
-      --shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
-    }
-
-    * { box-sizing: border-box; }
-
-    body {
-      margin: 0;
-      min-height: 100vh;
-      color: var(--text);
-      font-family: Manrope, sans-serif;
-      background:
-        radial-gradient(circle at 12% 8%, rgba(0, 229, 255, 0.18), transparent 32rem),
-        radial-gradient(circle at 88% 0%, rgba(98, 117, 255, 0.2), transparent 28rem),
-        linear-gradient(145deg, #05060a, var(--bg));
-      overflow-x: hidden;
-    }
-
-    body::before {
-      content: "";
-      position: fixed;
-      inset: 0;
-      pointer-events: none;
-      background-image:
-        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
-      background-size: 42px 42px;
-      mask-image: linear-gradient(to bottom, black, transparent 84%);
-    }
-
-    button, select { font: inherit; }
-
-    .shell {
-      width: min(1440px, calc(100% - 32px));
-      margin: 0 auto;
-      padding: 28px 0 44px;
-    }
-
-    .hero {
-      display: grid;
-      grid-template-columns: 1.2fr 0.8fr;
-      gap: 18px;
-      align-items: stretch;
-      margin-bottom: 18px;
-    }
-
-    .brand-card,
-    .status-card,
-    .tab-panel,
-    .content-card {
-      border: 1px solid var(--line);
-      background: var(--panel);
-      backdrop-filter: blur(18px);
-      box-shadow: var(--shadow);
-    }
-
-    .brand-card {
-      position: relative;
-      padding: 28px;
-      border-radius: 28px;
-      overflow: hidden;
-      min-height: 190px;
-    }
-
-    .brand-card::after {
-      content: "WATCHER";
-      position: absolute;
-      right: -14px;
-      bottom: -20px;
-      font-family: "Archivo Black", sans-serif;
-      font-size: clamp(58px, 9vw, 132px);
-      letter-spacing: -0.08em;
-      color: rgba(255,255,255,0.035);
-      line-height: 0.78;
-    }
-
-    .eyebrow {
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 18px;
-      color: var(--cyan);
-      font: 700 12px/1 "JetBrains Mono", monospace;
-      text-transform: uppercase;
-      letter-spacing: 0.18em;
-    }
-
-    .pulse {
-      width: 9px;
-      height: 9px;
-      border-radius: 999px;
-      background: var(--green);
-      box-shadow: 0 0 20px var(--green);
-    }
-
-    h1 {
-      margin: 0;
-      max-width: 840px;
-      font-family: "Archivo Black", sans-serif;
-      font-size: clamp(40px, 6vw, 82px);
-      line-height: 0.88;
-      letter-spacing: -0.06em;
-      text-transform: uppercase;
-    }
-
-    .subtitle {
-      margin: 18px 0 0;
-      max-width: 720px;
-      color: var(--muted);
-      font-size: 15px;
-      line-height: 1.7;
-    }
-
-    .status-card {
-      border-radius: 28px;
-      padding: 24px;
-      display: grid;
-      gap: 14px;
-    }
-
-    .status-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      padding: 14px 0;
-      border-bottom: 1px solid var(--line);
-    }
-
-    .status-row:last-child { border-bottom: 0; }
-
-    .status-label {
-      color: var(--muted);
-      font: 700 12px/1 "JetBrains Mono", monospace;
-      text-transform: uppercase;
-      letter-spacing: 0.12em;
-    }
-
-    .status-value {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      color: var(--text);
-      font: 700 13px/1 "JetBrains Mono", monospace;
-    }
-
-    .dot {
-      width: 9px;
-      height: 9px;
-      border-radius: 99px;
-      background: var(--faint);
-    }
-
-    .dot.on { background: var(--green); box-shadow: 0 0 16px var(--green); }
-    .dot.warn { background: var(--yellow); box-shadow: 0 0 16px var(--yellow); }
-
-    .tab-panel {
-      position: sticky;
-      top: 14px;
-      z-index: 5;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      padding: 12px;
-      border-radius: 24px;
-      margin-bottom: 18px;
-    }
-
-    .tabs {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-
-    .tab-btn {
-      border: 1px solid transparent;
-      color: var(--muted);
-      background: transparent;
-      border-radius: 16px;
-      padding: 12px 16px;
-      cursor: pointer;
-      font-weight: 800;
-      transition: 160ms ease;
-    }
-
-    .tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
-    .tab-btn.active {
-      color: #061014;
-      background: linear-gradient(135deg, var(--cyan), var(--green));
-      box-shadow: 0 12px 28px rgba(0,229,255,0.18);
-    }
-
-    .filter-row {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      color: var(--muted);
-      font-size: 13px;
-    }
-
-    select {
-      min-width: 240px;
-      color: var(--text);
-      background: rgba(5,8,14,0.78);
-      border: 1px solid var(--line);
-      border-radius: 14px;
-      padding: 11px 14px;
-      outline: none;
-    }
-
-    .grid {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      gap: 18px;
-    }
-
-    .tab-content { display: none; }
-    .tab-content.active { display: block; }
-
-    .voice-layout {
-      display: grid;
-      grid-template-columns: 380px 1fr;
-      gap: 18px;
-    }
-
-    .content-card {
-      border-radius: 28px;
-      padding: 22px;
-    }
-
-    .card-title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      margin-bottom: 18px;
-    }
-
-    .card-title h2 {
-      margin: 0;
-      font-family: "Archivo Black", sans-serif;
-      font-size: 26px;
-      letter-spacing: -0.04em;
-      text-transform: uppercase;
-    }
-
-    .mini {
-      color: var(--faint);
-      font: 700 11px/1 "JetBrains Mono", monospace;
-      text-transform: uppercase;
-      letter-spacing: 0.12em;
-    }
-
-    .field-group { display: grid; gap: 8px; margin-bottom: 14px; }
-    .field-group label { color: var(--muted); font-size: 13px; font-weight: 800; }
-
-    .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-
-    .btn {
-      border: 0;
-      border-radius: 16px;
-      padding: 13px 16px;
-      color: #061014;
-      cursor: pointer;
-      font-weight: 900;
-      transition: transform 140ms ease, filter 140ms ease;
-    }
-
-    .btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
-    .btn-primary { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: white; }
-    .btn-success { background: linear-gradient(135deg, var(--green), var(--cyan)); }
-    .btn-danger { background: linear-gradient(135deg, var(--red), #ff9a6b); color: white; }
-
-    .voice-status { color: var(--muted); font-size: 13px; margin-top: 12px; min-height: 20px; }
-
-    .visualizer {
-      display: flex;
-      align-items: flex-end;
-      gap: 5px;
-      height: 130px;
-      padding: 16px;
-      border: 1px solid var(--line);
-      border-radius: 20px;
-      background: rgba(0,0,0,0.22);
-      overflow: hidden;
-    }
-
-    .bar {
-      flex: 1;
-      min-width: 5px;
-      border-radius: 999px;
-      height: 3px;
-      background: linear-gradient(to top, var(--blue), var(--cyan), var(--green));
-      box-shadow: 0 0 18px rgba(0,229,255,0.16);
-    }
-
-    .participants {
-      display: grid;
-      gap: 10px;
-    }
-
-    .user-item {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px;
-      border: 1px solid var(--line);
-      border-radius: 18px;
-      background: rgba(255,255,255,0.035);
-    }
-
-    .user-item.speaking { border-color: rgba(57,255,136,0.55); background: rgba(57,255,136,0.08); }
-    .user-item img { width: 34px; height: 34px; border-radius: 999px; }
-
-    .feed {
-      display: grid;
-      gap: 12px;
-    }
-
-    .event-card {
-      display: grid;
-      gap: 10px;
-      padding: 16px;
-      border: 1px solid var(--line);
-      border-radius: 20px;
-      background: rgba(255,255,255,0.035);
-    }
-
-    .event-head {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-    }
-
-    .author {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      min-width: 0;
-    }
-
-    .avatar {
-      width: 34px;
-      height: 34px;
-      border-radius: 999px;
-      background: linear-gradient(135deg, var(--blue), var(--cyan));
-      flex: 0 0 auto;
-    }
-
-    .avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
-
-    .name { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .time { color: var(--faint); font: 600 11px/1 "JetBrains Mono", monospace; white-space: nowrap; }
-    .message-text { color: #dbe6f7; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
-
-    .sticker-strip, .attachment-strip { display: flex; gap: 10px; flex-wrap: wrap; }
-    .sticker-img { width: 96px; height: 96px; object-fit: contain; border-radius: 16px; background: rgba(0,0,0,0.22); border: 1px solid var(--line); padding: 8px; }
-    .attachment-chip { color: var(--cyan); text-decoration: none; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; font: 700 12px/1 "JetBrains Mono", monospace; background: rgba(0,229,255,0.06); }
-    .embed-card { border-left: 4px solid var(--blue); border-radius: 16px; padding: 12px; background: rgba(98,117,255,0.08); display: grid; gap: 8px; }
-    .embed-title { font-weight: 900; color: var(--text); }
-    .embed-description { color: var(--muted); line-height: 1.5; white-space: pre-wrap; }
-    .embed-image { max-width: 360px; width: 100%; border-radius: 14px; border: 1px solid var(--line); }
-
-    .badges { display: flex; gap: 8px; flex-wrap: wrap; }
-    .badge {
-      border: 1px solid var(--line);
-      border-radius: 999px;
-      padding: 5px 9px;
-      color: var(--muted);
-      font: 700 10px/1 "JetBrains Mono", monospace;
-      text-transform: uppercase;
-    }
-    .badge.edit { color: var(--yellow); border-color: rgba(255,228,94,0.36); }
-    .badge.delete { color: var(--red); border-color: rgba(255,79,109,0.42); }
-
-    .filename { font-size: 13px; font-weight: 900; word-break: break-word; }
-    .link { color: var(--cyan); text-decoration: none; font-weight: 900; }
-    .link:hover { text-decoration: underline; }
-
-    .empty {
-      padding: 34px;
-      text-align: center;
-      color: var(--faint);
-      border: 1px dashed var(--line);
-      border-radius: 22px;
-    }
-
-    .error {
-      display: none;
-      margin-bottom: 14px;
-      padding: 12px 14px;
-      color: #ffd8df;
-      border: 1px solid rgba(255,79,109,0.5);
-      border-radius: 16px;
-      background: rgba(255,79,109,0.12);
-    }
-
-    @media (max-width: 980px) {
-      .hero, .voice-layout { grid-template-columns: 1fr; }
-      .tab-panel { align-items: stretch; flex-direction: column; }
-      .filter-row { align-items: stretch; flex-direction: column; }
-      select { width: 100%; min-width: 0; }
-    }
-  </style>
-</head>
-<body>
-  <main class="shell">
-    <section class="hero">
-      <div class="brand-card">
-        <div class="eyebrow"><span class="pulse"></span> Discord moderation command center</div>
-        <h1>Voice. Text. One Watch Floor.</h1>
-        <p class="subtitle">Single-page watcher for live voice bridge and captured Discord messages, including stickers, embeds, replies, and uploaded image evidence inline.</p>
-      </div>
-      <div class="status-card">
-        <div class="status-row"><span class="status-label">WebSocket</span><span class="status-value"><span id="wsDot" class="dot"></span><span id="wsStatusText">Connecting</span></span></div>
-        <div class="status-row"><span class="status-label">Voice Link</span><span id="voiceStatusText" class="status-value">Not connected</span></div>
-        <div class="status-row"><span class="status-label">Active Tab</span><span id="activeTabLabel" class="status-value">Voice</span></div>
-      </div>
-    </section>
-
-    <nav class="tab-panel">
-      <div class="tabs">
-        <button class="tab-btn active" data-tab="voice">Voice</button>
-        <button class="tab-btn" data-tab="text">Text</button>
-      </div>
-      <div class="filter-row">
-        <span>Channel / Thread</span>
-        <select id="channelFilter"><option value="">Select channel</option></select>
-      </div>
-    </nav>
-
-    <div id="errorBox" class="error"></div>
-
-    <section id="voice" class="tab-content active">
-      <div class="voice-layout">
-        <div class="content-card">
-          <div class="card-title"><h2>Voice Control</h2><span class="mini">bridge</span></div>
-          <div class="field-group">
-            <label for="guildSelect">Guild</label>
-            <select id="guildSelect"></select>
-          </div>
-          <div class="field-group">
-            <label for="channelSelect">Voice Channel</label>
-            <select id="channelSelect"></select>
-          </div>
-          <div class="button-row">
-            <button id="joinVoiceBtn" class="btn btn-success">Join</button>
-            <button id="disconnectVoiceBtn" class="btn btn-danger">Disconnect</button>
-          </div>
-          <div class="voice-status" id="voiceStatusNote">Idle</div>
-        </div>
-
-        <div class="content-card">
-          <div class="card-title"><h2>Live Audio</h2><span class="mini" id="listenStatus">speaker off</span></div>
-          <div style="display:grid; gap:12px; grid-template-columns: 1fr 1fr; margin-bottom:14px;">
-            <button id="toggleBtn" class="btn btn-primary">Start Transmitting</button>
-            <button id="listenBtn" class="btn btn-success">Join Listen Channel</button>
-          </div>
-          <div class="visualizer" id="visualizer"></div>
-        </div>
-      </div>
-
-      <div class="content-card" style="margin-top:18px;">
-        <div class="card-title"><h2>Participants</h2><span class="mini">speaking now</span></div>
-        <div id="userList" class="participants"></div>
-      </div>
-    </section>
-
-    <section id="text" class="tab-content">
-      <div class="content-card">
-        <div class="card-title"><h2>Text Watch</h2><span class="mini">create / edit / delete</span></div>
-        <div id="textList" class="feed"></div>
-      </div>
-    </section>
-  </main>
-
-  <script>
-    const state = {
-      socket: null,
-      activeTab: 'voice',
-      selectedChannel: '',
-      text: [],
-      isStreaming: false,
-      isListening: false,
-      audioContextTransmit: null,
-      audioContextListen: null,
-      processor: null,
-      nextStartTime: 0,
-      noiseGateHold: 0,
-    };
-
-    const SAMPLE_RATE = 24000;
-    const NOISE_GATE_THRESHOLD = 0.01;
-    const NOISE_GATE_HOLD_FRAMES = 3;
-
-    const el = {
-      wsDot: document.getElementById('wsDot'),
-      wsStatusText: document.getElementById('wsStatusText'),
-      activeTabLabel: document.getElementById('activeTabLabel'),
-      errorBox: document.getElementById('errorBox'),
-      guildSelect: document.getElementById('guildSelect'),
-      channelSelect: document.getElementById('channelSelect'),
-      channelFilter: document.getElementById('channelFilter'),
-      joinVoiceBtn: document.getElementById('joinVoiceBtn'),
-      disconnectVoiceBtn: document.getElementById('disconnectVoiceBtn'),
-      voiceStatusText: document.getElementById('voiceStatusText'),
-      voiceStatusNote: document.getElementById('voiceStatusNote'),
-      toggleBtn: document.getElementById('toggleBtn'),
-      listenBtn: document.getElementById('listenBtn'),
-      listenStatus: document.getElementById('listenStatus'),
-      visualizer: document.getElementById('visualizer'),
-      userList: document.getElementById('userList'),
-      textList: document.getElementById('textList'),
-    };
-
-    for (let i = 0; i < 32; i++) {
-      const bar = document.createElement('div');
-      bar.className = 'bar';
-      el.visualizer.appendChild(bar);
-    }
-    const bars = [...document.querySelectorAll('.bar')];
-
-    async function apiRequest(url, options = {}) {
-      const response = await fetch(url, {
-        headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
-        ...options,
-      });
-      if (!response.ok) {
-        const error = await response.json().catch(() => ({ message: response.statusText }));
-        throw new Error(error.message || response.statusText);
-      }
-      return response.json();
-    }
-
-    function showError(message) {
-      el.errorBox.textContent = message;
-      el.errorBox.style.display = 'block';
-      setTimeout(() => { el.errorBox.style.display = 'none'; }, 4500);
-    }
-
-    function renderOptions(select, items, placeholder) {
-      select.replaceChildren();
-      const first = document.createElement('option');
-      first.value = '';
-      first.textContent = placeholder;
-      select.appendChild(first);
-      for (const item of items) {
-        const option = document.createElement('option');
-        option.value = item.id;
-        option.textContent = item.name;
-        select.appendChild(option);
-      }
-    }
-
-    async function loadGuilds() {
-      const guilds = await apiRequest('/api/guilds');
-      renderOptions(el.guildSelect, guilds, 'Select guild');
-      if (guilds.length > 0) {
-        el.guildSelect.value = guilds[0].id;
-        await loadChannels(guilds[0].id);
-      }
-    }
-
-    async function loadChannels(guildId) {
-      const [voiceChannels, watchChannels] = await Promise.all([
-        apiRequest(`/api/guilds/${guildId}/voice-channels`),
-        apiRequest(`/api/guilds/${guildId}/channels`),
-      ]);
-      renderOptions(el.channelSelect, voiceChannels, 'Select voice channel');
-      renderOptions(el.channelFilter, watchChannels, 'Select channel');
-      apiRequest(`/api/guilds/${guildId}/threads`)
-        .then((threads) => appendOptions(el.channelFilter, threads))
-        .catch((error) => showError(`Thread discovery failed: ${error.message}`));
-    }
-
-    function appendOptions(select, items) {
-      const existing = new Set([...select.options].map((option) => option.value));
-      for (const item of items) {
-        if (existing.has(item.id)) continue;
-        const option = document.createElement('option');
-        option.value = item.id;
-        option.textContent = item.name;
-        select.appendChild(option);
-      }
-    }
-
-    async function refreshStatus() {
-      try {
-        const status = await apiRequest('/api/status');
-        el.voiceStatusText.textContent = status.connected ? status.activeChannelName || 'Connected' : 'Not connected';
-        el.voiceStatusNote.textContent = status.connected ? `Connected to ${status.activeChannelName}` : 'Idle';
-      } catch (error) {
-        showError(error.message);
-      }
-    }
-
-    async function connectVoice() {
-      const guildId = el.guildSelect.value;
-      const channelId = el.channelSelect.value;
-      if (!guildId || !channelId) return showError('Select guild and voice channel first');
-      const status = await apiRequest('/api/connect', { method: 'POST', body: JSON.stringify({ guildId, channelId }) });
-      el.voiceStatusText.textContent = status.activeChannelName || 'Connected';
-      el.voiceStatusNote.textContent = `Connected to ${status.activeChannelName}`;
-    }
-
-    async function disconnectVoice() {
-      await apiRequest('/api/disconnect', { method: 'POST' });
-      await refreshStatus();
-    }
-
-    function connectWebSocket() {
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      state.socket = new WebSocket(`${protocol}//${window.location.host}/ws`);
-      state.socket.binaryType = 'arraybuffer';
-
-      state.socket.onopen = () => {
-        el.wsDot.classList.add('on');
-        el.wsStatusText.textContent = 'Connected';
-      };
-
-      state.socket.onclose = () => {
-        el.wsDot.classList.remove('on');
-        el.wsStatusText.textContent = 'Reconnecting';
-        setTimeout(connectWebSocket, 2500);
-      };
-
-      state.socket.onerror = () => {
-        el.wsDot.classList.remove('on');
-        el.wsDot.classList.add('warn');
-        el.wsStatusText.textContent = 'Socket error';
-      };
-
-      state.socket.onmessage = (event) => {
-        if (typeof event.data === 'string') {
-          handleJsonEvent(event.data);
-          return;
-        }
-        if (state.isListening) playPcm(event.data);
-      };
-    }
-
-    function handleJsonEvent(raw) {
-      const message = JSON.parse(raw);
-      if (message.type === 'user_state') return renderUsers(message.users || []);
-      if (message.type === 'message_created') {
-        state.text.unshift(message.data);
-        renderText();
-      }
-      if (message.type === 'message_updated') {
-        const item = state.text.find((entry) => entry.id === message.data.id);
-        if (item) Object.assign(item, { edited_content: message.data.edited_content, edited_at: message.data.edited_at, type: 'edited' });
-        renderText();
-      }
-      if (message.type === 'message_deleted') {
-        const item = state.text.find((entry) => entry.id === message.data.id);
-        if (item) Object.assign(item, { deleted_at: message.data.deleted_at, type: 'deleted' });
-        renderText();
-      }
-      if (message.type === 'attachment_uploaded') fetchText();
-    }
-
-    function renderUsers(users) {
-      el.userList.replaceChildren();
-      if (users.length === 0) {
-        const empty = document.createElement('div');
-        empty.className = 'empty';
-        empty.textContent = 'No active speakers';
-        el.userList.appendChild(empty);
-        return;
-      }
-      for (const user of users) {
-        const row = document.createElement('div');
-        row.className = `user-item${user.speaking ? ' speaking' : ''}`;
-        const img = document.createElement('img');
-        img.src = user.avatar || '';
-        img.alt = '';
-        const name = document.createElement('span');
-        name.textContent = user.username;
-        row.append(img, name);
-        el.userList.appendChild(row);
-      }
-    }
-
-    async function fetchText() {
-      if (!state.selectedChannel) return renderText();
-      const result = await apiRequest(`/api/messages?channel=${encodeURIComponent(state.selectedChannel)}&type=text&limit=80`);
-      state.text = result.data || [];
-      renderText();
-    }
-
-    function parseMetadata(value) {
-      if (!value) return {};
-      try { return JSON.parse(value); } catch { return {}; }
-    }
-
-    function renderText() {
-      el.textList.replaceChildren();
-      if (!state.selectedChannel) return appendEmpty(el.textList, 'Select channel to view text captures');
-      if (state.text.length === 0) return appendEmpty(el.textList, 'No text captures yet');
-      for (const msg of state.text) {
-        const metadata = parseMetadata(msg.metadata);
-        const card = document.createElement('article');
-        card.className = 'event-card';
-        const head = document.createElement('div');
-        head.className = 'event-head';
-        const author = document.createElement('div');
-        author.className = 'author';
-        const avatar = document.createElement('div');
-        avatar.className = 'avatar';
-        if (msg.avatar_url) {
-          const img = document.createElement('img');
-          img.src = msg.avatar_url;
-          img.alt = '';
-          avatar.appendChild(img);
-        }
-        const name = document.createElement('div');
-        name.className = 'name';
-        name.textContent = msg.username || msg.user_id;
-        author.append(avatar, name);
-        const time = document.createElement('div');
-        time.className = 'time';
-        time.textContent = new Date(msg.created_at).toLocaleString();
-        head.append(author, time);
-        const text = document.createElement('div');
-        text.className = 'message-text';
-        text.textContent = msg.edited_content || msg.content || '(empty message)';
-        const stickers = renderStickers(metadata.stickers || []);
-        const embeds = renderEmbeds(metadata.embeds || []);
-        const attachments = renderAttachments(metadata.attachments || []);
-        const badges = document.createElement('div');
-        badges.className = 'badges';
-        if (metadata.reference?.messageId) appendBadge(badges, 'reply', '');
-        if (msg.thread_id) appendBadge(badges, metadata.channel?.threadName ? `thread: ${metadata.channel.threadName}` : 'thread', '');
-        if (msg.edited_at) appendBadge(badges, 'edited', 'edit');
-        if (msg.deleted_at) appendBadge(badges, 'deleted', 'delete');
-        card.append(head, text);
-        if (stickers.childElementCount > 0) card.appendChild(stickers);
-        if (embeds.childElementCount > 0) card.appendChild(embeds);
-        if (attachments.childElementCount > 0) card.appendChild(attachments);
-        card.appendChild(badges);
-        el.textList.appendChild(card);
-      }
-    }
-
-    function renderStickers(stickers) {
-      const wrap = document.createElement('div');
-      wrap.className = 'sticker-strip';
-      for (const sticker of stickers) {
-        const img = document.createElement('img');
-        img.className = 'sticker-img';
-        img.src = sticker.url;
-        img.alt = sticker.name;
-        wrap.appendChild(img);
-      }
-      return wrap;
-    }
-
-    function renderEmbeds(embeds) {
-      const wrap = document.createElement('div');
-      wrap.className = 'feed';
-      for (const embed of embeds) {
-        const card = document.createElement('div');
-        card.className = 'embed-card';
-        if (embed.title) {
-          const title = document.createElement(embed.url ? 'a' : 'div');
-          title.className = 'embed-title';
-          title.textContent = embed.title;
-          if (embed.url) {
-            title.href = embed.url;
-            title.target = '_blank';
-            title.rel = 'noreferrer';
-          }
-          card.appendChild(title);
-        }
-        if (embed.description) {
-          const desc = document.createElement('div');
-          desc.className = 'embed-description';
-          desc.textContent = embed.description;
-          card.appendChild(desc);
-        }
-        for (const field of embed.fields || []) {
-          const fieldNode = document.createElement('div');
-          fieldNode.className = 'embed-description';
-          fieldNode.textContent = `${field.name}: ${field.value}`;
-          card.appendChild(fieldNode);
-        }
-        if (embed.image || embed.thumbnail) {
-          const img = document.createElement('img');
-          img.className = 'embed-image';
-          img.src = embed.image || embed.thumbnail;
-          img.alt = embed.title || 'embed image';
-          card.appendChild(img);
-        }
-        wrap.appendChild(card);
-      }
-      return wrap;
-    }
-
-    function renderAttachments(attachments) {
-      const wrap = document.createElement('div');
-      wrap.className = 'attachment-strip';
-      for (const attachment of attachments) {
-        const link = document.createElement('a');
-        link.className = 'attachment-chip';
-        link.href = attachment.url;
-        link.target = '_blank';
-        link.rel = 'noreferrer';
-        link.textContent = `${attachment.name} (${(attachment.size / 1024).toFixed(1)}KB)`;
-        wrap.appendChild(link);
-      }
-      return wrap;
-    }
-
-    function appendBadge(parent, label, className) {
-      const badge = document.createElement('span');
-      badge.className = `badge ${className}`;
-      badge.textContent = label;
-      parent.appendChild(badge);
-    }
-
-    function appendEmpty(parent, message) {
-      const empty = document.createElement('div');
-      empty.className = 'empty';
-      empty.textContent = message;
-      parent.appendChild(empty);
-    }
-
-    async function startStreaming() {
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        state.audioContextTransmit = new AudioContext({ sampleRate: SAMPLE_RATE });
-        const source = state.audioContextTransmit.createMediaStreamSource(stream);
-        state.processor = state.audioContextTransmit.createScriptProcessor(2048, 1, 1);
-        source.connect(state.processor);
-        state.processor.connect(state.audioContextTransmit.destination);
-        state.processor.onaudioprocess = (event) => {
-          if (!state.isStreaming || state.socket?.readyState !== WebSocket.OPEN) return;
-          const input = event.inputBuffer.getChannelData(0);
-          let sum = 0;
-          for (let i = 0; i < input.length; i++) sum += input[i] * input[i];
-          const rms = Math.sqrt(sum / input.length);
-          if (rms < NOISE_GATE_THRESHOLD && state.noiseGateHold <= 0) return;
-          state.noiseGateHold = rms >= NOISE_GATE_THRESHOLD ? NOISE_GATE_HOLD_FRAMES : state.noiseGateHold - 1;
-          const pcm = new Int16Array(input.length);
-          for (let i = 0; i < input.length; i++) pcm[i] = Math.max(-1, Math.min(1, input[i])) * 32767;
-          state.socket.send(pcm.buffer);
-          updateVisualizer(rms);
-        };
-        state.isStreaming = true;
-        el.toggleBtn.textContent = 'Stop Transmitting';
-      } catch (error) {
-        showError(`Microphone error: ${error.message}`);
-      }
-    }
-
-    function stopStreaming() {
-      state.isStreaming = false;
-      state.processor?.disconnect();
-      state.audioContextTransmit?.close();
-      state.processor = null;
-      state.audioContextTransmit = null;
-      el.toggleBtn.textContent = 'Start Transmitting';
-      updateVisualizer(0);
-    }
-
-    function toggleListen() {
-      state.isListening = !state.isListening;
-      if (state.isListening) {
-        state.audioContextListen = new AudioContext({ sampleRate: 24000 });
-        state.nextStartTime = state.audioContextListen.currentTime;
-        el.listenBtn.textContent = 'Leave Listen Channel';
-        el.listenStatus.textContent = 'speaker on';
-      } else {
-        state.audioContextListen?.close();
-        state.audioContextListen = null;
-        el.listenBtn.textContent = 'Join Listen Channel';
-        el.listenStatus.textContent = 'speaker off';
-      }
-    }
-
-    function playPcm(arrayBuffer) {
-      if (!state.audioContextListen) return;
-      const bytes = new Uint8Array(arrayBuffer);
-      if (bytes.byteLength <= 4) return;
-      const pcm = new Int16Array(bytes.buffer, bytes.byteOffset + 4, (bytes.byteLength - 4) / 2);
-      const audioBuffer = state.audioContextListen.createBuffer(1, pcm.length, 24000);
-      const channel = audioBuffer.getChannelData(0);
-      for (let i = 0; i < pcm.length; i++) channel[i] = pcm[i] / 32768;
-      const source = state.audioContextListen.createBufferSource();
-      source.buffer = audioBuffer;
-      source.connect(state.audioContextListen.destination);
-      const startAt = Math.max(state.nextStartTime, state.audioContextListen.currentTime);
-      source.start(startAt);
-      state.nextStartTime = startAt + audioBuffer.duration;
-    }
-
-    function updateVisualizer(level) {
-      bars.forEach((bar, index) => {
-        const wave = Math.sin(index * 0.55 + Date.now() / 140) * 0.35 + 0.65;
-        bar.style.height = `${Math.max(3, level * 190 * wave)}px`;
-      });
-    }
-
-    document.querySelectorAll('.tab-btn').forEach((button) => {
-      button.addEventListener('click', async () => {
-        document.querySelectorAll('.tab-btn').forEach((item) => item.classList.remove('active'));
-        document.querySelectorAll('.tab-content').forEach((item) => item.classList.remove('active'));
-        button.classList.add('active');
-        state.activeTab = button.dataset.tab;
-        document.getElementById(state.activeTab).classList.add('active');
-        el.activeTabLabel.textContent = button.textContent;
-        if (state.activeTab === 'text') await fetchText();
-      });
-    });
-
-    el.guildSelect.addEventListener('change', () => loadChannels(el.guildSelect.value).catch((error) => showError(error.message)));
-    el.joinVoiceBtn.addEventListener('click', () => connectVoice().catch((error) => showError(error.message)));
-    el.disconnectVoiceBtn.addEventListener('click', () => disconnectVoice().catch((error) => showError(error.message)));
-    el.toggleBtn.addEventListener('click', () => state.isStreaming ? stopStreaming() : startStreaming());
-    el.listenBtn.addEventListener('click', toggleListen);
-    el.channelFilter.addEventListener('change', async () => {
-      state.selectedChannel = el.channelFilter.value;
-      await fetchText().catch((error) => showError(error.message));
-    });
-
-    connectWebSocket();
-    loadGuilds().then(refreshStatus).catch((error) => showError(error.message));
-    setInterval(() => {
-      if (state.activeTab === 'text') fetchText().catch(() => {});
-    }, 7000);
-  </script>
-</body>
-</html>
+<!DOCTYPE html><html><head><meta http-equiv="refresh" content="0; url=/"></head><body></body></html>
diff --git a/src/recorder.ts b/src/recorder.ts
index 8c9b0ef..68aa0d0 100644
--- a/src/recorder.ts
+++ b/src/recorder.ts
@@ -176,6 +176,7 @@ export async function startRecording(
         onPacket: (chunk) => {
           if (chunk.length < 8) return;
           segmentManager.rotateIfNeeded(oggPacketStream);
+          broadcaster.broadcastOpusToWeb?.(chunk, userId);
           if (!broadcaster.broadcastPcmToWeb) return;
           decoder.rotateIfNeeded();
           decoder.write(chunk);
diff --git a/src/types.ts b/src/types.ts
index 4c8ff95..0358ad2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -42,6 +42,7 @@ export interface SegmentMetadata extends UserMetadata {
 
 export interface PcmBroadcaster {
   broadcastPcmToWeb?: (chunk: Buffer, userId: string) => void;
+  broadcastOpusToWeb?: (chunk: Buffer, userId: string) => void;
   updateActiveUser?: (
     userId: string,
     data: { username: string; avatar: string; speaking: boolean },
diff --git a/src/web/dashboardPage.tsx b/src/web/dashboardPage.tsx
new file mode 100644
index 0000000..6bd5d11
--- /dev/null
+++ b/src/web/dashboardPage.tsx
@@ -0,0 +1,217 @@
+import { renderToString } from "react-dom/server";
+import type { MessageRecord } from "../moderation/types";
+import type { ChannelSummary, GuildSummary, VoiceChannelSummary, VoiceStatus } from "../voiceController";
+
+interface DashboardProps {
+  guilds: GuildSummary[];
+  voiceChannels: VoiceChannelSummary[];
+  watchChannels: ChannelSummary[];
+  selectedGuildId: string;
+  selectedChannelId: string;
+  messages: MessageRecord[];
+  status: VoiceStatus;
+}
+
+function parseMetadata(value: string | null): any {
+  if (!value) return {};
+  try {
+    return JSON.parse(value);
+  } catch {
+    return {};
+  }
+}
+
+function safeJson(value: unknown): string {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+
+function MessageCard({ message }: { message: MessageRecord }) {
+  const metadata = parseMetadata(message.metadata);
+  const content = message.edited_content || message.content || "(empty message)";
+
+  return (
+    <article className="event-card" data-message-id={message.id}>
+      <div className="event-head">
+        <div className="author">
+          <div className="avatar">
+            {message.avatar_url ? <img src={message.avatar_url} alt="" /> : null}
+          </div>
+          <div className="name">{message.username || message.user_id}</div>
+        </div>
+        <div className="time">{new Date(message.created_at).toLocaleString()}</div>
+      </div>
+
+      <div className="message-text">{content}</div>
+
+      {metadata.stickers?.length ? (
+        <div className="sticker-strip">
+          {metadata.stickers.map((sticker: any) => (
+            <img key={sticker.id} className="sticker-img" src={sticker.url} alt={sticker.name} />
+          ))}
+        </div>
+      ) : null}
+
+      {metadata.embeds?.length ? (
+        <div className="feed">
+          {metadata.embeds.map((embed: any, index: number) => (
+            <div key={index} className="embed-card">
+              {embed.title ? (
+                embed.url ? (
+                  <a className="embed-title" href={embed.url} target="_blank" rel="noreferrer">{embed.title}</a>
+                ) : (
+                  <div className="embed-title">{embed.title}</div>
+                )
+              ) : null}
+              {embed.description ? <div className="embed-description">{embed.description}</div> : null}
+              {embed.fields?.map((field: any, fieldIndex: number) => (
+                <div key={fieldIndex} className="embed-description">{field.name}: {field.value}</div>
+              ))}
+              {embed.image || embed.thumbnail ? (
+                <img className="embed-image" src={embed.image || embed.thumbnail} alt={embed.title || "embed image"} />
+              ) : null}
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {metadata.attachments?.length ? (
+        <div className="attachment-strip">
+          {metadata.attachments.map((attachment: any) => (
+            <a key={attachment.id} className="attachment-chip" href={attachment.url} target="_blank" rel="noreferrer">
+              {attachment.name} ({(attachment.size / 1024).toFixed(1)}KB)
+            </a>
+          ))}
+        </div>
+      ) : null}
+
+      <div className="badges">
+        {metadata.reference?.messageId ? <span className="badge">reply</span> : null}
+        {message.thread_id ? (
+          <span className="badge">{metadata.channel?.threadName ? `thread: ${metadata.channel.threadName}` : "thread"}</span>
+        ) : null}
+        {message.edited_at ? <span className="badge edit">edited</span> : null}
+        {message.deleted_at ? <span className="badge delete">deleted</span> : null}
+      </div>
+    </article>
+  );
+}
+
+function DashboardPage(props: DashboardProps) {
+  return (
+    <main className="shell">
+      <section className="hero">
+        <div className="brand-card">
+          <div className="eyebrow"><span className="pulse" /> Discord moderation command center</div>
+          <h1>Voice. Text. One Watch Floor.</h1>
+          <p className="subtitle">Single-page watcher for live voice bridge and captured Discord messages, including stickers, embeds, replies, and uploaded image evidence inline.</p>
+        </div>
+        <div className="status-card">
+          <div className="status-row"><span className="status-label">WebSocket</span><span className="status-value"><span id="wsDot" className="dot" /><span id="wsStatusText">Connecting</span></span></div>
+          <div className="status-row"><span className="status-label">Voice Link</span><span id="voiceStatusText" className="status-value">{props.status.connected ? props.status.activeChannelName || "Connected" : "Not connected"}</span></div>
+          <div className="status-row"><span className="status-label">Active Tab</span><span id="activeTabLabel" className="status-value">Voice</span></div>
+        </div>
+      </section>
+
+      <nav className="tab-panel">
+        <div className="tabs">
+          <button className="tab-btn active" data-tab="voice">Voice</button>
+          <button className="tab-btn" data-tab="text">Text</button>
+        </div>
+        <div className="filter-row">
+          <span>Channel / Thread</span>
+          <select id="channelFilter" defaultValue={props.selectedChannelId}>
+            <option value="">Select channel</option>
+            {props.watchChannels.map((channel) => (
+              <option key={channel.id} value={channel.id}>{channel.name}</option>
+            ))}
+          </select>
+        </div>
+      </nav>
+
+      <div id="errorBox" className="error" />
+
+      <section id="voice" className="tab-content active">
+        <div className="voice-layout">
+          <div className="content-card">
+            <div className="card-title"><h2>Voice Control</h2><span className="mini">bridge</span></div>
+            <div className="field-group">
+              <label htmlFor="guildSelect">Guild</label>
+              <select id="guildSelect" defaultValue={props.selectedGuildId}>
+                <option value="">Select guild</option>
+                {props.guilds.map((guild) => <option key={guild.id} value={guild.id}>{guild.name}</option>)}
+              </select>
+            </div>
+            <div className="field-group">
+              <label htmlFor="channelSelect">Voice Channel</label>
+              <select id="channelSelect">
+                <option value="">Select voice channel</option>
+                {props.voiceChannels.map((channel) => <option key={channel.id} value={channel.id}>{channel.name}</option>)}
+              </select>
+            </div>
+            <div className="button-row">
+              <button id="joinVoiceBtn" className="btn btn-success">Join</button>
+              <button id="disconnectVoiceBtn" className="btn btn-danger">Disconnect</button>
+            </div>
+            <div className="voice-status" id="voiceStatusNote">{props.status.connected ? `Connected to ${props.status.activeChannelName}` : "Idle"}</div>
+          </div>
+
+          <div className="content-card">
+            <div className="card-title"><h2>Live Audio</h2><span className="mini" id="listenStatus">speaker off</span></div>
+            <div style={{ display: "grid", gap: 12, gridTemplateColumns: "1fr 1fr", marginBottom: 14 }}>
+              <button id="toggleBtn" className="btn btn-primary">Start Transmitting</button>
+              <button id="listenBtn" className="btn btn-success">Join Listen Channel</button>
+            </div>
+            <div className="visualizer" id="visualizer" />
+          </div>
+        </div>
+
+        <div className="content-card" style={{ marginTop: 18 }}>
+          <div className="card-title"><h2>Participants</h2><span className="mini">speaking now</span></div>
+          <div id="userList" className="participants" />
+        </div>
+      </section>
+
+      <section id="text" className="tab-content">
+        <div className="content-card">
+          <div className="card-title"><h2>Text Watch</h2><span className="mini">create / edit / delete</span></div>
+          <div id="textList" className="feed">
+            {!props.selectedChannelId ? <div className="empty">Select channel to view text captures</div> : null}
+            {props.selectedChannelId && props.messages.length === 0 ? <div className="empty">No text captures yet</div> : null}
+            {props.messages.map((message) => <MessageCard key={message.id} message={message} />)}
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+export function renderDashboardPage(props: DashboardProps): string {
+  const app = renderToString(<DashboardPage {...props} />);
+  const bootstrap = safeJson({
+    guilds: props.guilds,
+    voiceChannels: props.voiceChannels,
+    watchChannels: props.watchChannels,
+    selectedGuildId: props.selectedGuildId,
+    selectedChannelId: props.selectedChannelId,
+    messages: props.messages,
+    status: props.status,
+  });
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Discord Moderation Watcher</title>
+  <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=Archivo+Black&family=JetBrains+Mono:wght@400;600;700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/dashboard.css">
+</head>
+<body>
+  <div id="root">${app}</div>
+  <script id="__DASHBOARD_DATA__" type="application/json">${bootstrap}</script>
+  <script src="/dashboard.js" defer></script>
+</body>
+</html>`;
+}
diff --git a/src/webserver.ts b/src/webserver.ts
index 19565c0..47fd47d 100644
--- a/src/webserver.ts
+++ b/src/webserver.ts
@@ -10,6 +10,7 @@ import { AppError } from "./errors";
 import { createChildLogger, logger } from "./logger";
 import { getMetrics, uptimeGauge } from "./metrics";
 import { discordPlayer } from "./player";
+import { renderDashboardPage } from "./web/dashboardPage";
 import type { VoiceController } from "./voiceController";
 import { getDatabase } from "./muxer-queue";
 import { getMessagesByChannel, getAttachmentsByChannel } from "./moderation/messageStore";
@@ -70,6 +71,39 @@ export function startWebserver(
   app.use(pinoHttp({ logger }));
   app.use(express.json());
 
+  app.get("/", async (req, res, next) => {
+    try {
+      const guilds = voiceController.listGuilds();
+      const selectedGuildId =
+        typeof req.query.guild === "string" ? req.query.guild : guilds[0]?.id || "";
+      const selectedChannelId =
+        typeof req.query.channel === "string" ? req.query.channel : "";
+      const [voiceChannels, watchChannels] = selectedGuildId
+        ? await Promise.all([
+            voiceController.listVoiceChannels(selectedGuildId),
+            voiceController.listWatchableChannels(selectedGuildId),
+          ])
+        : [[], []];
+      const messages = selectedChannelId
+        ? getMessagesByChannel(getDatabase(), selectedChannelId, 80, 0)
+        : [];
+
+      res.type("html").send(
+        renderDashboardPage({
+          guilds,
+          voiceChannels,
+          watchChannels,
+          selectedGuildId,
+          selectedChannelId,
+          messages,
+          status: voiceController.getStatus(),
+        }),
+      );
+    } catch (error) {
+      next(error);
+    }
+  });
+
   app.use(express.static(path.join(__dirname, "../public")));
 
   // Health check endpoint
@@ -204,6 +238,22 @@ export function startWebserver(
     });
   };
 
+  // Inbound: Discord Opus → tagged chunks → browser (WebCodecs decode)
+  (global as any).broadcastOpusToWeb = (chunk: Buffer, userId: string) => {
+    let hash = 0;
+    for (let i = 0; i < userId.length; i++) {
+      hash = (hash << 5) - hash + userId.charCodeAt(i);
+      hash |= 0;
+    }
+    const header = Buffer.alloc(5);
+    header.writeUInt8(1, 0); // mode: 1 = Opus
+    header.writeInt32LE(hash, 1);
+    const packet = Buffer.concat([header, chunk]);
+    wsClients.forEach((client) => {
+      if (client.readyState === 1) client.send(packet);
+    });
+  };
+
   (global as any).updateActiveUser = (
     userId: string,
     data: { username: string; avatar: string; speaking: boolean },
diff --git a/tsconfig.json b/tsconfig.json
index b648b77..74fc610 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,8 @@
     "outDir": "dist",
     "rootDir": "src",
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "jsx": "react-jsx"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]