feat: rewrite dashboard as Ops Center with stats, live, and activity tabs

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

services/frontend/src/components/dashboard/live-stream.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { GlassCard } from "@/components/glass/card";
+import { useWebSocket } from "@/lib/ws/context";
+import { cn } from "@/lib/utils";
+
+interface LiveMessage {
+  id: string;
+  content: string;
+  username: string;
+  channelName?: string;
+  timestamp: string;
+  flagged?: boolean;
+}
+
+export function LiveStream() {
+  const [messages, setMessages] = useState<LiveMessage[]>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const ws = useWebSocket();
+
+  useEffect(() => {
+    const unsub = ws.on("message_created", (data: any) => {
+      const msg: LiveMessage = {
+        id: data.id,
+        content: data.content || "(attachment)",
+        username: data.username || "unknown",
+        channelName: data.channelName,
+        timestamp: new Date().toLocaleTimeString(),
+        flagged: data.ai_status === "flagged" || data.ai_status === "warn",
+      };
+      setMessages((prev) => [msg, ...prev].slice(0, 50));
+    });
+    return () => unsub();
+  }, [ws]);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+  }, [messages]);
+
+  return (
+    <GlassCard variant="base" className="p-0 overflow-hidden">
+      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-glass-border">
+        <span className="relative flex size-2">
+          <span className="absolute inline-flex size-full rounded-full bg-emerald-500 opacity-75 animate-pulse-ring" />
+          <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
+        </span>
+        <span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
+          Live Stream
+        </span>
+      </div>
+      <div ref={scrollRef} className="overflow-y-auto max-h-[320px] space-y-0.5 p-2">
+        {messages.length === 0 ? (
+          <div className="flex items-center justify-center py-8 text-text-secondary/40 text-xs">
+            Waiting for messages...
+          </div>
+        ) : (
+          messages.map((msg) => (
+            <div
+              key={msg.id}
+              className={cn(
+                "flex items-start gap-2 px-3 py-2 rounded-md text-sm transition-all",
+                msg.flagged
+                  ? "bg-destructive/5 border-l-2 border-destructive/40"
+                  : "hover:bg-glass-bg",
+              )}
+            >
+              <span className="font-medium text-xs shrink-0 text-primary">
+                {msg.username}
+              </span>
+              <span className="text-xs text-text-secondary truncate flex-1">
+                {msg.content}
+              </span>
+              <span className="text-[10px] text-text-secondary/40 shrink-0">
+                {msg.timestamp}
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+    </GlassCard>
+  );
+}

services/frontend/src/components/dashboard/mod-queue.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { AlertCircle, Check, Trash2 } from "lucide-react";
+import { GlassCard } from "@/components/glass/card";
+import { cn } from "@/lib/utils";
+
+interface ModQueueItem {
+  id: string;
+  content: string;
+  username: string;
+  severity: "low" | "medium" | "high" | "critical";
+  reason: string;
+}
+
+export function ModQueue({ items = [] }: { items?: ModQueueItem[] }) {
+  const severityColor = {
+    low: "text-accent-amber border-accent-amber/30",
+    medium: "text-accent-purple border-accent-purple/30",
+    high: "text-destructive border-destructive/40",
+    critical: "text-destructive border-destructive/60 bg-destructive/10",
+  };
+
+  return (
+    <GlassCard variant="base" className="p-0 overflow-hidden">
+      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-glass-border">
+        <AlertCircle className="size-3.5 text-accent-purple" />
+        <span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
+          Mod Queue
+        </span>
+        {items.length > 0 && (
+          <span className="ml-auto text-[10px] font-mono text-accent-amber">
+            {items.length} pending
+          </span>
+        )}
+      </div>
+      <div className="overflow-y-auto max-h-[320px] space-y-1 p-2">
+        {items.length === 0 ? (
+          <div className="flex items-center justify-center py-8 text-text-secondary/40 text-xs">
+            No flagged messages
+          </div>
+        ) : (
+          items.map((item) => (
+            <div
+              key={item.id}
+              className={cn(
+                "px-3 py-2 rounded-md border-l-2 text-sm space-y-1 hover:bg-glass-bg transition-colors",
+                severityColor[item.severity],
+              )}
+            >
+              <div className="flex items-center gap-2">
+                <span className="font-medium text-xs text-text-primary">{item.username}</span>
+                <span className="text-[10px] font-mono uppercase text-text-secondary/60">{item.severity}</span>
+              </div>
+              <p className="text-xs text-text-secondary line-clamp-1">{item.content}</p>
+              <p className="text-[10px] text-text-secondary/50">{item.reason}</p>
+              <div className="flex gap-1 pt-1">
+                <button type="button" className="size-6 flex items-center justify-center rounded bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/20 text-xs">
+                  <Check className="size-3" />
+                </button>
+                <button type="button" className="size-6 flex items-center justify-center rounded bg-destructive/10 text-destructive hover:bg-destructive/20 text-xs">
+                  <Trash2 className="size-3" />
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </GlassCard>
+  );
+}