test backend typing packets

frontend/src/components/PacketViewer.tsx

@@ -334,7 +334,7 @@ export default function PacketViewer(): ReactElement {
         ),
       },
       {
-        title: 'Proto',
+        title: 'Protocol',
         dataIndex: 'ip_proto',
         key: 'ip_proto',
         width: 100,

frontend/src/icons/FirewallIcon.tsx

@@ -18,7 +18,7 @@ export type IconProps = React.SVGProps<SVGSVGElement> & {
 };
 
 const FirewallIcon = forwardRef<SVGSVGElement, IconProps>(
-  ({ size = 24, color = 'currentColor', title, ...rest }, ref) => {
+  ({ size = 20, color = 'currentColor', title, ...rest }, ref) => {
     // If user passed a numeric size, treat as px
     const sizeValue = typeof size === 'number' ? `${size}px` : size;
 

frontend/src/pages/Home.tsx

@@ -1,31 +1,9 @@
-import { useEffect } from 'react';
-import { fetchFullState } from '../api/apiClient';
-import { useBackendAPI } from '../hooks/useBackendAPI';
+import Title from 'antd/lib/typography/Title';
 
 export default function Home() {
-  const { fullStateQuery } = useBackendAPI();
-  const { data, isLoading, isError, error } = fullStateQuery;
-
-  if (isLoading) return <div>Loading full state…</div>;
-  if (isError) return <div>Error: {(error as Error)?.message}</div>;
-
-  useEffect(() => {
-    fetchFullState().catch(() => {});
-  }, []);
-
   return (
     <div>
-      <h3>Full State</h3>
-      <div>
-        <strong>Interfaces:</strong> {data?.interfaces.length ?? 0}
-      </div>
-      <div>
-        <strong>Routes:</strong> {data?.routes.length ?? 0}
-      </div>
-      <div>
-        <strong>Bridges:</strong> {data?.bridges.length ?? 0}
-      </div>
-      <pre style={{ whiteSpace: 'pre-wrap' }}>{JSON.stringify(data, null, 2)}</pre>
+      <Title level={2}>TBD</Title>
     </div>
   );
 }