From 8ad888da288c90a556f87e73377f02592fd9b03a Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Thu, 2 Jul 2026 01:18:45 +0700
Subject: [PATCH] feat: migrate frontend to Astro SSG with design system

- Replace monolithic React SPA (App.tsx) with 7 Astro pages (+ routing)
- Implement full design system from design/ (OKLCH tokens, Tailwind 4 @theme)
- Add 12 Astro components (Button, Badge, Card, Sidebar, Header, states)
- Add 11 React islands (AuthGuard, MessageFeed, VoiceControls, AudioVisualizer, etc.)
- Add 3 Zustand stores (UI, voice, message state)
- Add CSS architecture: dark/light themes, glassmorphism, fluid typography, animations
- Add 404, login, settings, recordings pages
- Remove 40+ legacy React SPA files
- Add Particles background and MascotChat deferred islands
- Wire WebSocket bridge for real-time messages and voice events

Build: 7 pages in ~900ms
Typecheck: clean (0 errors)
Lint: clean (0 errors)
---
 pnpm-lock.yaml                                |  26 +
 services/frontend/.astro/types.d.ts           |   1 +
 services/frontend/astro.config.mjs            |   2 -
 services/frontend/package.json                |   3 +-
 services/frontend/src/App.client.tsx          |  18 -
 services/frontend/src/App.tsx                 | 512 ----------------
 .../src/components/header/Header.astro        |  34 ++
 .../src/components/sidebar/NavItem.astro      |  60 ++
 .../src/components/sidebar/Sidebar.astro      |  93 +++
 .../src/components/states/EmptyState.astro    |  35 ++
 .../src/components/states/ErrorState.astro    |  51 ++
 .../components/states/LoadingSkeleton.astro   |  60 ++
 .../frontend/src/components/ui/Badge.astro    | 106 ++++
 .../frontend/src/components/ui/Button.astro   | 146 +++++
 .../frontend/src/components/ui/Card.astro     | 101 +++
 .../src/components/ui/SeverityBadge.astro     |  97 +++
 .../frontend/src/components/ui/Skeleton.astro |  74 +++
 .../frontend/src/components/ui/Spinner.astro  |  60 ++
 .../src/features/admin/AdminPanel.tsx         | 295 ---------
 .../components/ChannelProfileDetail.tsx       |  56 --
 .../components/ChannelSummaryList.tsx         |  56 --
 .../dashboard/components/DashboardStats.tsx   | 246 --------
 .../components/UserProfileDetail.tsx          |  66 --
 .../dashboard/components/UserSummaryList.tsx  |  67 --
 .../features/dashboard/hooks/useDashboard.ts  | 126 ----
 .../frontend/src/features/dashboard/index.tsx | 135 ----
 .../live/components/ActiveSpeakers.tsx        |  49 --
 .../live/components/AudioVisualizer.tsx       |  79 ---
 .../live/components/MicLevelMeter.tsx         |  29 -
 .../live/components/MusicSubPanel.tsx         | 116 ----
 .../features/live/components/NowPlaying.tsx   |  61 --
 .../live/components/RecordingsSubPanel.tsx    | 207 -------
 .../live/components/ScreenSubPanel.tsx        |  47 --
 .../live/components/VoiceConnectionCard.tsx   | 119 ----
 .../live/components/WaveformPlayer.tsx        | 256 --------
 .../features/live/hooks/useMediaControl.ts    | 104 ----
 .../features/live/hooks/useVoiceControl.ts    | 113 ----
 services/frontend/src/features/live/index.tsx | 171 ------
 .../messages/components/ImageGrid.tsx         | 132 ----
 .../messages/components/MessageCard.tsx       | 577 ------------------
 .../messages/components/MessageFeed.tsx       | 120 ----
 .../components/ModerationAlertListener.tsx    |  57 --
 .../frontend/src/features/messages/index.tsx  | 315 ----------
 .../frontend/src/features/settings/index.tsx  | 426 -------------
 .../src/hooks/useNotificationBadge.ts         |  31 -
 .../frontend/src/islands/ActiveSpeakers.tsx   |  61 ++
 .../frontend/src/islands/AudioVisualizer.tsx  |  95 +++
 services/frontend/src/islands/AuthGuard.tsx   | 122 ++++
 services/frontend/src/islands/LiveShell.tsx   | 142 +++++
 services/frontend/src/islands/MascotChat.tsx  | 122 ++++
 services/frontend/src/islands/MessageFeed.tsx | 356 +++++++++++
 services/frontend/src/islands/NowPlaying.tsx  |  69 +++
 services/frontend/src/islands/PageHeader.tsx  |  40 ++
 services/frontend/src/islands/PageSidebar.tsx |  30 +
 services/frontend/src/islands/Particles.tsx   | 104 ++++
 .../frontend/src/islands/RecordingsList.tsx   | 192 ++++++
 .../frontend/src/islands/SettingsForm.tsx     |  89 +++
 services/frontend/src/islands/ThemeToggle.tsx |  68 +++
 .../frontend/src/islands/VoiceControls.tsx    | 110 ++++
 .../frontend/src/layouts/AuthLayout.astro     |  15 +
 .../frontend/src/layouts/BaseLayout.astro     |  37 +-
 services/frontend/src/pages/404.astro         |  20 +
 services/frontend/src/pages/index.astro       |  14 +-
 services/frontend/src/pages/live.astro        |  14 +
 services/frontend/src/pages/login.astro       |  13 +
 services/frontend/src/pages/messages.astro    |  28 +
 services/frontend/src/pages/recordings.astro  |  27 +
 services/frontend/src/pages/settings.astro    |  27 +
 services/frontend/src/shared/api/client.ts    |  30 +-
 .../{ui => components}/CommandPalette.tsx     |   2 +-
 .../{widgets => shared/components}/Header.tsx |  28 +-
 .../{ui => components}/MobileTabBar.tsx       |   6 +-
 .../components}/Sidebar.tsx                   |  14 +-
 .../components/auth/AuthGuard.client.tsx      |  19 +
 .../components}/auth/index.tsx                |  11 +-
 .../src/shared/{ui => components}/badge.tsx   |   0
 .../src/shared/{ui => components}/button.tsx  |   0
 .../src/shared/{ui => components}/card.tsx    |   0
 .../{ui => components}/error-boundary.tsx     |   4 +-
 .../src/shared/{ui => components}/index.ts    |   0
 .../src/shared/{ui => components}/input.tsx   |   0
 .../components}/mascot/MascotChatbot.tsx      |   4 +-
 .../components}/mascot/MascotImage.tsx        |   4 +-
 .../particles/ParticleBackground.tsx          |  11 +-
 .../{ui => components}/profile-detail.tsx     |   0
 .../shared/{ui => components}/scroll-area.tsx |   0
 .../src/shared/{ui => components}/select.tsx  |   0
 .../shared/{ui => components}/skeleton.tsx    |   0
 .../{ui => components}/status-badge.tsx       |   0
 .../{ui => components}/summary-list.tsx       |   0
 .../src/shared/{ui => components}/tabs.tsx    |   0
 .../src/shared/{ui => components}/toast.tsx   |   0
 .../src/shared/hooks/useMascotChat.ts         |   2 +-
 .../messages => shared}/hooks/useMessages.ts  |  60 +-
 .../src/{ => shared}/hooks/useTheme.ts        |   0
 .../frontend/src/shared/hooks/useUIState.ts   |   2 +-
 .../types.ts => shared/types/dashboard.ts}    |   0
 .../guild/types.ts => shared/types/guild.ts}  |   0
 .../media/types.ts => shared/types/media.ts}  |   0
 .../types.ts => shared/types/message.ts}      |   0
 .../types.ts => shared/types/recording.ts}    |   0
 .../ui/types.ts => shared/types/ui-types.ts}  |   0
 .../voice/types.ts => shared/types/voice.ts}  |   2 +-
 services/frontend/src/shared/ws/socket.ts     |  44 +-
 services/frontend/src/stores/message-store.ts |  49 ++
 services/frontend/src/stores/ui-store.ts      |  46 ++
 services/frontend/src/stores/voice-store.ts   |  72 +++
 services/frontend/src/styles.css              | 199 ------
 services/frontend/src/styles/base.css         | 352 +++++++++++
 .../frontend/src/widgets/DashboardLayout.tsx  |  85 ---
 110 files changed, 3396 insertions(+), 4980 deletions(-)
 delete mode 100644 services/frontend/src/App.client.tsx
 delete mode 100644 services/frontend/src/App.tsx
 create mode 100644 services/frontend/src/components/header/Header.astro
 create mode 100644 services/frontend/src/components/sidebar/NavItem.astro
 create mode 100644 services/frontend/src/components/sidebar/Sidebar.astro
 create mode 100644 services/frontend/src/components/states/EmptyState.astro
 create mode 100644 services/frontend/src/components/states/ErrorState.astro
 create mode 100644 services/frontend/src/components/states/LoadingSkeleton.astro
 create mode 100644 services/frontend/src/components/ui/Badge.astro
 create mode 100644 services/frontend/src/components/ui/Button.astro
 create mode 100644 services/frontend/src/components/ui/Card.astro
 create mode 100644 services/frontend/src/components/ui/SeverityBadge.astro
 create mode 100644 services/frontend/src/components/ui/Skeleton.astro
 create mode 100644 services/frontend/src/components/ui/Spinner.astro
 delete mode 100644 services/frontend/src/features/admin/AdminPanel.tsx
 delete mode 100644 services/frontend/src/features/dashboard/components/ChannelProfileDetail.tsx
 delete mode 100644 services/frontend/src/features/dashboard/components/ChannelSummaryList.tsx
 delete mode 100644 services/frontend/src/features/dashboard/components/DashboardStats.tsx
 delete mode 100644 services/frontend/src/features/dashboard/components/UserProfileDetail.tsx
 delete mode 100644 services/frontend/src/features/dashboard/components/UserSummaryList.tsx
 delete mode 100644 services/frontend/src/features/dashboard/hooks/useDashboard.ts
 delete mode 100644 services/frontend/src/features/dashboard/index.tsx
 delete mode 100644 services/frontend/src/features/live/components/ActiveSpeakers.tsx
 delete mode 100644 services/frontend/src/features/live/components/AudioVisualizer.tsx
 delete mode 100644 services/frontend/src/features/live/components/MicLevelMeter.tsx
 delete mode 100644 services/frontend/src/features/live/components/MusicSubPanel.tsx
 delete mode 100644 services/frontend/src/features/live/components/NowPlaying.tsx
 delete mode 100644 services/frontend/src/features/live/components/RecordingsSubPanel.tsx
 delete mode 100644 services/frontend/src/features/live/components/ScreenSubPanel.tsx
 delete mode 100644 services/frontend/src/features/live/components/VoiceConnectionCard.tsx
 delete mode 100644 services/frontend/src/features/live/components/WaveformPlayer.tsx
 delete mode 100644 services/frontend/src/features/live/hooks/useMediaControl.ts
 delete mode 100644 services/frontend/src/features/live/hooks/useVoiceControl.ts
 delete mode 100644 services/frontend/src/features/live/index.tsx
 delete mode 100644 services/frontend/src/features/messages/components/ImageGrid.tsx
 delete mode 100644 services/frontend/src/features/messages/components/MessageCard.tsx
 delete mode 100644 services/frontend/src/features/messages/components/MessageFeed.tsx
 delete mode 100644 services/frontend/src/features/messages/components/ModerationAlertListener.tsx
 delete mode 100644 services/frontend/src/features/messages/index.tsx
 delete mode 100644 services/frontend/src/features/settings/index.tsx
 delete mode 100644 services/frontend/src/hooks/useNotificationBadge.ts
 create mode 100644 services/frontend/src/islands/ActiveSpeakers.tsx
 create mode 100644 services/frontend/src/islands/AudioVisualizer.tsx
 create mode 100644 services/frontend/src/islands/AuthGuard.tsx
 create mode 100644 services/frontend/src/islands/LiveShell.tsx
 create mode 100644 services/frontend/src/islands/MascotChat.tsx
 create mode 100644 services/frontend/src/islands/MessageFeed.tsx
 create mode 100644 services/frontend/src/islands/NowPlaying.tsx
 create mode 100644 services/frontend/src/islands/PageHeader.tsx
 create mode 100644 services/frontend/src/islands/PageSidebar.tsx
 create mode 100644 services/frontend/src/islands/Particles.tsx
 create mode 100644 services/frontend/src/islands/RecordingsList.tsx
 create mode 100644 services/frontend/src/islands/SettingsForm.tsx
 create mode 100644 services/frontend/src/islands/ThemeToggle.tsx
 create mode 100644 services/frontend/src/islands/VoiceControls.tsx
 create mode 100644 services/frontend/src/layouts/AuthLayout.astro
 create mode 100644 services/frontend/src/pages/404.astro
 create mode 100644 services/frontend/src/pages/live.astro
 create mode 100644 services/frontend/src/pages/login.astro
 create mode 100644 services/frontend/src/pages/messages.astro
 create mode 100644 services/frontend/src/pages/recordings.astro
 create mode 100644 services/frontend/src/pages/settings.astro
 rename services/frontend/src/shared/{ui => components}/CommandPalette.tsx (100%)
 rename services/frontend/src/{widgets => shared/components}/Header.tsx (88%)
 rename services/frontend/src/shared/{ui => components}/MobileTabBar.tsx (92%)
 rename services/frontend/src/{widgets => shared/components}/Sidebar.tsx (93%)
 create mode 100644 services/frontend/src/shared/components/auth/AuthGuard.client.tsx
 rename services/frontend/src/{features => shared/components}/auth/index.tsx (95%)
 rename services/frontend/src/shared/{ui => components}/badge.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/button.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/card.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/error-boundary.tsx (98%)
 rename services/frontend/src/shared/{ui => components}/index.ts (100%)
 rename services/frontend/src/shared/{ui => components}/input.tsx (100%)
 rename services/frontend/src/{widgets => shared/components}/mascot/MascotChatbot.tsx (99%)
 rename services/frontend/src/{widgets => shared/components}/mascot/MascotImage.tsx (96%)
 rename services/frontend/src/{widgets => shared/components}/particles/ParticleBackground.tsx (72%)
 rename services/frontend/src/shared/{ui => components}/profile-detail.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/scroll-area.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/select.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/skeleton.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/status-badge.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/summary-list.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/tabs.tsx (100%)
 rename services/frontend/src/shared/{ui => components}/toast.tsx (100%)
 rename services/frontend/src/{features/messages => shared}/hooks/useMessages.ts (69%)
 rename services/frontend/src/{ => shared}/hooks/useTheme.ts (100%)
 rename services/frontend/src/{entities/dashboard/types.ts => shared/types/dashboard.ts} (100%)
 rename services/frontend/src/{entities/guild/types.ts => shared/types/guild.ts} (100%)
 rename services/frontend/src/{entities/media/types.ts => shared/types/media.ts} (100%)
 rename services/frontend/src/{entities/message/types.ts => shared/types/message.ts} (100%)
 rename services/frontend/src/{entities/recording/types.ts => shared/types/recording.ts} (100%)
 rename services/frontend/src/{entities/ui/types.ts => shared/types/ui-types.ts} (100%)
 rename services/frontend/src/{entities/voice/types.ts => shared/types/voice.ts} (85%)
 create mode 100644 services/frontend/src/stores/message-store.ts
 create mode 100644 services/frontend/src/stores/ui-store.ts
 create mode 100644 services/frontend/src/stores/voice-store.ts
 delete mode 100644 services/frontend/src/styles.css
 create mode 100644 services/frontend/src/styles/base.css
 delete mode 100644 services/frontend/src/widgets/DashboardLayout.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34efb2c..5d573ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -267,6 +267,9 @@ importers:
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
+      zustand:
+        specifier: ^5.0.14
+        version: 5.0.14(@types/react@19.2.14)(react@19.2.6)
     devDependencies:
       '@biomejs/biome':
         specifier: latest
@@ -6047,6 +6050,24 @@ packages:
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
+  zustand@5.0.14:
+    resolution: {integrity: sha512-/8tAspM5LMPr28b3fwLYrtdj77ECpfZviaP75CMTnwO8ISyaE4GDIG/9rDDYq/cH9D2Xw2A2RXglLInmVBQB/g==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -11514,4 +11535,9 @@ snapshots:
 
   zod@4.4.3: {}
 
+  zustand@5.0.14(@types/react@19.2.14)(react@19.2.6):
+    optionalDependencies:
+      '@types/react': 19.2.14
+      react: 19.2.6
+
   zwitch@2.0.4: {}
diff --git a/services/frontend/.astro/types.d.ts b/services/frontend/.astro/types.d.ts
index f964fe0..03d7cc4 100644
--- a/services/frontend/.astro/types.d.ts
+++ b/services/frontend/.astro/types.d.ts
@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />
\ No newline at end of file
diff --git a/services/frontend/astro.config.mjs b/services/frontend/astro.config.mjs
index 3bae84b..332f594 100644
--- a/services/frontend/astro.config.mjs
+++ b/services/frontend/astro.config.mjs
@@ -36,10 +36,8 @@ export default defineConfig({
         "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/package.json b/services/frontend/package.json
index 934f9da..0703268 100644
--- a/services/frontend/package.json
+++ b/services/frontend/package.json
@@ -23,7 +23,8 @@
     "lucide-react": "^1.16.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "tailwind-merge": "^3.6.0"
+    "tailwind-merge": "^3.6.0",
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@biomejs/biome": "latest",
diff --git a/services/frontend/src/App.client.tsx b/services/frontend/src/App.client.tsx
deleted file mode 100644
index 2ec3bd5..0000000
--- a/services/frontend/src/App.client.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-// ─── 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
deleted file mode 100644
index ad3b3b9..0000000
--- a/services/frontend/src/App.tsx
+++ /dev/null
@@ -1,512 +0,0 @@
-// ─── 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";
-import { useVoiceControl } from "./features/live/hooks/useVoiceControl";
-import { MessagesPanel } from "./features/messages";
-import { ModerationAlertListener } from "./features/messages/components/ModerationAlertListener";
-import {
-  mergeMessages,
-  useMessages,
-} from "./features/messages/hooks/useMessages";
-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 })[]>([]);
-  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 selectedVoiceGuild =
-    uiState.selectedVoiceGuild || uiState.selectedGuild || "";
-
-  // Resolve monitor guild name from the full guild list (has real names now)
-  const monitorGuildName = useMemo(
-    () =>
-      monitorGuildId
-        ? (voice.guilds.find((g) => g.id === monitorGuildId)?.name ?? null)
-        : null,
-    [monitorGuildId, voice.guilds],
-  );
-
-  // Update speaker list from incremental voice_active_user events
-  const updateSpeakerList = (
-    prev: (ActiveSpeaker & { heardAt?: number })[],
-    data: Partial<ActiveSpeaker> & {
-      userId?: string;
-      id?: string;
-      speaking: boolean;
-    },
-  ): (ActiveSpeaker & { heardAt?: number })[] => {
-    const key = data.userId ?? data.id;
-    if (!key) return prev;
-    const now = Date.now();
-    const idx = prev.findIndex((s) => (s.userId ?? s.id) === key);
-    if (idx >= 0) {
-      const next = [...prev];
-      next[idx] = { ...next[idx], ...data, heardAt: now };
-      return next;
-    }
-    return [
-      ...prev,
-      { ...data, heardAt: now } as ActiveSpeaker & { heardAt?: number },
-    ];
-  };
-
-  const socket = useDashboardSocket({
-    onBinary: (d) => audio.handleIncomingBinary(d),
-    onUserState: (users) =>
-      setActiveSpeakers(
-        users.map((u) => ({
-          ...u,
-          heardAt: Date.now(),
-        })),
-      ),
-    onVoiceActiveUser: (data) => {
-      if (data.userId) audio.registerUserId(data.userId);
-      setActiveSpeakers((prev: (ActiveSpeaker & { heardAt?: number })[]) =>
-        updateSpeakerList(prev, {
-          userId: data.userId,
-          username: data.username,
-          avatar: data.avatar,
-          speaking: data.speaking,
-        }),
-      );
-    },
-    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) => {
-        // 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)),
-      ),
-    onMessageDeleted: (m) =>
-      messages.setMessages((prev) =>
-        prev.map((i) =>
-          i.id === m.id ? { ...i, type: "deleted" as const } : i,
-        ),
-      ),
-    onMessageAnalyzed: (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";
-        const severity = msg.ai_severity || "";
-        const categories = msg.ai_categories || "";
-        const brief = msg.ai_analysis?.slice(0, 80) ?? "Message flagged by AI";
-        window.dispatchEvent(
-          new CustomEvent("moderation_alert", {
-            detail: { type: status, username, severity, categories, brief },
-          }),
-        );
-      }
-    },
-    onAttachmentUploaded: () =>
-      messages
-        .fetchMessages(monitorGuildId || undefined)
-        .catch(() => undefined),
-    onAttachmentCreated: () =>
-      messages
-        .fetchMessages(monitorGuildId || undefined)
-        .catch(() => undefined),
-    onMediaState: (state) => media.setMediaState(state),
-    onVoiceRecordingUploaded: (d) =>
-      window.dispatchEvent(
-        new CustomEvent("voice_recording_uploaded", { detail: d }),
-      ),
-  });
-
-  const transmit = useAudioTransmit(socket.socketRef);
-
-  // Load voice channels when guild changes (Live tab)
-  useEffect(() => {
-    if (selectedVoiceGuild)
-      voice.loadVoiceChannels(selectedVoiceGuild).catch(() => undefined);
-  }, [selectedVoiceGuild, voice.loadVoiceChannels]);
-
-  // Auto-fetch messages for the monitor guild
-  useEffect(() => {
-    if (monitorGuildId)
-      messages.fetchMessages(monitorGuildId).catch(() => undefined);
-  }, [monitorGuildId, messages.fetchMessages]);
-
-  // Periodic refetch — keeps dashboard in sync even if WS events missed
-  const monitorGuildRef = useRef(monitorGuildId);
-  monitorGuildRef.current = monitorGuildId;
-
-  useEffect(() => {
-    const currentGuild = monitorGuildRef.current;
-    if (!currentGuild) return;
-    const interval = setInterval(() => {
-      messages.fetchMessages(monitorGuildRef.current).catch(() => undefined);
-    }, 15_000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [monitorGuildId]);
-
-  // Stale speaker pruning — remove speakers not heard from in 30s
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setActiveSpeakers((prev: (ActiveSpeaker & { heardAt?: number })[]) => {
-        const now = Date.now();
-        const pruned = prev.filter(
-          (s) => s.speaking || (s.heardAt && now - s.heardAt < 30_000),
-        );
-        return pruned.length < prev.length ? pruned : prev;
-      });
-    }, 30_000);
-    return () => clearInterval(interval);
-  }, []);
-
-  // Push-to-Talk — hold Space to transmit
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement ||
-        e.target instanceof HTMLSelectElement
-      )
-        return;
-      if (e.code === "Space" && !transmit.isStreaming && e.repeat === false) {
-        e.preventDefault();
-        transmit.startTransmit().catch(() => undefined);
-      }
-    };
-    const handleKeyUp = (e: KeyboardEvent) => {
-      if (e.code === "Space" && transmit.isStreaming) {
-        transmit.stopTransmit();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("keyup", handleKeyUp);
-    };
-  }, [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}
-        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={handleTabChange}
-      />
-      <ModerationAlertListener />
-      <CommandPalette
-        isOpen={paletteOpen}
-        mode={paletteMode}
-        onClose={handlePaletteClose}
-        onNavigate={handlePaletteNavigate}
-        onToggleTheme={toggleTheme}
-        isDark={isDark}
-      />
-    </>
-  );
-}
diff --git a/services/frontend/src/components/header/Header.astro b/services/frontend/src/components/header/Header.astro
new file mode 100644
index 0000000..eaa1884
--- /dev/null
+++ b/services/frontend/src/components/header/Header.astro
@@ -0,0 +1,34 @@
+---
+// ─── Header.astro — App header bar ──────────────────────────────────────────
+// Features: sticky top, backdrop blur, border-bottom, actions slot
+// ──────────────────────────────────────────────────────────────────────────────
+
+export interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<header
+  class="header sticky top-0 z-[var(--z-header)] flex items-center justify-between border-b border-border px-6 py-3"
+>
+  <!-- Left: title -->
+  <div class="flex items-center gap-3">
+    <h1 class="text-lg font-semibold text-foreground">{title}</h1>
+  </div>
+
+  <!-- Right: actions slot -->
+  <div class="flex items-center gap-2">
+    <slot name="actions" />
+  </div>
+</header>
+
+<style>
+  .header {
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    background-color: oklch(var(--glass-bg));
+    min-height: 3.5rem;
+  }
+</style>
diff --git a/services/frontend/src/components/sidebar/NavItem.astro b/services/frontend/src/components/sidebar/NavItem.astro
new file mode 100644
index 0000000..29484f0
--- /dev/null
+++ b/services/frontend/src/components/sidebar/NavItem.astro
@@ -0,0 +1,60 @@
+---
+// ─── NavItem.astro — Sidebar navigation item ────────────────────────────────
+// Handles: active state highlighting, collapsed icon-only mode,
+//          notification badge / dot indicators.
+// ────────────────────────────────────────────────────────────────────────────────
+
+export interface Props {
+  href: string;
+  icon: string;
+  label: string;
+  active?: boolean;
+  collapsed?: boolean;
+  notificationCount?: number;
+}
+
+const {
+  href,
+  icon,
+  label,
+  active = false,
+  collapsed = false,
+  notificationCount = 0,
+} = Astro.props;
+
+const navClass = active
+  ? "bg-[var(--clr-interactive-selected,oklch(var(--primary-soft)))] text-primary-foreground"
+  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground";
+---
+
+<a
+  href={href}
+  class:list={[
+    "nav-item group relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium no-underline transition-all duration-150",
+    collapsed ? "justify-center px-2.5" : "",
+    navClass,
+  ]}
+  aria-current={active ? "page" : undefined}
+  aria-label={collapsed ? label : undefined}
+>
+  <span class="size-5 shrink-0" aria-hidden="true" set:html={icon} />
+
+  {!collapsed && <span class="truncate">{label}</span>}
+
+  {!collapsed && notificationCount > 0 && (
+    <span
+      class="ml-auto inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none text-white"
+      style="background-color: var(--clr-severity-high, oklch(var(--destructive)))"
+    >
+      {notificationCount > 99 ? "99+" : notificationCount}
+    </span>
+  )}
+
+  {collapsed && notificationCount > 0 && (
+    <span
+      class="absolute right-1.5 top-1.5 size-2 rounded-full"
+      style="background-color: var(--clr-severity-high, oklch(var(--destructive)))"
+      aria-label={`${notificationCount} notifications`}
+    />
+  )}
+</a>
diff --git a/services/frontend/src/components/sidebar/Sidebar.astro b/services/frontend/src/components/sidebar/Sidebar.astro
new file mode 100644
index 0000000..34fa960
--- /dev/null
+++ b/services/frontend/src/components/sidebar/Sidebar.astro
@@ -0,0 +1,93 @@
+---
+// ─── Sidebar.astro — Main app sidebar navigation ──────────────────────────
+// Features: collapsed / expanded (64px / 256px), logo, nav items, version
+// ──────────────────────────────────────────────────────────────────────────────
+
+import NavItem from "./NavItem.astro";
+
+export interface Props {
+  collapsed?: boolean;
+  version?: string;
+  currentPath?: string;
+}
+
+const { collapsed = false, version = "1.0.0", currentPath = "/live" } =
+  Astro.props;
+
+const ICONS = {
+  live: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>`,
+  messages: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`,
+  recordings: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>`,
+  settings: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`,
+} as const;
+---
+
+<aside
+  class="sidebar fixed left-0 top-0 z-30 flex h-screen flex-col border-r border-border bg-background transition-all duration-300 ease-out"
+  class:list={[collapsed ? "w-16" : "w-64"]}
+  aria-label="Main navigation"
+>
+  <!-- ── Header / Logo ──────────────────────────────────────────── -->
+  <div class="flex items-center border-b border-border px-4 py-4">
+    <a
+      href="/"
+      class="flex items-center gap-3 no-underline"
+      aria-label="Dashboard home"
+    >
+      <span
+        class="flex size-8 items-center justify-center rounded-lg bg-primary text-sm font-bold text-primary-foreground"
+      >
+        B
+      </span>
+      {!collapsed && (
+        <span class="text-lg font-extrabold gradient-text">BETE</span>
+      )}
+    </a>
+  </div>
+
+  <!-- ── Navigation ─────────────────────────────────────────────── -->
+  <nav class="flex flex-1 flex-col gap-1 overflow-y-auto px-3 py-4">
+    <NavItem
+      href="/live"
+      icon={ICONS.live}
+      label="Live"
+      active={currentPath.startsWith("/live")}
+      collapsed={collapsed}
+    />
+    <NavItem
+      href="/messages"
+      icon={ICONS.messages}
+      label="Messages"
+      active={currentPath.startsWith("/messages")}
+      collapsed={collapsed}
+      notificationCount={12}
+    />
+    <NavItem
+      href="/recordings"
+      icon={ICONS.recordings}
+      label="Recordings"
+      active={currentPath.startsWith("/recordings")}
+      collapsed={collapsed}
+    />
+    <NavItem
+      href="/settings"
+      icon={ICONS.settings}
+      label="Settings"
+      active={currentPath.startsWith("/settings")}
+      collapsed={collapsed}
+    />
+  </nav>
+
+  <!-- ── Footer / Version ───────────────────────────────────────── -->
+  <footer class="border-t border-border px-4 py-3">
+    {!collapsed && (
+      <span class="text-xs text-muted-foreground">v{version}</span>
+    )}
+  </footer>
+</aside>
+
+<style>
+  .sidebar {
+    will-change: width;
+  }
+</style>
diff --git a/services/frontend/src/components/states/EmptyState.astro b/services/frontend/src/components/states/EmptyState.astro
new file mode 100644
index 0000000..bdc19b1
--- /dev/null
+++ b/services/frontend/src/components/states/EmptyState.astro
@@ -0,0 +1,35 @@
+---
+// ─── EmptyState.astro — Empty / no-data state ───────────────────────────────
+// Features: centered layout, icon, title, description, actions slot
+// ──────────────────────────────────────────────────────────────────────────────
+
+export interface Props {
+  icon: string;
+  title: string;
+  description?: string;
+}
+
+const { icon, title, description } = Astro.props;
+---
+
+<div
+  class="flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-12 text-center"
+>
+  <!-- Icon -->
+  <div class="flex size-16 items-center justify-center" aria-hidden="true" set:html={icon} />
+
+  <!-- Title -->
+  <h2 class="text-xl font-semibold text-foreground">{title}</h2>
+
+  <!-- Description -->
+  {description && (
+    <p class="max-w-sm text-sm text-muted-foreground">{description}</p>
+  )}
+
+  <!-- Actions slot (buttons, links, etc.) -->
+  {Astro.slots.has("actions") && (
+    <div class="mt-2">
+      <slot name="actions" />
+    </div>
+  )}
+</div>
diff --git a/services/frontend/src/components/states/ErrorState.astro b/services/frontend/src/components/states/ErrorState.astro
new file mode 100644
index 0000000..f3a7cae
--- /dev/null
+++ b/services/frontend/src/components/states/ErrorState.astro
@@ -0,0 +1,51 @@
+---
+// ─── ErrorState.astro — Error / failure state ───────────────────────────────
+// Features: role="alert", severity-critical bg tint, error icon, retry slot
+// ──────────────────────────────────────────────────────────────────────────────
+
+export interface Props {
+  message: string;
+}
+
+const { message } = Astro.props;
+---
+
+<div
+  role="alert"
+  class="flex min-h-48 flex-col items-center justify-center gap-4 rounded-xl px-6 py-10 text-center"
+  style="background-color: oklch(var(--destructive) / 0.08)"
+>
+  <!-- Error icon circle -->
+  <div
+    class="flex size-12 items-center justify-center rounded-full"
+    style="background-color: oklch(var(--destructive) / 0.15)"
+    aria-hidden="true"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      style="color: oklch(var(--destructive))"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="12" />
+      <line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  </div>
+
+  <!-- Error message -->
+  <p class="max-w-sm text-sm font-medium text-foreground">{message}</p>
+
+  <!-- Retry slot -->
+  {Astro.slots.has("retry") && (
+    <div class="mt-2">
+      <slot name="retry" />
+    </div>
+  )}
+</div>
diff --git a/services/frontend/src/components/states/LoadingSkeleton.astro b/services/frontend/src/components/states/LoadingSkeleton.astro
new file mode 100644
index 0000000..486f801
--- /dev/null
+++ b/services/frontend/src/components/states/LoadingSkeleton.astro
@@ -0,0 +1,60 @@
+---
+// ─── LoadingSkeleton.astro — Placeholder loading states ─────────────────────
+// Uses the shared Skeleton React component in 3 layout variants.
+// ──────────────────────────────────────────────────────────────────────────────
+
+import { Skeleton } from "../../shared/components/skeleton";
+
+export type Variant = "card" | "list" | "detail";
+
+export interface Props {
+  /** Visual layout variant */
+  variant?: Variant;
+  /** Number of skeleton items to render (default 1) */
+  count?: number;
+}
+
+const { variant = "card", count = 1 } = Astro.props;
+
+const items = Array.from({ length: count });
+---
+
+<div role="presentation" aria-hidden="true" class="flex flex-col gap-4">
+  {
+    items.map((_, i) => (
+      <div class="skeleton-group" data-variant={variant}>
+        {variant === "card" && (
+          <div class="overflow-hidden rounded-xl border border-border">
+            <Skeleton class="h-40 w-full rounded-none" />
+            <div class="space-y-3 p-4">
+              <Skeleton class="h-4 w-3/4" />
+              <Skeleton class="h-3 w-1/2" />
+            </div>
+          </div>
+        )}
+
+        {variant === "list" && (
+          <div class="flex items-center gap-3 rounded-lg p-3">
+            <Skeleton class="size-10 shrink-0 rounded-full" />
+            <div class="flex-1 space-y-2">
+              <Skeleton class="h-3.5 w-1/3" />
+              <Skeleton class="h-3 w-2/3" />
+            </div>
+          </div>
+        )}
+
+        {variant === "detail" && (
+          <div class="space-y-4 rounded-xl p-4">
+            <Skeleton class="h-6 w-1/2" />
+            <div class="space-y-2">
+              <Skeleton class="h-4 w-full" />
+              <Skeleton class="h-4 w-full" />
+              <Skeleton class="h-4 w-3/4" />
+            </div>
+            <Skeleton class="h-10 w-32" />
+          </div>
+        )}
+      </div>
+    ))
+  }
+</div>
diff --git a/services/frontend/src/components/ui/Badge.astro b/services/frontend/src/components/ui/Badge.astro
new file mode 100644
index 0000000..0b6ab54
--- /dev/null
+++ b/services/frontend/src/components/ui/Badge.astro
@@ -0,0 +1,106 @@
+---
+export interface Props {
+  variant?: "default" | "secondary" | "success" | "warning" | "destructive" | "outline";
+  size?: "sm" | "default";
+  dot?: boolean;
+  class?: string;
+}
+
+const {
+  variant = "default",
+  size = "default",
+  dot = false,
+  class: className = "",
+} = Astro.props;
+---
+
+<span class:list={[`badge badge--${variant} badge--${size}`, className]}>
+  {dot && <span class="badge__dot" aria-hidden="true" />}
+  <slot />
+</span>
+
+<style is:global>
+  .badge {
+    --fs-xs: 0.75rem;
+    --fs-xxs: 0.625rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    font-weight: var(--fw-medium, 500);
+    transition:
+      background-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+      color var(--duration-fast, 150ms) var(--ease-out, ease-out);
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .badge--default {
+    padding-inline: 0.625rem;
+    padding-block: 0.125rem;
+    font-size: var(--fs-xs);
+    background-color: oklch(var(--primary));
+    color: oklch(var(--primary-foreground));
+  }
+
+  .badge--secondary {
+    padding-inline: 0.625rem;
+    padding-block: 0.125rem;
+    font-size: var(--fs-xs);
+    background-color: oklch(var(--muted));
+    color: oklch(var(--muted-foreground));
+  }
+
+  .badge--success {
+    padding-inline: 0.625rem;
+    padding-block: 0.125rem;
+    font-size: var(--fs-xs);
+    background-color: oklch(var(--success) / 0.15);
+    color: oklch(var(--success));
+  }
+
+  .badge--warning {
+    padding-inline: 0.625rem;
+    padding-block: 0.125rem;
+    font-size: var(--fs-xs);
+    background-color: oklch(var(--warning) / 0.15);
+    color: oklch(var(--warning));
+  }
+
+  .badge--destructive {
+    padding-inline: 0.625rem;
+    padding-block: 0.125rem;
+    font-size: var(--fs-xs);
+    background-color: oklch(var(--destructive) / 0.15);
+    color: oklch(var(--destructive));
+  }
+
+  .badge--outline {
+    padding-inline: 0.625rem;
+    padding-block: 0.125rem;
+    font-size: var(--fs-xs);
+    border-color: oklch(var(--border));
+    background-color: transparent;
+    color: oklch(var(--foreground));
+  }
+
+  /* ── Size sm ───────────────────────────────────── */
+
+  .badge--sm {
+    padding-inline: 0.375rem;
+    padding-block: 0.0625rem;
+    font-size: var(--fs-xxs);
+  }
+
+  /* ── Dot indicator ─────────────────────────────── */
+
+  .badge__dot {
+    display: inline-block;
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 50%;
+    background-color: currentColor;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/services/frontend/src/components/ui/Button.astro b/services/frontend/src/components/ui/Button.astro
new file mode 100644
index 0000000..886a0db
--- /dev/null
+++ b/services/frontend/src/components/ui/Button.astro
@@ -0,0 +1,146 @@
+---
+export interface Props {
+  variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost";
+  size?: "sm" | "default" | "lg" | "icon";
+  disabled?: boolean;
+  href?: string;
+  class?: string;
+}
+
+const {
+  variant = "primary",
+  size = "default",
+  disabled = false,
+  href,
+  class: className = "",
+} = Astro.props;
+
+const Tag = href ? "a" : "button";
+
+const attrs: Record<string, string | number | boolean> = {
+  class: `btn btn--${variant} btn--${size} ${className}`,
+};
+if (Tag === "button") {
+  attrs.disabled = disabled;
+} else if (disabled) {
+  attrs["aria-disabled"] = true;
+  attrs.role = "link";
+}
+---
+
+<Tag {...attrs}>
+  <slot />
+</Tag>
+
+<style is:global>
+  .btn {
+    --rd-md: calc(var(--radius, 1rem) - 2px);
+    --fs-sm: 0.875rem;
+    --fw-medium: 500;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+    border-radius: var(--rd-md);
+    font-size: var(--fs-sm);
+    font-weight: var(--fw-medium);
+    line-height: 1.25rem;
+    transition:
+      background-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+      color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+      border-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+      box-shadow var(--duration-fast, 150ms) var(--ease-out, ease-out),
+      transform var(--duration-fast, 150ms) var(--ease-out, ease-out);
+    cursor: pointer;
+    border: 1px solid transparent;
+    text-decoration: none;
+    outline: none;
+    user-select: none;
+  }
+
+  .btn:focus-visible {
+    outline: 2px solid oklch(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .btn:active {
+    transform: scale(0.97);
+  }
+
+  .btn:disabled,
+  .btn[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  /* ── Variants ──────────────────────────────────────────── */
+
+  .btn--primary {
+    background-color: oklch(var(--primary));
+    color: oklch(var(--primary-foreground));
+    box-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
+  }
+  .btn--primary:hover {
+    background-color: oklch(var(--primary) / 0.9);
+  }
+
+  .btn--secondary {
+    background-color: oklch(var(--secondary));
+    color: oklch(var(--secondary-foreground));
+  }
+  .btn--secondary:hover {
+    background-color: oklch(var(--secondary) / 0.8);
+  }
+
+  .btn--destructive {
+    background-color: oklch(var(--destructive));
+    color: oklch(var(--destructive-foreground));
+    box-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
+  }
+  .btn--destructive:hover {
+    background-color: oklch(var(--destructive) / 0.9);
+  }
+
+  .btn--outline {
+    border-color: oklch(var(--border));
+    background-color: oklch(var(--background));
+    color: oklch(var(--foreground));
+  }
+  .btn--outline:hover {
+    background-color: oklch(var(--accent));
+    color: oklch(var(--accent-foreground));
+  }
+
+  .btn--ghost {
+    background-color: transparent;
+    color: oklch(var(--foreground));
+  }
+  .btn--ghost:hover {
+    background-color: oklch(var(--accent));
+    color: oklch(var(--accent-foreground));
+  }
+
+  /* ── Sizes ─────────────────────────────────────────────── */
+
+  .btn--sm {
+    height: 2.25rem;
+    padding-inline: 0.75rem;
+  }
+
+  .btn--default {
+    height: 2.5rem;
+    padding-inline: 1rem;
+  }
+
+  .btn--lg {
+    height: 2.75rem;
+    padding-inline: 2rem;
+  }
+
+  .btn--icon {
+    height: 2.5rem;
+    width: 2.5rem;
+    padding: 0;
+  }
+</style>
diff --git a/services/frontend/src/components/ui/Card.astro b/services/frontend/src/components/ui/Card.astro
new file mode 100644
index 0000000..2ab6f4f
--- /dev/null
+++ b/services/frontend/src/components/ui/Card.astro
@@ -0,0 +1,101 @@
+---
+export interface Props {
+  variant?: "default" | "elevated" | "glass" | "interactive";
+  padding?: "none" | "sm" | "md" | "lg";
+  class?: string;
+}
+
+const {
+  variant = "default",
+  padding = "md",
+  class: className = "",
+} = Astro.props;
+---
+
+<div class:list={[`card card--${variant} card--pad-${padding}`, className]}>
+  <slot />
+</div>
+
+<style is:global>
+  .card {
+    --rd-lg: var(--radius, 1rem);
+    border-radius: var(--rd-lg);
+    transition:
+      background-color var(--duration-normal, 300ms) var(--ease-out, ease-out),
+      color var(--duration-normal, 300ms) var(--ease-out, ease-out),
+      border-color var(--duration-normal, 300ms) var(--ease-out, ease-out),
+      box-shadow var(--duration-normal, 300ms) var(--ease-out, ease-out),
+      transform var(--duration-normal, 300ms) var(--ease-out, ease-out);
+  }
+
+  /* ── Padding variants ──────────────────────────── */
+
+  .card--pad-none {
+    padding: 0;
+  }
+
+  .card--pad-sm {
+    padding: 0.75rem;
+  }
+
+  .card--pad-md {
+    padding: 1.5rem;
+  }
+
+  .card--pad-lg {
+    padding: 2rem;
+  }
+
+  /* ── Variant: default ──────────────────────────── */
+
+  .card--default {
+    background-color: oklch(var(--card));
+    color: oklch(var(--card-foreground));
+    border: 1px solid oklch(var(--border));
+    box-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
+  }
+
+  /* ── Variant: elevated ─────────────────────────── */
+
+  .card--elevated {
+    background-color: oklch(var(--card));
+    color: oklch(var(--card-foreground));
+    border: 1px solid oklch(var(--border));
+    box-shadow:
+      0 4px 6px -1px oklch(0 0 0 / 0.1),
+      0 2px 4px -2px oklch(0 0 0 / 0.1);
+  }
+
+  /* ── Variant: glass ────────────────────────────── */
+
+  .card--glass {
+    background-color: oklch(var(--glass-bg));
+    border: 1px solid oklch(var(--glass-border));
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 4px 24px oklch(var(--glass-shadow));
+  }
+
+  /* ── Variant: interactive ──────────────────────── */
+
+  .card--interactive {
+    background-color: oklch(var(--card));
+    color: oklch(var(--card-foreground));
+    border: 1px solid oklch(var(--border));
+    box-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
+    cursor: pointer;
+  }
+
+  .card--interactive:hover {
+    transform: translateY(-4px);
+    box-shadow:
+      0 10px 15px -3px oklch(0 0 0 / 0.1),
+      0 4px 6px -4px oklch(0 0 0 / 0.1);
+    border-color: oklch(var(--primary) / 0.3);
+  }
+
+  .card--interactive:focus-visible {
+    outline: 2px solid oklch(var(--ring));
+    outline-offset: 2px;
+  }
+</style>
diff --git a/services/frontend/src/components/ui/SeverityBadge.astro b/services/frontend/src/components/ui/SeverityBadge.astro
new file mode 100644
index 0000000..1aa0cb3
--- /dev/null
+++ b/services/frontend/src/components/ui/SeverityBadge.astro
@@ -0,0 +1,97 @@
+---
+export interface Props {
+  severity: "safe" | "low" | "medium" | "high" | "critical";
+  class?: string;
+}
+
+const { severity, class: className = "" } = Astro.props;
+
+const ICONS: Record<string, string> = {
+  safe: "&#x2714;",
+  low: "&#x2197;",
+  medium: "&#x26A0;",
+  high: "&#x26A1;",
+  critical: "&#x2716;",
+};
+
+const icon = ICONS[severity] ?? "";
+---
+
+<span
+  class:list={[`severity-badge severity-badge--${severity}`, className]}
+  data-severity={severity}
+  role="status"
+>
+  <span class="severity-badge__icon" aria-hidden="true" set:html={icon} />
+  <span class="severity-badge__label"><slot /></span>
+</span>
+
+<style is:global>
+  .severity-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding-inline: 0.5rem;
+    padding-block: 0.2rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border: 1px solid transparent;
+    line-height: 1;
+    user-select: none;
+  }
+
+  .severity-badge__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  .severity-badge__label {
+    text-transform: capitalize;
+  }
+
+  /* ── Severity: safe → success ──────────────────── */
+
+  .severity-badge--safe {
+    background-color: oklch(var(--success) / 0.15);
+    color: oklch(var(--success));
+    border-color: oklch(var(--success) / 0.25);
+  }
+
+  /* ── Severity: low → info ──────────────────────── */
+
+  .severity-badge--low {
+    background-color: oklch(var(--info) / 0.15);
+    color: oklch(var(--info));
+    border-color: oklch(var(--info) / 0.25);
+  }
+
+  /* ── Severity: medium → warning ────────────────── */
+
+  .severity-badge--medium {
+    background-color: oklch(var(--warning) / 0.15);
+    color: oklch(var(--warning));
+    border-color: oklch(var(--warning) / 0.25);
+  }
+
+  /* ── Severity: high → destructive ──────────────── */
+
+  .severity-badge--high {
+    background-color: oklch(var(--destructive) / 0.12);
+    color: oklch(var(--destructive));
+    border-color: oklch(var(--destructive) / 0.2);
+  }
+
+  /* ── Severity: critical ────────────────────────── */
+
+  .severity-badge--critical {
+    background-color: oklch(var(--destructive) / 0.25);
+    color: oklch(var(--destructive));
+    border-color: oklch(var(--destructive) / 0.4);
+    font-weight: 600;
+  }
+</style>
diff --git a/services/frontend/src/components/ui/Skeleton.astro b/services/frontend/src/components/ui/Skeleton.astro
new file mode 100644
index 0000000..b1a8e20
--- /dev/null
+++ b/services/frontend/src/components/ui/Skeleton.astro
@@ -0,0 +1,74 @@
+---
+export interface Props {
+  variant?: "text" | "card" | "circle" | "rect";
+  width?: string;
+  height?: string;
+  class?: string;
+}
+
+const {
+  variant = "text",
+  width,
+  height,
+  class: className = "",
+} = Astro.props;
+
+const style: Record<string, string> = {};
+if (width) style.width = width;
+if (height) style.height = height;
+---
+
+<div
+  aria-hidden="true"
+  role="presentation"
+  class:list={[`skeleton skeleton--${variant}`, className]}
+  style={Object.keys(style).length > 0 ? style : undefined}
+>
+  <slot />
+</div>
+
+<style is:global>
+  .skeleton {
+    background: linear-gradient(
+      90deg,
+      oklch(var(--muted)) 25%,
+      oklch(var(--muted-foreground) / 0.15) 50%,
+      oklch(var(--muted)) 75%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 1.5s ease-in-out infinite;
+    border-radius: 0.5rem;
+  }
+
+  /* ── Variant: text (default) ───────────────────── */
+
+  .skeleton--text {
+    width: 100%;
+    height: 1rem;
+    border-radius: calc(var(--radius, 1rem) - 4px);
+  }
+
+  /* ── Variant: card ─────────────────────────────── */
+
+  .skeleton--card {
+    width: 100%;
+    height: 8rem;
+    border-radius: var(--radius, 1rem);
+  }
+
+  /* ── Variant: circle ───────────────────────────── */
+
+  .skeleton--circle {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+  }
+
+  /* ── Variant: rect ─────────────────────────────── */
+
+  .skeleton--rect {
+    width: 100%;
+    height: 3rem;
+    border-radius: calc(var(--radius, 1rem) - 2px);
+  }
+</style>
diff --git a/services/frontend/src/components/ui/Spinner.astro b/services/frontend/src/components/ui/Spinner.astro
new file mode 100644
index 0000000..13c0aba
--- /dev/null
+++ b/services/frontend/src/components/ui/Spinner.astro
@@ -0,0 +1,60 @@
+---
+export interface Props {
+  size?: "sm" | "default" | "lg";
+  class?: string;
+}
+
+const { size = "default", class: className = "" } = Astro.props;
+---
+
+<span
+  aria-label="Loading"
+  role="status"
+  class:list={[`spinner spinner--${size}`, className]}
+>
+  <span class="spinner__ring" aria-hidden="true" />
+</span>
+
+<style is:global>
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+  }
+
+  .spinner__ring {
+    display: block;
+    border-radius: 50%;
+    border-style: solid;
+    border-color: oklch(var(--muted));
+    border-top-color: oklch(var(--primary));
+    animation: spin 0.6s linear infinite;
+  }
+
+  /* ── Sizes ─────────────────────────────────────── */
+
+  .spinner--sm .spinner__ring {
+    width: 1rem;
+    height: 1rem;
+    border-width: 2px;
+  }
+
+  .spinner--default .spinner__ring {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-width: 2.5px;
+  }
+
+  .spinner--lg .spinner__ring {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-width: 3px;
+  }
+</style>
diff --git a/services/frontend/src/features/admin/AdminPanel.tsx b/services/frontend/src/features/admin/AdminPanel.tsx
deleted file mode 100644
index fb3aa04..0000000
--- a/services/frontend/src/features/admin/AdminPanel.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-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/dashboard/components/ChannelProfileDetail.tsx b/services/frontend/src/features/dashboard/components/ChannelProfileDetail.tsx
deleted file mode 100644
index fb44b92..0000000
--- a/services/frontend/src/features/dashboard/components/ChannelProfileDetail.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Hash } from "lucide-react";
-import type { DashboardChannelDetail } from "../../../entities/dashboard/types.js";
-import { ProfileDetail } from "../../../shared/ui";
-
-interface ChannelProfileDetailProps {
-  detail: DashboardChannelDetail | null;
-  loading: boolean;
-  error: string | null;
-  onBack: () => void;
-  onRefetch: () => void;
-}
-
-export function ChannelProfileDetail({
-  detail,
-  loading,
-  error,
-  onBack,
-  onRefetch,
-}: ChannelProfileDetailProps) {
-  if (!detail && !loading && !error) return null;
-
-  return (
-    <ProfileDetail
-      loading={loading}
-      error={error}
-      onRetry={onRefetch}
-      onBack={onBack}
-      icon={<Hash className="h-8 w-8" />}
-      title={detail ? `#${detail.channel_name ?? detail.channel_id}` : ""}
-      subtitle={detail?.channel_id}
-      summaryLabel="AI Channel Summary"
-      summaryText={detail?.culture_summary ?? undefined}
-      lastAnalyzedLabel={
-        detail?.last_analyzed_at
-          ? `Last analyzed: ${new Date(detail.last_analyzed_at).toLocaleString()}`
-          : undefined
-      }
-      stats={{
-        totalLabel: "Total Messages",
-        totalValue: detail?.total_messages ?? 0,
-        cleanLabel: "Clean",
-        cleanValue: detail?.clean_count ?? 0,
-        flaggedLabel: "Flagged",
-        flaggedValue: detail?.flagged_count ?? 0,
-      }}
-      messages={
-        detail?.recent_messages.map((msg) => ({
-          id: msg.id,
-          content: msg.content,
-          created_at: new Date(msg.created_at).toISOString(),
-          ai_status: msg.ai_status,
-        })) ?? []
-      }
-    />
-  );
-}
diff --git a/services/frontend/src/features/dashboard/components/ChannelSummaryList.tsx b/services/frontend/src/features/dashboard/components/ChannelSummaryList.tsx
deleted file mode 100644
index 2f82463..0000000
--- a/services/frontend/src/features/dashboard/components/ChannelSummaryList.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Hash } from "lucide-react";
-import type { DashboardChannel } from "../../../entities/dashboard/types.js";
-import type { SummaryItem } from "../../../shared/ui";
-import { SummaryList } from "../../../shared/ui";
-
-interface ChannelSummaryListProps {
-  channels: DashboardChannel[];
-  loading: boolean;
-  error: string | null;
-  search: string;
-  onSearchChange: (value: string) => void;
-  onLoadMore: () => void;
-  hasMore: boolean;
-  onRefetch: () => void;
-  onSelectChannel: (channelId: string) => void;
-}
-
-export function ChannelSummaryList({
-  channels,
-  loading,
-  error,
-  search,
-  onSearchChange,
-  onLoadMore,
-  hasMore,
-  onRefetch,
-  onSelectChannel,
-}: ChannelSummaryListProps) {
-  const items: SummaryItem[] = channels.map((ch) => ({
-    id: ch.channel_id,
-    label: `#${ch.channel_name ?? ch.channel_id}`,
-    subtitle: ch.flagged_count > 0 ? `${ch.flagged_count} flagged` : undefined,
-    summaryText: ch.culture_summary ?? `${ch.total_messages} messages`,
-    onClick: () => onSelectChannel(ch.channel_id),
-  }));
-
-  return (
-    <SummaryList
-      items={items}
-      loading={loading}
-      error={error}
-      searchValue={search}
-      onSearchChange={onSearchChange}
-      onRetry={onRefetch}
-      hasMore={hasMore}
-      onLoadMore={onLoadMore}
-      loadingMore={loading}
-      renderIcon={() => (
-        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
-          <Hash className="h-5 w-5 text-muted-foreground" />
-        </div>
-      )}
-      emptyMessage="No channels found."
-    />
-  );
-}
diff --git a/services/frontend/src/features/dashboard/components/DashboardStats.tsx b/services/frontend/src/features/dashboard/components/DashboardStats.tsx
deleted file mode 100644
index 11a5537..0000000
--- a/services/frontend/src/features/dashboard/components/DashboardStats.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import { motion } from "framer-motion";
-import {
-  AlertCircle,
-  BarChart3,
-  MessageSquare,
-  Mic,
-  RefreshCw,
-  ShieldAlert,
-  UserCheck,
-  Users,
-} from "lucide-react";
-import { cardItem, cardStagger } from "../../../shared/hooks/useFramerStagger";
-import { useUIState } from "../../../shared/hooks/useUIState.js";
-import { cn } from "../../../shared/lib/utils";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Skeleton,
-  StatusBadge,
-} from "../../../shared/ui";
-import { useDashboardStats } from "../hooks/useDashboard";
-
-export function DashboardStatsContent() {
-  const { stats, loading, error, refetch } = useDashboardStats();
-  const { patchUIState } = useUIState();
-
-  if (loading) {
-    return <StatsSkeleton />;
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col items-center gap-4 py-20 text-muted-foreground">
-        <AlertCircle className="h-10 w-10 text-destructive" />
-        <p className="text-sm">{error}</p>
-        <button
-          onClick={() => refetch()}
-          className="inline-flex items-center gap-1.5 rounded-xl border border-border px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
-        >
-          <RefreshCw className="h-4 w-4" /> Retry
-        </button>
-      </div>
-    );
-  }
-
-  if (!stats) {
-    return (
-      <div className="flex flex-col items-center gap-4 py-20 text-muted-foreground">
-        <BarChart3 className="h-10 w-10" />
-        <p className="text-sm">No data available yet.</p>
-      </div>
-    );
-  }
-
-  const cards = [
-    {
-      title: "Total Messages",
-      value: stats.total_messages.toLocaleString(),
-      icon: MessageSquare,
-      color: "text-primary",
-      bg: "bg-primary/10",
-    },
-    {
-      title: "Today's Messages",
-      value: stats.today_messages.toLocaleString(),
-      icon: MessageSquare,
-      color: "text-emerald-500",
-      bg: "bg-emerald-100",
-    },
-    {
-      title: "Total Users",
-      value: stats.total_users.toLocaleString(),
-      icon: Users,
-      color: "text-blue-500",
-      bg: "bg-blue-100",
-    },
-    {
-      title: "Active Users (24h)",
-      value: stats.active_users_24h.toLocaleString(),
-      icon: UserCheck,
-      color: "text-violet-500",
-      bg: "bg-violet-100",
-    },
-    {
-      title: "Flagged",
-      value: stats.total_flagged.toLocaleString(),
-      icon: ShieldAlert,
-      color: "text-destructive",
-      bg: "bg-destructive/10",
-    },
-    {
-      title: "Clean",
-      value: stats.total_clean.toLocaleString(),
-      icon: ShieldAlert,
-      color: "text-emerald-600",
-      bg: "bg-emerald-100",
-    },
-    {
-      title: "Voice Recordings",
-      value: stats.total_voice_recordings.toLocaleString(),
-      icon: Mic,
-      color: "text-cyan-500",
-      bg: "bg-cyan-100",
-      onClick: () => patchUIState({ activeTab: "live" }),
-    },
-    {
-      title: "AI Profiles",
-      value: stats.total_profiles.toLocaleString(),
-      icon: Users,
-      color: "text-amber-500",
-      bg: "bg-amber-100",
-    },
-  ];
-
-  return (
-    <motion.div
-      className="grid gap-6"
-      variants={cardStagger}
-      initial="initial"
-      animate="animate"
-    >
-      {/* Summary cards grid */}
-      <motion.div
-        variants={cardItem}
-        className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"
-      >
-        {cards.map((card) => (
-          <Card
-            key={card.title}
-            className={cn(
-              "overflow-hidden",
-              card.onClick &&
-                "cursor-pointer transition-colors hover:bg-accent/50",
-            )}
-            onClick={card.onClick}
-          >
-            <CardContent className="p-4">
-              <div className="flex items-center justify-between">
-                <div className="space-y-1">
-                  <p className="text-xs font-medium text-muted-foreground">
-                    {card.title}
-                  </p>
-                  <p className="text-2xl font-bold tracking-tight">
-                    {card.value}
-                  </p>
-                </div>
-                <div className={cn("rounded-xl p-2.5", card.bg)}>
-                  <card.icon className={cn("h-5 w-5", card.color)} />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </motion.div>
-
-      {/* Top channels */}
-      <motion.div variants={cardItem}>
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-primary">Top Channels</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {stats.top_channels.length === 0 ? (
-              <p className="text-sm text-muted-foreground">
-                No channel data yet.
-              </p>
-            ) : (
-              <div className="space-y-2">
-                {stats.top_channels.map((ch) => (
-                  <div
-                    key={ch.channel_id}
-                    className="flex items-center justify-between rounded-lg bg-muted/50 px-3 py-2 text-sm"
-                  >
-                    <span className="truncate text-xs text-muted-foreground">
-                      #{ch.channel_name ?? ch.channel_id}
-                    </span>
-                    <span className="ml-2 shrink-0 font-medium">
-                      {ch.message_count.toLocaleString()}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </motion.div>
-
-      {/* Moderation overview */}
-      <motion.div variants={cardItem}>
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-primary">Moderation Queue</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-3">
-              <StatusBadge status="pending" />
-              <StatusBadge status="processing" />
-              <StatusBadge status="error" />
-            </div>
-            <div className="grid gap-4 sm:grid-cols-3 mt-4">
-              <div className="rounded-xl border border-border bg-card p-4 text-center">
-                <p className="text-2xl font-bold text-muted-foreground">
-                  {stats.moderation_overview.pending}
-                </p>
-                <p className="text-xs text-muted-foreground mt-1">Pending</p>
-              </div>
-              <div className="rounded-xl border border-border bg-card p-4 text-center">
-                <p className="text-2xl font-bold text-amber-500">
-                  {stats.moderation_overview.processing}
-                </p>
-                <p className="text-xs text-muted-foreground mt-1">Processing</p>
-              </div>
-              <div className="rounded-xl border border-border bg-card p-4 text-center">
-                <p className="text-2xl font-bold text-destructive">
-                  {stats.moderation_overview.error}
-                </p>
-                <p className="text-xs text-muted-foreground mt-1">Errors</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </motion.div>
-    </motion.div>
-  );
-}
-
-function StatsSkeleton() {
-  return (
-    <div className="grid gap-6">
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {Array.from({ length: 8 }).map((_, i) => (
-          <Card key={i}>
-            <CardContent className="p-4">
-              <div className="space-y-2">
-                <Skeleton className="h-3 w-24" />
-                <Skeleton className="h-7 w-16" />
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/dashboard/components/UserProfileDetail.tsx b/services/frontend/src/features/dashboard/components/UserProfileDetail.tsx
deleted file mode 100644
index 632b252..0000000
--- a/services/frontend/src/features/dashboard/components/UserProfileDetail.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { User } from "lucide-react";
-import type { DashboardUserDetail } from "../../../entities/dashboard/types.js";
-import { ProfileDetail } from "../../../shared/ui";
-
-interface UserProfileDetailProps {
-  detail: DashboardUserDetail | null;
-  loading: boolean;
-  error: string | null;
-  onBack: () => void;
-  onRefetch: () => void;
-}
-
-export function UserProfileDetail({
-  detail,
-  loading,
-  error,
-  onBack,
-  onRefetch,
-}: UserProfileDetailProps) {
-  if (!detail && !loading && !error) return null;
-
-  const icon = detail?.avatar_url ? (
-    <img
-      src={detail.avatar_url}
-      alt=""
-      className="h-16 w-16 rounded-full object-cover ring-2 ring-border"
-    />
-  ) : (
-    <User className="h-8 w-8" />
-  );
-
-  return (
-    <ProfileDetail
-      loading={loading}
-      error={error}
-      onRetry={onRefetch}
-      onBack={onBack}
-      icon={icon}
-      title={detail?.username ?? detail?.user_id ?? ""}
-      subtitle={detail?.user_id}
-      summaryLabel="AI Profile Summary"
-      summaryText={detail?.profile_summary ?? undefined}
-      lastAnalyzedLabel={
-        detail?.last_analyzed_at
-          ? `Last analyzed: ${new Date(detail.last_analyzed_at).toLocaleString()}`
-          : undefined
-      }
-      stats={{
-        totalLabel: "Total Messages",
-        totalValue: detail?.total_messages ?? 0,
-        cleanLabel: "Clean",
-        cleanValue: detail?.clean_count ?? 0,
-        flaggedLabel: "Flagged",
-        flaggedValue: detail?.flagged_count ?? 0,
-      }}
-      messages={
-        detail?.recent_messages.map((msg) => ({
-          id: msg.id,
-          content: msg.content,
-          created_at: new Date(msg.created_at).toISOString(),
-          ai_status: msg.ai_status,
-        })) ?? []
-      }
-    />
-  );
-}
diff --git a/services/frontend/src/features/dashboard/components/UserSummaryList.tsx b/services/frontend/src/features/dashboard/components/UserSummaryList.tsx
deleted file mode 100644
index 66b51d2..0000000
--- a/services/frontend/src/features/dashboard/components/UserSummaryList.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { User } from "lucide-react";
-import type { DashboardUser } from "../../../entities/dashboard/types.js";
-import type { SummaryItem } from "../../../shared/ui";
-import { SummaryList } from "../../../shared/ui";
-
-interface UserSummaryListProps {
-  users: DashboardUser[];
-  loading: boolean;
-  error: string | null;
-  search: string;
-  onSearchChange: (value: string) => void;
-  onLoadMore: () => void;
-  hasMore: boolean;
-  onRefetch: () => void;
-  onSelectUser: (userId: string) => void;
-}
-
-export function UserSummaryList({
-  users,
-  loading,
-  error,
-  search,
-  onSearchChange,
-  onLoadMore,
-  hasMore,
-  onRefetch,
-  onSelectUser,
-}: UserSummaryListProps) {
-  const items: SummaryItem[] = users.map((u) => ({
-    id: u.user_id,
-    label: u.username ?? u.user_id,
-    subtitle: u.trust_score !== null ? `Trust: ${u.trust_score}` : undefined,
-    summaryText: u.profile_summary ?? `${u.total_messages} messages`,
-    onClick: () => onSelectUser(u.user_id),
-  }));
-
-  const avatarMap = new Map(users.map((u) => [u.user_id, u.avatar_url]));
-
-  return (
-    <SummaryList
-      items={items}
-      loading={loading}
-      error={error}
-      searchValue={search}
-      onSearchChange={onSearchChange}
-      onRetry={onRefetch}
-      hasMore={hasMore}
-      onLoadMore={onLoadMore}
-      loadingMore={loading}
-      renderIcon={(item) => {
-        const avatarUrl = avatarMap.get(item.id);
-        return avatarUrl ? (
-          <img
-            src={avatarUrl}
-            alt=""
-            className="h-10 w-10 rounded-full object-cover"
-          />
-        ) : (
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
-            <User className="h-5 w-5 text-muted-foreground" />
-          </div>
-        );
-      }}
-      emptyMessage="No users found."
-    />
-  );
-}
diff --git a/services/frontend/src/features/dashboard/hooks/useDashboard.ts b/services/frontend/src/features/dashboard/hooks/useDashboard.ts
deleted file mode 100644
index ee983ef..0000000
--- a/services/frontend/src/features/dashboard/hooks/useDashboard.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import type { DashboardStats } from "../../../entities/dashboard/types.js";
-import {
-  getDashboardChannelDetail,
-  getDashboardStats,
-  getDashboardUserDetail,
-  listDashboardChannels,
-  listDashboardUsers,
-} from "../../../shared/api/client.js";
-import { useItemDetail } from "../../../shared/hooks/useItemDetail";
-import { usePaginatedList } from "../../../shared/hooks/usePaginatedList";
-
-import { createLogger } from "../../../shared/lib/logger.js";
-
-const logger = createLogger("use-dashboard");
-
-/**
- * Fetch dashboard aggregate stats.
- */
-export function useDashboardStats() {
-  const [stats, setStats] = useState<DashboardStats | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetch = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await getDashboardStats();
-      setStats(data);
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : "Failed to load stats";
-      setError(msg);
-      logger.error("[useDashboardStats]", { error: msg });
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetch().catch(() => undefined);
-  }, [fetch]);
-
-  return { stats, loading, error, refetch: fetch };
-}
-
-/**
- * Fetch paginated user list with optional search.
- */
-export function useDashboardUsers() {
-  const paginated = usePaginatedList(
-    (params) =>
-      listDashboardUsers({
-        limit: params.limit,
-        search: params.search,
-        cursor: params.cursor,
-      }).then((r) => ({ data: r.data, nextCursor: r.nextCursor })),
-    "",
-  );
-
-  return {
-    users: paginated.data,
-    loading: paginated.loading,
-    error: paginated.error,
-    search: paginated.search,
-    setSearch: paginated.setSearch,
-    loadMore: paginated.loadMore,
-    hasMore: paginated.hasMore,
-    refetch: paginated.refetch,
-  };
-}
-
-/**
- * Fetch a single user detail by userId.
- */
-export function useDashboardUserDetail(userId: string | null) {
-  const { data, loading, error, refetch } = useItemDetail(
-    (_guildId, entityId) => getDashboardUserDetail(entityId),
-    "",
-    userId,
-    "user",
-  );
-
-  return { detail: data, loading, error, refetch };
-}
-
-/**
- * Fetch paginated channel list with optional search.
- */
-export function useDashboardChannels() {
-  const paginated = usePaginatedList(
-    (params) =>
-      listDashboardChannels({
-        limit: params.limit,
-        search: params.search,
-        guild_id: params.guildId,
-        cursor: params.cursor,
-      }).then((r) => ({ data: r.data, nextCursor: r.nextCursor })),
-    "",
-  );
-
-  return {
-    channels: paginated.data,
-    loading: paginated.loading,
-    error: paginated.error,
-    search: paginated.search,
-    setSearch: paginated.setSearch,
-    loadMore: paginated.loadMore,
-    hasMore: paginated.hasMore,
-    refetch: paginated.refetch,
-  };
-}
-
-/**
- * Fetch a single channel detail by channelId.
- */
-export function useDashboardChannelDetail(channelId: string | null) {
-  const { data, loading, error, refetch } = useItemDetail(
-    (_guildId, entityId) => getDashboardChannelDetail(entityId),
-    "",
-    channelId,
-    "channel",
-  );
-
-  return { detail: data, loading, error, refetch };
-}
diff --git a/services/frontend/src/features/dashboard/index.tsx b/services/frontend/src/features/dashboard/index.tsx
deleted file mode 100644
index 9d4ecb8..0000000
--- a/services/frontend/src/features/dashboard/index.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-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";
-import { DashboardStatsContent } from "./components/DashboardStats";
-import { UserProfileDetail } from "./components/UserProfileDetail";
-import { UserSummaryList } from "./components/UserSummaryList";
-import {
-  useDashboardChannelDetail,
-  useDashboardChannels,
-  useDashboardUserDetail,
-  useDashboardUsers,
-} from "./hooks/useDashboard";
-
-export function DashboardPanel() {
-  const [activeTab, setActiveTab] = useState("stats");
-  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
-  const [selectedChannelId, setSelectedChannelId] = useState<string | null>(
-    null,
-  );
-  const {
-    users,
-    loading: usersLoading,
-    error: usersError,
-    search: userSearch,
-    setSearch: setUserSearch,
-    loadMore: loadMoreUsers,
-    hasMore: hasMoreUsers,
-    refetch: refetchUsers,
-  } = useDashboardUsers();
-  const {
-    detail: userDetail,
-    loading: userDetailLoading,
-    error: userDetailError,
-    refetch: refetchUserDetail,
-  } = useDashboardUserDetail(selectedUserId);
-  const {
-    channels,
-    loading: channelsLoading,
-    error: channelsError,
-    search: channelSearch,
-    setSearch: setChannelSearch,
-    loadMore: loadMoreChannels,
-    hasMore: hasMoreChannels,
-    refetch: refetchChannels,
-  } = useDashboardChannels();
-  const {
-    detail: channelDetail,
-    loading: channelDetailLoading,
-    error: channelDetailError,
-    refetch: refetchChannelDetail,
-  } = useDashboardChannelDetail(selectedChannelId);
-
-  // Show user detail view
-  if (selectedUserId) {
-    return (
-      <UserProfileDetail
-        detail={userDetail}
-        loading={userDetailLoading}
-        error={userDetailError}
-        onBack={() => {
-          setSelectedUserId(null);
-        }}
-        onRefetch={refetchUserDetail}
-      />
-    );
-  }
-
-  // Show channel detail view
-  if (selectedChannelId) {
-    return (
-      <ChannelProfileDetail
-        detail={channelDetail}
-        loading={channelDetailLoading}
-        error={channelDetailError}
-        onBack={() => {
-          setSelectedChannelId(null);
-        }}
-        onRefetch={refetchChannelDetail}
-      />
-    );
-  }
-
-  return (
-    <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-      <TabsList className="mb-6">
-        <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">
-        <DashboardStatsContent />
-      </TabsContent>
-
-      <TabsContent value="users">
-        <UserSummaryList
-          users={users}
-          loading={usersLoading}
-          error={usersError}
-          search={userSearch}
-          onSearchChange={setUserSearch}
-          onLoadMore={loadMoreUsers}
-          hasMore={hasMoreUsers}
-          onRefetch={refetchUsers}
-          onSelectUser={setSelectedUserId}
-        />
-      </TabsContent>
-
-      <TabsContent value="channels">
-        <ChannelSummaryList
-          channels={channels}
-          loading={channelsLoading}
-          error={channelsError}
-          search={channelSearch}
-          onSearchChange={setChannelSearch}
-          onLoadMore={loadMoreChannels}
-          hasMore={hasMoreChannels}
-          onRefetch={refetchChannels}
-          onSelectChannel={setSelectedChannelId}
-        />
-      </TabsContent>
-
-      <TabsContent value="admin">
-        <AdminPanel />
-      </TabsContent>
-    </Tabs>
-  );
-}
diff --git a/services/frontend/src/features/live/components/ActiveSpeakers.tsx b/services/frontend/src/features/live/components/ActiveSpeakers.tsx
deleted file mode 100644
index 96e80ce..0000000
--- a/services/frontend/src/features/live/components/ActiveSpeakers.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { ActiveSpeaker } from "../../../entities/voice/types.js";
-import { EmptyStateMascot } from "../../../widgets/mascot/MascotImage";
-
-interface ActiveSpeakersProps {
-  speakers: ActiveSpeaker[];
-}
-
-export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
-  if (speakers.length === 0) {
-    return <EmptyStateMascot />;
-  }
-
-  return (
-    <div className="space-y-2">
-      {speakers.map((s) => {
-        const key = s.userId ?? s.id ?? `speaker-${s.username}`;
-        return (
-          <div
-            key={key}
-            className="flex items-center gap-3 rounded-xl border border-border bg-card p-3"
-          >
-            <img
-              src={s.avatar}
-              alt=""
-              className="h-8 w-8 rounded-full object-cover ring-2 ring-primary/30"
-            />
-            <div className="min-w-0">
-              <div className="truncate text-sm font-medium">{s.username}</div>
-              <div className="flex items-center gap-1.5">
-                <span
-                  className={`inline-block h-2 w-2 rounded-full ${
-                    s.speaking ? "bg-emerald-500" : "bg-muted-foreground/40"
-                  }`}
-                />
-                <span
-                  className={`text-xs font-medium ${
-                    s.speaking ? "text-emerald-600" : "text-muted-foreground"
-                  }`}
-                >
-                  {s.speaking ? "Speaking" : "Silent"}
-                </span>
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/live/components/AudioVisualizer.tsx b/services/frontend/src/features/live/components/AudioVisualizer.tsx
deleted file mode 100644
index ab6c113..0000000
--- a/services/frontend/src/features/live/components/AudioVisualizer.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useEffect, useRef } from "react";
-
-interface AudioVisualizerProps {
-  levels: number[];
-}
-
-export function AudioVisualizer({ levels }: AudioVisualizerProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const container = containerRef.current;
-    if (!canvas || !container) return;
-
-    const ro = new ResizeObserver(() => {
-      const rect = container.getBoundingClientRect();
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = rect.width * dpr;
-      canvas.height = 128 * dpr;
-      canvas.style.height = "128px";
-    });
-    ro.observe(container);
-    return () => ro.disconnect();
-  }, []);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    const dpr = window.devicePixelRatio || 1;
-    const width = canvas.width / dpr;
-    const height = canvas.height / dpr;
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-    const barWidth = width / levels.length;
-    const maxBarHeight = height * 0.85;
-
-    const gradient = ctx.createLinearGradient(0, 0, 0, height);
-    gradient.addColorStop(0, "#23a1eb");
-    gradient.addColorStop(1, "#3eb0f2");
-
-    for (let i = 0; i < levels.length; i++) {
-      const level = levels[i];
-      const barHeight = Math.min(maxBarHeight, level * maxBarHeight);
-      const x = i * barWidth;
-      const y = height - barHeight;
-
-      ctx.fillStyle = gradient;
-
-      const radius = barWidth * 0.4;
-      ctx.beginPath();
-      ctx.moveTo(x + radius, y);
-      ctx.lineTo(x + barWidth - radius, y);
-      ctx.quadraticCurveTo(x + barWidth, y, x + barWidth, y + radius);
-      ctx.lineTo(x + barWidth, height);
-      ctx.lineTo(x, height);
-      ctx.lineTo(x, y + radius);
-      ctx.quadraticCurveTo(x, y, x + radius, y);
-      ctx.fill();
-    }
-  }, [levels]);
-
-  return (
-    <div ref={containerRef} className="relative w-full">
-      <canvas
-        ref={canvasRef}
-        width={0}
-        height={0}
-        className="w-full rounded-lg bg-primary/5"
-        style={{ height: "128px" }}
-      />
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/live/components/MicLevelMeter.tsx b/services/frontend/src/features/live/components/MicLevelMeter.tsx
deleted file mode 100644
index e83b52d..0000000
--- a/services/frontend/src/features/live/components/MicLevelMeter.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// ─── Mic level meter — vertical bar showing outgoing audio RMS level ─────────
-
-interface MicLevelMeterProps {
-  level: number; // 0-1
-}
-
-export function MicLevelMeter({ level }: MicLevelMeterProps) {
-  const pct = Math.round(level * 100);
-
-  // Color gradient: green <-> yellow <-> red
-  const hue = 120 - level * 120; // 120 (green) -> 0 (red)
-  const bg = `hsl(${hue}, 80%, 45%)`;
-
-  return (
-    <div
-      className="relative flex h-6 w-24 overflow-hidden rounded-full bg-muted"
-      role="meter"
-      aria-valuenow={pct}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-label="Microphone level"
-    >
-      <div
-        className="h-full rounded-full transition-[width,background-color] duration-75 ease-linear"
-        style={{ width: `${pct}%`, backgroundColor: bg }}
-      />
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/live/components/MusicSubPanel.tsx b/services/frontend/src/features/live/components/MusicSubPanel.tsx
deleted file mode 100644
index 1b19855..0000000
--- a/services/frontend/src/features/live/components/MusicSubPanel.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Music2, SkipForward, Square, Volume2, VolumeX } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Button, Input } from "../../../shared/ui";
-
-interface MusicSubPanelProps {
-  volume: number;
-  onVolumeChange: (v: number) => void;
-  onQueue: (source: string) => void;
-  onSkip: () => void;
-  onStop: () => void;
-  loading: boolean;
-}
-
-export function MusicSubPanel({
-  volume,
-  onVolumeChange,
-  onQueue,
-  onSkip,
-  onStop,
-  loading,
-}: MusicSubPanelProps) {
-  const [source, setSource] = useState("");
-  const safeVolume = Number.isFinite(volume)
-    ? Math.max(0, Math.min(1, volume))
-    : 1;
-  const [draftVolume, setDraftVolume] = useState(Math.round(safeVolume * 100));
-  const [muted, setMuted] = useState(false);
-  const prevVolumeRef = useRef(safeVolume);
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Proper debounce: setTimeout instead of setInterval polling
-  useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => {
-      const normalized = draftVolume / 100;
-      if (Math.abs(normalized - safeVolume) >= 0.001)
-        onVolumeChange(normalized);
-    }, 200);
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
-  }, [draftVolume, safeVolume, onVolumeChange]);
-
-  const handleMute = useCallback(() => {
-    if (muted) {
-      // Unmute: restore previous volume
-      const restore = prevVolumeRef.current;
-      setDraftVolume(Math.round(restore * 100));
-      onVolumeChange(restore);
-      setMuted(false);
-    } else {
-      // Mute: save current, set to 0
-      prevVolumeRef.current = safeVolume;
-      setDraftVolume(0);
-      onVolumeChange(0);
-      setMuted(true);
-    }
-  }, [muted, safeVolume, onVolumeChange]);
-
-  const submit = () => {
-    const t = source.trim();
-    if (!t) return;
-    onQueue(t);
-    setSource("");
-  };
-
-  return (
-    <div className="rounded-xl border border-border bg-card p-4 shadow-sm space-y-4">
-      <Input
-        value={source}
-        onChange={(e) => setSource(e.target.value)}
-        onKeyDown={(e) => e.key === "Enter" && submit()}
-        placeholder="YouTube URL, Spotify track, or search terms"
-      />
-      <div className="flex items-center gap-3">
-        <button
-          type="button"
-          onClick={handleMute}
-          className="shrink-0 text-muted-foreground hover:text-foreground"
-        >
-          {muted ? (
-            <VolumeX className="h-4 w-4" />
-          ) : (
-            <Volume2 className="h-4 w-4" />
-          )}
-        </button>
-        <input
-          type="range"
-          min={0}
-          max={100}
-          step={1}
-          value={draftVolume}
-          onChange={(e) => {
-            setDraftVolume(Number(e.target.value));
-            if (muted) setMuted(false);
-          }}
-          className="h-2 w-full cursor-pointer accent-primary"
-        />
-        <span className="w-10 shrink-0 text-right text-sm tabular-nums text-muted-foreground">
-          {draftVolume}%
-        </span>
-      </div>
-      <div className="flex flex-wrap gap-2">
-        <Button disabled={loading || !source.trim()} onClick={submit}>
-          <Music2 className="mr-1.5 h-4 w-4" /> Queue
-        </Button>
-        <Button variant="secondary" disabled={loading} onClick={onSkip}>
-          <SkipForward className="mr-1.5 h-4 w-4" /> Skip
-        </Button>
-        <Button variant="destructive" disabled={loading} onClick={onStop}>
-          <Square className="mr-1.5 h-4 w-4" /> Stop
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/live/components/NowPlaying.tsx b/services/frontend/src/features/live/components/NowPlaying.tsx
deleted file mode 100644
index 2ea9d74..0000000
--- a/services/frontend/src/features/live/components/NowPlaying.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { MonitorUp, Music2 } from "lucide-react";
-import type { MediaItem } from "../../../entities/media/types.js";
-import { Badge } from "../../../shared/ui";
-
-interface NowPlayingProps {
-  current: MediaItem | null;
-  queue: MediaItem[];
-}
-
-export function NowPlaying({ current, queue }: NowPlayingProps) {
-  if (!current) return null;
-
-  return (
-    <div className="rounded-xl border border-border bg-card shadow-sm">
-      <div className="p-4">
-        <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
-            {current.mode === "screen" ? (
-              <MonitorUp className="h-5 w-5" />
-            ) : (
-              <Music2 className="h-5 w-5" />
-            )}
-          </div>
-          <div className="min-w-0 flex-1">
-            <div className="truncate font-medium">{current.title}</div>
-            <div className="truncate text-xs text-muted-foreground">
-              {current.source}
-            </div>
-          </div>
-          <Badge variant={current.mode === "screen" ? "warning" : "success"}>
-            {current.mode ?? "music"}
-          </Badge>
-        </div>
-      </div>
-
-      {queue.length > 0 && (
-        <div className="border-t border-border p-4">
-          <div className="mb-2 text-sm font-medium">Queue ({queue.length})</div>
-          <div className="space-y-1.5">
-            {queue.map((item, i) => (
-              <div
-                key={`${item.source}-${i}`}
-                className="flex items-center gap-3 rounded-lg border-l-2 border-l-primary border-border bg-card p-2.5 text-sm"
-              >
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
-                  {i + 1}
-                </span>
-                <div className="min-w-0">
-                  <div className="truncate font-medium">{item.title}</div>
-                  <div className="truncate text-xs text-muted-foreground">
-                    {item.source}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/live/components/RecordingsSubPanel.tsx b/services/frontend/src/features/live/components/RecordingsSubPanel.tsx
deleted file mode 100644
index 43ecfad..0000000
--- a/services/frontend/src/features/live/components/RecordingsSubPanel.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-// ─── Recordings Sub-Panel ──
-
-import { Download, Mic, Trash2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import type { VoiceRecording } from "../../../entities/recording/types.js";
-import { deleteRecording, listRecordings } from "../../../shared/api/client";
-import { formatBytes, formatDate } from "../../../shared/lib/utils";
-import { Badge, Button, Skeleton } from "../../../shared/ui";
-import { EmptyStateMascot } from "../../../widgets/mascot/MascotImage";
-import { WaveformPlayer } from "./WaveformPlayer";
-
-export function RecordingsSubPanel() {
-  const [recordings, setRecordings] = useState<VoiceRecording[]>([]);
-  const [nextCursor, setNextCursor] = useState<string | null>(null);
-  const [hasMore, setHasMore] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [deletingIds, setDeletingIds] = useState<Set<string>>(new Set());
-
-  const loadRecordings = useCallback(
-    async (opts?: { signal?: AbortSignal }) => {
-      try {
-        setLoading(true);
-        setError(null);
-        const data = await listRecordings({ limit: 50 });
-        if (!opts?.signal?.aborted) {
-          setRecordings(data.items);
-          setNextCursor(data.nextCursor);
-          setHasMore(data.hasMore);
-        }
-      } catch (err) {
-        if (!opts?.signal?.aborted)
-          setError(err instanceof Error ? err.message : String(err));
-      } finally {
-        if (!opts?.signal?.aborted) setLoading(false);
-      }
-    },
-    [],
-  );
-
-  const loadMore = useCallback(async () => {
-    if (!nextCursor || loadingMore) return;
-    try {
-      setLoadingMore(true);
-      const data = await listRecordings({ limit: 50, cursor: nextCursor });
-      setRecordings((prev) => [...prev, ...data.items]);
-      setNextCursor(data.nextCursor);
-      setHasMore(data.hasMore);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoadingMore(false);
-    }
-  }, [nextCursor, loadingMore]);
-
-  useEffect(() => {
-    const ab = new AbortController();
-    loadRecordings({ signal: ab.signal });
-    const handler = () => loadRecordings();
-    window.addEventListener("voice_recording_uploaded", handler);
-    return () => {
-      ab.abort();
-      window.removeEventListener("voice_recording_uploaded", handler);
-    };
-  }, [loadRecordings]);
-
-  const handleDelete = useCallback(async (id: string) => {
-    if (!confirm("Delete this recording?")) return;
-    setDeletingIds((prev) => new Set(prev).add(id));
-    try {
-      await deleteRecording(id);
-      setRecordings((prev) => prev.filter((r) => r.id !== id));
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setDeletingIds((prev) => {
-        const next = new Set(prev);
-        next.delete(id);
-        return next;
-      });
-    }
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="space-y-3">
-        {[1, 2, 3].map((i) => (
-          <div
-            key={i}
-            className="flex items-center gap-4 rounded-xl border border-border bg-card p-4"
-          >
-            <Skeleton className="h-10 w-10 rounded-xl" />
-            <div className="flex-1 space-y-2">
-              <Skeleton className="h-4 w-48" />
-              <Skeleton className="h-3 w-64" />
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="rounded-xl border border-dashed border-destructive p-6 text-center text-sm text-destructive">
-        {error}
-        <div className="mt-2">
-          <Button size="sm" variant="outline" onClick={() => loadRecordings()}>
-            Retry
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  if (recordings.length === 0) {
-    return <EmptyStateMascot />;
-  }
-
-  return (
-    <div className="space-y-3">
-      {recordings.map((rec) => (
-        <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" />
-            </div>
-            <div className="min-w-0 flex-1">
-              <div className="truncate font-medium">{rec.filename}</div>
-              <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
-                <span>{rec.username}</span>
-                <span>·</span>
-                <span>{rec.channel_name ?? rec.channel_id ?? "unknown"}</span>
-                <span>·</span>
-                <span>{formatDate(rec.created_at)}</span>
-                <span>·</span>
-                <span>{formatBytes(rec.size_bytes)}</span>
-              </div>
-              {rec.upload_error && (
-                <div className="mt-1 text-xs text-destructive">
-                  {rec.upload_error}
-                </div>
-              )}
-              {rec.transcription && (
-                <div className="mt-1 line-clamp-2 text-xs text-muted-foreground italic">
-                  {rec.transcription}
-                </div>
-              )}
-            </div>
-            <div className="flex shrink-0 items-center gap-2">
-              <Button
-                size="sm"
-                variant="ghost"
-                disabled={deletingIds.has(rec.id)}
-                onClick={() => handleDelete(rec.id)}
-                className="text-muted-foreground hover:text-destructive"
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
-              <Badge
-                variant={
-                  rec.upload_status === "uploaded"
-                    ? "success"
-                    : rec.upload_status === "failed"
-                      ? "destructive"
-                      : "secondary"
-                }
-              >
-                {rec.upload_status}
-              </Badge>
-              {rec.download_url && (
-                <a
-                  href={rec.download_url}
-                  download={rec.filename}
-                  className="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
-                >
-                  <Download className="h-4 w-4" />
-                </a>
-              )}
-            </div>
-          </div>
-          {rec.download_url && (
-            <div className="-mt-2 px-4 pb-4">
-              <WaveformPlayer
-                downloadUrl={rec.download_url}
-                filename={rec.filename}
-              />
-            </div>
-          )}
-        </div>
-      ))}
-      {hasMore && (
-        <div className="flex justify-center pt-2">
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={loadingMore}
-            onClick={loadMore}
-          >
-            {loadingMore ? "Loading..." : "Load More"}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/live/components/ScreenSubPanel.tsx b/services/frontend/src/features/live/components/ScreenSubPanel.tsx
deleted file mode 100644
index 05c8dbd..0000000
--- a/services/frontend/src/features/live/components/ScreenSubPanel.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { MonitorUp, SkipForward, Square } from "lucide-react";
-import { useState } from "react";
-import { Button, Input } from "../../../shared/ui";
-
-interface ScreenSubPanelProps {
-  onStart: (source: string) => void;
-  onSkip: () => void;
-  onStop: () => void;
-  loading: boolean;
-}
-
-export function ScreenSubPanel({
-  onStart,
-  onSkip,
-  onStop,
-  loading,
-}: ScreenSubPanelProps) {
-  const [source, setSource] = useState("");
-  const submit = () => {
-    const t = source.trim();
-    if (!t) return;
-    onStart(t);
-    setSource("");
-  };
-
-  return (
-    <div className="rounded-xl border border-border bg-card p-4 shadow-sm space-y-4">
-      <Input
-        value={source}
-        onChange={(e) => setSource(e.target.value)}
-        onKeyDown={(e) => e.key === "Enter" && submit()}
-        placeholder="Screen share URL or local file path"
-      />
-      <div className="flex flex-wrap gap-2">
-        <Button disabled={loading || !source.trim()} onClick={submit}>
-          <MonitorUp className="mr-1.5 h-4 w-4" /> Start
-        </Button>
-        <Button variant="secondary" disabled={loading} onClick={onSkip}>
-          <SkipForward className="mr-1.5 h-4 w-4" /> Skip
-        </Button>
-        <Button variant="destructive" disabled={loading} onClick={onStop}>
-          <Square className="mr-1.5 h-4 w-4" /> Stop
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/live/components/VoiceConnectionCard.tsx b/services/frontend/src/features/live/components/VoiceConnectionCard.tsx
deleted file mode 100644
index 47381de..0000000
--- a/services/frontend/src/features/live/components/VoiceConnectionCard.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Headphones, Radio } from "lucide-react";
-import type { Channel, Guild } from "../../../entities/guild/types.js";
-import type { VoiceStatus } from "../../../entities/voice/types.js";
-import { Button, Select } from "../../../shared/ui";
-import { MicLevelMeter } from "./MicLevelMeter";
-
-interface VoiceConnectionCardProps {
-  guilds: Guild[];
-  voiceChannels: Channel[];
-  selectedGuild: string;
-  selectedChannel: string;
-  status: VoiceStatus;
-  voiceLoading: boolean;
-  isListening: boolean;
-  isStreaming: boolean;
-  micLevel: number;
-  onGuildChange: (id: string) => void;
-  onChannelChange: (id: string) => void;
-  onJoin: () => void;
-  onDisconnect: () => void;
-  onListenToggle: () => void;
-  onStreamingToggle: () => void;
-}
-
-export function VoiceConnectionCard({
-  guilds,
-  voiceChannels,
-  selectedGuild,
-  selectedChannel,
-  status,
-  voiceLoading,
-  isListening,
-  isStreaming,
-  micLevel,
-  onGuildChange,
-  onChannelChange,
-  onJoin,
-  onDisconnect,
-  onListenToggle,
-  onStreamingToggle,
-}: VoiceConnectionCardProps) {
-  return (
-    <div className="rounded-xl border border-border bg-card shadow-sm">
-      <div className="p-6">
-        <h3 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
-          <Radio className="h-5 w-5 text-primary" /> Voice Bridge
-        </h3>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Join a Discord voice channel, listen, and transmit audio.
-        </p>
-
-        <div className="mt-4 grid gap-4 md:grid-cols-2">
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-foreground">Guild</label>
-            <Select
-              value={selectedGuild}
-              onChange={(e) => onGuildChange(e.target.value)}
-              placeholder="Select guild"
-              options={guilds.map((g) => ({ value: g.id, label: g.name }))}
-            />
-          </div>
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-foreground">
-              Voice Channel
-            </label>
-            <Select
-              value={selectedChannel}
-              onChange={(e) => onChannelChange(e.target.value)}
-              placeholder="Select voice channel"
-              options={voiceChannels.map((c) => ({
-                value: c.id,
-                label: c.name,
-              }))}
-            />
-          </div>
-        </div>
-
-        <div className="mt-4 flex flex-wrap gap-2">
-          <Button
-            disabled={!selectedGuild || !selectedChannel || voiceLoading}
-            onClick={onJoin}
-            className="bg-primary text-primary-foreground hover:bg-primary/90"
-          >
-            {status.connected ? "Reconnect" : "Join Voice"}
-          </Button>
-          <Button
-            variant="destructive"
-            disabled={!status.connected || voiceLoading}
-            onClick={onDisconnect}
-          >
-            Disconnect
-          </Button>
-          <Button
-            variant={isListening ? "secondary" : "outline"}
-            onClick={onListenToggle}
-          >
-            <Headphones className="mr-1.5 h-4 w-4" />{" "}
-            {isListening ? "Stop Listening" : "Listen"}
-          </Button>
-          <Button
-            variant={isStreaming ? "secondary" : "outline"}
-            onClick={onStreamingToggle}
-          >
-            <Radio className="mr-1.5 h-4 w-4" />{" "}
-            {isStreaming ? "Stop Transmit" : "Transmit"}
-          </Button>
-          {isStreaming && (
-            <div className="flex items-center gap-2 pl-1">
-              <span className="animate-pulse rounded-full bg-emerald-500 px-2 py-0.5 text-xs font-medium text-white">
-                Hold Space
-              </span>
-              <MicLevelMeter level={micLevel} />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/live/components/WaveformPlayer.tsx b/services/frontend/src/features/live/components/WaveformPlayer.tsx
deleted file mode 100644
index 5a7418b..0000000
--- a/services/frontend/src/features/live/components/WaveformPlayer.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-// ─── Waveform Player — audio visualizer with seekable waveform bars ──────────
-
-import { Pause, Play } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { createLogger } from "../../../shared/lib/logger";
-
-const logger = createLogger("waveform-player");
-
-const BAR_COUNT = 64;
-const SAMPLE_RATE = 24000;
-
-interface WaveformPlayerProps {
-  downloadUrl: string;
-  filename: string;
-}
-
-export function WaveformPlayer({ downloadUrl, filename }: WaveformPlayerProps) {
-  const [playing, setPlaying] = useState(false);
-  const [peaks, setPeaks] = useState<number[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const audioContextRef = useRef<AudioContext | null>(null);
-  const sourceRef = useRef<AudioBufferSourceNode | null>(null);
-  const startTimeRef = useRef(0);
-  const startOffsetRef = useRef(0);
-  const rafRef = useRef<number>(0);
-  const decodedRef = useRef<AudioBuffer | null>(null);
-  const durationRef = useRef(0);
-
-  // Decode audio on mount
-  useEffect(() => {
-    let cancelled = false;
-    const ctx = new AudioContext();
-    audioContextRef.current = ctx;
-
-    fetch(downloadUrl)
-      .then((res) => {
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        return res.arrayBuffer();
-      })
-      .then((buf) => ctx.decodeAudioData(buf))
-      .then((audioBuffer) => {
-        if (cancelled) return;
-        decodedRef.current = audioBuffer;
-        durationRef.current = audioBuffer.duration;
-
-        // Compute waveform peaks
-        const channel = audioBuffer.getChannelData(0);
-        const samplesPerBar = Math.floor(channel.length / BAR_COUNT);
-        const peakValues: number[] = [];
-        for (let i = 0; i < BAR_COUNT; i++) {
-          let max = 0;
-          const start = i * samplesPerBar;
-          const end = Math.min(start + samplesPerBar, channel.length);
-          for (let j = start; j < end; j++) {
-            const abs = Math.abs(channel[j]);
-            if (abs > max) max = abs;
-          }
-          // Clamp so silent sections still show a tiny bar
-          peakValues.push(Math.max(0.01, max));
-        }
-        setPeaks(peakValues);
-        setLoading(false);
-      })
-      .catch((err) => {
-        if (cancelled) return;
-        const msg = err instanceof Error ? err.message : String(err);
-        logger.error("Failed to decode audio", { error: msg });
-        setError(msg);
-        setLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-      ctx.close();
-    };
-  }, [downloadUrl]);
-
-  // Draw waveform on canvas whenever peaks change or while playing
-  const drawWaveform = useCallback(
-    (progress = 0) => {
-      const canvas = canvasRef.current;
-      const container = containerRef.current;
-      if (!canvas || !container) return;
-      const dpr = window.devicePixelRatio || 1;
-      const rect = container.getBoundingClientRect();
-      canvas.width = rect.width * dpr;
-      canvas.height = 64 * dpr;
-      canvas.style.height = "64px";
-
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-      ctx.clearRect(0, 0, rect.width, 64);
-
-      if (peaks.length === 0) return;
-
-      const barWidth = rect.width / peaks.length;
-      const barGap = Math.max(1, barWidth * 0.15);
-      const barActualWidth = barWidth - barGap;
-      const progressPixel = rect.width * progress;
-
-      for (let i = 0; i < peaks.length; i++) {
-        const x = i * barWidth;
-        const height = Math.max(2, peaks[i] * 50);
-        const y = 32 - height / 2;
-
-        // Color: played vs unplayed
-        const isPlayed = x + barWidth <= progressPixel;
-        ctx.fillStyle = isPlayed ? "#23a1eb" : "#334155";
-        ctx.fillRect(x, y, barActualWidth, height);
-      }
-    },
-    [peaks],
-  );
-
-  // Initial draw when peaks change
-  useEffect(() => {
-    drawWaveform();
-  }, [drawWaveform]);
-
-  // Animation loop while playing
-  useEffect(() => {
-    if (!playing || !decodedRef.current) return;
-
-    const tick = () => {
-      if (!audioContextRef.current) return;
-      const elapsed =
-        audioContextRef.current.currentTime - startTimeRef.current;
-      const progress = (elapsed + startOffsetRef.current) / durationRef.current;
-      drawWaveform(Math.min(1, Math.max(0, progress)));
-
-      if (progress >= 1) {
-        setPlaying(false);
-        return;
-      }
-      rafRef.current = requestAnimationFrame(tick);
-    };
-    rafRef.current = requestAnimationFrame(tick);
-
-    return () => cancelAnimationFrame(rafRef.current);
-  }, [playing, drawWaveform]);
-
-  const handleTogglePlay = useCallback(() => {
-    const ctx = audioContextRef.current;
-    const buffer = decodedRef.current;
-    if (!ctx || !buffer) return;
-
-    if (playing) {
-      // Pause
-      if (sourceRef.current) {
-        startOffsetRef.current += ctx.currentTime - startTimeRef.current;
-        sourceRef.current.stop();
-        sourceRef.current.disconnect();
-        sourceRef.current = null;
-      }
-      setPlaying(false);
-      return;
-    }
-
-    // Resume / start
-    const source = ctx.createBufferSource();
-    source.buffer = buffer;
-    source.connect(ctx.destination);
-    source.start(0, startOffsetRef.current);
-    startTimeRef.current = ctx.currentTime;
-    sourceRef.current = source;
-    setPlaying(true);
-
-    source.onended = () => {
-      if (sourceRef.current === source) {
-        setPlaying(false);
-        sourceRef.current = null;
-      }
-    };
-  }, [playing]);
-
-  const handleSeek = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (!decodedRef.current) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const progress = Math.max(0, Math.min(1, x / rect.width));
-      const offset = progress * durationRef.current;
-
-      const ctx = audioContextRef.current;
-      if (ctx && sourceRef.current) {
-        sourceRef.current.stop();
-        sourceRef.current.disconnect();
-      }
-
-      startOffsetRef.current = offset;
-      startTimeRef.current = ctx?.currentTime ?? 0;
-      drawWaveform(progress);
-
-      if (playing && ctx) {
-        const buffer = decodedRef.current;
-        const source = ctx.createBufferSource();
-        source.buffer = buffer;
-        source.connect(ctx.destination);
-        source.start(0, offset);
-        startTimeRef.current = ctx.currentTime;
-        sourceRef.current = source;
-        source.onended = () => {
-          if (sourceRef.current === source) {
-            setPlaying(false);
-            sourceRef.current = null;
-          }
-        };
-      }
-    },
-    [playing, drawWaveform],
-  );
-
-  if (loading) {
-    return <div className="h-16 w-full animate-pulse rounded-md bg-muted" />;
-  }
-
-  if (error) {
-    return (
-      <div className="h-16 w-full rounded-md bg-destructive/10 flex items-center justify-center text-xs text-destructive">
-        {error}
-      </div>
-    );
-  }
-
-  if (peaks.length === 0) return null;
-
-  return (
-    <div className="flex items-center gap-2">
-      <button
-        type="button"
-        onClick={handleTogglePlay}
-        className="shrink-0 rounded-full bg-primary p-1.5 text-primary-foreground hover:bg-primary/90"
-      >
-        {playing ? (
-          <Pause className="h-3.5 w-3.5" />
-        ) : (
-          <Play className="h-3.5 w-3.5" />
-        )}
-      </button>
-      <div
-        ref={containerRef}
-        className="relative flex-1 cursor-pointer"
-        onClick={handleSeek}
-        role="slider"
-        aria-label={`Playback seek for ${filename}`}
-        tabIndex={0}
-      >
-        <canvas ref={canvasRef} className="w-full" />
-      </div>
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/live/hooks/useMediaControl.ts b/services/frontend/src/features/live/hooks/useMediaControl.ts
deleted file mode 100644
index 915f369..0000000
--- a/services/frontend/src/features/live/hooks/useMediaControl.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import type { MediaState } from "../../../entities/media/types.js";
-import {
-  getMediaStatus,
-  queueMedia,
-  setMediaVolume,
-  skipMedia,
-  stopMedia,
-} from "../../../shared/api/client";
-import { useAsyncAction } from "../../../shared/hooks/useAsyncAction.js";
-import { createLogger } from "../../../shared/lib/logger.js";
-
-const logger = createLogger("use-media-control");
-
-const emptyMediaState: MediaState = {
-  playing: false,
-  musicVolume: 1,
-  current: null,
-  queue: [],
-};
-
-export function useMediaControl() {
-  const [mediaState, setMediaState] = useState<MediaState>(emptyMediaState);
-  const { loading, error, execute, clearError } = useAsyncAction();
-
-  const refreshMedia = useCallback(async () => {
-    const state = await getMediaStatus();
-    setMediaState(state);
-    return state;
-  }, []);
-
-  const enqueue = useCallback(
-    async (source: string, mode: "music" | "screen") => {
-      const result = await execute(() => queueMedia(source, mode));
-      if (result) {
-        setMediaState(result);
-        logger.info("Media queued", { source, mode });
-      } else {
-        logger.error("Failed to queue media", { source, mode });
-      }
-      return result;
-    },
-    [execute],
-  );
-
-  const skip = useCallback(async () => {
-    const result = await execute(() => skipMedia());
-    if (result) {
-      setMediaState(result);
-      logger.info("Media skipped");
-    } else {
-      logger.error("Failed to skip media");
-    }
-    return result;
-  }, [execute]);
-
-  const stop = useCallback(async () => {
-    const result = await execute(() => stopMedia());
-    if (result) {
-      setMediaState(result);
-      logger.info("Media stopped");
-    } else {
-      logger.error("Failed to stop media");
-    }
-    return result;
-  }, [execute]);
-
-  const setVolume = useCallback(
-    async (volume: number) => {
-      clearError();
-      try {
-        const state = await setMediaVolume(volume);
-        setMediaState(state);
-        logger.info("Volume set", { volume });
-        return state;
-      } catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        logger.error("Failed to set volume", { volume, error: message });
-        throw err;
-      }
-    },
-    [clearError],
-  );
-
-  useEffect(() => {
-    refreshMedia().catch((err) =>
-      logger.error("Failed to refresh media state on mount", {
-        error: String(err),
-      }),
-    );
-  }, [refreshMedia]);
-
-  return {
-    mediaState,
-    setMediaState,
-    loading,
-    error,
-    refreshMedia,
-    enqueue,
-    skip,
-    stop,
-    setVolume,
-  };
-}
diff --git a/services/frontend/src/features/live/hooks/useVoiceControl.ts b/services/frontend/src/features/live/hooks/useVoiceControl.ts
deleted file mode 100644
index 318f5f0..0000000
--- a/services/frontend/src/features/live/hooks/useVoiceControl.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import type { Channel, Guild } from "../../../entities/guild/types.js";
-import type { VoiceStatus } from "../../../entities/voice/types.js";
-import {
-  connectVoice,
-  disconnectVoice,
-  getGuilds,
-  getTextChannels,
-  getVoiceChannels,
-  getVoiceStatus,
-} from "../../../shared/api/client";
-import { useAsyncAction } from "../../../shared/hooks/useAsyncAction.js";
-import { createLogger } from "../../../shared/lib/logger.js";
-
-const logger = createLogger("use-voice-control");
-
-export function useVoiceControl() {
-  const [guilds, setGuilds] = useState<Guild[]>([]);
-  const [voiceChannels, setVoiceChannels] = useState<Channel[]>([]);
-  const [textChannels, setTextChannels] = useState<Channel[]>([]);
-  const [voiceStatus, setVoiceStatus] = useState<VoiceStatus>({
-    connected: false,
-    activeGuildId: null,
-    activeChannelId: null,
-    activeChannelName: null,
-    connections: [],
-  });
-  const { loading, error, execute, clearError } = useAsyncAction();
-
-  const refreshGuilds = useCallback(async () => {
-    clearError();
-    const nextGuilds = await getGuilds();
-    setGuilds(nextGuilds);
-    return nextGuilds;
-  }, [clearError]);
-
-  const refreshVoiceStatus = useCallback(async () => {
-    const status = await getVoiceStatus();
-    setVoiceStatus(status);
-    return status;
-  }, []);
-
-  const loadVoiceChannels = useCallback(async (guildId: string) => {
-    if (!guildId) {
-      setVoiceChannels([]);
-      return [];
-    }
-    const channels = await getVoiceChannels(guildId);
-    setVoiceChannels(channels);
-    return channels;
-  }, []);
-
-  const loadTextTargets = useCallback(async (guildId: string) => {
-    if (!guildId) {
-      setTextChannels([]);
-      return [];
-    }
-    const channels = await getTextChannels(guildId);
-    setTextChannels(channels);
-    return channels;
-  }, []);
-
-  const joinVoice = useCallback(
-    async (guildId: string, channelId: string) => {
-      const result = await execute(() => connectVoice(guildId, channelId));
-      if (result) {
-        setVoiceStatus(result);
-        logger.info("Connected to voice", { guildId, channelId });
-      } else {
-        logger.error("Failed to connect to voice", { guildId, channelId });
-      }
-      return result;
-    },
-    [execute],
-  );
-
-  const leaveVoice = useCallback(async () => {
-    const result = await execute(() => disconnectVoice());
-    if (result) {
-      setVoiceStatus(result);
-      logger.info("Disconnected from voice");
-    } else {
-      logger.error("Failed to disconnect from voice");
-    }
-    return result;
-  }, [execute]);
-
-  useEffect(() => {
-    refreshGuilds().catch((err) =>
-      logger.error("Failed to refresh guilds on mount", { error: String(err) }),
-    );
-    refreshVoiceStatus().catch((err) =>
-      logger.error("Failed to refresh voice status on mount", {
-        error: String(err),
-      }),
-    );
-  }, [refreshGuilds, refreshVoiceStatus]);
-
-  return {
-    guilds,
-    voiceChannels,
-    textChannels,
-    voiceStatus,
-    loading,
-    error,
-    refreshGuilds,
-    refreshVoiceStatus,
-    loadVoiceChannels,
-    loadTextTargets,
-    joinVoice,
-    leaveVoice,
-  };
-}
diff --git a/services/frontend/src/features/live/index.tsx b/services/frontend/src/features/live/index.tsx
deleted file mode 100644
index 60f5783..0000000
--- a/services/frontend/src/features/live/index.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-// ─── Live Panel — thin composition layer ────────────────────────────────────
-
-import { motion } from "framer-motion";
-import { Mic, MonitorUp, Music2 } from "lucide-react";
-import type { Channel, Guild } from "../../entities/guild/types.js";
-import type { MediaState } from "../../entities/media/types.js";
-import type { ActiveSpeaker, VoiceStatus } from "../../entities/voice/types.js";
-import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../shared/ui";
-import { ActiveSpeakers } from "./components/ActiveSpeakers";
-import { AudioVisualizer } from "./components/AudioVisualizer";
-import { MusicSubPanel } from "./components/MusicSubPanel";
-import { NowPlaying } from "./components/NowPlaying";
-import { RecordingsSubPanel } from "./components/RecordingsSubPanel";
-import { ScreenSubPanel } from "./components/ScreenSubPanel";
-import { VoiceConnectionCard } from "./components/VoiceConnectionCard";
-
-interface LivePanelProps {
-  guilds: Guild[];
-  voiceChannels: Channel[];
-  selectedGuild: string;
-  selectedChannel: string;
-  status: VoiceStatus;
-  voiceLoading: boolean;
-  activeSpeakers: ActiveSpeaker[];
-  levels: number[];
-  isListening: boolean;
-  isStreaming: boolean;
-  micLevel: number;
-  mediaState: MediaState;
-  mediaLoading: boolean;
-  onGuildChange: (id: string) => void;
-  onChannelChange: (id: string) => void;
-  onJoin: () => void;
-  onDisconnect: () => void;
-  onListenToggle: () => void;
-  onStreamingToggle: () => void;
-  onQueueMusic: (source: string) => void;
-  onStartScreen: (source: string) => void;
-  onSkip: () => void;
-  onStop: () => void;
-  onVolumeChange: (v: number) => void;
-}
-
-export function LivePanel({
-  guilds,
-  voiceChannels,
-  selectedGuild,
-  selectedChannel,
-  status,
-  voiceLoading,
-  activeSpeakers,
-  levels,
-  isListening,
-  isStreaming,
-  micLevel,
-  mediaState,
-  mediaLoading,
-  onGuildChange,
-  onChannelChange,
-  onJoin,
-  onDisconnect,
-  onListenToggle,
-  onStreamingToggle,
-  onQueueMusic,
-  onStartScreen,
-  onSkip,
-  onStop,
-  onVolumeChange,
-}: LivePanelProps) {
-  return (
-    <motion.div
-      variants={cardStagger}
-      initial="initial"
-      animate="animate"
-      className="grid gap-6"
-    >
-      <motion.div variants={cardItem}>
-        <VoiceConnectionCard
-          guilds={guilds}
-          voiceChannels={voiceChannels}
-          selectedGuild={selectedGuild}
-          selectedChannel={selectedChannel}
-          status={status}
-          voiceLoading={voiceLoading}
-          isListening={isListening}
-          isStreaming={isStreaming}
-          micLevel={micLevel}
-          onGuildChange={onGuildChange}
-          onChannelChange={onChannelChange}
-          onJoin={onJoin}
-          onDisconnect={onDisconnect}
-          onListenToggle={onListenToggle}
-          onStreamingToggle={onStreamingToggle}
-        />
-      </motion.div>
-
-      <motion.div
-        variants={cardItem}
-        className="grid gap-6 xl:grid-cols-[1fr_320px]"
-      >
-        <Card>
-          <CardHeader className="pb-3">
-            <CardTitle className="text-base">Live Audio</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <AudioVisualizer levels={levels} />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-3">
-            <CardTitle className="text-base">Active Speakers</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ActiveSpeakers speakers={activeSpeakers} />
-          </CardContent>
-        </Card>
-      </motion.div>
-
-      <motion.div variants={cardItem}>
-        <NowPlaying current={mediaState.current} queue={mediaState.queue} />
-      </motion.div>
-
-      <motion.div variants={cardItem}>
-        <Tabs defaultValue="music">
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="music">
-              <Music2 className="mr-1.5 h-4 w-4" /> Music
-            </TabsTrigger>
-            <TabsTrigger value="screen">
-              <MonitorUp className="mr-1.5 h-4 w-4" /> Screen Share
-            </TabsTrigger>
-            <TabsTrigger value="recordings">
-              <Mic className="mr-1.5 h-4 w-4" /> Recordings
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="music">
-            <MusicSubPanel
-              volume={mediaState.musicVolume}
-              onVolumeChange={onVolumeChange}
-              onQueue={onQueueMusic}
-              onSkip={onSkip}
-              onStop={onStop}
-              loading={mediaLoading}
-            />
-          </TabsContent>
-          <TabsContent value="screen">
-            <ScreenSubPanel
-              onStart={onStartScreen}
-              onSkip={onSkip}
-              onStop={onStop}
-              loading={mediaLoading}
-            />
-          </TabsContent>
-          <TabsContent value="recordings">
-            <RecordingsSubPanel />
-          </TabsContent>
-        </Tabs>
-      </motion.div>
-    </motion.div>
-  );
-}
diff --git a/services/frontend/src/features/messages/components/ImageGrid.tsx b/services/frontend/src/features/messages/components/ImageGrid.tsx
deleted file mode 100644
index c01b629..0000000
--- a/services/frontend/src/features/messages/components/ImageGrid.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import type { MessageRecord } from "../../../entities/message/types.js";
-import { parseMetadata } from "../../../shared/lib/utils.js";
-import { EmptyStateMascot } from "../../../widgets/mascot/MascotImage";
-
-interface ImageItem {
-  url: string;
-  title: string;
-  kind: "attachment" | "embed" | "sticker";
-  message: MessageRecord;
-}
-
-function kindBadge(kind: ImageItem["kind"]): string {
-  switch (kind) {
-    case "sticker":
-      return "bg-primary/10 text-primary border-primary/20";
-    case "attachment":
-      return "bg-primary-soft text-primary border-primary/30";
-    case "embed":
-      return "bg-purple-100 text-purple-700 border-purple-200";
-  }
-}
-
-export function ImageGrid({ messages }: { messages: MessageRecord[] }) {
-  const images: ImageItem[] = [];
-
-  for (const message of messages) {
-    const metadata = parseMetadata(message.metadata);
-
-    // Stickers
-    for (const sticker of metadata.stickers ?? []) {
-      if (sticker.url) {
-        images.push({
-          url: sticker.url,
-          title: sticker.name || "sticker",
-          kind: "sticker",
-          message,
-        });
-      }
-    }
-
-    // Attachments
-    for (const attachment of metadata.attachments ?? []) {
-      if (
-        attachment.url &&
-        (attachment.contentType?.startsWith("image/") ||
-          /\.(png|jpe?g|gif|webp)$/i.test(attachment.name))
-      ) {
-        images.push({
-          url: attachment.url,
-          title: attachment.name,
-          kind: "attachment",
-          message,
-        });
-      }
-    }
-
-    // Embed images
-    for (const embed of metadata.embeds ?? []) {
-      for (const imgUrl of [embed.image, embed.thumbnail].filter(Boolean)) {
-        images.push({
-          url: imgUrl as string,
-          title: embed.title || "embed image",
-          kind: "embed",
-          message,
-        });
-      }
-    }
-  }
-
-  if (images.length === 0) {
-    return <EmptyStateMascot />;
-  }
-
-  return (
-    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-      {images.map((image) => {
-        // Stable key using message.id + url
-        const stableKey = `${image.message.id}-${image.kind}-${image.url}`;
-        return (
-          <a
-            key={stableKey}
-            href={image.url}
-            target="_blank"
-            rel="noreferrer"
-            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" ? (
-                <img
-                  src={image.url}
-                  alt={image.title}
-                  className="h-full w-full object-contain bg-muted/30 p-2 transition-transform group-hover:scale-105"
-                  loading="lazy"
-                />
-              ) : (
-                <img
-                  src={image.url}
-                  alt={image.title}
-                  className="h-full w-full object-cover transition-transform group-hover:scale-105"
-                  loading="lazy"
-                />
-              )}
-              <span
-                className={`absolute right-2 top-2 rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider shadow-sm backdrop-blur ${kindBadge(image.kind)}`}
-              >
-                {image.kind}
-              </span>
-            </div>
-            <div className="p-3">
-              <div className="truncate text-sm font-medium">{image.title}</div>
-              <div className="flex items-center gap-2">
-                <div className="h-4 w-4 overflow-hidden rounded-full ring-1 ring-primary/30">
-                  <img
-                    src={
-                      image.message.avatar_url ??
-                      "https://cdn.discordapp.com/embed/avatars/0.png"
-                    }
-                    alt=""
-                    className="h-full w-full object-cover"
-                  />
-                </div>
-                <span className="truncate text-xs text-muted-foreground">
-                  {image.message.username}
-                </span>
-              </div>
-            </div>
-          </a>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/services/frontend/src/features/messages/components/MessageCard.tsx b/services/frontend/src/features/messages/components/MessageCard.tsx
deleted file mode 100644
index 8fcf787..0000000
--- a/services/frontend/src/features/messages/components/MessageCard.tsx
+++ /dev/null
@@ -1,577 +0,0 @@
-import {
-  AlertCircle,
-  CheckCircle2,
-  Forward,
-  Hash,
-  Image as ImageIcon,
-  MessageCircle,
-  Pencil,
-  Reply,
-  RotateCw,
-  Smile,
-  Trash2,
-  Video,
-} from "lucide-react";
-import { Fragment, useEffect, useMemo, useState } from "react";
-import type { MessageRecord } from "../../../entities/message/types.js";
-import { parseMetadata } from "../../../shared/lib/utils.js";
-import { getMessageById } from "../../../shared/api/client.js";
-import { Badge, Button, Skeleton, StatusBadge } from "../../../shared/ui";
-
-const CUSTOM_EMOJI_REGEX = /<(a)?:([a-zA-Z0-9_]+):(\d+)>/g;
-
-function renderContentWithCustomEmojis(content: string): React.ReactNode {
-  const parts: React.ReactNode[] = [];
-  const regex = new RegExp(CUSTOM_EMOJI_REGEX.source, "g");
-  let lastIndex = 0;
-  let match: RegExpExecArray | null;
-
-  while ((match = regex.exec(content)) !== null) {
-    if (match.index > lastIndex) {
-      parts.push(content.slice(lastIndex, match.index));
-    }
-    const [, animated, name, id] = match;
-    const ext = animated ? "gif" : "png";
-    const url = `https://cdn.discordapp.com/emojis/${id}.${ext}?size=128`;
-    parts.push(
-      <img
-        key={`${id}-${match.index}`}
-        src={url}
-        alt={name}
-        className="inline-block h-[22px] w-[22px] align-middle object-contain"
-        loading="lazy"
-        draggable={false}
-        title={`:${name}:`}
-        onError={(e) => {
-          const target = e.currentTarget;
-          target.style.display = "none";
-        }}
-      />,
-    );
-    lastIndex = regex.lastIndex;
-  }
-  if (lastIndex < content.length) {
-    parts.push(content.slice(lastIndex));
-  }
-  if (parts.length === 0) return content;
-  return <Fragment>{parts}</Fragment>;
-}
-
-// ─── Props ───────────────────────────────────────────────────────────────────
-
-interface MessageCardProps {
-  messages: MessageRecord[];
-  onReanalyze: (id: string) => Promise<void>;
-}
-
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-
-function parseStringList(value?: string | null): string[] {
-  if (!value) return [];
-  try {
-    const parsed = JSON.parse(value) as unknown;
-    return Array.isArray(parsed)
-      ? parsed.filter((item): item is string => typeof item === "string")
-      : [];
-  } catch {
-    return value
-      .split(",")
-      .map((item) => item.trim())
-      .filter(Boolean);
-  }
-}
-
-function severityColor(severity: string) {
-  switch (severity) {
-    case "critical":
-      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 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 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 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";
-  }
-}
-
-function formatTimeAgo(ts: number): string {
-  const seconds = Math.floor((Date.now() - ts) / 1000);
-  if (seconds < 60) return `${seconds}s ago`;
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-  return new Date(ts).toLocaleDateString();
-}
-
-function formatTime(ts: number): string {
-  return new Date(ts).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
-
-// ─── Single message row inside a group ───────────────────────────────────────
-
-function MessageRow({
-  message,
-  onReanalyze,
-}: {
-  message: MessageRecord;
-  onReanalyze: (id: string) => Promise<void>;
-}) {
-  const metadata = useMemo(
-    () => parseMetadata(message.metadata),
-    [message.metadata],
-  );
-  const displayContent = message.edited_content ?? message.content;
-  const aiStatus = message.ai_status ?? "pending";
-  const categories = useMemo(() => {
-    const list = parseStringList(
-      message.ai_categories ?? message.ai_moderation_flags,
-    );
-    return list.filter((c) => c !== "analysis_incomplete");
-  }, [message.ai_categories, message.ai_moderation_flags]);
-  const confidence =
-    message.ai_confidence ?? message.ai_moderation_score ?? null;
-  const [isReanalyzing, setIsReanalyzing] = useState(false);
-
-  // ── Fetch referenced message content for replies if not in metadata ──
-  const referenceMeta = metadata.reference;
-  const [fetchedRefContent, setFetchedRefContent] = useState<{
-    username: string;
-    content: string;
-  } | null>(null);
-
-  useEffect(() => {
-    if (
-      message.is_reply &&
-      referenceMeta?.messageId &&
-      !referenceMeta?.content &&
-      !message.deleted_at
-    ) {
-      getMessageById(referenceMeta.messageId)
-        .then((refMsg) => {
-          if (refMsg) {
-            setFetchedRefContent({
-              username: refMsg.username,
-              content: refMsg.content,
-            });
-          }
-        })
-        .catch(() => {
-          // Referenced message might not exist in our DB
-        });
-    }
-  }, [message.is_reply, referenceMeta?.messageId, referenceMeta?.content, message.deleted_at]);
-
-  const analysisSummary = useMemo(() => {
-    const parts: string[] = [];
-    if (categories.length > 0) {
-      parts.push(categories.slice(0, 3).join(", "));
-      if (categories.length > 3) parts.push(`+${categories.length - 3} more`);
-    }
-    if (message.ai_severity && message.ai_severity !== "none") {
-      parts.push(message.ai_severity);
-    }
-    if (confidence != null) {
-      parts.push(`${Math.round(confidence * 100)}% confidence`);
-    }
-    if (parts.length === 0) return "View AI analysis";
-    return parts.join(" · ");
-  }, [categories, message.ai_severity, confidence]);
-
-  const stickers = metadata.stickers ?? [];
-  const attachments = metadata.attachments ?? [];
-  const imageAttachments = attachments.filter(
-    (a) =>
-      a.contentType?.startsWith("image/") ||
-      /\.(png|jpe?g|gif|webp)$/i.test(a.name),
-  );
-  const videoAttachments = attachments.filter(
-    (a) =>
-      a.contentType?.startsWith("video/") ||
-      /\.(mp4|webm|mov|mkv|avi)$/i.test(a.name),
-  );
-  const hasImages = imageAttachments.length > 0;
-  const hasVideos = videoAttachments.length > 0;
-
-  /** Hide the fallback text ("[Attachment: ...]", "[Sticker: ...]", "[Embed]") when the actual media IS already shown visually. */
-  const isFallbackText =
-    /^\[(Attachment|Sticker):/i.test(displayContent) ||
-    /^\[Embed\]/i.test(displayContent);
-  const shouldShowContent = displayContent && !isFallbackText;
-
-  const handleReanalyze = async () => {
-    setIsReanalyzing(true);
-    try {
-      await onReanalyze(message.id);
-    } finally {
-      setIsReanalyzing(false);
-    }
-  };
-
-  // ── Reference context (reply / forward / crosspost) ─────────────────
-  const renderReferenceIndicator = () => {
-    // Use fetched content if metadata doesn't have it
-    const effectiveRepliedUsername =
-      referenceMeta?.repliedUsername ?? fetchedRefContent?.username ?? null;
-    const effectiveRepliedContent =
-      referenceMeta?.content ?? fetchedRefContent?.content ?? null;
-
-    if (message.is_reply) {
-      return (
-        <div className="flex items-start gap-1.5 mb-2 text-[12px] text-muted-foreground/70 border-l-2 border-muted-foreground/20 pl-2.5 py-1 hover:border-primary/40 transition-colors">
-          <Reply className="h-3 w-3 mt-0.5 shrink-0" />
-          <span className="min-w-0">
-            <span className="font-medium text-foreground/60">
-              Replying to{" "}
-              {effectiveRepliedUsername
-                ? `@${effectiveRepliedUsername}`
-                : "a message"}
-            </span>
-            {effectiveRepliedContent && (
-              <span className="block truncate max-w-[400px] text-ellipsis text-[11px] text-muted-foreground/50 mt-0.5">
-                {effectiveRepliedContent}
-              </span>
-            )}
-          </span>
-        </div>
-      );
-    }
-
-    if (message.is_forward) {
-      return (
-        <div className="flex items-center gap-1.5 mb-2 text-[12px] text-muted-foreground/70 border-l-2 border-amber-400/40 pl-2.5 py-1">
-          <Forward className="h-3 w-3 shrink-0 text-amber-500" />
-          <span className="font-medium text-amber-600/70">Forwarded</span>
-        </div>
-      );
-    }
-
-    if (message.is_crosspost) {
-      return (
-        <div className="flex items-center gap-1.5 mb-2 text-[12px] text-muted-foreground/70 border-l-2 border-sky-400/40 pl-2.5 py-1">
-          <MessageCircle className="h-3 w-3 shrink-0 text-sky-500" />
-          <span className="font-medium text-sky-600/70">Crossposted</span>
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  const referenceIndicator = renderReferenceIndicator();
-
-  return (
-    <div className="space-y-2">
-      {/* Row header: time + edit/delete indicators + AI badges */}
-      <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-        <span
-          className="text-[11px] text-muted-foreground/70"
-          title={new Date(message.created_at).toLocaleString()}
-        >
-          {formatTime(message.created_at)}
-        </span>
-        {message.edited_at && (
-          <span className="flex items-center gap-0.5 text-[11px] text-muted-foreground/70">
-            <Pencil className="h-2.5 w-2.5" /> edited
-          </span>
-        )}
-        {message.deleted_at && (
-          <span className="flex items-center gap-0.5 text-[11px] text-destructive/70">
-            <Trash2 className="h-2.5 w-2.5" /> deleted
-          </span>
-        )}
-        <div className="ml-auto flex items-center gap-1">
-          <StatusBadge status={aiStatus} className="text-[10px] px-1.5 py-0">
-            {aiStatus === "clean" && <CheckCircle2 className="h-3 w-3" />}
-            {aiStatus === "flagged" && <AlertCircle className="h-3 w-3" />}
-            {aiStatus === "error" && <AlertCircle className="h-3 w-3" />}
-          </StatusBadge>
-          {message.ai_severity && message.ai_severity !== "none" && (
-            <Badge
-              className={`text-[10px] px-1.5 py-0 ${severityColor(message.ai_severity)}`}
-            >
-              {message.ai_severity}
-            </Badge>
-          )}
-          {confidence != null && (
-            <Badge
-              variant="outline"
-              className="text-[10px] px-1.5 py-0 tabular-nums"
-            >
-              {Math.round(confidence * 100)}%
-            </Badge>
-          )}
-        </div>
-      </div>
-
-      {/* Reference context: reply / forward / crosspost */}
-      {referenceIndicator}
-
-      {/* Content — hidden when it's just an "[Attachment: ...]" fallback and the image is shown below */}
-      {shouldShowContent ? (
-        <p
-          className={`whitespace-pre-wrap break-words text-sm leading-6 ${
-            message.deleted_at
-              ? "text-muted-foreground/60"
-              : "text-foreground/90"
-          }`}
-        >
-          {renderContentWithCustomEmojis(displayContent)}
-        </p>
-      ) : null}
-
-      {/* Stickers */}
-      {stickers.length > 0 && (
-        <div className="flex flex-wrap gap-2">
-          {stickers.map((sticker) => (
-            <div
-              key={sticker.name || sticker.url}
-              className="flex items-center gap-1.5"
-            >
-              {sticker.url ? (
-                <img
-                  src={sticker.url}
-                  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">
-                  <Smile className="h-6 w-6 text-muted-foreground" />
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Attached images */}
-      {hasImages && (
-        <div className="flex gap-2 overflow-x-auto">
-          {imageAttachments.slice(0, 4).map((img) => (
-            <a
-              key={img.url}
-              href={img.url}
-              target="_blank"
-              rel="noreferrer"
-              className="shrink-0 overflow-hidden rounded-lg border border-border"
-            >
-              <img
-                src={img.url}
-                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>
-          ))}
-          {imageAttachments.length > 4 && (
-            <div className="flex h-16 w-16 items-center justify-center rounded-lg border border-border bg-muted text-[11px] text-muted-foreground">
-              +{imageAttachments.length - 4}
-              <ImageIcon className="ml-0.5 h-3 w-3" />
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Attached videos */}
-      {hasVideos && (
-        <div className="flex gap-2 overflow-x-auto">
-          {videoAttachments.slice(0, 4).map((vid) => (
-            <video
-              key={vid.url}
-              src={vid.url}
-              controls
-              className="h-28 w-48 shrink-0 rounded-lg border border-border object-cover bg-muted"
-              preload="metadata"
-            />
-          ))}
-          {videoAttachments.length > 4 && (
-            <div className="flex h-28 w-16 items-center justify-center rounded-lg border border-border bg-muted text-[11px] text-muted-foreground">
-              +{videoAttachments.length - 4}
-              <Video className="ml-0.5 h-3 w-3" />
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Categories */}
-      {categories.length > 0 && (
-        <div className="flex flex-wrap gap-1">
-          {categories.map((category) => (
-            <Badge key={category} variant="secondary" className="text-[10px]">
-              {category}
-            </Badge>
-          ))}
-        </div>
-      )}
-
-      {/* AI Analysis — always expanded */}
-      {message.ai_analysis ? (
-        <div
-          className={`rounded-lg border-l-[3px] px-3 py-2 ${
-            aiStatus === "flagged"
-              ? "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]">
-            <span className="mt-0.5 shrink-0">
-              {aiStatus === "flagged" ? "🚨" : "ℹ️"}
-            </span>
-            <div className="min-w-0 flex-1">
-              <span className="block font-medium text-foreground/70 mb-1">
-                {analysisSummary}
-              </span>
-              <div className="text-[12px] text-muted-foreground leading-relaxed whitespace-pre-wrap">
-                {message.ai_analysis}
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : null}
-
-      {/* AI Error */}
-      {message.ai_error ? (
-        <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}
-
-      {/* Re-analyze button */}
-      <div className="flex items-center gap-2">
-        <Button
-          size="sm"
-          variant={aiStatus === "error" ? "destructive" : "outline"}
-          onClick={handleReanalyze}
-          disabled={aiStatus === "pending" || isReanalyzing}
-          className="text-[11px] h-7 px-2.5"
-        >
-          <RotateCw
-            className={`h-3 w-3 ${isReanalyzing ? "animate-spin" : ""}`}
-          />
-          {isReanalyzing ? "Reanalyzing..." : "Re-analyze"}
-        </Button>
-        {aiStatus === "error" && (
-          <span className="text-[11px] text-pink-600/70 dark:text-pink-400/70">
-            Click to retry analysis
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ─── Group card: one card per user group ─────────────────────────────────────
-
-export function MessageCard({ messages, onReanalyze }: MessageCardProps) {
-  const firstMsg = messages[0];
-  const hasMultiple = messages.length > 1;
-  const meta = useMemo(
-    () => parseMetadata(firstMsg.metadata),
-    [firstMsg.metadata],
-  );
-  const channelMeta = meta.channel;
-  const locationLabel = useMemo(() => {
-    if (channelMeta?.threadName) {
-      return `# ${channelMeta.channelName || "unknown"} › ${channelMeta.threadName}`;
-    }
-    if (channelMeta?.channelName) {
-      return `# ${channelMeta.channelName}`;
-    }
-    return null;
-  }, [channelMeta]);
-
-  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 dark:border-red-900/50 opacity-60" : "border-border"
-      }`}
-    >
-      <div className="flex gap-3 p-4">
-        {/* Avatar — only for first message */}
-        <img
-          src={
-            firstMsg.avatar_url ??
-            "https://cdn.discordapp.com/embed/avatars/0.png"
-          }
-          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">
-          {/* Group header: username + location + timestamp */}
-          <div className="flex items-baseline gap-2 mb-2">
-            <span className="font-semibold text-sm text-foreground">
-              {firstMsg.username || firstMsg.user_id}
-            </span>
-            {locationLabel && (
-              <span className="flex items-center gap-1 text-[11px] text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded-full">
-                <Hash className="h-2.5 w-2.5" />
-                {locationLabel}
-              </span>
-            )}
-            <span
-              className="text-[11px] text-muted-foreground/60"
-              title={new Date(firstMsg.created_at).toLocaleString()}
-            >
-              {formatTimeAgo(firstMsg.created_at)}
-              {hasMultiple && ` · ${messages.length} messages`}
-            </span>
-          </div>
-
-          {/* Message rows — divided by separator when multiple */}
-          <div
-            className={
-              hasMultiple ? "divide-y divide-border/30 space-y-2.5" : ""
-            }
-          >
-            {messages.map((msg, idx) => (
-              <div
-                key={msg.id}
-                className={hasMultiple && idx > 0 ? "pt-2.5" : ""}
-              >
-                <MessageRow message={msg} onReanalyze={onReanalyze} />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </article>
-  );
-}
-
-// ─── Skeleton ────────────────────────────────────────────────────────────────
-
-export function MessageCardSkeleton() {
-  return (
-    <article className="rounded-xl border border-border bg-card p-4 shadow-sm">
-      <div className="flex gap-3">
-        <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
-        <div className="min-w-0 flex-1 space-y-3">
-          <Skeleton className="h-5 w-48" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
-          <div className="flex gap-2">
-            <Skeleton className="h-6 w-16 rounded-full" />
-            <Skeleton className="h-6 w-20 rounded-full" />
-          </div>
-        </div>
-      </div>
-    </article>
-  );
-}
diff --git a/services/frontend/src/features/messages/components/MessageFeed.tsx b/services/frontend/src/features/messages/components/MessageFeed.tsx
deleted file mode 100644
index 2064fd3..0000000
--- a/services/frontend/src/features/messages/components/MessageFeed.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { motion } from "framer-motion";
-import { useEffect, useMemo, useRef } from "react";
-import type { MessageRecord } from "../../../entities/message/types.js";
-import { cardItem, cardStagger } from "../../../shared/hooks/useFramerStagger";
-import { ScrollArea } from "../../../shared/ui";
-import { EmptyStateMascot } from "../../../widgets/mascot/MascotImage";
-import { MessageCard, MessageCardSkeleton } from "./MessageCard";
-
-export interface MessageFeedProps {
-  messages: MessageRecord[];
-  onReanalyze: (id: string) => Promise<void>;
-  emptyText?: string;
-  loading?: boolean;
-  onLoadMore?: () => void;
-  hasMore?: boolean;
-  loadingMore?: boolean;
-}
-
-/** Messages from the same user within 5 minutes are visually grouped. */
-const GROUP_WINDOW_MS = 5 * 60 * 1000;
-
-interface MessageGroup {
-  messages: MessageRecord[];
-}
-
-function groupMessages(messages: MessageRecord[]): MessageGroup[] {
-  const groups: MessageGroup[] = [];
-  for (const msg of messages) {
-    const lastGroup = groups[groups.length - 1];
-    if (
-      lastGroup &&
-      lastGroup.messages[0].user_id === msg.user_id &&
-      lastGroup.messages[lastGroup.messages.length - 1].created_at -
-        msg.created_at <
-        GROUP_WINDOW_MS
-    ) {
-      lastGroup.messages.push(msg);
-    } else {
-      groups.push({ messages: [msg] });
-    }
-  }
-  return groups;
-}
-
-export function MessageFeed({
-  messages,
-  onReanalyze,
-  emptyText: _emptyText,
-  loading,
-  onLoadMore,
-  hasMore,
-  loadingMore,
-}: MessageFeedProps) {
-  // IntersectionObserver for infinite scroll — fires when sentinel becomes visible
-  const sentinelRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (!onLoadMore || !hasMore) return;
-    const el = sentinelRef.current;
-    if (!el) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting) onLoadMore();
-      },
-      { rootMargin: "400px" },
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [onLoadMore, hasMore]);
-
-  const groupedMessages = useMemo(() => groupMessages(messages), [messages]);
-
-  if (loading) {
-    return (
-      <ScrollArea className="h-[calc(100vh-260px)] pr-3">
-        <div className="space-y-3">
-          {[1, 2, 3, 4, 5].map((i) => (
-            <MessageCardSkeleton key={i} />
-          ))}
-        </div>
-      </ScrollArea>
-    );
-  }
-
-  if (messages.length === 0) {
-    return <EmptyStateMascot />;
-  }
-
-  return (
-    <ScrollArea className="h-[calc(100vh-260px)] pr-3">
-      <motion.div
-        className="space-y-3"
-        variants={cardStagger}
-        initial="initial"
-        animate="animate"
-      >
-        {groupedMessages.map((group) => (
-          <motion.div key={group.messages[0].id} variants={cardItem}>
-            <MessageCard messages={group.messages} onReanalyze={onReanalyze} />
-          </motion.div>
-        ))}
-
-        {/* Infinite-scroll sentinel */}
-        {hasMore && (
-          <div
-            ref={sentinelRef}
-            className="flex items-center justify-center py-4"
-          >
-            {loadingMore ? (
-              <MessageCardSkeleton />
-            ) : (
-              <div className="h-2 w-2 rounded-full bg-primary/40" />
-            )}
-          </div>
-        )}
-      </motion.div>
-    </ScrollArea>
-  );
-}
diff --git a/services/frontend/src/features/messages/components/ModerationAlertListener.tsx b/services/frontend/src/features/messages/components/ModerationAlertListener.tsx
deleted file mode 100644
index a11afe6..0000000
--- a/services/frontend/src/features/messages/components/ModerationAlertListener.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// ─── Moderation alert toast listener ───────────────────────────────────────
-// Listens for "moderation_alert" custom events dispatched from WebSocket
-// message_analyzed handler, and shows toast notifications for flagged
-// messages so moderators don't miss important alerts.
-import { useEffect } from "react";
-import { useToast } from "../../../shared/ui";
-
-interface AlertDetail {
-  type: "flagged";
-  username: string;
-  severity: string;
-  categories: string;
-  brief: string;
-}
-
-function severityToToastType(
-  severity: string,
-): "error" | "warning" | "info" | "success" {
-  switch (severity) {
-    case "critical":
-    case "high":
-      return "error";
-    case "medium":
-      return "warning";
-    case "low":
-      return "info";
-    default:
-      return "warning";
-  }
-}
-
-export function ModerationAlertListener() {
-  const { addToast } = useToast();
-
-  useEffect(() => {
-    const handler = (e: Event) => {
-      const { username, severity, categories, brief } = (
-        e as CustomEvent<AlertDetail>
-      ).detail;
-
-      const sevLabel = severity ? `[${severity}]` : "";
-      const catLabel = categories
-        ? ` — ${categories.split(",").slice(0, 2).join(", ")}`
-        : "";
-
-      addToast(
-        `🚨 ${username} ${sevLabel}${catLabel}: ${brief}`,
-        severityToToastType(severity),
-      );
-    };
-
-    window.addEventListener("moderation_alert", handler);
-    return () => window.removeEventListener("moderation_alert", handler);
-  }, [addToast]);
-
-  return null;
-}
diff --git a/services/frontend/src/features/messages/index.tsx b/services/frontend/src/features/messages/index.tsx
deleted file mode 100644
index b52b1fd..0000000
--- a/services/frontend/src/features/messages/index.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-import { motion } from "framer-motion";
-import { Filter, RotateCw, Search, X } from "lucide-react";
-import { useMemo, useState } from "react";
-import type { MessageRecord } from "../../shared/api/client";
-import { request } from "../../shared/api/client";
-import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
-import {
-  Badge,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Input,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../shared/ui";
-import { ImageGrid } from "./components/ImageGrid";
-import { MessageFeed } from "./components/MessageFeed";
-
-interface MessagesPanelProps {
-  guildName: string | null;
-  messages: MessageRecord[];
-  onReanalyze: (id: string) => Promise<void>;
-  onReanalyzeAllErrors?: () => Promise<number>;
-  onLoadMore?: () => void;
-  hasMore?: boolean;
-  loadingMore?: boolean;
-}
-
-type AiFilter = "all" | "analyzed" | "clean" | "flagged" | "error" | "pending";
-
-export function MessagesPanel({
-  guildName,
-  messages,
-  onReanalyze,
-  onReanalyzeAllErrors,
-  onLoadMore,
-  hasMore,
-  loadingMore,
-}: MessagesPanelProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [searchResults, setSearchResults] = useState<MessageRecord[]>([]);
-  const [isSearching, setIsSearching] = useState(false);
-  const [showSearch, setShowSearch] = useState(false);
-  const [aiFilter, setAiFilter] = useState<AiFilter>("analyzed");
-  const [viewTab, setViewTab] = useState<"all" | "images">("all");
-  const [retryingAll, setRetryingAll] = useState(false);
-  const [retriedCount, setRetriedCount] = useState<number | null>(null);
-
-  const handleSearch = async () => {
-    if (!searchQuery.trim()) {
-      setSearchResults([]);
-      setShowSearch(false);
-      return;
-    }
-    setIsSearching(true);
-    try {
-      const params = new URLSearchParams({ q: searchQuery, limit: "50" });
-      const data = await request<{ results: MessageRecord[] }>(
-        `/api/analysis/search?${params}`,
-      );
-      setSearchResults(data.results || []);
-      setShowSearch(true);
-    } catch {
-      setSearchResults([]);
-    } finally {
-      setIsSearching(false);
-    }
-  };
-
-  const stats = useMemo(() => {
-    const base = showSearch ? searchResults : messages;
-    return {
-      total: base.length,
-      clean: base.filter((m) => m.ai_status === "clean").length,
-      flagged: base.filter((m) => m.ai_status === "flagged").length,
-      error: base.filter((m) => m.ai_status === "error").length,
-      pending: base.filter((m) => m.ai_status === "pending" || !m.ai_status)
-        .length,
-      deleted: base.filter((m) => m.deleted_at).length,
-      edited: base.filter((m) => m.edited_at).length,
-    };
-  }, [messages, searchResults, showSearch]);
-
-  const filteredMessages = useMemo(() => {
-    const base = showSearch ? searchResults : messages;
-    if (aiFilter === "all") return base;
-    return base.filter((m) => {
-      const status = m.ai_status ?? "pending";
-      if (aiFilter === "analyzed")
-        return status !== "pending" && status !== null && status !== undefined;
-      if (aiFilter === "pending")
-        return status === "pending" || status === null || status === undefined;
-      return status === aiFilter;
-    });
-  }, [messages, searchResults, showSearch, aiFilter]);
-
-  return (
-    <motion.div
-      className="grid gap-6"
-      variants={cardStagger}
-      initial="initial"
-      animate="animate"
-    >
-      <motion.div variants={cardItem}>
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-primary">Messages</CardTitle>
-            {guildName && (
-              <p className="text-sm text-muted-foreground">
-                Monitoring all text channels in{" "}
-                <span className="font-medium text-foreground">{guildName}</span>
-              </p>
-            )}
-          </CardHeader>
-          <CardContent>
-            <p className="text-xs text-muted-foreground">
-              Messages are automatically captured from all text channels in the
-              monitored guild. Real-time updates arrive via WebSocket.
-            </p>
-          </CardContent>
-        </Card>
-      </motion.div>
-
-      {stats.total > 0 && (
-        <motion.div
-          variants={cardItem}
-          className="flex flex-wrap items-center gap-2"
-        >
-          <Badge
-            variant="outline"
-            className="text-xs border-primary/40 text-primary"
-          >
-            {stats.total} total{hasMore && !showSearch ? "+" : ""}
-          </Badge>
-          <Badge
-            variant="outline"
-            className="text-xs bg-emerald-100 text-emerald-700 border-emerald-200"
-          >
-            {stats.clean} clean
-          </Badge>
-          <Badge
-            variant="outline"
-            className="text-xs bg-primary/10 text-primary border-primary/20"
-          >
-            {stats.flagged} flagged
-          </Badge>
-          <Badge
-            variant="outline"
-            className="text-xs bg-orange-100 text-orange-700 border-orange-200"
-          >
-            {stats.error} error
-          </Badge>
-          <Badge
-            variant="outline"
-            className="text-xs text-muted-foreground border-border"
-          >
-            {stats.pending} pending
-          </Badge>
-          {stats.deleted > 0 && (
-            <Badge
-              variant="outline"
-              className="text-xs bg-red-100 text-red-700 border-red-200"
-            >
-              {stats.deleted} deleted
-            </Badge>
-          )}
-          {stats.edited > 0 && (
-            <Badge variant="outline" className="text-xs">
-              {stats.edited} edited
-            </Badge>
-          )}
-        </motion.div>
-      )}
-
-      <motion.div
-        variants={cardItem}
-        className="flex flex-wrap items-center gap-2"
-      >
-        <div className="relative flex-1 min-w-[200px]">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary" />
-          <Input
-            className="pl-9 rounded-full focus-visible:ring-primary"
-            placeholder="Search message content..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            disabled={isSearching}
-          />
-        </div>
-        <Button
-          onClick={handleSearch}
-          disabled={isSearching || !searchQuery.trim()}
-          size="sm"
-          className="rounded-xl"
-        >
-          {isSearching ? "Searching..." : "Search"}
-        </Button>
-        {showSearch && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              setShowSearch(false);
-              setSearchResults([]);
-              setSearchQuery("");
-            }}
-          >
-            <X className="mr-1 h-3 w-3" /> Clear
-          </Button>
-        )}
-        {stats.error > 0 && onReanalyzeAllErrors && (
-          <Button
-            variant="destructive"
-            size="sm"
-            disabled={retryingAll}
-            onClick={async () => {
-              setRetryingAll(true);
-              setRetriedCount(null);
-              try {
-                const count = await onReanalyzeAllErrors();
-                setRetriedCount(count);
-              } finally {
-                setRetryingAll(false);
-              }
-            }}
-            className="rounded-xl bg-destructive/10 text-destructive hover:bg-destructive/20 border-destructive/20"
-          >
-            <RotateCw
-              className={`mr-1.5 h-3.5 w-3.5 ${retryingAll ? "animate-spin" : ""}`}
-            />
-            {retryingAll ? "Retrying..." : `Retry All Errors (${stats.error})`}
-          </Button>
-        )}
-        {retriedCount !== null && (
-          <span className="text-xs text-emerald-600">
-            {retriedCount} message{retriedCount !== 1 ? "s" : ""} queued for
-            re-analysis
-          </span>
-        )}
-        <div className="ml-auto flex items-center gap-1.5">
-          <Filter className="h-4 w-4 text-primary" />
-          {(
-            [
-              "all",
-              "analyzed",
-              "clean",
-              "flagged",
-              "error",
-              "pending",
-            ] as AiFilter[]
-          ).map((f) => (
-            <button
-              key={f}
-              onClick={() => setAiFilter(f)}
-              className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
-                aiFilter === f
-                  ? "bg-primary text-primary-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground hover:bg-accent"
-              }`}
-            >
-              {f}
-            </button>
-          ))}
-        </div>
-      </motion.div>
-
-      {showSearch && searchResults.length > 0 && (
-        <motion.div
-          variants={cardItem}
-          className="text-sm text-muted-foreground"
-        >
-          Found {searchResults.length} result
-          {searchResults.length !== 1 ? "s" : ""}
-        </motion.div>
-      )}
-
-      <motion.div variants={cardItem}>
-        <Tabs
-          value={viewTab}
-          onValueChange={(v) => setViewTab(v as "all" | "images")}
-        >
-          <TabsList>
-            <TabsTrigger value="all">
-              {showSearch
-                ? `Search (${filteredMessages.length})`
-                : `All (${filteredMessages.length})`}
-            </TabsTrigger>
-            <TabsTrigger value="images">Images</TabsTrigger>
-          </TabsList>
-          <TabsContent value="all">
-            <MessageFeed
-              messages={filteredMessages}
-              onReanalyze={onReanalyze}
-              emptyText={
-                showSearch
-                  ? "No messages found matching your search."
-                  : "No captures yet."
-              }
-              onLoadMore={showSearch ? undefined : onLoadMore}
-              hasMore={showSearch ? false : hasMore}
-              loadingMore={loadingMore}
-            />
-          </TabsContent>
-          <TabsContent value="images">
-            <ImageGrid messages={filteredMessages} />
-          </TabsContent>
-        </Tabs>
-      </motion.div>
-    </motion.div>
-  );
-}
diff --git a/services/frontend/src/features/settings/index.tsx b/services/frontend/src/features/settings/index.tsx
deleted file mode 100644
index c5f5b66..0000000
--- a/services/frontend/src/features/settings/index.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-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
deleted file mode 100644
index 4c75f04..0000000
--- a/services/frontend/src/hooks/useNotificationBadge.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-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/islands/ActiveSpeakers.tsx b/services/frontend/src/islands/ActiveSpeakers.tsx
new file mode 100644
index 0000000..42f6c9d
--- /dev/null
+++ b/services/frontend/src/islands/ActiveSpeakers.tsx
@@ -0,0 +1,61 @@
+// ─── ActiveSpeakers.tsx — Live voice speaker list island ────────────────────
+// Self-contained: reads from useVoiceStore, renders speaker entries with
+// animated speaking-indicator bars.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { useVoiceStore } from "../stores/voice-store.js";
+
+export default function ActiveSpeakers() {
+  const activeSpeakers = useVoiceStore((state) => state.activeSpeakers);
+
+  if (activeSpeakers.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+        <div className="mb-2 text-3xl opacity-30">&#x1F399;</div>
+        <p className="text-sm">No active speakers</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {activeSpeakers.map((speaker) => {
+        const key =
+          speaker.userId ?? speaker.id ?? `speaker-${speaker.username}`;
+        return (
+          <div
+            key={key}
+            className="flex items-center gap-3 rounded-xl border border-border bg-card p-3"
+          >
+            <img
+              src={speaker.avatar}
+              alt=""
+              className="h-8 w-8 rounded-full object-cover ring-2 ring-primary/30"
+            />
+            <div className="min-w-0 flex-1">
+              <div className="truncate text-sm font-medium">
+                {speaker.username}
+              </div>
+            </div>
+            {speaker.speaking && (
+              <div className="flex items-end gap-[3px]">
+                {[0, 1, 2, 3].map((i) => (
+                  <div
+                    key={i}
+                    className="w-[5px] rounded-full bg-primary animate-bar-pulse"
+                    style={{
+                      height: `${12 + i * 4}px`,
+                      animationDelay: `${i * 75}ms`,
+                      transformOrigin: "bottom",
+                      opacity: 1 - i * 0.12,
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/services/frontend/src/islands/AudioVisualizer.tsx b/services/frontend/src/islands/AudioVisualizer.tsx
new file mode 100644
index 0000000..c6d8421
--- /dev/null
+++ b/services/frontend/src/islands/AudioVisualizer.tsx
@@ -0,0 +1,95 @@
+// ─── AudioVisualizer.tsx — Canvas-based frequency bar visualizer ────────────
+// Uses requestAnimationFrame to draw placeholder random frequency bars.
+// Bar color uses the OKLCH primary token at varying opacity.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { useEffect, useRef } from "react";
+
+interface AudioVisualizerProps {
+  barCount?: number;
+  height?: number;
+}
+
+export default function AudioVisualizer({
+  barCount = 48,
+  height = 32,
+}: AudioVisualizerProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    let animationId: number;
+
+    const resize = () => {
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = rect.width * dpr;
+      canvas.height = height * dpr;
+    };
+
+    resize();
+
+    const draw = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+      const w = canvas.getBoundingClientRect().width;
+      const h = height;
+      const barWidth = w / barCount;
+      const maxBarHeight = h * 0.85;
+
+      for (let i = 0; i < barCount; i++) {
+        // Random bar height as a placeholder (real data from WebSocket)
+        const barHeight = Math.random() * maxBarHeight;
+        const x = i * barWidth;
+        const y = h - barHeight;
+
+        // Vary opacity across bars for a more dynamic look
+        const opacity = 0.3 + Math.random() * 0.7;
+        ctx.fillStyle = `oklch(0.62 0.15 255 / ${opacity})`;
+
+        // Rounded-top bars
+        const radius = Math.min(barWidth * 0.3, 4);
+        const gap = 1;
+
+        ctx.beginPath();
+        ctx.moveTo(x + gap + radius, y);
+        ctx.lineTo(x + barWidth - gap - radius, y);
+        ctx.quadraticCurveTo(
+          x + barWidth - gap,
+          y,
+          x + barWidth - gap,
+          y + radius,
+        );
+        ctx.lineTo(x + barWidth - gap, h);
+        ctx.lineTo(x + gap, h);
+        ctx.lineTo(x + gap, y + radius);
+        ctx.quadraticCurveTo(x + gap, y, x + gap + radius, y);
+        ctx.fill();
+      }
+
+      animationId = requestAnimationFrame(draw);
+    };
+
+    draw();
+
+    return () => {
+      cancelAnimationFrame(animationId);
+    };
+  }, [barCount, height]);
+
+  return (
+    <div className="relative w-full">
+      <canvas
+        ref={canvasRef}
+        className="w-full rounded-lg bg-primary/5"
+        style={{ height: `${height}px` }}
+      />
+    </div>
+  );
+}
diff --git a/services/frontend/src/islands/AuthGuard.tsx b/services/frontend/src/islands/AuthGuard.tsx
new file mode 100644
index 0000000..de72a4e
--- /dev/null
+++ b/services/frontend/src/islands/AuthGuard.tsx
@@ -0,0 +1,122 @@
+// ─── AuthGuard.tsx — Standalone authentication island ────────────────────────
+// Three-state auth wrapper: null=loading, false=unauthenticated (login form),
+// true=authenticated (renders children).
+// ─────────────────────────────────────────────────────────────────────────────
+
+import {
+  type FormEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import {
+  getAdminPassword,
+  getSessionToken,
+  setAdminPassword,
+} from "../shared/api/client.js";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+} from "../shared/components/index.js";
+
+interface AuthGuardProps {
+  children: ReactNode;
+}
+
+export default function AuthGuard({ children }: AuthGuardProps) {
+  const [authState, setAuthState] = useState<boolean | null>(null);
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  // On mount: check for existing session token or legacy admin password
+  useEffect(() => {
+    const token = getSessionToken();
+    const storedPassword = getAdminPassword();
+    setAuthState(token || storedPassword ? true : false);
+  }, []);
+
+  const handleLogin = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      if (!password) return;
+      setError(null);
+      // Store the password to localStorage; actual validation happens
+      // when child components call the API (gets 401 on invalid creds).
+      setAdminPassword(password);
+      setAuthState(true);
+    },
+    [password],
+  );
+
+  // ── Loading state ──────────────────────────────────────────────────────────
+  if (authState === null) {
+    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" />
+        </div>
+      </div>
+    );
+  }
+
+  // ── Unauthenticated — show login form ──────────────────────────────────────
+  if (authState === false) {
+    return (
+      <div 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">
+                <svg
+                  className="h-6 w-6"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                  />
+                </svg>
+              </div>
+            </div>
+            <CardTitle>Access Required</CardTitle>
+            <CardDescription>
+              Enter the admin password to access the dashboard.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div className="space-y-2">
+                <div className="space-y-1">
+                  <Input
+                    type="password"
+                    placeholder="Enter admin password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    autoFocus
+                  />
+                  {error && <p className="text-xs text-destructive">{error}</p>}
+                </div>
+              </div>
+              <Button type="submit" className="w-full" disabled={!password}>
+                Unlock
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // ── Authenticated — render children ────────────────────────────────────────
+  return <>{children}</>;
+}
diff --git a/services/frontend/src/islands/LiveShell.tsx b/services/frontend/src/islands/LiveShell.tsx
new file mode 100644
index 0000000..4c8f7ad
--- /dev/null
+++ b/services/frontend/src/islands/LiveShell.tsx
@@ -0,0 +1,142 @@
+// ─── LiveShell.tsx — Page shell for /live ────────────────────────────────────
+// Composes Sidebar, Header, ParticleBackground, and the four live islands
+// (VoiceControls, ActiveSpeakers, AudioVisualizer, NowPlaying) into a full-page
+// responsive layout.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { useCallback, useEffect, useState } from "react";
+import {
+  getGuilds,
+  getVoiceChannels,
+  getVoiceStatus,
+} from "../shared/api/client.js";
+import { Header } from "../shared/components/Header.js";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../shared/components/index.js";
+import { ParticleBackground } from "../shared/components/particles/ParticleBackground.js";
+import { Sidebar } from "../shared/components/Sidebar.js";
+import { useTheme } from "../shared/hooks/useTheme.js";
+import type { Channel, Guild } from "../shared/types/guild.js";
+import type { VoiceStatus } from "../shared/types/voice.js";
+import { useVoiceStore } from "../stores/voice-store.js";
+import ActiveSpeakers from "./ActiveSpeakers.js";
+import AudioVisualizer from "./AudioVisualizer.js";
+import NowPlaying from "./NowPlaying.js";
+import VoiceControls from "./VoiceControls.js";
+
+const emptyVoiceStatus: VoiceStatus = {
+  connected: false,
+  activeGuildId: null,
+  activeChannelId: null,
+  activeChannelName: null,
+  connections: [],
+};
+
+export default function LiveShell() {
+  const { mode, isDark, toggle: toggleTheme } = useTheme();
+  const [voiceStatus, setVoiceStatus] = useState<VoiceStatus>(emptyVoiceStatus);
+  const [guilds, setGuilds] = useState<Guild[]>([]);
+  const [voiceChannels, setVoiceChannels] = useState<Channel[]>([]);
+
+  // Watch store for guild changes so we can fetch voice channels
+  const guildId = useVoiceStore((state) => state.guildId);
+
+  // Fetch initial data on mount
+  useEffect(() => {
+    getVoiceStatus()
+      .then(setVoiceStatus)
+      .catch(() => {
+        /* offline — leave default */
+      });
+    getGuilds()
+      .then(setGuilds)
+      .catch(() => {
+        /* offline — leave default */
+      });
+  }, []);
+
+  // Refetch voice channels when guild selection changes
+  useEffect(() => {
+    if (guildId) {
+      getVoiceChannels(guildId)
+        .then(setVoiceChannels)
+        .catch(() => setVoiceChannels([]));
+    } else {
+      setVoiceChannels([]);
+    }
+  }, [guildId]);
+
+  const handleTabChange = useCallback((tab: string) => {
+    if (tab !== "live") {
+      window.location.href = "/";
+    }
+  }, []);
+
+  return (
+    <div className="relative min-h-screen bg-background text-foreground">
+      {/* Background layers */}
+      <ParticleBackground />
+      <div
+        className="fixed inset-0 pointer-events-none grid-pattern opacity-[0.03]"
+        aria-hidden="true"
+      />
+
+      <div className="relative flex min-h-screen">
+        <Sidebar
+          activeTab="live"
+          onTabChange={handleTabChange}
+          collapsed={false}
+          recentMessages={[]}
+        />
+
+        <main className="flex min-w-0 flex-1 flex-col">
+          <Header
+            activeTab="live"
+            wsStatus="disconnected"
+            voiceStatus={voiceStatus}
+            themeMode={mode}
+            isDark={isDark}
+            onThemeToggle={toggleTheme}
+          />
+
+          <div className="flex-1 overflow-auto p-4 md:p-6 lg:p-8 pb-16 md:pb-0">
+            {/* Responsive grid: stacks on <1024px */}
+            <div className="grid gap-6 lg:grid-cols-[1fr_320px]">
+              {/* Main content column */}
+              <div className="space-y-6">
+                <VoiceControls guilds={guilds} voiceChannels={voiceChannels} />
+
+                <Card>
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-base">Live Audio</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <AudioVisualizer barCount={48} height={32} />
+                  </CardContent>
+                </Card>
+
+                <NowPlaying />
+              </div>
+
+              {/* Sidebar column */}
+              <div className="space-y-6">
+                <Card>
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-base">Active Speakers</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <ActiveSpeakers />
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/services/frontend/src/islands/MascotChat.tsx b/services/frontend/src/islands/MascotChat.tsx
new file mode 100644
index 0000000..c24cc79
--- /dev/null
+++ b/services/frontend/src/islands/MascotChat.tsx
@@ -0,0 +1,122 @@
+// ─── MascotChat.tsx — Floating chat bubble island ───────────────────────────
+// Fixed-position toggle button that opens a glass-styled chat panel.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { useCallback, useState } from "react";
+
+const GREETING = "Hi! I'm Bete's mascot. Ask me anything about the server.";
+
+export default function MascotChat() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [message, setMessage] = useState("");
+
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!message.trim()) return;
+      // TODO: wire up chat submission
+      setMessage("");
+    },
+    [message],
+  );
+
+  return (
+    <div className="fixed bottom-6 right-6" style={{ zIndex: 60 }}>
+      {/* ── Chat Panel ──────────────────────────────────────────────────── */}
+      {isOpen && (
+        <div className="glass-strong mb-4 flex w-80 flex-col overflow-hidden rounded-2xl shadow-xl animate-fade-in-up">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
+            <div className="flex items-center gap-2">
+              <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground font-bold">
+                B
+              </div>
+              <span className="text-sm font-semibold text-foreground">
+                Mascot
+              </span>
+            </div>
+          </div>
+
+          {/* Body */}
+          <div className="flex flex-col gap-3 px-4 py-4">
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              {GREETING}
+            </p>
+
+            {/* Quick suggestions */}
+            <div className="flex flex-wrap gap-2">
+              {["What can you do?", "Show me the dashboard"].map(
+                (suggestion) => (
+                  <button
+                    key={suggestion}
+                    type="button"
+                    className="rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs text-primary transition-colors hover:bg-primary/15"
+                    onClick={() => setMessage(suggestion)}
+                  >
+                    {suggestion}
+                  </button>
+                ),
+              )}
+            </div>
+          </div>
+
+          {/* Input */}
+          <form
+            onSubmit={handleSubmit}
+            className="flex items-center gap-2 border-t border-white/10 px-4 py-3"
+          >
+            <input
+              type="text"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Type a message..."
+              className="min-w-0 flex-1 rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/30"
+            />
+            <button
+              type="submit"
+              disabled={!message.trim()}
+              className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-xs text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40"
+            >
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M5 12h14M12 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* ── Toggle Button ───────────────────────────────────────────────── */}
+      <button
+        type="button"
+        onClick={toggle}
+        className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-white shadow-xl transition-transform duration-200 ease-out hover:scale-105 active:scale-95 motion-safe:hover:scale-105"
+        aria-label={isOpen ? "Close chat" : "Open chat"}
+      >
+        {isOpen ? (
+          <span className="text-lg leading-none" aria-hidden="true">
+            ✕
+          </span>
+        ) : (
+          <span className="text-lg leading-none" aria-hidden="true">
+            ✦
+          </span>
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/services/frontend/src/islands/MessageFeed.tsx b/services/frontend/src/islands/MessageFeed.tsx
new file mode 100644
index 0000000..519f0f7
--- /dev/null
+++ b/services/frontend/src/islands/MessageFeed.tsx
@@ -0,0 +1,356 @@
+// ─── MessageFeed.tsx — Standalone message feed island ─────────────────────────
+// Self-contained message list with WebSocket bridging, infinite scroll,
+// loading/empty/error states, and re-analyze per message.
+// ──────────────────────────────────────────────────────────────────────────────
+
+import type { MessageRecord } from "@bete/shared";
+import { AlertCircle, RefreshCw, RotateCw } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { getAppConfig } from "../shared/api/client.js";
+import { Badge, Button, Skeleton } from "../shared/components/index.js";
+import { useMessages } from "../shared/hooks/useMessages.js";
+import { useDashboardSocket } from "../shared/ws/socket.js";
+import { useMessageStore } from "../stores/message-store.js";
+
+interface MessageFeedProps {
+  /** Guild to fetch messages for. If omitted, the list stays empty. */
+  guildId?: string;
+}
+
+// ─── Severity badge colouring ─────────────────────────────────────────────────
+
+const SEVERITY_COLORS: Record<string, string> = {
+  critical:
+    "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800",
+  high: "bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-800",
+  medium:
+    "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800",
+  low: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800",
+};
+
+function severityColor(severity: string): string {
+  return (
+    SEVERITY_COLORS[severity] ?? "bg-muted text-muted-foreground border-border"
+  );
+}
+
+// ─── Single message card ──────────────────────────────────────────────────────
+
+function MessageCard({
+  message,
+  onReanalyze,
+}: {
+  message: MessageRecord;
+  onReanalyze: (id: string) => Promise<void>;
+}) {
+  const [isReanalyzing, setIsReanalyzing] = useState(false);
+  const isDeleted = !!message.deleted_at;
+
+  const handleReanalyze = async () => {
+    setIsReanalyzing(true);
+    try {
+      await onReanalyze(message.id);
+    } finally {
+      setIsReanalyzing(false);
+    }
+  };
+
+  return (
+    <article
+      className={`group rounded-xl border bg-card p-4 shadow-sm transition-all hover:border-primary/30 hover:shadow-md ${
+        isDeleted
+          ? "border-red-200 dark:border-red-900/50 opacity-50"
+          : "border-border"
+      }`}
+    >
+      <div className="flex gap-3">
+        {/* Avatar */}
+        <img
+          src={
+            message.avatar_url ??
+            "https://cdn.discordapp.com/embed/avatars/0.png"
+          }
+          alt=""
+          className="h-10 w-10 shrink-0 rounded-full object-cover ring-2 ring-primary/30"
+          onError={(e) => {
+            e.currentTarget.src =
+              "https://cdn.discordapp.com/embed/avatars/0.png";
+          }}
+        />
+
+        <div className="min-w-0 flex-1 space-y-1.5">
+          {/* Row: username + badges */}
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="font-semibold text-sm text-foreground">
+              {message.username || message.user_id}
+            </span>
+
+            {message.ai_severity && message.ai_severity !== "none" && (
+              <Badge
+                className={`text-[10px] px-1.5 py-0 ${severityColor(message.ai_severity)}`}
+              >
+                {message.ai_severity}
+              </Badge>
+            )}
+
+            {isDeleted && (
+              <span className="text-[11px] text-destructive/70">deleted</span>
+            )}
+
+            <span
+              className="ml-auto text-[11px] text-muted-foreground/60"
+              title={new Date(message.created_at).toLocaleString()}
+            >
+              {formatTimeAgo(message.created_at)}
+            </span>
+          </div>
+
+          {/* Content */}
+          <p
+            className={`whitespace-pre-wrap break-words text-sm leading-6 ${
+              isDeleted ? "text-muted-foreground/60" : "text-foreground/90"
+            }`}
+          >
+            {message.content}
+          </p>
+
+          {/* Re-analyze button */}
+          <div className="flex items-center gap-2 pt-1">
+            <Button
+              size="sm"
+              variant={
+                message.ai_status === "error" ? "destructive" : "outline"
+              }
+              onClick={handleReanalyze}
+              disabled={isReanalyzing || message.ai_status === "pending"}
+              className="text-[11px] h-7 px-2.5"
+            >
+              <RotateCw
+                className={`h-3 w-3 mr-1 ${isReanalyzing ? "animate-spin" : ""}`}
+              />
+              {isReanalyzing ? "Reanalyzing..." : "Re-analyze"}
+            </Button>
+            {message.ai_status === "error" && (
+              <span className="text-[11px] text-pink-600/70 dark:text-pink-400/70">
+                Click to retry
+              </span>
+            )}
+          </div>
+
+          {/* AI analysis summary */}
+          {message.ai_analysis && (
+            <div
+              className={`mt-2 rounded-lg border-l-[3px] px-3 py-2 ${
+                message.ai_status === "flagged"
+                  ? "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"
+              }`}
+            >
+              <p className="text-[12px] text-muted-foreground leading-relaxed whitespace-pre-wrap">
+                {message.ai_analysis}
+              </p>
+            </div>
+          )}
+
+          {/* AI error */}
+          {message.ai_error && (
+            <div className="mt-2 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>
+          )}
+        </div>
+      </div>
+    </article>
+  );
+}
+
+// ─── Skeleton placeholder ─────────────────────────────────────────────────────
+
+function MessageSkeleton() {
+  return (
+    <article className="rounded-xl border border-border bg-card p-4 shadow-sm">
+      <div className="flex gap-3">
+        <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
+        <div className="min-w-0 flex-1 space-y-3">
+          <Skeleton className="h-5 w-48" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-3/4" />
+        </div>
+      </div>
+    </article>
+  );
+}
+
+// ─── Empty state ──────────────────────────────────────────────────────────────
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 gap-2">
+      <p className="text-muted-foreground font-medium">No messages captured</p>
+      <p className="text-sm text-muted-foreground/60">
+        Messages will appear here once they are captured from the monitored
+        guild.
+      </p>
+    </div>
+  );
+}
+
+// ─── Error state ──────────────────────────────────────────────────────────────
+
+function ErrorState({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 gap-4">
+      <AlertCircle className="h-12 w-12 text-destructive" />
+      <p className="text-destructive font-medium">Failed to load messages</p>
+      <p className="text-sm text-muted-foreground max-w-md text-center">
+        {message}
+      </p>
+      <Button onClick={onRetry}>
+        <RefreshCw className="h-4 w-4 mr-2" />
+        Retry
+      </Button>
+    </div>
+  );
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatTimeAgo(ts: number): string {
+  const seconds = Math.floor((Date.now() - ts) / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  return new Date(ts).toLocaleDateString();
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export default function MessageFeed({
+  guildId: propGuildId,
+}: MessageFeedProps) {
+  const {
+    messages,
+    loading,
+    loadingMore,
+    error,
+    fetchMessages,
+    loadMore,
+    reanalyze,
+    hasMore,
+  } = useMessages();
+  const { prependMessage, updateMessage } = useMessageStore();
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const [initialFetchDone, setInitialFetchDone] = useState(false);
+  const [resolvedGuildId, setResolvedGuildId] = useState<string | undefined>(
+    propGuildId,
+  );
+
+  // ── Resolve guildId from app config when not provided as prop ────────────
+  useEffect(() => {
+    if (propGuildId) {
+      setResolvedGuildId(propGuildId);
+      return;
+    }
+    getAppConfig()
+      .then((config) => {
+        if (config.monitorGuildId) setResolvedGuildId(config.monitorGuildId);
+      })
+      .catch(() => {
+        // config unavailable — messages will stay empty until guildId is set
+      });
+  }, [propGuildId]);
+
+  // ── WebSocket bridge ──────────────────────────────────────────────────────
+  // Forward real-time Discord events into the zustand store so the message list
+  // updates without refetching the entire page.
+  useDashboardSocket({
+    onMessageCreated: (data) => prependMessage(data),
+    onMessageUpdated: (data) => updateMessage(data.id, data),
+    onMessageDeleted: (data) =>
+      updateMessage(data.id, {
+        type: "deleted" as const,
+        deleted_at: data.deleted_at,
+      }),
+    onMessageAnalyzed: (data) => updateMessage(data.id, data),
+  });
+
+  // ── Initial fetch ─────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (resolvedGuildId && !initialFetchDone) {
+      setInitialFetchDone(true);
+      fetchMessages(resolvedGuildId).catch(() => {
+        // error is captured by the hook's state
+      });
+    }
+  }, [resolvedGuildId, initialFetchDone, fetchMessages]);
+
+  // ── Infinite scroll via IntersectionObserver ──────────────────────────────
+  useEffect(() => {
+    if (!loadMore || !hasMore) return;
+    const el = sentinelRef.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) loadMore();
+      },
+      { rootMargin: "400px" },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [loadMore, hasMore]);
+
+  // ── Loading state ─────────────────────────────────────────────────────────
+  if (loading && messages.length === 0) {
+    return (
+      <div className="space-y-3">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <MessageSkeleton key={i} />
+        ))}
+      </div>
+    );
+  }
+
+  // ── Error state ───────────────────────────────────────────────────────────
+  if (error && messages.length === 0) {
+    return (
+      <ErrorState
+        message={error}
+        onRetry={() => resolvedGuildId && fetchMessages(resolvedGuildId)}
+      />
+    );
+  }
+
+  // ── Empty state ───────────────────────────────────────────────────────────
+  if (!loading && messages.length === 0) {
+    return <EmptyState />;
+  }
+
+  // ── Success — message list with infinite scroll ───────────────────────────
+  return (
+    <div className="space-y-3">
+      {messages.map((msg) => (
+        <MessageCard key={msg.id} message={msg} onReanalyze={reanalyze} />
+      ))}
+
+      {hasMore && (
+        <div
+          ref={sentinelRef}
+          className="flex items-center justify-center py-4"
+        >
+          {loadingMore ? (
+            <MessageSkeleton />
+          ) : (
+            <div className="h-2 w-2 rounded-full bg-primary/40" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/services/frontend/src/islands/NowPlaying.tsx b/services/frontend/src/islands/NowPlaying.tsx
new file mode 100644
index 0000000..2ecdbc1
--- /dev/null
+++ b/services/frontend/src/islands/NowPlaying.tsx
@@ -0,0 +1,69 @@
+// ─── NowPlaying.tsx — Current media track display island ───────────────────
+// Self-contained: fetches /api/media/status on mount, shows current track or
+// "Nothing playing" fallback.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { Music2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { getMediaStatus } from "../shared/api/client.js";
+import type { MediaState } from "../shared/types/media.js";
+
+export default function NowPlaying() {
+  const [mediaState, setMediaState] = useState<MediaState | null>(null);
+  const [errored, setErrored] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    getMediaStatus()
+      .then((state) => {
+        if (!cancelled) setMediaState(state);
+      })
+      .catch(() => {
+        if (!cancelled) setErrored(true);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (errored) {
+    return (
+      <div className="rounded-xl border border-border bg-card p-4">
+        <p className="text-sm text-muted-foreground">Nothing playing</p>
+      </div>
+    );
+  }
+
+  if (!mediaState || !mediaState.current) {
+    return (
+      <div className="rounded-xl border border-border bg-card p-4">
+        <p className="text-sm text-muted-foreground">Nothing playing</p>
+      </div>
+    );
+  }
+
+  const { current } = mediaState;
+
+  return (
+    <div className="rounded-xl border border-border bg-card p-4">
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <Music2 className="h-5 w-5" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="truncate font-medium">{current.title}</div>
+          <div className="truncate text-xs text-muted-foreground">
+            {current.source}
+          </div>
+        </div>
+        {current.mode && (
+          <span className="rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
+            {current.mode}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/services/frontend/src/islands/PageHeader.tsx b/services/frontend/src/islands/PageHeader.tsx
new file mode 100644
index 0000000..1ceb904
--- /dev/null
+++ b/services/frontend/src/islands/PageHeader.tsx
@@ -0,0 +1,40 @@
+// ─── PageHeader.tsx — Standalone header island for non-SPA pages ────────────
+// Renders a title on the left and the ThemeToggle on the right.
+// Does not depend on wsStatus / voiceStatus / theme context.
+// ──────────────────────────────────────────────────────────────────────────────
+
+import ThemeToggle from "./ThemeToggle.js";
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+}
+
+export default function PageHeader({ title, subtitle }: PageHeaderProps) {
+  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 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <img
+            src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg"
+            alt="IMPHNEN"
+            className="h-7 w-7"
+          />
+          <h1 className="text-xl font-bold tracking-tight">
+            <span className="gradient-text">IMPHNEN</span>
+            <span className="mx-2 text-muted-foreground">&middot;</span>
+            {title}
+          </h1>
+        </div>
+        <div className="flex items-center gap-2">
+          {subtitle && (
+            <p className="hidden text-sm text-muted-foreground md:block">
+              {subtitle}
+            </p>
+          )}
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/services/frontend/src/islands/PageSidebar.tsx b/services/frontend/src/islands/PageSidebar.tsx
new file mode 100644
index 0000000..ddea34f
--- /dev/null
+++ b/services/frontend/src/islands/PageSidebar.tsx
@@ -0,0 +1,30 @@
+// ─── PageSidebar.tsx — Standalone sidebar island for non-SPA pages ───────────
+// Wraps the existing Sidebar widget with URL-based navigation so it can be
+// embedded as an Astro island without needing to pass callback functions.
+// ──────────────────────────────────────────────────────────────────────────────
+
+import { Sidebar } from "../shared/components/Sidebar.js";
+import type { DashboardTab } from "../shared/types/ui-types.js";
+
+const TAB_URLS: Record<DashboardTab, string> = {
+  live: "/live",
+  messages: "/messages",
+  dashboard: "/",
+  settings: "/settings",
+};
+
+interface PageSidebarProps {
+  activeTab: DashboardTab;
+}
+
+export default function PageSidebar({ activeTab }: PageSidebarProps) {
+  return (
+    <Sidebar
+      activeTab={activeTab}
+      collapsed={false}
+      onTabChange={(tab: DashboardTab) => {
+        window.location.href = TAB_URLS[tab] || "/messages";
+      }}
+    />
+  );
+}
diff --git a/services/frontend/src/islands/Particles.tsx b/services/frontend/src/islands/Particles.tsx
new file mode 100644
index 0000000..d698cdf
--- /dev/null
+++ b/services/frontend/src/islands/Particles.tsx
@@ -0,0 +1,104 @@
+// ─── Particles.tsx — Canvas-based particle background island ────────────────
+// Renders 30 animated particles as a decorative background layer.
+// Uses requestAnimationFrame, handles resize, cleans up on unmount.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { useEffect, useRef } from "react";
+
+interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  size: number;
+}
+
+const PARTICLE_COUNT = 30;
+const PARTICLE_COLOR = "oklch(0.62 0.15 255 / 0.15)";
+const MAX_SPEED = 0.4;
+const MIN_SIZE = 2;
+const MAX_SIZE = 6;
+
+function randomRange(min: number, max: number): number {
+  return min + Math.random() * (max - min);
+}
+
+function createParticle(w: number, h: number): Particle {
+  return {
+    x: Math.random() * w,
+    y: Math.random() * h,
+    vx: randomRange(-MAX_SPEED, MAX_SPEED),
+    vy: randomRange(-MAX_SPEED, MAX_SPEED),
+    size: randomRange(MIN_SIZE, MAX_SIZE),
+  };
+}
+
+export default function Particles() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let animationId: number;
+
+    function resize() {
+      if (!canvas) return;
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    }
+
+    resize();
+    window.addEventListener("resize", resize);
+
+    const particles: Particle[] = [];
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+      particles.push(createParticle(canvas.width, canvas.height));
+    }
+
+    function animate() {
+      if (!canvas || !ctx) return;
+      const w = canvas.width;
+      const h = canvas.height;
+
+      ctx.clearRect(0, 0, w, h);
+      ctx.fillStyle = PARTICLE_COLOR;
+
+      for (const p of particles) {
+        p.x += p.vx;
+        p.y += p.vy;
+
+        // Wrap around edges
+        if (p.x < 0) p.x = w;
+        if (p.x > w) p.x = 0;
+        if (p.y < 0) p.y = h;
+        if (p.y > h) p.y = 0;
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      animationId = requestAnimationFrame(animate);
+    }
+
+    animate();
+
+    return () => {
+      cancelAnimationFrame(animationId);
+      window.removeEventListener("resize", resize);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      className="pointer-events-none fixed inset-0"
+      style={{ zIndex: -10 }}
+    />
+  );
+}
diff --git a/services/frontend/src/islands/RecordingsList.tsx b/services/frontend/src/islands/RecordingsList.tsx
new file mode 100644
index 0000000..2b8bb9b
--- /dev/null
+++ b/services/frontend/src/islands/RecordingsList.tsx
@@ -0,0 +1,192 @@
+// ─── RecordingsList.tsx — Voice recordings list island ──────────────────────
+// Fetches recordings from API, renders loading/error/empty/success states.
+// Each recording card shows username, channel, timestamp, download button.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { Download, Mic } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { listRecordings } from "../shared/api/client";
+import { Skeleton } from "../shared/components/skeleton";
+import { formatBytes, formatDate } from "../shared/lib/utils";
+import type { VoiceRecording } from "../shared/types/recording";
+
+type ViewState = "loading" | "error" | "empty" | "success";
+
+export default function RecordingsList() {
+  const [state, setState] = useState<ViewState>("loading");
+  const [recordings, setRecordings] = useState<VoiceRecording[]>([]);
+  const [error, setError] = useState("");
+
+  const fetchRecordings = useCallback(async () => {
+    setState("loading");
+    try {
+      const res = await listRecordings();
+      if (res.items.length === 0) {
+        setState("empty");
+      } else {
+        setRecordings(res.items);
+        setState("success");
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to load recordings",
+      );
+      setState("error");
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchRecordings();
+  }, [fetchRecordings]);
+
+  /* ── Loading ──────────────────────────────────────────────────────────── */
+  if (state === "loading") {
+    return (
+      <div
+        role="presentation"
+        aria-hidden="true"
+        className="flex flex-col gap-4"
+      >
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-3 rounded-lg p-3">
+            <Skeleton className="size-10 shrink-0 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-3.5 w-1/3" />
+              <Skeleton className="h-3 w-2/3" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  /* ── Error ────────────────────────────────────────────────────────────── */
+  if (state === "error") {
+    return (
+      <div
+        role="alert"
+        className="flex min-h-48 flex-col items-center justify-center gap-4 rounded-xl px-6 py-10 text-center"
+        style={{ backgroundColor: "oklch(var(--destructive) / 0.08)" }}
+      >
+        <div
+          className="flex size-12 items-center justify-center rounded-full"
+          style={{ backgroundColor: "oklch(var(--destructive) / 0.15)" }}
+          aria-hidden="true"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ color: "oklch(var(--destructive))" }}
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+        </div>
+        <p className="max-w-sm text-sm font-medium text-foreground">{error}</p>
+        <div className="mt-2">
+          <button
+            type="button"
+            onClick={fetchRecordings}
+            className="btn btn--outline btn--sm"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  /* ── Empty ────────────────────────────────────────────────────────────── */
+  if (state === "empty") {
+    return (
+      <div className="flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-12 text-center">
+        <div
+          className="flex size-16 items-center justify-center"
+          aria-hidden="true"
+        >
+          <Mic
+            className="size-10"
+            style={{ color: "oklch(var(--muted-foreground))" }}
+          />
+        </div>
+        <h2 className="text-xl font-semibold text-foreground">No recordings</h2>
+        <p className="max-w-sm text-sm text-muted-foreground">
+          Voice recordings will appear here once users start speaking in
+          monitored voice channels.
+        </p>
+      </div>
+    );
+  }
+
+  /* ── Success ──────────────────────────────────────────────────────────── */
+  return (
+    <div className="grid gap-4">
+      {recordings.map((recording) => (
+        <RecordingCard key={recording.id} recording={recording} />
+      ))}
+    </div>
+  );
+}
+
+/* ─── Individual Recording Card ─────────────────────────────────────────── */
+
+function RecordingCard({ recording }: { recording: VoiceRecording }) {
+  return (
+    <div className="card card--default card--pad-md">
+      <div className="flex items-center justify-between gap-4">
+        {/* Left: avatar + info */}
+        <div className="flex min-w-0 flex-1 items-center gap-3">
+          <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted">
+            {recording.avatar_url ? (
+              <img
+                src={recording.avatar_url}
+                alt={recording.username}
+                className="size-10 rounded-full object-cover"
+              />
+            ) : (
+              <Mic className="size-5 text-muted-foreground" />
+            )}
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-foreground">
+              {recording.username}
+            </p>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              {recording.channel_name && (
+                <span className="truncate">#{recording.channel_name}</span>
+              )}
+              <span className="shrink-0">
+                {formatDate(recording.created_at)}
+              </span>
+              <span className="shrink-0">
+                {formatBytes(recording.size_bytes)}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Right: download button */}
+        {recording.download_url && (
+          <a
+            href={recording.download_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn--ghost btn--icon shrink-0"
+            aria-label={`Download recording by ${recording.username}`}
+          >
+            <Download className="size-4" />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/services/frontend/src/islands/SettingsForm.tsx b/services/frontend/src/islands/SettingsForm.tsx
new file mode 100644
index 0000000..3b19f1c
--- /dev/null
+++ b/services/frontend/src/islands/SettingsForm.tsx
@@ -0,0 +1,89 @@
+// ─── SettingsForm.tsx — Appearance settings island ─────────────────────────
+// Reads/writes theme preference (dark/light/system) to localStorage key
+// "bete-dashboard-theme", applies data-theme attribute and .dark class.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { useCallback, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+const STORAGE_KEY = "bete-dashboard-theme";
+
+const THEME_OPTIONS: { value: Theme; label: string }[] = [
+  { value: "dark", label: "Dark" },
+  { value: "light", label: "Light" },
+  { value: "system", label: "System" },
+];
+
+function getStoredTheme(): Theme {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "dark" || stored === "light" || stored === "system") {
+      return stored;
+    }
+  } catch {
+    // localStorage unavailable
+  }
+  return "dark";
+}
+
+function resolveTheme(theme: Theme): "dark" | "light" {
+  if (theme === "system") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  return theme;
+}
+
+function applyTheme(theme: Theme): void {
+  const root = document.documentElement;
+  const actual = resolveTheme(theme);
+  root.setAttribute("data-theme", actual);
+  root.classList.toggle("dark", actual === "dark");
+}
+
+function storeTheme(theme: Theme): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, theme);
+  } catch {
+    // quota exceeded or unavailable
+  }
+}
+
+export default function SettingsForm() {
+  const [theme, setTheme] = useState<Theme>(getStoredTheme);
+
+  useEffect(() => {
+    applyTheme(theme);
+    storeTheme(theme);
+  }, [theme]);
+
+  const handleThemeChange = useCallback((value: Theme) => {
+    setTheme(value);
+  }, []);
+
+  return (
+    <section>
+      <h2 className="mb-4 text-lg font-semibold text-foreground">Appearance</h2>
+      <p className="mb-4 text-sm text-muted-foreground">
+        Choose your preferred color scheme for the dashboard.
+      </p>
+      <div className="flex gap-2">
+        {THEME_OPTIONS.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            className={`btn ${
+              theme === option.value ? "btn--primary" : "btn--outline"
+            } btn--sm`}
+            onClick={() => handleThemeChange(option.value)}
+            aria-pressed={theme === option.value}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/services/frontend/src/islands/ThemeToggle.tsx b/services/frontend/src/islands/ThemeToggle.tsx
new file mode 100644
index 0000000..de7f607
--- /dev/null
+++ b/services/frontend/src/islands/ThemeToggle.tsx
@@ -0,0 +1,68 @@
+// ─── ThemeToggle.tsx — Standalone dark/light toggle island ──────────────────
+// Reads/writes localStorage key "bete-dashboard-theme", updates data-theme
+// attribute and .dark class on <html>.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { Moon, Sun } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+type Theme = "dark" | "light";
+
+const STORAGE_KEY = "bete-dashboard-theme";
+
+function getInitialTheme(): Theme {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+    // localStorage unavailable
+  }
+  return "dark";
+}
+
+function applyTheme(theme: Theme): void {
+  const root = document.documentElement;
+  root.setAttribute("data-theme", theme);
+  if (theme === "dark") {
+    root.classList.add("dark");
+  } else {
+    root.classList.remove("dark");
+  }
+}
+
+function storeTheme(theme: Theme): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, theme);
+  } catch {
+    // quota exceeded or unavailable
+  }
+}
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+  // Apply theme on mount and whenever it changes
+  useEffect(() => {
+    applyTheme(theme);
+    storeTheme(theme);
+  }, [theme]);
+
+  const toggle = useCallback(() => {
+    setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+  }, []);
+
+  return (
+    <button
+      type="button"
+      className="btn btn--ghost btn--icon"
+      onClick={toggle}
+      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+    >
+      {theme === "dark" ? (
+        <Sun className="h-4 w-4" aria-hidden="true" />
+      ) : (
+        <Moon className="h-4 w-4" aria-hidden="true" />
+      )}
+    </button>
+  );
+}
diff --git a/services/frontend/src/islands/VoiceControls.tsx b/services/frontend/src/islands/VoiceControls.tsx
new file mode 100644
index 0000000..daa86aa
--- /dev/null
+++ b/services/frontend/src/islands/VoiceControls.tsx
@@ -0,0 +1,110 @@
+// ─── VoiceControls.tsx — Voice bridge island ────────────────────────────────
+// Self-contained: reads/writes useVoiceStore, calls API for connect/disconnect.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { Radio } from "lucide-react";
+import { useCallback, useState } from "react";
+import { connectVoice, disconnectVoice } from "../shared/api/client.js";
+import { Button, Select } from "../shared/components/index.js";
+import type { Channel, Guild } from "../shared/types/guild.js";
+import { useVoiceStore } from "../stores/voice-store.js";
+
+interface VoiceControlsProps {
+  guilds: Guild[];
+  voiceChannels: Channel[];
+}
+
+export default function VoiceControls({
+  guilds,
+  voiceChannels,
+}: VoiceControlsProps) {
+  const connected = useVoiceStore((state) => state.connected);
+  const guildId = useVoiceStore((state) => state.guildId);
+  const channelId = useVoiceStore((state) => state.channelId);
+  const setGuildChannel = useVoiceStore((state) => state.setGuildChannel);
+  const setConnected = useVoiceStore((state) => state.setConnected);
+  const [loading, setLoading] = useState(false);
+
+  const handleConnect = useCallback(async () => {
+    if (!guildId || !channelId) return;
+    setLoading(true);
+    try {
+      const status = await connectVoice(guildId, channelId);
+      setConnected(status.connected);
+    } catch {
+      // API error handled by global handler
+    } finally {
+      setLoading(false);
+    }
+  }, [guildId, channelId, setConnected]);
+
+  const handleDisconnect = useCallback(async () => {
+    setLoading(true);
+    try {
+      const status = await disconnectVoice();
+      setConnected(status.connected);
+    } catch {
+      // API error handled by global handler
+    } finally {
+      setLoading(false);
+    }
+  }, [setConnected]);
+
+  return (
+    <div className="glass rounded-xl p-6">
+      <h3 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
+        <Radio className="h-5 w-5 text-primary" /> Voice Bridge
+      </h3>
+      <p className="mt-1 text-sm text-muted-foreground">
+        Join a Discord voice channel to monitor live audio.
+      </p>
+
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-foreground">Guild</label>
+          <Select
+            value={guildId}
+            onChange={(e) => setGuildChannel(e.target.value, channelId)}
+            placeholder="Select guild"
+            disabled={connected}
+            options={guilds.map((g) => ({ value: g.id, label: g.name }))}
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-foreground">
+            Voice Channel
+          </label>
+          <Select
+            value={channelId}
+            onChange={(e) => setGuildChannel(guildId, e.target.value)}
+            placeholder="Select channel"
+            disabled={connected || !guildId}
+            options={voiceChannels.map((c) => ({
+              value: c.id,
+              label: c.name,
+            }))}
+          />
+        </div>
+      </div>
+
+      <div className="mt-4 flex gap-2">
+        {connected ? (
+          <Button
+            variant="destructive"
+            onClick={handleDisconnect}
+            disabled={loading}
+          >
+            {loading ? "Disconnecting..." : "Disconnect"}
+          </Button>
+        ) : (
+          <Button
+            onClick={handleConnect}
+            disabled={!guildId || !channelId || loading}
+          >
+            {loading ? "Connecting..." : "Join Voice"}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/services/frontend/src/layouts/AuthLayout.astro b/services/frontend/src/layouts/AuthLayout.astro
new file mode 100644
index 0000000..4ce71b1
--- /dev/null
+++ b/services/frontend/src/layouts/AuthLayout.astro
@@ -0,0 +1,15 @@
+---
+// ─── AuthLayout.astro — Centered authentication layout ─────────────────────
+// Wraps BaseLayout with a full-screen centered flex container and a glass card.
+// Used for login, password reset, and other auth-related pages.
+// ────────────────────────────────────────────────────────────────────────────
+import BaseLayout from "./BaseLayout.astro";
+---
+
+<BaseLayout>
+  <main class="flex min-h-screen items-center justify-center p-4">
+    <div class="glass w-full max-w-sm rounded-xl p-6">
+      <slot />
+    </div>
+  </main>
+</BaseLayout>
diff --git a/services/frontend/src/layouts/BaseLayout.astro b/services/frontend/src/layouts/BaseLayout.astro
index f033fef..97d7584 100644
--- a/services/frontend/src/layouts/BaseLayout.astro
+++ b/services/frontend/src/layouts/BaseLayout.astro
@@ -4,10 +4,17 @@
 // All interactive content is delegated to React islands via <slot/>.
 // ──────────────────────────────────────────────────────────────────────────────
 
+// Import global design system styles (Tailwind 4 + tokens)
+import "../styles/base.css";
+
 // 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";
 
+// JetBrains Mono untuk code/monospace
+const FONT_HREF_MONO =
+  "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";
+
 const FALLBACK_TITLE = "IMPHNEN — Discord Moderation";
 const FALLBACK_DESC =
   "Real-time Discord AI Moderation & Voice Recording Dashboard";
@@ -21,6 +28,7 @@ const FALLBACK_IMAGE =
     <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" />
+    <meta name="view-transition" content="same-origin" />
 
     <!-- Primary Meta Tags -->
     <title>{FALLBACK_TITLE}</title>
@@ -42,10 +50,13 @@ const FALLBACK_IMAGE =
     <!-- Icon -->
     <link rel="icon" type="image/svg+xml" href={FALLBACK_IMAGE} />
 
-    <!-- Font Preconnect -->
+    <!-- Font Preconnect & Preload -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href={FONT_HREF} />
+    <link rel="preload" as="style" href={FONT_HREF_MONO} />
     <link href={FONT_HREF} rel="stylesheet" />
+    <link href={FONT_HREF_MONO} rel="stylesheet" />
 
     <!-- ── Anti-FOUC: apply saved theme BEFORE React renders ────────────── -->
     <script is:inline>
@@ -76,6 +87,30 @@ const FALLBACK_IMAGE =
         }
       })();
     </script>
+
+    <!-- ── View Transitions ────────────────────────────────── -->
+    <style is:global>
+      @keyframes fade-out {
+        from { opacity: 1; }
+        to   { opacity: 0; }
+      }
+      @keyframes fade-in-up {
+        from { opacity: 0; transform: translateY(20px); }
+        to   { opacity: 1; transform: translateY(0); }
+      }
+      ::view-transition-old(root) {
+        animation: fade-out 250ms ease-out forwards;
+      }
+      ::view-transition-new(root) {
+        animation: fade-in-up 350ms ease-out forwards;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+          animation: none;
+        }
+      }
+    </style>
   </head>
   <body>
     <!-- React island: seluruh app di-render oleh React -->
diff --git a/services/frontend/src/pages/404.astro b/services/frontend/src/pages/404.astro
new file mode 100644
index 0000000..24cfeef
--- /dev/null
+++ b/services/frontend/src/pages/404.astro
@@ -0,0 +1,20 @@
+---
+// ─── 404.astro — Not Found page ────────────────────────────────────────────
+// Uses BaseLayout with a centered 404 message, gradient-text heading,
+// and a "Go Home" button linking to the root.
+// ────────────────────────────────────────────────────────────────────────────
+import BaseLayout from "../layouts/BaseLayout.astro";
+---
+
+<BaseLayout>
+  <main class="flex min-h-screen flex-col items-center justify-center gap-6 p-4 text-center">
+    <h1 class="gradient-text text-8xl font-bold leading-none">404</h1>
+    <p class="text-xl text-muted-foreground">Page not found</p>
+    <a
+      href="/"
+      class="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+    >
+      Go Home
+    </a>
+  </main>
+</BaseLayout>
diff --git a/services/frontend/src/pages/index.astro b/services/frontend/src/pages/index.astro
index e005c1a..a5dbee1 100644
--- a/services/frontend/src/pages/index.astro
+++ b/services/frontend/src/pages/index.astro
@@ -1,12 +1,6 @@
 ---
-// ─── 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";
+// ─── index.astro — Redirect to live dashboard ──────────────────────────────
+// The root path now redirects to /live where the full SPA lives.
+// ────────────────────────────────────────────────────────────────────────────
+return Astro.redirect("/live", 301);
 ---
-
-<BaseLayout>
-  <!-- React island: seluruh SPA di-render oleh React -->
-  <AppClient client:only="react" />
-</BaseLayout>
diff --git a/services/frontend/src/pages/live.astro b/services/frontend/src/pages/live.astro
new file mode 100644
index 0000000..ed35ea6
--- /dev/null
+++ b/services/frontend/src/pages/live.astro
@@ -0,0 +1,14 @@
+---
+// ─── live.astro — Voice & Media live monitoring page ────────────────────────
+// Full-page layout with Sidebar navigation, Header, and the LiveShell React
+// island that composes all live components (VoiceControls, ActiveSpeakers,
+// AudioVisualizer, NowPlaying).
+// Particles and MascotChat are embedded inside the LiveShell island.
+// ────────────────────────────────────────────────────────────────────────────
+import BaseLayout from "../layouts/BaseLayout.astro";
+import LiveShell from "../islands/LiveShell";
+---
+
+<BaseLayout>
+  <LiveShell client:only="react" />
+</BaseLayout>
diff --git a/services/frontend/src/pages/login.astro b/services/frontend/src/pages/login.astro
new file mode 100644
index 0000000..e95d8ad
--- /dev/null
+++ b/services/frontend/src/pages/login.astro
@@ -0,0 +1,13 @@
+---
+// ─── login.astro — Admin authentication page ───────────────────────────────
+// Renders the AuthGuard React island inside the AuthLayout shell.
+// Authenticated users are redirected to /live.
+// ────────────────────────────────────────────────────────────────────────────
+import AuthLayout from "../layouts/AuthLayout.astro";
+import AuthGuard from "../shared/components/auth/AuthGuard.client";
+---
+
+<AuthLayout>
+  <h1 class="gradient-text text-2xl font-bold text-center mb-6">Login — BETE</h1>
+  <AuthGuard client:load redirectTo="/live" />
+</AuthLayout>
diff --git a/services/frontend/src/pages/messages.astro b/services/frontend/src/pages/messages.astro
new file mode 100644
index 0000000..66305ce
--- /dev/null
+++ b/services/frontend/src/pages/messages.astro
@@ -0,0 +1,28 @@
+---
+// ─── messages.astro — Standalone messages & moderation page ─────────────────
+// Shows a full-page message feed with sidebar navigation, page header, and
+// real-time WebSocket updates via the MessageFeed React island.
+// ──────────────────────────────────────────────────────────────────────────────
+import BaseLayout from "../layouts/BaseLayout.astro";
+import PageHeader from "../islands/PageHeader.tsx";
+import PageSidebar from "../islands/PageSidebar.tsx";
+import MessageFeed from "../islands/MessageFeed.tsx";
+---
+
+<BaseLayout>
+  <div class="flex min-h-screen">
+    <!-- Sidebar -->
+    <PageSidebar client:load activeTab="messages" />
+
+    <!-- Main content area -->
+    <main class="flex min-w-0 flex-1 flex-col">
+      <!-- Header with title and built-in theme toggle -->
+      <PageHeader client:load title="Messages" />
+
+      <!-- Message feed -->
+      <div class="flex-1 overflow-auto p-4 md:p-6 lg:p-8">
+        <MessageFeed client:load />
+      </div>
+    </main>
+  </div>
+</BaseLayout>
diff --git a/services/frontend/src/pages/recordings.astro b/services/frontend/src/pages/recordings.astro
new file mode 100644
index 0000000..fa7b37a
--- /dev/null
+++ b/services/frontend/src/pages/recordings.astro
@@ -0,0 +1,27 @@
+---
+// ─── recordings.astro — Voice Recordings page ─────────────────────────────
+// Lists all voice recordings with loading/error/empty/success states.
+// ────────────────────────────────────────────────────────────────────────────
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Sidebar from "../components/sidebar/Sidebar.astro";
+import Header from "../components/header/Header.astro";
+import Card from "../components/ui/Card.astro";
+import ThemeToggle from "../islands/ThemeToggle";
+import RecordingsList from "../islands/RecordingsList";
+---
+
+<BaseLayout>
+  <div class="flex min-h-screen">
+    <Sidebar currentPath={Astro.url.pathname} />
+    <div class="ml-64 flex flex-1 flex-col">
+      <Header title="Recordings">
+        <ThemeToggle slot="actions" client:load />
+      </Header>
+      <main class="flex-1 p-6">
+        <Card>
+          <RecordingsList client:load />
+        </Card>
+      </main>
+    </div>
+  </div>
+</BaseLayout>
diff --git a/services/frontend/src/pages/settings.astro b/services/frontend/src/pages/settings.astro
new file mode 100644
index 0000000..a18f8b9
--- /dev/null
+++ b/services/frontend/src/pages/settings.astro
@@ -0,0 +1,27 @@
+---
+// ─── settings.astro — Dashboard Settings page ─────────────────────────────
+// Appearance settings: theme selection (dark/light/system).
+// ────────────────────────────────────────────────────────────────────────────
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Sidebar from "../components/sidebar/Sidebar.astro";
+import Header from "../components/header/Header.astro";
+import Card from "../components/ui/Card.astro";
+import ThemeToggle from "../islands/ThemeToggle";
+import SettingsForm from "../islands/SettingsForm";
+---
+
+<BaseLayout>
+  <div class="flex min-h-screen">
+    <Sidebar currentPath={Astro.url.pathname} />
+    <div class="ml-64 flex flex-1 flex-col">
+      <Header title="Settings">
+        <ThemeToggle slot="actions" client:load />
+      </Header>
+      <main class="flex-1 p-6">
+        <Card class="max-w-2xl">
+          <SettingsForm client:idle />
+        </Card>
+      </main>
+    </div>
+  </div>
+</BaseLayout>
diff --git a/services/frontend/src/shared/api/client.ts b/services/frontend/src/shared/api/client.ts
index 80ae557..071c3be 100644
--- a/services/frontend/src/shared/api/client.ts
+++ b/services/frontend/src/shared/api/client.ts
@@ -1,6 +1,7 @@
 // ─── Shared HTTP client — all API endpoints in one file ──────────────────────
 
 import type { MessageRecord, PageResult } from "@bete/shared";
+import { createLogger } from "../lib/logger.js";
 import type {
   ChatResponse,
   DashboardChannel,
@@ -8,29 +9,20 @@ import type {
   DashboardStats,
   DashboardUser,
   DashboardUserDetail,
-} from "../../entities/dashboard/types.js";
-import type {
-  Channel,
-  Guild,
-  GuildVoiceEntry,
-} from "../../entities/guild/types.js";
-import type {
-  MediaItem,
-  MediaMode,
-  MediaState,
-} from "../../entities/media/types.js";
+} from "../types/dashboard.js";
+import type { Channel, Guild, GuildVoiceEntry } from "../types/guild.js";
+import type { MediaItem, MediaMode, MediaState } from "../types/media.js";
 import type {
   VoiceRecording,
   VoiceRecordingListResponse,
-} from "../../entities/recording/types.js";
+} from "../types/recording.js";
 import type {
   AdminSettings,
   AppConfig,
   DashboardTab,
   UIState,
-} from "../../entities/ui/types.js";
-import type { ActiveSpeaker, VoiceStatus } from "../../entities/voice/types.js";
-import { createLogger } from "../lib/logger.js";
+} from "../types/ui-types.js";
+import type { ActiveSpeaker, VoiceStatus } from "../types/voice.js";
 
 const logger = createLogger("api");
 
@@ -230,9 +222,7 @@ export function reanalyzeMessage(id: string): Promise<void> {
   return request<void>(`/api/messages/${id}/reanalyze`, { method: "POST" });
 }
 
-export function getMessageById(
-  id: string,
-): Promise<MessageRecord | null> {
+export function getMessageById(id: string): Promise<MessageRecord | null> {
   return request<MessageRecord | null>(`/api/messages/detail/${id}`);
 }
 
@@ -335,7 +325,9 @@ export function deleteRecording(id: string): Promise<void> {
 
 // ─── Auth ────────────────────────────────────────────────────────────────────
 
-export function login(password: string): Promise<{ ok: boolean; token?: string }> {
+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 }),
diff --git a/services/frontend/src/shared/ui/CommandPalette.tsx b/services/frontend/src/shared/components/CommandPalette.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/CommandPalette.tsx
rename to services/frontend/src/shared/components/CommandPalette.tsx
index 01773d3..6fd39cb 100644
--- a/services/frontend/src/shared/ui/CommandPalette.tsx
+++ b/services/frontend/src/shared/components/CommandPalette.tsx
@@ -13,11 +13,11 @@ import {
 } from "lucide-react";
 import type { KeyboardEvent } from "react";
 import {
+  type ChangeEvent,
   useCallback,
   useEffect,
   useRef,
   useState,
-  type ChangeEvent,
 } from "react";
 import type { MessageRecord } from "../api/client";
 import { request } from "../api/client";
diff --git a/services/frontend/src/widgets/Header.tsx b/services/frontend/src/shared/components/Header.tsx
similarity index 88%
rename from services/frontend/src/widgets/Header.tsx
rename to services/frontend/src/shared/components/Header.tsx
index 384052d..ff4c81e 100644
--- a/services/frontend/src/widgets/Header.tsx
+++ b/services/frontend/src/shared/components/Header.tsx
@@ -1,12 +1,12 @@
 import { motion } from "framer-motion";
 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 { fadeSlideUp } from "../hooks/useFramerStagger";
 import type { ThemeMode } from "../hooks/useTheme";
-import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
-import { cn } from "../shared/lib/utils";
-import { Badge } from "../shared/ui";
-import type { WsStatus } from "../shared/ws/socket";
+import { cn } from "../lib/utils";
+import type { DashboardTab } from "../types/ui-types.js";
+import type { VoiceStatus } from "../types/voice.js";
+import type { WsStatus } from "../ws/socket";
+import { Badge } from "./badge";
 
 const titles: Record<DashboardTab, string> = {
   messages: "Messages & Moderation",
@@ -19,7 +19,8 @@ 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.",
+  settings:
+    "Manage dashboard visibility, runtime configuration, and authentication.",
 };
 
 interface HeaderProps {
@@ -69,7 +70,14 @@ function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
   );
 }
 
-export function Header({ activeTab, wsStatus, voiceStatus, themeMode, isDark, onThemeToggle }: 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">
@@ -111,7 +119,9 @@ export function Header({ activeTab, wsStatus, voiceStatus, themeMode, isDark, on
             ) : (
               <Moon className="h-3.5 w-3.5 text-indigo-400" />
             )}
-            <span className="hidden sm:inline">{isDark ? "Light" : "Dark"}</span>
+            <span className="hidden sm:inline">
+              {isDark ? "Light" : "Dark"}
+            </span>
           </button>
 
           {/* WS Badge */}
diff --git a/services/frontend/src/shared/ui/MobileTabBar.tsx b/services/frontend/src/shared/components/MobileTabBar.tsx
similarity index 92%
rename from services/frontend/src/shared/ui/MobileTabBar.tsx
rename to services/frontend/src/shared/components/MobileTabBar.tsx
index dd17642..c89460f 100644
--- a/services/frontend/src/shared/ui/MobileTabBar.tsx
+++ b/services/frontend/src/shared/components/MobileTabBar.tsx
@@ -1,7 +1,7 @@
 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";
+import type { DashboardTab } from "../types/ui-types.js";
 
 const tabs: Array<{ id: DashboardTab; label: string; Icon: typeof Radio }> = [
   { id: "messages", label: "Messages", Icon: MessageSquare },
@@ -44,7 +44,9 @@ export function MobileTabBar({ activeTab, onTabChange }: MobileTabBarProps) {
               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")} />
+          <Icon
+            className={cn("h-5 w-5", activeTab === id && "drop-shadow-sm")}
+          />
           <span className="text-[10px]">{label}</span>
           {activeTab === id && (
             <motion.div
diff --git a/services/frontend/src/widgets/Sidebar.tsx b/services/frontend/src/shared/components/Sidebar.tsx
similarity index 93%
rename from services/frontend/src/widgets/Sidebar.tsx
rename to services/frontend/src/shared/components/Sidebar.tsx
index 4a44ded..0945bdc 100644
--- a/services/frontend/src/widgets/Sidebar.tsx
+++ b/services/frontend/src/shared/components/Sidebar.tsx
@@ -6,10 +6,10 @@ import {
   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";
-import { cn } from "../shared/lib/utils";
+import { useMascotChat } from "../hooks/useMascotChat";
+import { cn } from "../lib/utils";
+import type { MessageRecord } from "../types/message.js";
+import type { DashboardTab } from "../types/ui-types.js";
 import { MascotChatbot } from "./mascot/MascotChatbot";
 import { MascotImage } from "./mascot/MascotImage";
 
@@ -115,7 +115,8 @@ export function Sidebar({
                 >
                   <Icon className="h-4 w-4 shrink-0" />
                   {!collapsed && <span>{item.label}</span>}
-                  {!collapsed && item.id === "messages" &&
+                  {!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">
@@ -123,7 +124,8 @@ export function Sidebar({
                       </span>
                     )}
                   {/* Collapsed badge — top-right dot */}
-                  {collapsed && item.id === "messages" &&
+                  {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">
diff --git a/services/frontend/src/shared/components/auth/AuthGuard.client.tsx b/services/frontend/src/shared/components/auth/AuthGuard.client.tsx
new file mode 100644
index 0000000..cee66c4
--- /dev/null
+++ b/services/frontend/src/shared/components/auth/AuthGuard.client.tsx
@@ -0,0 +1,19 @@
+// ─── AuthGuard.client.tsx — Astro React island for login page ──────────────
+// Thin wrapper around AuthOverlay that redirects to the main app on success.
+// Loaded via client:load on the login page.
+// ────────────────────────────────────────────────────────────────────────────
+
+import { useCallback } from "react";
+import { AuthOverlay } from "./index";
+
+interface AuthGuardProps {
+  redirectTo?: string;
+}
+
+export default function AuthGuard({ redirectTo = "/live" }: AuthGuardProps) {
+  const handleAuthenticated = useCallback(() => {
+    window.location.href = redirectTo;
+  }, [redirectTo]);
+
+  return <AuthOverlay isPublic={false} onAuthenticated={handleAuthenticated} />;
+}
diff --git a/services/frontend/src/features/auth/index.tsx b/services/frontend/src/shared/components/auth/index.tsx
similarity index 95%
rename from services/frontend/src/features/auth/index.tsx
rename to services/frontend/src/shared/components/auth/index.tsx
index 7f5faba..34f6aab 100644
--- a/services/frontend/src/features/auth/index.tsx
+++ b/services/frontend/src/shared/components/auth/index.tsx
@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
-import { Lock, Unlock, Shield, WifiOff, RefreshCw } from "lucide-react";
-import { useState, useCallback } from "react";
-import { login, setSessionToken } from "../../shared/api/client.js";
+import { Lock, RefreshCw, Shield, Unlock, WifiOff } from "lucide-react";
+import { useCallback, useState } from "react";
+import { login, setSessionToken } from "../../api/client.js";
 import {
   Button,
   Card,
@@ -10,7 +10,7 @@ import {
   CardHeader,
   CardTitle,
   Input,
-} from "../../shared/ui";
+} from "../index";
 
 interface AuthOverlayProps {
   onAuthenticated: () => void;
@@ -153,7 +153,8 @@ export function AuthOverlay({
             <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.
+              authentication. Admin password is only needed for management
+              actions.
             </p>
           )}
         </CardContent>
diff --git a/services/frontend/src/shared/ui/badge.tsx b/services/frontend/src/shared/components/badge.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/badge.tsx
rename to services/frontend/src/shared/components/badge.tsx
diff --git a/services/frontend/src/shared/ui/button.tsx b/services/frontend/src/shared/components/button.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/button.tsx
rename to services/frontend/src/shared/components/button.tsx
diff --git a/services/frontend/src/shared/ui/card.tsx b/services/frontend/src/shared/components/card.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/card.tsx
rename to services/frontend/src/shared/components/card.tsx
diff --git a/services/frontend/src/shared/ui/error-boundary.tsx b/services/frontend/src/shared/components/error-boundary.tsx
similarity index 98%
rename from services/frontend/src/shared/ui/error-boundary.tsx
rename to services/frontend/src/shared/components/error-boundary.tsx
index 6450b74..0849e94 100644
--- a/services/frontend/src/shared/ui/error-boundary.tsx
+++ b/services/frontend/src/shared/components/error-boundary.tsx
@@ -1,7 +1,7 @@
-import { Component, type ErrorInfo, type ReactNode } from "react";
 import { AlertTriangle, RefreshCw } from "lucide-react";
-import { Button } from "../ui/button";
+import { Component, type ErrorInfo, type ReactNode } from "react";
 import { cn } from "../lib/utils";
+import { Button } from "./button";
 
 interface ErrorBoundaryProps {
   children: ReactNode;
diff --git a/services/frontend/src/shared/ui/index.ts b/services/frontend/src/shared/components/index.ts
similarity index 100%
rename from services/frontend/src/shared/ui/index.ts
rename to services/frontend/src/shared/components/index.ts
diff --git a/services/frontend/src/shared/ui/input.tsx b/services/frontend/src/shared/components/input.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/input.tsx
rename to services/frontend/src/shared/components/input.tsx
diff --git a/services/frontend/src/widgets/mascot/MascotChatbot.tsx b/services/frontend/src/shared/components/mascot/MascotChatbot.tsx
similarity index 99%
rename from services/frontend/src/widgets/mascot/MascotChatbot.tsx
rename to services/frontend/src/shared/components/mascot/MascotChatbot.tsx
index 6fe1faa..69d65f1 100644
--- a/services/frontend/src/widgets/mascot/MascotChatbot.tsx
+++ b/services/frontend/src/shared/components/mascot/MascotChatbot.tsx
@@ -1,8 +1,8 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { Maximize2, MessageCircle, Minimize2, Send, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { createLogger } from "../../shared/lib/logger.js";
-import { cn } from "../../shared/lib/utils";
+import { createLogger } from "../../lib/logger.js";
+import { cn } from "../../lib/utils";
 
 const logger = createLogger("mascot-chat");
 
diff --git a/services/frontend/src/widgets/mascot/MascotImage.tsx b/services/frontend/src/shared/components/mascot/MascotImage.tsx
similarity index 96%
rename from services/frontend/src/widgets/mascot/MascotImage.tsx
rename to services/frontend/src/shared/components/mascot/MascotImage.tsx
index 2f1eed4..50b5f55 100644
--- a/services/frontend/src/widgets/mascot/MascotImage.tsx
+++ b/services/frontend/src/shared/components/mascot/MascotImage.tsx
@@ -53,7 +53,9 @@ export function MascotImage({
   return (
     <div className="relative inline-block">
       {imgError ? (
-        <div className={`flex items-center justify-center ${sizeClass} bg-muted/30 rounded-xl`}>
+        <div
+          className={`flex items-center justify-center ${sizeClass} bg-muted/30 rounded-xl`}
+        >
           <MessageCircle className="h-6 w-6 text-muted-foreground/50" />
         </div>
       ) : (
diff --git a/services/frontend/src/widgets/particles/ParticleBackground.tsx b/services/frontend/src/shared/components/particles/ParticleBackground.tsx
similarity index 72%
rename from services/frontend/src/widgets/particles/ParticleBackground.tsx
rename to services/frontend/src/shared/components/particles/ParticleBackground.tsx
index 21f6638..395405b 100644
--- a/services/frontend/src/widgets/particles/ParticleBackground.tsx
+++ b/services/frontend/src/shared/components/particles/ParticleBackground.tsx
@@ -20,14 +20,19 @@ export function ParticleBackground() {
       style={{ zIndex: -1 }}
     >
       {/* Top-right glow orb */}
-      <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))" }}
+      <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 blur-3xl animate-glow-pulse"
         style={{
-          backgroundColor: "oklch(var(--particle-secondary, 0.552 0.016 285.938 / 0.1))",
+          backgroundColor:
+            "oklch(var(--particle-secondary, 0.552 0.016 285.938 / 0.1))",
           animationDelay: "1.5s",
         }}
       />
diff --git a/services/frontend/src/shared/ui/profile-detail.tsx b/services/frontend/src/shared/components/profile-detail.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/profile-detail.tsx
rename to services/frontend/src/shared/components/profile-detail.tsx
diff --git a/services/frontend/src/shared/ui/scroll-area.tsx b/services/frontend/src/shared/components/scroll-area.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/scroll-area.tsx
rename to services/frontend/src/shared/components/scroll-area.tsx
diff --git a/services/frontend/src/shared/ui/select.tsx b/services/frontend/src/shared/components/select.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/select.tsx
rename to services/frontend/src/shared/components/select.tsx
diff --git a/services/frontend/src/shared/ui/skeleton.tsx b/services/frontend/src/shared/components/skeleton.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/skeleton.tsx
rename to services/frontend/src/shared/components/skeleton.tsx
diff --git a/services/frontend/src/shared/ui/status-badge.tsx b/services/frontend/src/shared/components/status-badge.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/status-badge.tsx
rename to services/frontend/src/shared/components/status-badge.tsx
diff --git a/services/frontend/src/shared/ui/summary-list.tsx b/services/frontend/src/shared/components/summary-list.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/summary-list.tsx
rename to services/frontend/src/shared/components/summary-list.tsx
diff --git a/services/frontend/src/shared/ui/tabs.tsx b/services/frontend/src/shared/components/tabs.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/tabs.tsx
rename to services/frontend/src/shared/components/tabs.tsx
diff --git a/services/frontend/src/shared/ui/toast.tsx b/services/frontend/src/shared/components/toast.tsx
similarity index 100%
rename from services/frontend/src/shared/ui/toast.tsx
rename to services/frontend/src/shared/components/toast.tsx
diff --git a/services/frontend/src/shared/hooks/useMascotChat.ts b/services/frontend/src/shared/hooks/useMascotChat.ts
index 43eaf6f..fa99140 100644
--- a/services/frontend/src/shared/hooks/useMascotChat.ts
+++ b/services/frontend/src/shared/hooks/useMascotChat.ts
@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
-import type { ChatResponse } from "../../entities/dashboard/types.js";
 import { request } from "../api/client";
 import { createLogger } from "../lib/logger";
+import type { ChatResponse } from "../types/dashboard.js";
 
 const logger = createLogger("useMascotChat");
 
diff --git a/services/frontend/src/features/messages/hooks/useMessages.ts b/services/frontend/src/shared/hooks/useMessages.ts
similarity index 69%
rename from services/frontend/src/features/messages/hooks/useMessages.ts
rename to services/frontend/src/shared/hooks/useMessages.ts
index 24b23d4..e6c802b 100644
--- a/services/frontend/src/features/messages/hooks/useMessages.ts
+++ b/services/frontend/src/shared/hooks/useMessages.ts
@@ -1,16 +1,17 @@
+import type { MessageRecord } from "@bete/shared";
 import { useCallback, useRef, useState } from "react";
-import type { MessageRecord } from "../../../entities/message/types.js";
-import {
-  listMessages,
-  reanalyzeErrorBatch,
-  reanalyzeMessage,
-} from "../../../shared/api/client";
-import { createLogger } from "../../../shared/lib/logger.js";
+import { useMessageStore } from "../../stores/message-store.js";
+import { listMessages, reanalyzeMessage } from "../api/client.js";
+import { createLogger } from "../lib/logger.js";
 
 const logger = createLogger("use-messages");
 
 const PAGE_SIZE = 100;
 
+/**
+ * Merge two message arrays, deduplicating by id and sorting by created_at desc.
+ * Later entries overwrite earlier ones for the same id (useful for WS updates).
+ */
 export function mergeMessages(
   current: MessageRecord[],
   incoming: MessageRecord[],
@@ -24,14 +25,20 @@ export function mergeMessages(
   );
 }
 
+/**
+ * Hook for fetching, paginating, and re-analyzing messages.
+ * Reads/writes through the zustand `useMessageStore` so that WebSocket updates
+ * (handled by the store directly via prependMessage/updateMessage/removeMessage)
+ * are reflected without duplicating state.
+ */
 export function useMessages() {
-  const [messages, setMessages] = useState<MessageRecord[]>([]);
   const [loading, setLoading] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [cursor, setCursor] = useState<string | null>(null);
   const [hasMore, setHasMore] = useState(false);
   const currentGuild = useRef<string | null>(null);
+  const { messages, setMessages } = useMessageStore();
 
   const fetchMessages = useCallback(async (guildId?: string) => {
     if (!guildId) {
@@ -48,6 +55,7 @@ export function useMessages() {
         guildId,
         limit: PAGE_SIZE,
       });
+      // Guard against stale responses if guildId changed mid-flight
       if (currentGuild.current === guildId) {
         setMessages(result.data);
         setCursor(result.nextCursor);
@@ -73,7 +81,7 @@ export function useMessages() {
         cursor,
         limit: PAGE_SIZE,
       });
-      setMessages((prev) => [...prev, ...result.data]);
+      setMessages((prev) => mergeMessages(prev, result.data));
       setCursor(result.nextCursor);
       setHasMore(!!result.nextCursor);
     } catch (err) {
@@ -85,8 +93,7 @@ export function useMessages() {
   }, [cursor, loadingMore]);
 
   const reanalyze = useCallback(async (id: string): Promise<void> => {
-    // Capture prior state inside the functional updater so we don't need
-    // `messages` as a useCallback dependency (avoids stale closure churn).
+    // Snapshot the current state so we can revert on HTTP failure
     let saved: MessageRecord | undefined;
 
     setMessages((prev) => {
@@ -106,7 +113,7 @@ export function useMessages() {
     try {
       await reanalyzeMessage(id);
     } catch (err) {
-      // HTTP failed — revert the optimistic update so the UI stays truthful.
+      // Revert optimistic update on failure
       if (saved) {
         const snapshot = saved;
         setMessages((prev) =>
@@ -119,42 +126,13 @@ export function useMessages() {
     }
   }, []);
 
-  const reanalyzeAllErrors = useCallback(async (): Promise<number> => {
-    // Optimistically mark all error messages as pending
-    setMessages((prev) =>
-      prev.map((message) =>
-        message.ai_status === "error"
-          ? {
-              ...message,
-              ai_status: "pending" as const,
-              ai_error: null,
-              ai_analysis: null,
-            }
-          : message,
-      ),
-    );
-    try {
-      const { count } = await reanalyzeErrorBatch({
-        guildId: currentGuild.current ?? undefined,
-      });
-      logger.info("Reanalyze all errors complete", { count });
-      return count;
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      logger.error("Failed to reanalyze error batch", { error: message });
-      throw err;
-    }
-  }, []);
-
   return {
     messages,
-    setMessages,
     loading,
     loadingMore,
     error,
     fetchMessages,
     reanalyze,
-    reanalyzeAllErrors,
     loadMore,
     hasMore,
   };
diff --git a/services/frontend/src/hooks/useTheme.ts b/services/frontend/src/shared/hooks/useTheme.ts
similarity index 100%
rename from services/frontend/src/hooks/useTheme.ts
rename to services/frontend/src/shared/hooks/useTheme.ts
diff --git a/services/frontend/src/shared/hooks/useUIState.ts b/services/frontend/src/shared/hooks/useUIState.ts
index 2ad1acc..5ce0d15 100644
--- a/services/frontend/src/shared/hooks/useUIState.ts
+++ b/services/frontend/src/shared/hooks/useUIState.ts
@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import type { UIState } from "../../entities/ui/types.js";
+import type { UIState } from "../types/ui-types.js";
 import { uiStateValidator, useLocalStorage } from "./useLocalStorage";
 
 export function useUIState() {
diff --git a/services/frontend/src/entities/dashboard/types.ts b/services/frontend/src/shared/types/dashboard.ts
similarity index 100%
rename from services/frontend/src/entities/dashboard/types.ts
rename to services/frontend/src/shared/types/dashboard.ts
diff --git a/services/frontend/src/entities/guild/types.ts b/services/frontend/src/shared/types/guild.ts
similarity index 100%
rename from services/frontend/src/entities/guild/types.ts
rename to services/frontend/src/shared/types/guild.ts
diff --git a/services/frontend/src/entities/media/types.ts b/services/frontend/src/shared/types/media.ts
similarity index 100%
rename from services/frontend/src/entities/media/types.ts
rename to services/frontend/src/shared/types/media.ts
diff --git a/services/frontend/src/entities/message/types.ts b/services/frontend/src/shared/types/message.ts
similarity index 100%
rename from services/frontend/src/entities/message/types.ts
rename to services/frontend/src/shared/types/message.ts
diff --git a/services/frontend/src/entities/recording/types.ts b/services/frontend/src/shared/types/recording.ts
similarity index 100%
rename from services/frontend/src/entities/recording/types.ts
rename to services/frontend/src/shared/types/recording.ts
diff --git a/services/frontend/src/entities/ui/types.ts b/services/frontend/src/shared/types/ui-types.ts
similarity index 100%
rename from services/frontend/src/entities/ui/types.ts
rename to services/frontend/src/shared/types/ui-types.ts
diff --git a/services/frontend/src/entities/voice/types.ts b/services/frontend/src/shared/types/voice.ts
similarity index 85%
rename from services/frontend/src/entities/voice/types.ts
rename to services/frontend/src/shared/types/voice.ts
index 71571df..324788c 100644
--- a/services/frontend/src/entities/voice/types.ts
+++ b/services/frontend/src/shared/types/voice.ts
@@ -1,4 +1,4 @@
-import type { GuildVoiceEntry } from "../guild/types";
+import type { GuildVoiceEntry } from "./guild";
 
 export interface VoiceStatus {
   connected: boolean;
diff --git a/services/frontend/src/shared/ws/socket.ts b/services/frontend/src/shared/ws/socket.ts
index 96caa97..4670890 100644
--- a/services/frontend/src/shared/ws/socket.ts
+++ b/services/frontend/src/shared/ws/socket.ts
@@ -6,9 +6,9 @@ import type {
   VoiceRecordingUploadData,
 } from "@bete/shared";
 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 { createLogger } from "../lib/logger.js";
+import type { MediaState } from "../types/media.js";
 import type { ActiveSpeakerData } from "./events.js";
 
 const logger = createLogger("socket");
@@ -391,3 +391,43 @@ export function useDashboardSocket(handlers: WsHandlers) {
 
   return { status, send, socketRef: { current: _wsInstance } };
 }
+
+/**
+ * Singleton manager for the WebSocket connection.
+ * Provides imperative connect/disconnect/send access alongside useDashboardSocket.
+ */
+export class SocketManager {
+  private static _instance: SocketManager;
+
+  private constructor() {}
+
+  static getInstance(): SocketManager {
+    if (!SocketManager._instance) {
+      SocketManager._instance = new SocketManager();
+    }
+    return SocketManager._instance;
+  }
+
+  /** Ensure the WebSocket is connected (reconnects if closed). */
+  connect(): void {
+    _closed = false;
+    ensureConnected();
+  }
+
+  /** Close the WebSocket and stop reconnection. */
+  disconnect(): void {
+    _closed = true;
+    if (_reconnectTimer) clearTimeout(_reconnectTimer);
+    if (_wsInstance) {
+      _wsInstance.close();
+      _wsInstance = null;
+    }
+  }
+
+  /** Send data through the WebSocket (no-op if not connected). */
+  send(data: ArrayBuffer | string): void {
+    if (_wsInstance?.readyState === WebSocket.OPEN) {
+      _wsInstance.send(data);
+    }
+  }
+}
diff --git a/services/frontend/src/stores/message-store.ts b/services/frontend/src/stores/message-store.ts
new file mode 100644
index 0000000..3e0a935
--- /dev/null
+++ b/services/frontend/src/stores/message-store.ts
@@ -0,0 +1,49 @@
+import type { MessageRecord } from "@bete/shared";
+import { create } from "zustand";
+
+type MessagesUpdater =
+  | MessageRecord[]
+  | ((prev: MessageRecord[]) => MessageRecord[]);
+
+interface MessageState {
+  messages: MessageRecord[];
+}
+
+interface MessageActions {
+  setMessages: (updater: MessagesUpdater) => void;
+  prependMessage: (message: MessageRecord) => void;
+  updateMessage: (id: string, updates: Partial<MessageRecord>) => void;
+  removeMessage: (id: string) => void;
+}
+
+export const useMessageStore = create<MessageState & MessageActions>((set) => ({
+  messages: [],
+
+  setMessages: (updater) =>
+    set((state) => ({
+      messages:
+        typeof updater === "function" ? updater(state.messages) : updater,
+    })),
+
+  prependMessage: (message) =>
+    set((state) => {
+      if (state.messages.some((m) => m.id === message.id)) {
+        return state;
+      }
+      return { messages: [message, ...state.messages] };
+    }),
+
+  updateMessage: (id, updates) =>
+    set((state) => ({
+      messages: state.messages.map((m) =>
+        m.id === id ? { ...m, ...updates } : m,
+      ),
+    })),
+
+  removeMessage: (id) =>
+    set((state) => ({
+      messages: state.messages.map((m) =>
+        m.id === id ? { ...m, type: "deleted" as const } : m,
+      ),
+    })),
+}));
diff --git a/services/frontend/src/stores/ui-store.ts b/services/frontend/src/stores/ui-store.ts
new file mode 100644
index 0000000..2a03871
--- /dev/null
+++ b/services/frontend/src/stores/ui-store.ts
@@ -0,0 +1,46 @@
+import { create } from "zustand";
+
+export type DashboardTab =
+  | "live"
+  | "messages"
+  | "recordings"
+  | "settings"
+  | "dashboard";
+
+type Theme = "dark" | "light" | "system";
+
+interface UIState {
+  sidebarCollapsed: boolean;
+  activeTab: DashboardTab;
+  theme: Theme;
+  selectedVoiceGuild: string;
+  selectedVoiceChannel: string;
+}
+
+interface UIActions {
+  toggleSidebar: () => void;
+  setActiveTab: (tab: DashboardTab) => void;
+  setTheme: (theme: Theme) => void;
+  setSelectedVoiceGuild: (guildId: string) => void;
+  setSelectedVoiceChannel: (channelId: string) => void;
+}
+
+export const useUIStore = create<UIState & UIActions>((set) => ({
+  sidebarCollapsed: false,
+  activeTab: "dashboard",
+  theme: "system",
+  selectedVoiceGuild: "",
+  selectedVoiceChannel: "",
+
+  toggleSidebar: () =>
+    set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })),
+
+  setActiveTab: (tab) => set({ activeTab: tab }),
+
+  setTheme: (theme) => set({ theme }),
+
+  setSelectedVoiceGuild: (guildId) => set({ selectedVoiceGuild: guildId }),
+
+  setSelectedVoiceChannel: (channelId) =>
+    set({ selectedVoiceChannel: channelId }),
+}));
diff --git a/services/frontend/src/stores/voice-store.ts b/services/frontend/src/stores/voice-store.ts
new file mode 100644
index 0000000..035a09c
--- /dev/null
+++ b/services/frontend/src/stores/voice-store.ts
@@ -0,0 +1,72 @@
+import { create } from "zustand";
+import type { ActiveSpeaker, VoiceStatus } from "~/shared/types/voice.js";
+
+interface SpeakerEntry extends ActiveSpeaker {
+  heardAt: number;
+}
+
+interface VoiceState {
+  connected: boolean;
+  status: VoiceStatus | null;
+  activeSpeakers: SpeakerEntry[];
+  guildId: string;
+  channelId: string;
+}
+
+interface VoiceActions {
+  setConnected: (connected: boolean) => void;
+  setStatus: (status: VoiceStatus | null) => void;
+  setActiveSpeakers: (speakers: ActiveSpeaker[]) => void;
+  updateSpeaker: (update: Partial<ActiveSpeaker> & { userId: string }) => void;
+  setGuildChannel: (guildId: string, channelId: string) => void;
+}
+
+export const useVoiceStore = create<VoiceState & VoiceActions>((set) => ({
+  connected: false,
+  status: null,
+  activeSpeakers: [],
+  guildId: "",
+  channelId: "",
+
+  setConnected: (connected) => set({ connected }),
+
+  setStatus: (status) => set({ status }),
+
+  setActiveSpeakers: (speakers) =>
+    set({
+      activeSpeakers: speakers.map((s) => ({
+        ...s,
+        heardAt: Date.now(),
+      })),
+    }),
+
+  updateSpeaker: (update) =>
+    set((state) => {
+      const existing = state.activeSpeakers.find(
+        (s) => s.userId === update.userId,
+      );
+      if (existing) {
+        return {
+          activeSpeakers: state.activeSpeakers.map((s) =>
+            s.userId === update.userId
+              ? { ...s, ...update, heardAt: Date.now() }
+              : s,
+          ),
+        };
+      }
+      return {
+        activeSpeakers: [
+          ...state.activeSpeakers,
+          {
+            ...update,
+            username: "",
+            avatar: "",
+            speaking: false,
+            heardAt: Date.now(),
+          } as SpeakerEntry,
+        ],
+      };
+    }),
+
+  setGuildChannel: (guildId, channelId) => set({ guildId, channelId }),
+}));
diff --git a/services/frontend/src/styles.css b/services/frontend/src/styles.css
deleted file mode 100644
index e60ba36..0000000
--- a/services/frontend/src/styles.css
+++ /dev/null
@@ -1,199 +0,0 @@
-@import "tailwindcss";
-
-@layer base {
-  /* ── Light theme (default) ───────────────────────────────────────────── */
-  :root {
-    --background: 1 0 0;
-    --foreground: 0.141 0.005 285.823;
-    --card: 1 0 0;
-    --card-foreground: 0.141 0.005 285.823;
-    --primary: 0.623 0.214 259.815;
-    --primary-soft: 0.92 0.04 259.815;
-    --primary-foreground: 0.97 0.014 254.604;
-    --secondary: 0.967 0.001 286.375;
-    --secondary-foreground: 0.21 0.006 285.885;
-    --muted: 0.967 0.001 286.375;
-    --muted-foreground: 0.552 0.016 285.938;
-    --accent: 0.967 0.001 286.375;
-    --accent-foreground: 0.21 0.006 285.885;
-    --destructive: 0.577 0.245 27.325;
-    --destructive-foreground: 0.97 0.014 254.604;
-    --border: 0.92 0.004 286.32;
-    --input: 0.92 0.004 286.32;
-    --ring: 0.623 0.214 259.815;
-    --radius: 1rem;
-    --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 {
-    background-color: oklch(var(--background));
-    color: oklch(var(--foreground));
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  }
-
-  html,
-  body,
-  #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 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(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;
-    background-image: linear-gradient(to right, oklch(var(--brand-gradient-from)), oklch(var(--brand-gradient-to)));
-  }
-
-  .animate-fade-in-up {
-    animation: fadeInUp 0.5s ease-out;
-  }
-
-  .animate-fade-in {
-    animation: fadeIn 0.3s ease-out;
-  }
-}
-
-@keyframes bar-pulse {
-  0%, 100% {
-    transform: scaleY(0.8);
-  }
-  50% {
-    transform: scaleY(1.2);
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-@keyframes fadeInUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  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 {
-    90deg,
-    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;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
diff --git a/services/frontend/src/styles/base.css b/services/frontend/src/styles/base.css
new file mode 100644
index 0000000..ffad835
--- /dev/null
+++ b/services/frontend/src/styles/base.css
@@ -0,0 +1,352 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   base.css — BETE Design System
+   Tailwind 4 CSS-first configuration + design tokens + base styles
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+@import "tailwindcss/index.css";
+
+/* ───────────────────────────────────────────────────────────────────────────
+   1. Design Tokens — Dark Theme (default)
+   All colors in OKLCH space: lightness chroma hue
+   ─────────────────────────────────────────────────────────────────────────── */
+:root {
+  /* ── Surfaces ────────────────────────────────────────────────────────── */
+  --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;
+  --muted:               0.2   0.008 286.034;
+  --muted-foreground:    0.6   0.016 285.938;
+
+  /* ── Brand / Interaction ─────────────────────────────────────────────── */
+  --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;
+  --accent:              0.2   0.008 286.034;
+  --accent-foreground:   0.85  0.008 286.034;
+
+  /* ── Severity ────────────────────────────────────────────────────────── */
+  --destructive:          0.577 0.245 27.325;
+  --destructive-foreground: 0.97 0.014 254.604;
+  --success:              0.62  0.18  150;
+  --success-foreground:   0.95  0.02  150;
+  --warning:              0.7   0.18  85;
+  --warning-foreground:   0.95  0.02  85;
+  --info:                 0.6   0.15  240;
+  --info-foreground:      0.95  0.02  240;
+
+  /* ── Borders & Rings ─────────────────────────────────────────────────── */
+  --border:               0.25  0.008 286.034;
+  --input:                0.25  0.008 286.034;
+  --ring:                 0.623 0.214 259.815;
+
+  /* ── Glows & Effects ─────────────────────────────────────────────────── */
+  --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;
+
+  /* ── Glass ───────────────────────────────────────────────────────────── */
+  --glass-bg:             0.162 0.008 286.034 / 0.4;
+  --glass-border:         0.25  0.008 286.034 / 0.2;
+  --glass-shadow:         0 0 0 / 0.3;
+
+  /* ── Gradients ───────────────────────────────────────────────────────── */
+  --brand-gradient-from:  var(--primary);
+  --brand-gradient-to:    0.7   0.2   220;
+
+  /* ── Scrollbar ───────────────────────────────────────────────────────── */
+  --scrollbar-track:      0.147 0.004 285.823;
+  --scrollbar-thumb:      0.3   0.008 286.034;
+
+  /* ── Spacing Scale (static) ──────────────────────────────────────────── */
+  --spacing-xs:  0.25rem;
+  --spacing-sm:  0.5rem;
+  --spacing-md:  1rem;
+  --spacing-lg:  1.5rem;
+  --spacing-xl:  2rem;
+  --spacing-2xl: 3rem;
+
+  /* ── Border Radius ───────────────────────────────────────────────────── */
+  --radius:      1rem;
+
+  /* ── Z-Index Registry (static) ───────────────────────────────────────── */
+  --z-base:      1;
+  --z-header:    10;
+  --z-overlay:   50;
+  --z-modal:     100;
+  --z-toast:     50;
+
+  /* ── Duration & Easing (static) ──────────────────────────────────────── */
+  --duration-fast:   150ms;
+  --duration-normal: 300ms;
+  --duration-slow:   500ms;
+  --ease-out:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-in:         cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-out:     cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+/* ───────────────────────────────────────────────────────────────────────────
+   2. Design Tokens — Light Theme
+   ─────────────────────────────────────────────────────────────────────────── */
+[data-theme="light"] {
+  /* ── Surfaces ────────────────────────────────────────────────────────── */
+  --background:          1     0     0;
+  --foreground:          0.141 0.005 285.823;
+  --card:                1     0     0;
+  --card-foreground:     0.141 0.005 285.823;
+  --muted:               0.967 0.001 286.375;
+  --muted-foreground:    0.552 0.016 285.938;
+
+  /* ── Brand / Interaction ─────────────────────────────────────────────── */
+  --primary:             0.623 0.214 259.815;
+  --primary-soft:        0.92  0.04  259.815;
+  --primary-foreground:  0.97  0.014 254.604;
+  --secondary:           0.967 0.001 286.375;
+  --secondary-foreground:0.21  0.006 285.885;
+  --accent:              0.967 0.001 286.375;
+  --accent-foreground:   0.21  0.006 285.885;
+
+  /* ── Severity ────────────────────────────────────────────────────────── */
+  --destructive:          0.577 0.245 27.325;
+  --destructive-foreground: 0.97 0.014 254.604;
+  --success:              0.55  0.18  150;
+  --success-foreground:   0.2   0.06  150;
+  --warning:              0.65  0.18  85;
+  --warning-foreground:   0.3   0.08  85;
+  --info:                 0.55  0.15  240;
+  --info-foreground:      0.2   0.06  240;
+
+  /* ── Borders & Rings ─────────────────────────────────────────────────── */
+  --border:               0.92  0.004 286.32;
+  --input:                0.92  0.004 286.32;
+  --ring:                 0.623 0.214 259.815;
+
+  /* ── Glows & Effects ─────────────────────────────────────────────────── */
+  --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;
+
+  /* ── Glass ───────────────────────────────────────────────────────────── */
+  --glass-bg:             1     0     0 / 0.4;
+  --glass-border:         0.92  0.004 286.32 / 0.3;
+  --glass-shadow:         0.92  0.004 286.32 / 0.15;
+
+  /* ── Gradients ───────────────────────────────────────────────────────── */
+  --brand-gradient-from:  var(--primary);
+  --brand-gradient-to:    0.623 0.2   200;
+
+  /* ── Scrollbar ───────────────────────────────────────────────────────── */
+  --scrollbar-track:      0.967 0.001 286.375;
+  --scrollbar-thumb:      0.92  0.004 286.32;
+}
+
+/* ───────────────────────────────────────────────────────────────────────────
+   3. Tailwind 4 @theme — Map design tokens to utility classes
+   See: https://tailwindcss.com/docs/theme
+   ─────────────────────────────────────────────────────────────────────────── */
+@theme {
+  /* ── Semantic Colors ─────────────────────────────────────────────────── */
+  --color-background:           oklch(var(--background));
+  --color-foreground:           oklch(var(--foreground));
+  --color-card:                 oklch(var(--card));
+  --color-card-foreground:      oklch(var(--card-foreground));
+  --color-muted:                oklch(var(--muted));
+  --color-muted-foreground:     oklch(var(--muted-foreground));
+
+  --color-primary:              oklch(var(--primary));
+  --color-primary-soft:         oklch(var(--primary-soft));
+  --color-primary-foreground:   oklch(var(--primary-foreground));
+  --color-secondary:            oklch(var(--secondary));
+  --color-secondary-foreground: oklch(var(--secondary-foreground));
+  --color-accent:               oklch(var(--accent));
+  --color-accent-foreground:    oklch(var(--accent-foreground));
+
+  --color-destructive:              oklch(var(--destructive));
+  --color-destructive-foreground:   oklch(var(--destructive-foreground));
+  --color-success:                  oklch(var(--success));
+  --color-success-foreground:       oklch(var(--success-foreground));
+  --color-warning:                  oklch(var(--warning));
+  --color-warning-foreground:       oklch(var(--warning-foreground));
+  --color-info:                     oklch(var(--info));
+  --color-info-foreground:          oklch(var(--info-foreground));
+
+  --color-border:               oklch(var(--border));
+  --color-input:                oklch(var(--input));
+  --color-ring:                 oklch(var(--ring));
+
+  --color-primary-glow:         oklch(var(--primary-glow));
+  --color-accent-glow:          oklch(var(--accent-glow));
+  --color-card-shadow:          oklch(var(--card-shadow));
+
+  /* ── Fonts ───────────────────────────────────────────────────────────── */
+  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+  /* ── Border Radius ───────────────────────────────────────────────────── */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+
+  /* ── Animations ──────────────────────────────────────────────────────── */
+  --animate-fade-in:      fadeIn 0.3s ease-out;
+  --animate-fade-in-up:   fadeInUp 0.5s ease-out;
+  --animate-shimmer:      shimmer 1.5s ease-in-out infinite;
+  --animate-scale-in:     scaleIn 0.3s ease-out;
+  --animate-glow-pulse:   glowPulse 3s ease-in-out infinite;
+  --animate-slide-up:     slideUp 0.3s ease-out;
+  --animate-slide-down:   slideDown 0.3s ease-out;
+  --animate-bar-pulse:    barPulse 0.4s ease-in-out infinite;
+}
+
+/* ───────────────────────────────────────────────────────────────────────────
+   4. Keyframes
+   ─────────────────────────────────────────────────────────────────────────── */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes glowPulse {
+  0%, 100% { opacity: 0.4; }
+  50%      { opacity: 0.8; }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes barPulse {
+  0%, 100% { transform: scaleY(0.8); }
+  50%      { transform: scaleY(1.2); }
+}
+
+/* ───────────────────────────────────────────────────────────────────────────
+   5. @layer base — Global defaults
+   ─────────────────────────────────────────────────────────────────────────── */
+@layer base {
+  /* ── Base element defaults ───────────────────────────────────────────── */
+  [data-theme] {
+    border-color: oklch(var(--border));
+    transition:
+      background-color var(--duration-normal) var(--ease-out),
+      color var(--duration-normal) var(--ease-out),
+      border-color var(--duration-normal) var(--ease-out),
+      box-shadow var(--duration-normal) var(--ease-out);
+  }
+
+  body {
+    background-color: oklch(var(--background));
+    color: oklch(var(--foreground));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: "Outfit", ui-sans-serif, system-ui, -apple-system,
+      BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  /* ── Scrollbar ──────────────────────────────────────────────────────── */
+  ::-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 ─────────────────────────────────────────────────────── */
+  :focus-visible {
+    outline: 2px solid oklch(var(--ring));
+    outline-offset: 2px;
+  }
+}
+
+/* ───────────────────────────────────────────────────────────────────────────
+   6. @layer components — Design system utilities
+   ─────────────────────────────────────────────────────────────────────────── */
+@layer components {
+  /* ── Glass surface ───────────────────────────────────────────────────── */
+  .glass {
+    background-color: oklch(var(--glass-bg));
+    border: 1px solid oklch(var(--glass-border));
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 4px 24px oklch(var(--glass-shadow));
+  }
+
+  /* ── Stronger glass surface (less transparent) ───────────────────────── */
+  .glass-strong {
+    background-color: oklch(var(--glass-bg) / 0.7);
+    border: 1px solid oklch(var(--glass-border));
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    box-shadow: 0 4px 32px oklch(var(--glass-shadow));
+  }
+
+  /* ── Gradient text ───────────────────────────────────────────────────── */
+  .gradient-text {
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    background-image: linear-gradient(
+      to right,
+      oklch(var(--brand-gradient-from)),
+      oklch(var(--brand-gradient-to))
+    );
+  }
+}
+
+/* ───────────────────────────────────────────────────────────────────────────
+   7. @media (prefers-reduced-motion: reduce)
+   ─────────────────────────────────────────────────────────────────────────── */
+@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;
+  }
+}
diff --git a/services/frontend/src/widgets/DashboardLayout.tsx b/services/frontend/src/widgets/DashboardLayout.tsx
deleted file mode 100644
index 6624b25..0000000
--- a/services/frontend/src/widgets/DashboardLayout.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-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";
-import { ParticleBackground } from "./particles/ParticleBackground";
-import { Sidebar } from "./Sidebar";
-
-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">
-      {/* Background layers */}
-      <ParticleBackground />
-      <div
-        className="fixed inset-0 pointer-events-none grid-pattern opacity-[0.03]"
-        aria-hidden="true"
-      />
-
-      <div className="relative flex min-h-screen">
-        <Sidebar
-          activeTab={activeTab}
-          onTabChange={onTabChange}
-          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}
-          />
-          <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>
-  );
-}