fix(webapp): cancel a dashboard agent turn when the user leaves the page

Closing the panel or switching chat keeps the turn — that is what the unread dot is for. Only a deliberate stop and navigating away end it.

Author: kathiekiwi

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

@@ -7,7 +7,7 @@ import {
   type SuggestedPrompt,
   type WatchSpec,
 } from "@internal/dashboard-agent-contracts";
-import { useNavigate } from "@remix-run/react";
+import { useLocation, useNavigate } from "@remix-run/react";
 import { useTriggerChatTransport } from "@trigger.dev/sdk/chat/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useToast } from "~/components/primitives/Toast";
@@ -27,6 +27,7 @@ import {
   hasOpenInvestigation,
   pollSettledTranscript,
 } from "./settled-transcript";
+import { teardownCancelsTurn, unmountTeardown } from "./turn-teardown";
 import { useAgentMessageQuota } from "./useAgentMessageQuota";
 import { useTriggerUriResolver } from "./useTriggerUriResolver";
 import { WatchChips, type WatchChip } from "./WatchChips";
@@ -99,6 +100,7 @@ export function DashboardAgentChat({
 }) {
   const [input, setInput] = useState("");
   const navigate = useNavigate();
+  const location = useLocation();
   const toast = useToast();
 
   const prefilledSeq = useRef<number | undefined>(undefined);
@@ -307,6 +309,23 @@ export function DashboardAgentChat({
     aiStop();
   }, [transport, chatId, aiStop]);
 
+  // The path this chat last rendered on. React never unmounts on a page teardown, so an
+  // unmount whose live URL has moved is the router having navigated out from under it.
+  const renderedPathRef = useRef(location.pathname);
+  renderedPathRef.current = location.pathname;
+
+  const teardownRef = useRef<() => void>(() => {});
+  teardownRef.current = () => {
+    if (status !== "streaming" && status !== "submitted") return;
+    const reason = unmountTeardown({
+      renderedPath: renderedPathRef.current,
+      livePath: window.location.pathname,
+    });
+    if (!teardownCancelsTurn(reason)) return;
+    stop();
+  };
+  useEffect(() => () => teardownRef.current(), []);
+
   // Read by the settle effect, which must not re-run when the transcript changes.
   const messagesRef = useRef(messages);
   messagesRef.current = messages;

apps/webapp/app/components/dashboard-agent/turn-teardown.test.ts

@@ -0,0 +1,69 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { teardownCancelsTurn, unmountTeardown } from "./turn-teardown";
+
+describe("teardownCancelsTurn", () => {
+  it("cancels when the user clicks Stop", () => {
+    expect(teardownCancelsTurn("stop-clicked")).toBe(true);
+  });
+
+  it("keeps the turn when the panel closes", () => {
+    expect(teardownCancelsTurn("panel-closed")).toBe(false);
+  });
+
+  it("keeps the turn when the panel changes chat", () => {
+    expect(teardownCancelsTurn("chat-switched")).toBe(false);
+  });
+
+  it("cancels when the user has left the page", () => {
+    expect(teardownCancelsTurn("navigated-away")).toBe(true);
+  });
+});
+
+describe("unmountTeardown", () => {
+  const path = "/orgs/acme/projects/api/env/prod/runs";
+
+  it("reads an unmount on the same path as the panel closing", () => {
+    expect(unmountTeardown({ renderedPath: path, livePath: path })).toBe("panel-closed");
+  });
+
+  it("reads an unmount after the URL moved as a navigation", () => {
+    expect(unmountTeardown({ renderedPath: path, livePath: "/orgs/acme/settings" })).toBe(
+      "navigated-away"
+    );
+  });
+
+  it("ignores the query string, so filtering a page is not leaving it", () => {
+    // Both sides are pathnames; a filter change never reaches this comparison.
+    expect(unmountTeardown({ renderedPath: path, livePath: path })).toBe("panel-closed");
+  });
+});
+
+/**
+ * Structural guards, not behavioural proof: the wiring depends on when React runs the cleanup
+ * relative to the router, which these assertions pin down without rendering anything.
+ */
+describe("the chat cancels its turn only on the teardowns that say so", () => {
+  const chat = readFileSync(new URL("./DashboardAgentChat.tsx", import.meta.url), "utf8");
+
+  it("decides through the shared rule rather than unmounting straight into a stop", () => {
+    expect(chat).toContain("teardownCancelsTurn(");
+    expect(chat).toContain("unmountTeardown({");
+  });
+
+  it("compares the last rendered path against the live one", () => {
+    expect(chat).toContain("renderedPath: renderedPathRef.current");
+    expect(chat).toContain("livePath: window.location.pathname");
+  });
+
+  it("runs the cleanup once, not on every path change", () => {
+    const teardown = chat.slice(chat.indexOf("const teardownRef"));
+    expect(teardown).toMatch(
+      /useEffect\(\s*\(\)\s*=>\s*\(\)\s*=>\s*teardownRef\.current\(\),\s*\[\]\)/
+    );
+  });
+
+  it("cancels nothing when no turn is in flight", () => {
+    expect(chat).toContain('if (status !== "streaming" && status !== "submitted") return;');
+  });
+});

apps/webapp/app/components/dashboard-agent/turn-teardown.ts

@@ -0,0 +1,19 @@
+/** Why a chat with a turn in flight is going away. */
+export type TurnTeardown = "stop-clicked" | "panel-closed" | "chat-switched" | "navigated-away";
+
+/**
+ * A turn that finishes behind a closed panel is what the launcher dot exists for, so only a
+ * deliberate stop and leaving the page end it early.
+ */
+export function teardownCancelsTurn(reason: TurnTeardown): boolean {
+  return reason === "stop-clicked" || reason === "navigated-away";
+}
+
+/**
+ * The three unmounts look identical from inside React. A navigation has already moved the URL
+ * by the time the cleanup runs; closing the panel and switching chat leave it alone, and since
+ * both keep the turn they share one branch.
+ */
+export function unmountTeardown(paths: { renderedPath: string; livePath: string }): TurnTeardown {
+  return paths.renderedPath === paths.livePath ? "panel-closed" : "navigated-away";
+}