Fix thread loading flash

apps/web/src/routes/_chat.$environmentId.$threadId.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import ChatView from "../components/ChatView";
 import { threadHasStarted } from "../components/ChatView.logic";
 import { finalizePromotedDraftThreadByRef, useComposerDraftStore } from "../composerDraftStore";
-import { resolveThreadRouteRef } from "../threadRoutes";
+import { resolveThreadRouteRef, resolveThreadRouteRenderState } from "../threadRoutes";
 import { SidebarInset } from "~/components/ui/sidebar";
 import { useEnvironmentThreadRefs, useThreadDetail, useThreadShell } from "../state/entities";
 import { useEnvironmentQuery } from "../state/query";
@@ -37,6 +37,12 @@ function ChatThreadRouteView() {
     return store.hasDraftThreadsInEnvironment(threadRef.environmentId);
   });
   const routeThreadExists = threadExists || draftThreadExists;
+  const renderState = resolveThreadRouteRenderState({
+    bootstrapComplete,
+    serverThreadShellExists: serverThreadShell !== null,
+    serverThreadDetailExists: serverThreadDetail !== null,
+    draftThreadExists,
+  });
   const serverThreadStarted = threadHasStarted(serverThreadDetail);
   const environmentHasAnyThreads = environmentHasServerThreads || environmentHasDraftThreads;
 
@@ -57,7 +63,7 @@ function ChatThreadRouteView() {
     finalizePromotedDraftThreadByRef(threadRef);
   }, [draftThread, serverThreadStarted, threadRef]);
 
-  if (!threadRef || !bootstrapComplete || !routeThreadExists) {
+  if (!threadRef || renderState !== "ready") {
     return null;
   }
 

apps/web/src/threadRoutes.test.ts

@@ -7,6 +7,7 @@ import {
   buildDraftThreadRouteParams,
   buildThreadRouteParams,
   resolveActiveThreadRouteRef,
+  resolveThreadRouteRenderState,
   resolveThreadRouteRef,
   resolveThreadRouteTarget,
 } from "./threadRoutes";
@@ -92,4 +93,53 @@ describe("threadRoutes", () => {
       }),
     ).toBeNull();
   });
+
+  it("keeps shell-only server threads in the loading state", () => {
+    expect(
+      resolveThreadRouteRenderState({
+        bootstrapComplete: true,
+        serverThreadShellExists: true,
+        serverThreadDetailExists: false,
+        draftThreadExists: false,
+      }),
+    ).toBe("loading");
+  });
+
+  it("renders server details and local drafts when they are ready", () => {
+    expect(
+      resolveThreadRouteRenderState({
+        bootstrapComplete: true,
+        serverThreadShellExists: true,
+        serverThreadDetailExists: true,
+        draftThreadExists: false,
+      }),
+    ).toBe("ready");
+    expect(
+      resolveThreadRouteRenderState({
+        bootstrapComplete: true,
+        serverThreadShellExists: false,
+        serverThreadDetailExists: false,
+        draftThreadExists: true,
+      }),
+    ).toBe("ready");
+  });
+
+  it("distinguishes bootstrap loading from a missing thread", () => {
+    expect(
+      resolveThreadRouteRenderState({
+        bootstrapComplete: false,
+        serverThreadShellExists: false,
+        serverThreadDetailExists: false,
+        draftThreadExists: false,
+      }),
+    ).toBe("loading");
+    expect(
+      resolveThreadRouteRenderState({
+        bootstrapComplete: true,
+        serverThreadShellExists: false,
+        serverThreadDetailExists: false,
+        draftThreadExists: false,
+      }),
+    ).toBe("missing");
+  });
 });

apps/web/src/threadRoutes.ts

@@ -18,6 +18,23 @@ type DraftThreadRouteState = {
   promotedTo?: ScopedThreadRef | null;
 };
 
+export type ThreadRouteRenderState = "loading" | "ready" | "missing";
+
+export function resolveThreadRouteRenderState(input: {
+  bootstrapComplete: boolean;
+  serverThreadShellExists: boolean;
+  serverThreadDetailExists: boolean;
+  draftThreadExists: boolean;
+}): ThreadRouteRenderState {
+  if (!input.bootstrapComplete) {
+    return "loading";
+  }
+  if (input.serverThreadDetailExists || input.draftThreadExists) {
+    return "ready";
+  }
+  return input.serverThreadShellExists ? "loading" : "missing";
+}
+
 export function buildThreadRouteParams(ref: ScopedThreadRef): {
   environmentId: EnvironmentId;
   threadId: ThreadId;