feat: add user detail and selection functionality to dashboard

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

@@ -77,6 +77,20 @@ export default function DashboardPage() {
       </Tabs>
 
       {view === "stats" && <StatsSection />}
+      {view === "users" && (
+        <UsersSection
+          onSelect={(userId) => {
+            setSelectedUserId(userId);
+            setView("user-detail");
+          }}
+        />
+      )}
+      {view === "user-detail" && selectedUserId && (
+        <UserDetailSection
+          userId={selectedUserId}
+          onBack={() => setView("users")}
+        />
+      )}
       {view === "channels" && (
         <ChannelsSection
           guildId={guildId}
@@ -227,6 +241,176 @@ function StatsSection() {
   );
 }
 
+// ── Users ────────────────────────────────────────────────────
+
+function UsersSection({ onSelect }: { onSelect: (id: string) => void }) {
+  const [search, setSearch] = useState("");
+  const { data: users, isLoading } = useUsers(search || undefined);
+
+  return (
+    <div className="space-y-4 animate-fade-in-up">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+        <Input
+          placeholder="Search users…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-9 h-9"
+        />
+      </div>
+      {isLoading ? (
+        <LoadingSkeleton count={6} height="h-20" columns={2} />
+      ) : !users || users.length === 0 ? (
+        <EmptyState icon={Users} title="No users found." />
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {users.map((u) => (
+            <Card
+              key={u.user_id}
+              className="cursor-pointer hover:bg-accent/5 transition-colors"
+              onClick={() => onSelect(u.user_id)}
+            >
+              <CardContent className="p-3">
+                <div className="flex items-center gap-3">
+                  <div className="size-10 shrink-0 rounded-full bg-muted flex items-center justify-center text-sm font-medium overflow-hidden ring-1 ring-border">
+                    {u.avatar_url ? (
+                      <Image
+                        src={u.avatar_url}
+                        alt=""
+                        width={40}
+                        height={40}
+                        className="size-full object-cover"
+                      />
+                    ) : (
+                      (u.username ?? "?").charAt(0).toUpperCase()
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">
+                      {u.username ?? "Unknown"}
+                    </p>
+                    <p className="text-xs text-muted-foreground flex items-center gap-2">
+                      <span>{u.total_messages} messages</span>
+                      {u.flagged_count > 0 && (
+                        <Badge
+                          variant="destructive"
+                          className="text-[10px] px-1.5 py-0 h-4"
+                        >
+                          {u.flagged_count} flagged
+                        </Badge>
+                      )}
+                    </p>
+                  </div>
+                  <ChevronRight className="size-4 text-muted-foreground shrink-0" />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── User Detail ───────────────────────────────────────────────
+
+function UserDetailSection({
+  userId,
+  onBack,
+}: {
+  userId: string;
+  onBack: () => void;
+}) {
+  const { data: user, isLoading } = useUserDetail(userId);
+  if (isLoading) return <LoadingSkeleton count={1} height="h-64" />;
+  if (!user) return <ErrorState message="User not found." />;
+
+  return (
+    <div className="space-y-5 animate-fade-in-up">
+      <Button variant="ghost" size="sm" onClick={onBack}>
+        <ArrowLeft className="size-4 mr-1" /> Back
+      </Button>
+      <Card>
+        <CardContent className="p-6 space-y-5">
+          <div className="flex items-center gap-4">
+            <div className="size-14 shrink-0 rounded-full bg-muted flex items-center justify-center text-xl font-medium overflow-hidden ring-2 ring-border">
+              {user.avatar_url ? (
+                <Image
+                  src={user.avatar_url}
+                  alt=""
+                  width={56}
+                  height={56}
+                  className="size-full object-cover"
+                />
+              ) : (
+                (user.username ?? "?").charAt(0).toUpperCase()
+              )}
+            </div>
+            <div className="min-w-0">
+              <h2 className="text-lg font-semibold">
+                {user.username ?? "Unknown"}
+              </h2>
+              <p className="text-xs text-muted-foreground font-mono">
+                {user.user_id}
+              </p>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <DetailStat label="Messages" value={user.total_messages} />
+            <DetailStat
+              label="Flagged"
+              value={user.flagged_count}
+              variant="danger"
+            />
+            <DetailStat
+              label="Clean Streak"
+              value={user.clean_message_streak ?? 0}
+            />
+            <DetailStat
+              label="Trust Score"
+              value={user.trust_score ?? 0}
+              suffix="%"
+            />
+          </div>
+          {user.profile_summary && (
+            <div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <Sparkles className="size-4 text-primary" />
+                <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider">
+                  AI Profile
+                </p>
+              </div>
+              <p className="text-sm leading-relaxed">{user.profile_summary}</p>
+            </div>
+          )}
+          {user.recent_messages.length > 0 && (
+            <div className="space-y-3">
+              <h3 className="text-sm font-semibold flex items-center gap-2">
+                <Clock className="size-4 text-muted-foreground" /> Recent
+                Messages
+              </h3>
+              <div className="space-y-2 max-h-80 overflow-y-auto">
+                {user.recent_messages.slice(0, 5).map((msg) => (
+                  <div
+                    key={msg.id}
+                    className="rounded-lg border border-border/50 bg-muted/20 p-3 text-sm"
+                  >
+                    <p className="text-xs text-muted-foreground mb-1 flex items-center gap-2">
+                      <Clock className="size-3" />
+                      {new Date(msg.created_at).toLocaleString()}
+                    </p>
+                    <p className="text-sm">{msg.content}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
 // ── Channels ──────────────────────────────────────────────────
 
 function ChannelsSection({

services/frontend/src/components/shared/guild-selector.tsx

@@ -124,7 +124,9 @@ export function GuildSelector({
       </Badge>
       <Select value={value} onValueChange={(v) => v && onChange(v)}>
         <SelectTrigger className="h-8 w-full max-w-xs">
-          <SelectValue placeholder="Select a guild…" />
+          <SelectValue placeholder="Select a guild…">
+            {guilds.find((g) => g.id === value)?.name}
+          </SelectValue>
         </SelectTrigger>
         <SelectContent>
           {guilds.map((g) => (