Only show the disconnected banner on v3 if the run is not completed

Author: matt-aitken

apps/webapp/app/components/DevPresence.tsx

@@ -96,7 +96,13 @@ export function useDevPresence() {
 /**
  * We need this for the legacy v1 engine, where we show the banner after a delay if there are no events.
  */
-export function useCrossEngineIsConnected({ logCount }: { logCount: number }) {
+export function useCrossEngineIsConnected({
+  isCompleted,
+  logCount,
+}: {
+  isCompleted: boolean;
+  logCount: number;
+}) {
   const project = useProject();
   const environment = useEnvironment();
   const { isConnected } = useDevPresence();
@@ -111,6 +117,11 @@ export function useCrossEngineIsConnected({ logCount }: { logCount: number }) {
     }
 
     if (project.engine === "V1") {
+      if (isCompleted) {
+        setCrossEngineIsConnected(true);
+        return;
+      }
+
       if (logCount <= 1) {
         const timer = setTimeout(() => {
           setCrossEngineIsConnected(false);
@@ -120,7 +131,7 @@ export function useCrossEngineIsConnected({ logCount }: { logCount: number }) {
         setCrossEngineIsConnected(true);
       }
     }
-  }, [environment.type, project.engine, logCount, isConnected]);
+  }, [environment.type, project.engine, logCount, isConnected, isCompleted]);
 
   return crossEngineIsConnected;
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -188,7 +188,10 @@ export default function Page() {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
-  const isConnected = useCrossEngineIsConnected({ logCount: trace?.events.length ?? 0 });
+  const isConnected = useCrossEngineIsConnected({
+    logCount: trace?.events.length ?? 0,
+    isCompleted: run.completedAt !== null,
+  });
 
   return (
     <>