refactor(fe): align dashboard with backend & gateway data flow

- API/WS clients: same-origin by default, drop dead imphnen hardcode
- chatbot history: map BE rows {user_message,bot_response,created_at}
- message_deleted WS payload: object {id,deleted_at}, not bare string
- dashboard: wire top-channels chart + live mod queue from /api/review,
  add Users & Channels tabs consuming /api/dashboard/users|channels
- recordings: live WS sync via voice_recording_uploaded; duration_bytes optional
- remove dead widgets with no BE data source (trend chart, heatmap)

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

@@ -1,32 +1,57 @@
 "use client";
 
-import { AlertCircle, Clock, Hash, Shield, Sparkles, Users } from "lucide-react";
+import {
+  AlertCircle,
+  Clock,
+  Hash,
+  Shield,
+  Sparkles,
+  Users,
+} from "lucide-react";
 import { useState } from "react";
-import { useStats } from "@/hooks";
+import { ChannelsSection } from "@/components/dashboard/channels-section";
-import { StatCard } from "@/components/dashboard/stat-card";
 import { LiveStream } from "@/components/dashboard/live-stream";
+import type { ModQueueItem } from "@/components/dashboard/mod-queue";
 import { ModQueue } from "@/components/dashboard/mod-queue";
-import { MessageTrendChart } from "@/components/dashboard/message-trend-chart";
+import { StatCard } from "@/components/dashboard/stat-card";
-import { ActivityHeatmap } from "@/components/dashboard/activity-heatmap";
 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 { useReview, useStats } from "@/hooks";
 
-type DashboardTab = "stats" | "live" | "activity";
+type DashboardTab = "stats" | "live" | "users" | "channels";
 
 export default function DashboardPage() {
   const [tab, setTab] = useState<DashboardTab>("stats");
   const { data: stats, isLoading, error, refetch } = useStats();
+  const { data: review = [] } = useReview();
+
+  const modQueueItems: ModQueueItem[] = review.slice(0, 10).map((msg) => ({
+    id: msg.id,
+    content: msg.content || msg.id,
+    username: msg.username,
+    severity:
+      msg.ai_severity && msg.ai_severity !== "none"
+        ? (msg.ai_severity as ModQueueItem["severity"])
+        : "medium",
+    reason: msg.ai_analysis ?? "AI moderation flag",
+  }));
 
   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" /> },
+    { id: "users", label: "Users", icon: <Users className="size-3" /> },
+    { id: "channels", label: "Channels", icon: <Hash className="size-3" /> },
   ];
 
   return (
     <div className="space-y-4 animate-fade-in-up">
-      <SubNav tabs={subNavTabs} activeTab={tab} onTabChange={(t) => setTab(t as DashboardTab)} />
+      <SubNav
+        tabs={subNavTabs}
+        activeTab={tab}
+        onTabChange={(t) => setTab(t as DashboardTab)}
+      />
 
       {tab === "stats" && (
         <div className="space-y-4">
@@ -37,18 +62,46 @@ export default function DashboardPage() {
           ) : (
             <>
               <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
-                <StatCard label="Today" value={stats.today_messages} icon={Clock} />
+                  label="Total Messages"
-                <StatCard label="Users" value={stats.total_users} icon={Users} />
+                  value={stats.total_messages}
-                <StatCard label="Active 24h" value={stats.active_users_24h} icon={Sparkles} />
+                  icon={Hash}
-                <StatCard label="Flagged" value={stats.total_flagged} icon={AlertCircle} variant="danger" />
+                />
-                <StatCard label="Clean" value={stats.total_clean} icon={Shield} variant="success" />
+                <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>
 
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              <TopChannelsChart
-                <MessageTrendChart />
+                data={stats.top_channels.map((c) => ({
-                <TopChannelsChart />
+                  name: c.channel_name ?? c.channel_id,
-              </div>
+                  count: c.message_count,
+                }))}
+              />
             </>
           )}
         </div>
@@ -57,15 +110,13 @@ export default function DashboardPage() {
       {tab === "live" && (
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <LiveStream />
-          <ModQueue />
+          <ModQueue items={modQueueItems} />
         </div>
       )}
 
-      {tab === "activity" && (
+      {tab === "users" && <UsersSection />}
-        <div className="grid grid-cols-1 gap-4">
+
-          <ActivityHeatmap />
+      {tab === "channels" && <ChannelsSection />}
-        </div>
-      )}
     </div>
   );
 }

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

@@ -1,12 +1,13 @@
 "use client";
 
 import { useState } from "react";
+import { SubNav } from "@/components/layout/sub-nav";
 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 { useRecordings, useRecordingsWsSync } from "@/hooks";
 import type { VoiceRecording } from "@/lib/types";
+import { useWebSocket } from "@/lib/ws/context";
 
 type RecordingsTab = "library" | "stats";
 
@@ -14,10 +15,15 @@ export default function RecordingsPage() {
   const { data: recordings, isLoading, error, refetch } = useRecordings();
   const [playingId, setPlayingId] = useState<string | null>(null);
   const [tab, setTab] = useState<RecordingsTab>("library");
+  const ws = useWebSocket();
 
-  const currentTrack = playingId && recordings
+  // Live-update the library when the gateway publishes voice_recording_uploaded
-    ? recordings.find((r: VoiceRecording) => r.id === playingId)
+  useRecordingsWsSync(ws);
-    : null;
+
+  const currentTrack =
+    playingId && recordings
+      ? recordings.find((r: VoiceRecording) => r.id === playingId)
+      : null;
 
   return (
     <div className="space-y-4 animate-fade-in-up">
@@ -30,34 +36,38 @@ export default function RecordingsPage() {
         onTabChange={(t) => setTab(t as RecordingsTab)}
       />
 
-      {tab === "library" && (
+      {tab === "library" &&
-        <>
+        (error ? (
-          {error ? (
+          <ErrorState message={error.message} onRetry={refetch} />
-            <ErrorState message={error.message} onRetry={refetch} />
+        ) : isLoading ? (
-          ) : isLoading ? (
+          <LoadingSkeleton count={4} height="h-28" />
-            <LoadingSkeleton count={4} height="h-28" />
+        ) : (
-          ) : (
+          <div className="space-y-2">
-            <div className="space-y-2">
+            {(recordings ?? []).map((rec: VoiceRecording) => (
-              {(recordings ?? []).map((rec: VoiceRecording) => (
+              <RecordingCard
-                <RecordingCard
+                key={rec.id}
-                  key={rec.id}
+                recording={rec}
-                  recording={rec}
+                onPlay={(id) => setPlayingId(id === playingId ? null : id)}
-                  onPlay={(id) => setPlayingId(id === playingId ? null : id)}
+              />
-                />
+            ))}
-              ))}
+            {(recordings ?? []).length === 0 && (
-              {(recordings ?? []).length === 0 && (
+              <div className="py-12 text-center text-sm text-text-secondary/40">
-                <div className="py-12 text-center text-sm text-text-secondary/40">No recordings yet</div>
+                No recordings yet
-              )}
+              </div>
-            </div>
+            )}
-          )}
+          </div>
-        </>
+        ))}
-      )}
 
       {tab === "stats" && (
-        <div className="py-12 text-center text-sm text-text-secondary/40">Recording stats coming soon</div>
+        <div className="py-12 text-center text-sm text-text-secondary/40">
+          Recording stats coming soon
+        </div>
       )}
 
-      <RecordingPlayer url={currentTrack?.download_url ?? undefined} onClose={() => setPlayingId(null)} />
+      <RecordingPlayer
+        url={currentTrack?.download_url ?? undefined}
+        onClose={() => setPlayingId(null)}
+      />
     </div>
   );
 }

services/frontend/src/components/chatbot/chatbot-context.tsx

@@ -10,9 +10,15 @@ import {
   useState,
 } from "react";
 import { chatbotApi } from "@/lib/api";
-import type { ChatHistoryMessage } from "@/lib/types";
+import type { ChatbotHistoryRow } from "@/lib/types";
 
-export type ChatbotExpression = "idle" | "listening" | "surprise" | "happy" | "sad" | "talking";
+export type ChatbotExpression =
+  | "idle"
+  | "listening"
+  | "surprise"
+  | "happy"
+  | "sad"
+  | "talking";
 
 interface ChatbotMessage {
   role: "user" | "assistant";
@@ -74,16 +80,29 @@ export function ChatbotProvider({ children }: { children: ReactNode }) {
     if (historyFetched.current) return;
     historyFetched.current = true;
 
-    chatbotApi.getHistory().then((history) => {
+    chatbotApi
-      const mapped = (history ?? []).map((msg: ChatHistoryMessage) => ({
+      .getHistory()
-        role: msg.role as "user" | "assistant",
+      .then((res) => {
-        content: msg.content,
+        // Backend returns rows {user_message, bot_response, created_at} —
-        timestamp: msg.timestamp,
+        // interleave each user message with its bot reply.
-      }));
+        const withReplies: ChatbotMessage[] = [];
-      setMessages(mapped);
+        for (const row of res.history ?? []) {
-    }).catch(() => {
+          withReplies.push({
-      // API may not be available yet — silently ignore
+            role: "user",
-    });
+            content: row.user_message,
+            timestamp: row.created_at,
+          });
+          withReplies.push({
+            role: "assistant",
+            content: row.bot_response,
+            timestamp: row.created_at,
+          });
+        }
+        setMessages(withReplies);
+      })
+      .catch(() => {
+        // API may not be available yet — silently ignore
+      });
   }, []);
 
   const sendMessage = useCallback(async (content: string) => {

services/frontend/src/components/dashboard/activity-heatmap.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { GlassCard } from "@/components/glass/card";
-import { cn } from "@/lib/utils";
-
-const HOURS = Array.from({ length: 24 }, (_, i) => i);
-const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-
-interface ActivityHeatmapProps {
-  data?: Record<string, number>; // key: "day-hour", value: count
-}
-
-export function ActivityHeatmap({ data = {} }: ActivityHeatmapProps) {
-  const maxVal = Math.max(...Object.values(data), 1);
-
-  const getIntensity = (day: string, hour: number) => {
-    const val = data[`${day}-${hour}`] || 0;
-    const pct = val / maxVal;
-    if (pct === 0) return "bg-surface";
-    if (pct < 0.25) return "bg-primary/15";
-    if (pct < 0.5) return "bg-primary/30";
-    if (pct < 0.75) return "bg-primary/50";
-    return "bg-primary/70";
-  };
-
-  return (
-    <GlassCard variant="base">
-      <div className="flex items-center gap-2 mb-3">
-        <span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">Activity</span>
-        <span className="text-[10px] text-text-secondary/40">hour × day</span>
-      </div>
-      <div className="overflow-x-auto">
-        <div className="flex gap-0.5 min-w-[400px]">
-          {/* Hour labels */}
-          <div className="flex flex-col gap-0.5 mr-1">
-            <div className="h-4" />
-            {DAYS.map((d) => (
-              <div key={d} className="h-3 flex items-center text-[8px] text-text-secondary/40 font-mono">{d}</div>
-            ))}
-          </div>
-          {/* Grid */}
-          <div className="flex gap-0.5">
-            {HOURS.map((hour) => (
-              <div key={hour} className="flex flex-col gap-0.5">
-                {DAYS.map((day) => (
-                  <div
-                    key={`${day}-${hour}`}
-                    className={cn("size-3 rounded-sm transition-colors", getIntensity(day, hour))}
-                    title={`${day} ${hour}:00 — ${data[`${day}-${hour}`] || 0}`}
-                  />
-                ))}
-                <div className="h-3 flex items-center justify-center text-[8px] text-text-secondary/30 font-mono">
-                  {hour % 4 === 0 ? hour : ""}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </GlassCard>
-  );
-}

services/frontend/src/components/dashboard/channels-section.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { Hash, Search } from "lucide-react";
+import { useCallback, useState } from "react";
+import { GlassCard } from "@/components/glass/card";
+import { EmptyState, LoadingSkeleton } from "@/components/shared";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { useChannelDetail, useChannels } from "@/hooks";
+import type { DashboardChannel } from "@/lib/types";
+
+export function ChannelsSection({ guildId }: { guildId?: string }) {
+  const [search, setSearch] = useState("");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const {
+    data: channels = [],
+    isLoading,
+    error,
+    refetch,
+  } = useChannels(guildId ?? "", search);
+  const { data: detail } = useChannelDetail(selectedId);
+
+  const handleSearch = useCallback((v: string) => {
+    setSearch(v);
+    setSelectedId(null);
+  }, []);
+
+  if (error) {
+    return (
+      <GlassCard variant="danger" className="p-6 text-sm">
+        Failed to load channels: {error.message}
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-2"
+          onClick={() => refetch()}
+        >
+          Retry
+        </Button>
+      </GlassCard>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <div className="space-y-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search by channel ID or name…"
+            value={search}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="pl-9 h-9"
+          />
+        </div>
+
+        {isLoading ? (
+          <LoadingSkeleton count={5} height="h-14" />
+        ) : channels.length === 0 ? (
+          <EmptyState icon={Hash} title="No channels found" />
+        ) : (
+          <div className="space-y-2">
+            {channels.map((channel) => (
+              <ChannelRow
+                key={channel.channel_id}
+                channel={channel}
+                active={selectedId === channel.channel_id}
+                onSelect={setSelectedId}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <GlassCard variant="base" className="h-fit">
+        {detail ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Hash className="size-4 text-primary" />
+              <p className="text-sm font-semibold text-text-primary">
+                {detail.channel_name ?? detail.channel_id}
+              </p>
+              <p className="text-[10px] font-mono text-text-secondary/50 ml-auto">
+                {detail.channel_id}
+              </p>
+            </div>
+
+            <div className="flex flex-wrap gap-1.5">
+              <Badge variant="outline">Messages: {detail.total_messages}</Badge>
+              <Badge variant="destructive">
+                Flagged: {detail.flagged_count}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="border-green-500/40 text-green-500"
+              >
+                Clean: {detail.clean_count}
+              </Badge>
+            </div>
+
+            {detail.culture_summary && (
+              <div className="rounded-lg border border-border/40 bg-card/40 px-3 py-2">
+                <p className="text-[10px] font-semibold uppercase tracking-wide text-text-secondary/50 mb-1">
+                  Culture summary
+                </p>
+                <p className="text-xs leading-relaxed text-text-secondary">
+                  {detail.culture_summary}
+                </p>
+              </div>
+            )}
+
+            {detail.recent_messages.length > 0 && (
+              <div className="space-y-1.5">
+                <p className="text-[10px] font-semibold uppercase tracking-wide text-text-secondary/50">
+                  Recent messages
+                </p>
+                {detail.recent_messages.slice(0, 5).map((msg) => (
+                  <div
+                    key={msg.id}
+                    className="rounded-lg border border-border/40 bg-card/40 px-3 py-2"
+                  >
+                    <p className="text-xs leading-relaxed text-text-secondary line-clamp-2">
+                      {msg.username}: {msg.content || "(no text content)"}
+                    </p>
+                    <p className="mt-1 text-[10px] font-mono text-text-secondary/40">
+                      {new Date(msg.created_at).toLocaleString()}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex h-48 flex-col items-center justify-center text-center">
+            <Hash className="size-8 text-text-secondary/30 mb-2" />
+            <p className="text-xs text-text-secondary/60">
+              Select a channel to see its culture summary and recent messages.
+            </p>
+          </div>
+        )}
+      </GlassCard>
+    </div>
+  );
+}
+
+function ChannelRow({
+  channel,
+  active,
+  onSelect,
+}: {
+  channel: DashboardChannel;
+  active: boolean;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <Card
+      className={active ? "border-primary/40 bg-primary/5" : undefined}
+      onClick={() => onSelect(channel.channel_id)}
+    >
+      <CardContent className="flex cursor-pointer items-center gap-3 p-3">
+        <Hash className="size-4 shrink-0 text-text-secondary/50" />
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-text-primary">
+            {channel.channel_name ?? channel.channel_id}
+          </p>
+          <p className="truncate text-[10px] font-mono text-text-secondary/50">
+            {channel.channel_id}
+          </p>
+        </div>
+        <div className="flex shrink-0 gap-1.5">
+          <Badge variant="outline">{channel.total_messages}</Badge>
+          {channel.flagged_count > 0 && (
+            <Badge variant="destructive">{channel.flagged_count}</Badge>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -2,8 +2,9 @@
 
 import { useEffect, useRef, useState } from "react";
 import { GlassCard } from "@/components/glass/card";
-import { useWebSocket } from "@/lib/ws/context";
+import type { MessageRecord } from "@/lib/types";
 import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";
 
 interface LiveMessage {
   id: string;
@@ -20,12 +21,23 @@ export function LiveStream() {
   const ws = useWebSocket();
 
   useEffect(() => {
-    const unsub = ws.on("message_created", (data: any) => {
+    const unsub = ws.on("message_created", (data: MessageRecord) => {
+      // channel name lives inside the metadata JSON (channel.channelName)
+      let channelName: string | undefined;
+      try {
+        const meta =
+          typeof data.metadata === "string"
+            ? JSON.parse(data.metadata)
+            : data.metadata;
+        channelName = meta?.channel?.channelName;
+      } catch {
+        channelName = undefined;
+      }
       const msg: LiveMessage = {
         id: data.id,
         content: data.content || "(attachment)",
         username: data.username || "unknown",
-        channelName: data.channelName,
+        channelName,
         timestamp: new Date().toLocaleTimeString(),
         flagged: data.ai_status === "flagged" || data.ai_status === "warn",
       };
@@ -34,12 +46,6 @@ export function LiveStream() {
     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">
@@ -51,7 +57,10 @@ export function LiveStream() {
           Live Stream
         </span>
       </div>
-      <div ref={scrollRef} className="overflow-y-auto max-h-[320px] space-y-0.5 p-2">
+      <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...

services/frontend/src/components/dashboard/message-trend-chart.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { GlassCard } from "@/components/glass/card";
-import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-
-interface MessageTrendChartProps {
-  data?: { date: string; messages: number; flagged: number }[];
-}
-
-export function MessageTrendChart({ data = [] }: MessageTrendChartProps) {
-  return (
-    <GlassCard variant="base">
-      <div className="flex items-center gap-2 mb-3">
-        <span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">Message Trend</span>
-        <span className="text-[10px] text-text-secondary/40">7 days</span>
-      </div>
-      <div className="h-48">
-        <ResponsiveContainer width="100%" height="100%">
-          <AreaChart data={data}>
-            <defs>
-              <linearGradient id="trend-msg" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="var(--color-primary)" stopOpacity={0.3} />
-                <stop offset="100%" stopColor="var(--color-primary)" stopOpacity={0} />
-              </linearGradient>
-              <linearGradient id="trend-flag" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="var(--color-destructive)" stopOpacity={0.3} />
-                <stop offset="100%" stopColor="var(--color-destructive)" stopOpacity={0} />
-              </linearGradient>
-            </defs>
-            <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{ fill: "oklch(0.55 0.02 245)", fontSize: 10 }} />
-            <YAxis axisLine={false} tickLine={false} tick={{ fill: "oklch(0.55 0.02 245)", fontSize: 10 }} />
-            <Tooltip
-              contentStyle={{
-                background: "oklch(0.11 0.02 245 / 0.9)",
-                border: "1px solid oklch(1 0 0 / 0.08)",
-                borderRadius: 8,
-                fontSize: 12,
-                color: "oklch(0.93 0.01 245)",
-              }}
-            />
-            <Area type="monotone" dataKey="messages" stroke="var(--color-primary)" strokeWidth={2} fill="url(#trend-msg)" />
-            <Area type="monotone" dataKey="flagged" stroke="var(--color-destructive)" strokeWidth={1.5} fill="url(#trend-flag)" />
-          </AreaChart>
-        </ResponsiveContainer>
-      </div>
-    </GlassCard>
-  );
-}

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

@@ -4,7 +4,7 @@ import { AlertCircle, Check, Trash2 } from "lucide-react";
 import { GlassCard } from "@/components/glass/card";
 import { cn } from "@/lib/utils";
 
-interface ModQueueItem {
+export interface ModQueueItem {
   id: string;
   content: string;
   username: string;
@@ -48,16 +48,30 @@ export function ModQueue({ items = [] }: { items?: ModQueueItem[] }) {
               )}
             >
               <div className="flex items-center gap-2">
-                <span className="font-medium text-xs text-text-primary">{item.username}</span>
+                <span className="font-medium text-xs text-text-primary">
-                <span className="text-[10px] font-mono uppercase text-text-secondary/60">{item.severity}</span>
+                  {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-xs text-text-secondary line-clamp-1">
-              <p className="text-[10px] text-text-secondary/50">{item.reason}</p>
+                {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">
+                <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">
+                <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>

services/frontend/src/components/dashboard/users-section.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { Search, Users, UserX } from "lucide-react";
+import { useCallback, useState } from "react";
+import { GlassCard } from "@/components/glass/card";
+import { EmptyState, LoadingSkeleton } from "@/components/shared";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { useUserDetail, useUsers } from "@/hooks";
+import type { DashboardUser } from "@/lib/types";
+
+export function UsersSection() {
+  const [search, setSearch] = useState("");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const { data: users = [], isLoading, error, refetch } = useUsers(search);
+  const { data: detail } = useUserDetail(selectedId);
+
+  const handleSearch = useCallback((v: string) => {
+    setSearch(v);
+    setSelectedId(null);
+  }, []);
+
+  if (error) {
+    return (
+      <GlassCard variant="danger" className="p-6 text-sm">
+        Failed to load users: {error.message}
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-2"
+          onClick={() => refetch()}
+        >
+          Retry
+        </Button>
+      </GlassCard>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <div className="space-y-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search by user ID or username…"
+            value={search}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="pl-9 h-9"
+          />
+        </div>
+
+        {isLoading ? (
+          <LoadingSkeleton count={5} height="h-16" />
+        ) : users.length === 0 ? (
+          <EmptyState icon={Users} title="No users found" />
+        ) : (
+          <div className="space-y-2">
+            {users.map((user) => (
+              <UserRow
+                key={user.user_id}
+                user={user}
+                active={selectedId === user.user_id}
+                onSelect={setSelectedId}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <GlassCard variant="base" className="h-fit">
+        {detail ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+              <Avatar className="size-10">
+                <AvatarImage src={detail.avatar_url ?? undefined} />
+                <AvatarFallback>
+                  {detail.username?.charAt(0).toUpperCase() ?? "?"}
+                </AvatarFallback>
+              </Avatar>
+              <div className="min-w-0">
+                <p className="text-sm font-semibold text-text-primary">
+                  {detail.username ?? "Unknown user"}
+                </p>
+                <p className="text-[10px] font-mono text-text-secondary/50">
+                  {detail.user_id}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-1.5">
+              <Badge variant="outline">Messages: {detail.total_messages}</Badge>
+              <Badge variant="destructive">
+                Flagged: {detail.flagged_count}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="border-green-500/40 text-green-500"
+              >
+                Clean: {detail.clean_count}
+              </Badge>
+              {detail.trust_score != null && (
+                <Badge variant="outline">Trust: {detail.trust_score}</Badge>
+              )}
+              {detail.clean_message_streak != null && (
+                <Badge variant="outline">
+                  Streak: {detail.clean_message_streak}
+                </Badge>
+              )}
+              {detail.total_infractions != null && (
+                <Badge variant="destructive">
+                  Infractions: {detail.total_infractions}
+                </Badge>
+              )}
+            </div>
+
+            {detail.profile_summary && (
+              <p className="text-xs leading-relaxed text-text-secondary">
+                {detail.profile_summary}
+              </p>
+            )}
+
+            {detail.recent_messages.length > 0 && (
+              <div className="space-y-1.5">
+                <p className="text-[10px] font-semibold uppercase tracking-wide text-text-secondary/50">
+                  Recent messages
+                </p>
+                {detail.recent_messages.slice(0, 5).map((msg) => (
+                  <div
+                    key={msg.id}
+                    className="rounded-lg border border-border/40 bg-card/40 px-3 py-2"
+                  >
+                    <p className="text-xs leading-relaxed text-text-secondary line-clamp-2">
+                      {msg.content || "(no text content)"}
+                    </p>
+                    <p className="mt-1 text-[10px] font-mono text-text-secondary/40">
+                      {msg.channel_id?.slice(0, 8)} ·{" "}
+                      {new Date(msg.created_at).toLocaleString()}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex h-48 flex-col items-center justify-center text-center">
+            <UserX className="size-8 text-text-secondary/30 mb-2" />
+            <p className="text-xs text-text-secondary/60">
+              Select a user to see their profile, trust score and recent
+              messages.
+            </p>
+          </div>
+        )}
+      </GlassCard>
+    </div>
+  );
+}
+
+function UserRow({
+  user,
+  active,
+  onSelect,
+}: {
+  user: DashboardUser;
+  active: boolean;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <Card
+      className={active ? "border-primary/40 bg-primary/5" : undefined}
+      onClick={() => onSelect(user.user_id)}
+    >
+      <CardContent className="flex cursor-pointer items-center gap-3 p-3">
+        <Avatar className="size-8 shrink-0">
+          <AvatarImage src={user.avatar_url ?? undefined} />
+          <AvatarFallback className="text-xs">
+            {user.username?.charAt(0).toUpperCase() ?? "?"}
+          </AvatarFallback>
+        </Avatar>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-text-primary">
+            {user.username ?? "Unknown user"}
+          </p>
+          <p className="truncate text-[10px] font-mono text-text-secondary/50">
+            {user.user_id}
+          </p>
+        </div>
+        <div className="flex shrink-0 gap-1.5">
+          <Badge variant="outline">{user.total_messages}</Badge>
+          {user.flagged_count > 0 && (
+            <Badge variant="destructive">{user.flagged_count}</Badge>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

services/frontend/src/hooks/use-dashboard.ts

@@ -22,12 +22,11 @@ export function useUsers(search?: string) {
   });
 }
 
-export function useChannels(guildId: string, search?: string) {
+export function useChannels(guildId?: string, search?: string) {
   return useQuery({
-    queryKey: ["dashboard-channels", guildId, search ?? ""],
+    queryKey: ["dashboard-channels", guildId ?? "__all__", search ?? ""],
     queryFn: () => dashboardApi.listChannels(20, search, guildId || undefined),
     select: (data) => data.data,
-    enabled: !!guildId,
   });
 }
 

services/frontend/src/hooks/use-messages.ts

@@ -182,7 +182,7 @@ export function useMessagesWsSync(ws: WsHook, guildId: string) {
     });
     const unsub3 = ws.on("message_deleted", (data) => {
       qc.setQueryData<MessageRecord[]>(key, (old) =>
-        old ? old.filter((m) => m.id !== (data as unknown as string)) : old,
+        old ? old.filter((m) => m.id !== (data as { id: string }).id) : old,
       );
     });
     const unsub4 = ws.on("message_analyzed", (data) => {

services/frontend/src/lib/api/chatbot.ts

@@ -1,11 +1,14 @@
-import type { ChatbotResponse, ChatHistoryMessage } from "@/lib/types";
+import type { ChatbotHistoryRow, ChatbotResponse } from "@/lib/types";
 import { api } from "./client";
 
 export const chatbotApi = {
   send: (message: string) =>
     api.post<ChatbotResponse>("/api/chat", { message }),
 
-  getHistory: () => api.get<ChatHistoryMessage[]>("/api/chat/history"),
+  getHistory: () =>
+    api.get<{ history: ChatbotHistoryRow[]; total: number }>(
+      "/api/chat/history",
+    ),
 
   clearHistory: () => api.delete<{ ok: boolean }>("/api/chat/history"),
 };

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

@@ -8,21 +8,23 @@ export class ApiError extends Error {
   }
 }
 
-const REMOTE_API = "https://imphnen.asepharyana.my.id";
+/**
-
+ * API base URL resolution.
+ *
+ * Default: same-origin — the production nginx (gmw-proxy) proxies /api/* to
+ * the backend, so no cross-origin config is needed. For local dev against a
+ * remote deployment, set NEXT_PUBLIC_API_URL (e.g. https://imphnen.asepharyana.my.id).
+ */
 function getBaseUrl(): string {
-  if (typeof window === "undefined") return REMOTE_API;
+  const override =
-  const hostname = window.location.hostname;
+    typeof process !== "undefined" ? process.env.NEXT_PUBLIC_API_URL : "";
+  if (override) return override.replace(/\/+$/, "");
 
-  // In local dev, route API calls to the remote server
+  if (typeof window === "undefined") return "";
-  if (hostname === "localhost" || hostname === "127.0.0.1") {
-    return REMOTE_API;
-  }
 
-  // Production: nginx proxies /api/* to backend on the same host
   const protocol = window.location.protocol.replace(":", "");
   const port = window.location.port;
-  return `${protocol}://${hostname}${port ? `:${port}` : ""}`;
+  return `${protocol}://${window.location.hostname}${port ? `:${port}` : ""}`;
 }
 
 export async function apiRequest<T>(

services/frontend/src/lib/types/recording.ts

@@ -8,7 +8,8 @@ export interface VoiceRecording {
   channel_name?: string | null;
   filename: string;
   size_bytes: number;
-  duration_bytes: number;
+  /** Present on REST rows; absent on WS voice_recording_uploaded events */
+  duration_bytes?: number | null;
   download_url?: string | null;
   upload_status: string;
   upload_error?: string | null;

services/frontend/src/lib/types/ui.ts

@@ -16,8 +16,15 @@ export interface ChatbotResponse {
   timestamp: string;
 }
 
-export interface ChatHistoryMessage {
+/**
-  role: string;
+ * Chat history row as returned by the backend (GET /api/chat/history →
-  content: string;
+ * { history: ChatbotHistoryRow[], total }).
-  timestamp: string;
+ */
+export interface ChatbotHistoryRow {
+  id: string;
+  user_id: string;
+  user_message: string;
+  bot_response: string;
+  context: Record<string, unknown> | null;
+  created_at: string;
 }

services/frontend/src/lib/ws/connection.ts

@@ -2,21 +2,20 @@ import type { WsEvent, WsStatus } from "./types";
 
 type WsEventCallback = (event: WsEvent) => void;
 
-const REMOTE_WS = "wss://imphnen.asepharyana.my.id/ws";
+/**
-
+ * WebSocket URL resolution — same-origin by default (gmw-proxy nginx
+ * proxies /ws to the backend). Override for local dev with NEXT_PUBLIC_WS_URL.
+ */
 function getWsUrl(): string {
-  if (typeof window === "undefined") return REMOTE_WS;
+  const override =
-  const hostname = window.location.hostname;
+    typeof process !== "undefined" ? process.env.NEXT_PUBLIC_WS_URL : "";
+  if (override) return override.replace(/\/+$/, "");
 
-  // Always route WS through the remote server (even from local dev)
+  if (typeof window === "undefined") return "wss://localhost/ws";
-  if (hostname === "localhost" || hostname === "127.0.0.1") {
-    return REMOTE_WS;
-  }
 
-  // Production: nginx proxies /ws/* to backend on the same host
   const protocol = window.location.protocol === "https:" ? "wss" : "ws";
   const port = window.location.port;
-  return `${protocol}://${hostname}${port ? `:${port}` : ""}/ws`;
+  return `${protocol}://${window.location.hostname}${port ? `:${port}` : ""}/ws`;
 }
 
 export class WsConnection {

services/frontend/src/lib/ws/types.ts

@@ -28,7 +28,8 @@ export interface WsBinaryEvent {
 export interface WsEventMap {
   message_created: MessageRecord;
   message_updated: MessageRecord;
-  message_deleted: string; // message ID
+  /** Gateway emits { id, deleted_at } — NOT a bare string */
+  message_deleted: { id: string; deleted_at?: number };
   message_analyzed: MessageRecord;
   attachment_created: unknown;
   attachment_uploaded: unknown;