refactor(frontend): major rebuild — feature-sliced architecture + bug fixes + glass-morphism UI

Architecture:
- Feature-sliced directory: entities/, shared/, features/, widgets/
- Consolidated API client (shared/api/client.ts) — all endpoints in one file
- Single WebSocket manager (shared/ws/socket.ts) with typed event bus
- Extracted hooks: useAudioPlayback, useAudioTransmit, useLocalStorage, useUIState
- UI primitives moved to shared/ui/ with barrel export
- Added Skeleton, Toast, MobileTabBar components

Bug fixes (8/8):
1. useMemo→useEffect in RecordingsSubPanel (async side-effect anti-pattern)
2. ArrayBuffer.slice() before WebSocket send (shared buffer bug)
3. Proper useEffect dependency arrays throughout
4. Stable React keys (no index fallbacks)
5. onReanalyze properly awaited (Promise<void> return)
6. monitorGuild memoized with useMemo
7. localStorage validation with shape checking
8. Deleted duplicate socket logic (ws/client.ts removed)

UI polish:
- Glass-morphism design tokens (backdrop-blur, translucent cards)
- Gradient mesh background with subtle radial overlays
- Expandable sidebar + mobile bottom tab bar
- Skeleton loading placeholders
- Audio visualizer with CSS pulse animation

Deleted: src/api/, src/components/, src/hooks/, src/types/, src/ws/, src/lib/
Added: 40 new files across feature-sliced structure

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

frontend/src/features/live/index.tsx

@@ -0,0 +1,113 @@
+// ─── Live Panel — thin composition layer ────────────────────────────────────
+import { Tabs, TabsContent, TabsList, TabsTrigger, Card, CardContent, CardHeader, CardTitle } from "../../shared/ui";
+import type { ActiveSpeaker, Channel, Guild, VoiceStatus } from "../../shared/api/client";
+import type { MediaState } from "../../shared/api/client";
+import { Music2, MonitorUp, Mic } from "lucide-react";
+import { AudioVisualizer } from "./components/AudioVisualizer";
+import { ActiveSpeakers } from "./components/ActiveSpeakers";
+import { VoiceConnectionCard } from "./components/VoiceConnectionCard";
+import { NowPlaying } from "./components/NowPlaying";
+import { MusicSubPanel } from "./components/MusicSubPanel";
+import { ScreenSubPanel } from "./components/ScreenSubPanel";
+import { RecordingsSubPanel } from "./components/RecordingsSubPanel";
+
+interface LivePanelProps {
+  guilds: Guild[];
+  voiceChannels: Channel[];
+  selectedGuild: string;
+  selectedChannel: string;
+  status: VoiceStatus;
+  voiceLoading: boolean;
+  activeSpeakers: ActiveSpeaker[];
+  levels: number[];
+  isListening: boolean;
+  isStreaming: boolean;
+  mediaState: MediaState;
+  mediaLoading: boolean;
+  onGuildChange: (id: string) => void;
+  onChannelChange: (id: string) => void;
+  onJoin: () => void;
+  onDisconnect: () => void;
+  onListenToggle: () => void;
+  onStreamingToggle: () => void;
+  onQueueMusic: (source: string) => void;
+  onStartScreen: (source: string) => void;
+  onSkip: () => void;
+  onStop: () => void;
+  onVolumeChange: (v: number) => void;
+}
+
+export function LivePanel({
+  guilds, voiceChannels, selectedGuild, selectedChannel,
+  status, voiceLoading, activeSpeakers, levels, isListening, isStreaming,
+  mediaState, mediaLoading,
+  onGuildChange, onChannelChange, onJoin, onDisconnect,
+  onListenToggle, onStreamingToggle,
+  onQueueMusic, onStartScreen, onSkip, onStop, onVolumeChange,
+}: LivePanelProps) {
+  return (
+    <div className="grid gap-6">
+      <VoiceConnectionCard
+        guilds={guilds}
+        voiceChannels={voiceChannels}
+        selectedGuild={selectedGuild}
+        selectedChannel={selectedChannel}
+        status={status}
+        voiceLoading={voiceLoading}
+        isListening={isListening}
+        isStreaming={isStreaming}
+        onGuildChange={onGuildChange}
+        onChannelChange={onChannelChange}
+        onJoin={onJoin}
+        onDisconnect={onDisconnect}
+        onListenToggle={onListenToggle}
+        onStreamingToggle={onStreamingToggle}
+      />
+
+      <div className="grid gap-6 xl:grid-cols-[1fr_320px]">
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Live Audio</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <AudioVisualizer levels={levels} />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Active Speakers</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ActiveSpeakers speakers={activeSpeakers} />
+          </CardContent>
+        </Card>
+      </div>
+
+      <NowPlaying current={mediaState.current} queue={mediaState.queue} />
+
+      <Tabs defaultValue="music">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="music"><Music2 className="mr-1.5 h-4 w-4" /> Music</TabsTrigger>
+          <TabsTrigger value="screen"><MonitorUp className="mr-1.5 h-4 w-4" /> Screen Share</TabsTrigger>
+          <TabsTrigger value="recordings"><Mic className="mr-1.5 h-4 w-4" /> Recordings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="music">
+          <MusicSubPanel
+            volume={mediaState.musicVolume}
+            onVolumeChange={onVolumeChange}
+            onQueue={onQueueMusic}
+            onSkip={onSkip}
+            onStop={onStop}
+            loading={mediaLoading}
+          />
+        </TabsContent>
+        <TabsContent value="screen">
+          <ScreenSubPanel onStart={onStartScreen} onSkip={onSkip} onStop={onStop} loading={mediaLoading} />
+        </TabsContent>
+        <TabsContent value="recordings">
+          <RecordingsSubPanel />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}