refactor: split monolith into 3 microservices (frontend, backend, discord-gateway)

- Extract services into services/{frontend,backend,discord-gateway}
- Create packages/shared/ for shared logger, errors, utils, types
- Setup Modular MVC pattern in backend (controller→service→repository)
- Setup event-driven architecture in discord-gateway with Redis pub/sub
- Move Docker files to infra/docker/ with per-service Dockerfiles
- Update docker-compose.yml to use Traefik-only routing (no port exposes)
- Update GitHub Actions deploy workflow for multi-service matrix build
- Fix all import paths and resolve type errors across all services
- All 3 services pass tsc --noEmit clean

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

services/frontend/src/shared/hooks/useAudioPlayback.ts

@@ -0,0 +1,86 @@
+// ─── Audio playback hook — receives PCM from WebSocket and plays through Web Audio API ──
+import { useCallback, useRef, useState } from "react";
+
+const SAMPLE_RATE = 24000;
+const CHANNELS = 1;
+
+export function useAudioPlayback() {
+  const [isListening, setIsListening] = useState(false);
+  const [levels, setLevels] = useState<number[]>(
+    Array.from({ length: 32 }, () => 0.04),
+  );
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const userTimelinesRef = useRef(new Map<number, number>());
+
+  const handleIncomingPcm = useCallback(
+    (data: ArrayBuffer) => {
+      const headerView = new DataView(data, 0, 4);
+      const userIdHash = headerView.getInt32(0, true);
+      const audioData = data.slice(4);
+      const int16Array = new Int16Array(audioData);
+      let sum = 0;
+      for (const sample of int16Array) sum += Math.abs(sample / 32768);
+      const average = int16Array.length ? sum / int16Array.length : 0;
+      setLevels((prev) =>
+        prev.map((_, index) =>
+          Math.max(
+            0.04,
+            average *
+              (0.5 + Math.sin(index * 0.6 + Date.now() / 140) * 0.35 + 0.65) *
+              5,
+          ),
+        ),
+      );
+
+      const audioContext = audioContextRef.current;
+      if (!isListening || !audioContext) return;
+      const float32Array = new Float32Array(int16Array.length);
+      for (let i = 0; i < int16Array.length; i++)
+        float32Array[i] = int16Array[i] / 32768;
+      const audioBuffer = audioContext.createBuffer(
+        CHANNELS,
+        float32Array.length / SAMPLE_RATE,
+        SAMPLE_RATE,
+      );
+      audioBuffer.getChannelData(0).set(float32Array);
+      const source = audioContext.createBufferSource();
+      source.buffer = audioBuffer;
+      source.connect(audioContext.destination);
+      const currentTime = audioContext.currentTime;
+      let nextStart = userTimelinesRef.current.get(userIdHash) || 0;
+      if (nextStart < currentTime) nextStart = currentTime + 0.05;
+      source.start(nextStart);
+      userTimelinesRef.current.set(
+        userIdHash,
+        nextStart + audioBuffer.duration,
+      );
+    },
+    [isListening],
+  );
+
+  const toggleListening = useCallback(async () => {
+    if (isListening) {
+      await audioContextRef.current?.suspend();
+      userTimelinesRef.current.clear();
+      setIsListening(false);
+      return;
+    }
+    const AudioContextCtor =
+      window.AudioContext ||
+      (window as unknown as { webkitAudioContext: typeof AudioContext })
+        .webkitAudioContext;
+    audioContextRef.current ??= new AudioContextCtor({
+      sampleRate: SAMPLE_RATE,
+    });
+    await audioContextRef.current.resume();
+    setIsListening(true);
+  }, [isListening]);
+
+  return {
+    isListening,
+    levels,
+    handleIncomingPcm,
+    toggleListening,
+    audioContextRef,
+  };
+}