Improve the dev presence responsiveness

Author: matt-aitken

apps/webapp/app/components/DevPresence.tsx

@@ -1,19 +1,16 @@
 import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from "react";
-import { useDebounce } from "~/hooks/useDebounce";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 
 // Define Context types
 type DevPresenceContextType = {
-  lastSeen: Date | null;
   isConnected: boolean;
 };
 
 // Create Context with default values
 const DevPresenceContext = createContext<DevPresenceContextType>({
-  lastSeen: null,
   isConnected: false,
 });
 
@@ -37,16 +34,12 @@ export function DevPresenceProvider({ children, enabled = true }: DevPresencePro
     }
   );
 
-  const [lastSeen, setLastSeen] = useState<Date | null>(null);
-
-  const debouncer = useDebounce((seen: Date | null) => {
-    setLastSeen(seen);
-  }, 3_000);
+  const [isConnected, setIsConnected] = useState<boolean>(false);
 
   useEffect(() => {
     // If disabled or no events, set lastSeen to null
     if (!enabled || streamedEvents === null) {
-      debouncer(null);
+      setIsConnected(false);
       return;
     }
 
@@ -55,25 +48,24 @@ export function DevPresenceProvider({ children, enabled = true }: DevPresencePro
       if ("lastSeen" in data && data.lastSeen) {
         try {
           const lastSeenDate = new Date(data.lastSeen);
-          debouncer(lastSeenDate);
+          setIsConnected(true);
         } catch (error) {
           console.log("DevPresence: Failed to parse lastSeen timestamp", { error });
-          debouncer(null);
+          setIsConnected(false);
         }
       } else {
-        debouncer(null);
+        setIsConnected(false);
       }
     } catch (error) {
       console.log("DevPresence: Failed to parse presence message", { error });
-      debouncer(null);
+      setIsConnected(false);
     }
   }, [streamedEvents, enabled]);
 
   // Calculate isConnected and memoize the context value
   const contextValue = useMemo(() => {
-    const isConnected = enabled && lastSeen !== null && lastSeen > new Date(Date.now() - 120_000);
-    return { lastSeen, isConnected };
-  }, [lastSeen, enabled]);
+    return { isConnected };
+  }, [isConnected, enabled]);
 
   return <DevPresenceContext.Provider value={contextValue}>{children}</DevPresenceContext.Provider>;
 }

apps/webapp/app/env.server.ts

@@ -574,8 +574,9 @@ const EnvironmentSchema = z.object({
   RUN_ENGINE_RELEASE_CONCURRENCY_BATCH_SIZE: z.coerce.number().int().default(10),
 
   /** How long should the presence ttl last */
-  DEV_PRESENCE_TTL_MS: z.coerce.number().int().default(30_000),
-  DEV_PRESENCE_POLL_INTERVAL_MS: z.coerce.number().int().default(5_000),
+  DEV_PRESENCE_SSE_TIMEOUT: z.coerce.number().int().default(30_000),
+  DEV_PRESENCE_TTL_MS: z.coerce.number().int().default(5_000),
+  DEV_PRESENCE_POLL_MS: z.coerce.number().int().default(1_000),
   /** How many ms to wait until dequeuing again, if there was a run last time */
   DEV_DEQUEUE_INTERVAL_WITH_RUN: z.coerce.number().int().default(250),
   /** How many ms to wait until dequeuing again, if there was no run last time */

apps/webapp/app/routes/engine.v1.dev.presence.ts

@@ -16,8 +16,8 @@ const redis = new Redis({
 });
 
 export const loader = createSSELoader({
-  timeout: env.DEV_PRESENCE_TTL_MS,
-  interval: env.DEV_PRESENCE_POLL_INTERVAL_MS,
+  timeout: env.DEV_PRESENCE_SSE_TIMEOUT,
+  interval: env.DEV_PRESENCE_TTL_MS * 0.8,
   debug: true,
   handler: async ({ id, controller, debug, request }) => {
     const authentication = await authenticateApiRequestWithFailure(request);
@@ -30,7 +30,7 @@ export const loader = createSSELoader({
 
     const presenceKey = DevPresenceStream.getPresenceKey(environmentId);
 
-    const ttl = (env.DEV_PRESENCE_POLL_INTERVAL_MS / 1000) * 2;
+    const ttl = env.DEV_PRESENCE_TTL_MS / 1000;
 
     return {
       beforeStream: async () => {

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev.presence.tsx

@@ -8,8 +8,8 @@ import { createSSELoader, type SendFunction } from "~/utils/sse";
 import Redis from "ioredis";
 
 export const loader = createSSELoader({
-  timeout: env.DEV_PRESENCE_TTL_MS,
-  interval: env.DEV_PRESENCE_POLL_INTERVAL_MS,
+  timeout: env.DEV_PRESENCE_SSE_TIMEOUT,
+  interval: env.DEV_PRESENCE_POLL_MS,
   debug: true,
   handler: async ({ id, controller, debug, request, params }) => {
     const userId = await requireUserId(request);