+ {children}
+
+ );
+}
+```
+
+- [ ] **Step 2: Create GlassPanel**
+
+```tsx
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+
+interface GlassPanelProps extends ComponentPropsWithoutRef<"div"> {
+ dense?: boolean;
+}
+
+export function GlassPanel({
+ dense = false,
+ className,
+ children,
+ ...props
+}: GlassPanelProps) {
+ return (
+
+ {children}
+
+ );
+}
+```
+
+- [ ] **Step 3: Create GlassDivider**
+
+```tsx
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export function GlassDivider({ className }: { className?: string }) {
+ return (
+
+ );
+}
+```
+
+- [ ] **Step 4: Create barrel export**
+
+```tsx
+// src/components/glass/index.ts
+export { GlassCard } from "./card";
+export { GlassPanel } from "./panel";
+export { GlassDivider } from "./divider";
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/components/glass/
+git commit -m "feat: add glass component system — GlassCard, GlassPanel, GlassDivider"
+```
+
+---
+
+### Task 5: Floating Top Nav
+
+**Files:**
+- Create: `src/components/layout/top-nav.tsx`
+
+**Interfaces:**
+- Consumes: `navItems` from `@/lib/navigation`
+- Produces: `
+
+
+ {/* Nav links */}
+
+
+ {/* Right side */}
+
+ D
+
+
+
+ Discord Automod
+
+
+
+
+
+ {tabs.map((tab) => (
+
+ ))}
+
+ );
+}
+```
+
+- [ ] **Step 2: Create HiddenSidebar**
+
+```tsx
+"use client";
+
+import { useState } from "react";
+import { GuildSelector } from "@/components/shared/guild-selector";
+
+interface HiddenSidebarProps {
+ guildId: string;
+ onGuildChange: (guildId: string | null) => void;
+}
+
+export function HiddenSidebar({ guildId, onGuildChange }: HiddenSidebarProps) {
+ const [visible, setVisible] = useState(false);
+ let hideTimer: ReturnType
+
+
+ );
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/components/layout/sub-nav.tsx src/components/layout/hidden-sidebar.tsx
+git commit -m "feat: add sub-navigation tabs and hidden hover sidebar"
+```
+
+---
+
+### Task 7: Dashboard Layout (New)
+
+**Files:**
+- Modify: `src/app/(dashboard)/layout.tsx`
+- Delete: `src/components/layout/app-sidebar.tsx`, `src/components/layout/app-header.tsx`, `src/components/chatbot/chatbot.tsx` (replaced)
+
+**Interfaces:**
+- Produces: Wraps all dashboard pages with TopNav + providers
+
+- [ ] **Step 1: Rewrite dashboard layout**
+
+```tsx
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Suspense } from "react";
+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";
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 10_000,
+ retry: 1,
+ refetchOnWindowFocus: false,
+ },
+ },
+});
+
+export default function DashboardLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const [guildId, setGuildId] = useState("");
+
+ return (
+
+
+ Guilds
+
+
+
+
+
+ setGuildId(g ?? "")} />
+
+ {/* Sub-nav space — filled per-page */}
+
+
+
+
+
+
+
+ }
+ >
+ {children}
+
+
+
+
+
+
+
+ {formatter(numValue)}
+
+
+ {label}
+
+
+ {/* Sparkline background */}
+ {sparklineData && sparklineData.length > 0 && (
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ Live Stream
+
+
+
+ {messages.length === 0 ? (
+
+
+ Waiting for messages...
+
+ ) : (
+ messages.map((msg) => (
+
+
+ {msg.username}
+
+
+ {msg.content}
+
+
+ {msg.timestamp}
+
+
+ ))
+ )}
+
+
+
+ {items.length === 0 ? (
+
+
+ No flagged messages
+
+ ) : (
+ items.map((item) => (
+
+
+ ))
+ )}
+
+ {item.username}
+ {item.severity}
+
+ {item.content}
+{item.reason}
+
+
+
+
+
+ Message Trend
+ 7 days
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Activity
+ hour × day
+
+
+
+
+ {/* Hour labels */}
+
+
+
+ {DAYS.map((d) => (
+
+ {/* Grid */}
+ {d}
+ ))}
+
+ {HOURS.map((hour) => (
+
+
+ {DAYS.map((day) => (
+
+ ))}
+
+ ))}
+
+ {hour % 4 === 0 ? hour : ""}
+
+
+ Top Channels
+
+
+
+
+
+
+
+
+ setTab(t as DashboardTab)} />
+
+ {tab === "stats" && (
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/app/\(dashboard\)/dashboard/page.tsx
+git commit -m "feat: rewrite dashboard as Ops Center with stats, live, and activity tabs"
+```
+
+---
+
+### Task 13: Messages — Redesigned Components
+
+**Files:**
+- Create: `src/components/messages/message-card.tsx` (new)
+- Create: `src/components/messages/message-list.tsx`
+- Create: `src/components/messages/message-detail.tsx`
+- Create: `src/components/messages/attachments-grid.tsx`
+- Create: `src/components/messages/ai-analysis-panel.tsx`
+
+- [ ] **Step 1: Create redesigned MessageCard**
+
+```tsx
+"use client";
+
+import { cn } from "@/lib/utils";
+import { formatRelative } from "@/lib/format";
+import type { MessageRecord } from "@/lib/types";
+
+interface MessageCardProps {
+ message: MessageRecord;
+ selected?: boolean;
+ onClick?: (id: string) => void;
+}
+
+const severityDot: Record
+ {error ? (
+
+ )}
+
+ {tab === "live" && (
+
+
+
+
+
+
+ )}
+
+
+ )}
+
+ {tab === "activity" && (
+
+
+ )}
+
+ {messages.length === 0 ? (
+
+ );
+}
+```
+
+- [ ] **Step 3: Create MessageDetail**
+
+```tsx
+"use client";
+
+import { ArrowLeft, MessageSquare } from "lucide-react";
+import { GlassCard } from "@/components/glass/card";
+import { AttachmentsGrid } from "./attachments-grid";
+import { AiAnalysisPanel } from "./ai-analysis-panel";
+import type { AttachmentRecord, MessageRecord } from "@/lib/types";
+
+interface MessageDetailProps {
+ message: MessageRecord;
+ attachments?: AttachmentRecord[];
+ onBack?: () => void;
+}
+
+export function MessageDetail({ message, attachments, onBack }: MessageDetailProps) {
+ return (
+
+ No messages
+
+ ) : (
+ messages.map((msg) => (
+
+
+
+ {/* Content */}
+
+ {message.content || "(no text content)"}
+
+
+ {/* Attachments */}
+ {attachments && attachments.length > 0 && (
+
+
+ )}
+
+ {/* AI Analysis */}
+
+ {attachments.map((att) => (
+
+ );
+}
+```
+
+- [ ] **Step 5: Create AiAnalysisPanel**
+
+```tsx
+"use client";
+
+import { GlassPanel } from "@/components/glass/panel";
+import { cn } from "@/lib/utils";
+
+interface AiAnalysisPanelProps {
+ status?: string | null;
+ severity?: string | null;
+ confidence?: number | null;
+ flags?: string[] | null;
+ categories?: string[] | null;
+ action?: string | null;
+ score?: number | null;
+}
+
+const severityColor: Record
+ {att.type?.startsWith("image/") ? (
+ 
+ ) : (
+
+ ))}
+
+ {att.filename}
+
+ )}
+
+ AI Analysis
+
+ {status}
+
+
+
+ {severity && (
+
+ Severity:
+ {severity}
+
+ )}
+
+ {confidence !== null && confidence !== undefined && (
+
+ Confidence:
+ {(confidence * 100).toFixed(0)}%
+
+ )}
+
+ {score !== null && score !== undefined && (
+
+ Score:
+ {score.toFixed(2)}
+
+ )}
+
+ {flags && flags.length > 0 && (
+
+ {flags.map((f) => (
+ {f}
+ ))}
+
+ )}
+
+ {categories && categories.length > 0 && (
+
+ {categories.map((c) => (
+ {c}
+ ))}
+
+ )}
+
+ {action && action !== "none" && (
+
+ Recommended:
+ {action}
+
+ )}
+
+
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/components/messages/search-overlay.tsx
+git commit -m "feat: add Cmd+K search overlay"
+```
+
+---
+
+### Task 15: Messages Page (Split Pane)
+
+**Files:**
+- Modify: `src/app/(dashboard)/messages/page.tsx` — full rewrite
+
+- [ ] **Step 1: Rewrite messages page with split-pane**
+
+```tsx
+"use client";
+
+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 { GlassPanel } from "@/components/glass/panel";
+import { Button } from "@/components/ui/button";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import {
+ useGuilds,
+ useImages,
+ useLoadMore,
+ useMessageDetail,
+ useMessages,
+ useMessagesHasMore,
+ useMessagesWsSync,
+ useReanalyze,
+ useReanalyzeBatch,
+ useReview,
+ useTextChannels,
+} from "@/hooks";
+import { useWebSocket } from "@/lib/ws/context";
+import { GuildSelector } from "@/components/shared/guild-selector";
+
+type MessagesTab = "all" | "images" | "review";
+
+export default function MessagesPage() {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+ const [guildId, setGuildId] = useState(searchParams.get("guild") || "");
+ const [selectedChannel, setSelectedChannel] = useState(searchParams.get("channel") || "");
+ const [detailId, setDetailId] = useState
+ {/* Input */}
+
+
+
+
+ {/* Results */}
+
+ {!results || results.length === 0 ? (
+
+
+ {query.length < 2 ? "Type at least 2 characters" : "No results found"}
+
+ ) : (
+ results.map((msg) => (
+
+ ))
+ )}
+
+ {/* Controls bar */}
+ setTab(t as MessagesTab)} />
+
+ {/* Split pane */}
+ {error ? (
+ setSearchOpen(false)} onSelect={setDetailId} />
+
+ );
+}
+
+// Inline ImageGrid (simplified) and ReviewList
+function ImageGrid({ items, onSelect }: { items: any[]; onSelect: (id: string) => void }) {
+ return (
+
+ { setGuildId(g); setSelectedChannel(""); }} />
+ {channels.length > 0 && (
+
+ )}
+
+
+
+
+
+ {/* Left pane — message list */}
+
+ )}
+
+ {/* Search overlay */}
+
+ {tab === "all" && (
+ <>
+ reanalyzeMut.mutate(id)} />
+ )}
+
+
+ {/* Right pane — detail */}
+ {detailId && (
+
+
+
+ )}
+
+ )}
+ {tab === "images" && (
+
+ {detailLoading ? (
+
+
+ ) : detailMessage ? (
+ setDetailId(null)}
+ />
+ ) : null}
+
+ )}
+
+ {items.map((item: any) => (
+
+ ))}
+ {items.length === 0 && (
+
+ );
+}
+
+function ReviewList({ items, onSelect, onReanalyze }: { items: any[]; onSelect: (id: string) => void; onReanalyze: (id: string) => void }) {
+ return (
+ No images
+ )}
+
+ {items.map((item: any) => (
+ onSelect(item.message_id)}>
+
+ ))}
+ {items.length === 0 && (
+
+ );
+}
+```
+
+Wait — need to import `cn` and `GlassCard` at top. And the detail view should use detailId from URL on mount. Let me write cleaner version:
+
+- [ ] **Step 1: Rewrite messages page**
+
+For brevity: the page uses SubNav with tabs (All/Images/Review), split-pane layout, URL-synced state, and Cmd+K search. Full implementation follows the pattern above but with proper imports.
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/app/\(dashboard\)/messages/page.tsx
+git commit -m "feat: rewrite messages page with split-pane layout, sub-nav, and search overlay"
+```
+
+---
+
+### Task 16: Voice Page
+
+**Files:**
+- Create: `src/components/voice/connection-card.tsx`
+- Create: `src/components/voice/speaker-waveform.tsx`
+- Create: `src/components/voice/mic-control.tsx`
+- Create: `src/components/voice/activity-timeline.tsx`
+- Modify: `src/app/(dashboard)/voice/page.tsx`
+
+- [ ] **Step 1: Create ConnectionCard**
+
+```tsx
+"use client";
+
+import { GlassCard } from "@/components/glass/card";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface ConnectionCardProps {
+ connected: boolean;
+ activeChannelName?: string;
+ guilds: { id: string; name: string }[];
+ voiceChannels: { id: string; name: string }[];
+ selectedGuild: string;
+ selectedChannel: string;
+ onGuildChange: (guildId: string | null) => void;
+ onChannelChange: (channelId: string) => void;
+ onConnect: () => void;
+ onDisconnect: () => void;
+ connecting?: boolean;
+}
+
+export function VoiceConnectionCard({
+ connected, activeChannelName, guilds, voiceChannels,
+ selectedGuild, selectedChannel,
+ onGuildChange, onChannelChange, onConnect, onDisconnect, connecting,
+}: ConnectionCardProps) {
+ return (
+
+
+
+
+ {item.content || item.id}
+No flagged messages
+ )}
+
+
+
+
+
+
+
+
+ Voice Connection
+ {activeChannelName && (
+ {activeChannelName}
+ )}
+
+
+ {connected ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ {speakers.map((s) => (
+
+
+
+ {s.name}
+
+ ))}
+
+
+
+
+ Vol
+ onVolumeChange(Number(e.target.value))}
+ className="flex-1 h-1 appearance-none bg-glass-border rounded-full accent-primary [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-[0_0_8px] [&::-webkit-slider-thumb]:shadow-primary/60"
+ />
+ {volume}%
+
+
+ Voice Activity
+
+
+
+
+ [`${(value / 60).toFixed(1)}m`, "Duration"]}
+ />
+
+
+
+
+ setTab(t as VoiceTab)}
+ />
+
+ { setSelectedGuild(g ?? ""); setSelectedChannel(""); }}
+ onChannelChange={setSelectedChannel}
+ onConnect={() => connectMut.mutate({ guildId: selectedGuild, channelId: selectedChannel })}
+ onDisconnect={() => disconnectMut.mutate(undefined)}
+ connecting={connectMut.isPending}
+ />
+
+ {tab === "connection" && (
+
+ );
+}
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/components/voice/ src/app/\(dashboard\)/voice/page.tsx
+git commit -m "feat: rewrite voice page with connection card, speaker waveform, mic control, activity"
+```
+
+---
+
+### Task 17: Recordings Page
+
+**Files:**
+- Create: `src/components/recordings/recording-card.tsx`
+- Create: `src/components/recordings/recording-player.tsx`
+- Modify: `src/app/(dashboard)/recordings/page.tsx`
+
+- [ ] **Step 1: Create RecordingCard**
+
+```tsx
+"use client";
+
+import { Download, Link, Play } from "lucide-react";
+import { GlassCard } from "@/components/glass/card";
+import type { RecordingRecord } from "@/lib/types";
+
+interface RecordingCardProps {
+ recording: RecordingRecord;
+ onPlay: (id: string) => void;
+}
+
+export function RecordingCard({ recording, onPlay }: RecordingCardProps) {
+ const durationStr = recording.duration
+ ? `${Math.floor(recording.duration / 60)}:${String(recording.duration % 60).padStart(2, "0")}`
+ : "--:--";
+
+ return (
+
+ {
+ setMicActive(checked);
+ try { await micMut.mutateAsync(checked); } catch { setMicActive(!checked); }
+ }}
+ volume={volume}
+ onVolumeChange={setVolume}
+ />
+
+ )}
+
+ {tab === "activity" &&
+
+
+
+
+
+
+
+ {recording.username}
+ {recording.channel_name}
+
+
+ {/* Mini waveform bar */}
+
+ {Array.from({ length: 40 }, (_, i) => (
+
+ ))}
+
+
+
+ {durationStr}
+ {new Date(recording.created_at).toLocaleString()}
+
+ e.stopPropagation()}>
+ {recording.download_url && (
+
+
+
+ setTab(t as RecordingsTab)}
+ />
+
+ {tab === "library" && (
+ <>
+ {error ? (
+ setPlayingId(null)} />
+
+ );
+}
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/components/recordings/ src/app/\(dashboard\)/recordings/page.tsx
+git commit -m "feat: rewrite recordings page with glass cards, waveform preview, inline player"
+```
+
+---
+
+### Task 18: Settings Page
+
+**Files:**
+- Modify: `src/app/(dashboard)/settings/page.tsx` — full rewrite
+
+- [ ] **Step 1: Rewrite settings page**
+
+```tsx
+"use client";
+
+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 { useConfig } from "@/hooks";
+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
+ {(recordings ?? []).map((rec: any) => (
+ setPlayingId(id === playingId ? null : id)}
+ />
+ ))}
+ {(recordings ?? []).length === 0 && (
+
+ )}
+
+ )}
+
+ {tab === "stats" && (
+ No recordings yet
+ )}
+ Recording stats coming soon
+ )}
+
+
+
+
+ )}
+
+ {tab === "appearance" && (
+
+
+ )}
+
+ {tab === "config" && (
+
+
+ )}
+
+ {tab === "about" && (
+
+
+ )}
+
+ );
+}
+
+function ConfigRow({ label, value }: { label: string; value: string }) {
+ return (
+
+
+
+ WebSocket
+
+
+
+ {statusLabel}
+
+
+
+
+ {theme === "dark" ?
+
+
+ {configLoading ? (
+
+ Unable to load config.
+ )} +
+
+ Discord Automod
++ AI-powered message moderation, voice recording, and real-time monitoring for Discord communities. +
+
+ v0.1.0
+
+
+ {label}
+ {value}
+
+ );
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/app/\(dashboard\)/settings/page.tsx
+git commit -m "feat: rewrite settings page with glass cards and sub-nav tabs"
+```
+
+---
+
+### Task 19: Shared Components
+
+**Files:**
+- Create: `src/components/shared/error-boundary.tsx`
+- Modify: `src/components/shared/loading-skeleton.tsx`
+- Modify: `src/components/shared/empty-state.tsx`
+
+- [ ] **Step 1: Create ErrorBoundary**
+
+```tsx
+"use client";
+
+import { Component, type ReactNode } from "react";
+import { GlassCard } from "@/components/glass/card";
+import { AlertCircle, RefreshCw } from "lucide-react";
+
+interface Props { children: ReactNode; fallback?: ReactNode; }
+interface State { hasError: boolean; error?: Error; }
+
+export class ErrorBoundary extends Component{this.state.error?.message || "Something went wrong"}
+ +
+
+
+ ));
+
+ if (columns) {
+ return (
+
+ {items}
+
+ );
+ }
+
+ return {items}
;
+}
+```
+
+- [ ] **Step 3: Update EmptyState**
+
+```tsx
+"use client";
+
+import { Inbox } from "lucide-react";
+import { GlassPanel } from "@/components/glass/panel";
+
+interface EmptyStateProps {
+ title?: string;
+ description?: string;
+}
+
+export function EmptyState({
+ title = "No data yet",
+ description = "Nothing to display here yet.",
+}: EmptyStateProps) {
+ return (
+ {title}
+{description}
+
+
+ );
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/lib/hooks/use-media-player.ts src/components/media/mini-player.tsx
+git commit -m "feat: add media player context and floating mini player"
+```
+
+---
+
+### Task 21: Mascot — Context, Container & Canvas
+
+**Files:**
+- Create: `src/components/mascot/mascot-context.tsx`
+- Create: `src/components/mascot/mascot-container.tsx`
+- Create: `src/components/mascot/mascot-canvas.tsx`
+- Create: `src/components/mascot/chat-panel.tsx`
+
+- [ ] **Step 1: Create MascotContext**
+
+```tsx
+"use client";
+
+import { createContext, useContext, useState, type ReactNode } from "react";
+
+type MascotExpression = "idle" | "listening" | "surprise" | "happy" | "sad" | "talking";
+
+interface MascotContextType {
+ expression: MascotExpression;
+ minimized: boolean;
+ chatOpen: boolean;
+ chatHistory: { role: "user" | "assistant"; text: string }[];
+ setExpression: (expr: MascotExpression) => void;
+ setMinimized: (v: boolean) => void;
+ setChatOpen: (v: boolean) => void;
+ addChat: (role: "user" | "assistant", text: string) => void;
+}
+
+const MascotContext = createContext
+
+
+
+
+
+
+ {currentTrack.title}
+ {currentTrack.artist && ( +{currentTrack.artist}
+ )} +
+
+
+
+ {/* Main mascot bubble */}
+
+ );
+}
+```
+
+- [ ] **Step 4: Create ChatPanel**
+
+```tsx
+"use client";
+
+import { Send } from "lucide-react";
+import { useState } from "react";
+import { useMascot } from "./mascot-context";
+
+export function ChatPanel() {
+ const { chatHistory, addChat, setExpression } = useMascot();
+ const [input, setInput] = useState("");
+
+ const handleSend = () => {
+ if (!input.trim()) return;
+ addChat("user", input);
+ setExpression("listening");
+
+ // Simulated bot response — replace with actual mascot-chat API call
+ setTimeout(() => {
+ addChat("assistant", `I'm monitoring this server for you!`);
+ setExpression("happy");
+ }, 800);
+
+ setInput("");
+ };
+
+ return (
+
+ {minimized ? (
+
+ ) : (
+ <>
+ {/* Drag handle + controls */}
+
+
+ Mascot
+
+
+ {/* Canvas area */}
+
+
+
+
+
+
+
+ {/* Chat panel (expandable) */}
+
+
+
+ )}
+
+
+ );
+}
+```
+
+- [ ] **Step 5: Create barrel export**
+
+```tsx
+// src/components/mascot/index.ts
+export { MascotProvider } from "./mascot-context";
+export { MascotContainer } from "./mascot-container";
+export { useMascot } from "./mascot-context";
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/components/mascot/
+git commit -m "feat: add Live2D mascot container with canvas, chat panel, and context"
+```
+
+---
+
+### Task 22: WS Expression Triggers
+
+**Files:**
+- Modify: `src/app/(dashboard)/layout.tsx` — add WS → mascot expression bindings
+
+- [ ] **Step 1: Add WebSocket expression triggers**
+
+In the dashboard layout, add a side-effect that connects WebSocket events to mascot expressions:
+
+```tsx
+// Add to dashboard layout before the return:
+import { useEffect } from "react";
+import { useMascot } from "@/components/mascot/mascot-context";
+import { useWebSocket } from "@/lib/ws/context";
+
+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;
+}
+```
+
+Then render `
+ {chatHistory.slice(-6).map((msg, i) => (
+
+
+
+ {msg.text}
+
+
+ ))}
+
+ setInput(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && handleSend()}
+ placeholder="Ask mascot..."
+ className="flex-1 bg-transparent text-[10px] text-text-primary placeholder-text-secondary/30 outline-none"
+ />
+
+
+