Fixes for node links and early stream connection

web/src/components/dashboard/GatewayList.tsx

@@ -1,10 +1,12 @@
 import React from "react";
+import { useNavigate } from "@tanstack/react-router";
 import { useAppSelector } from "../../hooks";
 import { RefreshCw } from "lucide-react";
 import { MeshCard } from "./MeshCard";
 
 export const GatewayList: React.FC = () => {
   const { gateways, nodes } = useAppSelector((state) => state.aggregator);
+  const navigate = useNavigate();
 
   // Convert gateways object to array for sorting
   const gatewayArray = Object.values(gateways);
@@ -59,6 +61,10 @@ export const GatewayList: React.FC = () => {
           const isRecent = secondsSinceLastHeard < 300; // 5 minutes for gateways
           const isActive = !isRecent && secondsSinceLastHeard < 900; // 5-15 minutes for gateways
 
+          const handleNodeClick = (clickedNodeId: number) => {
+            navigate({ to: "/node/$nodeId", params: { nodeId: clickedNodeId.toString(16) } });
+          };
+          
           return (
             <MeshCard
               key={gateway.gatewayId}
@@ -72,6 +78,7 @@ export const GatewayList: React.FC = () => {
               }}
               gatewayId={gateway.gatewayId}
               observedNodes={gateway.observedNodes}
+              onClick={handleNodeClick}
               isRecent={isRecent}
               isActive={isActive}
               lastHeard={gateway.lastHeard}

web/src/components/dashboard/NodeDetail.tsx

@@ -291,7 +291,7 @@ export const NodeDetail: React.FC<NodeDetailProps> = ({ nodeId }) => {
           </div>
         </div>
         <div className="text-sm text-neutral-400 bg-neutral-900/50 px-3 py-1.5 rounded font-mono">
-          ID: {nodeId.toString(16)}
+          ID: !{nodeId.toString(16)}
         </div>
       </div>
 

web/src/components/dashboard/NodeList.tsx

@@ -15,7 +15,7 @@ export const NodeList: React.FC = () => {
   const sortedNodes = nodeArray.sort((a, b) => a.nodeId - b.nodeId);
 
   const handleNodeClick = (nodeId: number) => {
-    navigate({ to: "/node/$nodeId", params: { nodeId: nodeId.toString() } });
+    navigate({ to: "/node/$nodeId", params: { nodeId: nodeId.toString(16) } });
   };
 
   if (nodeArray.length === 0) {

web/src/routes/node.$nodeId.tsx

@@ -9,8 +9,8 @@ function NodePage() {
   // Get the node ID from the route params
   const { nodeId } = Route.useParams();
   
-  // Convert nodeId string to number
-  const nodeIdNum = parseInt(nodeId, 10);
+  // Convert nodeId hex string to number
+  const nodeIdNum = parseInt(nodeId, 16);
 
   return (
     <PageWrapper>