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/hooks/useBackendAPI.ts

@@ -3,13 +3,14 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useState } from "react";
 import * as api from "../api/apiClient";
 import type {
-    BridgeCreateRequest,
-    BridgeInfo,
-    BridgeRemoveRequest,
-    FullState,
-    InterfaceInfo,
-    RouteInfo,
+  BridgeCreateRequest,
+  BridgeInfo,
+  BridgeRemoveRequest,
+  FullState,
+  InterfaceInfo,
+  RouteInfo,
 } from "../types/network";
+import { SnifferStatusResponse } from "../types/sniffer";
 
 /**
  * useNetwork
@@ -22,7 +23,7 @@ import type {
  *
  * This gives "no initial auto-fetch" but "once fetched, auto-updates".
  */
-export function useNetwork() {
+export function useBackendAPI() {
   const qc = useQueryClient();
 
   // per-query enabled flags (start false => no automatic fetch)
@@ -74,6 +75,13 @@ export function useNetwork() {
     ...commonOptions,
   });
 
+  const snifferStatusQuery = useQuery<SnifferStatusResponse>({
+    queryKey: ["sniffer-status"],
+    queryFn: api.fetchSnifferStatus,
+    enabled: fullStateEnabled,
+    ...commonOptions,
+  });
+
   // Imperative fetch helpers that also enable auto-refetch behavior
   const fetchInterfaces = useCallback(async () => {
     const res = await qc.fetchQuery<InterfaceInfo[]>({
@@ -125,6 +133,16 @@ export function useNetwork() {
     return res;
   }, [qc]);
 
+  const fetchSnifferStatus = useCallback(async () => {
+    const res = await qc.fetchQuery<SnifferStatusResponse>({
+      queryKey: ["sniffer-status"],
+      queryFn: api.fetchSnifferStatus,
+      staleTime: 1000 * 5
+    });
+    setFullStateEnabled(true);
+    return res;
+  }, [qc]);
+
   // Local loading state for simple UI feedback
   const [isCreating, setIsCreating] = useState(false);
   const [isRemoving, setIsRemoving] = useState(false);
@@ -154,6 +172,7 @@ export function useNetwork() {
       await qc.invalidateQueries({ queryKey: ["bridges"] });
       await qc.invalidateQueries({ queryKey: ["full-state"] });
       await qc.invalidateQueries({ queryKey: ["interfaces"] });
+      await qc.invalidateQueries({ queryKey: ["sniffer-status"] });
     } catch (err) {
       const message =
         err instanceof Error ? err.message : typeof err === "string" ? err : "Remove bridge failed";
@@ -184,6 +203,10 @@ export function useNetwork() {
     return qc.invalidateQueries({ queryKey: ["full-state"] });
   }
 
+  function refreshSnifferStatus() {
+    return qc.invalidateQueries({ queryKey: ["sniffer-status"] });
+  }
+
   // Convenience: refresh all queries
   function refreshAll() {
     refreshInterfaces();
@@ -191,6 +214,7 @@ export function useNetwork() {
     refreshRoutes();
     refreshBridges();
     refreshFullState();
+    refreshSnifferStatus();
   }
 
   return {
@@ -200,6 +224,7 @@ export function useNetwork() {
     routesQuery,
     bridgesQuery,
     fullStateQuery,
+    snifferStatusQuery,
 
     // manual fetchers (fetch+enable auto-updates)
     fetchInterfaces,
@@ -207,6 +232,7 @@ export function useNetwork() {
     fetchRoutes,
     fetchBridges,
     fetchFullState,
+    fetchSnifferStatus,
 
     // simple mutation functions (imperative)
     createBridge,
@@ -222,6 +248,9 @@ export function useNetwork() {
     refreshRoutes,
     refreshBridges,
     refreshFullState,
+    refreshSnifferStatus,
+
+    // refresh all
     refreshAll,
   };
 }