Sync diff ordering and refresh Changes on external staging

Author: bohutang

packages/ui/src/components/layout/DiffOverlay.tsx

@@ -470,6 +470,7 @@ export const DiffOverlay: React.FC<DiffOverlayProps> = React.memo(({
             stagedDiff={stagedDiff ?? undefined}
             unstagedDiff={unstagedDiff ?? undefined}
             fileSources={filePath && fileSource != null ? { [filePath]: fileSource } : undefined}
+            fileOrder={viewerFiles.length > 0 ? viewerFiles.map((f) => f.path) : undefined}
             onChanged={handleRefresh}
           />
         ) : (

packages/ui/src/components/layout/RightPanel.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { RightPanel } from './RightPanel';
 import type { RightPanelProps } from './types';
 import { API } from '../../utils/api';
@@ -35,6 +35,11 @@ describe('RightPanel - Zed-style Changes list', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    (window as any).electronAPI = {
+      events: {
+        onGitStatusUpdated: vi.fn(),
+      },
+    };
     (API.sessions.getExecutions as any).mockResolvedValue({
       success: true,
       data: [
@@ -145,4 +150,50 @@ describe('RightPanel - Zed-style Changes list', () => {
       expect(screen.getByText(/Changes/i)).toBeInTheDocument();
     });
   });
+
+  it('queues a refresh when status updates during an in-flight fetch', async () => {
+    const onGitStatusUpdated = (window as any).electronAPI.events.onGitStatusUpdated as any;
+    let statusCb: ((data: any) => void) | null = null;
+    onGitStatusUpdated.mockImplementation((fn: any) => {
+      statusCb = fn;
+      return () => {};
+    });
+
+    let resolveDiff: ((value: any) => void) | null = null;
+    (API.sessions.getDiff as any).mockImplementation(
+      () =>
+        new Promise((r) => {
+          resolveDiff = r;
+        })
+    );
+
+    render(<RightPanel {...mockProps} />);
+
+    await waitFor(() => {
+      expect(API.sessions.getDiff).toHaveBeenCalled();
+    });
+
+    await act(async () => {
+      statusCb?.({ sessionId: 'test-session', gitStatus: { state: 'modified' } });
+      await new Promise((r) => setTimeout(r, 120));
+    });
+
+    await act(async () => {
+      resolveDiff?.({
+        success: true,
+        data: {
+          workingTree: {
+            staged: [{ path: 'staged1.ts', type: 'modified', additions: 5, deletions: 2 }],
+            unstaged: [{ path: 'unstaged1.ts', type: 'modified', additions: 3, deletions: 1 }],
+            untracked: [{ path: 'new.ts', type: 'added', additions: 10, deletions: 0 }],
+          },
+        },
+      });
+      await new Promise((r) => setTimeout(r, 20));
+    });
+
+    await waitFor(() => {
+      expect((API.sessions.getDiff as any).mock.calls.length).toBeGreaterThan(1);
+    });
+  });
 });

packages/ui/src/components/layout/RightPanel.tsx

@@ -447,6 +447,7 @@ export const RightPanel: React.FC<RightPanelProps> = React.memo(({
   const [isStageChanging, setIsStageChanging] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const loadingRef = useRef(false);
+  const pendingFilesRefreshRef = useRef(false);
   const requestIdRef = useRef(0);
   const historyRequestIdRef = useRef(0);
   const refreshTimerRef = useRef<number | null>(null);
@@ -549,7 +550,14 @@ export const RightPanel: React.FC<RightPanelProps> = React.memo(({
 
   // Fetch files for the selected commit
   const fetchFiles = useCallback(async () => {
-    if (loadingRef.current || !session.id || !selectedTarget) return;
+    if (!session.id || !selectedTarget) return;
+
+    // If a refresh is requested while a previous fetch is in-flight (e.g. external IDE stages/unstages),
+    // queue one more fetch to run after the current request settles.
+    if (loadingRef.current) {
+      pendingFilesRefreshRef.current = true;
+      return;
+    }
 
     const requestId = ++requestIdRef.current;
     loadingRef.current = true;
@@ -647,6 +655,13 @@ export const RightPanel: React.FC<RightPanelProps> = React.memo(({
         setIsLoading(false);
         loadingRef.current = false;
       }
+
+      if (!loadingRef.current && pendingFilesRefreshRef.current) {
+        pendingFilesRefreshRef.current = false;
+        window.setTimeout(() => {
+          void fetchFiles();
+        }, 0);
+      }
     }
   }, [session.id, selectedTarget, fetchCommits]);
 
@@ -897,6 +912,12 @@ export const RightPanel: React.FC<RightPanelProps> = React.memo(({
     return merged;
   }, [trackedFiles, workingTree]);
 
+  const workingFilesForDiffOverlay = useMemo(() => {
+    const tracked = trackedList.map((x) => x.file);
+    const untracked = untrackedList.map((x) => x.file);
+    return [...tracked, ...untracked];
+  }, [trackedList, untrackedList]);
+
   const stageAllState: TriState = useMemo(() => {
     if (!workingTree) return 'unchecked';
     const hasChanges = workingTree.staged.length + workingTree.unstaged.length + workingTree.untracked.length > 0;
@@ -1209,7 +1230,7 @@ export const RightPanel: React.FC<RightPanelProps> = React.memo(({
                             const stage = stageState !== 'checked';
                             void handleChangeFileStage(file.path, stage);
                           }}
-                          onClick={() => handleWorkingFileClick('all', file, trackedList.map((x) => x.file))}
+                          onClick={() => handleWorkingFileClick('all', file, workingFilesForDiffOverlay)}
                           isSelected={selectedFile === file.path && selectedFileScope === 'all'}
                           testId={`right-panel-file-tracked-${file.path}`}
                         />
@@ -1237,7 +1258,7 @@ export const RightPanel: React.FC<RightPanelProps> = React.memo(({
                             const stage = stageState !== 'checked';
                             void handleChangeFileStage(file.path, stage);
                           }}
-                          onClick={() => handleWorkingFileClick('untracked', file, untrackedList.map((x) => x.file))}
+                          onClick={() => handleWorkingFileClick('untracked', file, workingFilesForDiffOverlay)}
                           isSelected={selectedFile === file.path && selectedFileScope === 'untracked'}
                           testId={`right-panel-file-untracked-${file.path}`}
                         />

packages/ui/src/components/panels/diff/ZedDiffViewer.test.tsx

@@ -26,6 +26,21 @@ index 1234567..abcdefg 100644
 +b
  c`;
 
+const SAMPLE_DIFF_TWO_FILES = `diff --git a/b.txt b/b.txt
+index 1234567..abcdefg 100644
+--- a/b.txt
++++ b/b.txt
+@@ -1,1 +1,1 @@
+-x
++y
+diff --git a/a.txt b/a.txt
+index 1234567..abcdefg 100644
+--- a/a.txt
++++ b/a.txt
+@@ -1,1 +1,1 @@
+-x
++y`;
+
 describe('ZedDiffViewer', () => {
   it('renders viewer', () => {
     render(<ZedDiffViewer diff={SAMPLE_DIFF_TWO_HUNKS} />);
@@ -117,4 +132,11 @@ describe('ZedDiffViewer', () => {
     );
     expect(screen.getAllByTestId('diff-hunk-controls')).toHaveLength(2);
   });
+
+  it('orders files based on fileOrder when provided', () => {
+    render(<ZedDiffViewer diff={SAMPLE_DIFF_TWO_FILES} fileOrder={['a.txt', 'b.txt']} />);
+    const headers = screen.getAllByTestId('diff-file-header').map((el) => el.textContent);
+    expect(headers[0]).toBe('a.txt');
+    expect(headers[1]).toBe('b.txt');
+  });
 });

packages/ui/src/components/panels/diff/ZedDiffViewer.tsx

@@ -95,8 +95,9 @@ export const ZedDiffViewer: React.FC<{
   unstagedDiff?: string;
   fileSources?: Record<string, string>;
   scrollToFilePath?: string;
+  fileOrder?: string[];
   onChanged?: () => void;
-}> = ({ diff, className, sessionId, currentScope, stagedDiff, unstagedDiff, fileSources, scrollToFilePath, onChanged }) => {
+}> = ({ diff, className, sessionId, currentScope, stagedDiff, unstagedDiff, fileSources, scrollToFilePath, fileOrder, onChanged }) => {
   const fileHeaderRefs = useRef<Map<string, HTMLElement>>(new Map());
 
   const stagedHunkHeaderBySig = useMemo(() => {
@@ -136,8 +137,27 @@ export const ZedDiffViewer: React.FC<{
   const files = useMemo<FileModel[]>(() => {
     if (!diff || diff.trim() === '') return [];
     const parsed = parseDiff(diff, { nearbySequences: 'zip' });
-
-    return parsed.map((f) => {
+    const ordered = (() => {
+      const order = Array.isArray(fileOrder) ? fileOrder.map((s) => (typeof s === 'string' ? s.trim() : '')).filter(Boolean) : [];
+      if (order.length === 0) return parsed;
+      const idx = new Map<string, number>();
+      order.forEach((p, i) => {
+        if (!idx.has(p)) idx.set(p, i);
+      });
+      return parsed
+        .map((f, originalIndex) => ({ f, originalIndex, path: toFilePath(f) }))
+        .sort((a, b) => {
+          const ai = idx.get(a.path);
+          const bi = idx.get(b.path);
+          if (ai != null && bi != null) return ai - bi;
+          if (ai != null) return -1;
+          if (bi != null) return 1;
+          return a.originalIndex - b.originalIndex;
+        })
+        .map((x) => x.f);
+    })();
+
+    return ordered.map((f) => {
       const path = toFilePath(f);
       const source = fileSources?.[path];
       const expandedHunks = source ? expandToFullFile(f.hunks || [], source) : normalizeHunks(f.hunks || []);