feat: add last-turn diff view

Adds a Last turn scope to DiffView that renders OpenCode snapshot diffs from the latest user message summary without re-fetching git contents. The view hides Review in that mode and carries the selected diff scope through main and context-panel navigation.

Connects latest-turn changed-file chips in chat to the snapshot diff view on desktop and mobile, while keeping older turn chips static/read-only to avoid misleading affordances and extra subscriptions. Updates localized labels and empty states plus changelog.

Validation: bun run type-check (packages/ui); bun run lint (packages/ui).
This commit is contained in:
Bohdan Triapitsyn
2026-07-07 14:44:20 +03:00
parent 1c44146a4f
commit 292e78f067
19 changed files with 269 additions and 84 deletions
@@ -65,37 +65,88 @@ const getDisplayFileName = (file: string): string => {
return segments.at(-1) ?? file;
};
const TurnChangedFilePills = React.memo(({ files }: { files?: TurnChangedFile[] }) => {
if (!files || files.length === 0) {
return null;
}
const TurnChangedFileChipContent = React.memo(({ file, interactive = false }: { file: TurnChangedFile; interactive?: boolean }) => (
<span
className={cn(
'inline-flex max-w-full items-center gap-1.5 rounded-lg border border-border/30 bg-muted/30 px-2 py-1 text-xs leading-[1.35] text-muted-foreground',
interactive && 'transition-colors hover:border-border/60 hover:bg-interactive-hover'
)}
>
<FileTypeIcon filePath={file.file} className="h-3.5 w-3.5 flex-shrink-0" />
<span className="max-w-52 truncate text-foreground/80" title={file.file}>{getDisplayFileName(file.file)}</span>
<span className="flex-shrink-0 inline-flex items-center gap-0 typography-meta" style={{ fontSize: '0.8rem', lineHeight: '1' }}>
<span style={{ color: 'var(--status-success)' }}>+{file.additions}</span>
<span className="text-muted-foreground/70">/</span>
<span style={{ color: 'var(--status-error)' }}>-{file.deletions}</span>
</span>
</span>
));
const TurnChangedFilePillButton = React.memo(({
file,
onOpen,
}: {
file: TurnChangedFile;
onOpen: (file: string) => void;
}) => {
const { t } = useI18n();
return (
<button
type="button"
className="inline-flex h-8 max-w-full cursor-pointer items-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)]"
aria-label={t('chat.changedFiles.actions.openFileTitle', { path: file.file })}
title={file.file}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onOpen(file.file);
}}
>
<TurnChangedFileChipContent file={file} interactive />
</button>
);
});
const StaticTurnChangedFilePills = React.memo(({ files }: { files: TurnChangedFile[] }) => (
<>
{files.map((file) => (
<span key={file.file} className="inline-flex h-8 max-w-full items-center" title={file.file}>
<TurnChangedFileChipContent file={file} />
</span>
))}
</>
));
const InteractiveTurnChangedFilePills = React.memo(({ files }: { files: TurnChangedFile[] }) => {
const effectiveDirectory = useEffectiveDirectory();
const isMobile = useUIStore((state) => state.isMobile);
const navigateToDiff = useUIStore((state) => state.navigateToDiff);
const openContextDiff = useUIStore((state) => state.openContextDiff);
const openLastTurnDiff = React.useCallback((file: string) => {
if (!isMobile && effectiveDirectory) {
openContextDiff(effectiveDirectory, file, false, 'turn');
return;
}
navigateToDiff(file, false, 'turn');
}, [effectiveDirectory, isMobile, navigateToDiff, openContextDiff]);
return (
<>
{files.map((file) => {
return (
<Tooltip key={file.file}>
<TooltipTrigger asChild>
<span className="inline-flex h-8 max-w-full items-center">
<span className="inline-flex max-w-full items-center gap-1.5 rounded-lg border border-border/30 bg-muted/30 px-2 py-1 text-xs leading-[1.35] text-muted-foreground">
<FileTypeIcon filePath={file.file} className="h-3.5 w-3.5 flex-shrink-0" />
<span className="max-w-52 truncate text-foreground/80" title={file.file}>{getDisplayFileName(file.file)}</span>
<span className="flex-shrink-0 inline-flex items-center gap-0 typography-meta" style={{ fontSize: '0.8rem', lineHeight: '1' }}>
<span style={{ color: 'var(--status-success)' }}>+{file.additions}</span>
<span className="text-muted-foreground/70">/</span>
<span style={{ color: 'var(--status-error)' }}>-{file.deletions}</span>
</span>
</span>
</span>
</TooltipTrigger>
<TooltipContent>{file.file}</TooltipContent>
</Tooltip>
);
})}
{files.map((file) => (
<TurnChangedFilePillButton key={file.file} file={file} onOpen={openLastTurnDiff} />
))}
</>
);
});
const TurnChangedFilePills = React.memo(({ files, isInteractive }: { files?: TurnChangedFile[]; isInteractive: boolean }) => {
if (!files || files.length === 0) return null;
return isInteractive ? <InteractiveTurnChangedFilePills files={files} /> : <StaticTurnChangedFilePills files={files} />;
});
type SubtaskPartLike = Part & {
type: 'subtask';
description?: unknown;
@@ -2079,7 +2130,10 @@ const AssistantMessageBody = React.memo(({
<TurnChangedFilesDropdown activityParts={turnGroupingContext?.activityParts} />
) : null}
{!isMiniChatSurface && isLastAssistantInTurn && hasStopFinish ? (
<TurnChangedFilePills files={turnGroupingContext?.changedFiles} />
<TurnChangedFilePills
files={turnGroupingContext?.changedFiles}
isInteractive={turnGroupingContext?.isLatestTurn === true}
/>
) : null}
</div>
)}
@@ -280,6 +280,7 @@ export const areRelevantTurnGroupingContextsEqual = (
if (left.turnId !== right.turnId) return false;
if (left.isFirstAssistantInTurn !== right.isFirstAssistantInTurn) return false;
if (left.isLastAssistantInTurn !== right.isLastAssistantInTurn) return false;
if (left.isLatestTurn !== right.isLatestTurn) return false;
if (left.isWorking !== right.isWorking) return false;
if (left.hasTools !== right.hasTools) return false;
if (left.hasReasoning !== right.hasReasoning) return false;