@adecore/agents-react 0.22.0 → 0.23.0

package/dist/chat/ui/rows/WorkRows.js

@@ -16,8 +16,10 @@ import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
 import { Icon, Spinner, useTickingText } from '@adecore/ui';
 import { ROW_GUTTER, toolIcon } from '../icons.js';
 import { AnsiOutput } from '../AnsiOutput.js';
-// The diff renderers carry shiki; they only load once a thread shows a file change.
-const EditDiff = lazyNamed(() => import('../EditDiff.js'), 'default');
+import { DiffStack, ReviewStackView } from '../diff/DiffStack.js';
+import { reviewEntries } from '../diff/review-plan.js';
+import { useReviewStack } from '../diff/use-review-stack.js';
+// A checkpoint opens its renderer only when a file is expanded.
 const UnifiedDiff = lazyNamed(() => import('../UnifiedDiff.js'), 'default');
 const OUTPUT_LIMIT = 4000;
 function clip(text) {
@@ -42,7 +44,7 @@ function ChangedFileLine({ path, open, onToggle, trailing, children }) {
 function ToolBody({ tool }) {
     const patches = unifiedChanges(tool);
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
-    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length > 0 ? (_jsx(DiffSuspense, { children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(DiffSuspense, { children: changes.map((change, index) => (_jsx(EditDiff, { change: change }, index))) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
+    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length + changes.length > 0 ? (_jsx(DiffStack, { entries: reviewEntries(patches, changes) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
 }
 /*
  * One settled tool call: a line, and its input and output behind it. An image the call looked at is
@@ -139,9 +141,13 @@ export function ChangedFilesRow({ tools, diff, checkpoint, baseMoved, chatId, tu
     }
     return _jsx(ProviderChangedFiles, { tools: tools, open: open, setOpen: setOpen, revealNonce: revealNonce });
 }
+function ProviderReviewFiles({ reviews, open, setOpen }) {
+    const { t } = useTranslation('agent-chat');
+    const stack = useReviewStack(reviews.filter(({ path }) => open[path] === true).flatMap(({ reviews }) => reviews));
+    return reviews.map(({ path, count, reviews }) => (_jsx(ChangedFileLine, { path: path, open: open[path] === true, onToggle: () => setOpen((previous) => ({ ...previous, [path]: !previous[path] })), trailing: _jsx("span", { className: "text-text-faint", children: t('work.edits', { count }) }), children: _jsx(ReviewStackView, { entries: reviews, stack: stack }) }, path)));
+}
 /* The fallback card, built from what the CLI itself reported about its edits. */
 function ProviderChangedFiles({ tools, open, setOpen, revealNonce }) {
-    const { t } = useTranslation('agent-chat');
     const byPath = new Map();
     const entryFor = (path) => {
         const existing = byPath.get(path);
@@ -164,7 +170,12 @@ function ProviderChangedFiles({ tools, open, setOpen, revealNonce }) {
             entryFor(change.path || tool.id).edits.push(change);
         }
     }
-    return (_jsx(ChangedFilesCard, { count: byPath.size, revealNonce: revealNonce, children: [...byPath].map(([path, entry]) => (_jsx(ChangedFileLine, { path: path, open: open[path] === true, onToggle: () => setOpen((o) => ({ ...o, [path]: !o[path] })), trailing: _jsx("span", { className: "text-text-faint", children: t('work.edits', { count: entry.edits.length + entry.patches.length }) }), children: _jsxs(DiffSuspense, { children: [entry.patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, `patch-${index}`))), entry.edits.map((change, index) => (_jsx(EditDiff, { change: change }, `edit-${index}`)))] }) }, path))) }));
+    const reviews = [...byPath].map(([path, entry]) => ({
+        path,
+        count: entry.patches.length + entry.edits.length,
+        reviews: reviewEntries(entry.patches, entry.edits)
+    }));
+    return (_jsx(ChangedFilesCard, { count: byPath.size, revealNonce: revealNonce, children: _jsx(ProviderReviewFiles, { reviews: reviews, open: open, setOpen: setOpen }) }));
 }
 /* "Working for 00:14". */
 export function WorkingRow({ startedAt }) {

package/dist/chat/ui/use-diff-source-tokens.d.ts

@@ -0,0 +1,4 @@
+import { type DiffSourceTokens } from '@adecore/editor-react';
+import type { DiffDocument } from '@adecore/merge';
+import { type DiffSyntaxRuntime } from './diff-syntax.js';
+export declare function useDiffSourceTokens(document: DiffDocument, language: string, theme: string, runtime?: DiffSyntaxRuntime): DiffSourceTokens;

package/dist/chat/ui/use-diff-source-tokens.js

@@ -0,0 +1,40 @@
+import { useLayoutEffect, useMemo } from 'react';
+import { diffSyntaxDocument } from '@adecore/editor-react';
+import { diffSourceTokens } from './diff-syntax.js';
+function createSourceBinding(document, language, theme, runtime) {
+    const mapping = diffSyntaxDocument(document, language, theme);
+    const listeners = new Set();
+    let source;
+    const current = () => {
+        if (source === undefined) {
+            source = diffSourceTokens(document, mapping, runtime);
+            source.subscribe(() => {
+                for (const listener of [...listeners]) {
+                    listener();
+                }
+            });
+        }
+        return source;
+    };
+    return {
+        tokens: {
+            get: (side, index) => (mapping.locate(side, index) === undefined ? null : current().get(side, index)),
+            subscribe(listener) {
+                listeners.add(listener);
+                return () => {
+                    listeners.delete(listener);
+                };
+            }
+        },
+        release() {
+            // StrictMode replays effects with the same memo; the next read opens fresh sessions.
+            source?.dispose();
+            source = undefined;
+        }
+    };
+}
+export function useDiffSourceTokens(document, language, theme, runtime) {
+    const binding = useMemo(() => createSourceBinding(document, language, theme, runtime), [document, language, theme, runtime]);
+    useLayoutEffect(() => () => binding.release(), [binding]);
+    return binding.tokens;
+}

package/dist/host.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentProps, ComponentType, ReactNode, RefObject } from 'react';
 import type { Extension } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
-import type { ThemeRegistration } from 'shiki';
+import type { Highlighter, ThemeRegistration } from 'shiki';
+import type { EditorEngine } from '@adecore/editor';
 import type { AgentKind, ChatCheckpointDiff, ChatConfigurePayload, ChatItem, ChatSubagentItem, ChatUiChoicePayload, ChatUiQueryPayload, ChatUiQueryReading, ChatUiLinkPayload, ChatUiLinkReading } from '@adecore/agent-contracts';
 import type { TimelineRow } from './chat/logic/timeline.js';
 import type { FindReveal } from './chat/ui/find-reveal.js';
@@ -163,6 +164,10 @@ export interface ChatHost {
         custom: ReadonlyArray<ThemeRegistration & {
             name: string;
         }>;
+        syntaxWorker?: () => Worker;
+        legacyDiffWorker?: () => Worker;
+        highlighter?: () => Promise<Highlighter>;
+        editor?: () => Promise<EditorEngine>;
     };
     useStreaming(): 'words' | 'blocks' | 'whole';
     useSendDelivery(): 'queue' | 'steer';

package/dist/lazy.d.ts

@@ -2,5 +2,7 @@ import { type ComponentProps, type ComponentType } from 'react';
 type Loader = () => Promise<unknown>;
 export declare function setLazyPrefetch(next: (load: Loader) => void): void;
 export declare function onLazyOpenError(listener: (error: unknown) => void): () => void;
-export declare function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name extends keyof Module>(load: () => Promise<Module>, name: Name): ComponentType<ComponentProps<Module[Name]>>;
+export declare function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name extends keyof Module>(load: () => Promise<Module>, name: Name, options?: {
+    readonly prefetch?: boolean;
+}): ComponentType<ComponentProps<Module[Name]>>;
 export {};

package/dist/lazy.js

@@ -28,15 +28,17 @@ export function onLazyOpenError(listener) {
  * is here the component is drawn straight away, since `React.lazy` suspends for a tick even on a
  * module the prefetcher already fetched.
  */
-export function lazyNamed(load, name) {
+export function lazyNamed(load, name, options) {
     let loaded = null;
     const open = async () => {
         const component = (await load())[name];
         loaded ??= component;
         return component;
     };
-    loaders.push(open);
-    register?.(open);
+    if (options?.prefetch !== false) {
+        loaders.push(open);
+        register?.(open);
+    }
     // Only a render loads through here; a prefetch calls `open` itself, so its failures report nothing.
     const Lazy = lazy(async () => {
         try {

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",
@@ -527,7 +530,13 @@
     "chart": {
       "values": "Values",
       "summary": "{{count}} values, highest {{label}} at {{value}}",
-      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}"
+      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}",
+      "rowsLeftOut": "The first {{shown}} of {{total}} rows are drawn.",
+      "seriesLeftOut_one": "{{series}} is not drawn.",
+      "seriesLeftOut_other": "{{series}} are not drawn.",
+      "sideBySide": "Negative values cannot be stacked, so the series stand side by side.",
+      "showValues": "Show all values",
+      "hideValues": "Hide values"
     },
     "image": {
       "label": "Image",
@@ -551,8 +560,8 @@
     "answered": "Answered with “{{label}}”",
     "chose": "Chose “{{label}}”",
     "choseOlder": "Chose “{{label}}” on the reply of {{time}}",
-    "fixes_one": "{{count}} fix",
-    "fixes_other": "{{count}} fixes",
+    "notes_one": "{{count}} note",
+    "notes_other": "{{count}} notes",
     "shownAsText": "Shown as text",
     "unknownComponent": "This version cannot draw {{component}}",
     "renderFailed": "Could not draw this part",

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",
@@ -527,7 +530,13 @@
     "chart": {
       "values": "Waarden",
       "summary": "{{count}} waarden, hoogste {{label}} met {{value}}",
-      "summarySeries": "{{count}} categorieën, hoogste {{series}} bij {{label}} met {{value}}"
+      "summarySeries": "{{count}} categorieën, hoogste {{series}} bij {{label}} met {{value}}",
+      "rowsLeftOut": "De eerste {{shown}} van {{total}} rijen zijn getekend.",
+      "seriesLeftOut_one": "{{series}} is niet getekend.",
+      "seriesLeftOut_other": "{{series}} zijn niet getekend.",
+      "sideBySide": "Negatieve waarden kunnen niet gestapeld worden, dus de reeksen staan naast elkaar.",
+      "showValues": "Alle waarden tonen",
+      "hideValues": "Waarden verbergen"
     },
     "image": {
       "label": "Afbeelding",
@@ -551,8 +560,8 @@
     "answered": "Beantwoord met “{{label}}”",
     "chose": "Gekozen: “{{label}}”",
     "choseOlder": "Gekozen: “{{label}}”, bij het antwoord van {{time}}",
-    "fixes_one": "{{count}} correctie",
-    "fixes_other": "{{count}} correcties",
+    "notes_one": "{{count}} opmerking",
+    "notes_other": "{{count}} opmerkingen",
     "shownAsText": "Als tekst getoond",
     "unknownComponent": "Deze versie kan {{component}} niet tekenen",
     "renderFailed": "Dit deel kon niet getekend worden",

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.0",
+  "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",
@@ -639,6 +644,11 @@
       "types": "./dist/chat/ui/intelligent-ui/use-later.d.ts",
       "default": "./dist/chat/ui/intelligent-ui/use-later.js"
     },
+    "./chat/ui/intelligent-ui/use-truncated": {
+      "source": "./src/chat/ui/intelligent-ui/use-truncated.ts",
+      "types": "./dist/chat/ui/intelligent-ui/use-truncated.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/use-truncated.js"
+    },
     "./chat/ui/intelligent-ui/use-ui-links": {
       "source": "./src/chat/ui/intelligent-ui/use-ui-links.ts",
       "types": "./dist/chat/ui/intelligent-ui/use-ui-links.d.ts",
@@ -1022,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": {
@@ -1031,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.0",
-    "@adecore/intelligent-ui": "0.22.0",
+    "@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",
@@ -1050,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.0",
+    "@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>
     );
 }