feat: design tokens, globals CSS, fonts, navigation config

- Rewrite globals.css with dark-theme OKLCH tokens, glass utilities, ambient bg
- Update root layout with Inter + JetBrains Mono fonts, theme script
- Redirect / to /dashboard
- Update navigation config — remove search link, add recordings
- Update analysis search-panel with glass styling

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

@@ -1,83 +1,70 @@
 "use client";
 
-import { BarChart3, Hash, Users } from "lucide-react";
+import { AlertCircle, Clock, Hash, Shield, Sparkles, Users } from "lucide-react";
 import { useState } from "react";
-import {
-  ChannelDetailSection,
-  ChannelsSection,
-  StatsSection,
-  UserDetailSection,
-  UsersSection,
-} from "@/components/dashboard";
-import { GuildSelector } from "@/components/shared/guild-selector";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useStats } from "@/hooks";
+import { StatCard } from "@/components/dashboard/stat-card";
+import { LiveStream } from "@/components/dashboard/live-stream";
+import { ModQueue } from "@/components/dashboard/mod-queue";
+import { MessageTrendChart } from "@/components/dashboard/message-trend-chart";
+import { ActivityHeatmap } from "@/components/dashboard/activity-heatmap";
+import { TopChannelsChart } from "@/components/dashboard/top-channels-chart";
+import { SubNav } from "@/components/layout/sub-nav";
+import { ErrorState, LoadingSkeleton } from "@/components/shared";
 
-type View = "stats" | "users" | "channels" | "user-detail" | "channel-detail";
+type DashboardTab = "stats" | "live" | "activity";
 
 export default function DashboardPage() {
-  const [view, setView] = useState<View>("stats");
-  const [guildId, setGuildId] = useState("");
-  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
-  const [selectedChannelId, setSelectedChannelId] = useState<string | null>(
-    null,
-  );
+  const [tab, setTab] = useState<DashboardTab>("stats");
+  const { data: stats, isLoading, error, refetch } = useStats();
+
+  const subNavTabs = [
+    { id: "stats", label: "Stats", icon: <Hash className="size-3" /> },
+    { id: "live", label: "Live", icon: <Sparkles className="size-3" /> },
+    { id: "activity", label: "Activity", icon: <Clock className="size-3" /> },
+  ];
 
   return (
-    <div className="space-y-5">
-      <GuildSelector value={guildId} onChange={setGuildId} />
+    <div className="space-y-4 animate-fade-in-up">
+      <SubNav tabs={subNavTabs} activeTab={tab} onTabChange={(t) => setTab(t as DashboardTab)} />
 
-      <Tabs
-        value={
-          view === "user-detail"
-            ? "users"
-            : view === "channel-detail"
-              ? "channels"
-              : view
-        }
-        onValueChange={(v) => setView(v as View)}
-      >
-        <TabsList>
-          <TabsTrigger value="stats" onClick={() => setView("stats")}>
-            <BarChart3 className="size-4" /> Stats
-          </TabsTrigger>
-          <TabsTrigger value="users" onClick={() => setView("users")}>
-            <Users className="size-4" /> Users
-          </TabsTrigger>
-          <TabsTrigger value="channels" onClick={() => setView("channels")}>
-            <Hash className="size-4" /> Channels
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
+      {tab === "stats" && (
+        <div className="space-y-4">
+          {error ? (
+            <ErrorState message={error.message} onRetry={refetch} />
+          ) : isLoading || !stats ? (
+            <LoadingSkeleton count={6} height="h-28" columns={3} />
+          ) : (
+            <>
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+                <StatCard label="Total Messages" value={stats.total_messages} icon={Hash} />
+                <StatCard label="Today" value={stats.today_messages} icon={Clock} />
+                <StatCard label="Users" value={stats.total_users} icon={Users} />
+                <StatCard label="Active 24h" value={stats.active_users_24h} icon={Sparkles} />
+                <StatCard label="Flagged" value={stats.total_flagged} icon={AlertCircle} variant="danger" />
+                <StatCard label="Clean" value={stats.total_clean} icon={Shield} variant="success" />
+              </div>
 
-      {view === "stats" && <StatsSection />}
-      {view === "users" && (
-        <UsersSection
-          onSelect={(userId) => {
-            setSelectedUserId(userId);
-            setView("user-detail");
-          }}
-        />
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <MessageTrendChart />
+                <TopChannelsChart />
+              </div>
+            </>
+          )}
+        </div>
       )}
-      {view === "user-detail" && selectedUserId && (
-        <UserDetailSection
-          userId={selectedUserId}
-          onBack={() => setView("users")}
-        />
+
+      {tab === "live" && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <LiveStream />
+          <ModQueue />
+        </div>
       )}
-      {view === "channels" && (
-        <ChannelsSection
-          guildId={guildId}
-          onSelect={(chId) => {
-            setSelectedChannelId(chId);
-            setView("channel-detail");
-          }}
-        />
-      )}
-      {view === "channel-detail" && selectedChannelId && (
-        <ChannelDetailSection
-          channelId={selectedChannelId}
-          onBack={() => setView("channels")}
-        />
+
+      {tab === "activity" && (
+        <div className="grid grid-cols-1 gap-4">
+          <ActivityHeatmap />
+        </div>
       )}
     </div>
   );

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

@@ -2,50 +2,89 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Suspense } from "react";
-
-import { Chatbot } from "@/components/chatbot/chatbot";
-import { AppHeader } from "@/components/layout/app-header";
-import { AppSidebar } from "@/components/layout/app-sidebar";
+import { TopNav } from "@/components/layout/top-nav";
 import { MobileNav } from "@/components/layout/mobile-nav";
 import { WsProvider } from "@/lib/ws/context";
+import { MascotProvider } from "@/components/mascot/mascot-context";
+import { MascotContainer } from "@/components/mascot/mascot-container";
+import { MiniPlayer } from "@/components/media/mini-player";
+import { MediaPlayerProvider } from "@/lib/hooks/use-media-player";
+import { HiddenSidebar } from "@/components/layout/hidden-sidebar";
+import { useState } from "react";
+import { useWebSocket } from "@/lib/ws/context";
+import { useMascot } from "@/components/mascot/mascot-context";
+import { useEffect } from "react";
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 15_000,
+      staleTime: 10_000,
       retry: 1,
       refetchOnWindowFocus: false,
     },
   },
 });
 
+function MascotExpressionSync() {
+  const ws = useWebSocket();
+  const { setExpression } = useMascot();
+
+  useEffect(() => {
+    const unsub1 = ws.on("message_created", (data: any) => {
+      if (data.ai_status === "flagged" || data.ai_status === "warn") {
+        setExpression("surprise");
+        setTimeout(() => setExpression("idle"), 2000);
+      }
+    });
+
+    const unsub2 = ws.on("voice_active_user", () => {
+      setExpression("listening");
+    });
+
+    return () => { unsub1(); unsub2(); };
+  }, [ws, setExpression]);
+
+  return null;
+}
+
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const [guildId, setGuildId] = useState("");
+
   return (
     <QueryClientProvider client={queryClient}>
       <WsProvider>
-        <div className="flex h-screen overflow-hidden bg-background">
-          <AppSidebar />
-          <div className="flex flex-1 flex-col min-w-0">
-            <AppHeader />
-            <main className="flex-1 overflow-y-auto p-4 md:p-6 pb-20 md:pb-6">
-              <Suspense
-                fallback={
-                  <div className="flex h-full items-center justify-center">
-                    <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-                  </div>
-                }
-              >
-                {children}
-              </Suspense>
-            </main>
-          </div>
-          <MobileNav />
-        </div>
-        <Chatbot />
+        <MediaPlayerProvider>
+          <MascotProvider>
+            <div className="min-h-screen bg-canvas">
+              <TopNav />
+              <HiddenSidebar guildId={guildId} onGuildChange={(g) => setGuildId(g ?? "")} />
+              <MascotExpressionSync />
+
+              {/* Sub-nav space — filled per-page */}
+              <div className="pt-11">
+                <main className="p-4 md:p-6 pb-24 md:pb-6 max-w-[1600px] mx-auto">
+                  <Suspense
+                    fallback={
+                      <div className="flex h-[60vh] items-center justify-center">
+                        <div className="size-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+                      </div>
+                    }
+                  >
+                    {children}
+                  </Suspense>
+                </main>
+              </div>
+
+              <MobileNav />
+              <MiniPlayer />
+              <MascotContainer />
+            </div>
+          </MascotProvider>
+        </MediaPlayerProvider>
       </WsProvider>
     </QueryClientProvider>
   );

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

@@ -1,23 +1,16 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
-import { Flag, Loader2, MessageSquare, RefreshCw, Search } from "lucide-react";
-import { useCallback, useState } from "react";
-import { ImagesGrid } from "@/components/messages/images-grid";
-import { MessageCard } from "@/components/messages/message-card";
-import { MessageDetailView } from "@/components/messages/message-detail-view";
-import { ReviewList } from "@/components/messages/review-list";
+import { useCallback, useEffect, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { Search, Flag, Image, Loader2, RefreshCw } from "lucide-react";
+import { MessageList } from "@/components/messages/message-list";
+import { MessageDetail } from "@/components/messages/message-detail";
+import { SearchOverlay } from "@/components/messages/search-overlay";
+import { SubNav } from "@/components/layout/sub-nav";
 import { ErrorState, LoadingSkeleton } from "@/components/shared";
-import { GuildSelector } from "@/components/shared/guild-selector";
+import { GlassCard } from "@/components/glass/card";
+import { GlassPanel } from "@/components/glass/panel";
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -25,8 +18,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
+  useGuilds,
   useImages,
   useLoadMore,
   useMessageDetail,
@@ -38,62 +31,60 @@ import {
   useReview,
   useTextChannels,
 } from "@/hooks";
-import { messagesApi } from "@/lib/api";
-import type { MessageRecord } from "@/lib/types";
 import { useWebSocket } from "@/lib/ws/context";
+import { GuildSelector } from "@/components/shared/guild-selector";
+import { cn } from "@/lib/utils";
+
+type MessagesTab = "all" | "images" | "review";
 
 export default function MessagesPage() {
-  const [guildId, setGuildId] = useState("");
-  const [selectedChannel, setSelectedChannel] = useState("");
-  const [viewTab, setViewTab] = useState<"all" | "images" | "review">("all");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [detailId, setDetailId] = useState<string | null>(null);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [guildId, setGuildId] = useState(searchParams.get("guild") || "");
+  const [selectedChannel, setSelectedChannel] = useState(searchParams.get("channel") || "");
+  const [detailId, setDetailId] = useState<string | null>(searchParams.get("selected"));
+  const [tab, setTab] = useState<MessagesTab>((searchParams.get("tab") as MessagesTab) || "all");
+  const [searchOpen, setSearchOpen] = useState(false);
 
   const ws = useWebSocket();
   const { data: channels = [] } = useTextChannels(guildId);
-  const {
-    data: messages,
-    isLoading,
-    error,
-    refetch,
-  } = useMessages(guildId, selectedChannel || undefined);
-  const { data: cursorData } = useMessagesHasMore(
-    guildId,
-    selectedChannel || undefined,
-  );
+  const { data: messages, isLoading, error, refetch } = useMessages(guildId, selectedChannel || undefined);
+  const { data: cursorData } = useMessagesHasMore(guildId, selectedChannel || undefined);
   const loadMoreMut = useLoadMore();
   const { data: images } = useImages(guildId);
   const { data: reviews } = useReview(selectedChannel || undefined);
   const reanalyzeMut = useReanalyze();
   const reanalyzeBatchMut = useReanalyzeBatch();
 
-  // Sync WS events into the TanStack Query cache
-  useMessagesWsSync(ws, guildId);
-
-  // Detail dialog
   const {
     message: detailMessage,
     attachments: detailAttachments,
     loading: detailLoading,
   } = useMessageDetail(detailId);
 
-  // Search query (manual trigger)
-  const [searchEnabled, setSearchEnabled] = useState(false);
-  const { data: searchResults } = useQuery<
-    MessageRecord[]
-  >({
-    queryKey: ["messages-search", guildId, searchQuery],
-    queryFn: async () => {
-      const result = await messagesApi.search(searchQuery, 50);
-      return result.results;
-    },
-    enabled: searchEnabled && !!searchQuery && !!guildId,
-  });
+  useMessagesWsSync(ws, guildId);
 
-  const handleSearch = useCallback(() => {
-    if (!searchQuery.trim()) return;
-    setSearchEnabled(true);
-  }, [searchQuery]);
+  // Sync to URL
+  useEffect(() => {
+    const params = new URLSearchParams();
+    if (guildId) params.set("guild", guildId);
+    if (selectedChannel) params.set("channel", selectedChannel);
+    if (detailId) params.set("selected", detailId);
+    if (tab !== "all") params.set("tab", tab);
+    router.replace(`/messages?${params.toString()}`, { scroll: false });
+  }, [guildId, selectedChannel, detailId, tab, router]);
+
+  // Global Cmd+K
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setSearchOpen(true);
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, []);
 
   const handleLoadMore = useCallback(() => {
     if (!cursorData?.cursor || loadMoreMut.isPending) return;
@@ -104,168 +95,135 @@ export default function MessagesPage() {
     });
   }, [cursorData, loadMoreMut, guildId, selectedChannel]);
 
-  const displayMessages = searchResults ?? messages ?? [];
-  const hasMore = cursorData?.hasMore ?? false;
-  const isEmpty = !isLoading && displayMessages.length === 0;
+  const subNavTabs = [
+    { id: "all", label: "All" },
+    { id: "images", label: "Images", icon: <Image className="size-3" /> },
+    { id: "review", label: "Review", icon: <Flag className="size-3" /> },
+  ];
 
-  if (error) {
-    return (
-      <div className="space-y-5">
-        <GuildSelector value={guildId} onChange={setGuildId} />
-        <ErrorState message={error.message} onRetry={refetch} />
-      </div>
-    );
-  }
+  const currentMessages = messages ?? [];
 
   return (
-    <div className="space-y-5">
-      <GuildSelector value={guildId} onChange={setGuildId} />
-
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-          <Input
-            placeholder="Search messages…"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleSearch()}
-            className="pl-9 h-9"
-          />
-        </div>
+    <div className="animate-fade-in-up space-y-4">
+      {/* Controls bar */}
+      <div className="flex items-center gap-3">
+        <GuildSelector value={guildId} onChange={(g) => { setGuildId(g ?? ""); setSelectedChannel(""); }} />
         {channels.length > 0 && (
-          <Select
-            value={selectedChannel}
-            onValueChange={(v) => setSelectedChannel(v ?? "")}
-          >
-            <SelectTrigger className="h-9 w-full sm:w-44">
+          <Select value={selectedChannel} onValueChange={(v) => setSelectedChannel(v ?? "")}>
+            <SelectTrigger className="h-8 w-40 glass border-glass-border text-xs">
               <SelectValue placeholder="All channels" />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="">All channels</SelectItem>
-              {channels.map((ch) => (
-                <SelectItem key={ch.id} value={ch.id}>
-                  # {ch.name}
-                </SelectItem>
+              {channels.map((ch: any) => (
+                <SelectItem key={ch.id} value={ch.id}># {ch.name}</SelectItem>
               ))}
             </SelectContent>
           </Select>
         )}
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => reanalyzeBatchMut.mutate(guildId)}
+        <button
+          type="button"
+          onClick={() => setSearchOpen(true)}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs text-text-secondary/60 hover:text-text-primary glass hover:glass-elevated transition-all ml-auto"
         >
-          <RefreshCw className="size-4 mr-1.5" />
-          Reanalyze Errors
+          <Search className="size-3.5" />
+          Search
+          <span className="text-[10px] text-text-secondary/30 font-mono hidden sm:inline">⌘K</span>
+        </button>
+        <Button variant="outline" size="sm" onClick={() => reanalyzeBatchMut.mutate(guildId)} className="h-8 text-xs">
+          <RefreshCw className="size-3 mr-1" /> Reanalyze
         </Button>
       </div>
 
-      <Tabs
-        value={viewTab}
-        onValueChange={(v) => setViewTab(v as typeof viewTab)}
-      >
-        <TabsList>
-          <TabsTrigger value="all">
-            All ({(searchResults ?? messages)?.length ?? 0})
-          </TabsTrigger>
-          <TabsTrigger value="images">
-            Images ({images?.length ?? 0})
-          </TabsTrigger>
-          <TabsTrigger value="review">
-            <Flag className="size-3.5 mr-1" /> Review ({reviews?.length ?? 0})
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
+      <SubNav tabs={subNavTabs} activeTab={tab} onTabChange={(t) => setTab(t as MessagesTab)} />
 
-      {searchResults && (
-        <p className="text-sm text-muted-foreground animate-fade-in-up">
-          Found {searchResults.length} result
-          {searchResults.length !== 1 ? "s" : ""}
-        </p>
-      )}
+      {/* Split pane */}
+      {error ? (
+        <ErrorState message={error.message} onRetry={refetch} />
+      ) : isLoading ? (
+        <LoadingSkeleton count={6} height="h-20" />
+      ) : (
+        <div className="flex gap-4">
+          {/* Left pane — message list */}
+          <div className={cn("space-y-2", detailId ? "w-1/2 lg:w-2/5" : "w-full")}>
+            {tab === "all" && (
+              <>
+                <MessageList messages={currentMessages} selectedId={detailId} onSelect={setDetailId} />
+                {cursorData?.hasMore && (
+                  <div className="flex justify-center py-4">
+                    <Button variant="outline" size="sm" onClick={handleLoadMore} disabled={loadMoreMut.isPending} className="text-xs glass">
+                      {loadMoreMut.isPending && <Loader2 className="size-3 animate-spin mr-1" />}
+                      Load more
+                    </Button>
+                  </div>
+                )}
+              </>
+            )}
+            {tab === "images" && (
+              <ImageGrid items={images ?? []} onSelect={setDetailId} />
+            )}
+            {tab === "review" && (
+              <ReviewList items={reviews ?? []} onSelect={setDetailId} onReanalyze={(id: string) => reanalyzeMut.mutate(id)} />
+            )}
+          </div>
 
-      {/* ── ALL tab ── */}
-      {viewTab === "all" && (
-        <div className="space-y-2 animate-fade-in-up">
-          {isLoading ? (
-            <LoadingSkeleton count={8} height="h-28" />
-          ) : isEmpty ? (
-            <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">
-                {searchResults
-                  ? "No messages found matching your search."
-                  : "No captures yet."}
-              </p>
-            </div>
-          ) : (
-            <>
-              {displayMessages.map((msg) => (
-                <MessageCard
-                  key={msg.id}
-                  message={msg}
-                  onClick={setDetailId}
-                  onReanalyze={(id) => reanalyzeMut.mutate(id)}
+          {/* Right pane — detail */}
+          {detailId && (
+            <div className="hidden md:block w-1/2 lg:w-3/5 sticky top-16 self-start">
+              {detailLoading ? (
+                <GlassPanel dense className="flex items-center justify-center py-12">
+                  <Loader2 className="size-5 animate-spin text-text-secondary/60" />
+                </GlassPanel>
+              ) : detailMessage ? (
+                <MessageDetail
+                  message={detailMessage}
+                  attachments={detailAttachments}
+                  onBack={() => setDetailId(null)}
                 />
-              ))}
-              {hasMore && (
-                <div className="flex justify-center py-6">
-                  <Button
-                    variant="outline"
-                    onClick={handleLoadMore}
-                    disabled={loadMoreMut.isPending}
-                  >
-                    {loadMoreMut.isPending && (
-                      <Loader2 className="size-4 animate-spin mr-2" />
-                    )}
-                    {loadMoreMut.isPending ? "Loading…" : "Load more"}
-                  </Button>
-                </div>
-              )}
-            </>
+              ) : null}
+            </div>
           )}
         </div>
       )}
 
-      {/* ── IMAGES tab ── */}
-      {viewTab === "images" && (
-        <ImagesGrid images={images ?? []} onSelect={setDetailId} />
+      {/* Search overlay */}
+      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} onSelect={setDetailId} />
+    </div>
+  );
+}
+
+// Inline ImageGrid and ReviewList
+function ImageGrid({ items, onSelect }: { items: any[]; onSelect: (id: string) => void }) {
+  return (
+    <div className="grid grid-cols-3 gap-2">
+      {items.map((item: any) => (
+        <button key={item.id} type="button" onClick={() => onSelect(item.message_id)} className="glass rounded-lg overflow-hidden hover:scale-[1.02] transition-transform">
+          <img src={item.uploaded_url || item.discord_url} alt="" className="w-full h-24 object-cover" loading="lazy" />
+        </button>
+      ))}
+      {items.length === 0 && (
+        <div className="col-span-3 py-12 text-center text-xs text-text-secondary/40">No images</div>
       )}
+    </div>
+  );
+}
 
-      {/* ── REVIEW tab ── */}
-      {viewTab === "review" && (
-        <ReviewList
-          reviews={reviews ?? []}
-          onSelect={setDetailId}
-          onReanalyze={(id) => reanalyzeMut.mutate(id)}
-        />
+function ReviewList({ items, onSelect, onReanalyze }: { items: any[]; onSelect: (id: string) => void; onReanalyze: (id: string) => void }) {
+  return (
+    <div className="space-y-2">
+      {items.map((item: any) => (
+        <GlassCard key={item.id} variant="danger" className="p-3 cursor-pointer" onClick={() => onSelect(item.message_id)}>
+          <div className="flex items-start gap-2">
+            <Flag className="size-3.5 text-accent-purple mt-0.5 shrink-0" />
+            <div className="flex-1 min-w-0">
+              <p className="text-xs text-text-secondary line-clamp-2">{item.content || item.id}</p>
+            </div>
+          </div>
+        </GlassCard>
+      ))}
+      {items.length === 0 && (
+        <div className="py-12 text-center text-xs text-text-secondary/40">No flagged messages</div>
       )}
-
-      {/* Detail dialog */}
-      <Dialog
-        open={detailId !== null}
-        onOpenChange={(o) => !o && setDetailId(null)}
-      >
-        <DialogContent className="sm:max-w-2xl max-h-[85vh]">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <MessageSquare className="size-4" /> Message Detail
-            </DialogTitle>
-          </DialogHeader>
-          <ScrollArea className="max-h-[70vh] pr-1">
-            {detailLoading ? (
-              <div className="flex justify-center py-12">
-                <Loader2 className="size-6 animate-spin text-muted-foreground" />
-              </div>
-            ) : detailMessage ? (
-              <MessageDetailView
-                message={detailMessage}
-                attachments={detailAttachments}
-              />
-            ) : null}
-          </ScrollArea>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 }

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

@@ -1,14 +1,64 @@
 "use client";
 
-import { RecordingList } from "@/components/recordings/recording-list";
+import { useState } from "react";
+import { RecordingCard } from "@/components/recordings/recording-card";
+import { RecordingPlayer } from "@/components/recordings/recording-player";
+import { SubNav } from "@/components/layout/sub-nav";
+import { ErrorState, LoadingSkeleton } from "@/components/shared";
+import { useRecordings } from "@/hooks";
 import { useWebSocket } from "@/lib/ws/context";
 
+type RecordingsTab = "library" | "stats";
+
 export default function RecordingsPage() {
   const ws = useWebSocket();
+  const { data: recordings, isLoading, error, refetch } = useRecordings();
+  const [playingId, setPlayingId] = useState<string | null>(null);
+  const [tab, setTab] = useState<RecordingsTab>("library");
+
+  const currentTrack = playingId && recordings
+    ? recordings.find((r: any) => r.id === playingId)
+    : null;
 
   return (
-    <div className="space-y-5 animate-fade-in-up">
-      <RecordingList ws={ws} />
+    <div className="space-y-4 animate-fade-in-up">
+      <SubNav
+        tabs={[
+          { id: "library", label: "Library" },
+          { id: "stats", label: "Stats" },
+        ]}
+        activeTab={tab}
+        onTabChange={(t) => setTab(t as RecordingsTab)}
+      />
+
+      {tab === "library" && (
+        <>
+          {error ? (
+            <ErrorState message={error.message} onRetry={refetch} />
+          ) : isLoading ? (
+            <LoadingSkeleton count={4} height="h-28" />
+          ) : (
+            <div className="space-y-2">
+              {(recordings ?? []).map((rec: any) => (
+                <RecordingCard
+                  key={rec.id}
+                  recording={rec}
+                  onPlay={(id) => setPlayingId(id === playingId ? null : id)}
+                />
+              ))}
+              {(recordings ?? []).length === 0 && (
+                <div className="py-12 text-center text-sm text-text-secondary/40">No recordings yet</div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+
+      {tab === "stats" && (
+        <div className="py-12 text-center text-sm text-text-secondary/40">Recording stats coming soon</div>
+      )}
+
+      <RecordingPlayer url={currentTrack?.download_url} onClose={() => setPlayingId(null)} />
     </div>
   );
 }

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

@@ -2,18 +2,21 @@
 
 import { Moon, Server, Shield, Sun, Wifi } from "lucide-react";
 import { useEffect, useState } from "react";
+import { GlassCard } from "@/components/glass/card";
+import { GlassDivider } from "@/components/glass/divider";
+import { SubNav } from "@/components/layout/sub-nav";
 import { LoadingSkeleton } from "@/components/shared";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
 import { useConfig } from "@/hooks";
-import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
+import { cn } from "@/lib/utils";
+
+type SettingsTab = "connection" | "appearance" | "config" | "about";
 
 export default function SettingsPage() {
   const { status } = useWebSocket();
   const { data: config, isLoading: configLoading } = useConfig();
   const [theme, setTheme] = useState<"light" | "dark">("dark");
+  const [tab, setTab] = useState<SettingsTab>("connection");
 
   useEffect(() => {
     const stored = localStorage.getItem("theme") as "light" | "dark" | null;
@@ -28,147 +31,111 @@ export default function SettingsPage() {
     document.documentElement.classList.add(next);
   };
 
-  const statusCfg = {
-    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",
-    },
+  const statusDot = {
+    connected: "bg-emerald-500 shadow-[0_0_8px] shadow-emerald-500/60 animate-pulse",
+    connecting: "bg-accent-amber animate-pulse",
+    disconnected: "bg-destructive",
+    error: "bg-destructive",
+  }[status];
+
+  const statusLabel = {
+    connected: "Connected",
+    connecting: "Connecting",
+    disconnected: "Disconnected",
+    error: "Error",
   }[status];
 
   return (
-    <div className="space-y-5 animate-fade-in-up max-w-2xl">
-      <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="space-y-4 animate-fade-in-up max-w-2xl">
+      <SubNav
+        tabs={[
+          { id: "connection", label: "Connection", icon: <Wifi className="size-3" /> },
+          { id: "appearance", label: "Appearance", icon: <Sun className="size-3" /> },
+          { id: "config", label: "Config", icon: <Server className="size-3" /> },
+          { id: "about", label: "About", icon: <Shield className="size-3" /> },
+        ]}
+        activeTab={tab}
+        onTabChange={(t) => setTab(t as SettingsTab)}
+      />
+
+      {tab === "connection" && (
+        <GlassCard variant="base">
           <div className="flex items-center justify-between">
-            <span className="text-sm">WebSocket</span>
-            <Badge variant={statusCfg.variant} className="gap-1.5 px-2.5 py-1">
-              <span className={cn("size-1.5 rounded-full", statusCfg.dot)} />
-              {statusCfg.label}
-            </Badge>
-          </div>
-        </CardContent>
-      </Card>
-
-      <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>
-
-      <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 ? (
-            <LoadingSkeleton count={6} height="h-6" />
-          ) : config ? (
-            <div className="space-y-2 text-sm">
-              <CfgRow
-                label="Monitor Guild"
-                value={config.monitorGuildId ?? "Not configured"}
-              />
-              <Separator />
-              <CfgRow
-                label="Voice Guild"
-                value={config.voiceGuildId ?? "Not configured"}
-              />
-              <Separator />
-              <CfgRow
-                label="Voice Channel"
-                value={config.voiceChannelId ?? "Not configured"}
-              />
-              <Separator />
-              <CfgRow
-                label="AI Analysis"
-                value={config.aiAnalysisEnabled ? "Enabled" : "Disabled"}
-              />
-              <Separator />
-              <CfgRow
-                label="Auto-Delete Flagged"
-                value={config.autoDeleteFlaggedEnabled ? "Enabled" : "Disabled"}
-              />
+            <div>
+              <span className="text-sm font-semibold text-text-primary">WebSocket</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className={cn("size-2 rounded-full", statusDot)} />
+              <span className="text-xs font-mono text-text-secondary">{statusLabel}</span>
             </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              Unable to load configuration.
-            </p>
-          )}
-        </CardContent>
-      </Card>
-
-      <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">Discord Automod</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>
+        </GlassCard>
+      )}
+
+      {tab === "appearance" && (
+        <GlassCard variant="base">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              {theme === "dark" ? <Moon className="size-4 text-primary" /> : <Sun className="size-4 text-primary" />}
+              <span className="text-sm font-semibold text-text-primary">Theme</span>
+            </div>
+            <button
+              type="button"
+              onClick={toggleTheme}
+              className="flex items-center gap-2 px-3 py-1.5 rounded-md glass hover:glass-elevated transition-all text-xs"
+            >
+              <span className="font-mono">{theme}</span>
+            </button>
+          </div>
+        </GlassCard>
+      )}
+
+      {tab === "config" && (
+        <GlassCard variant="base">
+          <div className="space-y-3">
+            {configLoading ? (
+              <LoadingSkeleton count={6} height="h-6" />
+            ) : config ? (
+              <>
+                <ConfigRow label="Monitor Guild" value={config.monitorGuildId || "Not configured"} />
+                <GlassDivider />
+                <ConfigRow label="Voice Guild" value={config.voiceGuildId || "Not configured"} />
+                <GlassDivider />
+                <ConfigRow label="Voice Channel" value={config.voiceChannelId || "Not configured"} />
+                <GlassDivider />
+                <ConfigRow label="AI Analysis" value={config.aiAnalysisEnabled ? "Enabled" : "Disabled"} />
+                <GlassDivider />
+                <ConfigRow label="Auto-Delete Flagged" value={config.autoDeleteFlaggedEnabled ? "Enabled" : "Disabled"} />
+              </>
+            ) : (
+              <p className="text-xs text-text-secondary/60">Unable to load config.</p>
+            )}
+          </div>
+        </GlassCard>
+      )}
+
+      {tab === "about" && (
+        <GlassCard variant="base">
+          <div className="space-y-2">
+            <h2 className="text-base font-bold text-primary">Discord Automod</h2>
+            <p className="text-xs text-text-secondary/80 leading-relaxed">
+              AI-powered message moderation, voice recording, and real-time monitoring for Discord communities.
+            </p>
+            <div className="text-[10px] font-mono text-text-secondary/40 mt-4">
+              v0.1.0
+            </div>
+          </div>
+        </GlassCard>
+      )}
     </div>
   );
 }
 
-function CfgRow({ label, value }: { label: string; value: string }) {
+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 className="flex items-center justify-between py-0.5">
+      <span className="text-xs text-text-secondary">{label}</span>
+      <span className="text-[11px] font-mono text-text-primary/80 max-w-[240px] truncate text-right">{value}</span>
     </div>
   );
 }

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

@@ -1,20 +1,15 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-
-import { ActiveSpeakersPanel } from "@/components/voice/active-speakers-panel";
-import { MicrophoneCard } from "@/components/voice/microphone-card";
-import { VoiceConnectionCard } from "@/components/voice/voice-connection-card";
-import {
-  useGuilds,
-  useMicTransmit,
-  useSpeakers,
-  useVoiceChannels,
-  useVoiceConnect,
-  useVoiceDisconnect,
-  useVoiceStatus,
-} from "@/hooks";
+import { VoiceConnectionCard } from "@/components/voice/connection-card";
+import { SpeakerWaveform } from "@/components/voice/speaker-waveform";
+import { MicControl } from "@/components/voice/mic-control";
+import { VoiceActivityTimeline } from "@/components/voice/activity-timeline";
+import { SubNav } from "@/components/layout/sub-nav";
 import { useWebSocket } from "@/lib/ws/context";
+import { useGuilds, useMicTransmit, useSpeakers, useVoiceChannels, useVoiceConnect, useVoiceDisconnect, useVoiceStatus } from "@/hooks";
+
+type VoiceTab = "connection" | "activity";
 
 export default function VoicePage() {
   const ws = useWebSocket();
@@ -28,21 +23,14 @@ export default function VoicePage() {
   const micMut = useMicTransmit();
   const [selectedChannel, setSelectedChannel] = useState("");
   const [micActive, setMicActive] = useState(false);
+  const [volume, setVolume] = useState(75);
+  const [tab, setTab] = useState<VoiceTab>("connection");
 
   useEffect(() => {
     const unsub = subscribe(ws);
     return () => unsub();
   }, [ws, subscribe]);
 
-  const handleGuildChange = useCallback((guildId: string | null) => {
-    if (!guildId) {
-      setSelectedGuild("");
-      setSelectedChannel("");
-      return;
-    }
-    setSelectedGuild(guildId);
-  }, []);
-
   const handleMicToggle = useCallback(
     async (checked: boolean) => {
       setMicActive(checked);
@@ -59,25 +47,44 @@ export default function VoicePage() {
   const connected = voiceStatus?.connected ?? false;
 
   return (
-    <div className="space-y-5 animate-fade-in-up">
+    <div className="space-y-4 animate-fade-in-up">
+      <SubNav
+        tabs={[
+          { id: "connection", label: "Connection" },
+          { id: "activity", label: "Activity" },
+        ]}
+        activeTab={tab}
+        onTabChange={(t) => setTab(t as VoiceTab)}
+      />
+
       <VoiceConnectionCard
-        selectedGuild={selectedGuild}
-        onGuildChange={handleGuildChange}
-        selectedChannel={selectedChannel}
-        onChannelChange={(v) => setSelectedChannel(v)}
-        guilds={guilds}
-        voiceChannels={voiceChannels}
         connected={connected}
         activeChannelName={voiceStatus?.activeChannelName}
-        connectMut={connectMut}
-        disconnectMut={disconnectMut}
-      />
-      <ActiveSpeakersPanel activeSpeakers={activeSpeakers} />
-      <MicrophoneCard
-        connected={connected}
-        micActive={micActive}
-        onMicToggle={handleMicToggle}
+        guilds={guilds}
+        voiceChannels={voiceChannels}
+        selectedGuild={selectedGuild}
+        selectedChannel={selectedChannel}
+        onGuildChange={(g) => { setSelectedGuild(g ?? ""); setSelectedChannel(""); }}
+        onChannelChange={(v) => setSelectedChannel(v ?? "")}
+        onConnect={() => connectMut.mutate({ guildId: selectedGuild, channelId: selectedChannel })}
+        onDisconnect={() => disconnectMut.mutate(undefined)}
+        connecting={connectMut.isPending}
       />
+
+      {tab === "connection" && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <SpeakerWaveform speakers={activeSpeakers} />
+          <MicControl
+            connected={connected}
+            active={micActive}
+            onToggle={handleMicToggle}
+            volume={volume}
+            onVolumeChange={setVolume}
+          />
+        </div>
+      )}
+
+      {tab === "activity" && <VoiceActivityTimeline />}
     </div>
   );
 }

services/frontend/src/app/globals.css

@@ -5,282 +5,106 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-geist-mono);
-  --font-heading: var(--font-sans);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
+  /* Canvas — deep navy */
+  --color-canvas: oklch(0.07 0.015 250);
+  --color-surface: oklch(0.11 0.02 245 / 0.6);
+  --color-surface-hover: oklch(0.15 0.02 245 / 0.7);
 
-  /* Teal-cyan accent gradient for monitoring hub look */
-  --accent-gradient: linear-gradient(135deg, oklch(0.62 0.17 215), oklch(0.6 0.15 195), oklch(0.65 0.12 185));
-  --accent-gradient-subtle: linear-gradient(135deg, oklch(0.62 0.17 215 / 0.15), oklch(0.65 0.12 185 / 0.05));
+  /* Glass */
+  --color-glass-bg: oklch(1 0 0 / 0.04);
+  --color-glass-border: oklch(1 0 0 / 0.08);
+  --glass-shadow: 0 8px 32px oklch(0 0 0 / 0.4);
 
-  /* Glass morphism */
-  --glass-bg: oklch(1 0 0 / 0.05);
-  --glass-border: oklch(1 0 0 / 0.1);
-  --glass-shadow: 0 8px 32px oklch(0 0 0 / 0.3);
+  /* Primary — teal-cyan */
+  --color-primary: oklch(0.62 0.17 215);
+  --color-primary-glow: oklch(0.62 0.17 215 / 0.4);
+  --color-primary-foreground: oklch(0.98 0 0);
+  --color-border: oklch(1 0 0 / 0.06);
+  --color-border-glow: oklch(0.62 0.17 215 / 0.3);
+
+  /* Accents */
+  --color-accent-purple: oklch(0.65 0.2 280);
+  --color-accent-amber: oklch(0.7 0.17 75);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-success: oklch(0.6 0.18 160);
+
+  /* Text */
+  --color-text-primary: oklch(0.93 0.01 245);
+  --color-text-secondary: oklch(0.55 0.02 245);
+  --color-text-mono: oklch(0.62 0.17 215);
+
+  /* Legacy overrides for shadcn compatibility */
+  --color-background: var(--color-canvas);
+  --color-foreground: var(--color-text-primary);
+  --color-card: var(--color-surface);
+  --color-card-foreground: var(--color-text-primary);
+  --color-muted: oklch(0.17 0.015 245);
+  --color-muted-foreground: var(--color-text-secondary);
+  --color-accent: var(--color-primary);
+  --color-accent-foreground: var(--color-primary-foreground);
+
+  /* Radius */
+  --radius-card: 16px;
+  --radius-panel: 12px;
+  --radius-control: 8px;
+  --radius-pill: 9999px;
+  --radius: 0.625rem; /* shadcn compat */
+
+  /* Fonts */
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
 }
 
-:root {
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.55 0.18 240);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.95 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.65 0.15 220);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --warning: oklch(0.7 0.18 75);
-  --warning-foreground: oklch(0.98 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.55 0.18 240);
-  --chart-1: oklch(0.55 0.18 240);
-  --chart-2: oklch(0.55 0.15 200);
-  --chart-3: oklch(0.55 0.12 180);
-  --chart-4: oklch(0.55 0.2 260);
-  --chart-5: oklch(0.55 0.15 280);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.55 0.18 240);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.95 0 0);
-  --sidebar-accent-foreground: oklch(0.145 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.55 0.18 240);
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-}
-
-.dark {
-  /* Deeper navy canvas — monitoring hub feel */
-  --background: oklch(0.09 0.015 245);
-  --foreground: oklch(0.93 0.01 245);
-
-  /* Card surface with subtle separation */
-  --card: oklch(0.13 0.02 245);
-  --card-foreground: oklch(0.93 0.01 245);
-
-  --popover: oklch(0.13 0.02 245);
-  --popover-foreground: oklch(0.93 0.01 245);
-
-  /* Teal-cyan primary */
-  --primary: oklch(0.62 0.17 215);
-  --primary-foreground: oklch(0.98 0 0);
-
-  --secondary: oklch(0.2 0.015 245);
-  --secondary-foreground: oklch(0.93 0.01 245);
-
-  --muted: oklch(0.17 0.015 245);
-  --muted-foreground: oklch(0.55 0.02 245);
-
-  /* Electric blue-purple accent */
-  --accent: oklch(0.7 0.18 260);
-  --accent-foreground: oklch(0.98 0 0);
-
-  --destructive: oklch(0.6 0.22 25);
-
-  /* Amber-gold warning (distinct from red) */
-  --warning: oklch(0.7 0.17 75);
-  --warning-foreground: oklch(0.12 0 0);
-
-  --border: oklch(1 0 0 / 0.06);
-  --input: oklch(1 0 0 / 0.1);
-
-  --ring: oklch(0.62 0.17 215);
-
-  /* Teal-cyan chart palette */
-  --chart-1: oklch(0.62 0.17 215);
-  --chart-2: oklch(0.6 0.15 195);
-  --chart-3: oklch(0.65 0.12 185);
-  --chart-4: oklch(0.7 0.18 260);
-  --chart-5: oklch(0.55 0.15 280);
-
-  /* Deeper sidebar with teal accent */
-  --sidebar: oklch(0.075 0.01 245);
-  --sidebar-foreground: oklch(0.93 0.01 245);
-  --sidebar-primary: oklch(0.62 0.17 215);
-  --sidebar-primary-foreground: oklch(0.98 0 0);
-  --sidebar-accent: oklch(0.16 0.025 215);
-  --sidebar-accent-foreground: oklch(0.93 0.01 245);
-  --sidebar-border: oklch(1 0 0 / 0.04);
-  --sidebar-ring: oklch(0.62 0.17 215);
-
-  /* Glass overrides for dark */
-  --glass-bg: oklch(1 0 0 / 0.04);
-  --glass-border: oklch(1 0 0 / 0.08);
+@layer utilities {
+  .glass {
+    background: var(--color-glass-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--color-glass-border);
+    box-shadow: var(--glass-shadow);
+  }
+  .glass-elevated {
+    background: var(--color-glass-bg);
+    backdrop-filter: blur(16px);
+    border: 1px solid var(--color-border-glow);
+    box-shadow: 0 8px 32px oklch(0 0 0 / 0.5), 0 0 20px var(--color-primary-glow);
+  }
+  .glass-intense {
+    background: oklch(1 0 0 / 0.08);
+    backdrop-filter: blur(20px);
+    border: 1px solid oklch(1 0 0 / 0.12);
+  }
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
+  * { @apply border-border; }
   body {
-    @apply bg-background text-foreground;
-    background-image: radial-gradient(circle, oklch(1 0 0 / 0.025) 1px, transparent 1px);
-    background-size: 24px 24px;
-  }
-  html {
-    @apply font-sans scroll-smooth;
-  }
-
-  /* Custom selection color */
-  ::selection {
-    background: oklch(0.62 0.17 215 / 0.3);
-    color: inherit;
-  }
-
-  .dark ::selection {
-    background: oklch(0.62 0.17 215 / 0.4);
-  }
-
-  /* Scrollbar styling */
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: oklch(1 0 0 / 0.1);
-    border-radius: 999px;
-  }
-  ::-webkit-scrollbar-thumb:hover {
-    background: oklch(1 0 0 / 0.2);
+    @apply bg-canvas text-text-primary font-sans antialiased;
+    background-image:
+      radial-gradient(circle, oklch(1 0 0 / 0.025) 1px, transparent 1px),
+      radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.62 0.17 215 / 0.06), transparent),
+      radial-gradient(ellipse 50% 40% at 80% 80%, oklch(0.65 0.2 280 / 0.04), transparent);
+    background-size: 24px 24px, 100% 100%, 100% 100%;
   }
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.1); border-radius: 999px; }
+  ::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.2); }
 }
 
-/* ── Utility classes ─────────────────────────── */
-
-/* Glass card effect */
-.glass {
-  background: var(--glass-bg);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-}
-
-/* Gradient text */
-.text-gradient {
-  background: var(--accent-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* Gradient border (via pseudo-element trick) */
-.gradient-border {
-  position: relative;
-}
-.gradient-border::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background: var(--accent-gradient);
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-}
-
-/* Animated background */
-@keyframes gradient-shift {
-  0%,
-  100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-}
-
-.animate-gradient {
-  background: linear-gradient(
-    -45deg,
-    oklch(0.65 0.18 240 / 0.1),
-    oklch(0.6 0.15 200 / 0.05),
-    oklch(0.12 0.02 240 / 1),
-    oklch(0.65 0.12 180 / 0.08)
-  );
-  background-size: 400% 400%;
-  animation: gradient-shift 15s ease infinite;
-}
-
-/* Counter animation placeholder - will be done in JS */
-@keyframes fade-in-up {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-fade-in-up {
-  animation: fade-in-up 0.3s ease-out forwards;
-}
-
-/* Pulse ring for live indicators */
 @keyframes pulse-ring {
-  0% {
-    transform: scale(0.8);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(2.5);
-    opacity: 0;
-  }
+  0% { transform: scale(0.8); opacity: 1; }
+  100% { transform: scale(2.5); opacity: 0; }
+}
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 }
 
-.live-pulse-ring {
-  animation: pulse-ring 1.5s ease-out infinite;
-}
+.animate-fade-in-up { animation: fade-in-up 0.3s ease-out forwards; }
+.animate-pulse-ring { animation: pulse-ring 1.5s ease-out infinite; }
+.animate-shimmer { background: linear-gradient(90deg, transparent, oklch(0.62 0.17 215 / 0.08), transparent); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

services/frontend/src/app/layout.tsx

@@ -1,23 +1,22 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter, JetBrains_Mono } from "next/font/google";
 import Script from "next/script";
 import { Toaster } from "@/components/ui/sonner";
-import { TooltipProvider } from "@/components/ui/tooltip";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const inter = Inter({
   subsets: ["latin"],
+  variable: "--font-inter",
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
   subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
 });
 
 export const metadata: Metadata = {
   title: "Discord Automod — Moderation Dashboard",
-  description: "Live Discord monitoring and AI moderation dashboard",
+  description: "AI-powered Discord moderation and voice monitoring dashboard",
 };
 
 export default function RootLayout({
@@ -28,7 +27,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${inter.variable} ${jetbrainsMono.variable} dark h-full antialiased`}
       suppressHydrationWarning
     >
       <head>
@@ -37,7 +36,7 @@ export default function RootLayout({
         </Script>
       </head>
       <body className="min-h-full flex flex-col">
-        <TooltipProvider delay={500}>{children}</TooltipProvider>
+        {children}
         <Toaster position="bottom-right" richColors closeButton />
       </body>
     </html>

services/frontend/src/app/page.tsx

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