import { parsePatchFiles } from "@pierre/diffs";import { FileDiff, type FileDiffMetadata } from "@pierre/diffs/react";import { Columns2Icon, Rows3Icon, XIcon } from "lucide-react";import { useEffect, useMemo, useRef, useState } from "react";import { isElectron } from "../env";import { useNativeApi } from "../hooks/useNativeApi";import { useTheme } from "../hooks/useTheme";import { deriveTurnDiffSummaries, formatTimestamp, inferCheckpointTurnCountByTurnId,} from "../session-logic";import { useStore } from "../store";import { Button } from "./ui/button";import { Popover, PopoverPopup, PopoverTrigger } from "./ui/popover";import { cn } from "~/lib/utils";import { ToggleGroup, Toggle } from "./ui/toggle-group"; type DiffRenderMode = "stacked" | "split"; type RenderablePatch = | { kind: "files"; files: FileDiffMetadata[]; } | { kind: "raw"; text: string; reason: string; }; function getRenderablePatch(patch: string | undefined): RenderablePatch | null { if (!patch) return null; const normalizedPatch = patch.trim(); if (normalizedPatch.length === 0) return null; try { const parsedPatches = parsePatchFiles(normalizedPatch, "diff-panel"); const files = parsedPatches.flatMap((parsedPatch) => parsedPatch.files); if (files.length > 0) { return { kind: "files", files }; } return { kind: "raw", text: normalizedPatch, reason: "Unsupported diff format. Showing raw patch.", }; } catch { return { kind: "raw", text: normalizedPatch, reason: "Failed to parse patch. Showing raw patch.", }; }} function resolveFileDiffPath(fileDiff: FileDiffMetadata): string { const raw = fileDiff.name ?? fileDiff.prevName ?? ""; if (raw.startsWith("a/") || raw.startsWith("b/")) { return raw.slice(2); } return raw;} function buildCheckpointDiffKey( sessionId: string, fromTurnCount: number, toTurnCount: number,): string { return `${sessionId}:${fromTurnCount}-${toTurnCount}`;} interface DiffPanelProps { mode?: "inline" | "sheet";} export default function DiffPanel({ mode = "inline" }: DiffPanelProps) { const api = useNativeApi(); const { resolvedTheme } = useTheme(); const { state, dispatch } = useStore(); const [checkpointDiffByKey, setCheckpointDiffByKey] = useState<Record<string, string>>({}); const [isLoadingCheckpointDiff, setIsLoadingCheckpointDiff] = useState(false); const [checkpointDiffError, setCheckpointDiffError] = useState<string | null>(null); const [diffRenderMode, setDiffRenderMode] = useState<DiffRenderMode>("stacked"); const patchViewportRef = useRef<HTMLDivElement>(null); const activeThread = state.threads.find((thread) => thread.id === state.activeThreadId); const turnDiffSummaries = useMemo( () => activeThread?.turnDiffSummaries.length ? activeThread.turnDiffSummaries : deriveTurnDiffSummaries(activeThread?.events ?? []), [activeThread?.events, activeThread?.turnDiffSummaries], ); const inferredCheckpointTurnCountByTurnId = useMemo( () => inferCheckpointTurnCountByTurnId(turnDiffSummaries), [turnDiffSummaries], ); useEffect(() => { setCheckpointDiffByKey({}); setCheckpointDiffError(null); }, [activeThread?.id]); const canApplyStoredTarget = Boolean(activeThread && state.diffThreadId === activeThread.id); const selectedTurnId = canApplyStoredTarget ? state.diffTurnId : null; const selectedFilePath = canApplyStoredTarget && selectedTurnId !== null ? state.diffFilePath : null; const selectedTurn = selectedTurnId === null ? undefined : (turnDiffSummaries.find((summary) => summary.turnId === selectedTurnId) ?? turnDiffSummaries[0]); const selectedCheckpointTurnCount = selectedTurn && (selectedTurn.checkpointTurnCount ?? inferredCheckpointTurnCountByTurnId[selectedTurn.turnId]); const selectedCheckpointRange = useMemo( () => typeof selectedCheckpointTurnCount === "number" ? { fromTurnCount: Math.max(0, selectedCheckpointTurnCount - 1), toTurnCount: selectedCheckpointTurnCount, } : null, [selectedCheckpointTurnCount], ); const conversationCheckpointTurnCount = useMemo(() => { const turnCounts = turnDiffSummaries .map( (summary) => summary.checkpointTurnCount ?? inferredCheckpointTurnCountByTurnId[summary.turnId], ) .filter((value): value is number => typeof value === "number"); if (turnCounts.length === 0) { return undefined; } const latest = Math.max(...turnCounts); return latest > 0 ? latest : undefined; }, [inferredCheckpointTurnCountByTurnId, turnDiffSummaries]); const conversationCheckpointRange = useMemo( () => !selectedTurn && typeof conversationCheckpointTurnCount === "number" ? { fromTurnCount: 0, toTurnCount: conversationCheckpointTurnCount, } : null, [conversationCheckpointTurnCount, selectedTurn], ); const selectedCheckpointDiffKey = activeThread?.session?.sessionId && selectedCheckpointRange ? buildCheckpointDiffKey( activeThread.session.sessionId, selectedCheckpointRange.fromTurnCount, selectedCheckpointRange.toTurnCount, ) : null; const conversationCheckpointDiffKey = activeThread?.session?.sessionId && conversationCheckpointRange ? buildCheckpointDiffKey( activeThread.session.sessionId, conversationCheckpointRange.fromTurnCount, conversationCheckpointRange.toTurnCount, ) : null; const selectedTurnCheckpointDiff = selectedCheckpointDiffKey === null ? undefined : checkpointDiffByKey[selectedCheckpointDiffKey]; const conversationCheckpointDiff = conversationCheckpointDiffKey === null ? undefined : checkpointDiffByKey[conversationCheckpointDiffKey]; const selectedPatch = useMemo(() => { const patchForSummary = (summary: (typeof turnDiffSummaries)[number]): string | undefined => { const checkpointTurnCount = summary.checkpointTurnCount ?? inferredCheckpointTurnCountByTurnId[summary.turnId]; if (activeThread?.session?.sessionId && typeof checkpointTurnCount === "number") { const checkpointPatch = checkpointDiffByKey[ buildCheckpointDiffKey( activeThread.session.sessionId, Math.max(0, checkpointTurnCount - 1), checkpointTurnCount, ) ]; if (checkpointPatch) { return checkpointPatch; } } if (summary.unifiedDiff) { return summary.unifiedDiff; } const filePatches = summary.files .map((file) => file.diff?.trim()) .filter((patch): patch is string => Boolean(patch)); if (filePatches.length === 0) { return undefined; } return filePatches.join("\n\n"); }; if (selectedTurn) { return selectedTurnCheckpointDiff ?? patchForSummary(selectedTurn); } if (conversationCheckpointDiff) { return conversationCheckpointDiff; } // Fallback when a conversation checkpoint diff isn't available yet: // keep one patch per file path (latest change wins) so files aren't duplicated. const latestPatchByPath = new Map<string, string>(); for (const summary of turnDiffSummaries) { for (const file of summary.files) { if (latestPatchByPath.has(file.path)) { continue; } const patch = file.diff?.trim(); if (!patch) { continue; } latestPatchByPath.set(file.path, patch); } } if (latestPatchByPath.size > 0) { return Array.from(latestPatchByPath.entries()) .toSorted(([leftPath], [rightPath]) => leftPath.localeCompare(rightPath, undefined, { numeric: true, sensitivity: "base" }), ) .map(([, patch]) => patch) .join("\n\n"); } const patches = turnDiffSummaries .toReversed() .map((summary) => patchForSummary(summary)?.trim()) .filter((patch): patch is string => Boolean(patch)); if (patches.length === 0) { return undefined; } return patches.join("\n\n"); }, [ activeThread?.session?.sessionId, checkpointDiffByKey, conversationCheckpointDiff, inferredCheckpointTurnCountByTurnId, selectedTurn, selectedTurnCheckpointDiff, turnDiffSummaries, ]); const renderablePatch = useMemo(() => getRenderablePatch(selectedPatch), [selectedPatch]); const renderableFiles = useMemo(() => { if (!renderablePatch || renderablePatch.kind !== "files") { return []; } return renderablePatch.files.toSorted((left, right) => resolveFileDiffPath(left).localeCompare(resolveFileDiffPath(right), undefined, { numeric: true, sensitivity: "base", }), ); }, [renderablePatch]); useEffect(() => { const checkpointFetchRange = selectedTurn ? selectedCheckpointRange : conversationCheckpointRange; const checkpointFetchKey = selectedTurn ? selectedCheckpointDiffKey : conversationCheckpointDiffKey; if (!api || !activeThread?.session?.sessionId || !checkpointFetchRange || !checkpointFetchKey) { return; } if (checkpointDiffByKey[checkpointFetchKey] !== undefined) { return; } let cancelled = false; setIsLoadingCheckpointDiff(true); setCheckpointDiffError(null); void api.providers .getCheckpointDiff({ sessionId: activeThread.session.sessionId, fromTurnCount: checkpointFetchRange.fromTurnCount, toTurnCount: checkpointFetchRange.toTurnCount, }) .then((result) => { if (cancelled) return; setCheckpointDiffByKey((previous) => ({ ...previous, [checkpointFetchKey]: result.diff, })); if (selectedTurn) { dispatch({ type: "SET_THREAD_TURN_CHECKPOINT_DIFFS", threadId: activeThread.id, checkpointDiffByTurnId: { [selectedTurn.turnId]: result.diff, }, }); } }) .catch((error) => { if (cancelled) return; setCheckpointDiffError( error instanceof Error ? error.message : "Failed to load checkpoint diff.", ); }) .finally(() => { if (cancelled) return; setIsLoadingCheckpointDiff(false); }); return () => { cancelled = true; }; }, [ activeThread?.id, activeThread?.session?.sessionId, api, checkpointDiffByKey, conversationCheckpointDiffKey, conversationCheckpointRange, dispatch, selectedCheckpointDiffKey, selectedCheckpointRange, selectedTurn, ]); useEffect(() => { if (!selectedFilePath || !patchViewportRef.current) { return; } const target = Array.from( patchViewportRef.current.querySelectorAll<HTMLElement>("[data-diff-file-path]"), ).find((element) => element.dataset.diffFilePath === selectedFilePath); target?.scrollIntoView({ block: "nearest" }); }, [selectedFilePath, renderableFiles]); const selectTurn = (turnId: string) => { if (!activeThread) return; dispatch({ type: "SET_DIFF_TARGET", threadId: activeThread.id, turnId, }); }; const selectWholeConversation = () => { if (!activeThread) return; dispatch({ type: "SET_DIFF_TARGET", threadId: activeThread.id, }); }; const shouldUseDragRegion = isElectron && mode === "inline"; return ( <aside className={cn( "flex h-full min-w-0 flex-col bg-card", mode === "inline" ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border" : "w-full", )} > <div className={cn( "flex items-center justify-between border-b border-border px-4", shouldUseDragRegion ? "drag-region h-[52px]" : "py-3", )} > <div className="flex gap-1.5 overflow-x-auto pb-0.5"> <button type="button" className="shrink-0 rounded-md" onClick={selectWholeConversation}> <div className={cn( "rounded-md border px-2 py-1 text-left transition-colors", selectedTurnId === null ? "border-border bg-accent text-accent-foreground" : "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80", )} > <div className="text-[10px] font-medium">All turns</div> <div className="text-[8px] opacity-70">Conversation</div> </div> </button> {turnDiffSummaries.map((summary, index) => ( <button key={summary.turnId} type="button" className="shrink-0 rounded-md" onClick={() => selectTurn(summary.turnId)} title={summary.turnId} > <div className={cn( "rounded-md border px-2 py-1 text-left transition-colors", summary.turnId === selectedTurn?.turnId ? "border-border bg-accent text-accent-foreground" : "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80", )} > <div className="text-[10px] font-medium"> Turn {turnDiffSummaries.length - index} </div> <div className="text-[8px] opacity-70">{formatTimestamp(summary.completedAt)}</div> </div> </button> ))} </div> <ToggleGroup variant="outline" size="xs" value={[diffRenderMode]} onValueChange={(value) => setDiffRenderMode(value[0] as DiffRenderMode)} > <Toggle aria-label="Stacked diff view" value="stacked"> <Rows3Icon className="size-3" /> </Toggle> <Toggle aria-label="Split diff view" value="split"> <Columns2Icon className="size-3" /> </Toggle> </ToggleGroup> </div> {!activeThread ? ( <div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70"> Select a thread to inspect turn diffs. </div> ) : turnDiffSummaries.length === 0 ? ( <div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70"> No completed turns yet. </div> ) : ( <> <div ref={patchViewportRef} className="min-w-0 flex-1 overflow-auto px-3 py-2"> {!canApplyStoredTarget && state.diffThreadId && ( <p className="mb-2 text-[11px] text-muted-foreground/65"> Showing diffs for the active thread. </p> )} {checkpointDiffError && !renderablePatch && ( <p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p> )} {!renderablePatch ? ( <div className="flex h-full items-center justify-center text-xs text-muted-foreground/70"> {isLoadingCheckpointDiff ? "Loading checkpoint diff..." : "No patch available for this selection."} </div> ) : renderablePatch.kind === "files" ? ( <div className="space-y-3"> {renderableFiles.map((fileDiff) => ( <div key={fileDiff.cacheKey ?? `${fileDiff.prevName ?? "none"}:${fileDiff.name}`} data-diff-file-path={resolveFileDiffPath(fileDiff)} className="rounded-md" > <FileDiff fileDiff={fileDiff} options={{ diffStyle: diffRenderMode === "split" ? "split" : "unified", lineDiffType: "none", themeType: resolvedTheme, }} /> </div> ))} </div> ) : ( <div className="space-y-2"> <p className="text-[11px] text-muted-foreground/75">{renderablePatch.reason}</p> <pre className="max-h-[72vh] overflow-auto rounded-md border border-border/70 bg-background/70 p-3 font-mono text-[11px] leading-relaxed text-muted-foreground/90"> {renderablePatch.text} </pre> </div> )} </div> </> )} </aside> );}
import { parsePatchFiles } from "@pierre/diffs";
import { FileDiff, type FileDiffMetadata } from "@pierre/diffs/react";
import { Columns2Icon, Rows3Icon, XIcon } from "lucide-react";
import { useEffect, useMemo, useRef, useState } from "react";
import { isElectron } from "../env";
import { useNativeApi } from "../hooks/useNativeApi";
import { useTheme } from "../hooks/useTheme";
import {
deriveTurnDiffSummaries,
formatTimestamp,
inferCheckpointTurnCountByTurnId,
} from "../session-logic";
import { useStore } from "../store";
import { Button } from "./ui/button";
import { Popover, PopoverPopup, PopoverTrigger } from "./ui/popover";
import { cn } from "~/lib/utils";
import { ToggleGroup, Toggle } from "./ui/toggle-group";
type DiffRenderMode = "stacked" | "split";
type RenderablePatch =
| {
kind: "files";
files: FileDiffMetadata[];
}
| {
kind: "raw";
text: string;
reason: string;
};
function getRenderablePatch(patch: string | undefined): RenderablePatch | null {
if (!patch) return null;
const normalizedPatch = patch.trim();
if (normalizedPatch.length === 0) return null;
try {
const parsedPatches = parsePatchFiles(normalizedPatch, "diff-panel");
const files = parsedPatches.flatMap((parsedPatch) => parsedPatch.files);
if (files.length > 0) {
return { kind: "files", files };
}
return {
kind: "raw",
text: normalizedPatch,
reason: "Unsupported diff format. Showing raw patch.",
};
} catch {
return {
kind: "raw",
text: normalizedPatch,
reason: "Failed to parse patch. Showing raw patch.",
};
}
}
function resolveFileDiffPath(fileDiff: FileDiffMetadata): string {
const raw = fileDiff.name ?? fileDiff.prevName ?? "";
if (raw.startsWith("a/") || raw.startsWith("b/")) {
return raw.slice(2);
}
return raw;
}
function buildCheckpointDiffKey(
sessionId: string,
fromTurnCount: number,
toTurnCount: number,
): string {
return `${sessionId}:${fromTurnCount}-${toTurnCount}`;
}
interface DiffPanelProps {
mode?: "inline" | "sheet";
}
export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
const api = useNativeApi();
const { resolvedTheme } = useTheme();
const { state, dispatch } = useStore();
const [checkpointDiffByKey, setCheckpointDiffByKey] = useState<Record<string, string>>({});
const [isLoadingCheckpointDiff, setIsLoadingCheckpointDiff] = useState(false);
const [checkpointDiffError, setCheckpointDiffError] = useState<string | null>(null);
const [diffRenderMode, setDiffRenderMode] = useState<DiffRenderMode>("stacked");
const patchViewportRef = useRef<HTMLDivElement>(null);
const activeThread = state.threads.find((thread) => thread.id === state.activeThreadId);
const turnDiffSummaries = useMemo(
() =>
activeThread?.turnDiffSummaries.length
? activeThread.turnDiffSummaries
: deriveTurnDiffSummaries(activeThread?.events ?? []),
[activeThread?.events, activeThread?.turnDiffSummaries],
);
const inferredCheckpointTurnCountByTurnId = useMemo(
() => inferCheckpointTurnCountByTurnId(turnDiffSummaries),
[turnDiffSummaries],
);
useEffect(() => {
setCheckpointDiffByKey({});
setCheckpointDiffError(null);
}, [activeThread?.id]);
const canApplyStoredTarget = Boolean(activeThread && state.diffThreadId === activeThread.id);
const selectedTurnId = canApplyStoredTarget ? state.diffTurnId : null;
const selectedFilePath =
canApplyStoredTarget && selectedTurnId !== null ? state.diffFilePath : null;
const selectedTurn =
selectedTurnId === null
? undefined
: (turnDiffSummaries.find((summary) => summary.turnId === selectedTurnId) ??
turnDiffSummaries[0]);
const selectedCheckpointTurnCount =
selectedTurn &&
(selectedTurn.checkpointTurnCount ?? inferredCheckpointTurnCountByTurnId[selectedTurn.turnId]);
const selectedCheckpointRange = useMemo(
() =>
typeof selectedCheckpointTurnCount === "number"
? {
fromTurnCount: Math.max(0, selectedCheckpointTurnCount - 1),
toTurnCount: selectedCheckpointTurnCount,
}
: null,
[selectedCheckpointTurnCount],
);
const conversationCheckpointTurnCount = useMemo(() => {
const turnCounts = turnDiffSummaries
.map(
(summary) =>
summary.checkpointTurnCount ?? inferredCheckpointTurnCountByTurnId[summary.turnId],
)
.filter((value): value is number => typeof value === "number");
if (turnCounts.length === 0) {
return undefined;
}
const latest = Math.max(...turnCounts);
return latest > 0 ? latest : undefined;
}, [inferredCheckpointTurnCountByTurnId, turnDiffSummaries]);
const conversationCheckpointRange = useMemo(
() =>
!selectedTurn && typeof conversationCheckpointTurnCount === "number"
? {
fromTurnCount: 0,
toTurnCount: conversationCheckpointTurnCount,
}
: null,
[conversationCheckpointTurnCount, selectedTurn],
);
const selectedCheckpointDiffKey =
activeThread?.session?.sessionId && selectedCheckpointRange
? buildCheckpointDiffKey(
activeThread.session.sessionId,
selectedCheckpointRange.fromTurnCount,
selectedCheckpointRange.toTurnCount,
)
: null;
const conversationCheckpointDiffKey =
activeThread?.session?.sessionId && conversationCheckpointRange
? buildCheckpointDiffKey(
activeThread.session.sessionId,
conversationCheckpointRange.fromTurnCount,
conversationCheckpointRange.toTurnCount,
)
: null;
const selectedTurnCheckpointDiff =
selectedCheckpointDiffKey === null ? undefined : checkpointDiffByKey[selectedCheckpointDiffKey];
const conversationCheckpointDiff =
conversationCheckpointDiffKey === null
? undefined
: checkpointDiffByKey[conversationCheckpointDiffKey];
const selectedPatch = useMemo(() => {
const patchForSummary = (summary: (typeof turnDiffSummaries)[number]): string | undefined => {
const checkpointTurnCount =
summary.checkpointTurnCount ?? inferredCheckpointTurnCountByTurnId[summary.turnId];
if (activeThread?.session?.sessionId && typeof checkpointTurnCount === "number") {
const checkpointPatch =
checkpointDiffByKey[
buildCheckpointDiffKey(
activeThread.session.sessionId,
Math.max(0, checkpointTurnCount - 1),
checkpointTurnCount,
)
];
if (checkpointPatch) {
return checkpointPatch;
}
}
if (summary.unifiedDiff) {
return summary.unifiedDiff;
}
const filePatches = summary.files
.map((file) => file.diff?.trim())
.filter((patch): patch is string => Boolean(patch));
if (filePatches.length === 0) {
return undefined;
}
return filePatches.join("\n\n");
};
if (selectedTurn) {
return selectedTurnCheckpointDiff ?? patchForSummary(selectedTurn);
}
if (conversationCheckpointDiff) {
return conversationCheckpointDiff;
}
// Fallback when a conversation checkpoint diff isn't available yet:
// keep one patch per file path (latest change wins) so files aren't duplicated.
const latestPatchByPath = new Map<string, string>();
for (const summary of turnDiffSummaries) {
for (const file of summary.files) {
if (latestPatchByPath.has(file.path)) {
continue;
}
const patch = file.diff?.trim();
if (!patch) {
continue;
}
latestPatchByPath.set(file.path, patch);
}
}
if (latestPatchByPath.size > 0) {
return Array.from(latestPatchByPath.entries())
.toSorted(([leftPath], [rightPath]) =>
leftPath.localeCompare(rightPath, undefined, { numeric: true, sensitivity: "base" }),
)
.map(([, patch]) => patch)
.join("\n\n");
}
const patches = turnDiffSummaries
.toReversed()
.map((summary) => patchForSummary(summary)?.trim())
.filter((patch): patch is string => Boolean(patch));
if (patches.length === 0) {
return undefined;
}
return patches.join("\n\n");
}, [
activeThread?.session?.sessionId,
checkpointDiffByKey,
conversationCheckpointDiff,
inferredCheckpointTurnCountByTurnId,
selectedTurn,
selectedTurnCheckpointDiff,
turnDiffSummaries,
]);
const renderablePatch = useMemo(() => getRenderablePatch(selectedPatch), [selectedPatch]);
const renderableFiles = useMemo(() => {
if (!renderablePatch || renderablePatch.kind !== "files") {
return [];
}
return renderablePatch.files.toSorted((left, right) =>
resolveFileDiffPath(left).localeCompare(resolveFileDiffPath(right), undefined, {
numeric: true,
sensitivity: "base",
}),
);
}, [renderablePatch]);
useEffect(() => {
const checkpointFetchRange = selectedTurn
? selectedCheckpointRange
: conversationCheckpointRange;
const checkpointFetchKey = selectedTurn
? selectedCheckpointDiffKey
: conversationCheckpointDiffKey;
if (!api || !activeThread?.session?.sessionId || !checkpointFetchRange || !checkpointFetchKey) {
return;
}
if (checkpointDiffByKey[checkpointFetchKey] !== undefined) {
return;
}
let cancelled = false;
setIsLoadingCheckpointDiff(true);
setCheckpointDiffError(null);
void api.providers
.getCheckpointDiff({
sessionId: activeThread.session.sessionId,
fromTurnCount: checkpointFetchRange.fromTurnCount,
toTurnCount: checkpointFetchRange.toTurnCount,
})
.then((result) => {
if (cancelled) return;
setCheckpointDiffByKey((previous) => ({
...previous,
[checkpointFetchKey]: result.diff,
}));
if (selectedTurn) {
dispatch({
type: "SET_THREAD_TURN_CHECKPOINT_DIFFS",
threadId: activeThread.id,
checkpointDiffByTurnId: {
[selectedTurn.turnId]: result.diff,
},
});
}
})
.catch((error) => {
if (cancelled) return;
setCheckpointDiffError(
error instanceof Error ? error.message : "Failed to load checkpoint diff.",
);
})
.finally(() => {
if (cancelled) return;
setIsLoadingCheckpointDiff(false);
});
return () => {
cancelled = true;
};
}, [
activeThread?.id,
activeThread?.session?.sessionId,
api,
checkpointDiffByKey,
conversationCheckpointDiffKey,
conversationCheckpointRange,
dispatch,
selectedCheckpointDiffKey,
selectedCheckpointRange,
selectedTurn,
]);
useEffect(() => {
if (!selectedFilePath || !patchViewportRef.current) {
return;
}
const target = Array.from(
patchViewportRef.current.querySelectorAll<HTMLElement>("[data-diff-file-path]"),
).find((element) => element.dataset.diffFilePath === selectedFilePath);
target?.scrollIntoView({ block: "nearest" });
}, [selectedFilePath, renderableFiles]);
const selectTurn = (turnId: string) => {
if (!activeThread) return;
dispatch({
type: "SET_DIFF_TARGET",
threadId: activeThread.id,
turnId,
});
};
const selectWholeConversation = () => {
if (!activeThread) return;
dispatch({
type: "SET_DIFF_TARGET",
threadId: activeThread.id,
});
};
const shouldUseDragRegion = isElectron && mode === "inline";
return (
<aside
className={cn(
"flex h-full min-w-0 flex-col bg-card",
mode === "inline"
? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border"
: "w-full",
)}
>
<div
className={cn(
"flex items-center justify-between border-b border-border px-4",
shouldUseDragRegion ? "drag-region h-[52px]" : "py-3",
)}
>
<div className="flex gap-1.5 overflow-x-auto pb-0.5">
<button type="button" className="shrink-0 rounded-md" onClick={selectWholeConversation}>
<div
className={cn(
"rounded-md border px-2 py-1 text-left transition-colors",
selectedTurnId === null
? "border-border bg-accent text-accent-foreground"
: "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80",
)}
>
<div className="text-[10px] font-medium">All turns</div>
<div className="text-[8px] opacity-70">Conversation</div>
</div>
</button>
{turnDiffSummaries.map((summary, index) => (
<button
key={summary.turnId}
type="button"
className="shrink-0 rounded-md"
onClick={() => selectTurn(summary.turnId)}
title={summary.turnId}
>
<div
className={cn(
"rounded-md border px-2 py-1 text-left transition-colors",
summary.turnId === selectedTurn?.turnId
? "border-border bg-accent text-accent-foreground"
: "border-border/70 bg-background/70 text-muted-foreground/80 hover:border-border hover:text-foreground/80",
)}
>
<div className="text-[10px] font-medium">
Turn {turnDiffSummaries.length - index}
</div>
<div className="text-[8px] opacity-70">{formatTimestamp(summary.completedAt)}</div>
</div>
</button>
))}
</div>
<ToggleGroup
variant="outline"
size="xs"
value={[diffRenderMode]}
onValueChange={(value) => setDiffRenderMode(value[0] as DiffRenderMode)}
>
<Toggle aria-label="Stacked diff view" value="stacked">
<Rows3Icon className="size-3" />
</Toggle>
<Toggle aria-label="Split diff view" value="split">
<Columns2Icon className="size-3" />
</Toggle>
</ToggleGroup>
</div>
{!activeThread ? (
<div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70">
Select a thread to inspect turn diffs.
</div>
) : turnDiffSummaries.length === 0 ? (
<div className="flex flex-1 items-center justify-center px-5 text-center text-xs text-muted-foreground/70">
No completed turns yet.
</div>
) : (
<>
<div ref={patchViewportRef} className="min-w-0 flex-1 overflow-auto px-3 py-2">
{!canApplyStoredTarget && state.diffThreadId && (
<p className="mb-2 text-[11px] text-muted-foreground/65">
Showing diffs for the active thread.
</p>
)}
{checkpointDiffError && !renderablePatch && (
<p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p>
)}
{!renderablePatch ? (
<div className="flex h-full items-center justify-center text-xs text-muted-foreground/70">
{isLoadingCheckpointDiff
? "Loading checkpoint diff..."
: "No patch available for this selection."}
</div>
) : renderablePatch.kind === "files" ? (
<div className="space-y-3">
{renderableFiles.map((fileDiff) => (
<div
key={fileDiff.cacheKey ?? `${fileDiff.prevName ?? "none"}:${fileDiff.name}`}
data-diff-file-path={resolveFileDiffPath(fileDiff)}
className="rounded-md"
>
<FileDiff
fileDiff={fileDiff}
options={{
diffStyle: diffRenderMode === "split" ? "split" : "unified",
lineDiffType: "none",
themeType: resolvedTheme,
}}
/>
</div>
))}
</div>
) : (
<div className="space-y-2">
<p className="text-[11px] text-muted-foreground/75">{renderablePatch.reason}</p>
<pre className="max-h-[72vh] overflow-auto rounded-md border border-border/70 bg-background/70 p-3 font-mono text-[11px] leading-relaxed text-muted-foreground/90">
{renderablePatch.text}
</pre>
</div>
)}
</div>
</>
)}
</aside>
);
}