feat: add recordings, settings, and voice pages with WebSocket integration

- Implemented RecordingsPage to display and manage voice recordings with live updates via WebSocket.
- Created SettingsPage for user preferences, including theme toggling and server configuration display.
- Developed VoicePage for managing voice connections, including guild and channel selection, and active speaker display.
- Introduced GuildSelector component for selecting Discord guilds with error handling and loading states.
- Added utility functions for formatting numbers and bytes, and safely parsing JSON.
- Established navigation structure for the dashboard with relevant links for new features.

services/frontend/src/app/(dashboard)/analysis/page.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { Loader2, RefreshCw, Search, Sparkles } from "lucide-react";
+import { useCallback, useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { Skeleton } from "@/components/ui/skeleton";
+import { messagesApi } from "@/lib/api";
+import { safeParseJsonArray } from "@/lib/format";
+import type { MessageRecord } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+export default function AnalysisPage() {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<MessageRecord[] | null>(null);
+  const [searching, setSearching] = useState(false);
+  const [searched, setSearched] = useState(false);
+
+  const handleSearch = useCallback(async () => {
+    if (!query.trim()) return;
+    setSearching(true);
+    setSearched(true);
+    try {
+      const result = await messagesApi.search(query, 50);
+      setResults(result.results);
+    } catch {
+      setResults([]);
+    } finally {
+      setSearching(false);
+    }
+  }, [query]);
+
+  const handleReanalyze = useCallback(async (id: string) => {
+    try {
+      await messagesApi.reanalyze(id);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  return (
+    <div className="space-y-5 animate-fade-in-up">
+      {/* Search */}
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+          <Input
+            type="text"
+            placeholder="Search message content, AI flags, analysis text…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+            className="pl-9 h-9"
+          />
+        </div>
+        <Button onClick={handleSearch} disabled={!query.trim() || searching}>
+          {searching && <Loader2 className="size-4 animate-spin mr-1.5" />}
+          Search
+        </Button>
+      </div>
+
+      {/* Results */}
+      {searching ? (
+        <div className="space-y-3">
+          {Array.from({ length: 5 }, (_, i) => (
+            <Skeleton key={i} className="h-28 rounded-xl" />
+          ))}
+        </div>
+      ) : results !== null ? (
+        <>
+          <p className="text-sm text-muted-foreground">
+            Found {results.length} result
+            {results.length !== 1 ? "s" : ""}
+          </p>
+
+          {results.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-20 text-center">
+              <Search className="size-10 text-muted-foreground/40 mb-3" />
+              <p className="text-sm text-muted-foreground">
+                No messages found matching your query.
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {results.map((msg) => (
+                <Card key={msg.id}>
+                  <CardContent className="p-4">
+                    <div className="flex items-start gap-3">
+                      <Avatar className="size-8 shrink-0 mt-0.5">
+                        <AvatarImage src={msg.avatar_url ?? undefined} />
+                        <AvatarFallback className="text-xs">
+                          {msg.username.charAt(0).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+
+                      <div className="flex-1 min-w-0 space-y-2">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <span className="text-sm font-medium">
+                            {msg.username}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {new Date(msg.created_at).toLocaleString()}
+                          </span>
+                          {msg.ai_status && (
+                            <Badge
+                              variant="outline"
+                              className={cn(
+                                "text-[10px] px-1.5 py-0 h-4",
+                                msg.ai_status === "clean" &&
+                                  "text-green-500",
+                                msg.ai_status === "flagged" &&
+                                  "text-red-500",
+                              )}
+                            >
+                              {msg.ai_status}
+                            </Badge>
+                          )}
+                        </div>
+
+                        <p className="text-sm leading-relaxed">{msg.content}</p>
+
+                        {msg.ai_moderation_flags &&
+                          msg.ai_moderation_flags !== "[]" && (
+                            <div className="flex flex-wrap gap-1">
+                              {safeParseJsonArray(
+                                msg.ai_moderation_flags,
+                              ).map((flag) => (
+                                <Badge
+                                  key={flag}
+                                  variant="destructive"
+                                  className="text-[10px] px-1.5 py-0 h-4"
+                                >
+                                  {flag}
+                                </Badge>
+                              ))}
+                            </div>
+                          )}
+
+                        {msg.ai_analysis && (
+                          <p className="text-xs text-muted-foreground italic line-clamp-2 leading-relaxed">
+                            <Sparkles className="size-3 inline mr-1" />
+                            {msg.ai_analysis}
+                          </p>
+                        )}
+
+                        {msg.ai_confidence != null && (
+                          <div className="flex items-center gap-2 max-w-40">
+                            <Progress
+                              value={msg.ai_confidence * 100}
+                              className="h-1.5"
+                            />
+                            <span className="text-[11px] text-muted-foreground tabular-nums shrink-0">
+                              {(msg.ai_confidence * 100).toFixed(0)}%
+                            </span>
+                          </div>
+                        )}
+
+                        <Button
+                          variant="ghost"
+                          size="xs"
+                          onClick={() => handleReanalyze(msg.id)}
+                        >
+                          <RefreshCw className="size-3 mr-1" />
+                          Reanalyze
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </>
+      ) : !searched ? (
+        <div className="flex flex-col items-center justify-center py-24 text-center">
+          <Search className="size-12 text-muted-foreground/30 mb-4" />
+          <p className="text-sm text-muted-foreground">
+            Enter a search query to find messages across all channels.
+          </p>
+          <p className="text-xs text-muted-foreground/60 mt-1">
+            Searches message content, AI flags, and analysis text.
+          </p>
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -15,14 +15,17 @@ import {
 } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { GuildSelector } from "@/components/shared/guild-selector";
 import { dashboardApi } from "@/lib/api";
+import { formatNumber } from "@/lib/format";
 import type {
   DashboardChannel,
   DashboardChannelDetail,
@@ -31,17 +34,22 @@ import type {
   DashboardUserDetail,
 } from "@/lib/types";
 import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";
 
 type View = "stats" | "users" | "channels" | "user-detail" | "channel-detail";
 
-export function DashboardPanel({ guildId }: { guildId: string }) {
+export default function DashboardPage() {
   const [view, setView] = useState<View>("stats");
+  const [guildId, setGuildId] = useState("");
   const [activeUser, setActiveUser] = useState<DashboardUserDetail | null>(
     null,
   );
   const [activeChannel, setActiveChannel] =
     useState<DashboardChannelDetail | null>(null);
 
+  // WS connection for real-time awareness
+  useWebSocket();
+
   const renderView = () => {
     switch (view) {
       case "stats":
@@ -95,7 +103,8 @@ export function DashboardPanel({ guildId }: { guildId: string }) {
 
   return (
     <div className="space-y-5">
-      {/* Sub-navigation using shadcn Tabs */}
+      <GuildSelector value={guildId} onChange={setGuildId} />
+
       <Tabs
         value={
           view === "user-detail"
@@ -166,7 +175,6 @@ function StatsView() {
 
   return (
     <div className="space-y-5 animate-fade-in-up">
-      {/* Metric cards */}
       {loading ? (
         <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
           {Array.from({ length: 8 }, (_, i) => (
@@ -181,7 +189,11 @@ function StatsView() {
               value={stats.total_messages}
               icon={Hash}
             />
-            <StatCard label="Today" value={stats.today_messages} icon={Clock} />
+            <StatCard
+              label="Today"
+              value={stats.today_messages}
+              icon={Clock}
+            />
             <StatCard label="Users" value={stats.total_users} icon={Users} />
             <StatCard
               label="Active 24h"
@@ -212,7 +224,6 @@ function StatsView() {
             />
           </div>
 
-          {/* Top Channels + Moderation Queue */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <Card>
               <CardHeader>
@@ -231,12 +242,16 @@ function StatsView() {
                     {stats.top_channels.map((ch, i) => {
                       const maxCount = stats.top_channels[0].message_count;
                       const pct =
-                        maxCount > 0 ? (ch.message_count / maxCount) * 100 : 0;
+                        maxCount > 0
+                          ? (ch.message_count / maxCount) * 100
+                          : 0;
                       return (
                         <div key={ch.channel_id} className="space-y-1">
                           <div className="flex items-center justify-between text-sm">
                             <span className="truncate font-medium">
-                              #{ch.channel_name ?? ch.channel_id.slice(0, 8)}
+                              #
+                              {ch.channel_name ??
+                                ch.channel_id.slice(0, 8)}
                             </span>
                             <span className="text-muted-foreground tabular-nums">
                               {formatNumber(ch.message_count)}
@@ -264,7 +279,9 @@ function StatsView() {
                     <div className="text-2xl font-bold tabular-nums">
                       {stats.moderation_overview.pending}
                     </div>
-                    <div className="text-xs text-muted-foreground">Pending</div>
+                    <div className="text-xs text-muted-foreground">
+                      Pending
+                    </div>
                   </div>
                   <div className="rounded-lg bg-yellow-500/10 p-3 text-center space-y-1.5">
                     <div className="text-2xl font-bold tabular-nums text-yellow-500">
@@ -552,7 +569,7 @@ function ChannelsView({
                   </div>
                   {ch.culture_summary && (
                     <p className="text-xs text-muted-foreground/70 mt-2 italic line-clamp-2 border-t border-border/50 pt-2">
-                      "{ch.culture_summary}"
+                      &ldquo;{ch.culture_summary}&rdquo;
                     </p>
                   )}
                 </CardContent>
@@ -720,7 +737,7 @@ function ChannelDetailView({
                 </p>
               </div>
               <p className="text-sm leading-relaxed italic">
-                "{channel.culture_summary}"
+                &ldquo;{channel.culture_summary}&rdquo;
               </p>
             </div>
           )}
@@ -788,9 +805,3 @@ function DetailStat({
     </Card>
   );
 }
-
-// ── Helpers ─────────────────────────────────────
-
-function formatNumber(n: number): string {
-  return n.toLocaleString();
-}

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

@@ -0,0 +1,45 @@
+"use client";
+
+import { Suspense } from "react";
+
+import { Header } from "@/components/layout/header";
+import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
+import { Sidebar } from "@/components/layout/sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { MascotChatbot } from "@/components/mascot/mascot-chatbot";
+import { WsProvider } from "@/lib/ws/context";
+
+function LoadingFallback() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-3">
+        <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        <p className="text-sm text-muted-foreground">Loading dashboard…</p>
+      </div>
+    </div>
+  );
+}
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <WsProvider>
+      <SidebarProvider defaultOpen={true}>
+        <div className="flex min-h-screen bg-background">
+          <Sidebar />
+          <SidebarInset className="flex flex-col">
+            <Header />
+            <main className="flex-1 p-4 md:p-6 pb-20 md:pb-6 animate-fade-in-up">
+              <Suspense fallback={<LoadingFallback />}>{children}</Suspense>
+            </main>
+          </SidebarInset>
+          <MobileTabBar />
+        </div>
+      </SidebarProvider>
+      <MascotChatbot />
+    </WsProvider>
+  );
+}

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

@@ -0,0 +1,214 @@
+"use client";
+
+import {
+  Disc3,
+  Music,
+  Play,
+  SkipForward,
+  Square,
+  Volume2,
+} from "lucide-react";
+import Image from "next/image";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Slider } from "@/components/ui/slider";
+import { voiceApi } from "@/lib/api";
+import type { MediaState } from "@/lib/types";
+import { useWebSocket } from "@/lib/ws/context";
+
+export default function MediaPage() {
+  const ws = useWebSocket();
+
+  const [mediaState, setMediaState] = useState<MediaState | null>(null);
+  const [queueUrl, setQueueUrl] = useState("");
+
+  const fetchMediaStatus = useCallback(async () => {
+    try {
+      const state = await voiceApi.getMediaStatus();
+      setMediaState(state);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchMediaStatus();
+  }, [fetchMediaStatus]);
+
+  // WS subscription
+  useEffect(() => {
+    const unsubMedia = ws.on("media_state", (state) => {
+      setMediaState(state as MediaState);
+    });
+
+    return () => {
+      unsubMedia();
+    };
+  }, [ws]);
+
+  const handleQueueMedia = useCallback(async () => {
+    if (!queueUrl.trim()) return;
+    try {
+      const state = await voiceApi.mediaQueue(queueUrl.trim(), "music");
+      setMediaState(state);
+      setQueueUrl("");
+    } catch {
+      // ignore
+    }
+  }, [queueUrl]);
+
+  const handleSkip = useCallback(async () => {
+    try {
+      const state = await voiceApi.mediaSkip();
+      setMediaState(state);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const handleStop = useCallback(async () => {
+    try {
+      const state = await voiceApi.mediaStop();
+      setMediaState(state);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const handleVolume = useCallback(
+    async (value: number | readonly number[]) => {
+      const vol = Array.isArray(value) ? value[0] : value;
+      try {
+        const state = await voiceApi.mediaVolume(vol);
+        setMediaState(state);
+      } catch {
+        // ignore
+      }
+    },
+    [],
+  );
+
+  return (
+    <div className="space-y-5 animate-fade-in-up">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            <Music className="size-4 text-primary" />
+            Music Player
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Queue URL */}
+          <div className="flex gap-2">
+            <Input
+              type="text"
+              placeholder="Queue a URL (YouTube, audio file…)"
+              value={queueUrl}
+              onChange={(e) => setQueueUrl(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleQueueMedia()}
+              className="flex-1 h-9"
+            />
+            <Button onClick={handleQueueMedia} disabled={!queueUrl.trim()}>
+              <Play className="size-4 mr-1.5" />
+              Queue
+            </Button>
+          </div>
+
+          {/* Now Playing */}
+          {mediaState?.current && (
+            <div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4 space-y-2">
+              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider flex items-center gap-1.5">
+                <Disc3 className="size-3" />
+                Now Playing
+              </p>
+              <div className="flex items-start gap-3">
+                {mediaState.current.thumbnailUrl && (
+                  <Image
+                    src={mediaState.current.thumbnailUrl}
+                    alt=""
+                    width={56}
+                    height={56}
+                    className="size-14 rounded-lg object-cover shadow-sm"
+                  />
+                )}
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">
+                    {mediaState.current.title ?? mediaState.current.source}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {mediaState.current.durationMs
+                      ? `${Math.floor(
+                          mediaState.current.durationMs / 60000,
+                        )}:${String(
+                          Math.floor(
+                            (mediaState.current.durationMs % 60000) / 1000,
+                          ),
+                        ).padStart(2, "0")}`
+                      : "Live"}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {!mediaState?.current && !mediaState?.queue?.length && (
+            <p className="text-sm text-muted-foreground py-8 text-center">
+              No media queued. Paste a URL above to start playing.
+            </p>
+          )}
+
+          {/* Controls */}
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={handleStop}>
+              <Square className="size-4 mr-1" />
+              Stop
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleSkip}>
+              <SkipForward className="size-4 mr-1" />
+              Skip
+            </Button>
+            <div className="flex items-center gap-2 ml-auto">
+              <Volume2 className="size-4 text-muted-foreground" />
+              <Slider
+                className="w-24"
+                defaultValue={[mediaState?.musicVolume ?? 0.5]}
+                value={[mediaState?.musicVolume ?? 0.5]}
+                onValueChange={handleVolume}
+                min={0}
+                max={1}
+                step={0.05}
+              />
+            </div>
+          </div>
+
+          {/* Queue */}
+          {mediaState && mediaState.queue.length > 0 && (
+            <div className="space-y-1.5">
+              <p className="text-xs text-muted-foreground font-medium">
+                Queue ({mediaState.queue.length})
+              </p>
+              <div className="space-y-1">
+                {mediaState.queue.map((item, i) => (
+                  <div
+                    key={item.id ?? i}
+                    className="flex items-center gap-2 rounded-md bg-muted/30 px-3 py-2 text-sm"
+                  >
+                    <span className="text-xs text-muted-foreground font-mono w-5 text-right">
+                      {i + 1}.
+                    </span>
+                    <span className="truncate flex-1">
+                      {item.title ?? item.source}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -4,15 +4,15 @@ import {
   AlertCircle,
   ExternalLink,
   Flag,
-  Hash,
   Loader2,
+  MessageSquare,
   RefreshCw,
   Search,
   Sparkles,
-  X,
 } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -34,13 +34,16 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { GuildSelector } from "@/components/shared/guild-selector";
 import { messagesApi, voiceApi } from "@/lib/api";
+import { formatBytes, safeParseJsonArray } from "@/lib/format";
 import type { AttachmentRecord, Channel, MessageRecord } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
-export function MessagesPanel({ guildId }: { guildId: string }) {
+export default function MessagesPage() {
+  const [guildId, setGuildId] = useState("");
   const [messages, setMessages] = useState<MessageRecord[]>([]);
   const [loading, setLoading] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
@@ -67,8 +70,7 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
 
   const ws = useWebSocket();
 
-  // ── Data fetching ──
+  // Fetch channels when guild changes
-
   useEffect(() => {
     if (!guildId) return;
     voiceApi
@@ -238,19 +240,26 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
 
   if (error) {
     return (
-      <div className="flex flex-col items-center justify-center py-20 text-center">
+      <div className="space-y-5">
-        <AlertCircle className="size-10 text-destructive mb-3" />
+        <GuildSelector value={guildId} onChange={setGuildId} />
-        <p className="text-sm text-muted-foreground mb-4 max-w-sm">{error}</p>
+        <div className="flex flex-col items-center justify-center py-20 text-center">
-        <Button variant="outline" onClick={fetchMessages}>
+          <AlertCircle className="size-10 text-destructive mb-3" />
-          <RefreshCw className="size-4 mr-2" />
+          <p className="text-sm text-muted-foreground mb-4 max-w-sm">
-          Retry
+            {error}
-        </Button>
+          </p>
+          <Button variant="outline" onClick={fetchMessages}>
+            <RefreshCw className="size-4 mr-2" />
+            Retry
+          </Button>
+        </div>
       </div>
     );
   }
 
   return (
     <div className="space-y-5">
+      <GuildSelector value={guildId} onChange={setGuildId} />
+
       {/* Search + toolbar */}
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
         <div className="relative flex-1">
@@ -265,7 +274,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
           />
         </div>
 
-        {/* Channel filter */}
         {channels.length > 0 && (
           <Select
             value={selectedChannel}
@@ -291,7 +299,7 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
         </Button>
       </div>
 
-      {/* Tab bar using shadcn Tabs */}
+      {/* Tab bar */}
       <Tabs
         value={viewTab}
         onValueChange={(v) => setViewTab(v as "all" | "images" | "review")}
@@ -408,7 +416,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                         No image
                       </div>
                     )}
-                    {/* Hover overlay */}
                     {msg.content && (
                       <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-end p-3">
                         <p className="text-xs text-white/90 line-clamp-2">
@@ -468,7 +475,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                 </div>
               ) : detailMessage ? (
                 <>
-                  {/* Message info */}
                   <div className="flex items-start gap-3">
                     <Avatar className="size-10">
                       <AvatarImage
@@ -484,7 +490,9 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                           {detailMessage.username}
                         </span>
                         <span className="text-xs text-muted-foreground">
-                          {new Date(detailMessage.created_at).toLocaleString()}
+                          {new Date(
+                            detailMessage.created_at,
+                          ).toLocaleString()}
                         </span>
                         {detailMessage.type === "deleted" && (
                           <Badge variant="destructive" className="text-[10px]">
@@ -503,7 +511,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                     </div>
                   </div>
 
-                  {/* AI Analysis */}
                   {detailMessage.ai_analysis && (
                     <div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4">
                       <div className="flex items-center gap-2 mb-2">
@@ -518,7 +525,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                     </div>
                   )}
 
-                  {/* AI flags */}
                   {detailMessage.ai_moderation_flags &&
                     detailMessage.ai_moderation_flags !== "[]" && (
                       <div className="space-y-2">
@@ -541,7 +547,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                       </div>
                     )}
 
-                  {/* AI Scores */}
                   <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                     {detailMessage.ai_status && (
                       <Card>
@@ -595,7 +600,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                       )}
                   </div>
 
-                  {/* Attachments */}
                   {detailAttachments.length > 0 && (
                     <div className="space-y-2">
                       <p className="text-xs text-muted-foreground font-medium">
@@ -625,7 +629,6 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                     </div>
                   )}
 
-                  {/* Raw metadata */}
                   {detailMessage.metadata &&
                     detailMessage.metadata !== "{}" && (
                       <div className="space-y-1">
@@ -634,7 +637,7 @@ export function MessagesPanel({ guildId }: { guildId: string }) {
                         </p>
                         <pre className="text-xs bg-muted/50 rounded-lg p-3 overflow-x-auto max-h-32 border border-border/50">
                           {JSON.stringify(
-                            safeParseJsonObject(detailMessage.metadata),
+                            safeParseObject(detailMessage.metadata),
                             null,
                             2,
                           )}
@@ -705,18 +708,16 @@ function MessageCard({
           </Avatar>
 
           <div className="flex-1 min-w-0 space-y-2">
-            {/* Username + time + badges */}
             <div className="flex items-center gap-2 flex-wrap">
               <span className="text-sm font-medium">{msg.username}</span>
               <span className="text-xs text-muted-foreground">
                 {new Date(msg.created_at).toLocaleString()}
               </span>
               <span className="text-xs text-muted-foreground">
-                <Hash className="size-3 inline mr-0.5" />
+                <HashIcon className="size-3 inline mr-0.5" />
                 {msg.channel_id.slice(0, 8)}
               </span>
 
-              {/* AI Status badge */}
               {msg.ai_status && aiStatusColor[msg.ai_status] && (
                 <Badge
                   variant="outline"
@@ -729,7 +730,6 @@ function MessageCard({
                 </Badge>
               )}
 
-              {/* Severity badge */}
               {msg.ai_severity && msg.ai_severity !== "none" && (
                 <Badge
                   variant="destructive"
@@ -739,7 +739,6 @@ function MessageCard({
                 </Badge>
               )}
 
-              {/* Deleted/edited badges */}
               {msg.type === "deleted" && (
                 <Badge
                   variant="destructive"
@@ -758,7 +757,6 @@ function MessageCard({
               )}
             </div>
 
-            {/* Content */}
             <p
               className={cn(
                 "text-sm leading-relaxed",
@@ -769,7 +767,6 @@ function MessageCard({
               {msg.content}
             </p>
 
-            {/* AI flags */}
             {msg.ai_moderation_flags && msg.ai_moderation_flags !== "[]" && (
               <div className="flex flex-wrap gap-1">
                 {safeParseJsonArray(msg.ai_moderation_flags).map((flag) => (
@@ -784,24 +781,25 @@ function MessageCard({
               </div>
             )}
 
-            {/* AI analysis snippet */}
             {msg.ai_analysis && (
               <p className="text-xs text-muted-foreground italic line-clamp-2 leading-relaxed">
                 {msg.ai_analysis}
               </p>
             )}
 
-            {/* Confidence bar */}
+            {msg.ai_confidence !== undefined &&
-            {msg.ai_confidence !== undefined && msg.ai_confidence !== null && (
+              msg.ai_confidence !== null && (
-              <div className="flex items-center gap-2 max-w-40">
+                <div className="flex items-center gap-2 max-w-40">
-                <Progress value={msg.ai_confidence * 100} className="h-1.5" />
+                  <Progress
-                <span className="text-[11px] text-muted-foreground tabular-nums shrink-0">
+                    value={msg.ai_confidence * 100}
-                  {(msg.ai_confidence * 100).toFixed(0)}%
+                    className="h-1.5"
-                </span>
+                  />
-              </div>
+                  <span className="text-[11px] text-muted-foreground tabular-nums shrink-0">
-            )}
+                    {(msg.ai_confidence * 100).toFixed(0)}%
+                  </span>
+                </div>
+              )}
 
-            {/* Actions */}
             <div className="flex gap-1.5 pt-0.5">
               <Button
                 variant="ghost"
@@ -824,7 +822,7 @@ function MessageCard({
 
 // ── Helpers ─────────────────────────────────────
 
-function safeParseJsonObject(
+function safeParseObject(
   value: string | null | undefined,
 ): Record<string, unknown> {
   if (!value) return {};
@@ -837,24 +835,31 @@ function safeParseJsonObject(
   }
 }
 
-function formatBytes(bytes: number): string {
+function HashIcon({ className }: { className?: string }) {
-  if (bytes < 1024) return `${bytes} B`;
+  return (
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    <svg
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+      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"
+      className={className}
+      role="img"
+      aria-label="Hash"
+    >
+      <title>Hash</title>
+      <line x1="4" x2="20" y1="9" y2="9" />
+      <line x1="4" x2="20" y1="15" y2="15" />
+      <line x1="10" x2="8" y1="3" y2="21" />
+      <line x1="16" x2="14" y1="3" y2="21" />
+    </svg>
+  );
 }
 
-function safeParseJsonArray(value: string | null | undefined): string[] {
-  if (!value) return [];
-  try {
-    const parsed = JSON.parse(value);
-    if (Array.isArray(parsed)) return parsed;
-    return [];
-  } catch {
-    return [];
-  }
-}
-
-// Inline icon components to avoid missing imports
 function ImageIcon({ className }: { className?: string }) {
   return (
     <svg
@@ -878,25 +883,3 @@ function ImageIcon({ className }: { className?: string }) {
     </svg>
   );
 }
-
-function MessageSquare({ className }: { className?: string }) {
-  return (
-    <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"
-      className={className}
-      role="img"
-      aria-label="Message"
-    >
-      <title>Message</title>
-      <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>
-  );
-}

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

@@ -0,0 +1,134 @@
+"use client";
+
+import { Download, Headphones, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { recordingsApi } from "@/lib/api";
+import { formatBytes } from "@/lib/format";
+import type { VoiceRecording } from "@/lib/types";
+import { useWebSocket } from "@/lib/ws/context";
+
+export default function RecordingsPage() {
+  const ws = useWebSocket();
+  const [recordings, setRecordings] = useState<VoiceRecording[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchRecordings = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await recordingsApi.list(50);
+      setRecordings(result.items);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchRecordings();
+  }, [fetchRecordings]);
+
+  // WS subscription for live updates
+  useEffect(() => {
+    const unsub = ws.on("voice_recording_uploaded", (rec) => {
+      setRecordings((prev) => [rec as VoiceRecording, ...prev]);
+    });
+    return () => unsub();
+  }, [ws]);
+
+  const handleDelete = useCallback(async (id: string) => {
+    try {
+      await recordingsApi.delete(id);
+      setRecordings((prev) => prev.filter((r) => r.id !== id));
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  return (
+    <div className="space-y-5 animate-fade-in-up">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            <Headphones className="size-4 text-primary" />
+            Voice Recordings
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <div className="space-y-2">
+              {Array.from({ length: 5 }, (_, i) => (
+                <div
+                  key={i}
+                  className="h-16 rounded-lg bg-muted/30 animate-pulse"
+                />
+              ))}
+            </div>
+          ) : recordings.length === 0 ? (
+            <p className="text-sm text-muted-foreground py-8 text-center">
+              No recordings yet.
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {recordings.map((rec) => (
+                <div
+                  key={rec.id}
+                  className="flex items-center gap-3 rounded-lg border border-border/50 p-3 hover:bg-muted/30 transition-colors"
+                >
+                  <Avatar className="size-8">
+                    <AvatarImage src={rec.avatar_url ?? undefined} />
+                    <AvatarFallback>
+                      {(rec.username ?? "?").charAt(0).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">
+                      {rec.username}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {rec.channel_name ??
+                        rec.channel_id ??
+                        "Unknown channel"}
+                      {" — "}
+                      {new Date(rec.created_at).toLocaleString()}
+                    </p>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className="text-[10px] font-mono shrink-0"
+                  >
+                    {formatBytes(rec.size_bytes)}
+                  </Badge>
+                  {rec.download_url && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() =>
+                        window.open(rec.download_url!, "_blank")
+                      }
+                    >
+                      <Download className="size-4" />
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleDelete(rec.id)}
+                    className="hover:text-destructive hover:bg-destructive/10"
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

services/frontend/src/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import {
+  Moon,
+  Server,
+  Shield,
+  Sun,
+  Wifi,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { configApi } from "@/lib/api";
+import type { AppConfig } from "@/lib/types";
+import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";
+
+export default function SettingsPage() {
+  const { status } = useWebSocket();
+  const [config, setConfig] = useState<AppConfig | null>(null);
+  const [configLoading, setConfigLoading] = useState(true);
+  const [theme, setTheme] = useState<"light" | "dark">("dark");
+
+  useEffect(() => {
+    const stored = localStorage.getItem("theme") as "light" | "dark" | null;
+    if (stored) setTheme(stored);
+  }, []);
+
+  useEffect(() => {
+    configApi
+      .get()
+      .then(setConfig)
+      .catch(() => {})
+      .finally(() => setConfigLoading(false));
+  }, []);
+
+  const toggleTheme = () => {
+    const next = theme === "dark" ? "light" : "dark";
+    setTheme(next);
+    localStorage.setItem("theme", next);
+    document.documentElement.classList.remove("light", "dark");
+    document.documentElement.classList.add(next);
+  };
+
+  const statusConfig = {
+    connected: {
+      label: "Connected",
+      variant: "default" as const,
+      dot: "bg-green-500 shadow-[0_0_6px] shadow-green-500/60",
+    },
+    connecting: {
+      label: "Connecting",
+      variant: "secondary" as const,
+      dot: "bg-yellow-500 animate-pulse",
+    },
+    disconnected: {
+      label: "Disconnected",
+      variant: "destructive" as const,
+      dot: "bg-destructive",
+    },
+    error: {
+      label: "Error",
+      variant: "destructive" as const,
+      dot: "bg-destructive",
+    },
+  }[status];
+
+  return (
+    <div className="space-y-5 animate-fade-in-up max-w-2xl">
+      {/* Connection Status */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            <Wifi className="size-4 text-primary" />
+            Connection
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm">WebSocket</span>
+            <Badge
+              variant={statusConfig.variant}
+              className="gap-1.5 px-2.5 py-1"
+            >
+              <span
+                className={cn("size-1.5 rounded-full", statusConfig.dot)}
+              />
+              {statusConfig.label}
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Appearance */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            {theme === "dark" ? (
+              <Moon className="size-4 text-primary" />
+            ) : (
+              <Sun className="size-4 text-primary" />
+            )}
+            Appearance
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <button
+            type="button"
+            onClick={toggleTheme}
+            className="flex items-center justify-between w-full text-sm cursor-pointer"
+          >
+            <span>Theme</span>
+            <Badge variant="outline" className="capitalize">
+              {theme}
+            </Badge>
+          </button>
+        </CardContent>
+      </Card>
+
+      {/* Server Config */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            <Server className="size-4 text-primary" />
+            Server Configuration
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {configLoading ? (
+            <div className="space-y-2">
+              {Array.from({ length: 6 }, (_, i) => (
+                <Skeleton key={i} className="h-6 w-full" />
+              ))}
+            </div>
+          ) : config ? (
+            <div className="space-y-2 text-sm">
+              <ConfigRow
+                label="Monitor Guild"
+                value={config.monitorGuildId ?? "Not configured"}
+              />
+              <Separator />
+              <ConfigRow
+                label="Voice Guild"
+                value={config.voiceGuildId ?? "Not configured"}
+              />
+              <Separator />
+              <ConfigRow
+                label="Voice Channel"
+                value={config.voiceChannelId ?? "Not configured"}
+              />
+              <Separator />
+              <ConfigRow
+                label="AI Analysis"
+                value={config.aiAnalysisEnabled ? "Enabled" : "Disabled"}
+              />
+              <Separator />
+              <ConfigRow
+                label="Auto-Delete Flagged"
+                value={
+                  config.autoDeleteFlaggedEnabled ? "Enabled" : "Disabled"
+                }
+              />
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              Unable to load configuration.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* About */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            <Shield className="size-4 text-primary" />
+            About
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-sm space-y-1">
+            <p>
+              <span className="text-gradient font-bold">Bete</span> — Discord
+              Moderation Watcher
+            </p>
+            <p className="text-xs text-muted-foreground">
+              AI-powered message moderation, voice recording, and real-time
+              monitoring for Discord communities.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function ConfigRow({
+  label,
+  value,
+}: {
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-mono text-xs max-w-[280px] truncate text-right">
+        {value}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,323 @@
+"use client";
+
+import {
+  Headphones,
+  Loader2,
+  Mic,
+  Radio,
+  RadioOff,
+  UserCheck,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { voiceApi } from "@/lib/api";
+import type { ActiveSpeaker, VoiceStatus } from "@/lib/types";
+import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";
+
+export default function VoicePage() {
+  const ws = useWebSocket();
+
+  const [voiceStatus, setVoiceStatus] = useState<VoiceStatus | null>(null);
+  const [speakers, setSpeakers] = useState<ActiveSpeaker[]>([]);
+  const [guilds, setGuilds] = useState<
+    Array<{ id: string; name: string }>
+  >([]);
+  const [voiceChannels, setVoiceChannels] = useState<
+    Array<{ id: string; name: string }>
+  >([]);
+  const [selectedGuild, setSelectedGuild] = useState("");
+  const [selectedChannel, setSelectedChannel] = useState("");
+  const [voiceLoading, setVoiceLoading] = useState(false);
+  const [micActive, setMicActive] = useState(false);
+  const [guildsLoading, setGuildsLoading] = useState(true);
+
+  const fetchVoiceStatus = useCallback(async () => {
+    try {
+      const status = await voiceApi.getStatus();
+      setVoiceStatus(status);
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const fetchGuilds = useCallback(async () => {
+    setGuildsLoading(true);
+    try {
+      const g = await voiceApi.getGuilds();
+      setGuilds(g);
+    } catch {
+      // ignore
+    } finally {
+      setGuildsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchVoiceStatus();
+    fetchGuilds();
+  }, [fetchVoiceStatus, fetchGuilds]);
+
+  // WS subscriptions
+  useEffect(() => {
+    const unsubSpeaker = ws.on("voice_active_user", (user) => {
+      const speaker = user as ActiveSpeaker;
+      setSpeakers((prev) => {
+        const existing = prev.findIndex(
+          (s) => s.userId === speaker.userId,
+        );
+        if (existing >= 0) {
+          const next = [...prev];
+          next[existing] = speaker;
+          return next;
+        }
+        return [...prev, speaker];
+      });
+    });
+
+    return () => {
+      unsubSpeaker();
+    };
+  }, [ws]);
+
+  const handleGuildChange = useCallback(async (guildId: string | null) => {
+    if (!guildId) {
+      setSelectedGuild("");
+      setVoiceChannels([]);
+      return;
+    }
+    setSelectedGuild(guildId);
+    setSelectedChannel("");
+    try {
+      const channels = await voiceApi.getVoiceChannels(guildId);
+      setVoiceChannels(channels);
+    } catch {
+      setVoiceChannels([]);
+    }
+  }, []);
+
+  const handleConnect = useCallback(async () => {
+    if (!selectedGuild || !selectedChannel) return;
+    setVoiceLoading(true);
+    try {
+      const status = await voiceApi.connect(selectedGuild, selectedChannel);
+      setVoiceStatus(status);
+    } finally {
+      setVoiceLoading(false);
+    }
+  }, [selectedGuild, selectedChannel]);
+
+  const handleDisconnect = useCallback(async () => {
+    setVoiceLoading(true);
+    try {
+      const status = await voiceApi.disconnect();
+      setVoiceStatus(status);
+      setSpeakers([]);
+    } finally {
+      setVoiceLoading(false);
+    }
+  }, []);
+
+  const activeSpeakers = speakers.filter((s) => s.speaking);
+
+  return (
+    <div className="space-y-5 animate-fade-in-up">
+      {/* Voice Connection */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Radio className="size-4 text-primary" />
+              Voice Connection
+            </div>
+            <Badge
+              variant={voiceStatus?.connected ? "default" : "secondary"}
+              className={cn(
+                voiceStatus?.connected &&
+                  "bg-green-500/15 text-green-600 dark:text-green-400 hover:bg-green-500/20",
+              )}
+            >
+              <span
+                className={cn(
+                  "size-1.5 rounded-full mr-1.5 inline-block",
+                  voiceStatus?.connected
+                    ? "bg-green-500 shadow-[0_0_6px] shadow-green-500/60"
+                    : "bg-muted-foreground",
+                )}
+              />
+              {voiceStatus?.connected ? "Connected" : "Disconnected"}
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {voiceStatus?.connected && voiceStatus.activeChannelName && (
+            <p className="text-sm text-muted-foreground flex items-center gap-1.5">
+              <Headphones className="size-4" />
+              Connected to{" "}
+              <span className="font-medium text-foreground">
+                {voiceStatus.activeChannelName}
+              </span>
+            </p>
+          )}
+
+          <div className="flex flex-col sm:flex-row gap-2">
+            <Select
+              value={selectedGuild}
+              onValueChange={handleGuildChange}
+              disabled={guildsLoading}
+            >
+              <SelectTrigger className="flex-1 h-9">
+                <SelectValue
+                  placeholder={
+                    guildsLoading ? "Loading guilds…" : "Select guild…"
+                  }
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {guilds.map((g) => (
+                  <SelectItem key={g.id} value={g.id}>
+                    {g.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={selectedChannel}
+              onValueChange={(v) => v && setSelectedChannel(v)}
+              disabled={!selectedGuild}
+            >
+              <SelectTrigger className="flex-1 h-9">
+                <SelectValue placeholder="Select channel…" />
+              </SelectTrigger>
+              <SelectContent>
+                {voiceChannels.map((c) => (
+                  <SelectItem key={c.id} value={c.id}>
+                    {c.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {voiceStatus?.connected ? (
+              <Button
+                variant="destructive"
+                onClick={handleDisconnect}
+                disabled={voiceLoading}
+              >
+                {voiceLoading ? (
+                  <Loader2 className="size-4 animate-spin mr-1.5" />
+                ) : (
+                  <RadioOff className="size-4 mr-1.5" />
+                )}
+                Disconnect
+              </Button>
+            ) : (
+              <Button
+                onClick={handleConnect}
+                disabled={
+                  voiceLoading || !selectedGuild || !selectedChannel
+                }
+              >
+                {voiceLoading ? (
+                  <Loader2 className="size-4 animate-spin mr-1.5" />
+                ) : (
+                  <Radio className="size-4 mr-1.5" />
+                )}
+                Connect
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Active Speakers */}
+      {activeSpeakers.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+              <UserCheck className="size-4 text-primary" />
+              Active Speakers
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {activeSpeakers.map((s) => (
+                <div
+                  key={s.userId}
+                  className="flex items-center gap-2 rounded-full border border-border/50 bg-card px-3 py-1.5 shadow-sm"
+                >
+                  <span className="relative flex size-2">
+                    <span className="absolute inline-flex size-full rounded-full bg-green-400 opacity-75 live-pulse-ring" />
+                    <span className="relative inline-flex size-2 rounded-full bg-green-500" />
+                  </span>
+                  <span className="text-sm">{s.username}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Microphone */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-sm font-semibold">
+              <Mic className="size-4 text-primary" />
+              Microphone
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">
+                {micActive ? "On" : "Off"}
+              </span>
+              <Switch
+                checked={micActive}
+                onCheckedChange={async (checked) => {
+                  setMicActive(checked);
+                  try {
+                    await voiceApi.sendCommand(
+                      checked
+                        ? "voice:transmit:start"
+                        : "voice:transmit:stop",
+                    );
+                  } catch {
+                    setMicActive(!checked);
+                  }
+                }}
+                disabled={!voiceStatus?.connected}
+              />
+            </div>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!voiceStatus?.connected && (
+            <p className="text-xs text-muted-foreground">
+              Connect to a voice channel first.
+            </p>
+          )}
+          {micActive && (
+            <div className="flex items-center gap-2 mt-1">
+              <span className="relative flex size-2">
+                <span className="absolute inline-flex size-full rounded-full bg-red-400 opacity-75 live-pulse-ring" />
+                <span className="relative inline-flex size-2 rounded-full bg-red-500" />
+              </span>
+              <span className="text-sm text-muted-foreground">
+                Transmitting…
+              </span>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

services/frontend/src/app/dashboard/layout.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense, useEffect, useRef } from "react";
-
-import { Header } from "@/components/layout/header";
-import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
-import { Sidebar } from "@/components/layout/sidebar";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { MascotChatbot } from "@/features/mascot/mascot-chatbot";
-import { uiStateApi } from "@/lib/api";
-import { WsProvider } from "@/lib/ws/context";
-
-function DashboardShell({ children }: { children: React.ReactNode }) {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const restored = useRef(false);
-
-  const activeTab = (searchParams.get("tab") ?? "messages") as
-    | "messages"
-    | "live"
-    | "dashboard";
-
-  // Restore persisted tab on mount (only if no explicit tab in URL)
-  useEffect(() => {
-    if (restored.current) return;
-    const tabParam = searchParams.get("tab");
-    if (tabParam) {
-      restored.current = true;
-      return;
-    }
-    uiStateApi
-      .get()
-      .then((state) => {
-        restored.current = true;
-        const savedTab = state.active_tab;
-        if (savedTab && savedTab !== activeTab) {
-          router.replace(`/dashboard?tab=${savedTab}`);
-        }
-      })
-      .catch(() => {
-        restored.current = true;
-      });
-  }, [searchParams, activeTab, router]);
-
-  // Persist tab changes
-  useEffect(() => {
-    if (!restored.current) return;
-    uiStateApi.save({ active_tab: activeTab }).catch(() => {});
-  }, [activeTab]);
-
-  return (
-    <div className="flex min-h-screen bg-background">
-      <Sidebar activeTab={activeTab} />
-      <SidebarInset className="flex flex-col">
-        <Header />
-        <main className="flex-1 p-4 md:p-6 pb-20 md:pb-6 animate-fade-in-up">
-          {children}
-        </main>
-      </SidebarInset>
-      <MobileTabBar activeTab={activeTab} />
-    </div>
-  );
-}
-
-export default function DashboardLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <WsProvider>
-      <SidebarProvider defaultOpen={true}>
-        <Suspense
-          fallback={
-            <div className="flex min-h-screen items-center justify-center">
-              <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-            </div>
-          }
-        >
-          <DashboardShell>{children}</DashboardShell>
-        </Suspense>
-      </SidebarProvider>
-      <MascotChatbot />
-    </WsProvider>
-  );
-}

services/frontend/src/app/dashboard/page.tsx

@@ -1,209 +0,0 @@
-"use client";
-
-import { AlertCircle, RefreshCw } from "lucide-react";
-import { useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Skeleton } from "@/components/ui/skeleton";
-import { DashboardPanel } from "@/features/dashboard/dashboard-panel";
-import { LivePanel } from "@/features/live/live-panel";
-import { MessagesPanel } from "@/features/messages/messages-panel";
-import { voiceApi } from "@/lib/api";
-import { useAppConfig } from "@/lib/hooks/use-config";
-import type { Guild } from "@/lib/types";
-
-export default function DashboardPage() {
-  const searchParams = useSearchParams();
-  const tab = searchParams.get("tab") ?? "messages";
-  const urlGuildId = searchParams.get("guildId");
-
-  const { config, loading: configLoading } = useAppConfig();
-
-  const [guilds, setGuilds] = useState<Guild[]>([]);
-  const [guildsLoading, setGuildsLoading] = useState(true);
-  const [guildsError, setGuildsError] = useState<string | null>(null);
-  const [selectedGuildId, setSelectedGuildId] = useState("");
-
-  // Resolve the active guild ID from:
-  //   1. URL param (?guildId=xxx)
-  //   2. Config monitorGuildId
-  //   3. First available guild from /api/guilds
-  //   4. Empty (user needs to select)
-  const resolveGuild = useCallback(() => {
-    if (urlGuildId) return urlGuildId;
-    if (config?.monitorGuildId) return config.monitorGuildId;
-    if (guilds.length > 0) return guilds[0].id;
-    return "";
-  }, [urlGuildId, config?.monitorGuildId, guilds]);
-
-  // Fetch guilds list from backend
-  useEffect(() => {
-    let cancelled = false;
-    setGuildsLoading(true);
-    setGuildsError(null);
-    voiceApi
-      .getGuilds()
-      .then((g) => {
-        if (!cancelled) setGuilds(g);
-      })
-      .catch((err) => {
-        if (!cancelled)
-          setGuildsError(
-            err instanceof Error ? err.message : "Failed to load guilds",
-          );
-      })
-      .finally(() => {
-        if (!cancelled) setGuildsLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  // Resolve guild ID once config and guilds are loaded
-  useEffect(() => {
-    if (configLoading || guildsLoading) return;
-    const resolved = resolveGuild();
-    if (resolved && resolved !== selectedGuildId) {
-      setSelectedGuildId(resolved);
-    }
-  }, [configLoading, guildsLoading, resolveGuild, selectedGuildId]);
-
-  const handleGuildChange = useCallback((guildId: string | null) => {
-    if (guildId) setSelectedGuildId(guildId);
-  }, []);
-
-  const handleRetry = useCallback(() => {
-    setGuildsLoading(true);
-    setGuildsError(null);
-    voiceApi
-      .getGuilds()
-      .then(setGuilds)
-      .catch((err) =>
-        setGuildsError(
-          err instanceof Error ? err.message : "Failed to load guilds",
-        ),
-      )
-      .finally(() => setGuildsLoading(false));
-  }, []);
-
-  const isReady = !configLoading && !guildsLoading;
-
-  return (
-    <div className="space-y-5">
-      {/* Guild selector bar */}
-      <GuildBar
-        guilds={guilds}
-        loading={guildsLoading}
-        error={guildsError}
-        selectedGuildId={selectedGuildId}
-        onChange={handleGuildChange}
-        onRetry={handleRetry}
-      />
-
-      {/* Main panel */}
-      {isReady ? (
-        <div className="animate-fade-in-up">
-          {tab === "live" && <LivePanel />}
-          {tab === "dashboard" && <DashboardPanel guildId={selectedGuildId} />}
-          {tab === "messages" && <MessagesPanel guildId={selectedGuildId} />}
-        </div>
-      ) : (
-        <div className="flex items-center justify-center py-24">
-          <div className="flex flex-col items-center gap-3">
-            <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-            <p className="text-sm text-muted-foreground">Loading dashboard…</p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ── Guild Bar ────────────────────────────────────
-
-function GuildBar({
-  guilds,
-  loading,
-  error,
-  selectedGuildId,
-  onChange,
-  onRetry,
-}: {
-  guilds: Guild[];
-  loading: boolean;
-  error: string | null;
-  selectedGuildId: string;
-  onChange: (id: string | null) => void;
-  onRetry: () => void;
-}) {
-  // No guild bar if there's only one guild and it's already selected
-  if (guilds.length <= 1 && !loading && !error) return null;
-
-  if (loading) {
-    return (
-      <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
-        <Skeleton className="h-8 w-36" />
-        <Skeleton className="h-8 w-8 rounded-full" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-between rounded-xl border border-destructive/20 bg-destructive/5 p-3">
-        <div className="flex items-center gap-2">
-          <AlertCircle className="size-4 text-destructive shrink-0" />
-          <p className="text-sm text-muted-foreground">
-            Could not load guilds: {error}
-          </p>
-        </div>
-        <Button variant="outline" size="sm" onClick={onRetry}>
-          <RefreshCw className="size-3 mr-1" />
-          Retry
-        </Button>
-      </div>
-    );
-  }
-
-  if (guilds.length === 0) {
-    return (
-      <div className="rounded-xl border border-yellow-500/20 bg-yellow-500/5 p-3">
-        <div className="flex items-center gap-2">
-          <AlertCircle className="size-4 text-yellow-500 shrink-0" />
-          <p className="text-sm text-muted-foreground">
-            No guilds available. Make sure the Discord gateway is connected.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
-      <Badge variant="outline" className="shrink-0 text-xs font-normal">
-        Guild
-      </Badge>
-      <Select value={selectedGuildId} onValueChange={onChange}>
-        <SelectTrigger className="h-8 w-full max-w-xs">
-          <SelectValue placeholder="Select a guild…" />
-        </SelectTrigger>
-        <SelectContent>
-          {guilds.map((g) => (
-            <SelectItem key={g.id} value={g.id}>
-              {g.name}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-}

services/frontend/src/app/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
 
 export default function RootPage() {
-  redirect("/dashboard?tab=messages");
+  redirect("/messages");
 }

services/frontend/src/components/layout/header.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { Moon, Sun } from "lucide-react";
+import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { SidebarTrigger } from "@/components/ui/sidebar";
@@ -10,11 +12,32 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
+function usePageTitle(): string {
+  const pathname = usePathname();
+
+  // Exact match first, then prefix match
+  const item = navItems.find((n) => {
+    if (n.matchPrefix === "/dashboard") return pathname === "/dashboard";
+    return pathname.startsWith(n.matchPrefix);
+  });
+
+  if (item) return item.label;
+
+  // Fallback: derive from pathname
+  const segment = pathname.split("/").filter(Boolean)[0];
+  if (segment) {
+    return segment.charAt(0).toUpperCase() + segment.slice(1);
+  }
+  return "Dashboard";
+}
+
 export function Header() {
   const { status } = useWebSocket();
+  const pageTitle = usePageTitle();
   const [theme, setTheme] = useState<"light" | "dark">("dark");
 
   useEffect(() => {
@@ -50,6 +73,8 @@ export function Header() {
     <header className="sticky top-0 z-10 flex h-14 items-center gap-3 border-b border-border/50 bg-background/60 backdrop-blur-lg px-4 md:px-6">
       <SidebarTrigger className="-ml-1 size-8 text-muted-foreground hover:text-foreground" />
 
+      <h1 className="text-sm font-semibold hidden sm:block">{pageTitle}</h1>
+
       <div className="flex-1" />
 
       {/* Connection status */}

services/frontend/src/components/layout/mobile-tab-bar.tsx

@@ -1,40 +1,41 @@
 "use client";
 
-import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
-import { type TabId, tabs } from "@/lib/tabs";
+import { usePathname } from "next/navigation";
+
+import { mobileNavItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 
-export function MobileTabBar({ activeTab }: { activeTab: TabId }) {
+export function MobileTabBar() {
-  const router = useRouter();
+  const pathname = usePathname();
-  const searchParams = useSearchParams();
+
+  const isActive = (matchPrefix: string) => {
+    if (matchPrefix === "/dashboard") return pathname === "/dashboard";
+    return pathname.startsWith(matchPrefix);
+  };
 
   return (
     <nav className="md:hidden fixed bottom-0 inset-x-0 z-10 border-t border-border/50 bg-background/80 backdrop-blur-lg">
       <div className="flex">
-        {tabs.map(({ id, label, icon: Icon }) => {
+        {mobileNavItems.map(({ href, label, icon: Icon, matchPrefix }) => {
-          const isActive = activeTab === id;
+          const active = isActive(matchPrefix);
           return (
-            <button
+            <Link
-              key={id}
+              key={href}
-              type="button"
+              href={href}
-              onClick={() => {
-                const params = new URLSearchParams(searchParams.toString());
-                params.set("tab", id);
-                router.push(`/dashboard?${params}`);
-              }}
               className={cn(
                 "flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium transition-all duration-200 relative",
-                isActive
+                active
                   ? "text-sky-400"
                   : "text-muted-foreground hover:text-foreground",
               )}
             >
               <Icon className="size-5" />
               <span>{label}</span>
-              {isActive && (
+              {active && (
                 <span className="absolute -top-px left-1/4 right-1/4 h-0.5 rounded-full bg-gradient-to-r from-sky-400 to-cyan-400" />
               )}
-            </button>
+            </Link>
           );
         })}
       </div>

services/frontend/src/components/layout/sidebar.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { type LucideIcon, Radio } from "lucide-react";
+import { Radio } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+
 import {
   SidebarContent,
   SidebarFooter,
@@ -14,21 +15,20 @@ import {
   Sidebar as SidebarPrimitive,
   useSidebar,
 } from "@/components/ui/sidebar";
-import { type TabId, tabs } from "@/lib/tabs";
+import { navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
-export function Sidebar({ activeTab }: { activeTab: TabId }) {
+export function Sidebar() {
+  const pathname = usePathname();
   const router = useRouter();
-  const searchParams = useSearchParams();
   const { state } = useSidebar();
   const { status } = useWebSocket();
   const collapsed = state === "collapsed";
 
-  const handleTabClick = (tabId: TabId) => {
+  const isActive = (matchPrefix: string) => {
-    const params = new URLSearchParams(searchParams.toString());
+    if (matchPrefix === "/dashboard") return pathname === "/dashboard";
-    params.set("tab", tabId);
+    return pathname.startsWith(matchPrefix);
-    router.push(`/dashboard?${params}`);
   };
 
   const connectionLabel = {
@@ -53,6 +53,7 @@ export function Sidebar({ activeTab }: { activeTab: TabId }) {
             <SidebarMenuButton
               size="lg"
               className="group-data-[collapsible=icon]:!p-0"
+              onClick={() => router.push("/dashboard")}
             >
               <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-cyan-400 text-sidebar-primary-foreground">
                 <Radio className="size-4" />
@@ -79,28 +80,28 @@ export function Sidebar({ activeTab }: { activeTab: TabId }) {
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
-              {tabs.map(({ id, label, icon: Icon }) => {
+              {navItems.map(({ href, label, icon: Icon, matchPrefix }) => {
-                const isActive = activeTab === id;
+                const active = isActive(matchPrefix);
                 return (
-                  <SidebarMenuItem key={id}>
+                  <SidebarMenuItem key={href}>
                     <SidebarMenuButton
-                      isActive={isActive}
+                      isActive={active}
-                      onClick={() => handleTabClick(id)}
                       tooltip={collapsed ? label : undefined}
                       className={cn(
                         "relative transition-all duration-200",
-                        isActive &&
+                        active &&
                           "bg-sidebar-accent/80 text-sidebar-accent-foreground font-medium",
                       )}
+                      onClick={() => router.push(href)}
                     >
                       <Icon
                         className={cn(
                           "size-4 transition-all duration-200",
-                          isActive && "text-sky-400 scale-110",
+                          active && "text-sky-400 scale-110",
                         )}
                       />
                       <span>{label}</span>
-                      {isActive && (
+                      {active && (
                         <div className="absolute right-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-full bg-gradient-to-b from-sky-400 to-cyan-400" />
                       )}
                     </SidebarMenuButton>

services/frontend/src/components/shared/guild-selector.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { AlertCircle, RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { voiceApi } from "@/lib/api";
+import type { Guild } from "@/lib/types";
+
+export interface GuildSelectorProps {
+  /** Currently selected guild ID */
+  value: string;
+  /** Called when user selects a different guild */
+  onChange: (guildId: string) => void;
+  /** If true, the bar is hidden when there's only one guild */
+  autoHide?: boolean;
+}
+
+/**
+ * Guild selector bar — fetches the guild list and renders a <Select>.
+ * Optionally auto-hides when there's exactly one guild.
+ */
+export function GuildSelector({
+  value,
+  onChange,
+  autoHide = true,
+}: GuildSelectorProps) {
+  const [guilds, setGuilds] = useState<Guild[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchGuilds = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    voiceApi
+      .getGuilds()
+      .then(setGuilds)
+      .catch((err) =>
+        setError(
+          err instanceof Error ? err.message : "Failed to load guilds",
+        ),
+      )
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    fetchGuilds();
+  }, [fetchGuilds]);
+
+  // Auto-hide when there's exactly one guild and autoHide is on
+  if (autoHide && guilds.length <= 1 && !loading && !error) return null;
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
+        <Skeleton className="h-8 w-36" />
+        <Skeleton className="h-8 w-8 rounded-full" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-between rounded-xl border border-destructive/20 bg-destructive/5 p-3">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="size-4 text-destructive shrink-0" />
+          <p className="text-sm text-muted-foreground">
+            Could not load guilds: {error}
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={fetchGuilds}>
+          <RefreshCw className="size-3 mr-1" />
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
+  if (guilds.length === 0) {
+    return (
+      <div className="rounded-xl border border-yellow-500/20 bg-yellow-500/5 p-3">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="size-4 text-yellow-500 shrink-0" />
+          <p className="text-sm text-muted-foreground">
+            No guilds available. Make sure the Discord gateway is connected.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
+      <Badge variant="outline" className="shrink-0 text-xs font-normal">
+        Guild
+      </Badge>
+      <Select value={value} onValueChange={(v) => v && onChange(v)}>
+        <SelectTrigger className="h-8 w-full max-w-xs">
+          <SelectValue placeholder="Select a guild…" />
+        </SelectTrigger>
+        <SelectContent>
+          {guilds.map((g) => (
+            <SelectItem key={g.id} value={g.id}>
+              {g.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

services/frontend/src/features/live/live-panel.tsx

@@ -1,597 +0,0 @@
-"use client";
-
-import {
-  Disc3,
-  Download,
-  Headphones,
-  Loader2,
-  Mic,
-  Music,
-  Play,
-  Radio,
-  RadioOff,
-  SkipForward,
-  Square,
-  Trash2,
-  UserCheck,
-  Volume2,
-} from "lucide-react";
-import Image from "next/image";
-import { useCallback, useEffect, useState } from "react";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Slider } from "@/components/ui/slider";
-import { Switch } from "@/components/ui/switch";
-import { recordingsApi, voiceApi } from "@/lib/api";
-import type {
-  ActiveSpeaker,
-  MediaState,
-  VoiceRecording,
-  VoiceStatus,
-} from "@/lib/types";
-import { cn } from "@/lib/utils";
-import { useWebSocket } from "@/lib/ws/context";
-
-export function LivePanel() {
-  const ws = useWebSocket();
-
-  // Voice
-  const [voiceStatus, setVoiceStatus] = useState<VoiceStatus | null>(null);
-  const [speakers, setSpeakers] = useState<ActiveSpeaker[]>([]);
-  const [guilds, setGuilds] = useState<Array<{ id: string; name: string }>>([]);
-  const [voiceChannels, setVoiceChannels] = useState<
-    Array<{ id: string; name: string }>
-  >([]);
-  const [selectedGuild, setSelectedGuild] = useState("");
-  const [selectedChannel, setSelectedChannel] = useState("");
-  const [voiceLoading, setVoiceLoading] = useState(false);
-  const [micActive, setMicActive] = useState(false);
-
-  // Media
-  const [mediaState, setMediaState] = useState<MediaState | null>(null);
-  const [queueUrl, setQueueUrl] = useState("");
-
-  // Recordings
-  const [recordings, setRecordings] = useState<VoiceRecording[]>([]);
-  const [_recordingsCursor, setRecordingsCursor] = useState<string | null>(
-    null,
-  );
-  const [_recordingsHasMore, setRecordingsHasMore] = useState(false);
-
-  const fetchVoiceStatus = useCallback(async () => {
-    try {
-      const status = await voiceApi.getStatus();
-      setVoiceStatus(status);
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  const fetchGuilds = useCallback(async () => {
-    try {
-      const g = await voiceApi.getGuilds();
-      setGuilds(g);
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  const fetchRecordings = useCallback(async () => {
-    try {
-      const result = await recordingsApi.list(20);
-      setRecordings(result.items);
-      setRecordingsCursor(result.nextCursor);
-      setRecordingsHasMore(result.hasMore);
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchVoiceStatus();
-    fetchGuilds();
-    fetchRecordings();
-  }, [fetchVoiceStatus, fetchGuilds, fetchRecordings]);
-
-  const fetchMediaStatus = useCallback(async () => {
-    try {
-      const state = await voiceApi.getMediaStatus();
-      setMediaState(state);
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchMediaStatus();
-  }, [fetchMediaStatus]);
-
-  // WS subscriptions
-  useEffect(() => {
-    const unsubSpeaker = ws.on("voice_active_user", (user) => {
-      const speaker = user as ActiveSpeaker;
-      setSpeakers((prev) => {
-        const existing = prev.findIndex((s) => s.userId === speaker.userId);
-        if (existing >= 0) {
-          const next = [...prev];
-          next[existing] = speaker;
-          return next;
-        }
-        return [...prev, speaker];
-      });
-    });
-
-    const unsubMedia = ws.on("media_state", (state) => {
-      setMediaState(state as MediaState);
-    });
-
-    const unsubRecording = ws.on("voice_recording_uploaded", (rec) => {
-      setRecordings((prev) => [rec as VoiceRecording, ...prev]);
-    });
-
-    return () => {
-      unsubSpeaker();
-      unsubMedia();
-      unsubRecording();
-    };
-  }, [ws]);
-
-  const handleGuildChange = useCallback(async (guildId: string | null) => {
-    if (!guildId) {
-      setSelectedGuild("");
-      setVoiceChannels([]);
-      return;
-    }
-    setSelectedGuild(guildId);
-    setSelectedChannel("");
-    try {
-      const channels = await voiceApi.getVoiceChannels(guildId);
-      setVoiceChannels(channels);
-    } catch {
-      setVoiceChannels([]);
-    }
-  }, []);
-
-  const handleConnect = useCallback(async () => {
-    if (!selectedGuild || !selectedChannel) return;
-    setVoiceLoading(true);
-    try {
-      const status = await voiceApi.connect(selectedGuild, selectedChannel);
-      setVoiceStatus(status);
-    } finally {
-      setVoiceLoading(false);
-    }
-  }, [selectedGuild, selectedChannel]);
-
-  const handleDisconnect = useCallback(async () => {
-    setVoiceLoading(true);
-    try {
-      const status = await voiceApi.disconnect();
-      setVoiceStatus(status);
-    } finally {
-      setVoiceLoading(false);
-    }
-  }, []);
-
-  const handleQueueMedia = useCallback(async () => {
-    if (!queueUrl.trim()) return;
-    try {
-      const state = await voiceApi.mediaQueue(queueUrl.trim(), "music");
-      setMediaState(state);
-      setQueueUrl("");
-    } catch {
-      // ignore
-    }
-  }, [queueUrl]);
-
-  const handleSkip = useCallback(async () => {
-    try {
-      const state = await voiceApi.mediaSkip();
-      setMediaState(state);
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  const handleStop = useCallback(async () => {
-    try {
-      const state = await voiceApi.mediaStop();
-      setMediaState(state);
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  const handleVolume = useCallback(
-    async (value: number | readonly number[]) => {
-      const vol = Array.isArray(value) ? value[0] : value;
-      try {
-        const state = await voiceApi.mediaVolume(vol);
-        setMediaState(state);
-      } catch {
-        // ignore
-      }
-    },
-    [],
-  );
-
-  const handleDeleteRecording = useCallback(async (id: string) => {
-    try {
-      await recordingsApi.delete(id);
-      setRecordings((prev) => prev.filter((r) => r.id !== id));
-    } catch {
-      // ignore
-    }
-  }, []);
-
-  return (
-    <div className="space-y-5 animate-fade-in-up">
-      {/* Voice Connection */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Radio className="size-4 text-primary" />
-              Voice Connection
-            </div>
-            <Badge
-              variant={voiceStatus?.connected ? "default" : "secondary"}
-              className={cn(
-                voiceStatus?.connected &&
-                  "bg-green-500/15 text-green-600 dark:text-green-400 hover:bg-green-500/20",
-              )}
-            >
-              <span
-                className={cn(
-                  "size-1.5 rounded-full mr-1.5 inline-block",
-                  voiceStatus?.connected
-                    ? "bg-green-500 shadow-[0_0_6px] shadow-green-500/60"
-                    : "bg-muted-foreground",
-                )}
-              />
-              {voiceStatus?.connected ? "Connected" : "Disconnected"}
-            </Badge>
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {voiceStatus?.connected && voiceStatus.activeChannelName && (
-            <p className="text-sm text-muted-foreground flex items-center gap-1.5">
-              <Headphones className="size-4" />
-              Connected to{" "}
-              <span className="font-medium text-foreground">
-                {voiceStatus.activeChannelName}
-              </span>
-            </p>
-          )}
-
-          <div className="flex flex-col sm:flex-row gap-2">
-            <Select value={selectedGuild} onValueChange={handleGuildChange}>
-              <SelectTrigger className="flex-1 h-9">
-                <SelectValue placeholder="Select guild…" />
-              </SelectTrigger>
-              <SelectContent>
-                {guilds.map((g) => (
-                  <SelectItem key={g.id} value={g.id}>
-                    {g.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select
-              value={selectedChannel}
-              onValueChange={(v) => v && setSelectedChannel(v)}
-            >
-              <SelectTrigger className="flex-1 h-9">
-                <SelectValue placeholder="Select channel…" />
-              </SelectTrigger>
-              <SelectContent>
-                {voiceChannels.map((c) => (
-                  <SelectItem key={c.id} value={c.id}>
-                    {c.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {voiceStatus?.connected ? (
-              <Button
-                variant="destructive"
-                onClick={handleDisconnect}
-                disabled={voiceLoading}
-              >
-                {voiceLoading ? (
-                  <Loader2 className="size-4 animate-spin mr-1.5" />
-                ) : (
-                  <RadioOff className="size-4 mr-1.5" />
-                )}
-                Disconnect
-              </Button>
-            ) : (
-              <Button
-                onClick={handleConnect}
-                disabled={voiceLoading || !selectedGuild || !selectedChannel}
-              >
-                {voiceLoading ? (
-                  <Loader2 className="size-4 animate-spin mr-1.5" />
-                ) : (
-                  <Radio className="size-4 mr-1.5" />
-                )}
-                Connect
-              </Button>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Active Speakers */}
-      {speakers.filter((s) => s.speaking).length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-sm font-semibold">
-              <UserCheck className="size-4 text-primary" />
-              Active Speakers
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-2">
-              {speakers
-                .filter((s) => s.speaking)
-                .map((s) => (
-                  <div
-                    key={s.userId}
-                    className="flex items-center gap-2 rounded-full border border-border/50 bg-card px-3 py-1.5 shadow-sm"
-                  >
-                    <span className="relative flex size-2">
-                      <span className="absolute inline-flex size-full rounded-full bg-green-400 opacity-75 live-pulse-ring" />
-                      <span className="relative inline-flex size-2 rounded-full bg-green-500" />
-                    </span>
-                    <span className="text-sm">{s.username}</span>
-                  </div>
-                ))}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Music Player */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
-            <Music className="size-4 text-primary" />
-            Music Player
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {/* Queue URL */}
-          <div className="flex gap-2">
-            <Input
-              type="text"
-              placeholder="Queue a URL (YouTube, audio file…)"
-              value={queueUrl}
-              onChange={(e) => setQueueUrl(e.target.value)}
-              onKeyDown={(e) => e.key === "Enter" && handleQueueMedia()}
-              className="flex-1 h-9"
-            />
-            <Button onClick={handleQueueMedia} disabled={!queueUrl.trim()}>
-              <Play className="size-4 mr-1.5" />
-              Queue
-            </Button>
-          </div>
-
-          {/* Now Playing */}
-          {mediaState?.current && (
-            <div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4 space-y-2">
-              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider flex items-center gap-1.5">
-                <Disc3 className="size-3" />
-                Now Playing
-              </p>
-              <div className="flex items-start gap-3">
-                {mediaState.current.thumbnailUrl && (
-                  <Image
-                    src={mediaState.current.thumbnailUrl}
-                    alt=""
-                    width={56}
-                    height={56}
-                    className="size-14 rounded-lg object-cover shadow-sm"
-                  />
-                )}
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium truncate">
-                    {mediaState.current.title ?? mediaState.current.source}
-                  </p>
-                  <p className="text-xs text-muted-foreground mt-0.5">
-                    {mediaState.current.durationMs
-                      ? `${Math.floor(mediaState.current.durationMs / 60000)}:${String(
-                          Math.floor(
-                            (mediaState.current.durationMs % 60000) / 1000,
-                          ),
-                        ).padStart(2, "0")}`
-                      : "Live"}
-                  </p>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Controls */}
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={handleStop}>
-              <Square className="size-4 mr-1" />
-              Stop
-            </Button>
-            <Button variant="outline" size="sm" onClick={handleSkip}>
-              <SkipForward className="size-4 mr-1" />
-              Skip
-            </Button>
-            <div className="flex items-center gap-2 ml-auto">
-              <Volume2 className="size-4 text-muted-foreground" />
-              <Slider
-                className="w-24"
-                defaultValue={[mediaState?.musicVolume ?? 0.5]}
-                value={[mediaState?.musicVolume ?? 0.5]}
-                onValueChange={handleVolume}
-                min={0}
-                max={1}
-                step={0.05}
-              />
-            </div>
-          </div>
-
-          {/* Queue */}
-          {mediaState && mediaState.queue.length > 0 && (
-            <div className="space-y-1.5">
-              <p className="text-xs text-muted-foreground font-medium">
-                Queue ({mediaState.queue.length})
-              </p>
-              <div className="space-y-1">
-                {mediaState.queue.map((item, i) => (
-                  <div
-                    key={item.id ?? i}
-                    className="flex items-center gap-2 rounded-md bg-muted/30 px-3 py-2 text-sm"
-                  >
-                    <span className="text-xs text-muted-foreground font-mono w-5 text-right">
-                      {i + 1}.
-                    </span>
-                    <span className="truncate flex-1">
-                      {item.title ?? item.source}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Microphone */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center justify-between">
-            <div className="flex items-center gap-2 text-sm font-semibold">
-              <Mic className="size-4 text-primary" />
-              Microphone
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="text-xs text-muted-foreground">
-                {micActive ? "On" : "Off"}
-              </span>
-              <Switch
-                checked={micActive}
-                onCheckedChange={async (checked) => {
-                  setMicActive(checked);
-                  try {
-                    await voiceApi.sendCommand(
-                      checked ? "voice:transmit:start" : "voice:transmit:stop",
-                    );
-                  } catch {
-                    setMicActive(!checked);
-                  }
-                }}
-                disabled={!voiceStatus?.connected}
-              />
-            </div>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          {!voiceStatus?.connected && (
-            <p className="text-xs text-muted-foreground">
-              Connect to a voice channel first.
-            </p>
-          )}
-          {micActive && (
-            <div className="flex items-center gap-2 mt-1">
-              <span className="relative flex size-2">
-                <span className="absolute inline-flex size-full rounded-full bg-red-400 opacity-75 live-pulse-ring" />
-                <span className="relative inline-flex size-2 rounded-full bg-red-500" />
-              </span>
-              <span className="text-sm text-muted-foreground">
-                Transmitting…
-              </span>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Recordings */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
-            <Headphones className="size-4 text-primary" />
-            Voice Recordings
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          {recordings.length === 0 ? (
-            <p className="text-sm text-muted-foreground py-8 text-center">
-              No recordings yet.
-            </p>
-          ) : (
-            <div className="space-y-2">
-              {recordings.map((rec) => (
-                <div
-                  key={rec.id}
-                  className="flex items-center gap-3 rounded-lg border border-border/50 p-3 hover:bg-muted/30 transition-colors"
-                >
-                  <Avatar className="size-8">
-                    <AvatarImage src={rec.avatar_url ?? undefined} />
-                    <AvatarFallback>
-                      {(rec.username ?? "?").charAt(0).toUpperCase()}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium truncate">
-                      {rec.username}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      {rec.channel_name ?? rec.channel_id ?? "Unknown channel"}
-                      {" — "}
-                      {new Date(rec.created_at).toLocaleString()}
-                    </p>
-                  </div>
-                  <Badge
-                    variant="outline"
-                    className="text-[10px] font-mono shrink-0"
-                  >
-                    {formatBytes(rec.size_bytes)}
-                  </Badge>
-                  {rec.download_url && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => window.open(rec.download_url!, "_blank")}
-                    >
-                      <Download className="size-4" />
-                    </Button>
-                  )}
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => handleDeleteRecording(rec.id)}
-                    className="hover:text-destructive hover:bg-destructive/10"
-                  >
-                    <Trash2 className="size-4" />
-                  </Button>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}

services/frontend/src/lib/format.ts

@@ -0,0 +1,47 @@
+/**
+ * Format a number with locale separators.
+ */
+export function formatNumber(n: number): string {
+  return n.toLocaleString();
+}
+
+/**
+ * Format bytes into a human-readable string.
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Safely parse a JSON string into an array.
+ */
+export function safeParseJsonArray(
+  value: string | null | undefined,
+): string[] {
+  if (!value) return [];
+  try {
+    const parsed = JSON.parse(value);
+    if (Array.isArray(parsed)) return parsed;
+    return [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Safely parse a JSON string into an object.
+ */
+export function safeParseJsonObject(
+  value: string | null | undefined,
+): Record<string, unknown> {
+  if (!value) return {};
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed !== null) return parsed;
+    return {};
+  } catch {
+    return {};
+  }
+}

services/frontend/src/lib/navigation.ts

@@ -0,0 +1,75 @@
+import {
+  BarChart3,
+  Headphones,
+  LayoutDashboard,
+  MessageSquare,
+  Mic,
+  Music,
+  Search,
+  type LucideIcon,
+} from "lucide-react";
+
+export interface NavItem {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+  /** The pathname prefix that indicates this item is active */
+  matchPrefix: string;
+}
+
+/**
+ * Primary navigation items shown in the sidebar.
+ */
+export const navItems: NavItem[] = [
+  {
+    href: "/dashboard",
+    label: "Dashboard",
+    icon: LayoutDashboard,
+    matchPrefix: "/dashboard",
+  },
+  {
+    href: "/messages",
+    label: "Messages",
+    icon: MessageSquare,
+    matchPrefix: "/messages",
+  },
+  {
+    href: "/voice",
+    label: "Voice",
+    icon: Mic,
+    matchPrefix: "/voice",
+  },
+  {
+    href: "/media",
+    label: "Media",
+    icon: Music,
+    matchPrefix: "/media",
+  },
+  {
+    href: "/recordings",
+    label: "Recordings",
+    icon: Headphones,
+    matchPrefix: "/recordings",
+  },
+  {
+    href: "/analysis",
+    label: "Search",
+    icon: Search,
+    matchPrefix: "/analysis",
+  },
+  {
+    href: "/settings",
+    label: "Settings",
+    icon: BarChart3,
+    matchPrefix: "/settings",
+  },
+];
+
+/**
+ * Mobile bottom bar items (subset of primary nav).
+ */
+export const mobileNavItems: NavItem[] = navItems.filter((item) =>
+  ["/dashboard", "/messages", "/voice", "/media"].includes(item.href),
+);
+
+export type NavItemId = (typeof navItems)[number]["href"];

services/frontend/src/lib/tabs.ts

@@ -1,9 +0,0 @@
-import { LayoutDashboard, MessageSquare, Radio } from "lucide-react";
-
-export const tabs = [
-  { id: "messages", label: "Messages", icon: MessageSquare },
-  { id: "live", label: "Live", icon: Radio },
-  { id: "dashboard", label: "Dashboard", icon: LayoutDashboard },
-] as const;
-
-export type TabId = (typeof tabs)[number]["id"];