Add fancy metrics view for packet feed. Closes #75.

frontend/src/hooks/index.ts

@@ -10,3 +10,4 @@ export { useRealtimeAppState } from './useRealtimeAppState';
 export { useConversationActions } from './useConversationActions';
 export { useConversationNavigation } from './useConversationNavigation';
 export { useBrowserNotifications } from './useBrowserNotifications';
+export { useRawPacketStatsSession } from './useRawPacketStatsSession';

frontend/src/hooks/useRawPacketStatsSession.ts

@@ -0,0 +1,52 @@
+import { useCallback, useState } from 'react';
+
+import type { RawPacket } from '../types';
+import {
+  MAX_RAW_PACKET_STATS_OBSERVATIONS,
+  summarizeRawPacketForStats,
+  type RawPacketStatsSessionState,
+} from '../utils/rawPacketStats';
+
+export function useRawPacketStatsSession() {
+  const [session, setSession] = useState<RawPacketStatsSessionState>(() => ({
+    sessionStartedAt: Date.now(),
+    totalObservedPackets: 0,
+    trimmedObservationCount: 0,
+    observations: [],
+  }));
+
+  const recordRawPacketObservation = useCallback((packet: RawPacket) => {
+    setSession((prev) => {
+      const observation = summarizeRawPacketForStats(packet);
+      if (
+        prev.observations.some(
+          (candidate) => candidate.observationKey === observation.observationKey
+        )
+      ) {
+        return prev;
+      }
+
+      const observations = [...prev.observations, observation];
+      if (observations.length <= MAX_RAW_PACKET_STATS_OBSERVATIONS) {
+        return {
+          ...prev,
+          totalObservedPackets: prev.totalObservedPackets + 1,
+          observations,
+        };
+      }
+
+      const overflow = observations.length - MAX_RAW_PACKET_STATS_OBSERVATIONS;
+      return {
+        ...prev,
+        totalObservedPackets: prev.totalObservedPackets + 1,
+        trimmedObservationCount: prev.trimmedObservationCount + overflow,
+        observations: observations.slice(overflow),
+      };
+    });
+  }, []);
+
+  return {
+    rawPacketStatsSession: session,
+    recordRawPacketObservation,
+  };
+}

frontend/src/hooks/useRealtimeAppState.ts

@@ -50,6 +50,7 @@ interface UseRealtimeAppStateArgs {
   removeConversationMessages: (conversationId: string) => void;
   receiveMessageAck: (messageId: number, ackCount: number, paths?: MessagePath[]) => void;
   notifyIncomingMessage?: (msg: Message) => void;
+  recordRawPacketObservation?: (packet: RawPacket) => void;
   maxRawPackets?: number;
 }
 
@@ -97,6 +98,7 @@ export function useRealtimeAppState({
   removeConversationMessages,
   receiveMessageAck,
   notifyIncomingMessage,
+  recordRawPacketObservation,
   maxRawPackets = 500,
 }: UseRealtimeAppStateArgs): UseWebSocketOptions {
   const mergeChannelIntoList = useCallback(
@@ -241,6 +243,7 @@ export function useRealtimeAppState({
         }
       },
       onRawPacket: (packet: RawPacket) => {
+        recordRawPacketObservation?.(packet);
         setRawPackets((prev) => appendRawPacketUnique(prev, packet, maxRawPackets));
       },
       onMessageAcked: (messageId: number, ackCount: number, paths?: MessagePath[]) => {
@@ -261,6 +264,7 @@ export function useRealtimeAppState({
       pendingDeleteFallbackRef,
       prevHealthRef,
       recordMessageEvent,
+      recordRawPacketObservation,
       receiveMessageAck,
       observeMessage,
       refreshUnreads,