Fix citation navigation to parsed chunk list

src/components/chunks-panel.test.ts

@@ -506,6 +506,47 @@ describe("ChunksPanel", () => {
     expect(screen.getByTestId("chunk-card-shell-robotics_chunk")).toBeTruthy();
   });
 
+  it("switches source-only citation navigation from tree to list view", async () => {
+    mockVisibleVirtualViewport();
+    const chunks = [
+      {
+        chunkId: "image_details_chunk",
+        type: "image",
+        content: "",
+        sectionPath: "images/image-81-__details_.jpg",
+        sourceTitle: "product-manual.pdf",
+      },
+    ];
+    const { rerender } = render(
+      React.createElement(C, {
+        chunks,
+        selectedSource: "product-manual.pdf",
+        citationListViewRequestId: 0,
+      }),
+    );
+
+    expect(
+      screen.getByRole("tree", { name: "Parsed chunk sections" }),
+    ).toBeTruthy();
+
+    rerender(
+      React.createElement(C, {
+        chunks,
+        selectedSource: "product-manual.pdf",
+        citationListViewRequestId: 1,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("tree", { name: "Parsed chunk sections" }),
+      ).toBeNull();
+    });
+    expect(
+      screen.getByTestId("chunk-card-shell-image_details_chunk"),
+    ).toBeTruthy();
+  });
+
   it("shows a large upload target when no document is selected", async () => {
     const user = userEvent.setup();
 

src/components/chunks-panel.tsx

@@ -51,6 +51,7 @@ export type ChunksPanelProps = {
   selectedSourceFile?: SourceOriginalFileView | null;
   focusedChunkId?: string | null;
   focusedChunkRequestId?: number;
+  citationListViewRequestId?: number;
   isLoading?: boolean;
   isLoadingMore?: boolean;
   isLoadingAllChunks?: boolean;
@@ -64,6 +65,7 @@ export type ChunksPanelProps = {
 type ChunkDisplayMode = "list" | "tree";
 
 type ChunkDisplayModeState = {
+  readonly handledCitationListViewRequestId: number;
   readonly handledFocusedChunkRequestId: number;
   readonly mode: ChunkDisplayMode;
 };
@@ -74,6 +76,7 @@ export function ChunksPanel({
   selectedSourceFile = null,
   focusedChunkId = null,
   focusedChunkRequestId = 0,
+  citationListViewRequestId = 0,
   isLoading = false,
   isLoadingMore = false,
   isLoadingAllChunks = false,
@@ -94,6 +97,7 @@ export function ChunksPanel({
   >(null);
   const [chunkDisplayModeState, setChunkDisplayModeState] =
     useState<ChunkDisplayModeState>(() => ({
+      handledCitationListViewRequestId: citationListViewRequestId,
       handledFocusedChunkRequestId:
         focusedChunkId === null ? focusedChunkRequestId : -1,
       mode: "tree",
@@ -152,27 +156,30 @@ export function ChunksPanel({
   }, [rememberOriginalPreview, selectOriginalView]);
   const handleListModeSelected = useCallback((): void => {
     setChunkDisplayModeState({
+      handledCitationListViewRequestId: citationListViewRequestId,
       handledFocusedChunkRequestId: focusedChunkRequestId,
       mode: "list",
     });
-  }, [focusedChunkRequestId]);
+  }, [citationListViewRequestId, focusedChunkRequestId]);
   const handleTreeModeSelected = useCallback((): void => {
     setChunkDisplayModeState({
+      handledCitationListViewRequestId: citationListViewRequestId,
       handledFocusedChunkRequestId: focusedChunkRequestId,
       mode: "tree",
     });
-  }, [focusedChunkRequestId]);
+  }, [citationListViewRequestId, focusedChunkRequestId]);
   const handleTreeChunkFocus = useCallback(
     (chunkId: string | null): void => {
       requestChunkFocus(chunkId);
       if (chunkId !== null) {
         setChunkDisplayModeState({
+          handledCitationListViewRequestId: citationListViewRequestId,
           handledFocusedChunkRequestId: focusedChunkRequestId,
           mode: "list",
         });
       }
     },
-    [focusedChunkRequestId, requestChunkFocus],
+    [citationListViewRequestId, focusedChunkRequestId, requestChunkFocus],
   );
   const canZoomSectionTreeOut: boolean =
     sectionTreeZoomPercent > sectionTreeMinimumZoomPercent;
@@ -218,9 +225,11 @@ export function ChunksPanel({
     [],
   );
   const chunkDisplayMode: ChunkDisplayMode =
-    focusedChunkId !== null &&
-    chunkDisplayModeState.handledFocusedChunkRequestId !==
-      focusedChunkRequestId
+    (focusedChunkId !== null &&
+      chunkDisplayModeState.handledFocusedChunkRequestId !==
+        focusedChunkRequestId) ||
+    chunkDisplayModeState.handledCitationListViewRequestId !==
+      citationListViewRequestId
       ? "list"
       : chunkDisplayModeState.mode;
   const headerTitle = focusedChunkId ? "Referenced Chunks" : "Parsed Chunks";

src/components/workspace-citation-focus.test.ts

@@ -164,6 +164,7 @@ describe("useWorkspaceCitationFocus", () => {
     expect(fetchChunks).not.toHaveBeenCalled();
     expect(selectSource).toHaveBeenLastCalledWith("source_1");
     expect(result.current.prefetchedChunksBySourceId).toEqual({});
+    expect(result.current.citationListViewRequestId).toBe(1);
     expect(result.current.focusedChunk.chunkId).toBeNull();
     expect(result.current.pendingCitationId).toBeNull();
   });

src/components/workspace-citation-focus.ts

@@ -27,6 +27,7 @@ type WorkspaceCitationFocusInput = {
 }
 
 type WorkspaceCitationFocus = {
+  readonly citationListViewRequestId: number
   readonly focusedChunk: FocusedChunkState
   readonly handleCitationClick: (
     citation: ChatCitationView,
@@ -60,6 +61,8 @@ export function useWorkspaceCitationFocus({
   const [pendingCitationId, setPendingCitationId] = useState<string | null>(
     null,
   )
+  const [citationListViewRequestId, setCitationListViewRequestId] =
+    useState<number>(0)
   const [fullChunkLoadingSourceId, setFullChunkLoadingSourceId] = useState<
     string | null
   >(null)
@@ -184,6 +187,7 @@ export function useWorkspaceCitationFocus({
           citation,
         )
         if (!source) return
+        setCitationListViewRequestId((current) => current + 1)
 
         const loadedChunkId = workspaceCitationState.getLoadedCitationChunkId({
           citation,
@@ -260,6 +264,7 @@ export function useWorkspaceCitationFocus({
   )
 
   return {
+    citationListViewRequestId,
     focusedChunk,
     handleCitationClick,
     handleLoadAllChunks,

src/components/workspace-shell-layout.tsx

@@ -56,6 +56,7 @@ export type WorkspaceShellLayoutProps = {
   readonly archivingThreadIds: readonly string[]
   readonly chat: WorkspaceChatState
   readonly chatThreads: readonly ChatThreadView[]
+  readonly citationListViewRequestId: number
   readonly dashboardUrl?: string
   readonly desktopPanelWidths: Readonly<DesktopPanelWidths>
   readonly focusedChunk: FocusedChunkState
@@ -216,6 +217,7 @@ export function WorkspaceShellLayout(
               chunks={[...props.selectedChunks]}
               selectedSource={props.selectedSourceTitle}
               selectedSourceFile={props.selectedSourceFile}
+              citationListViewRequestId={props.citationListViewRequestId}
               focusedChunkId={props.focusedChunk.chunkId}
               focusedChunkRequestId={props.focusedChunk.requestId}
               isLoading={props.isSelectedChunksLoading}
@@ -326,6 +328,7 @@ export function WorkspaceShellLayout(
           chunks={[...props.selectedChunks]}
           selectedSource={props.selectedSourceTitle}
           selectedSourceFile={props.selectedSourceFile}
+          citationListViewRequestId={props.citationListViewRequestId}
           focusedChunkId={props.focusedChunk.chunkId}
           focusedChunkRequestId={props.focusedChunk.requestId}
           isLoading={props.isSelectedChunksLoading}

src/components/workspace-shell.tsx

@@ -128,6 +128,7 @@ function WorkspaceShellContent({
       chatThreads={chatWorkflow.chatThreads}
       desktopPanelWidths={desktopPanelWidths}
       dashboardUrl={dashboardUrl}
+      citationListViewRequestId={citationFocus.citationListViewRequestId}
       focusedChunk={citationFocus.focusedChunk}
       hasMessages={hasMessages}
       hasMoreSelectedChunks={citationFocus.hasMoreSelectedChunks}