Track rx time

web/src/components/PacketList.tsx

@@ -43,6 +43,36 @@ export const PacketList: React.FC = () => {
     },
     [hashString]
   );
+  
+  // Get the earliest reception time from the packets
+  const getEarliestTime = useCallback((): string => {
+    if (packets.length === 0) return "";
+    
+    // Find the packet with the earliest rxTime or time
+    let earliestTime: number | undefined;
+    
+    packets.forEach(packet => {
+      // Check for rxTime first, then fall back to other timestamp fields
+      const packetTime = packet.data.rxTime || 
+                        (packet.data.telemetry?.time) || 
+                        undefined;
+      
+      if (packetTime && (!earliestTime || packetTime < earliestTime)) {
+        earliestTime = packetTime;
+      }
+    });
+    
+    if (!earliestTime) {
+      return "unknown time";
+    }
+    
+    // Format the time in a nice way
+    const date = new Date(earliestTime * 1000);
+    return date.toLocaleTimeString([], {
+      hour: '2-digit', 
+      minute: '2-digit'
+    });
+  }, [packets]);
 
   // We don't need to track packet keys in state anymore since we use data.id
   // and it's deterministic - removing this effect to prevent the infinite loop issue
@@ -102,7 +132,12 @@ export const PacketList: React.FC = () => {
     <div>
       <div className="flex justify-between items-center mb-2">
         <div className="text-sm text-neutral-400 px-2">
-          {packets.length} packets received, since 6:00am
+          {packets.length} packets received
+          {packets.length > 0 && (
+            <>
+              , since {getEarliestTime()}
+            </>
+          )}
         </div>
         <div className="flex items-center space-x-3">
           {/* Show buffered count when paused */}

web/src/components/packets/PacketCard.tsx

@@ -53,9 +53,19 @@ export const PacketCard: React.FC<PacketCardProps> = ({
             )}
           </div>
 
-          {/* Right side: ID and Type */}
+          {/* Right side: ID, Time, and Type */}
           <div className="flex items-center gap-3 text-xs">
-            <span className="text-neutral-400">{data.id || "None"}</span>
+            <div className="flex items-center">
+              <span className="text-neutral-400">{data.id || "None"}</span>
+              {data.rxTime && (
+                <span className="text-neutral-500 ml-2">
+                  {new Date(data.rxTime * 1000).toLocaleTimeString([], {
+                    hour: '2-digit', 
+                    minute: '2-digit'
+                  })}
+                </span>
+              )}
+            </div>
             <span className="px-2 py-0.5 bg-neutral-700/50 text-neutral-300 rounded-full text-xs">
               {label}
             </span>

web/src/components/packets/TelemetryPacket.tsx

@@ -26,13 +26,16 @@ export const TelemetryPacket: React.FC<TelemetryPacketProps> = ({ packet }) => {
     key => telemetry.environmentMetrics![key as keyof typeof telemetry.environmentMetrics] !== undefined
   );
   
+  // Use the reception timestamp if available, otherwise fall back to the telemetry time
+  const timestamp = data.rxTime || telemetry.time;
+  
   // Return the appropriate component based on telemetry type
   if (hasDeviceMetrics && telemetry.deviceMetrics) {
     return (
       <DeviceMetricsPacket 
         packet={packet} 
         metrics={telemetry.deviceMetrics} 
-        timestamp={telemetry.time}
+        timestamp={timestamp}
       />
     );
   }
@@ -42,7 +45,7 @@ export const TelemetryPacket: React.FC<TelemetryPacketProps> = ({ packet }) => {
       <EnvironmentMetricsPacket 
         packet={packet} 
         metrics={telemetry.environmentMetrics} 
-        timestamp={telemetry.time}
+        timestamp={timestamp}
       />
     );
   }
@@ -58,8 +61,8 @@ export const TelemetryPacket: React.FC<TelemetryPacketProps> = ({ packet }) => {
     >
       <div className="text-neutral-400 text-sm">
         Unknown telemetry data received at{' '}
-        {telemetry.time 
-          ? new Date(telemetry.time * 1000).toLocaleTimeString() 
+        {timestamp 
+          ? new Date(timestamp * 1000).toLocaleTimeString() 
           : 'unknown time'
         }
       </div>

web/src/lib/types.ts

@@ -306,6 +306,9 @@ export interface Data {
 
   // Error tracking
   decodeError?: string;
+  
+  // Reception timestamp (added by decoder)
+  rxTime?: number;
 }
 
 // Packet represents a complete decoded MQTT message