Integrate React Query for data management and enhance Debug Preferences

- Added React Query for managing API calls related to assistants and voices.
- Introduced `useAssistantsQuery` and `useVoicesQuery` hooks for fetching data.
- Implemented mutations for creating, updating, and deleting voices using React Query.
- Integrated a global `QueryClient` for managing query states and configurations.
- Refactored components to utilize the new query hooks, improving data handling and performance.
- Added a Zustand store for managing debug preferences, including WebSocket URL and audio settings.

web/pages/Dashboard.tsx

@@ -4,17 +4,16 @@ import { useNavigate } from 'react-router-dom';
 import { Phone, CheckCircle, Clock, UserCheck, ChevronDown, BarChart3, HelpCircle, Mail, ArrowDown, Bot, Zap, Rocket, LineChart, Layers, Fingerprint, Network, MonitorPlay, Plus } from 'lucide-react';
 import { Card, Button } from '../components/UI';
 import { getDashboardStats } from '../services/mockData';
-import { Assistant } from '../types';
-import { fetchAssistants } from '../services/backendApi';
+import { useAssistantsQuery } from '../services/queries';
 
 export const DashboardPage: React.FC = () => {
   const navigate = useNavigate();
   const [timeRange, setTimeRange] = useState<'week' | 'month' | 'year'>('week');
   const [selectedAssistantId, setSelectedAssistantId] = useState<string>('all');
-  const [assistants, setAssistants] = useState<Assistant[]>([]);
   const [topRailHeight, setTopRailHeight] = useState(0);
   const [isOverviewVisible, setIsOverviewVisible] = useState(true);
   const [scrollRootCenterX, setScrollRootCenterX] = useState<number | null>(null);
+  const { data: assistants = [] } = useAssistantsQuery();
   
   const scrollRootRef = useRef<HTMLDivElement>(null);
   const topRailRef = useRef<HTMLDivElement>(null);
@@ -26,29 +25,6 @@ export const DashboardPage: React.FC = () => {
     return getDashboardStats(timeRange, selectedAssistantId);
   }, [timeRange, selectedAssistantId]);
 
-  useEffect(() => {
-    let disposed = false;
-
-    const loadAssistants = async () => {
-      try {
-        const list = await fetchAssistants();
-        if (!disposed) {
-          setAssistants(list);
-        }
-      } catch (error) {
-        if (!disposed) {
-          console.error(error);
-        }
-      }
-    };
-
-    loadAssistants();
-
-    return () => {
-      disposed = true;
-    };
-  }, []);
-
   useEffect(() => {
     const updateTopRailHeight = () => {
       const nextHeight = topRailRef.current?.offsetHeight ?? 0;