Merge branch 'worktree-neo-surveillance-redesign'

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

@@ -1,19 +1,15 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { TopNav } from "@/components/layout/top-nav";
 import { MobileNav } from "@/components/layout/mobile-nav";
-import { WsProvider } from "@/lib/ws/context";
-import { MascotProvider } from "@/components/mascot/mascot-context";
+import { WsProvider, useWebSocket } from "@/lib/ws/context";
+import { MascotProvider, useMascot } from "@/components/mascot/mascot-context";
 import { MascotContainer } from "@/components/mascot/mascot-container";
 import { MiniPlayer } from "@/components/media/mini-player";
 import { MediaPlayerProvider } from "@/lib/hooks/use-media-player";
 import { HiddenSidebar } from "@/components/layout/hidden-sidebar";
-import { useState } from "react";
-import { useWebSocket } from "@/lib/ws/context";
-import { useMascot } from "@/components/mascot/mascot-context";
-import { useEffect } from "react";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -41,7 +37,10 @@ function MascotExpressionSync() {
       setExpression("listening");
     });
 
-    return () => { unsub1(); unsub2(); };
+    return () => {
+      unsub1();
+      unsub2();
+    };
   }, [ws, setExpression]);
 
   return null;
@@ -59,10 +58,10 @@ export default function DashboardLayout({
       <WsProvider>
         <MediaPlayerProvider>
           <MascotProvider>
+            <MascotExpressionSync />
             <div className="min-h-screen bg-canvas">
               <TopNav />
               <HiddenSidebar guildId={guildId} onGuildChange={(g) => setGuildId(g ?? "")} />
-              <MascotExpressionSync />
 
               {/* Sub-nav space — filled per-page */}
               <div className="pt-11">

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

@@ -2,10 +2,11 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
-import { Search, Flag, Image, Loader2, RefreshCw } from "lucide-react";
+import { Flag, Image, Loader2, RefreshCw, Search } from "lucide-react";
 import { MessageList } from "@/components/messages/message-list";
-import { MessageDetail } from "@/components/messages/message-detail";
+import { MessageDetailView } from "@/components/messages/message-detail-view";
 import { SearchOverlay } from "@/components/messages/search-overlay";
+import { extractFirstImage } from "@/components/messages/message-card";
 import { SubNav } from "@/components/layout/sub-nav";
 import { ErrorState, LoadingSkeleton } from "@/components/shared";
 import { GlassCard } from "@/components/glass/card";
@@ -31,9 +32,10 @@ import {
   useReview,
   useTextChannels,
 } from "@/hooks";
+import type { MessageRecord } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 import { GuildSelector } from "@/components/shared/guild-selector";
-import { cn } from "@/lib/utils";
 
 type MessagesTab = "all" | "images" | "review";
 
@@ -41,9 +43,15 @@ export default function MessagesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [guildId, setGuildId] = useState(searchParams.get("guild") || "");
-  const [selectedChannel, setSelectedChannel] = useState(searchParams.get("channel") || "");
-  const [detailId, setDetailId] = useState<string | null>(searchParams.get("selected"));
-  const [tab, setTab] = useState<MessagesTab>((searchParams.get("tab") as MessagesTab) || "all");
+  const [selectedChannel, setSelectedChannel] = useState(
+    searchParams.get("channel") || "",
+  );
+  const [detailId, setDetailId] = useState<string | null>(
+    searchParams.get("selected"),
+  );
+  const [tab, setTab] = useState<MessagesTab>(
+    (searchParams.get("tab") as MessagesTab) || "all",
+  );
   const [searchOpen, setSearchOpen] = useState(false);
 
   const ws = useWebSocket();
@@ -64,7 +72,7 @@ export default function MessagesPage() {
 
   useMessagesWsSync(ws, guildId);
 
-  // Sync to URL
+  // Sync state to URL
   useEffect(() => {
     const params = new URLSearchParams();
     if (guildId) params.set("guild", guildId);
@@ -74,7 +82,7 @@ export default function MessagesPage() {
     router.replace(`/messages?${params.toString()}`, { scroll: false });
   }, [guildId, selectedChannel, detailId, tab, router]);
 
-  // Global Cmd+K
+  // Global Cmd+K search trigger
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
@@ -95,8 +103,14 @@ export default function MessagesPage() {
     });
   }, [cursorData, loadMoreMut, guildId, selectedChannel]);
 
+  const handleGuildChange = useCallback((g: string) => {
+    setGuildId(g);
+    setSelectedChannel("");
+    setDetailId(null);
+  }, []);
+
   const subNavTabs = [
-    { id: "all", label: "All" },
+    { id: "all", label: "All", icon: null },
     { id: "images", label: "Images", icon: <Image className="size-3" /> },
     { id: "review", label: "Review", icon: <Flag className="size-3" /> },
   ];
@@ -105,11 +119,14 @@ export default function MessagesPage() {
 
   return (
     <div className="animate-fade-in-up space-y-4">
-      {/* Controls bar */}
+      {/* ── Controls bar ── */}
       <div className="flex items-center gap-3">
-        <GuildSelector value={guildId} onChange={(g) => { setGuildId(g ?? ""); setSelectedChannel(""); }} />
+        <GuildSelector value={guildId} onChange={handleGuildChange} />
         {channels.length > 0 && (
-          <Select value={selectedChannel} onValueChange={(v) => setSelectedChannel(v ?? "")}>
+          <Select
+            value={selectedChannel}
+            onValueChange={(v) => setSelectedChannel(v ?? "")}
+          >
             <SelectTrigger className="h-8 w-40 glass border-glass-border text-xs">
               <SelectValue placeholder="All channels" />
             </SelectTrigger>
@@ -124,105 +141,183 @@ export default function MessagesPage() {
         <button
           type="button"
           onClick={() => setSearchOpen(true)}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs text-text-secondary/60 hover:text-text-primary glass hover:glass-elevated transition-all ml-auto"
+          className="ml-auto flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs text-text-secondary/60 hover:text-text-primary glass hover:glass-elevated transition-all"
         >
           <Search className="size-3.5" />
           Search
-          <span className="text-[10px] text-text-secondary/30 font-mono hidden sm:inline">⌘K</span>
+          <span className="hidden font-mono text-[10px] text-text-secondary/30 sm:inline">
+            &#8984;K
+          </span>
         </button>
-        <Button variant="outline" size="sm" onClick={() => reanalyzeBatchMut.mutate(guildId)} className="h-8 text-xs">
-          <RefreshCw className="size-3 mr-1" /> Reanalyze
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => reanalyzeBatchMut.mutate(guildId)}
+          className="h-8 text-xs"
+        >
+          <RefreshCw className="mr-1 size-3" /> Reanalyze
         </Button>
       </div>
 
-      <SubNav tabs={subNavTabs} activeTab={tab} onTabChange={(t) => setTab(t as MessagesTab)} />
+      {/* ── Sub navigation ── */}
+      <SubNav
+        tabs={subNavTabs}
+        activeTab={tab}
+        onTabChange={(t) => setTab(t as MessagesTab)}
+      />
 
-      {/* Split pane */}
+      {/* ── Split pane ── */}
       {error ? (
         <ErrorState message={error.message} onRetry={refetch} />
       ) : isLoading ? (
         <LoadingSkeleton count={6} height="h-20" />
       ) : (
         <div className="flex gap-4">
-          {/* Left pane — message list */}
-          <div className={cn("space-y-2", detailId ? "w-1/2 lg:w-2/5" : "w-full")}>
+          {/* Left pane */}
+          <div
+            className={cn(
+              "space-y-2",
+              detailId ? "w-1/2 lg:w-2/5" : "w-full",
+            )}
+          >
             {tab === "all" && (
-              <>
-                <MessageList messages={currentMessages} selectedId={detailId} onSelect={setDetailId} />
-                {cursorData?.hasMore && (
-                  <div className="flex justify-center py-4">
-                    <Button variant="outline" size="sm" onClick={handleLoadMore} disabled={loadMoreMut.isPending} className="text-xs glass">
-                      {loadMoreMut.isPending && <Loader2 className="size-3 animate-spin mr-1" />}
-                      Load more
-                    </Button>
-                  </div>
-                )}
-              </>
+              <MessageList
+                messages={currentMessages}
+                selectedId={detailId}
+                onSelect={setDetailId}
+                onReanalyze={(id) => reanalyzeMut.mutate(id)}
+                hasMore={cursorData?.hasMore}
+                onLoadMore={handleLoadMore}
+                isLoadingMore={loadMoreMut.isPending}
+              />
             )}
             {tab === "images" && (
               <ImageGrid items={images ?? []} onSelect={setDetailId} />
             )}
             {tab === "review" && (
-              <ReviewList items={reviews ?? []} onSelect={setDetailId} onReanalyze={(id: string) => reanalyzeMut.mutate(id)} />
+              <ReviewList
+                items={reviews ?? []}
+                onSelect={setDetailId}
+              />
             )}
           </div>
 
-          {/* Right pane — detail */}
+          {/* Right pane — message detail */}
           {detailId && (
-            <div className="hidden md:block w-1/2 lg:w-3/5 sticky top-16 self-start">
+            <div className="sticky top-16 hidden w-1/2 self-start md:block lg:w-3/5">
               {detailLoading ? (
                 <GlassPanel dense className="flex items-center justify-center py-12">
                   <Loader2 className="size-5 animate-spin text-text-secondary/60" />
                 </GlassPanel>
               ) : detailMessage ? (
-                <MessageDetail
-                  message={detailMessage}
-                  attachments={detailAttachments}
-                  onBack={() => setDetailId(null)}
-                />
+                <div className="space-y-3">
+                  <button
+                    type="button"
+                    onClick={() => setDetailId(null)}
+                    className="text-xs text-text-secondary/60 hover:text-text-primary transition-colors"
+                  >
+                    &larr; Back to list
+                  </button>
+                  <MessageDetailView
+                    message={detailMessage}
+                    attachments={detailAttachments}
+                  />
+                </div>
               ) : null}
             </div>
           )}
         </div>
       )}
 
-      {/* Search overlay */}
-      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} onSelect={setDetailId} />
+      {/* ── Search overlay ── */}
+      <SearchOverlay
+        open={searchOpen}
+        onClose={() => setSearchOpen(false)}
+        onSelect={(id) => {
+          setDetailId(id);
+          setTab("all");
+        }}
+      />
     </div>
   );
 }
 
-// Inline ImageGrid and ReviewList
-function ImageGrid({ items, onSelect }: { items: any[]; onSelect: (id: string) => void }) {
+// ── Inline ImageGrid (glass-styled) ────────────────
+
+function ImageGrid({
+  items,
+  onSelect,
+}: {
+  items: MessageRecord[];
+  onSelect: (id: string) => void;
+}) {
   return (
     <div className="grid grid-cols-3 gap-2">
-      {items.map((item: any) => (
-        <button key={item.id} type="button" onClick={() => onSelect(item.message_id)} className="glass rounded-lg overflow-hidden hover:scale-[1.02] transition-transform">
-          <img src={item.uploaded_url || item.discord_url} alt="" className="w-full h-24 object-cover" loading="lazy" />
-        </button>
-      ))}
+      {items.map((item) => {
+        const imgUrl = extractFirstImage(item.metadata);
+        return (
+          <button
+            key={item.id}
+            type="button"
+            onClick={() => onSelect(item.id)}
+            className="glass overflow-hidden rounded-lg transition-transform hover:scale-[1.02]"
+          >
+            {imgUrl ? (
+              <img
+                src={imgUrl}
+                alt=""
+                className="h-24 w-full object-cover"
+                loading="lazy"
+              />
+            ) : (
+              <div className="flex h-24 w-full items-center justify-center text-xs text-text-secondary/40">
+                No image
+              </div>
+            )}
+          </button>
+        );
+      })}
       {items.length === 0 && (
-        <div className="col-span-3 py-12 text-center text-xs text-text-secondary/40">No images</div>
+        <div className="col-span-3 py-12 text-center text-xs text-text-secondary/40">
+          No images
+        </div>
       )}
     </div>
   );
 }
 
-function ReviewList({ items, onSelect, onReanalyze }: { items: any[]; onSelect: (id: string) => void; onReanalyze: (id: string) => void }) {
+// ── Inline ReviewList (glass-styled) ────────────────
+
+function ReviewList({
+  items,
+  onSelect,
+}: {
+  items: MessageRecord[];
+  onSelect: (id: string) => void;
+}) {
   return (
     <div className="space-y-2">
-      {items.map((item: any) => (
-        <GlassCard key={item.id} variant="danger" className="p-3 cursor-pointer" onClick={() => onSelect(item.message_id)}>
+      {items.map((item) => (
+        <GlassCard
+          key={item.id}
+          variant="danger"
+          className="cursor-pointer p-3"
+          onClick={() => onSelect(item.id)}
+        >
           <div className="flex items-start gap-2">
-            <Flag className="size-3.5 text-accent-purple mt-0.5 shrink-0" />
-            <div className="flex-1 min-w-0">
-              <p className="text-xs text-text-secondary line-clamp-2">{item.content || item.id}</p>
+            <Flag className="mt-0.5 size-3.5 shrink-0 text-accent-purple" />
+            <div className="min-w-0 flex-1">
+              <p className="line-clamp-2 text-xs text-text-secondary">
+                {item.content || item.id}
+              </p>
             </div>
           </div>
         </GlassCard>
       ))}
       {items.length === 0 && (
-        <div className="py-12 text-center text-xs text-text-secondary/40">No flagged messages</div>
+        <div className="py-12 text-center text-xs text-text-secondary/40">
+          No flagged messages
+        </div>
       )}
     </div>
   );

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

@@ -6,26 +6,27 @@ 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 { useWebSocket } from "@/lib/ws/context";
+import type { VoiceRecording } from "@/lib/types";
+
+type RecordingsTab = "library" | "stats";
 
 type RecordingsTab = "library" | "stats";
 
 export default function RecordingsPage() {
-  const ws = useWebSocket();
   const { data: recordings, isLoading, error, refetch } = useRecordings();
   const [playingId, setPlayingId] = useState<string | null>(null);
   const [tab, setTab] = useState<RecordingsTab>("library");
 
   const currentTrack = playingId && recordings
-    ? recordings.find((r: any) => r.id === playingId)
+    ? recordings.find((r: VoiceRecording) => r.id === playingId)
     : null;
 
   return (
     <div className="space-y-4 animate-fade-in-up">
       <SubNav
         tabs={[
-          { id: "library", label: "Library" },
-          { id: "stats", label: "Stats" },
+          { id: "library", label: "Library", icon: undefined },
+          { id: "stats", label: "Stats", icon: undefined },
         ]}
         activeTab={tab}
         onTabChange={(t) => setTab(t as RecordingsTab)}
@@ -39,7 +40,7 @@ export default function RecordingsPage() {
             <LoadingSkeleton count={4} height="h-28" />
           ) : (
             <div className="space-y-2">
-              {(recordings ?? []).map((rec: any) => (
+              {(recordings ?? []).map((rec: VoiceRecording) => (
                 <RecordingCard
                   key={rec.id}
                   recording={rec}
@@ -58,7 +59,7 @@ export default function RecordingsPage() {
         <div className="py-12 text-center text-sm text-text-secondary/40">Recording stats coming soon</div>
       )}
 
-      <RecordingPlayer url={currentTrack?.download_url} onClose={() => setPlayingId(null)} />
+      <RecordingPlayer url={currentTrack?.download_url ?? undefined} onClose={() => setPlayingId(null)} />
     </div>
   );
 }

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

@@ -7,7 +7,15 @@ import { MicControl } from "@/components/voice/mic-control";
 import { VoiceActivityTimeline } from "@/components/voice/activity-timeline";
 import { SubNav } from "@/components/layout/sub-nav";
 import { useWebSocket } from "@/lib/ws/context";
-import { useGuilds, useMicTransmit, useSpeakers, useVoiceChannels, useVoiceConnect, useVoiceDisconnect, useVoiceStatus } from "@/hooks";
+import {
+  useGuilds,
+  useMicTransmit,
+  useSpeakers,
+  useVoiceChannels,
+  useVoiceConnect,
+  useVoiceDisconnect,
+  useVoiceStatus,
+} from "@/hooks";
 
 type VoiceTab = "connection" | "activity";
 
@@ -43,6 +51,15 @@ export default function VoicePage() {
     [micMut],
   );
 
+  const handleGuildChange = useCallback((guildId: string | null) => {
+    if (!guildId) {
+      setSelectedGuild("");
+      setSelectedChannel("");
+      return;
+    }
+    setSelectedGuild(guildId);
+  }, []);
+
   const activeSpeakers = speakers.filter((s) => s.speaking);
   const connected = voiceStatus?.connected ?? false;
 
@@ -50,8 +67,8 @@ export default function VoicePage() {
     <div className="space-y-4 animate-fade-in-up">
       <SubNav
         tabs={[
-          { id: "connection", label: "Connection" },
-          { id: "activity", label: "Activity" },
+          { id: "connection", label: "Connection", icon: undefined },
+          { id: "activity", label: "Activity", icon: undefined },
         ]}
         activeTab={tab}
         onTabChange={(t) => setTab(t as VoiceTab)}
@@ -64,7 +81,7 @@ export default function VoicePage() {
         voiceChannels={voiceChannels}
         selectedGuild={selectedGuild}
         selectedChannel={selectedChannel}
-        onGuildChange={(g) => { setSelectedGuild(g ?? ""); setSelectedChannel(""); }}
+        onGuildChange={handleGuildChange}
         onChannelChange={(v) => setSelectedChannel(v ?? "")}
         onConnect={() => connectMut.mutate({ guildId: selectedGuild, channelId: selectedChannel })}
         onDisconnect={() => disconnectMut.mutate(undefined)}

services/frontend/src/app/globals.css

@@ -43,6 +43,9 @@
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
 
+  /* Ring / focus outline for shadcn outline-ring utility */
+  --color-ring: var(--color-primary);
+
   /* Radius */
   --radius-card: 16px;
   --radius-panel: 12px;
@@ -86,25 +89,111 @@
       radial-gradient(ellipse 50% 40% at 80% 80%, oklch(0.65 0.2 280 / 0.04), transparent);
     background-size: 24px 24px, 100% 100%, 100% 100%;
   }
+  html {
+    @apply font-sans scroll-smooth;
+  }
+
+  /* Custom selection color */
+  ::selection {
+    background: oklch(0.62 0.17 215 / 0.4);
+    color: inherit;
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: oklch(1 0 0 / 0.1);
+    border-radius: 999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: oklch(1 0 0 / 0.2);
+  }
   ::-webkit-scrollbar { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.1); border-radius: 999px; }
   ::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.2); }
 }
 
+/* ── Animations ──────────────────────────── */
+
 @keyframes pulse-ring {
-  0% { transform: scale(0.8); opacity: 1; }
-  100% { transform: scale(2.5); opacity: 0; }
-}
-@keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
 }
 
-.animate-fade-in-up { animation: fade-in-up 0.3s ease-out forwards; }
-.animate-pulse-ring { animation: pulse-ring 1.5s ease-out infinite; }
-.animate-shimmer { background: linear-gradient(90deg, transparent, oklch(0.62 0.17 215 / 0.08), transparent); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.3s ease-out forwards;
+}
+
+.animate-pulse-ring {
+  animation: pulse-ring 1.5s ease-out infinite;
+}
+
+.animate-shimmer {
+  background: linear-gradient(90deg, transparent, oklch(0.62 0.17 215 / 0.08), transparent);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* ── Utility classes ─────────────────────── */
+
+/* Gradient text */
+.text-gradient {
+  background: linear-gradient(135deg, oklch(0.62 0.17 215), oklch(0.6 0.15 195), oklch(0.65 0.12 185));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Gradient border (via pseudo-element trick) */
+.gradient-border {
+  position: relative;
+}
+.gradient-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, oklch(0.62 0.17 215), oklch(0.6 0.15 195), oklch(0.65 0.12 185));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+/* Live pulse ring (compat alias) */
+.live-pulse-ring {
+  animation: pulse-ring 1.5s ease-out infinite;
+}