BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show changed files after completed turns

Browse Source 
Add changed-file pills with per-file diff stats
Add a chat setting to disable the feature fully
Avoid changed-file projection work when disabled
This commit is contained in:
Bohdan Triapitsyn
2026-06-03 22:11:37 +03:00
parent 9087950f1a
commit 04b1425c2e
22 changed files with 218 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/MessageList.tsx
+5 -1
View File
@@ -685,10 +685,11 @@ const TurnBlock = React.memo(({
hasTools: turn.hasTools,
hasReasoning: turn.hasReasoning,
diffStats: turn.diffStats,
changedFiles: turn.changedFiles,
userMessageCreatedAt: typeof userCreatedAt === 'number' ? userCreatedAt : undefined,
userMessageVariant,
};
}, [turn.diffStats, turn.hasReasoning, turn.hasTools, turn.headerMessageId, turn.summaryText, turn.turnId, turn.userMessage.info, visibleActivityParts, visibleActivitySegments]);
}, [turn.changedFiles, turn.diffStats, turn.hasReasoning, turn.hasTools, turn.headerMessageId, turn.summaryText, turn.turnId, turn.userMessage.info, visibleActivityParts, visibleActivitySegments]);
const renderMessage = React.useCallback(
(message: ChatMessageEntry) => {
@@ -736,6 +737,7 @@ const TurnBlock = React.memo(({
activityGroupSegments: turnGroupingContextBase.activityGroupSegments,
headerMessageId: turnGroupingContextBase.headerMessageId,
diffStats: turnGroupingContextBase.diffStats,
changedFiles: turnGroupingContextBase.changedFiles,
userMessageCreatedAt: turnGroupingContextBase.userMessageCreatedAt,
userMessageVariant: turnGroupingContextBase.userMessageVariant,
isGroupExpanded: turnUiState.isExpanded,
@@ -1114,6 +1116,7 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
const stickyUserHeader = useUIStore(state => state.stickyUserHeader);
const chatRenderMode = useUIStore((state) => state.chatRenderMode);
const activityRenderMode = useUIStore((state) => state.activityRenderMode);
const showTurnChangedFiles = useUIStore((state) => state.showTurnChangedFiles);
const defaultActivityExpanded = activityRenderMode === 'summary';
const [turnUiStates, setTurnUiStates] = React.useState<Map<string, TurnUiState>>(() => new Map());
const userAnimationRef = React.useRef<{
@@ -1212,6 +1215,7 @@ const MessageList = React.forwardRef<MessageListHandle, MessageListProps>(({
const { projection, staticTurns, streamingTurn } = useTurnRecords(displayMessages, {
sessionKey,
showTextJustificationActivity: chatRenderMode === 'sorted',
showTurnChangedFiles,
});
const hasUngroupedStaticEntries = projection.ungroupedMessageIds.size > 0;
const staticEntryMessages = hasUngroupedStaticEntries ? displayMessages : EMPTY_STATIC_ENTRY_MESSAGES;
packages/ui/src/components/chat/hooks/useTurnRecords.ts
+7 -2
View File
@@ -6,6 +6,7 @@ import { streamPerfMeasure } from '@/stores/utils/streamDebug';
interface UseTurnRecordsOptions {
sessionKey?: string;
showTextJustificationActivity: boolean;
showTurnChangedFiles: boolean;
}
export interface TurnRecordsResult {
@@ -23,13 +24,16 @@ export const useTurnRecords = (
const streamingTurnRef = React.useRef<TurnRecord | undefined>(undefined);
const previousSessionKeyRef = React.useRef<string | undefined>(options.sessionKey);
const previousShowTextJustificationActivityRef = React.useRef(options.showTextJustificationActivity);
const previousShowTurnChangedFilesRef = React.useRef(options.showTurnChangedFiles);
if (
previousSessionKeyRef.current !== options.sessionKey
|| previousShowTextJustificationActivityRef.current !== options.showTextJustificationActivity
|| previousShowTurnChangedFilesRef.current !== options.showTurnChangedFiles
) {
previousSessionKeyRef.current = options.sessionKey;
previousShowTextJustificationActivityRef.current = options.showTextJustificationActivity;
previousShowTurnChangedFilesRef.current = options.showTurnChangedFiles;
previousProjectionRef.current = null;
staticTurnsRef.current = [];
streamingTurnRef.current = undefined;
@@ -39,18 +43,19 @@ export const useTurnRecords = (
previousProjectionRef.current = null;
staticTurnsRef.current = [];
streamingTurnRef.current = undefined;
}, [options.sessionKey, options.showTextJustificationActivity]);
}, [options.sessionKey, options.showTextJustificationActivity, options.showTurnChangedFiles]);
const projection = React.useMemo(() => {
return streamPerfMeasure('ui.turns.projection_ms', () => {
const nextProjection = projectTurnRecords(messages, {
previousProjection: previousProjectionRef.current,
showTextJustificationActivity: options.showTextJustificationActivity,
showTurnChangedFiles: options.showTurnChangedFiles,
});
previousProjectionRef.current = nextProjection;
return nextProjection;
});
}, [messages, options.showTextJustificationActivity]);
}, [messages, options.showTextJustificationActivity, options.showTurnChangedFiles]);
const staticTurns = React.useMemo(() => {
const nextStatic = projection.turns.length <= 1
packages/ui/src/components/chat/lib/turns/projectTurnRecords.ts
+7 -1
View File
@@ -1,6 +1,6 @@
import { projectTurnActivity } from './projectTurnActivity';
import { projectTurnIndexes } from './projectTurnIndexes';
import { projectTurnDiffStats, projectTurnSummary } from './projectTurnSummary';
import { projectTurnChangedFiles, projectTurnDiffStats, projectTurnSummary } from './projectTurnSummary';
import type {
ChatMessageEntry,
TurnMessageRecord,
@@ -83,11 +83,13 @@ const buildTurnStreamState = (userMessage: ChatMessageEntry, assistantMessages:
interface ProjectTurnRecordsOptions {
previousProjection?: TurnProjectionResult | null;
showTextJustificationActivity: boolean;
showTurnChangedFiles: boolean;
}
const DEFAULT_OPTIONS: ProjectTurnRecordsOptions = {
previousProjection: null,
showTextJustificationActivity: false,
showTurnChangedFiles: false,
};
const areSameMessageRefs = (left: ChatMessageEntry[], right: ChatMessageEntry[]): boolean => {
@@ -180,6 +182,7 @@ export const projectTurnRecords = (
hasTools: false,
hasReasoning: false,
diffStats: undefined,
changedFiles: undefined,
stream: {
isStreaming: false,
isRetrying: false,
@@ -215,6 +218,9 @@ export const projectTurnRecords = (
turn.summary = projectTurnSummary(turn.assistantMessages);
turn.summaryText = turn.summary.text ?? getUserSummaryBody(turn.userMessage);
turn.diffStats = projectTurnDiffStats(turn.userMessage);
turn.changedFiles = effectiveOptions.showTurnChangedFiles
? projectTurnChangedFiles(turn.userMessage)
: undefined;
const activity = projectTurnActivity({
turnId: turn.turnId,
packages/ui/src/components/chat/lib/turns/projectTurnSummary.ts
+30 -1
View File
@@ -1,6 +1,7 @@
import type { ChatMessageEntry, TurnDiffStats, TurnSummaryRecord } from './types';
import type { ChatMessageEntry, TurnChangedFile, TurnDiffStats, TurnSummaryRecord } from './types';
interface SummaryDiff {
file?: string | null;
additions?: number | null;
deletions?: number | null;
}
@@ -102,3 +103,31 @@ export const projectTurnDiffStats = (userMessage: ChatMessageEntry): TurnDiffSta
files,
};
};
export const projectTurnChangedFiles = (userMessage: ChatMessageEntry): TurnChangedFile[] | undefined => {
const summary = (userMessage.info as { summary?: UserSummaryPayload | null }).summary;
const diffs = summary?.diffs;
if (!Array.isArray(diffs) || diffs.length === 0) {
return undefined;
}
const files = diffs
.map((diff) => {
if (!diff || typeof diff.file !== 'string' || diff.file.trim().length === 0) {
return null;
}
const additions = typeof diff.additions === 'number' ? diff.additions : 0;
const deletions = typeof diff.deletions === 'number' ? diff.deletions : 0;
if (additions === 0 && deletions === 0) {
return null;
}
return {
file: diff.file,
additions,
deletions,
};
})
.filter((file): file is TurnChangedFile => file !== null);
return files.length > 0 ? files : undefined;
};
packages/ui/src/components/chat/lib/turns/types.ts
+8
View File
@@ -34,6 +34,12 @@ export interface TurnDiffStats {
files: number;
}
export interface TurnChangedFile {
file: string;
additions: number;
deletions: number;
}
export interface TurnActivityGroup {
id: string;
anchorMessageId: string;
@@ -70,6 +76,7 @@ export interface TurnRecord {
hasTools: boolean;
hasReasoning: boolean;
diffStats?: TurnDiffStats;
changedFiles?: TurnChangedFile[];
stream: TurnStreamState;
startedAt?: number;
completedAt?: number;
@@ -115,6 +122,7 @@ export interface TurnGroupingContext {
hasTools: boolean;
hasReasoning: boolean;
diffStats?: TurnDiffStats;
changedFiles?: TurnChangedFile[];
userMessageCreatedAt?: number;
userMessageVariant?: string;
isWorking: boolean;
packages/ui/src/components/chat/message/MessageBody.tsx
+71 -32
View File
@@ -9,7 +9,7 @@ import { MessageFilesDisplay } from '../FileAttachment';
import { TurnChangedFilesDropdown } from '../TurnChangedFilesDropdown';
import type { ToolPart as ToolPartType } from '@opencode-ai/sdk/v2';
import type { StreamPhase, ToolPopupContent, AgentMentionInfo } from './types';
import type { TurnGroupingContext } from '../lib/turns/types';
import type { TurnChangedFile, TurnGroupingContext } from '../lib/turns/types';
import { cn } from '@/lib/utils';
import { isEmptyTextPart, extractTextContent } from './partUtils';
import { FadeInOnReveal } from './FadeInOnReveal';
@@ -47,12 +47,50 @@ import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
import { useI18n } from '@/lib/i18n';
import { extractLoopbackUrls } from '@/lib/url';
import { useDeviceInfo } from '@/lib/device';
import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
const CONTAIN_LAYOUT_STYLE = { contain: 'layout' as const, transform: 'translateZ(0)' };
const MESSAGE_FOOTER_CONTAINER_STYLE = { containerType: 'inline-size' as const, containerName: 'message-footer' };
const INLINE_MESSAGE_ACTIONS_CLASS_NAME = 'mt-2 mb-1 flex items-center justify-start gap-1.5';
const getDisplayFileName = (file: string): string => {
const normalized = file.replace(/\\/g, '/');
const segments = normalized.split('/').filter(Boolean);
return segments.at(-1) ?? file;
};
const TurnChangedFilePills = React.memo(({ files }: { files?: TurnChangedFile[] }) => {
if (!files || files.length === 0) {
return null;
}
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>
);
})}
</>
);
});
type SubtaskPartLike = Part & {
type: 'subtask';
description?: unknown;
@@ -1918,43 +1956,44 @@ const AssistantMessageBody = React.memo(({
)}
{shouldShowTurnFooter && (
<div
className="mt-2 mb-1 flex items-center justify-start gap-1.5"
className="mt-2 mb-1 flex flex-wrap items-center justify-start gap-1.5"
style={MESSAGE_FOOTER_CONTAINER_STYLE}
>
<div className="flex items-center gap-1.5" data-message-action-group="true">
{messageActionButtons}
{finalTurnActionButtons}
</div>
<div className="flex items-center gap-1.5">
{turnDurationText ? (
<Tooltip>
<TooltipTrigger asChild>
<span className="text-sm text-muted-foreground/60 tabular-nums flex items-center gap-1">
<Icon name="hourglass" className="h-3.5 w-3.5" />
<span className="message-footer__label">{turnDurationText}</span>
</span>
</TooltipTrigger>
<TooltipContent>{turnDurationText}</TooltipContent>
</Tooltip>
) : null}
{footerTimestamp ? (
<Tooltip>
<TooltipTrigger asChild>
<span
className={footerTimestampClassName}
aria-label={`Message time: ${footerTimestamp}`}
>
<Icon name="time" className="h-3.5 w-3.5" />
<span className="message-footer__label">{footerTimestamp}</span>
</span>
</TooltipTrigger>
<TooltipContent>{footerTimestamp}</TooltipContent>
</Tooltip>
) : null}
{!isMiniChatSurface && isLastAssistantInTurn && hasStopFinish ? (
<TurnChangedFilesDropdown activityParts={turnGroupingContext?.activityParts} />
) : null}
</div>
{turnDurationText ? (
<Tooltip>
<TooltipTrigger asChild>
<span className="text-sm text-muted-foreground/60 tabular-nums flex items-center gap-1">
<Icon name="hourglass" className="h-3.5 w-3.5" />
<span className="message-footer__label">{turnDurationText}</span>
</span>
</TooltipTrigger>
<TooltipContent>{turnDurationText}</TooltipContent>
</Tooltip>
) : null}
{footerTimestamp ? (
<Tooltip>
<TooltipTrigger asChild>
<span
className={footerTimestampClassName}
aria-label={`Message time: ${footerTimestamp}`}
>
<Icon name="time" className="h-3.5 w-3.5" />
<span className="message-footer__label">{footerTimestamp}</span>
</span>
</TooltipTrigger>
<TooltipContent>{footerTimestamp}</TooltipContent>
</Tooltip>
) : null}
{!isMiniChatSurface && isLastAssistantInTurn && hasStopFinish ? (
<TurnChangedFilesDropdown activityParts={turnGroupingContext?.activityParts} />
) : null}
{!isMiniChatSurface && isLastAssistantInTurn && hasStopFinish ? (
<TurnChangedFilePills files={turnGroupingContext?.changedFiles} />
) : null}
</div>
)}
packages/ui/src/components/chat/message/renderCompare.ts
+23 -1
View File
@@ -1,5 +1,5 @@
import type { Message, Part } from '@opencode-ai/sdk/v2';
import type { TurnActivityGroup, TurnActivityRecord, TurnDiffStats, TurnGroupingContext } from '../lib/turns/types';
import type { TurnActivityGroup, TurnActivityRecord, TurnChangedFile, TurnDiffStats, TurnGroupingContext } from '../lib/turns/types';
type MessageRecord = {
info: Message;
@@ -146,6 +146,24 @@ const areTurnDiffStatsEqual = (left?: TurnDiffStats, right?: TurnDiffStats): boo
&& left.files === right.files;
};
const areTurnChangedFilesEqual = (left?: TurnChangedFile[], right?: TurnChangedFile[]): boolean => {
if (left === right) return true;
if (!left || !right) return !left && !right;
if (left.length !== right.length) return false;
for (let index = 0; index < left.length; index += 1) {
const leftFile = left[index];
const rightFile = right[index];
if (
leftFile.file !== rightFile.file
|| leftFile.additions !== rightFile.additions
|| leftFile.deletions !== rightFile.deletions
) {
return false;
}
}
return true;
};
const areTurnActivityRecordsEqual = (left: TurnActivityRecord, right: TurnActivityRecord): boolean => {
return left.id === right.id
&& left.messageId === right.messageId
@@ -301,5 +319,9 @@ export const areRelevantTurnGroupingContextsEqual = (
return false;
}
if ((ownerRelevant || segmentsRelevant || left.isLastAssistantInTurn || right.isLastAssistantInTurn) && !areTurnChangedFilesEqual(left.changedFiles, right.changedFiles)) {
return false;
}
return true;
};