feat(dashboard): message activity timeline + moderation donut

Backend:
- GET /api/dashboard/activity?days=1..90 — daily buckets (messages,
  flagged, active_users) + hourly distribution last 24h
- clamped days param, reuses existing indexes (idx_messages_created,
  ai_status_created)

Frontend:
- ActivityChart: area chart messages+flagged per day, 7/14/30d range
- HourlyActivityChart: 24h bars with peak highlight
- ModerationDonut: clean/flagged/warned/error breakdown with live
  summary line (server X% clean)
- Dashboard layout: activity 2/3 + donut 1/3, hourly + top channels

Verified: endpoint returns real data from prod DB (784/1897/8 msgs
per day), tsc clean backend+frontend.

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

@@ -9,19 +9,34 @@ import {
   Users,
 } from "lucide-react";
 import { useState } from "react";
+import { ActivityChart } from "@/components/dashboard/activity-chart";
 import { ChannelsSection } from "@/components/dashboard/channels-section";
+import { HourlyActivityChart } from "@/components/dashboard/hourly-activity-chart";
+import { ModerationDonut } from "@/components/dashboard/moderation-donut";
 import { StatCard } from "@/components/dashboard/stat-card";
 import { TopChannelsChart } from "@/components/dashboard/top-channels-chart";
 import { UsersSection } from "@/components/dashboard/users-section";
 import { SubNav } from "@/components/layout/sub-nav";
 import { ErrorState, LoadingSkeleton } from "@/components/shared";
-import { useStats } from "@/hooks";
+import { useActivity, useStats } from "@/hooks";
+import { cn } from "@/lib/utils";
 
 type DashboardTab = "stats" | "users" | "channels";
 
+const DAY_RANGES = [7, 14, 30] as const;
+
+const MODERATION_COLORS: Record<string, string> = {
+  Clean: "oklch(0.72 0.16 155)",
+  Flagged: "oklch(0.62 0.19 25)",
+  Warned: "oklch(0.78 0.15 80)",
+  Error: "oklch(0.55 0.02 245)",
+};
+
 export default function DashboardPage() {
   const [tab, setTab] = useState<DashboardTab>("stats");
+  const [days, setDays] = useState<number>(14);
   const { data: stats, isLoading, error, mutate: refetch } = useStats();
+  const { data: activity, isLoading: activityLoading } = useActivity(days);
 
   const subNavTabs = [
     { id: "stats", label: "Stats", icon: <Hash className="size-3" /> },
@@ -29,6 +44,31 @@ export default function DashboardPage() {
     { id: "channels", label: "Channels", icon: <Hash className="size-3" /> },
   ];
 
+  const moderationData = stats
+    ? [
+        {
+          name: "Clean",
+          value: stats.total_clean,
+          color: MODERATION_COLORS.Clean,
+        },
+        {
+          name: "Flagged",
+          value: stats.total_flagged,
+          color: MODERATION_COLORS.Flagged,
+        },
+        {
+          name: "Warned",
+          value: stats.total_warned,
+          color: MODERATION_COLORS.Warned,
+        },
+        {
+          name: "Error",
+          value: stats.total_error,
+          color: MODERATION_COLORS.Error,
+        },
+      ].filter((d) => d.value > 0)
+    : [];
+
   return (
     <div className="space-y-4 animate-fade-in-up">
       <SubNav
@@ -80,12 +120,50 @@ export default function DashboardPage() {
                 />
               </div>
 
-              <TopChannelsChart
-                data={stats.top_channels.map((c) => ({
-                  name: c.channel_name ?? c.channel_id,
-                  count: c.message_count,
-                }))}
-              />
+              <div className="flex items-center justify-end gap-1">
+                {DAY_RANGES.map((range) => (
+                  <button
+                    key={range}
+                    type="button"
+                    onClick={() => setDays(range)}
+                    className={cn(
+                      "px-2.5 py-1 text-[10px] font-medium uppercase tracking-wide rounded-md transition-colors",
+                      days === range
+                        ? "bg-primary/20 text-primary"
+                        : "text-text-secondary/60 hover:text-text-primary",
+                    )}
+                  >
+                    {range}d
+                  </button>
+                ))}
+              </div>
+
+              <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
+                <div className="xl:col-span-2">
+                  {activityLoading ? (
+                    <LoadingSkeleton count={1} height="h-56" />
+                  ) : (
+                    <ActivityChart data={activity?.daily} />
+                  )}
+                </div>
+                <ModerationDonut data={moderationData} />
+              </div>
+
+              <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
+                <div className="xl:col-span-2">
+                  {activityLoading ? (
+                    <LoadingSkeleton count={1} height="h-40" />
+                  ) : (
+                    <HourlyActivityChart data={activity?.hourly} />
+                  )}
+                </div>
+                <TopChannelsChart
+                  data={stats.top_channels.map((c) => ({
+                    name: c.channel_name ?? c.channel_id,
+                    count: c.message_count,
+                  }))}
+                />
+              </div>
             </>
           )}
         </div>