Refresh diff overlay on staging timeline events

Author: bohutang

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

@@ -21,6 +21,7 @@ describe('DiffOverlay', () => {
     (window as any).electronAPI = {
       events: {
         onGitStatusUpdated: vi.fn(),
+        onTimelineEvent: vi.fn(),
       },
     };
   });
@@ -81,4 +82,38 @@ describe('DiffOverlay', () => {
       expect((API.sessions.getDiff as any).mock.calls.length).toBeGreaterThan(callsBefore);
     });
   });
+
+  it('refreshes when git staging timeline events arrive while open', async () => {
+    const onTimelineEvent = (window as any).electronAPI.events.onTimelineEvent as any;
+    let cb: ((data: any) => void) | null = null;
+    onTimelineEvent.mockImplementation((fn: any) => {
+      cb = fn;
+      return () => {};
+    });
+
+    render(
+      <DiffOverlay
+        isOpen={true}
+        sessionId="s1"
+        filePath="a.txt"
+        target={{ kind: 'working', scope: 'all' } as any}
+        onClose={vi.fn()}
+        files={[]}
+      />
+    );
+
+    await waitFor(() => {
+      expect(onTimelineEvent).toHaveBeenCalled();
+    });
+
+    const callsBefore = (API.sessions.getDiff as any).mock.calls.length;
+    await act(async () => {
+      cb?.({ sessionId: 's1', event: { kind: 'git.command', status: 'finished', meta: { source: 'gitStaging' } } });
+      await new Promise((r) => setTimeout(r, 120));
+    });
+
+    await waitFor(() => {
+      expect((API.sessions.getDiff as any).mock.calls.length).toBeGreaterThan(callsBefore);
+    });
+  });
 });

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

@@ -250,6 +250,33 @@ export const DiffOverlay: React.FC<DiffOverlayProps> = React.memo(({
     };
   }, [isOpen, sessionId, target, filePath, handleRefresh]);
 
+  // Fallback: staging operations always record a timeline event, while status updates can be throttled/skipped.
+  // This keeps the overlay in sync when users stage/unstage via the RightPanel checkboxes.
+  useEffect(() => {
+    if (!isOpen || !sessionId || !target) return;
+    if (target.kind !== 'working' || !filePath) return;
+    const unsub = window.electronAPI?.events?.onTimelineEvent?.((data) => {
+      if (!data || data.sessionId !== sessionId) return;
+      const e = data.event as { kind?: unknown; status?: unknown; meta?: unknown } | undefined;
+      if (!e || e.kind !== 'git.command') return;
+      if (e.status !== 'finished' && e.status !== 'failed') return;
+      const meta = (e.meta || {}) as Record<string, unknown>;
+      const source = typeof meta.source === 'string' ? meta.source : '';
+      if (source !== 'gitStaging') return;
+
+      if (overlayRefreshTimerRef.current) {
+        window.clearTimeout(overlayRefreshTimerRef.current);
+      }
+      overlayRefreshTimerRef.current = window.setTimeout(() => {
+        overlayRefreshTimerRef.current = null;
+        void handleRefresh();
+      }, 80);
+    });
+    return () => {
+      if (unsub) unsub();
+    };
+  }, [isOpen, sessionId, target, filePath, handleRefresh]);
+
   if (!isOpen) return null;
 
   const workingScope = target?.kind === 'working' ? (target.scope || 'all') : null;