feat(system): implement graceful shutdown and expand websocket events

Improve system reliability and real-time capabilities by implementing a robust lifecycle management system and adding new broadcast events for attachments and voice recordings.

- Implement asynchronous graceful shutdown in backend to close HTTP, WebSocket, Redis, and database connections.
- Add new WebSocket broadcast events: `attachment_created`, `voice_recording_started`, `voice_recording_stopped`, `voice_recording_uploaded`, and `analysis_queue_status`.
- Refactor media status handling to use boolean `playing` state instead of string-based status.
- Centralize `PageResult` and `VoiceRecording` types to improve consistency between frontend and backend.
- Update frontend API client to include `listRecordings` and handle new WebSocket event types.
- Fix type mismatches in voice command handling and media status reporting.

services/frontend/src/App.tsx

@@ -88,6 +88,10 @@ export default function App() {
       messages
         .fetchMessages(monitorGuildId || undefined)
         .catch(() => undefined),
+    onAttachmentCreated: () =>
+      messages
+        .fetchMessages(monitorGuildId || undefined)
+        .catch(() => undefined),
     onMediaState: (state) => media.setMediaState(state as MediaState),
     onVoiceRecordingUploaded: (d) =>
       window.dispatchEvent(

services/frontend/src/entities/message/types.ts

@@ -3,6 +3,7 @@ export type {
   AISeverity,
   AIStatus,
   MessageRecord,
+  PageResult,
 } from "@bete/shared";
 
 export interface MessageMetadata {
@@ -26,8 +27,3 @@ export function parseMetadata(value: string | null): MessageMetadata {
     return {};
   }
 }
-
-export interface PageResult<T> {
-  data: T[];
-  nextCursor: string | null;
-}

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

@@ -1,43 +1,24 @@
-// ─── Recordings Sub-Panel — BUG 1 FIX: useEffect instead of useMemo for side effects ──
+// ─── Recordings Sub-Panel ──
 
 import { Download, Mic } from "lucide-react";
 import { useEffect, useState } from "react";
+import type { VoiceRecording } from "../../../shared/api/client";
+import { listRecordings } from "../../../shared/api/client";
 import { formatBytes, formatDate } from "../../../shared/lib/utils";
 import { Badge, Button, EmptyStateMascot, Skeleton } from "../../../shared/ui";
 
-interface VoiceRecording {
-  id: string;
-  user_id: string;
-  username: string;
-  avatar_url: string | null;
-  guild_id: string | null;
-  channel_id: string | null;
-  channel_name: string | null;
-  filename: string;
-  size_bytes: number;
-  download_url: string | null;
-  upload_status: "pending" | "uploaded" | "failed";
-  upload_error: string | null;
-  created_at: number;
-  uploaded_at: number | null;
-}
-
 export function RecordingsSubPanel() {
   const [recordings, setRecordings] = useState<VoiceRecording[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // BUG 1 FIX: proper useEffect for async data fetching
   useEffect(() => {
     let cancelled = false;
     async function loadRecordings() {
       try {
         setLoading(true);
         setError(null);
-        const response = await fetch("/api/recordings");
-        if (!response.ok)
-          throw new Error(`Failed to load recordings: ${response.status}`);
-        const data = (await response.json()) as VoiceRecording[];
+        const data = await listRecordings();
         if (!cancelled) setRecordings(data);
       } catch (err) {
         if (!cancelled)

services/frontend/src/features/live/hooks/useVoiceControl.ts

@@ -15,6 +15,9 @@ export function useVoiceControl() {
   const [textChannels, setTextChannels] = useState<Channel[]>([]);
   const [voiceStatus, setVoiceStatus] = useState<VoiceStatus>({
     connected: false,
+    activeGuildId: null,
+    activeChannelId: null,
+    activeChannelName: null,
   });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);

services/frontend/src/shared/api/client.ts

@@ -1,6 +1,6 @@
 // ─── Shared HTTP client — all API endpoints in one file ──────────────────────
 
-import type { MessageRecord } from "@bete/shared";
+import type { MessageRecord, PageResult } from "@bete/shared";
 
 const BE_API_URL = import.meta.env.VITE_BE_API_URL || "http://localhost:3001";
 const BE_WS_URL = import.meta.env.VITE_BE_WS_URL || "ws://localhost:3001";
@@ -54,12 +54,7 @@ export function getAPIURL(): string {
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
-export interface PageResult<T> {
-  data: T[];
-  nextCursor: string | null;
-}
-
-export type { MessageRecord };
+export type { MessageRecord, PageResult };
 
 export interface Guild {
   id: string;
@@ -76,9 +71,9 @@ export interface Channel {
 
 export interface VoiceStatus {
   connected: boolean;
-  activeGuildId?: string | null;
-  activeChannelId?: string | null;
-  activeChannelName?: string | null;
+  activeGuildId: string | null;
+  activeChannelId: string | null;
+  activeChannelName: string | null;
 }
 
 export interface ActiveSpeaker {
@@ -237,6 +232,29 @@ export function setMediaVolume(volume: number): Promise<MediaState> {
   });
 }
 
+// ─── Recordings ──────────────────────────────────────────────────────────────
+
+export interface VoiceRecording {
+  id: string;
+  user_id: string;
+  username: string;
+  avatar_url: string | null;
+  guild_id: string | null;
+  channel_id: string | null;
+  channel_name: string | null;
+  filename: string;
+  size_bytes: number;
+  download_url: string | null;
+  upload_status: "pending" | "uploaded" | "failed";
+  upload_error: string | null;
+  created_at: number;
+  uploaded_at: number | null;
+}
+
+export function listRecordings(limit = 50): Promise<VoiceRecording[]> {
+  return request<VoiceRecording[]>(`/api/recordings?limit=${limit}`);
+}
+
 // ─── Auth ────────────────────────────────────────────────────────────────────
 
 export function login(password: string): Promise<{ ok: boolean }> {

services/frontend/src/shared/ws/socket.ts

@@ -11,6 +11,7 @@ export interface WsHandlers {
   onMessageUpdated?: (data: unknown) => void;
   onMessageDeleted?: (data: unknown) => void;
   onMessageAnalyzed?: (data: unknown) => void;
+  onAttachmentCreated?: (data: unknown) => void;
   onAttachmentUploaded?: (data: unknown) => void;
   onUserState?: (users: unknown[]) => void;
   onUiState?: (state: unknown) => void;
@@ -99,8 +100,7 @@ function doConnect(): WebSocket {
             h.onVoiceActiveUser?.(msg.data);
             break;
           case "attachment_created":
-            // attachment_created is informational — same data shape as message_created
-            h.onMessageCreated?.(msg.data);
+            h.onAttachmentCreated?.(msg.data);
             break;
           case "analysis_queue_status":
             // analysis_queue_status is monitoring-only — no UI action needed
@@ -147,6 +147,7 @@ export function useDashboardSocket(handlers: WsHandlers) {
       onMessageUpdated: (d) => handlersRef.current.onMessageUpdated?.(d),
       onMessageDeleted: (d) => handlersRef.current.onMessageDeleted?.(d),
       onMessageAnalyzed: (d) => handlersRef.current.onMessageAnalyzed?.(d),
+      onAttachmentCreated: (d) => handlersRef.current.onAttachmentCreated?.(d),
       onAttachmentUploaded: (d) =>
         handlersRef.current.onAttachmentUploaded?.(d),
       onUserState: (u) => handlersRef.current.onUserState?.(u),