feat: migrate and redesign dashboard to modern React

- Full rewrite of legacy vanilla JS UI into React SPA
- Implement modern design system using Tailwind CSS and shadcn/ui primitives
- Create typed API modules and hooks for voice, media, and moderation
- Add new features: separated Music and Screen Share panels, Image Grid
- Implement unified WebSocket hook for real-time state and PCM audio
- Improve visualizer with smooth CSS transitions and live state sync
- Add __dirname polyfill for ES module compatibility
- Ensure responsive layout for mobile and desktop

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/components/messages/MessageFeed.tsx

@@ -1,25 +1,25 @@
-import type { MessageRecord } from "../../api/client";
+import type { MessageRecord } from "../../types/messages";
+import { ScrollArea } from "../ui/scroll-area";
 import { MessageCard } from "./MessageCard";
 
 export interface MessageFeedProps {
   messages: MessageRecord[];
   onReanalyze: (id: string) => void;
+  emptyText?: string;
 }
 
-export function MessageFeed({ messages, onReanalyze }: MessageFeedProps) {
+export function MessageFeed({ messages, onReanalyze, emptyText = "No messages found." }: MessageFeedProps) {
   if (messages.length === 0) {
-    return (
-      <div className="empty-state">
-        <p>No messages yet</p>
-      </div>
-    );
+    return <div className="rounded-2xl border border-dashed border-border p-10 text-center text-sm text-muted-foreground">{emptyText}</div>;
   }
 
   return (
-    <div className="message-feed">
-      {messages.map((msg) => (
-        <MessageCard key={msg.id} message={msg} onReanalyze={onReanalyze} />
-      ))}
-    </div>
+    <ScrollArea className="h-[calc(100vh-260px)] pr-3">
+      <div className="space-y-3">
+        {messages.map((message) => (
+          <MessageCard key={message.id} message={message} onReanalyze={onReanalyze} />
+        ))}
+      </div>
+    </ScrollArea>
   );
 }