Persist changed-files expansion state per thread (#1858)

Author: Marve10s

apps/web/src/components/ChatView.tsx

@@ -172,6 +172,7 @@ const IMAGE_ONLY_BOOTSTRAP_PROMPT =
 const EMPTY_ACTIVITIES: OrchestrationThreadActivity[] = [];
 const EMPTY_PROPOSED_PLANS: Thread["proposedPlans"] = [];
 const EMPTY_PROVIDERS: ServerProvider[] = [];
+const EMPTY_CHANGED_FILES_EXPANDED_BY_TURN_ID: Record<string, boolean> = {};
 const EMPTY_PENDING_USER_INPUT_ANSWERS: Record<string, PendingUserInputDraftAnswer> = {};
 
 type ThreadPlanCatalogEntry = Pick<Thread, "id" | "proposedPlans">;
@@ -574,6 +575,7 @@ export default function ChatView(props: ChatViewProps) {
     () => scopeThreadRef(environmentId, threadId),
     [environmentId, threadId],
   );
+  const routeThreadKey = useMemo(() => scopedThreadKey(routeThreadRef), [routeThreadRef]);
   const composerDraftTarget: ScopedThreadRef | DraftId =
     routeKind === "server" ? routeThreadRef : props.draftId;
   const serverThread = useStore(
@@ -584,10 +586,17 @@ export default function ChatView(props: ChatViewProps) {
   );
   const setStoreThreadError = useStore((store) => store.setError);
   const markThreadVisited = useUiStateStore((store) => store.markThreadVisited);
+  const setThreadChangedFilesExpanded = useUiStateStore(
+    (store) => store.setThreadChangedFilesExpanded,
+  );
   const activeThreadLastVisitedAt = useUiStateStore((store) =>
+    routeKind === "server" ? store.threadLastVisitedAtById[routeThreadKey] : undefined,
+  );
+  const changedFilesExpandedByTurnId = useUiStateStore((store) =>
     routeKind === "server"
-      ? store.threadLastVisitedAtById[scopedThreadKey(scopeThreadRef(environmentId, threadId))]
-      : undefined,
+      ? (store.threadChangedFilesExpandedById[routeThreadKey] ??
+        EMPTY_CHANGED_FILES_EXPANDED_BY_TURN_ID)
+      : EMPTY_CHANGED_FILES_EXPANDED_BY_TURN_ID,
   );
   const settings = useSettings();
   const setStickyComposerModelSelection = useComposerDraftStore(
@@ -981,6 +990,16 @@ export default function ChatView(props: ChatViewProps) {
     [openOrReuseProjectDraftThread],
   );
 
+  const handleSetChangedFilesExpanded = useCallback(
+    (turnId: TurnId, expanded: boolean) => {
+      if (routeKind !== "server") {
+        return;
+      }
+      setThreadChangedFilesExpanded(routeThreadKey, turnId, expanded);
+    },
+    [routeKind, routeThreadKey, setThreadChangedFilesExpanded],
+  );
+
   useEffect(() => {
     if (!serverThread?.id) return;
     if (!latestTurnSettled) return;
@@ -3337,6 +3356,8 @@ export default function ChatView(props: ChatViewProps) {
                 activeThreadEnvironmentId={activeThread.environmentId}
                 expandedWorkGroups={expandedWorkGroups}
                 onToggleWorkGroup={onToggleWorkGroup}
+                changedFilesExpandedByTurnId={changedFilesExpandedByTurnId}
+                onSetChangedFilesExpanded={handleSetChangedFilesExpanded}
                 onOpenTurnDiff={onOpenTurnDiff}
                 revertTurnCountByUserMessageId={revertTurnCountByUserMessageId}
                 onRevertUserMessage={onRevertUserMessage}

apps/web/src/components/chat/MessagesTimeline.test.tsx

@@ -82,6 +82,8 @@ describe("MessagesTimeline", () => {
         nowIso="2026-03-17T19:12:30.000Z"
         expandedWorkGroups={{}}
         onToggleWorkGroup={() => {}}
+        changedFilesExpandedByTurnId={{}}
+        onSetChangedFilesExpanded={() => {}}
         onOpenTurnDiff={() => {}}
         revertTurnCountByUserMessageId={new Map()}
         onRevertUserMessage={() => {}}
@@ -128,6 +130,8 @@ describe("MessagesTimeline", () => {
         nowIso="2026-03-17T19:12:30.000Z"
         expandedWorkGroups={{}}
         onToggleWorkGroup={() => {}}
+        changedFilesExpandedByTurnId={{}}
+        onSetChangedFilesExpanded={() => {}}
         onOpenTurnDiff={() => {}}
         revertTurnCountByUserMessageId={new Map()}
         onRevertUserMessage={() => {}}

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

@@ -77,6 +77,8 @@ interface MessagesTimelineProps {
   nowIso: string;
   expandedWorkGroups: Record<string, boolean>;
   onToggleWorkGroup: (groupId: string) => void;
+  changedFilesExpandedByTurnId: Record<string, boolean>;
+  onSetChangedFilesExpanded: (turnId: TurnId, expanded: boolean) => void;
   onOpenTurnDiff: (turnId: TurnId, filePath?: string) => void;
   revertTurnCountByUserMessageId: Map<MessageId, number>;
   onRevertUserMessage: (messageId: MessageId) => void;
@@ -113,6 +115,8 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   nowIso,
   expandedWorkGroups,
   onToggleWorkGroup,
+  changedFilesExpandedByTurnId,
+  onSetChangedFilesExpanded,
   onOpenTurnDiff,
   revertTurnCountByUserMessageId,
   onRevertUserMessage,
@@ -296,15 +300,6 @@ export const MessagesTimeline = memo(function MessagesTimeline({
 
   const virtualRows = rowVirtualizer.getVirtualItems();
   const nonVirtualizedRows = rows.slice(virtualizedRowCount);
-  const [allDirectoriesExpandedByTurnId, setAllDirectoriesExpandedByTurnId] = useState<
-    Record<string, boolean>
-  >({});
-  const onToggleAllDirectories = useCallback((turnId: TurnId) => {
-    setAllDirectoriesExpandedByTurnId((current) => ({
-      ...current,
-      [turnId]: !(current[turnId] ?? true),
-    }));
-  }, []);
 
   const renderRowContent = (row: TimelineRow) => (
     <div
@@ -466,7 +461,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                   const summaryStat = summarizeTurnDiffStats(checkpointFiles);
                   const changedFileCountLabel = String(checkpointFiles.length);
                   const allDirectoriesExpanded =
-                    allDirectoriesExpandedByTurnId[turnSummary.turnId] ?? true;
+                    changedFilesExpandedByTurnId[turnSummary.turnId] ?? true;
                   return (
                     <div className="mt-2 rounded-lg border border-border/80 bg-card/45 p-2.5">
                       <div className="mb-1.5 flex items-center justify-between gap-2">
@@ -488,7 +483,9 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                             size="xs"
                             variant="outline"
                             data-scroll-anchor-ignore
-                            onClick={() => onToggleAllDirectories(turnSummary.turnId)}
+                            onClick={() =>
+                              onSetChangedFilesExpanded(turnSummary.turnId, !allDirectoriesExpanded)
+                            }
                           >
                             {allDirectoriesExpanded ? "Collapse all" : "Expand all"}
                           </Button>

apps/web/src/components/chat/MessagesTimeline.virtualization.browser.tsx

@@ -61,6 +61,9 @@ function MessagesTimelineBrowserHarness(
   const [expandedWorkGroups, setExpandedWorkGroups] = useState<Record<string, boolean>>(
     () => props.expandedWorkGroups,
   );
+  const [changedFilesExpandedByTurnId, setChangedFilesExpandedByTurnId] = useState<
+    Record<string, boolean>
+  >(() => props.changedFilesExpandedByTurnId);
   const handleToggleWorkGroup = useCallback(
     (groupId: string) => {
       setExpandedWorkGroups((current) => ({
@@ -71,6 +74,16 @@ function MessagesTimelineBrowserHarness(
     },
     [props],
   );
+  const handleSetChangedFilesExpanded = useCallback(
+    (turnId: TurnId, expanded: boolean) => {
+      setChangedFilesExpandedByTurnId((current) => ({
+        ...current,
+        [turnId]: expanded,
+      }));
+      props.onSetChangedFilesExpanded(turnId, expanded);
+    },
+    [props],
+  );
 
   return (
     <div
@@ -84,6 +97,8 @@ function MessagesTimelineBrowserHarness(
         scrollContainer={scrollContainer}
         expandedWorkGroups={expandedWorkGroups}
         onToggleWorkGroup={handleToggleWorkGroup}
+        changedFilesExpandedByTurnId={changedFilesExpandedByTurnId}
+        onSetChangedFilesExpanded={handleSetChangedFilesExpanded}
       />
     </div>
   );
@@ -168,6 +183,8 @@ function createBaseTimelineProps(input: {
     nowIso: isoAt(10_000),
     expandedWorkGroups: input.expandedWorkGroups ?? {},
     onToggleWorkGroup: () => {},
+    changedFilesExpandedByTurnId: {},
+    onSetChangedFilesExpanded: () => {},
     onOpenTurnDiff: () => {},
     revertTurnCountByUserMessageId: new Map(),
     onRevertUserMessage: () => {},

apps/web/src/uiStateStore.test.ts

@@ -6,6 +6,7 @@ import {
   markThreadUnread,
   reorderProjects,
   setProjectExpanded,
+  setThreadChangedFilesExpanded,
   syncProjects,
   syncThreads,
   type UiState,
@@ -16,6 +17,7 @@ function makeUiState(overrides: Partial<UiState> = {}): UiState {
     projectExpandedById: {},
     projectOrder: [],
     threadLastVisitedAtById: {},
+    threadChangedFilesExpandedById: {},
     ...overrides,
   };
 }
@@ -137,13 +139,26 @@ describe("uiStateStore pure functions", () => {
         [thread1]: "2026-02-25T12:35:00.000Z",
         [thread2]: "2026-02-25T12:36:00.000Z",
       },
+      threadChangedFilesExpandedById: {
+        [thread1]: {
+          "turn-1": false,
+        },
+        [thread2]: {
+          "turn-2": false,
+        },
+      },
     });
 
     const next = syncThreads(initialState, [{ key: thread1 }]);
 
     expect(next.threadLastVisitedAtById).toEqual({
       [thread1]: "2026-02-25T12:35:00.000Z",
     });
+    expect(next.threadChangedFilesExpandedById).toEqual({
+      [thread1]: {
+        "turn-1": false,
+      },
+    });
   });
 
   it("syncThreads seeds visit state for unseen snapshot threads", () => {
@@ -183,10 +198,44 @@ describe("uiStateStore pure functions", () => {
       threadLastVisitedAtById: {
         [thread1]: "2026-02-25T12:35:00.000Z",
       },
+      threadChangedFilesExpandedById: {
+        [thread1]: {
+          "turn-1": false,
+        },
+      },
     });
 
     const next = clearThreadUi(initialState, thread1);
 
     expect(next.threadLastVisitedAtById).toEqual({});
+    expect(next.threadChangedFilesExpandedById).toEqual({});
+  });
+
+  it("setThreadChangedFilesExpanded stores collapsed turns per thread", () => {
+    const thread1 = ThreadId.make("thread-1");
+    const initialState = makeUiState();
+
+    const next = setThreadChangedFilesExpanded(initialState, thread1, "turn-1", false);
+
+    expect(next.threadChangedFilesExpandedById).toEqual({
+      [thread1]: {
+        "turn-1": false,
+      },
+    });
+  });
+
+  it("setThreadChangedFilesExpanded removes thread overrides when expanded again", () => {
+    const thread1 = ThreadId.make("thread-1");
+    const initialState = makeUiState({
+      threadChangedFilesExpandedById: {
+        [thread1]: {
+          "turn-1": false,
+        },
+      },
+    });
+
+    const next = setThreadChangedFilesExpanded(initialState, thread1, "turn-1", true);
+
+    expect(next.threadChangedFilesExpandedById).toEqual({});
   });
 });