chore(auto): task completed - unknown

services/backend/src/modules/dashboard/dashboard.repository.ts

@@ -156,6 +156,149 @@ export class DashboardRepository {
     return { data, nextCursor };
   }
 
+  async listChannels(query: ListUsersQuery & { guildId?: string }) {
+    const pool = getPool();
+    const limit = query.limit ?? 20;
+    const conditions: string[] = [];
+    const params: unknown[] = [];
+    let paramIdx = 1;
+
+    if (query.search) {
+      conditions.push(
+        `(m.channel_id ILIKE $${paramIdx} OR m.channel_name ILIKE $${paramIdx})`,
+      );
+      params.push(`%${query.search}%`);
+      paramIdx++;
+    }
+
+    if (query.guildId) {
+      conditions.push(`m.guild_id = $${paramIdx}`);
+      params.push(query.guildId);
+      paramIdx++;
+    }
+
+    const whereClause =
+      conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
+
+    const { rows } = await pool.query(
+      `
+      SELECT
+        m.channel_id,
+        m.channel_name,
+        m.guild_id,
+        m.total_messages,
+        m.flagged_count,
+        m.last_message_at,
+        c.culture_summary,
+        c.last_analyzed_at
+      FROM (
+        SELECT
+          channel_id,
+          guild_id,
+          COALESCE(NULLIF((metadata::jsonb -> 'channel' ->> 'channelName'), ''), channel_id) AS channel_name,
+          COUNT(*)::int AS total_messages,
+          COUNT(*) FILTER (WHERE ai_status = 'flagged')::int AS flagged_count,
+          MAX(created_at) AS last_message_at
+        FROM messages
+        GROUP BY channel_id, guild_id, (metadata::jsonb -> 'channel' ->> 'channelName')
+      ) m
+      LEFT JOIN channel_cultures c ON c.channel_id = m.channel_id
+      ${whereClause}
+      ORDER BY m.total_messages DESC
+      LIMIT $${paramIdx}
+      `,
+      [...params, limit + 1],
+    );
+
+    const data = ((rows as Record<string, unknown>[]) || []).slice(0, limit).map((r) => ({
+      channel_id: String(r.channel_id),
+      channel_name: r.channel_name as string | null,
+      guild_id: r.guild_id as string | null,
+      total_messages: Number(r.total_messages),
+      flagged_count: Number(r.flagged_count),
+      last_message_at: r.last_message_at ? Number(r.last_message_at) : null,
+      culture_summary: r.culture_summary as string | null,
+      last_analyzed_at: r.last_analyzed_at
+        ? Number(r.last_analyzed_at)
+        : null,
+    }));
+
+    const lastRow = rows[limit - 1] as Record<string, unknown> | undefined;
+    const nextCursor =
+      rows.length > limit
+        ? String(lastRow?.total_messages ?? "")
+        : null;
+
+    return { data, nextCursor };
+  }
+
+  async getChannelDetail(channelId: string) {
+    const pool = getPool();
+
+    const channelResult = await pool.query(
+      `
+      SELECT
+        m.channel_id,
+        m.channel_name,
+        m.guild_id,
+        m.total_messages,
+        m.flagged_count,
+        m.clean_count,
+        c.culture_summary,
+        c.last_analyzed_at
+      FROM (
+        SELECT
+          channel_id,
+          guild_id,
+          COALESCE(NULLIF((metadata::jsonb -> 'channel' ->> 'channelName'), ''), channel_id) AS channel_name,
+          COUNT(*)::int AS total_messages,
+          COUNT(*) FILTER (WHERE ai_status = 'flagged')::int AS flagged_count,
+          COUNT(*) FILTER (WHERE ai_status = 'clean')::int AS clean_count
+        FROM messages
+        WHERE channel_id = $1
+        GROUP BY channel_id, guild_id, (metadata::jsonb -> 'channel' ->> 'channelName')
+      ) m
+      LEFT JOIN channel_cultures c ON c.channel_id = m.channel_id
+      `,
+      [channelId],
+    );
+
+    const row = channelResult.rows[0] as Record<string, unknown> | undefined;
+    if (!row) return null;
+
+    const recent = await pool.query(
+      `
+      SELECT id, content, channel_id, created_at, ai_status, username
+      FROM messages
+      WHERE channel_id = $1
+      ORDER BY created_at DESC
+      LIMIT 20
+      `,
+      [channelId],
+    );
+
+    return {
+      channel_id: String(row.channel_id),
+      channel_name: row.channel_name as string | null,
+      guild_id: row.guild_id as string | null,
+      total_messages: Number(row.total_messages),
+      flagged_count: Number(row.flagged_count),
+      clean_count: Number(row.clean_count),
+      culture_summary: row.culture_summary as string | null,
+      last_analyzed_at: row.last_analyzed_at
+        ? Number(row.last_analyzed_at)
+        : null,
+      recent_messages: (recent.rows as Record<string, unknown>[]).map((r) => ({
+        id: String(r.id),
+        content: String(r.content),
+        channel_id: String(r.channel_id),
+        created_at: Number(r.created_at),
+        ai_status: r.ai_status as string | null,
+        username: r.username as string | null,
+      })),
+    };
+  }
+
   async getUserDetail(userId: string) {
     const pool = getPool();
 

services/backend/src/modules/dashboard/dashboard.routes.ts

@@ -48,5 +48,36 @@ export function createDashboardRouter(): Router {
     }),
   );
 
+  // GET /api/dashboard/channels — paginated channel list with culture summaries
+  router.get(
+    "/dashboard/channels",
+    asyncHandler(async (req: Request, res: Response) => {
+      const limit = Number(req.query.limit) || 20;
+      const search =
+        typeof req.query.search === "string" ? req.query.search : undefined;
+      const guildId =
+        typeof req.query.guild_id === "string"
+          ? req.query.guild_id
+          : undefined;
+
+      const result = await dashboardService.listChannels({
+        limit,
+        search,
+        guildId,
+      });
+      res.json(result);
+    }),
+  );
+
+  // GET /api/dashboard/channels/:channelId — single channel detail
+  router.get(
+    "/dashboard/channels/:channelId",
+    asyncHandler(async (req: Request, res: Response) => {
+      const channelId = String(req.params.channelId);
+      const detail = await dashboardService.getChannelDetail(channelId);
+      res.json(detail);
+    }),
+  );
+
   return router;
 }

services/backend/src/modules/dashboard/dashboard.service.ts

@@ -24,6 +24,16 @@ export class DashboardService {
     logger.debug({ userId }, "Fetching user detail");
     return dashboardRepository.getUserDetail(userId);
   }
+
+  async listChannels(query: { limit: number; search?: string; guildId?: string }) {
+    logger.debug({ query }, "Listing dashboard channels");
+    return dashboardRepository.listChannels(query);
+  }
+
+  async getChannelDetail(channelId: string) {
+    logger.debug({ channelId }, "Fetching channel detail");
+    return dashboardRepository.getChannelDetail(channelId);
+  }
 }
 
 export const dashboardService = new DashboardService();

services/frontend/src/features/dashboard/components/ChannelProfileDetail.tsx

@@ -0,0 +1,247 @@
+import { motion } from "framer-motion";
+import { AlertCircle, ArrowLeft, Hash, RefreshCw } from "lucide-react";
+import type { DashboardChannelDetail } from "../../../shared/api/client";
+import {
+  cardItem,
+  cardStagger,
+} from "../../../shared/hooks/useFramerStagger";
+import { cn } from "../../../shared/lib/utils";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Skeleton,
+} from "../../../shared/ui";
+
+interface ChannelProfileDetailProps {
+  detail: DashboardChannelDetail | null;
+  loading: boolean;
+  error: string | null;
+  onBack: () => void;
+  onRefetch: () => void;
+}
+
+export function ChannelProfileDetail({
+  detail,
+  loading,
+  error,
+  onBack,
+  onRefetch,
+}: ChannelProfileDetailProps) {
+  return (
+    <motion.div
+      className="grid gap-6"
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+    >
+      {/* Back button */}
+      <motion.div variants={cardItem}>
+        <button
+          onClick={onBack}
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="h-4 w-4" /> Back to channels
+        </button>
+      </motion.div>
+
+      {/* Loading */}
+      {loading && <DetailSkeleton />}
+
+      {/* Error */}
+      {error && (
+        <motion.div
+          variants={cardItem}
+          className="flex flex-col items-center gap-4 py-20 text-muted-foreground"
+        >
+          <AlertCircle className="h-10 w-10 text-destructive" />
+          <p className="text-sm">{error}</p>
+          <button
+            onClick={onRefetch}
+            className="inline-flex items-center gap-1.5 rounded-xl border border-border px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
+          >
+            <RefreshCw className="h-4 w-4" /> Retry
+          </button>
+        </motion.div>
+      )}
+
+      {detail && !error && (
+        <>
+          {/* Channel header */}
+          <motion.div variants={cardItem}>
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-start gap-4">
+                  <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-border">
+                    <Hash className="h-8 w-8 text-muted-foreground" />
+                  </div>
+
+                  <div className="min-w-0 flex-1">
+                    <h2 className="text-lg font-bold">
+                      #{detail.channel_name ?? detail.channel_id}
+                    </h2>
+                    <p className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
+                      {detail.channel_id}
+                    </p>
+
+                    <div className="mt-3 flex flex-wrap items-center gap-2">
+                      {detail.flagged_count > 0 && (
+                        <Badge variant="destructive">
+                          {detail.flagged_count} flagged
+                        </Badge>
+                      )}
+                      {detail.culture_summary && (
+                        <Badge variant="default">AI Profile</Badge>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Culture summary */}
+                {detail.culture_summary && (
+                  <div className="mt-4 rounded-lg bg-muted/50 p-3">
+                    <p className="text-xs font-medium text-muted-foreground mb-1">
+                      AI Channel Summary
+                    </p>
+                    <p className="text-sm whitespace-pre-wrap">
+                      {detail.culture_summary}
+                    </p>
+                    {detail.last_analyzed_at && (
+                      <p className="mt-1 text-[11px] text-muted-foreground">
+                        Last analyzed:{" "}
+                        {new Date(detail.last_analyzed_at).toLocaleString()}
+                      </p>
+                    )}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          {/* Stats grid */}
+          <motion.div variants={cardItem} className="grid gap-4 sm:grid-cols-3">
+            <Card>
+              <CardContent className="p-4 text-center">
+                <p className="text-2xl font-bold text-primary">
+                  {detail.total_messages.toLocaleString()}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Total Messages
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="p-4 text-center">
+                <p className="text-2xl font-bold text-emerald-600">
+                  {detail.clean_count.toLocaleString()}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">Clean</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="p-4 text-center">
+                <p
+                  className={cn(
+                    "text-2xl font-bold",
+                    detail.flagged_count > 0
+                      ? "text-destructive"
+                      : "text-muted-foreground",
+                  )}
+                >
+                  {detail.flagged_count.toLocaleString()}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">Flagged</p>
+              </CardContent>
+            </Card>
+          </motion.div>
+
+          {/* Recent messages */}
+          <motion.div variants={cardItem}>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-primary">Recent Messages</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {detail.recent_messages.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">
+                    No messages found.
+                  </p>
+                ) : (
+                  <div className="space-y-2 max-h-80 overflow-y-auto">
+                    {detail.recent_messages.map((msg) => (
+                      <div
+                        key={msg.id}
+                        className="rounded-lg border border-border p-3 text-sm"
+                      >
+                        <div className="flex items-start justify-between gap-2">
+                          <p className="line-clamp-2 flex-1 break-words text-xs text-foreground">
+                            {msg.content}
+                          </p>
+                          {msg.ai_status && (
+                            <span
+                              className={cn(
+                                "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium",
+                                msg.ai_status === "flagged"
+                                  ? "bg-red-100 text-red-700"
+                                  : msg.ai_status === "clean"
+                                    ? "bg-emerald-100 text-emerald-700"
+                                    : msg.ai_status === "warn"
+                                      ? "bg-amber-100 text-amber-700"
+                                      : "bg-muted text-muted-foreground",
+                              )}
+                            >
+                              {msg.ai_status}
+                            </span>
+                          )}
+                        </div>
+                        <p className="mt-1 text-[10px] text-muted-foreground">
+                          {msg.username ?? "unknown"} ·{" "}
+                          {new Date(msg.created_at).toLocaleString()}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </motion.div>
+        </>
+      )}
+    </motion.div>
+  );
+}
+
+function DetailSkeleton() {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex items-start gap-4">
+            <Skeleton className="h-16 w-16 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-5 w-40" />
+              <Skeleton className="h-3 w-60" />
+              <div className="flex gap-2 mt-2">
+                <Skeleton className="h-5 w-20 rounded-full" />
+                <Skeleton className="h-5 w-24 rounded-full" />
+              </div>
+            </div>
+          </div>
+          <Skeleton className="mt-4 h-20 w-full rounded-lg" />
+        </CardContent>
+      </Card>
+      <div className="grid gap-4 sm:grid-cols-3">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Card key={i}>
+            <CardContent className="p-4 text-center space-y-1">
+              <Skeleton className="mx-auto h-7 w-16" />
+              <Skeleton className="mx-auto h-3 w-20" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

services/frontend/src/features/dashboard/components/ChannelSummaryList.tsx

@@ -0,0 +1,186 @@
+import { motion } from "framer-motion";
+import {
+  AlertCircle,
+  Hash,
+  Loader2,
+  RefreshCw,
+  Search,
+} from "lucide-react";
+import type { DashboardChannel } from "../../../shared/api/client";
+import { cardItem, cardStagger } from "../../../shared/hooks/useFramerStagger";
+import { cn } from "../../../shared/lib/utils";
+import {
+  Card,
+  CardContent,
+  Input,
+  Skeleton,
+} from "../../../shared/ui";
+
+interface ChannelSummaryListProps {
+  channels: DashboardChannel[];
+  loading: boolean;
+  error: string | null;
+  search: string;
+  onSearchChange: (value: string) => void;
+  onLoadMore: () => void;
+  hasMore: boolean;
+  onRefetch: () => void;
+  onSelectChannel: (channelId: string) => void;
+}
+
+export function ChannelSummaryList({
+  channels,
+  loading,
+  error,
+  search,
+  onSearchChange,
+  onLoadMore,
+  hasMore,
+  onRefetch,
+  onSelectChannel,
+}: ChannelSummaryListProps) {
+  return (
+    <motion.div
+      className="grid gap-6"
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+    >
+      {/* Search bar */}
+      <motion.div variants={cardItem} className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-primary" />
+          <Input
+            className="pl-9 rounded-full focus-visible:ring-primary"
+            placeholder="Search by channel name or ID..."
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+          />
+        </div>
+      </motion.div>
+
+      {/* Error state */}
+      {error && (
+        <motion.div
+          variants={cardItem}
+          className="flex flex-col items-center gap-4 py-10 text-muted-foreground"
+        >
+          <AlertCircle className="h-10 w-10 text-destructive" />
+          <p className="text-sm">{error}</p>
+          <button
+            onClick={onRefetch}
+            className="inline-flex items-center gap-1.5 rounded-xl border border-border px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
+          >
+            <RefreshCw className="h-4 w-4" /> Retry
+          </button>
+        </motion.div>
+      )}
+
+      {/* Loading state */}
+      {loading && channels.length === 0 && !error && <ChannelListSkeleton />}
+
+      {/* Empty state */}
+      {!loading && !error && channels.length === 0 && (
+        <motion.div
+          variants={cardItem}
+          className="flex flex-col items-center gap-4 py-20 text-muted-foreground"
+        >
+          <Hash className="h-10 w-10" />
+          <p className="text-sm">No channels found.</p>
+        </motion.div>
+      )}
+
+      {/* Channel cards */}
+      {channels.length > 0 && (
+        <motion.div variants={cardItem} className="grid gap-3 sm:grid-cols-2">
+          {channels.map((ch) => (
+            <button
+              key={ch.channel_id}
+              onClick={() => onSelectChannel(ch.channel_id)}
+              className="group w-full text-left"
+            >
+              <Card className="transition-all hover:ring-1 hover:ring-primary/30 cursor-pointer">
+                <CardContent className="p-4">
+                  <div className="flex items-start gap-3">
+                    {/* Icon */}
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted">
+                      <Hash className="h-5 w-5 text-muted-foreground" />
+                    </div>
+
+                    {/* Info */}
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="truncate text-sm font-semibold">
+                          #{ch.channel_name ?? ch.channel_id}
+                        </span>
+                        {ch.flagged_count > 0 && (
+                          <span className="shrink-0 rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-medium text-red-700">
+                            {ch.flagged_count} flagged
+                          </span>
+                        )}
+                      </div>
+
+                      {ch.culture_summary && (
+                        <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                          {ch.culture_summary}
+                        </p>
+                      )}
+
+                      <div className="mt-1.5 flex items-center gap-3 text-[11px] text-muted-foreground">
+                        <span>{ch.total_messages} messages</span>
+                        {ch.last_message_at && (
+                          <span>
+                            Last{" "}
+                            {new Date(ch.last_message_at).toLocaleDateString()}
+                          </span>
+                        )}
+                        {ch.culture_summary && (
+                          <span className="text-emerald-600">AI Summary</span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </button>
+          ))}
+        </motion.div>
+      )}
+
+      {/* Load more */}
+      {hasMore && (
+        <motion.div variants={cardItem} className="flex justify-center">
+          <button
+            onClick={onLoadMore}
+            disabled={loading}
+            className="inline-flex items-center gap-2 rounded-xl border border-border px-6 py-2 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-50"
+          >
+            {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+            {loading ? "Loading..." : "Load More"}
+          </button>
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}
+
+function ChannelListSkeleton() {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <Card key={i}>
+          <CardContent className="p-4">
+            <div className="flex items-start gap-3">
+              <Skeleton className="h-10 w-10 rounded-full" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-3 w-full" />
+                <Skeleton className="h-3 w-24" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

services/frontend/src/features/dashboard/hooks/useDashboard.ts

@@ -1,10 +1,14 @@
 import { useCallback, useEffect, useState } from "react";
 import {
+  type DashboardChannel,
+  type DashboardChannelDetail,
   type DashboardStats,
   type DashboardUser,
   type DashboardUserDetail,
+  getDashboardChannelDetail,
   getDashboardStats,
   getDashboardUserDetail,
+  listDashboardChannels,
   listDashboardUsers,
 } from "../../../shared/api/client";
 
@@ -133,3 +137,97 @@ export function useDashboardUserDetail(userId: string | null) {
 
   return { detail, loading, error, refetch: fetch };
 }
+
+/**
+ * Fetch paginated channel list with optional search.
+ */
+export function useDashboardChannels() {
+  const [channels, setChannels] = useState<DashboardChannel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+
+  const fetchChannels = useCallback(
+    async (cursor?: string) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await listDashboardChannels({
+          limit: 20,
+          search: search || undefined,
+        });
+        if (cursor) {
+          setChannels((prev) => [...prev, ...result.data]);
+        } else {
+          setChannels(result.data);
+        }
+        setNextCursor(result.nextCursor);
+      } catch (e) {
+        const msg = e instanceof Error ? e.message : "Failed to load channels";
+        setError(msg);
+        logger.error("[useDashboardChannels]", msg);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [search],
+  );
+
+  useEffect(() => {
+    fetchChannels().catch(() => undefined);
+  }, [fetchChannels]);
+
+  const loadMore = useCallback(() => {
+    if (nextCursor && !loading) {
+      fetchChannels(nextCursor).catch(() => undefined);
+    }
+  }, [nextCursor, loading, fetchChannels]);
+
+  return {
+    channels,
+    loading,
+    error,
+    search,
+    setSearch,
+    loadMore,
+    hasMore: !!nextCursor,
+    refetch: () => fetchChannels().catch(() => undefined),
+  };
+}
+
+/**
+ * Fetch a single channel detail by channelId.
+ */
+export function useDashboardChannelDetail(channelId: string | null) {
+  const [detail, setDetail] = useState<DashboardChannelDetail | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetch = useCallback(async () => {
+    if (!channelId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await getDashboardChannelDetail(channelId);
+      if (!data) {
+        setError("Channel not found");
+        return;
+      }
+      setDetail(data);
+    } catch (e) {
+      const msg =
+        e instanceof Error ? e.message : "Failed to load channel detail";
+      setError(msg);
+      logger.error("[useDashboardChannelDetail]", msg);
+    } finally {
+      setLoading(false);
+    }
+  }, [channelId]);
+
+  useEffect(() => {
+    fetch().catch(() => undefined);
+  }, [fetch]);
+
+  return { detail, loading, error, refetch: fetch };
+}

services/frontend/src/features/dashboard/index.tsx

@@ -1,9 +1,13 @@
 import { useState } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../shared/ui";
+import { ChannelProfileDetail } from "./components/ChannelProfileDetail";
+import { ChannelSummaryList } from "./components/ChannelSummaryList";
 import { DashboardStatsContent } from "./components/DashboardStats";
 import { UserProfileDetail } from "./components/UserProfileDetail";
 import { UserSummaryList } from "./components/UserSummaryList";
 import {
+  useDashboardChannelDetail,
+  useDashboardChannels,
   useDashboardUserDetail,
   useDashboardUsers,
 } from "./hooks/useDashboard";
@@ -11,34 +15,68 @@ import {
 export function DashboardPanel() {
   const [activeTab, setActiveTab] = useState("stats");
   const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+  const [selectedChannelId, setSelectedChannelId] = useState<string | null>(
+    null,
+  );
   const {
     users,
     loading: usersLoading,
     error: usersError,
-    search,
+    search: userSearch,
-    setSearch,
+    setSearch: setUserSearch,
-    loadMore,
+    loadMore: loadMoreUsers,
-    hasMore,
+    hasMore: hasMoreUsers,
     refetch: refetchUsers,
   } = useDashboardUsers();
   const {
-    detail,
+    detail: userDetail,
-    loading: detailLoading,
+    loading: userDetailLoading,
-    error: detailError,
+    error: userDetailError,
-    refetch: refetchDetail,
+    refetch: refetchUserDetail,
   } = useDashboardUserDetail(selectedUserId);
+  const {
+    channels,
+    loading: channelsLoading,
+    error: channelsError,
+    search: channelSearch,
+    setSearch: setChannelSearch,
+    loadMore: loadMoreChannels,
+    hasMore: hasMoreChannels,
+    refetch: refetchChannels,
+  } = useDashboardChannels();
+  const {
+    detail: channelDetail,
+    loading: channelDetailLoading,
+    error: channelDetailError,
+    refetch: refetchChannelDetail,
+  } = useDashboardChannelDetail(selectedChannelId);
 
   // Show user detail view
   if (selectedUserId) {
     return (
       <UserProfileDetail
-        detail={detail}
+        detail={userDetail}
-        loading={detailLoading}
+        loading={userDetailLoading}
-        error={detailError}
+        error={userDetailError}
         onBack={() => {
           setSelectedUserId(null);
         }}
-        onRefetch={refetchDetail}
+        onRefetch={refetchUserDetail}
+      />
+    );
+  }
+
+  // Show channel detail view
+  if (selectedChannelId) {
+    return (
+      <ChannelProfileDetail
+        detail={channelDetail}
+        loading={channelDetailLoading}
+        error={channelDetailError}
+        onBack={() => {
+          setSelectedChannelId(null);
+        }}
+        onRefetch={refetchChannelDetail}
       />
     );
   }
@@ -48,6 +86,7 @@ export function DashboardPanel() {
       <TabsList className="mb-6">
         <TabsTrigger value="stats">Stats</TabsTrigger>
         <TabsTrigger value="users">Users</TabsTrigger>
+        <TabsTrigger value="channels">Channels</TabsTrigger>
       </TabsList>
 
       <TabsContent value="stats">
@@ -59,14 +98,28 @@ export function DashboardPanel() {
           users={users}
           loading={usersLoading}
           error={usersError}
-          search={search}
+          search={userSearch}
-          onSearchChange={setSearch}
+          onSearchChange={setUserSearch}
-          onLoadMore={loadMore}
+          onLoadMore={loadMoreUsers}
-          hasMore={hasMore}
+          hasMore={hasMoreUsers}
           onRefetch={refetchUsers}
           onSelectUser={setSelectedUserId}
         />
       </TabsContent>
+
+      <TabsContent value="channels">
+        <ChannelSummaryList
+          channels={channels}
+          loading={channelsLoading}
+          error={channelsError}
+          search={channelSearch}
+          onSearchChange={setChannelSearch}
+          onLoadMore={loadMoreChannels}
+          hasMore={hasMoreChannels}
+          onRefetch={refetchChannels}
+          onSelectChannel={setSelectedChannelId}
+        />
+      </TabsContent>
     </Tabs>
   );
 }

services/frontend/src/shared/api/client.ts

@@ -336,6 +336,51 @@ export function getDashboardUserDetail(
   return request<DashboardUserDetail>(`/api/dashboard/users/${userId}`);
 }
 
+// ─── Dashboard Channels ─────────────────────────────────────────────────────────
+
+export interface DashboardChannel {
+  channel_id: string;
+  channel_name: string | null;
+  guild_id: string | null;
+  total_messages: number;
+  flagged_count: number;
+  last_message_at: number | null;
+  culture_summary: string | null;
+  last_analyzed_at: number | null;
+}
+
+export interface DashboardChannelDetail extends DashboardChannel {
+  clean_count: number;
+  recent_messages: Array<{
+    id: string;
+    content: string;
+    channel_id: string;
+    created_at: number;
+    ai_status: string | null;
+    username: string | null;
+  }>;
+}
+
+export function listDashboardChannels(
+  params: { limit?: number; search?: string; guild_id?: string } = {},
+): Promise<{ data: DashboardChannel[]; nextCursor: string | null }> {
+  const sp = new URLSearchParams();
+  if (params.limit) sp.set("limit", String(params.limit));
+  if (params.search) sp.set("search", params.search);
+  if (params.guild_id) sp.set("guild_id", params.guild_id);
+  return request<{ data: DashboardChannel[]; nextCursor: string | null }>(
+    `/api/dashboard/channels?${sp}`,
+  );
+}
+
+export function getDashboardChannelDetail(
+  channelId: string,
+): Promise<DashboardChannelDetail> {
+  return request<DashboardChannelDetail>(
+    `/api/dashboard/channels/${channelId}`,
+  );
+}
+
 // ─── UI State ────────────────────────────────────────────────────────────────
 
 export function getUIState(): Promise<UIState> {