{ if (event.target !== event.currentTarget) return; if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); handleToggle(); } }} className={cn( 'cursor-pointer', 'group/header relative grid min-h-9 w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 overflow-hidden px-3 py-2', 'bg-transparent', 'text-muted-foreground hover:text-foreground', isSelected ? 'bg-[var(--interactive-selection)]/35' : null )} >

{isExpanded ? ( ) : ( )} {descriptor.code} {(() => { const lastSlash = file.path.lastIndexOf('/'); if (lastSlash === -1) { return ( {file.path} ); } const dir = file.path.slice(0, lastSlash); const name = file.path.slice(lastSlash + 1); return ( {dir} / {name} ); })()}

{formatDiffTotals(file.insertions, file.deletions)} {showOpenInEditorAction && onOpenInEditor ? ( ) : null} { const nextLayout: 'inline' | 'side-by-side' = mode === 'side-by-side' ? 'side-by-side' : 'inline'; setDiffFileLayout(file.path, nextLayout); }} className="opacity-70" />

{isExpanded && (

{!isMounted && !diffLoadError ? (

) : null} {diffLoadError ? (

{t('diffView.state.failedToLoadDiff')}

{diffLoadError}

) : null} {isMounted && isLoading && !diffData && !diffLoadError ? (

{t('diffView.state.loadingDiff')}

) : null} {isMounted && diffData && !forceRenderLarge && (file.insertions + file.deletions) > LARGE_DIFF_CHANGED_LINES ? (

{t('diffView.state.largeDiff', { count: file.insertions + file.deletions })}

{t('diffView.state.largeDiffDescription')}

) : null} {isMounted && diffData && (forceRenderLarge || (file.insertions + file.deletions) <= LARGE_DIFF_CHANGED_LINES) ? ( <>

) : null}

)}

); }); interface DiffViewProps { hideStackedFileSidebar?: boolean; stackedDefaultCollapsedAll?: boolean; pinSelectedFileHeaderToTopOnNavigate?: boolean; showOpenInEditorAction?: boolean; diffScope?: DiffScope; onDiffScopeChange?: (scope: Extract) => void; targetFilePath?: string | null; /** Render diff content flush with the container edges (no outer padding). */ flushContent?: boolean; } export const DiffView: React.FC = ({ hideStackedFileSidebar = false, stackedDefaultCollapsedAll = false, pinSelectedFileHeaderToTopOnNavigate = false, showOpenInEditorAction = false, diffScope = 'all', onDiffScopeChange, targetFilePath = null, flushContent = false, }) => { const { t } = useI18n(); const { git, files } = useRuntimeAPIs(); const effectiveDirectory = useEffectiveDirectory(); const { screenWidth, isMobile } = useDeviceInfo(); const isGitRepo = useIsGitRepo(effectiveDirectory ?? null); const status = useGitStatus(effectiveDirectory ?? null); const isLoadingStatus = useGitLoadingStatus(effectiveDirectory ?? null); const setActiveDirectory = useGitStore((state) => state.setActiveDirectory); const ensureStatus = useGitStore((state) => state.ensureStatus); const fetchStatus = useGitStore((state) => state.fetchStatus); const setDiff = useGitStore((state) => state.setDiff); const [displayFile, setDisplayFile] = React.useState(null); const [displayFileStaged, setDisplayFileStaged] = React.useState(false); const [pinnedStackedTarget, setPinnedStackedTarget] = React.useState(null); const [expandedFiles, setExpandedFiles] = React.useState>(() => new Set()); const [mountedStackedFiles, setMountedStackedFiles] = React.useState>(() => new Set()); const [loadFullFiles, setLoadFullFiles] = React.useState(false); const [scrollRequestNonce, setScrollRequestNonce] = React.useState(0); const [reviewDialogOpen, setReviewDialogOpen] = React.useState(false); const [reviewFlowSubmitting, setReviewFlowSubmitting] = React.useState(false); const pendingDiffFile = useUIStore((state) => state.pendingDiffFile); const pendingDiffStaged = useUIStore((state) => state.pendingDiffStaged); const setPendingDiffFile = useUIStore((state) => state.setPendingDiffFile); const diffLayoutPreference = useUIStore((state) => state.diffLayoutPreference); const diffFileLayout = useUIStore((state) => state.diffFileLayout); const setDiffFileLayout = useUIStore((state) => state.setDiffFileLayout); const diffWrapLinesStore = useUIStore((state) => state.diffWrapLines); const setDiffWrapLines = useUIStore((state) => state.setDiffWrapLines); const openContextFileAtLine = useUIStore((state) => state.openContextFileAtLine); const currentSessionId = useSessionUIStore((state) => state.currentSessionId); const diffWrapLines = diffWrapLinesStore; const forcedStaged = diffScope === 'staged' ? true : diffScope === 'working' ? false : null; const activeDiffStaged = forcedStaged ?? displayFileStaged; const isMobileLayout = isMobile || screenWidth <= 768; const showReviewAction = Boolean(currentSessionId) && !isMobileLayout && !isVSCodeRuntime(); const showFileSidebar = !hideStackedFileSidebar && !isMobileLayout && screenWidth >= 1024; const diffScrollRef = React.useRef(null); const fileSectionRefs = React.useRef(new Map()); const pendingScrollTargetRef = React.useRef(null); const pendingScrollFrameRef = React.useRef(null); const shouldPinAfterAlignRef = React.useRef(false); const visibleSyncFrameRef = React.useRef(null); const stackedStateScopeRef = React.useRef(null); const cancelPendingScrollAlignment = React.useCallback(() => { pendingScrollTargetRef.current = null; shouldPinAfterAlignRef.current = false; setPinnedStackedTarget(null); if (pendingScrollFrameRef.current !== null) { window.cancelAnimationFrame(pendingScrollFrameRef.current); pendingScrollFrameRef.current = null; } }, []); const expandStackedFile = React.useCallback((path: string) => { setExpandedFiles((previous) => { if (previous.has(path)) { return previous; } const next = new Set(previous); next.add(path); return next; }); }, []); const changedFiles: FileEntry[] = React.useMemo(() => { if (!status?.files) return []; const diffStats = status.diffStats ?? {}; const includeFile = diffScope === 'staged' ? isStagedStatusFile : diffScope === 'working' ? isWorkingStatusFile : () => true; return status.files .filter(includeFile) .map((file) => ({ ...file, insertions: diffStats[file.path]?.insertions ?? 0, deletions: diffStats[file.path]?.deletions ?? 0, isNew: isNewStatusFile(file), })) .sort((a, b) => a.path.localeCompare(b.path)); }, [diffScope, status]); const workingFileCount = React.useMemo(() => { if (!status?.files) return 0; return status.files.filter(isWorkingStatusFile).length; }, [status]); const stagedFileCount = React.useMemo(() => { if (!status?.files) return 0; return status.files.filter(isStagedStatusFile).length; }, [status]); const changedFilePathsKey = React.useMemo( () => changedFiles.map((file) => file.path).join('\0'), [changedFiles], ); React.useEffect(() => { const paths = changedFilePathsKey ? changedFilePathsKey.split('\0') : []; const pathSet = new Set(paths); const scopeKey = `${effectiveDirectory ?? ''}:${diffScope}:${stackedDefaultCollapsedAll ? 'collapsed' : 'default'}`; const shouldInitialize = stackedStateScopeRef.current !== scopeKey; stackedStateScopeRef.current = scopeKey; setExpandedFiles((previous) => { if (shouldInitialize) { const defaultExpandedCount = stackedDefaultCollapsedAll ? 0 : getStackedViewDefaultExpandedCount(paths.length); return new Set(paths.slice(0, defaultExpandedCount)); } let changed = false; const next = new Set(); for (const path of previous) { if (!pathSet.has(path)) { changed = true; continue; } next.add(path); } return changed ? next : previous; }); setMountedStackedFiles((previous) => { if (shouldInitialize) { return new Set(); } let changed = false; const next = new Set(); for (const path of previous) { if (!pathSet.has(path)) { changed = true; continue; } next.add(path); } return changed ? next : previous; }); }, [changedFilePathsKey, diffScope, effectiveDirectory, stackedDefaultCollapsedAll]); const syncVisibleStackedFiles = React.useCallback(() => { visibleSyncFrameRef.current = null; const scrollRoot = diffScrollRef.current; if (!scrollRoot) return; const rootRect = scrollRoot.getBoundingClientRect(); const top = rootRect.top - STACKED_DIFF_MOUNT_MARGIN; const bottom = rootRect.bottom + STACKED_DIFF_MOUNT_MARGIN; const next: Record = {}; for (const [path, node] of fileSectionRefs.current) { if (!node || !expandedFiles.has(path)) continue; const rect = node.getBoundingClientRect(); if (rect.bottom < top || rect.top > bottom) continue; next[path] = true; } setMountedStackedFiles((previous) => { let changed = false; const mounted = new Set(previous); for (const path of Object.keys(next)) { if (mounted.has(path)) continue; mounted.add(path); changed = true; } return changed ? mounted : previous; }); }, [expandedFiles]); const queueVisibleStackedFilesSync = React.useCallback(() => { if (typeof window === 'undefined') return; if (visibleSyncFrameRef.current !== null) return; visibleSyncFrameRef.current = window.requestAnimationFrame(syncVisibleStackedFiles); }, [syncVisibleStackedFiles]); React.useEffect(() => { const scrollRoot = diffScrollRef.current; if (!scrollRoot) return; queueVisibleStackedFilesSync(); scrollRoot.addEventListener('scroll', queueVisibleStackedFilesSync, { passive: true }); window.addEventListener('resize', queueVisibleStackedFilesSync); return () => { scrollRoot.removeEventListener('scroll', queueVisibleStackedFilesSync); window.removeEventListener('resize', queueVisibleStackedFilesSync); if (visibleSyncFrameRef.current !== null) { window.cancelAnimationFrame(visibleSyncFrameRef.current); visibleSyncFrameRef.current = null; } }; }, [changedFiles, expandedFiles, queueVisibleStackedFilesSync]); const getLayoutForFile = React.useCallback((file: FileEntry): 'inline' | 'side-by-side' => { const override = diffFileLayout[file.path]; if (override) return override; if (diffLayoutPreference === 'inline') { return 'inline'; } if (diffLayoutPreference === 'side-by-side') { return 'side-by-side'; } const isNarrow = screenWidth < SIDE_BY_SIDE_MIN_WIDTH; if (file.isNew || isNarrow) { return 'inline'; } return 'side-by-side'; }, [diffFileLayout, diffLayoutPreference, screenWidth]); const currentLayoutForAllFiles = React.useMemo<'inline' | 'side-by-side' | null>(() => { if (changedFiles.length === 0) return null; return changedFiles.every((file) => getLayoutForFile(file) === 'side-by-side') ? 'side-by-side' : 'inline'; }, [changedFiles, getLayoutForFile]); // Ensure git status on mount React.useEffect(() => { if (effectiveDirectory) { setActiveDirectory(effectiveDirectory); void ensureStatus(effectiveDirectory, git); } }, [effectiveDirectory, setActiveDirectory, ensureStatus, git]); React.useEffect(() => { if (!effectiveDirectory) { return; } return sessionEvents.onGitRefreshHint((hint) => { if (normalizePath(hint.directory) !== normalizePath(effectiveDirectory)) { return; } void fetchStatus(effectiveDirectory, git); }); }, [effectiveDirectory, fetchStatus, git]); // Handle pending diff file from external navigation React.useEffect(() => { if (diffScope !== 'all') { return; } if (pendingDiffFile) { setDisplayFile(pendingDiffFile); setDisplayFileStaged(pendingDiffStaged); setPendingDiffFile(null); shouldPinAfterAlignRef.current = true; pendingScrollTargetRef.current = pendingDiffFile; expandStackedFile(pendingDiffFile); setScrollRequestNonce((value) => value + 1); } }, [diffScope, expandStackedFile, pendingDiffFile, pendingDiffStaged, setPendingDiffFile]); React.useEffect(() => { if (diffScope === 'all') { return; } const normalizedTarget = targetFilePath?.trim(); if (!normalizedTarget) { return; } setDisplayFile(normalizedTarget); setDisplayFileStaged(diffScope === 'staged'); shouldPinAfterAlignRef.current = true; pendingScrollTargetRef.current = normalizedTarget; expandStackedFile(normalizedTarget); setScrollRequestNonce((value) => value + 1); }, [diffScope, expandStackedFile, targetFilePath]); React.useEffect(() => { if (!displayFile) { return; } const stillExists = changedFiles.some((file) => file.path === displayFile); if (!stillExists) { setDisplayFile(null); setDisplayFileStaged(false); } }, [changedFiles, displayFile]); const registerSectionRef = React.useCallback((path: string, node: HTMLDivElement | null) => { const map = fileSectionRefs.current; if (node) { map.set(path, node); } else { map.delete(path); } queueVisibleStackedFilesSync(); }, [queueVisibleStackedFilesSync]); const handleStackedEntryExpandedChange = React.useCallback((path: string, expanded: boolean) => { cancelPendingScrollAlignment(); setExpandedFiles((previous) => { const hasPath = previous.has(path); if (expanded === hasPath) { return previous; } const next = new Set(previous); if (expanded) { next.add(path); } else { next.delete(path); } return next; }); if (!expanded) { setMountedStackedFiles((previous) => { if (!previous.has(path)) return previous; const next = new Set(previous); next.delete(path); return next; }); } queueVisibleStackedFilesSync(); }, [cancelPendingScrollAlignment, queueVisibleStackedFilesSync]); const handleExpandOrCollapseAll = React.useCallback(() => { cancelPendingScrollAlignment(); setExpandedFiles((previous) => { if (previous.size > 0) { return new Set(); } return new Set(changedFiles.map((file) => file.path)); }); setMountedStackedFiles(new Set()); queueVisibleStackedFilesSync(); }, [cancelPendingScrollAlignment, changedFiles, queueVisibleStackedFilesSync]); const handleStartReviewFlow = React.useCallback(async (execution: ReviewFlowExecution) => { if (!currentSessionId) return; const directory = useSessionUIStore.getState().getDirectoryForSession(currentSessionId) || effectiveDirectory || ''; if (!directory) { toast.error(t('diffView.reviewDialog.toast.noSessionDirectory')); return; } setReviewFlowSubmitting(true); try { await startReviewFlow({ originalSessionID: currentSessionId, directory, providerID: execution.providerID, modelID: execution.modelID, agent: execution.agent || undefined, variant: execution.variant || undefined, generateHandoff: execution.generateHandoff, returnAfterHandoffRequest: execution.generateHandoff, }); setReviewDialogOpen(false); } catch (error) { console.error('[review-flow] failed to start review flow', error); toast.error(error instanceof Error ? error.message : t('diffView.reviewDialog.toast.startFailed')); } finally { setReviewFlowSubmitting(false); } }, [currentSessionId, effectiveDirectory, t]); const scrollToFile = React.useCallback((path: string): boolean => { const node = fileSectionRefs.current.get(path); const scrollRoot = diffScrollRef.current; if (!node || !scrollRoot) { return false; } const rootRect = scrollRoot.getBoundingClientRect(); const nodeRect = node.getBoundingClientRect(); const delta = nodeRect.top - rootRect.top; const maxTop = Math.max(0, scrollRoot.scrollHeight - scrollRoot.clientHeight); scrollRoot.scrollTop = Math.min(maxTop, Math.max(0, scrollRoot.scrollTop + delta)); return true; }, []); React.useEffect(() => { const target = pendingScrollTargetRef.current; if (!target) return; let attempts = 0; const maxAttempts = 20; let cancelled = false; const cancelPending = () => { if (cancelled) { return; } cancelled = true; pendingScrollTargetRef.current = null; shouldPinAfterAlignRef.current = false; setPinnedStackedTarget(null); if (pendingScrollFrameRef.current !== null) { window.cancelAnimationFrame(pendingScrollFrameRef.current); pendingScrollFrameRef.current = null; } }; const tryAlign = () => { if (cancelled) { pendingScrollFrameRef.current = null; return; } const currentTarget = pendingScrollTargetRef.current; if (!currentTarget) { cancelPending(); pendingScrollFrameRef.current = null; return; } const result = scrollToFile(currentTarget); if (!result) { attempts += 1; if (attempts < maxAttempts) { pendingScrollFrameRef.current = window.requestAnimationFrame(tryAlign); } else { cancelPending(); pendingScrollFrameRef.current = null; } return; } if (pinSelectedFileHeaderToTopOnNavigate && shouldPinAfterAlignRef.current) { setPinnedStackedTarget(currentTarget); } cancelPending(); }; pendingScrollFrameRef.current = window.requestAnimationFrame(tryAlign); return () => { cancelled = true; if (pendingScrollFrameRef.current !== null) { window.cancelAnimationFrame(pendingScrollFrameRef.current); pendingScrollFrameRef.current = null; } }; }, [pinSelectedFileHeaderToTopOnNavigate, scrollRequestNonce, scrollToFile]); const handleSelectFile = React.useCallback((value: string) => { void value; }, []); const handleSelectFileAndScroll = React.useCallback((value: string) => { cancelPendingScrollAlignment(); setDisplayFile(value); setDisplayFileStaged(false); shouldPinAfterAlignRef.current = true; pendingScrollTargetRef.current = value; expandStackedFile(value); setScrollRequestNonce((nonce) => nonce + 1); scrollToFile(value); }, [cancelPendingScrollAlignment, expandStackedFile, scrollToFile]); const handleHeaderLayoutChange = React.useCallback((mode: DiffViewMode) => { const nextLayout: 'inline' | 'side-by-side' = mode === 'side-by-side' ? 'side-by-side' : 'inline'; changedFiles.forEach((file) => { setDiffFileLayout(file.path, nextLayout); }); }, [changedFiles, setDiffFileLayout]); const [openingEditorFilePath, setOpeningEditorFilePath] = React.useState(null); const openFileInEditorAtChange = React.useCallback(async (filePath: string, cachedDiffData: DiffData | null) => { if (!effectiveDirectory || !filePath) { return; } setOpeningEditorFilePath(filePath); try { let targetLine: number | null = null; if (cachedDiffData && !cachedDiffData.isBinary && !isImageFile(filePath)) { targetLine = getFirstChangedModifiedLine(cachedDiffData.original, cachedDiffData.modified); } if (targetLine === null) { try { const patchResponse = await git.getGitDiff(effectiveDirectory, { path: filePath, staged: activeDiffStaged, contextLines: 3, }); targetLine = getFirstVisibleModifiedLineFromPatch(patchResponse.diff); } catch { targetLine = null; } } let diffForNavigation = cachedDiffData; if (targetLine === null || !diffForNavigation) { const response = await git.getGitFileDiff(effectiveDirectory, { path: filePath, staged: activeDiffStaged }); diffForNavigation = { original: response.original ?? '', modified: response.modified ?? '', isBinary: response.isBinary, }; if (!activeDiffStaged) { setDiff(effectiveDirectory, filePath, diffForNavigation); } } const resolvedTargetLine = targetLine ?? ((diffForNavigation.isBinary || isImageFile(filePath)) ? 1 : getFirstChangedModifiedLine(diffForNavigation.original, diffForNavigation.modified)); const absolutePath = toAbsolutePath(effectiveDirectory, filePath); const openValidation = await validateContextFileOpen(files, absolutePath); if (!openValidation.ok) { toast.error(getContextFileOpenFailureMessage(openValidation.reason)); return; } openContextFileAtLine( effectiveDirectory, absolutePath, resolvedTargetLine, 1, ); } finally { setOpeningEditorFilePath((current) => (current === filePath ? null : current)); } }, [activeDiffStaged, effectiveDirectory, files, git, openContextFileAtLine, setDiff]); const renderStackedDiffView = () => { if (!effectiveDirectory) return null; const getFileStaged = (path: string) => { if (forcedStaged !== null) { return forcedStaged; } return displayFileStaged && path === displayFile; }; return (

{showFileSidebar && (

{t('diffView.section.files')} {changedFiles.length}

)}

{changedFiles.map((file) => ( { void openFileInEditorAtChange(filePath, diffData); }} staged={getFileStaged(file.path)} loadFullFiles={loadFullFiles} /> ))}

); }; const renderContent = () => { if (!effectiveDirectory) { return (

{t('diffView.state.selectSessionDirectory')}

); } if (isLoadingStatus && !status) { return (

{t('diffView.state.loadingRepositoryStatus')}

); } if (isGitRepo === false) { return (

{t('diffView.state.notGitRepository')}

); } if (changedFiles.length === 0) { return (

{t('diffView.state.cleanWorkingTree')}

); } return renderStackedDiffView(); }; return (

{!isMobile && ( diffScope === 'working' || diffScope === 'staged' ? ( ) : (

{isLoadingStatus && !status ? t('diffView.state.loadingChanges') : (changedFiles.length === 1 ? t('diffView.summary.changedFilesSingle', { count: changedFiles.length }) : t('diffView.summary.changedFilesPlural', { count: changedFiles.length }))}

) )} {changedFiles.length > 0 && ( )} {changedFiles.length > 0 && showReviewAction && ( )} {changedFiles.length > 0 && (

{loadFullFiles ? t('diffView.actions.disableFullFiles') : t('diffView.actions.loadFullFiles')}

)} {changedFiles.length > 0 && ( )} {currentLayoutForAllFiles && ( )}

{renderContent()}

); }; // eslint-disable-next-line react-refresh/only-export-components export const useDiffFileCount = (): number => { const { git } = useRuntimeAPIs(); const effectiveDirectory = useEffectiveDirectory(); const setActiveDirectory = useGitStore((state) => state.setActiveDirectory); const ensureStatus = useGitStore((state) => state.ensureStatus); const fileCount = useGitFileCount(effectiveDirectory ?? null); React.useEffect(() => { if (effectiveDirectory) { setActiveDirectory(effectiveDirectory); void ensureStatus(effectiveDirectory, git); } }, [effectiveDirectory, setActiveDirectory, ensureStatus, git]); return fileCount; };