refactor(fe): DRY components, hooks, a11y fixes, and WS/client improvements

- Extract StatusBadge, SummaryList, ProfileDetail shared components (~300 lines deduplicated)
- Extract usePaginatedList<T>, useItemDetail<T> generic hooks (~170 lines deduplicated)
- Fix a11y: Badge (role=status, dark variants), Button (aria-disabled, motion-safe), Input (aria-invalid, errorId), Select (error variant), Skeleton (aria-hidden), MobileTabBar (full tab ARIA), Toast (timer leak fix, role=alert, keyboard dismiss), Card (role=region)
- Fix API client: buildSearchParams helper, request timeout, password caching, named types
- Fix WS: typed 24 event payloads (was all unknown), exponential backoff reconnect, max 20 attempts, msg.data guard
- Fix bug: listDashboardChannels cursor pagination was silently dropped
- Remove duplicate shimmer keyframes from tailwind.config.js
- Fix WaveformPlayer non-null assertion

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

services/frontend/src/features/live/components/MusicSubPanel.tsx

@@ -78,7 +78,11 @@ export function MusicSubPanel({
           onClick={handleMute}
           className="shrink-0 text-muted-foreground hover:text-foreground"
         >
-          {muted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
+          {muted ? (
+            <VolumeX className="h-4 w-4" />
+          ) : (
+            <Volume2 className="h-4 w-4" />
+          )}
         </button>
         <input
           type="range"

services/frontend/src/features/live/components/RecordingsSubPanel.tsx

@@ -18,25 +18,26 @@ export function RecordingsSubPanel() {
   const [error, setError] = useState<string | null>(null);
   const [deletingIds, setDeletingIds] = useState<Set<string>>(new Set());
 
-  const loadRecordings = useCallback(async (
-    opts?: { signal?: AbortSignal },
-  ) => {
-    try {
-      setLoading(true);
-      setError(null);
-      const data = await listRecordings({ limit: 50 });
-      if (!opts?.signal?.aborted) {
-        setRecordings(data.items);
-        setNextCursor(data.nextCursor);
-        setHasMore(data.hasMore);
+  const loadRecordings = useCallback(
+    async (opts?: { signal?: AbortSignal }) => {
+      try {
+        setLoading(true);
+        setError(null);
+        const data = await listRecordings({ limit: 50 });
+        if (!opts?.signal?.aborted) {
+          setRecordings(data.items);
+          setNextCursor(data.nextCursor);
+          setHasMore(data.hasMore);
+        }
+      } catch (err) {
+        if (!opts?.signal?.aborted)
+          setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        if (!opts?.signal?.aborted) setLoading(false);
       }
-    } catch (err) {
-      if (!opts?.signal?.aborted)
-        setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      if (!opts?.signal?.aborted) setLoading(false);
-    }
-  }, []);
+    },
+    [],
+  );
 
   const loadMore = useCallback(async () => {
     if (!nextCursor || loadingMore) return;
@@ -105,11 +106,7 @@ export function RecordingsSubPanel() {
       <div className="rounded-xl border border-dashed border-destructive p-6 text-center text-sm text-destructive">
         {error}
         <div className="mt-2">
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => loadRecordings()}
-          >
+          <Button size="sm" variant="outline" onClick={() => loadRecordings()}>
             Retry
           </Button>
         </div>
@@ -185,23 +182,26 @@ export function RecordingsSubPanel() {
           </div>
           {rec.download_url && (
             <div className="-mt-2 px-4 pb-4">
-              <WaveformPlayer downloadUrl={rec.download_url} filename={rec.filename} />
+              <WaveformPlayer
+                downloadUrl={rec.download_url}
+                filename={rec.filename}
+              />
             </div>
           )}
         </div>
       ))}
-        {hasMore && (
-          <div className="flex justify-center pt-2">
-            <Button
-              variant="outline"
-              size="sm"
-              disabled={loadingMore}
-              onClick={loadMore}
-            >
-              {loadingMore ? "Loading..." : "Load More"}
-            </Button>
-          </div>
-        )}
+      {hasMore && (
+        <div className="flex justify-center pt-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={loadingMore}
+            onClick={loadMore}
+          >
+            {loadingMore ? "Loading..." : "Load More"}
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

services/frontend/src/features/live/components/WaveformPlayer.tsx

@@ -126,8 +126,9 @@ export function WaveformPlayer({ downloadUrl, filename }: WaveformPlayerProps) {
     if (!playing || !decodedRef.current) return;
 
     const tick = () => {
+      if (!audioContextRef.current) return;
       const elapsed =
-        audioContextRef.current!.currentTime - startTimeRef.current;
+        audioContextRef.current.currentTime - startTimeRef.current;
       const progress = (elapsed + startOffsetRef.current) / durationRef.current;
       drawWaveform(Math.min(1, Math.max(0, progress)));
 
@@ -214,9 +215,7 @@ export function WaveformPlayer({ downloadUrl, filename }: WaveformPlayerProps) {
   );
 
   if (loading) {
-    return (
-      <div className="h-16 w-full animate-pulse rounded-md bg-muted" />
-    );
+    return <div className="h-16 w-full animate-pulse rounded-md bg-muted" />;
   }
 
   if (error) {
@@ -236,7 +235,11 @@ export function WaveformPlayer({ downloadUrl, filename }: WaveformPlayerProps) {
         onClick={handleTogglePlay}
         className="shrink-0 rounded-full bg-primary p-1.5 text-primary-foreground hover:bg-primary/90"
       >
-        {playing ? <Pause className="h-3.5 w-3.5" /> : <Play className="h-3.5 w-3.5" />}
+        {playing ? (
+          <Pause className="h-3.5 w-3.5" />
+        ) : (
+          <Play className="h-3.5 w-3.5" />
+        )}
       </button>
       <div
         ref={containerRef}

services/frontend/src/features/live/components/index.ts

@@ -2,10 +2,10 @@
 
 export { ActiveSpeakers } from "./ActiveSpeakers";
 export { AudioVisualizer } from "./AudioVisualizer";
+export { MicLevelMeter } from "./MicLevelMeter";
 export { MusicSubPanel } from "./MusicSubPanel";
 export { NowPlaying } from "./NowPlaying";
 export { RecordingsSubPanel } from "./RecordingsSubPanel";
 export { ScreenSubPanel } from "./ScreenSubPanel";
-export { MicLevelMeter } from "./MicLevelMeter";
 export { VoiceConnectionCard } from "./VoiceConnectionCard";
 export { WaveformPlayer } from "./WaveformPlayer";