diff-overlay: reload on filePath change

Author: bohutang

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

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { DiffOverlay } from './DiffOverlay';
+import { API } from '../../utils/api';
+
+vi.mock('../../utils/api', () => ({
+  API: {
+    sessions: {
+      getDiff: vi.fn(),
+      getFileContent: vi.fn(),
+    },
+  },
+}));
+
+describe('DiffOverlay', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (API.sessions.getDiff as any).mockResolvedValue({ success: true, data: { diff: '' } });
+    (API.sessions.getFileContent as any).mockResolvedValue({ success: true, data: { content: 'a\nb\nc' } });
+  });
+
+  it('reloads when filePath changes while open', async () => {
+    const props = {
+      isOpen: true,
+      sessionId: 's1',
+      filePath: 'a.txt',
+      target: { kind: 'working', scope: 'all' } as any,
+      onClose: vi.fn(),
+      files: [],
+    };
+
+    const { rerender } = render(<DiffOverlay {...(props as any)} />);
+
+    await waitFor(() => {
+      expect(API.sessions.getFileContent).toHaveBeenCalledWith('s1', expect.objectContaining({ filePath: 'a.txt' }));
+    });
+
+    rerender(<DiffOverlay {...({ ...props, filePath: 'b.txt' } as any)} />);
+
+    await waitFor(() => {
+      expect(API.sessions.getFileContent).toHaveBeenCalledWith('s1', expect.objectContaining({ filePath: 'b.txt' }));
+    });
+  });
+});
+

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

@@ -149,7 +149,7 @@ export const DiffOverlay: React.FC<DiffOverlayProps> = React.memo(({
     };
 
     loadDiff();
-  }, [isOpen, sessionId, target, onClose]);
+  }, [isOpen, sessionId, target, filePath, onClose]);
 
   const handleRefresh = useCallback(async () => {
     if (!sessionId || !target) return;
@@ -172,6 +172,22 @@ export const DiffOverlay: React.FC<DiffOverlayProps> = React.memo(({
         setDiff(allRes.data?.diff ?? '');
         setStagedDiff(stagedRes.data?.diff ?? '');
         setUnstagedDiff(unstagedRes.data?.diff ?? '');
+
+        // Keep full-file rendering stable during refresh as well.
+        const preferredRef = target.scope === 'untracked' ? 'WORKTREE' : 'HEAD';
+        let sourceRes = await withTimeout(
+          API.sessions.getFileContent(sessionId, { filePath, ref: preferredRef, maxBytes: 1024 * 1024 }),
+          15_000,
+          'Load file content'
+        );
+        if (!sourceRes.success && preferredRef !== 'WORKTREE') {
+          sourceRes = await withTimeout(
+            API.sessions.getFileContent(sessionId, { filePath, ref: 'WORKTREE', maxBytes: 1024 * 1024 }),
+            15_000,
+            'Load file content'
+          );
+        }
+        setFileSource(sourceRes.success ? (sourceRes.data?.content ?? '') : '');
       } else {
         const response = await withTimeout(API.sessions.getDiff(sessionId, target), 15_000, 'Load diff');
         if (response.success && response.data) {
@@ -196,7 +212,7 @@ export const DiffOverlay: React.FC<DiffOverlayProps> = React.memo(({
     } finally {
       setLoading(false);
     }
-  }, [sessionId, target, onClose]);
+  }, [sessionId, target, filePath, onClose]);
 
   const handleCopyPath = useCallback(async () => {
     if (!filePath) return;