feat(frontend): rebuild as SSR with server-authoritative shared state

Rombak total alur data frontend: dari static-export CSR (tiap browser
fetch sendiri + akumulasi state voice per-tab) jadi server-side rendering.

Frontend (Next.js):
- next.config: output export -> standalone; halaman jadi server components
- server data layer baru src/lib/api/server.ts (GMW_BACKEND_URL, no window)
- dashboard/media/messages/moderation/recordings/voice page -> RSC yang
  fetch backend di render-time, seed ke client view (SWR fallbackData)
- hook-hook utama terima initialData -> first paint data server, revalidate
  SWR setelahnya, tanpa spinner-blank-load
- messages: guild/channel/tab/selected dibaca dari URL di server, page awal
  di-fetch server-side

Shared realtime state (voice) server-authoritative:
- backend src/modules/voice/live-speaker.ts: agregat voice_active_user dari
  gateway jadi snapshot authoritatif (single source of truth semua browser)
- GET /api/voice/status kini include activeSpeakers
- WS initial states kirim voice_state snapshot saat connect (late join
  langsung dapat state yang sama, bukan daftar kosong)
- useSpeakers seed dari server snapshot + voice_state full-replace +
  voice_active_user delta upsert

Deploy:
- flake.nix: frontend package build SSR standalone (server.js wrapper,
  GMW_FRONTEND_PORT=4017); proxy nginx template proxy / -> Next server,
  /api + /ws tetap ke backend :4001

services/backend/src/modules/voice/live-speaker.ts

@@ -0,0 +1,83 @@
+/**
+ * Authoritative live-voice store.
+ *
+ * Single source of truth for who is present / speaking in voice. The backend
+ * WebSocket server is the one relay every frontend client connects to, so it
+ * is the correct place to aggregate the gateway's `voice_active_user` deltas
+ * into a shared snapshot. A late-joining browser must be able to see the same
+ * state as everyone else — this store makes that possible (seeded into the WS
+ * initial states and served via GET /api/voice/status).
+ */
+
+export interface LiveSpeaker {
+  userId: string;
+  username: string;
+  avatar?: string | null;
+  speaking: boolean;
+  /** Epoch ms of the most recent activity (start OR end of speech). */
+  lastActiveAt: number;
+}
+
+const speakers = new Map<string, LiveSpeaker>();
+
+const MAX_SPEAKERS = 200;
+
+/**
+ * Record a voice_active_user event. `speaking: true` upserts the speaker as
+ * active; `speaking: false` marks them inactive while keeping them for the
+ * activity timeline.
+ */
+/**
+ * recordSpeaker(data) — apply a `voice_active_user` event. `speaking: true`
+ * upserts the speaker as ACTIVE; `speaking: false` marks them inactive while
+ * keeping them for the activity timeline.
+ */
+export function recordSpeaker(data: {
+  userId: string;
+  username?: string;
+  avatar?: string | null;
+  speaking: boolean;
+}): void {
+  const { userId, speaking } = data;
+  const existing = speakers.get(userId);
+  const speaker: LiveSpeaker = {
+    userId,
+    username: data.username ?? existing?.username ?? "Unknown",
+    avatar: data.avatar ?? existing?.avatar ?? null,
+    speaking,
+    lastActiveAt: Date.now(),
+  };
+
+  if (speakers.size >= MAX_SPEAKERS && !existing) {
+    // Drop the least-recently-active non-speaking speaker to stay bounded.
+    let oldestId: string | null = null;
+    let oldestTs = Infinity;
+    for (const [id, s] of speakers) {
+      if (!s.speaking && s.lastActiveAt < oldestTs) {
+        oldestTs = s.lastActiveAt;
+        oldestId = id;
+      }
+    }
+    if (oldestId) speakers.delete(oldestId);
+    else return;
+  }
+
+  speakers.set(userId, speaker);
+}
+
+/** All known speakers, most recently active first. */
+export function getActiveSpeakers(): LiveSpeaker[] {
+  return [...speakers.values()].sort((a, b) => b.lastActiveAt - a.lastActiveAt);
+}
+
+/** Only speakers currently flagged as speaking. */
+export function getSpeakingSpeakers(): LiveSpeaker[] {
+  return [...speakers.values()]
+    .filter((s) => s.speaking)
+    .sort((a, b) => b.lastActiveAt - a.lastActiveAt);
+}
+
+/** Drop all tracked speakers (used on backend restart). */
+export function resetLiveSpeakers(): void {
+  speakers.clear();
+}

services/backend/src/modules/voice/voice.service.ts

@@ -15,6 +15,10 @@ import {
   VOICE_STATUS_KEY,
 } from "../../shared/index.js";
 import { publishCommand, readRedisStatus } from "../../shared/redis/index.js";
+import {
+  getActiveSpeakers,
+  type LiveSpeaker,
+} from "./live-speaker.js";
 
 const logger = createChildLogger("voice.service");
 
@@ -45,6 +49,12 @@ export interface VoiceStatus {
   activeChannelId: string | null;
   activeChannelName: string | null;
   connections: GuildVoiceEntry[];
+  /**
+   * Authoritative shared voice snapshot — who is present / speaking right
+   * now, aggregated server-side from the gateway's `voice_active_user`
+   * deltas. All browsers converge on this same list.
+   */
+  activeSpeakers: LiveSpeaker[];
 }
 
 export const DEFAULT_VOICE_STATUS: VoiceStatus = {
@@ -53,8 +63,16 @@ export const DEFAULT_VOICE_STATUS: VoiceStatus = {
   activeChannelId: null,
   activeChannelName: null,
   connections: [],
+  activeSpeakers: [],
 };
 
+/** Attach the live speaker snapshot to any voice status payload. */
+function withActiveSpeakers<T extends Partial<VoiceStatus>>(
+  status: T,
+): T & { activeSpeakers: LiveSpeaker[] } {
+  return { ...status, activeSpeakers: getActiveSpeakers() };
+}
+
 /**
  * Wraps tryCommandThenFallback with a cleaner signature for use within this module.
  * Attempts a Redis command first; on failure, falls back to the provided function.
@@ -68,8 +86,10 @@ async function withFallback<T>(
 }
 
 function readVoiceStatusFallback(): Promise<VoiceStatus> {
-  return readRedisStatus(VOICE_STATUS_KEY).then(
-    (cached) => (cached as unknown as VoiceStatus) ?? DEFAULT_VOICE_STATUS,
+  return readRedisStatus(VOICE_STATUS_KEY).then((cached) =>
+    withActiveSpeakers(
+      (cached as unknown as VoiceStatus) ?? DEFAULT_VOICE_STATUS,
+    ),
   );
 }
 
@@ -139,7 +159,9 @@ export async function getVoiceChannels(guildId: string): Promise<Channel[]> {
 export async function getVoiceStatus(): Promise<VoiceStatus> {
   logger.debug("getVoiceStatus called");
   const cached = await readRedisStatus(VOICE_STATUS_KEY);
-  return (cached as unknown as VoiceStatus) ?? DEFAULT_VOICE_STATUS;
+  return withActiveSpeakers(
+    (cached as unknown as VoiceStatus) ?? DEFAULT_VOICE_STATUS,
+  );
 }
 
 /**

services/backend/src/ws/redis-bridge.ts

@@ -2,9 +2,11 @@ import Redis from "ioredis";
 import { config } from "../shared/config/index.js";
 import {
   DISCORD_CHANNEL_TO_WS_EVENT,
+  DISCORD_VOICE_ACTIVE_USER,
   DISCORD_VOICE_PCM,
 } from "../shared/index.js";
 import { createChildLogger } from "../shared/logger/index.js";
+import { recordSpeaker } from "../modules/voice/live-speaker.js";
 import { broadcastBinary, broadcastEvent } from "./broadcast.js";
 
 const logger = createChildLogger("ws.redis-bridge");
@@ -62,6 +64,26 @@ function handleSubscriptionMessage(channel: string, message: string): void {
     }
   }
 
+  // Aggregate live-voice state authoritatively BEFORE broadcasting.
+  // Every browser hears the same `voice_active_user` deltas, so the backend
+  // can maintain the single shared snapshot for late-joining clients.
+  if (channel === DISCORD_VOICE_ACTIVE_USER) {
+    const speaker = data as {
+      userId?: string;
+      username?: string;
+      avatar?: string | null;
+      speaking?: boolean;
+    };
+    if (speaker?.userId) {
+      recordSpeaker({
+        userId: speaker.userId,
+        username: speaker.username,
+        avatar: speaker.avatar,
+        speaking: Boolean(speaker.speaking),
+      });
+    }
+  }
+
   logger.debug({ channel, eventType }, "Broadcasting Redis event");
   broadcastEvent(eventType, data);
 }

services/backend/src/ws/server.ts

@@ -66,6 +66,22 @@ async function sendInitialStates(ws: WebSocket): Promise<void> {
   } catch (err) {
     logger.warn({ err }, "Failed to send initial media_state");
   }
+
+  // Send initial live-voice snapshot (shared authoritative state — a browser
+  // joining mid-call sees the same speakers as everyone else, not an empty DB).
+  try {
+    const { getActiveSpeakers } = await import(
+      "../modules/voice/live-speaker.js"
+    );
+    ws.send(
+      JSON.stringify({
+        type: "voice_state",
+        state: { activeSpeakers: getActiveSpeakers() },
+      }),
+    );
+  } catch (err) {
+    logger.warn({ err }, "Failed to send initial voice_state");
+  }
 }
 
 export function closeWebSocketServer(): void {