@adecore/agents-react 0.22.1 → 0.23.0

package/dist/locales/en/agent-chat.json

@@ -157,7 +157,10 @@
   "work": {
     "moreCharacters_one": "[{{count}} more character]",
     "moreCharacters_other": "[{{count}} more characters]",
+    "diffLabel": "Changes in {{path}}",
+    "showDiff": "Show diff",
     "loadingDiff": "Loading diff",
+    "diffUnavailable": "Could not load this diff",
     "runningFor": "running for {{elapsed}}",
     "forksAfter_one": "A fork goes on after this turn",
     "forksAfter_other": "{{count}} forks go on after this turn",

package/dist/locales/en/agent-prompts.json

@@ -18,6 +18,7 @@
     "allChanges_one": "Allow applies to the {{count}} change in this request.",
     "allChanges_other": "Allow applies to all {{count}} changes in this request.",
     "loadingDiff": "Loading diff…",
+    "reviewChanges": "Changes to review",
     "viewDiff": "View full diff",
     "collapseDiff": "Collapse diff",
     "details": "Details",

package/dist/locales/nl/agent-chat.json

@@ -157,7 +157,10 @@
   "work": {
     "moreCharacters_one": "[nog {{count}} teken]",
     "moreCharacters_other": "[nog {{count}} tekens]",
+    "diffLabel": "Wijzigingen in {{path}}",
+    "showDiff": "Diff tonen",
     "loadingDiff": "Diff laden",
+    "diffUnavailable": "Deze diff kon niet worden geladen",
     "runningFor": "loopt al {{elapsed}}",
     "forksAfter_one": "Een fork gaat verder na deze turn",
     "forksAfter_other": "{{count}} forks gaan verder na deze turn",

package/dist/locales/nl/agent-prompts.json

@@ -18,6 +18,7 @@
     "allChanges_one": "Toestaan geldt voor de {{count}} wijziging in dit verzoek.",
     "allChanges_other": "Toestaan geldt voor alle {{count}} wijzigingen in dit verzoek.",
     "loadingDiff": "Diff laden…",
+    "reviewChanges": "Wijzigingen beoordelen",
     "viewDiff": "Volledige diff tonen",
     "collapseDiff": "Diff inklappen",
     "details": "Details",

package/dist/prompts/ui/ApprovalBody.js

@@ -1,14 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { approvalChanges, fileChanges } from '../../chat/logic/tools.js';
 import { chatHost } from '../../host.js';
-import { lazyNamed } from '../../lazy.js';
+import { ApprovalReview } from '../../chat/ui/diff/ApprovalReview.js';
+import { reviewEntries } from '../../chat/ui/diff/review-plan.js';
 import { isPrimaryKey } from '../logic/keys.js';
 import { Button, TextMenu } from '@adecore/ui';
-const EditDiff = lazyNamed(() => import('../../chat/ui/EditDiff.js'), 'default');
-const UnifiedDiff = lazyNamed(() => import('../../chat/ui/UnifiedDiff.js'), 'default');
 /* A command in the sunken box a person reads before allowing it, with the folder it runs in when that is known. */
 export function CommandBox({ command, cwd }) {
     return (_jsxs(TextMenu, { className: "rounded-xl bg-surface-sunken p-3", children: [cwd !== undefined && _jsx("p", { className: "mb-2 break-all font-mono text-xs text-text-muted select-text", children: cwd }), _jsx("pre", { className: "whitespace-pre-wrap break-words font-mono text-code text-text select-text", children: command })] }));
@@ -18,8 +17,11 @@ function ApprovalDetails({ item }) {
     const [expanded, setExpanded] = useState(false);
     const patches = approvalChanges(item.input);
     const edits = patches.length ? [] : fileChanges(item.toolName, item.input);
+    const entries = reviewEntries(patches, edits);
+    const editorPreview = chatHost().code.editor !== undefined;
+    const maxHeight = expanded ? 480 : 176;
     const input = typeof item.input === 'object' && item.input !== null ? item.input : {};
-    return (_jsxs(_Fragment, { children: [item.description && _jsx("p", { className: "text-sm text-text-muted", children: item.description }), patches.length + edits.length > 1 && (_jsx("p", { className: "text-xs text-text-muted", children: t('approval.allChanges', { count: patches.length + edits.length }) })), patches.length + edits.length > 0 ? (_jsxs("div", { className: "overflow-hidden rounded-xl bg-surface-sunken", children: [_jsx("div", { className: clsx('overflow-auto', !expanded && 'max-h-44'), children: _jsxs(Suspense, { fallback: _jsx("p", { className: "p-3 text-xs text-text-muted", children: t('approval.loadingDiff') }), children: [patches.map((change, i) => (_jsx(UnifiedDiff, { change: change }, i))), edits.map((change, i) => (_jsx(EditDiff, { change: change }, i)))] }) }), _jsx("div", { className: "flex items-center border-t border-border p-1", children: _jsx(Button, { size: "sm", "aria-expanded": expanded, onClick: () => setExpanded(!expanded), children: expanded ? t('approval.collapseDiff') : t('approval.viewDiff') }) })] })) : typeof input.command === 'string' ? (_jsx(CommandBox, { command: input.command, cwd: typeof input.cwd === 'string' ? input.cwd : undefined })) : (_jsxs("details", { children: [_jsx("summary", { className: "flex h-7 cursor-pointer items-center text-xs text-text-muted", children: t('approval.details') }), _jsx(TextMenu, { children: _jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-xl bg-surface-sunken p-3 font-mono text-code text-text select-text", children: JSON.stringify(item.input, null, 2) }) })] }))] }));
+    return (_jsxs(_Fragment, { children: [item.description && _jsx("p", { className: "text-sm text-text-muted", children: item.description }), patches.length + edits.length > 1 && (_jsx("p", { className: "text-xs text-text-muted", children: t('approval.allChanges', { count: patches.length + edits.length }) })), patches.length + edits.length > 0 ? (_jsxs("div", { className: "overflow-hidden rounded-xl bg-surface-sunken", children: [_jsx("div", { className: clsx(editorPreview ? 'overflow-hidden' : 'overflow-auto', !editorPreview && !expanded && 'max-h-44'), children: _jsx(ApprovalReview, { entries: entries, maxHeight: maxHeight }, item.requestId) }), _jsx("div", { className: "flex items-center border-t border-border p-1", children: _jsx(Button, { size: "sm", "aria-expanded": expanded, onClick: () => setExpanded(!expanded), children: expanded ? t('approval.collapseDiff') : t('approval.viewDiff') }) })] })) : typeof input.command === 'string' ? (_jsx(CommandBox, { command: input.command, cwd: typeof input.cwd === 'string' ? input.cwd : undefined })) : (_jsxs("details", { children: [_jsx("summary", { className: "flex h-7 cursor-pointer items-center text-xs text-text-muted", children: t('approval.details') }), _jsx(TextMenu, { children: _jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-xl bg-surface-sunken p-3 font-mono text-code text-text select-text", children: JSON.stringify(item.input, null, 2) }) })] }))] }));
 }
 /* A chat's permission request: the diff, the command or the raw input, and the reason a Deny may carry. */
 export function ApprovalBody({ item, draft, onDraft, denyReason, locked }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -514,6 +514,11 @@
       "types": "./dist/chat/ui/composer/menu-aria.d.ts",
       "default": "./dist/chat/ui/composer/menu-aria.js"
     },
+    "./chat/ui/diff-syntax": {
+      "source": "./src/chat/ui/diff-syntax.ts",
+      "types": "./dist/chat/ui/diff-syntax.d.ts",
+      "default": "./dist/chat/ui/diff-syntax.js"
+    },
     "./chat/ui/diff-theme": {
       "source": "./src/chat/ui/diff-theme.ts",
       "types": "./dist/chat/ui/diff-theme.d.ts",
@@ -1027,6 +1032,11 @@
       "source": "./src/chat/visual-viewport.ts",
       "types": "./dist/chat/visual-viewport.d.ts",
       "default": "./dist/chat/visual-viewport.js"
+    },
+    "./chat/ui/use-diff-source-tokens": {
+      "source": "./src/chat/ui/use-diff-source-tokens.ts",
+      "types": "./dist/chat/ui/use-diff-source-tokens.d.ts",
+      "default": "./dist/chat/ui/use-diff-source-tokens.js"
     }
   },
   "scripts": {
@@ -1036,8 +1046,10 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.22.1",
-    "@adecore/intelligent-ui": "0.22.1",
+    "@adecore/agent-contracts": "0.23.0",
+    "@adecore/intelligent-ui": "0.23.0",
+    "@adecore/editor": "0.23.0",
+    "@adecore/merge": "0.23.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -1055,10 +1067,11 @@
     "shiki": "^4.4.3",
     "simple-icons": "^16.32.0",
     "zod": "^4.6.5",
-    "zustand": "^5.0.15"
+    "zustand": "^5.0.15",
+    "@adecore/editor-react": "0.23.0"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.22.1",
+    "@adecore/ui": "^0.23.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/chat/ui/EditDiff.tsx

@@ -1,30 +1,45 @@
-import { useMemo } from 'react';
-import { MultiFileDiff } from '@pierre/diffs/react';
+import { Suspense, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { lazyNamed } from '../../lazy';
+import { diffSourceBudget, legacyDiffBudget } from './diff/diff-source-budget';
+import { DiffOmitted } from './diff/DiffOmitted';
+import { DiffUnavailable } from './diff/DiffUnavailable';
+import { DiffFallbackBoundary } from './diff/DiffFallbackBoundary';
 import { chatHost } from '../../host';
-import { useDiffTheme } from './diff-theme';
 
 import type { FileChange } from '../logic/tools';
 
-/* One hunk of a file edit, highlighted in a worker. The header is ours, so the library's is off. */
-export default function EditDiff({ change }: { change: FileChange }) {
-    const resolved = chatHost().code.useMode();
-    const theme = useDiffTheme();
-    const oldFile = useMemo(() => ({ name: change.path, contents: change.before }), [change.path, change.before]);
-    const newFile = useMemo(() => ({ name: change.path, contents: change.after }), [change.path, change.after]);
-    const options = useMemo(
-        () => ({
-            diffStyle: 'unified' as const,
-            theme,
-            themeType: resolved,
-            disableFileHeader: true,
-            overflow: 'wrap' as const,
-            hunkSeparators: 'simple' as const
-        }),
-        [theme, resolved]
+const LegacyEditDiff = lazyNamed(() => import('./diff/LegacyEditDiff'), 'default', { prefetch: false });
+const EditorEditDiff = lazyNamed(() => import('./diff/EditorEditDiff'), 'default');
+
+export default function EditDiff({ change, allowEditor = true, maxHeight }: { change: FileChange; allowEditor?: boolean; maxHeight?: number }) {
+    const { t } = useTranslation('agent-chat');
+    const loadEngine = chatHost().code.editor;
+    const sourceAllowed = useMemo(() => diffSourceBudget(change.before, change.after), [change.before, change.after]);
+    const legacyMode = !allowEditor || loadEngine === undefined;
+    const legacyAllowed = useMemo(() => legacyMode && legacyDiffBudget(change.before, change.after), [legacyMode, change.before, change.after]);
+    const omitted = <DiffOmitted path={change.path} />;
+    const fallback = legacyAllowed ? (
+        <DiffFallbackBoundary fallback={omitted} resetKeys={[change.path, change.before, change.after]}>
+            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+                <LegacyEditDiff change={change} maxHeight={maxHeight} />
+            </Suspense>
+        </DiffFallbackBoundary>
+    ) : (
+        omitted
     );
+    if (!sourceAllowed) {
+        return omitted;
+    }
+    if (legacyMode) {
+        return fallback;
+    }
+    const unavailable = <DiffUnavailable path={change.path} />;
     return (
-        <div className="chat-diff select-text">
-            <MultiFileDiff oldFile={oldFile} newFile={newFile} options={options} />
-        </div>
+        <DiffFallbackBoundary fallback={unavailable} resetKeys={[change.path, change.before, change.after, loadEngine]}>
+            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+                <EditorEditDiff change={change} loadEngine={loadEngine!} fallback={unavailable} maxHeight={maxHeight} sourceChecked />
+            </Suspense>
+        </DiffFallbackBoundary>
     );
 }

package/src/chat/ui/UnifiedDiff.tsx

@@ -1,97 +1,64 @@
-import { useMemo } from 'react';
-import clsx from 'clsx';
-import { FileDiff, PatchDiff } from '@pierre/diffs/react';
-import type { ChatFileChange } from '@adecore/agent-contracts';
+import { Suspense, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { lazyNamed } from '../../lazy';
+import { diffSourceBudget, legacyDiffBudget, patchSourceBudget } from './diff/diff-source-budget';
+import { DiffOmitted } from './diff/DiffOmitted';
+import { DiffUnavailable } from './diff/DiffUnavailable';
+import { RawDiff } from './diff/RawDiff';
+import { DiffFallbackBoundary } from './diff/DiffFallbackBoundary';
 import { chatHost } from '../../host';
-import { useDiffTheme } from './diff-theme';
-import { fullFileDiff, type DiffContents } from './full-diff';
+import type { UnifiedDiffProps } from './diff/diff-props';
 
-/*
- * A patch the CLI reported itself. The renderer needs a file header, which a CLI that only sends hunks
- * gets from the path we know; a diff without hunks is shown as its own lines, so nothing is swallowed.
- */
-function asPatch(change: ChatFileChange): string | null {
-    if (!/^@@/m.test(change.diff)) {
-        return null;
-    }
-    if (/^\+\+\+ /m.test(change.diff)) {
-        return change.diff;
-    }
-    const from = change.kind === 'add' ? '/dev/null' : `a/${change.path}`;
-    const to = change.kind === 'delete' ? '/dev/null' : `b/${change.path}`;
-    return `--- ${from}\n+++ ${to}\n${change.diff}`;
-}
+const LegacyUnifiedDiff = lazyNamed(() => import('./diff/LegacyUnifiedDiff'), 'default', { prefetch: false });
+const EditorPatchDiff = lazyNamed(() => import('./diff/EditorPatchDiff'), 'default');
 
-/* Lets a diff with a view of its own run to its bottom, so a short one's scrollbar sits there and not under its last line. */
-const FILL_CSS = `
-:host { display: flex; flex-direction: column; flex-grow: 1; }
-pre { flex-grow: 1; align-content: start; }
-pre[data-diff-type="single"] { display: flex; flex-direction: column; }
-pre[data-diff-type="split"][data-overflow="scroll"]:not([data-dehydrated]) { align-content: stretch; }
-pre > [data-code] { flex-grow: 1; align-self: stretch; align-content: start; }
-`;
-
-function lineClass(line: string): string {
-    if (line.startsWith('+')) {
-        return 'text-chat-added';
+export default function UnifiedDiff(props: UnifiedDiffProps) {
+    const { t } = useTranslation('agent-chat');
+    const { change, contents, allowEditor = true, ignoreWhitespace = false, overflow = 'wrap', diffStyle = 'unified', fill = false, maxHeight } = props;
+    const loadEngine = chatHost().code.editor;
+    const oldText = contents?.old ?? '';
+    const newText = contents?.new ?? '';
+    const sourceAllowed = useMemo(() => diffSourceBudget(oldText, newText) && patchSourceBudget(change.diff), [oldText, newText, change.diff]);
+    const legacyMode = !allowEditor || loadEngine === undefined;
+    const hasHunks = /^@@/m.test(change.diff);
+    const legacyAllowed = useMemo(() => legacyMode && legacyDiffBudget(oldText, newText, change.diff), [legacyMode, oldText, newText, change.diff]);
+    const rawAllowed = useMemo(() => hasHunks || legacyDiffBudget('', '', change.diff), [hasHunks, change.diff]);
+    const omitted = <DiffOmitted path={change.path} />;
+    const fallback = legacyAllowed ? (
+        <DiffFallbackBoundary fallback={omitted} resetKeys={[change.path, change.diff, oldText, newText, diffStyle]}>
+            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+                <LegacyUnifiedDiff {...props} />
+            </Suspense>
+        </DiffFallbackBoundary>
+    ) : (
+        omitted
+    );
+    if (!sourceAllowed) {
+        return omitted;
     }
-    if (line.startsWith('-')) {
-        return 'text-chat-removed';
+    if (!hasHunks) {
+        return rawAllowed ? <RawDiff text={change.diff} overflow={overflow} fill={fill} maxHeight={maxHeight} /> : omitted;
     }
-    return 'text-text-muted';
-}
-
-interface UnifiedDiffProps {
-    change: ChatFileChange;
-    overflow?: 'wrap' | 'scroll';
-    /* `split` puts the old and the new side by side; the chat always stacks. */
-    diffStyle?: 'unified' | 'split';
-    /* Grow to the height of a flex column around it. */
-    fill?: boolean;
-    /* Both whole texts the patch was made between, with which a person can unfold the lines between hunks. */
-    contents?: DiffContents;
-}
-
-export default function UnifiedDiff({ change, overflow = 'wrap', diffStyle = 'unified', fill = false, contents }: UnifiedDiffProps) {
-    const resolved = chatHost().code.useMode();
-    const theme = useDiffTheme();
-    const patch = useMemo(() => asPatch(change), [change]);
-    const oldText = contents?.old;
-    const newText = contents?.new;
-    const full = useMemo(
-        () => (patch === null || oldText === undefined || newText === undefined ? null : fullFileDiff(patch, change.path, { old: oldText, new: newText })),
-        [patch, change.path, oldText, newText]
-    );
-    const unfolds = full !== null;
-    const options = useMemo(
-        () => ({
-            theme,
-            themeType: resolved,
-            disableFileHeader: true,
-            diffStyle,
-            overflow,
-            hunkSeparators: unfolds ? ('line-info' as const) : ('simple' as const),
-            unsafeCSS: fill ? FILL_CSS : undefined
-        }),
-        [diffStyle, overflow, theme, resolved, fill, unfolds]
-    );
-    if (patch === null) {
-        return (
-            <pre className="max-h-64 overflow-auto px-3 py-2 font-mono text-code select-text">
-                {change.diff
-                    .replace(/\n$/, '')
-                    .split('\n')
-                    .map((line, index) => (
-                        <div key={index} className={clsx(lineClass(line), 'whitespace-pre-wrap')}>
-                            {line}
-                        </div>
-                    ))}
-            </pre>
-        );
+    if (legacyMode) {
+        return fallback;
     }
+    const unavailable = <DiffUnavailable path={change.path} />;
     return (
-        <div className={clsx('chat-diff select-text', fill && 'flex grow flex-col')}>
-            {full === null ? <PatchDiff patch={patch} options={options} /> : <FileDiff fileDiff={full} options={options} />}
-        </div>
+        <DiffFallbackBoundary fallback={unavailable} resetKeys={[change.path, change.diff, oldText, newText, ignoreWhitespace, diffStyle, loadEngine]}>
+            <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+                <EditorPatchDiff
+                    change={change}
+                    sourceChecked
+                    contents={contents}
+                    ignoreWhitespace={ignoreWhitespace}
+                    wrap={overflow === 'wrap'}
+                    fill={fill}
+                    maxHeight={maxHeight}
+                    layout={diffStyle}
+                    loadEngine={loadEngine!}
+                    fallback={unavailable}
+                />
+            </Suspense>
+        </DiffFallbackBoundary>
     );
 }

package/src/chat/ui/diff/ApprovalReview.tsx

@@ -0,0 +1,53 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { ReviewDiff } from './ReviewDiff';
+import type { ReviewEntry } from './review-plan';
+
+export function ApprovalReview({ entries, maxHeight }: { entries: readonly ReviewEntry[]; maxHeight: number }) {
+    const { t } = useTranslation('agent-prompts');
+    const [selected, setSelected] = useState<string | null>(null);
+    const active = entries.find((entry) => entry.key === selected) ?? entries[0];
+    const labels = useMemo(() => {
+        const totals = new Map<string, number>();
+        const counts = new Map<string, number>();
+        for (const entry of entries) {
+            totals.set(entry.path, (totals.get(entry.path) ?? 0) + 1);
+        }
+        return entries.map((entry) => {
+            const count = (counts.get(entry.path) ?? 0) + 1;
+            counts.set(entry.path, count);
+            const total = totals.get(entry.path)!;
+            const suffix = total > 1 ? ` (${formatNumber(count)}/${formatNumber(total)})` : '';
+            return { short: `${entry.path.split(/[\\/]/).at(-1)}${suffix}`, full: `${entry.path}${suffix}` };
+        });
+    }, [entries]);
+    if (active === undefined) {
+        return null;
+    }
+    return (
+        <div>
+            {entries.length > 1 && (
+                <>
+                    <div role="toolbar" aria-label={t('approval.reviewChanges')} className="flex flex-wrap gap-1 border-b border-border p-1">
+                        {entries.map((entry, index) => (
+                            <Button
+                                key={entry.key}
+                                size="sm"
+                                variant={active.key === entry.key ? 'secondary' : 'ghost'}
+                                aria-label={labels[index]!.full}
+                                aria-pressed={active.key === entry.key}
+                                onClick={() => setSelected(entry.key)}
+                            >
+                                {labels[index]!.short}
+                            </Button>
+                        ))}
+                    </div>
+                    <p className="break-all px-3 py-2 font-mono text-xs text-text-muted">{active.path}</p>
+                </>
+            )}
+            <ReviewDiff key={active.key} entry={active} maxHeight={maxHeight} />
+        </div>
+    );
+}

package/src/chat/ui/diff/DiffFallbackBoundary.tsx

@@ -0,0 +1,32 @@
+import { Component, type ReactNode } from 'react';
+
+interface Props {
+    fallback: ReactNode;
+    children: ReactNode;
+    resetKeys: readonly unknown[];
+}
+
+interface State {
+    failed: boolean;
+    resetKeys: readonly unknown[];
+}
+
+/* A failed view or lazy chunk must leave the containing review card usable. */
+export class DiffFallbackBoundary extends Component<Props, State> {
+    state: State = { failed: false, resetKeys: this.props.resetKeys };
+
+    static getDerivedStateFromError(): Partial<State> {
+        return { failed: true };
+    }
+
+    static getDerivedStateFromProps(props: Props, state: State): State | null {
+        if (state.resetKeys.length !== props.resetKeys.length || state.resetKeys.some((value, index) => !Object.is(value, props.resetKeys[index]))) {
+            return { failed: false, resetKeys: props.resetKeys };
+        }
+        return null;
+    }
+
+    render(): ReactNode {
+        return this.state.failed ? this.props.fallback : this.props.children;
+    }
+}

package/src/chat/ui/diff/DiffOmitted.tsx

@@ -0,0 +1,13 @@
+import { useReviewSettled } from './review-settle';
+import { useTranslation } from 'react-i18next';
+
+export function DiffOmitted({ path }: { path: string }) {
+    useReviewSettled();
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div role="status" data-diff-omitted className="px-3 py-2 text-xs text-text-muted">
+            <p className="truncate font-mono">{path}</p>
+            <p>{t('work.omitted.tooLarge')}</p>
+        </div>
+    );
+}

package/src/chat/ui/diff/DiffStack.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@adecore/ui';
+import { ReviewSettleContext } from './review-settle';
+import { ReviewDiff } from './ReviewDiff';
+import { reviewSize, type ReviewEntry } from './review-plan';
+import { useReviewStack, type ReviewStack } from './use-review-stack';
+
+export function ReviewStackView({ entries, stack }: { entries: readonly ReviewEntry[]; stack: ReviewStack }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div data-review-stack>
+            {entries.map((entry) => (
+                <div key={entry.key} className="border-t border-border first:border-t-0">
+                    <div className="flex items-center gap-2 px-3 py-2">
+                        <p className="min-w-0 grow break-all font-mono text-xs text-text-muted">{entry.path}</p>
+                        {stack.slots.get(entry.key) === 'deferred' && (
+                            <Button size="sm" data-review-show={entry.key} onClick={() => stack.promote(entry.key)}>
+                                {t('work.showDiff')}
+                            </Button>
+                        )}
+                    </div>
+                    {stack.ready.has(entry.key) ? (
+                        <ReviewSettleContext value={{ key: entry.key, settle: stack.settle }}>
+                            <ReviewDiff entry={entry} />
+                        </ReviewSettleContext>
+                    ) : stack.slots.get(entry.key) === 'editor' ? (
+                        <div
+                            data-review-pending={entry.key}
+                            role="status"
+                            className="px-3 py-2 text-xs text-text-faint"
+                            style={{ height: Math.max(28, Math.min(reviewSize(entry).rows * 20, 480)) }}
+                        >
+                            {t('work.loadingDiff')}
+                        </div>
+                    ) : null}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export function DiffStack({ entries }: { entries: readonly ReviewEntry[] }) {
+    const stack = useReviewStack(entries);
+    return <ReviewStackView entries={entries} stack={stack} />;
+}

package/src/chat/ui/diff/DiffUnavailable.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from 'react-i18next';
+import { useReviewSettled } from './review-settle';
+
+export function DiffUnavailable({ path }: { path: string }) {
+    useReviewSettled();
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div role="status" data-diff-unavailable className="px-3 py-2 text-xs text-text-muted">
+            <p className="truncate font-mono">{path}</p>
+            <p>{t('work.diffUnavailable')}</p>
+        </div>
+    );
+}