fix(web): align composer chip cleanup with undo history

apps/web/src/components/chat/ChatComposer.tsx

@@ -144,7 +144,7 @@ import {
 import { ComposerActivityRow } from "./ComposerActivityStatus";
 import {
   reconcileAttachmentContextReferences,
-  type RetainedAttachmentContextPayloads,
+  useRetainedContextPayloads,
 } from "./composerContextUndo";
 import type { ThreadSyncPhase } from "../../threadSync";
 import { ComposerBanner } from "./ComposerBanner";
@@ -3709,20 +3709,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     setIsComposerScrollCollapsed(false);
   }, [setIsComposerScrollCollapsed]);
 
-  /**
-   * Payloads for chips the prompt no longer references. History undo restores the
-   * reference text but knows nothing about the draft records behind it, so a delete keeps its
-   * payload here and an undo puts it back rather than leaving a dangling chip.
-   */
-  const removedContextPayloadsRef = useRef<{
-    terminals: Map<string, TerminalContextDraft>;
-    reviewComments: Map<string, ReviewCommentContext>;
-    threads: Map<string, ThreadContextRecord>;
-  }>({ terminals: new Map(), reviewComments: new Map(), threads: new Map() });
-  const removedAttachmentContextPayloadsRef = useRef<RetainedAttachmentContextPayloads>({
-    files: new Map(),
-    previewAnnotations: new Map(),
-  });
+  const retainedContextPayloads = useRetainedContextPayloads(composerDraftTargetKey);
 
   const onPromptChange = useCallback(
     (
@@ -3758,15 +3745,14 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         promptHistoryPositionRef.current = null;
       }
       const referenced = new Set(contextIds);
-      const retained = removedContextPayloadsRef.current;
 
       // An undone delete brings the reference back; restore the payload it points at.
       const liveTerminalIds = new Set<string>(
         composerTerminalContexts.map((context) => terminalContextReference(context).contextId),
       );
       const restoredTerminals = [...referenced].flatMap((contextId) => {
         if (liveTerminalIds.has(contextId)) return [];
-        const context = retained.terminals.get(contextId);
+        const context = retainedContextPayloads.terminals.get(contextId);
         return context ? [context] : [];
       });
       const nextTerminals = [
@@ -3777,7 +3763,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       ];
       for (const context of composerTerminalContexts) {
         const contextId = terminalContextReference(context).contextId;
-        if (!referenced.has(contextId)) retained.terminals.set(contextId, context);
+        if (!referenced.has(contextId)) retainedContextPayloads.terminals.set(contextId, context);
       }
       if (
         nextTerminals.length !== composerTerminalContexts.length ||
@@ -3791,15 +3777,16 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       );
       const restoredThreads = [...referenced].flatMap((contextId) => {
         if (liveThreadIds.has(contextId)) return [];
-        const record = retained.threads.get(contextId);
+        const record = retainedContextPayloads.threads.get(contextId);
         return record ? [record] : [];
       });
       const nextThreads = [
         ...composerThreadContexts.filter((record) => referenced.has(record.contextId)),
         ...restoredThreads,
       ];
       for (const record of composerThreadContexts) {
-        if (!referenced.has(record.contextId)) retained.threads.set(record.contextId, record);
+        if (!referenced.has(record.contextId))
+          retainedContextPayloads.threads.set(record.contextId, record);
       }
       if (nextThreads.length !== composerThreadContexts.length || restoredThreads.length > 0) {
         setComposerDraftThreadContexts(composerDraftTarget, nextThreads);
@@ -3808,7 +3795,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       for (const comment of composerReviewComments) {
         const contextId = reviewCommentContextId(comment.id);
         if (!referenced.has(contextId)) {
-          retained.reviewComments.set(contextId, comment);
+          retainedContextPayloads.reviewComments.set(contextId, comment);
           removeComposerDraftReviewComment(composerDraftTarget, comment.id);
         }
       }
@@ -3817,7 +3804,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       );
       for (const contextId of referenced) {
         if (liveReviewIds.has(contextId)) continue;
-        const comment = retained.reviewComments.get(contextId);
+        const comment = retainedContextPayloads.reviewComments.get(contextId);
         if (comment) {
           addComposerDraftReviewComment(composerDraftTarget, comment, { appendReference: false });
         }
@@ -3828,7 +3815,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         files: composerFiles,
         images: composerImages,
         previewAnnotations: composerPreviewAnnotations,
-        retained: removedAttachmentContextPayloadsRef.current,
+        retained: retainedContextPayloads,
       });
       for (const annotationId of attachmentChanges.annotationIdsToRemove) {
         // Keep the upload queue entry alive: undo restores the image that owns it.
@@ -3878,6 +3865,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       addComposerDraftImages,
       addComposerDraftFiles,
       attachmentDraftTarget,
+      retainedContextPayloads,
     ],
   );
 

apps/web/src/components/chat/composerContextUndo.retention.test.tsx

@@ -0,0 +1,61 @@
+// @vitest-environment jsdom
+import { act, useEffect } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it } from "vite-plus/test";
+
+import type { ComposerFileAttachment } from "../../composerDraftStore";
+import { type RetainedContextPayloads, useRetainedContextPayloads } from "./composerContextUndo";
+
+const file = {
+  type: "file",
+  id: "file-1",
+  name: "notes.txt",
+  mimeType: "text/plain",
+  sizeBytes: 5,
+  file: new File(["notes"], "notes.txt", { type: "text/plain" }),
+} satisfies ComposerFileAttachment;
+
+let container: HTMLDivElement;
+let root: Root;
+let current: RetainedContextPayloads;
+
+function Probe({ targetKey }: { targetKey: string }) {
+  const retained = useRetainedContextPayloads(targetKey);
+  useEffect(() => {
+    current = retained;
+  });
+  return null;
+}
+
+beforeEach(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement("div");
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+});
+
+it("keeps deleted payloads for the open draft and releases them when the draft changes", () => {
+  act(() => root.render(<Probe targetKey="thread-a" />));
+  const retained = current;
+  retained.files.set("file:file-1", file);
+
+  act(() => root.render(<Probe targetKey="thread-a" />));
+  expect(current.files.get("file:file-1")).toBe(file);
+
+  act(() => root.render(<Probe targetKey="thread-b" />));
+  expect(retained.files.size).toBe(0);
+  expect(current.files.size).toBe(0);
+});
+
+it("releases deleted payloads when the composer unmounts", () => {
+  act(() => root.render(<Probe targetKey="thread-a" />));
+  const retained = current;
+  retained.files.set("file:file-1", file);
+
+  act(() => root.unmount());
+  expect(retained.files.size).toBe(0);
+  root = createRoot(container);
+});

apps/web/src/components/chat/composerContextUndo.ts

@@ -1,7 +1,10 @@
-import type { PreviewAnnotationPayload } from "@t3tools/contracts";
+import type { PreviewAnnotationPayload, ThreadContextRecord } from "@t3tools/contracts";
+import { useEffect, useState } from "react";
 
 import type { ComposerFileAttachment, ComposerImageAttachment } from "../../composerDraftStore";
 import { fileContextReference, previewAnnotationContextId } from "../../lib/composerContextRecords";
+import type { TerminalContextDraft } from "../../lib/terminalContext";
+import type { ReviewCommentContext } from "../../reviewCommentContext";
 
 interface RetainedPreviewAnnotation {
   annotation: PreviewAnnotationPayload;
@@ -13,6 +16,38 @@ export interface RetainedAttachmentContextPayloads {
   previewAnnotations: Map<string, RetainedPreviewAnnotation>;
 }
 
+export interface RetainedContextPayloads extends RetainedAttachmentContextPayloads {
+  terminals: Map<string, TerminalContextDraft>;
+  reviewComments: Map<string, ReviewCommentContext>;
+  threads: Map<string, ThreadContextRecord>;
+}
+
+/**
+ * Payloads for chips the prompt no longer references. History undo restores the
+ * reference text but knows nothing about the draft records behind it, so a delete keeps its
+ * payload here and an undo puts it back rather than leaving a dangling chip.
+ *
+ * Scoped to one draft: switching drafts or unmounting releases them, so deleted files do not
+ * stay reachable for the composer's whole lifetime.
+ */
+export function useRetainedContextPayloads(draftTargetKey: string): RetainedContextPayloads {
+  const [retained] = useState<RetainedContextPayloads>(() => ({
+    terminals: new Map(),
+    reviewComments: new Map(),
+    threads: new Map(),
+    files: new Map(),
+    previewAnnotations: new Map(),
+  }));
+  useEffect(
+    () => () => {
+      for (const payloads of Object.values(retained)) payloads.clear();
+    },
+    // oxlint-disable-next-line react/exhaustive-effect-dependencies -- Switching drafts releases the previous draft's payloads.
+    [draftTargetKey, retained],
+  );
+  return retained;
+}
+
 export function reconcileAttachmentContextReferences(input: {
   referencedContextIds: ReadonlySet<string>;
   files: ReadonlyArray<ComposerFileAttachment>;