Fix double loading of data

web/src/lib/api.ts

@@ -16,22 +16,6 @@ export interface ApiResponse<T> {
   error?: string;
 }
 
-/**
- * Fetch a list of the most recent packets from the server
- */
-export async function fetchRecentPackets(): Promise<ApiResponse<Packet[]>> {
-  try {
-    const response = await fetch(API_ENDPOINTS.RECENT_PACKETS);
-    if (!response.ok) {
-      throw new Error(`Error: ${response.status} ${response.statusText}`);
-    }
-    const data = await response.json();
-    return { data };
-  } catch (error) {
-    return { error: error instanceof Error ? error.message : String(error) };
-  }
-}
-
 // Re-export types
 export type { 
   InfoEvent, 

web/src/lib/config.ts

@@ -26,5 +26,4 @@ export const API_BASE_URL = getApiBaseUrl();
 // API endpoints
 export const API_ENDPOINTS = {
   STREAM: `${API_BASE_URL}/api/stream`,
-  RECENT_PACKETS: `${API_BASE_URL}/api/packets/recent`,
 };

web/src/routes/__root.tsx

@@ -4,6 +4,7 @@ import { useAppDispatch } from "../hooks";
 import { Nav } from "../components";
 import { streamPackets, StreamEvent } from "../lib/api";
 import { processNewPacket } from "../store/slices/aggregatorSlice";
+import { addPacket } from "../store/slices/packetSlice";
 import { createRootRoute } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
@@ -52,8 +53,9 @@ function RootLayout() {
               setIsReconnecting(false);
             }
           } else if (event.type === "message") {
-            // Process message for the aggregator
+            // Process message for both the aggregator and packet display
             dispatch(processNewPacket(event.data));
+            dispatch(addPacket(event.data));
           } else if (event.type === "bad_data") {
             console.warn("[SSE] Received bad data:", event.data);
           }

web/src/routes/packets.tsx

@@ -1,31 +1,11 @@
-import { useEffect } from "react";
-import { useAppDispatch } from "../hooks";
 import { PacketList, PageWrapper } from "../components";
-import { addPacket } from "../store/slices/packetSlice";
-import { streamPackets, StreamEvent } from "../lib/api";
 import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/packets')({
+export const Route = createFileRoute("/packets")({
   component: PacketsPage,
 });
 
 function PacketsPage() {
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    // Subscribe to packet events for this route specifically
-    const cleanup = streamPackets(
-      (event: StreamEvent) => {
-        if (event.type === "message") {
-          // Only handle for packet display in this route
-          dispatch(addPacket(event.data));
-        }
-      }
-    );
-
-    return cleanup;
-  }, [dispatch]);
-
   return (
     <PageWrapper>
       <PacketList />