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/analytics/components/SummaryCards.tsx

@@ -0,0 +1,54 @@
+import type { ModerationBreakdown } from "../../../shared/api/client";
+import { Card, CardContent, Skeleton } from "../../../shared/ui";
+import { cn } from "../../../shared/lib/utils";
+
+interface SummaryCardsProps {
+  messages: ModerationBreakdown | null;
+  activeUsersCount: number;
+  totalChannels: number;
+  loading: boolean;
+}
+
+export function SummaryCards({ messages, activeUsersCount, totalChannels, loading }: SummaryCardsProps) {
+  const avgPerHour = messages ? Math.round(messages.total / Math.max(1, 24)) : 0;
+  const cleanPct = messages && messages.total > 0 ? Math.round((messages.clean / messages.total) * 100) : 0;
+  const warnedPct = messages && messages.total > 0 ? Math.round((messages.warned / messages.total) * 100) : 0;
+  const flaggedPct = messages && messages.total > 0 ? Math.round((messages.flagged / messages.total) * 100) : 0;
+
+  const cards = [
+    { label: "Total Pesan", value: formatNum(messages?.total), accent: "text-foreground" },
+    { label: "Rata-rata/jam", value: formatNum(avgPerHour), accent: "text-muted-foreground" },
+    { label: "Clean", value: cleanPct > 0 ? `${cleanPct}%` : "—", accent: "text-emerald-400" },
+    { label: "Warned", value: warnedPct > 0 ? `${warnedPct}%` : "—", accent: "text-amber-400" },
+    { label: "Flagged", value: flaggedPct > 0 ? `${flaggedPct}%` : "—", accent: "text-red-400" },
+    { label: "Pending", value: formatNum(messages?.pending), accent: "text-slate-400" },
+    { label: "User Aktif", value: formatNum(activeUsersCount), accent: "text-violet-400" },
+    { label: "Channel", value: formatNum(totalChannels), accent: "text-blue-400" },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-8">
+      {cards.map((card) => (
+        <Card key={card.label} className="overflow-hidden glass border-white/5">
+          <CardContent className="p-3">
+            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              {card.label}
+            </div>
+            <div className={cn("mt-1 font-mono text-lg font-bold tabular-nums", card.accent)}>
+              {loading ? (
+                <Skeleton className="h-7 w-12 mt-1" />
+              ) : (
+                card.value
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function formatNum(v: number | undefined | null): string {
+  if (v == null || v === 0) return "—";
+  return v.toLocaleString("id-ID");
+}