feat: keep clock ticking on server drops

apps/client/src/common/hooks/useAutoTickingClock.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useRuntimeStore } from '../stores/runtime';
+
+const takeOverTimeMs = 1500;
+
+/**
+ * Keeps the clock value ticking if the server drops updates
+ */
+export function useAutoTickingClock(): number {
+  const clock = useRuntimeStore((state) => state.clock);
+
+  const baselineRef = useRef({ clock, time: performance.now() });
+  const [, setTick] = useState(0);
+
+  // Update baseline when server clock changes
+  useEffect(() => {
+    baselineRef.current = { clock, time: performance.now() };
+  }, [clock]);
+
+  // Force periodic re-renders
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Always derive from baseline + elapsed at render time
+  const elapsed = performance.now() - baselineRef.current.time;
+  if (elapsed < takeOverTimeMs) {
+    return clock;
+  }
+  return baselineRef.current.clock + Math.round(elapsed);
+}

apps/client/src/common/hooks/useSocket.ts

@@ -143,8 +143,6 @@ export const useTimer = createSelector((state: RuntimeStore) => ({
   ...state.timer,
 }));
 
-export const useClock = createSelector((state: RuntimeStore) => state.clock);
-
 export const useNextFlag = createSelector((state: RuntimeStore) => ({
   id: state.eventFlag?.id ?? null,
   expectedStart: state.offset.expectedFlagStart,