feat(webapp): keep the history spinner on a chat closed mid-turn

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx

@@ -49,7 +49,12 @@ import {
   unreadWorkCount,
 } from "./unread-counts";
 import { AgentPanelColumn } from "./panel-layout";
-import { markerAfterActiveChat, markerAfterActivity } from "./thinking-marker";
+import {
+  markerAfterActiveChat,
+  markerAfterActivity,
+  markerChatId,
+  type ThinkingMarker,
+} from "./thinking-marker";
 import { concurrencyPath } from "~/utils/pathBuilder";
 
 function serializePageContext(pageContext: AgentPageContext): string | undefined {
@@ -150,10 +155,10 @@ export function DashboardAgentPanel({
     [user.id, organization.id, project.id, environment.id, location.pathname, pageContextKey]
   );
 
-  const [thinkingChatId, setThinkingChatId] = useState<string | null>(null);
+  const [thinkingMarker, setThinkingMarker] = useState<ThinkingMarker | null>(null);
   const handleActivityChange = useCallback(
     (chatId: string, activity: TurnActivity | null) => {
-      setThinkingChatId((previous) => markerAfterActivity(previous, chatId, activity));
+      setThinkingMarker((previous) => markerAfterActivity(previous, chatId, activity, Date.now()));
       onTurnActivityChange?.(chatId, activity !== null);
     },
     [onTurnActivityChange]
@@ -168,9 +173,22 @@ export function DashboardAgentPanel({
 
   // Ordering-safe: if the new chat has not reported yet, its own report re-sets the marker.
   useEffect(() => {
-    setThinkingChatId((previous) => markerAfterActiveChat(previous, active?.chatId));
+    setThinkingMarker((previous) => markerAfterActiveChat(previous, active?.chatId, Date.now()));
   }, [active?.chatId]);
 
+  const thinkingChatId = markerChatId(thinkingMarker, active?.chatId, Date.now());
+
+  useEffect(() => {
+    if (thinkingMarker === null || thinkingMarker.chatId === active?.chatId) return;
+    const remaining = thinkingMarker.expiresAt - Date.now();
+    if (remaining <= 0) {
+      setThinkingMarker(null);
+      return;
+    }
+    const timer = window.setTimeout(() => setThinkingMarker(null), remaining);
+    return () => window.clearTimeout(timer);
+  }, [thinkingMarker, active?.chatId]);
+
   const loadHistory = useMemo(
     () =>
       createCoalescedReload(async () => {
@@ -534,7 +552,7 @@ export function DashboardAgentPanel({
         toast.error("We couldn't delete that chat. Try again in a moment.");
         return;
       }
-      setThinkingChatId((previous) => (previous === id ? null : previous));
+      setThinkingMarker((previous) => (previous?.chatId === id ? null : previous));
       if (id === active?.chatId) newChat();
       void loadHistory();
     },

apps/webapp/app/components/dashboard-agent/thinking-marker.test.ts

@@ -1,24 +1,50 @@
 import { describe, expect, it } from "vitest";
-import { markerAfterActiveChat, markerAfterActivity } from "./thinking-marker";
+import { markerAfterActiveChat, markerAfterActivity, markerChatId } from "./thinking-marker";
+import { TOOL_PENDING_DEADLINE_MS } from "./turn-deadlines";
 
 describe("thinking marker", () => {
   it("marks the chat that is working and clears it when the turn settles", () => {
-    const working = markerAfterActivity(null, "chat_1", "working");
-    expect(working).toBe("chat_1");
-    expect(markerAfterActivity(working, "chat_1", null)).toBe(null);
+    const working = markerAfterActivity(null, "chat_1", "working", 0);
+    expect(markerChatId(working, "chat_1", 0)).toBe("chat_1");
+    expect(markerAfterActivity(working, "chat_1", null, 0)).toBe(null);
   });
 
   it("ignores a settled report from another chat", () => {
-    expect(markerAfterActivity("chat_1", "chat_2", null)).toBe("chat_1");
+    const working = markerAfterActivity(null, "chat_1", "working", 0);
+    const other = markerAfterActivity(working, "chat_2", null, 0);
+    expect(markerChatId(other, "chat_2", 0)).toBe("chat_1");
   });
 
-  it("clears the marker when the user switches away mid-turn", () => {
-    // The streaming chat unmounts without reporting null, so only the switch clears it.
-    expect(markerAfterActiveChat("chat_1", "chat_2")).toBe(null);
-    expect(markerAfterActiveChat("chat_1", undefined)).toBe(null);
+  it("keeps the marker when the chat closes mid-turn", () => {
+    const working = markerAfterActivity(null, "chat_1", "working", 0);
+    const closed = markerAfterActiveChat(working, undefined, 1_000);
+    expect(markerChatId(closed, undefined, 1_000)).toBe("chat_1");
+    expect(markerChatId(markerAfterActiveChat(working, "chat_2", 1_000), "chat_2", 1_000)).toBe(
+      "chat_1"
+    );
   });
 
-  it("keeps the marker the chat just reported for itself", () => {
-    expect(markerAfterActiveChat("chat_1", "chat_1")).toBe("chat_1");
+  it("expires a closed marker once activity reports stop", () => {
+    const working = markerAfterActivity(null, "chat_1", "working", 0);
+    const closed = markerAfterActiveChat(working, undefined, 1_000);
+    expect(markerChatId(closed, undefined, 1_000 + TOOL_PENDING_DEADLINE_MS)).toBe(null);
+  });
+
+  it("does not expire the marker while its chat is open", () => {
+    const working = markerAfterActivity(null, "chat_1", "working", 0);
+    expect(markerChatId(working, "chat_1", TOOL_PENDING_DEADLINE_MS * 10)).toBe("chat_1");
+  });
+
+  it("clears the marker when the chat is reopened and already settled", () => {
+    const working = markerAfterActivity(null, "chat_1", "working", 0);
+    const reopened = markerAfterActiveChat(working, "chat_1", 1_000);
+    expect(markerAfterActivity(reopened, "chat_1", null, 1_000)).toBe(null);
+  });
+
+  it("extends the marker when the reopened chat is still streaming", () => {
+    const working = markerAfterActivity(null, "chat_1", "working", 0);
+    const closed = markerAfterActiveChat(working, undefined, 1_000);
+    const streaming = markerAfterActivity(closed, "chat_1", "working", 5_000);
+    expect(markerChatId(streaming, undefined, 1_000 + TOOL_PENDING_DEADLINE_MS)).toBe("chat_1");
   });
 });

apps/webapp/app/components/dashboard-agent/thinking-marker.ts

@@ -1,20 +1,38 @@
 import type { TurnActivity } from "./DashboardAgentMessages";
+import { TOOL_PENDING_DEADLINE_MS } from "./turn-deadlines";
 
 // Which chat the history list shows as busy. Only the mounted chat reports.
 
+export type ThinkingMarker = { chatId: string; expiresAt: number };
+
 export function markerAfterActivity(
-  previous: string | null,
+  previous: ThinkingMarker | null,
   chatId: string,
-  activity: TurnActivity | null
-): string | null {
-  return activity !== null ? chatId : previous === chatId ? null : previous;
+  activity: TurnActivity | null,
+  now: number
+): ThinkingMarker | null {
+  if (activity !== null) return { chatId, expiresAt: now + TOOL_PENDING_DEADLINE_MS };
+  return previous?.chatId === chatId ? null : previous;
 }
 
 // A streaming chat unmounts on a switch without reporting null — the turn carries on
-// server-side — so the marker is dropped once another chat (or the draft) is active.
+// server-side — so the marker stays and runs on the deadline from the moment it detaches.
 export function markerAfterActiveChat(
-  previous: string | null,
-  activeChatId: string | undefined
+  previous: ThinkingMarker | null,
+  activeChatId: string | undefined,
+  now: number
+): ThinkingMarker | null {
+  if (previous === null || previous.chatId === activeChatId) return previous;
+  return { chatId: previous.chatId, expiresAt: now + TOOL_PENDING_DEADLINE_MS };
+}
+
+// The mounted chat's status is live truth, so only a detached marker can expire.
+export function markerChatId(
+  marker: ThinkingMarker | null,
+  activeChatId: string | undefined,
+  now: number
 ): string | null {
-  return previous === activeChatId ? previous : null;
+  if (marker === null) return null;
+  if (marker.chatId === activeChatId) return marker.chatId;
+  return marker.expiresAt > now ? marker.chatId : null;
 }