refactor: simplify API routes and add sniffer status functionality

- Updated API routes to remove redundant prefixes.
- Introduced sniffer status fetching in the backend API.
- Added Sniffing page and integrated it into the routing.
- Created a new hook for backend API interactions.
- Implemented sniffer status type definitions.

frontend/src/pages/Home.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { fetchFullState } from '../api/apiClient';
-import { useNetwork } from '../hooks/useNetwork';
+import { useBackendAPI } from '../hooks/useBackendAPI';
 
 export default function Home() {
-  const { fullStateQuery } = useNetwork();
+  const { fullStateQuery } = useBackendAPI();
   const { data, isLoading, isError, error } = fullStateQuery;
 
   if (isLoading) return <div>Loading full state…</div>;

frontend/src/pages/Network.tsx

@@ -3,7 +3,7 @@ import { DeleteOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons'
 import { Button, Col, Form, Input, message, Modal, Popconfirm, Row, Select, Space, Table, Tag, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { useEffect, useMemo, useState } from 'react';
-import { useNetwork } from '../hooks/useNetwork';
+import { useBackendAPI } from '../hooks/useBackendAPI';
 import type { BridgeInfo, InterfaceInfo } from '../types/network';
 
 const { Title, Paragraph } = Typography;
@@ -20,7 +20,7 @@ export default function Network() {
     refreshInterfaces,
     isCreating,
     isRemoving,
-  } = useNetwork();
+  } = useBackendAPI();
 
   const [bridgeModalVisible, setBridgeModalVisible] = useState(false);
   const [bridgeForm] = Form.useForm();

frontend/src/pages/Sniffing.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useBackendAPI } from '../hooks/useBackendAPI';
+import { fetchSnifferStatus } from '../api/apiClient';
+
+export default function Sniffing() {
+  const {
+    interfacesQuery,
+    bridgesQuery,
+    createBridge,
+    removeBridge,
+    fetchBridges,
+    fetchInterfaces,
+    refreshBridges,
+    refreshInterfaces,
+    isCreating,
+    isRemoving,
+  } = useBackendAPI();
+
+  // fetch on mount (explicit, since queries are disabled by default)
+  useEffect(() => {
+    fetchInterfaces().catch(() => {});
+    fetchSnifferStatus().catch(() => {});
+  }, []);
+
+  const bridges = bridgesQuery.data ?? [];
+  const snifferStatus = 
+  return (
+    <div className="sniffing-body">
+      <h1>Sniffing</h1>
+    </div>
+  );
+}