@adecore/agents-react 0.22.1 → 0.23.0

package/src/chat/ui/diff/syntax-runtime.ts

@@ -0,0 +1,222 @@
+import type { Highlighter, ThemeRegistration } from 'shiki';
+import {
+    createSyntaxService,
+    type DiffSyntaxDocument,
+    type DiffSyntaxInput,
+    type DiffSyntaxOutput,
+    type DiffSyntaxService,
+    type DiffSyntaxTokens
+} from '@adecore/editor/shiki-worker';
+import { chatHost } from '../../../host';
+
+interface Pending {
+    promise: Promise<DiffSyntaxTokens | null>;
+    resolve: (value: DiffSyntaxTokens | null) => void;
+    resent: boolean;
+}
+
+interface Session {
+    definition: DiffSyntaxDocument;
+    pending: Map<number, Pending>;
+    sent: boolean;
+}
+
+export interface DiffSyntaxSession {
+    request(index: number): Promise<DiffSyntaxTokens | null>;
+    cancel(): void;
+    dispose(): void;
+}
+
+export interface DiffSyntaxRuntime {
+    open(document: DiffSyntaxDocument): DiffSyntaxSession;
+    dispose(): void;
+}
+
+export interface DiffSyntaxRuntimeOptions {
+    workerFactory?: () => Worker;
+    themes: readonly ThemeRegistration[];
+    highlighter?: () => Promise<Highlighter>;
+}
+
+let nextGeneration = 0;
+let shared: DiffSyntaxRuntime | undefined;
+
+export function diffSyntaxRuntime(): DiffSyntaxRuntime {
+    const code = chatHost().code;
+    return (shared ??= createDiffSyntaxRuntime({ workerFactory: code.syntaxWorker, themes: code.custom, highlighter: code.highlighter }));
+}
+
+export function createDiffSyntaxRuntime(options: DiffSyntaxRuntimeOptions): DiffSyntaxRuntime {
+    const sessions = new Map<number, Session>();
+    let worker: Worker | undefined;
+    let fallback: DiffSyntaxService | undefined;
+    let highlighter: Promise<Highlighter> | undefined;
+    let started = false;
+    let stopped = false;
+    const settle = (session: Session): void => {
+        for (const pending of session.pending.values()) {
+            pending.resolve(null);
+        }
+        session.pending.clear();
+    };
+    const stopWorker = (): void => {
+        worker?.removeEventListener('message', onMessage);
+        worker?.removeEventListener('error', onError);
+        worker?.removeEventListener('messageerror', onError);
+        worker?.terminate();
+        worker = undefined;
+    };
+    const loadHighlighter = (): Promise<Highlighter> => {
+        highlighter ??= import('shiki').then(({ createHighlighter }) => createHighlighter({ langs: [], themes: [] }));
+        return highlighter;
+    };
+    const startFallback = (): void => {
+        stopWorker();
+        if (fallback !== undefined || stopped) {
+            return;
+        }
+        fallback = createSyntaxService({ highlighter: options.highlighter ?? loadHighlighter, send: receive });
+        dispatch({ type: 'start', themes: options.themes, maxLines: 100000 });
+        for (const [generation, session] of sessions) {
+            session.sent = false;
+            for (const index of session.pending.keys()) {
+                request(generation, session, index);
+            }
+        }
+    };
+    const onError = (event: Event): void => {
+        event.preventDefault();
+        startFallback();
+    };
+    const onMessage = (event: MessageEvent<DiffSyntaxOutput>): void => {
+        receive(event.data);
+    };
+    const initialize = (): void => {
+        if (started || stopped) {
+            return;
+        }
+        started = true;
+        if (options.workerFactory !== undefined) {
+            try {
+                worker = options.workerFactory();
+                worker.addEventListener('message', onMessage);
+                worker.addEventListener('error', onError);
+                worker.addEventListener('messageerror', onError);
+                dispatch({ type: 'start', themes: options.themes, maxLines: 100000 });
+                return;
+            } catch {
+                startFallback();
+            }
+        } else {
+            startFallback();
+        }
+    };
+    const dispatch = (message: DiffSyntaxInput): void => {
+        if (stopped) {
+            return;
+        }
+        if (worker !== undefined) {
+            try {
+                worker.postMessage(message);
+            } catch {
+                startFallback();
+            }
+        } else if (fallback !== undefined) {
+            void fallback.handle(message).catch(() => {
+                for (const session of sessions.values()) {
+                    settle(session);
+                }
+            });
+        }
+    };
+    const request = (generation: number, session: Session, index: number, resend = false): void => {
+        const document = !session.sent || resend ? session.definition : undefined;
+        session.sent = true;
+        dispatch({ type: 'request', generation, index, ...(document ? { document } : {}) });
+    };
+    const receive = (message: DiffSyntaxOutput): void => {
+        if (stopped || message.type === 'ready') {
+            return;
+        }
+        if (message.type === 'error') {
+            if (worker !== undefined) {
+                startFallback();
+            } else {
+                for (const session of sessions.values()) {
+                    settle(session);
+                }
+            }
+            return;
+        }
+        const session = sessions.get(message.generation);
+        const pending = session?.pending.get(message.index);
+        if (session === undefined || pending === undefined) {
+            return;
+        }
+        if (message.type === 'failed' && message.reason === 'missing' && !pending.resent) {
+            pending.resent = true;
+            request(message.generation, session, message.index, true);
+            return;
+        }
+        session.pending.delete(message.index);
+        pending.resolve(message.type === 'tokens' ? message : null);
+    };
+    return {
+        open(document) {
+            const generation = ++nextGeneration;
+            const session: Session = { definition: document, pending: new Map(), sent: false };
+            sessions.set(generation, session);
+            return {
+                request(index) {
+                    if (stopped || !sessions.has(generation)) {
+                        return Promise.resolve(null);
+                    }
+                    const existing = session.pending.get(index);
+                    if (existing !== undefined) {
+                        return existing.promise;
+                    }
+                    let resolve!: Pending['resolve'];
+                    const promise = new Promise<DiffSyntaxTokens | null>((done) => {
+                        resolve = done;
+                    });
+                    session.pending.set(index, { promise, resolve, resent: false });
+                    const initialized = started;
+                    initialize();
+                    // Fallback initialization replays pending requests, including this first one.
+                    if (initialized || worker !== undefined) {
+                        request(generation, session, index);
+                    }
+                    return promise;
+                },
+                cancel() {
+                    settle(session);
+                    if (started) {
+                        dispatch({ type: 'cancel', generation });
+                    }
+                },
+                dispose() {
+                    settle(session);
+                    sessions.delete(generation);
+                    if (started) {
+                        dispatch({ type: 'dispose', generation });
+                    }
+                }
+            };
+        },
+        dispose() {
+            stopped = true;
+            for (const session of sessions.values()) {
+                settle(session);
+            }
+            sessions.clear();
+            stopWorker();
+            fallback?.dispose();
+            if (options.highlighter === undefined) {
+                void highlighter?.then(
+                    (loaded) => loaded.dispose(),
+                    () => undefined
+                );
+            }
+        }
+    };
+}

package/src/chat/ui/diff/use-review-stack.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { planReview, type ReviewEntry, type ReviewSlot } from './review-plan';
+
+export interface ReviewStack {
+    readonly slots: ReadonlyMap<string, ReviewSlot>;
+    readonly ready: ReadonlySet<string>;
+    promote(key: string): void;
+    settle(key: string): void;
+}
+
+export function useReviewStack(entries: readonly ReviewEntry[]): ReviewStack {
+    const [promoted, setPromoted] = useState<string | null>(null);
+    const slots = useMemo(() => planReview(entries, promoted), [entries, promoted]);
+    const selected = [...slots].filter(([, slot]) => slot === 'editor').map(([key]) => key);
+    const [admitted, setAdmitted] = useState<string[]>(() => selected.slice(0, 1));
+    const retained = admitted.filter((key) => selected.includes(key));
+    const live = retained.length === 0 ? selected.slice(0, 1) : retained;
+    if (live.length !== admitted.length || live.some((key, index) => key !== admitted[index])) {
+        setAdmitted(live);
+    }
+    const [settled, setSettled] = useState<ReadonlySet<string>>(() => new Set());
+    if ([...settled].some((key) => !selected.includes(key))) {
+        setSettled(new Set([...settled].filter((key) => selected.includes(key))));
+    }
+    const settle = useCallback((key: string) => {
+        setSettled((previous) => (previous.has(key) ? previous : new Set([...previous, key])));
+    }, []);
+    const allSettled = live.every((key) => settled.has(key));
+    const next = selected.find((key) => !live.includes(key));
+    useEffect(() => {
+        if (next === undefined || !allSettled) {
+            return;
+        }
+        const frame = window.requestAnimationFrame(() => setAdmitted((previous) => [...previous, next]));
+        return () => window.cancelAnimationFrame(frame);
+    }, [next, allSettled]);
+    return { slots, ready: new Set(live), promote: setPromoted, settle };
+}

package/src/chat/ui/diff-syntax.ts

@@ -0,0 +1,82 @@
+import type { LineToken } from '@adecore/editor';
+import { lineTokensOf, type DiffSyntaxDocument } from '@adecore/editor/shiki-worker';
+import type { DiffDocument } from '@adecore/merge';
+import { diffSyntaxRuntime, type DiffSyntaxRuntime } from './diff/syntax-runtime';
+
+export { createDiffSyntaxRuntime, diffSyntaxRuntime } from './diff/syntax-runtime';
+export type { DiffSyntaxRuntime, DiffSyntaxRuntimeOptions, DiffSyntaxSession } from './diff/syntax-runtime';
+
+export interface DiffSyntaxMapping {
+    readonly documents: Readonly<Record<'old' | 'new', DiffSyntaxDocument>>;
+    locate(side: 'old' | 'new', index: number): { readonly block: number; readonly line: number } | undefined;
+}
+
+export interface DiffSourceTokenSession {
+    get(side: 'old' | 'new', index: number): readonly LineToken[] | null | undefined;
+    subscribe(listener: () => void): () => void;
+    dispose(): void;
+}
+
+/* Structurally accepts the editor's source mapping without depending on its React renderer. */
+export function diffSourceTokens(document: DiffDocument, mapping: DiffSyntaxMapping, runtime: DiffSyntaxRuntime = diffSyntaxRuntime()): DiffSourceTokenSession {
+    const sides = { old: runtime.open(mapping.documents.old), new: runtime.open(mapping.documents.new) };
+    const cache = { old: new Map<number, ReadonlyArray<readonly LineToken[] | null>>(), new: new Map<number, ReadonlyArray<readonly LineToken[] | null>>() };
+    const pending = { old: new Set<number>(), new: new Set<number>() };
+    const listeners = new Set<() => void>();
+    let disposed = false;
+    return {
+        get(side, index) {
+            const location = mapping.locate(side, index);
+            if (disposed || location === undefined || document.sides[side][index] === undefined) {
+                return null;
+            }
+            const { block, line } = location;
+            const known = cache[side].get(block);
+            if (known !== undefined) {
+                return known[line] ?? null;
+            }
+            if (!pending[side].has(block)) {
+                pending[side].add(block);
+                const text = mapping.documents[side].blocks[block]!.split('\n');
+                const publish = (lines: ReadonlyArray<readonly LineToken[] | null>): void => {
+                    if (disposed) {
+                        return;
+                    }
+                    pending[side].delete(block);
+                    cache[side].set(block, lines);
+                    for (const listener of [...listeners]) {
+                        listener();
+                    }
+                };
+                const count = text.length;
+                void sides[side].request(block).then(
+                    (packet) => {
+                        if (!disposed) {
+                            publish(text.map((text, line) => (packet === null || packet.lines.length !== count + 1 ? null : lineTokensOf(packet, line, text))));
+                        }
+                    },
+                    () => publish(text.map(() => null))
+                );
+            }
+            return undefined;
+        },
+        subscribe(listener) {
+            if (!disposed) {
+                listeners.add(listener);
+            }
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        dispose() {
+            disposed = true;
+            listeners.clear();
+            sides.old.dispose();
+            sides.new.dispose();
+            cache.old.clear();
+            cache.new.clear();
+            pending.old.clear();
+            pending.new.clear();
+        }
+    };
+}

package/src/chat/ui/rows/WorkRows.tsx

@@ -17,9 +17,11 @@ import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
 import { Icon, Spinner, useTickingText } from '@adecore/ui';
 import { ROW_GUTTER, toolIcon } from '../icons';
 import { AnsiOutput } from '../AnsiOutput';
+import { DiffStack, ReviewStackView } from '../diff/DiffStack';
+import { reviewEntries, type ReviewEntry } from '../diff/review-plan';
+import { useReviewStack } from '../diff/use-review-stack';
 
-// The diff renderers carry shiki; they only load once a thread shows a file change.
-const EditDiff = lazyNamed(() => import('../EditDiff'), 'default');
+// A checkpoint opens its renderer only when a file is expanded.
 const UnifiedDiff = lazyNamed(() => import('../UnifiedDiff'), 'default');
 
 const OUTPUT_LIMIT = 4000;
@@ -118,18 +120,8 @@ function ToolBody({ tool }: { tool: ChatToolItem }) {
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
     return (
         <div className="mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised">
-            {patches.length > 0 ? (
-                <DiffSuspense>
-                    {patches.map((change, index) => (
-                        <UnifiedDiff key={index} change={change} />
-                    ))}
-                </DiffSuspense>
-            ) : changes.length > 0 ? (
-                <DiffSuspense>
-                    {changes.map((change, index) => (
-                        <EditDiff key={index} change={change} />
-                    ))}
-                </DiffSuspense>
+            {patches.length + changes.length > 0 ? (
+                <DiffStack entries={reviewEntries(patches, changes)} />
             ) : (
                 <pre className="max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text">
                     {clip(JSON.stringify(tool.input, null, 2) ?? '')}
@@ -416,6 +408,36 @@ export function ChangedFilesRow({
     return <ProviderChangedFiles tools={tools} open={open} setOpen={setOpen} revealNonce={revealNonce} />;
 }
 
+interface FileReviews {
+    readonly path: string;
+    readonly count: number;
+    readonly reviews: readonly ReviewEntry[];
+}
+
+function ProviderReviewFiles({
+    reviews,
+    open,
+    setOpen
+}: {
+    reviews: readonly FileReviews[];
+    open: Record<string, boolean>;
+    setOpen: Dispatch<SetStateAction<Record<string, boolean>>>;
+}) {
+    const { t } = useTranslation('agent-chat');
+    const stack = useReviewStack(reviews.filter(({ path }) => open[path] === true).flatMap(({ reviews }) => reviews));
+    return reviews.map(({ path, count, reviews }) => (
+        <ChangedFileLine
+            key={path}
+            path={path}
+            open={open[path] === true}
+            onToggle={() => setOpen((previous) => ({ ...previous, [path]: !previous[path] }))}
+            trailing={<span className="text-text-faint">{t('work.edits', { count })}</span>}
+        >
+            <ReviewStackView entries={reviews} stack={stack} />
+        </ChangedFileLine>
+    ));
+}
+
 /* The fallback card, built from what the CLI itself reported about its edits. */
 function ProviderChangedFiles({
     tools,
@@ -428,7 +450,6 @@ function ProviderChangedFiles({
     revealNonce: number;
     setOpen: Dispatch<SetStateAction<Record<string, boolean>>>;
 }) {
-    const { t } = useTranslation('agent-chat');
     const byPath = new Map<string, { edits: FileChange[]; patches: ChatFileChange[] }>();
     const entryFor = (path: string) => {
         const existing = byPath.get(path);
@@ -451,26 +472,14 @@ function ProviderChangedFiles({
             entryFor(change.path || tool.id).edits.push(change);
         }
     }
+    const reviews = [...byPath].map(([path, entry]) => ({
+        path,
+        count: entry.patches.length + entry.edits.length,
+        reviews: reviewEntries(entry.patches, entry.edits)
+    }));
     return (
         <ChangedFilesCard count={byPath.size} revealNonce={revealNonce}>
-            {[...byPath].map(([path, entry]) => (
-                <ChangedFileLine
-                    key={path}
-                    path={path}
-                    open={open[path] === true}
-                    onToggle={() => setOpen((o) => ({ ...o, [path]: !o[path] }))}
-                    trailing={<span className="text-text-faint">{t('work.edits', { count: entry.edits.length + entry.patches.length })}</span>}
-                >
-                    <DiffSuspense>
-                        {entry.patches.map((change, index) => (
-                            <UnifiedDiff key={`patch-${index}`} change={change} />
-                        ))}
-                        {entry.edits.map((change, index) => (
-                            <EditDiff key={`edit-${index}`} change={change} />
-                        ))}
-                    </DiffSuspense>
-                </ChangedFileLine>
-            ))}
+            <ProviderReviewFiles reviews={reviews} open={open} setOpen={setOpen} />
         </ChangedFilesCard>
     );
 }

package/src/chat/ui/use-diff-source-tokens.ts

@@ -0,0 +1,43 @@
+import { useLayoutEffect, useMemo } from 'react';
+import { diffSyntaxDocument, type DiffSourceTokens } from '@adecore/editor-react';
+import type { DiffDocument } from '@adecore/merge';
+import { diffSourceTokens, type DiffSourceTokenSession, type DiffSyntaxRuntime } from './diff-syntax';
+
+function createSourceBinding(document: DiffDocument, language: string, theme: string, runtime?: DiffSyntaxRuntime) {
+    const mapping = diffSyntaxDocument(document, language, theme);
+    const listeners = new Set<() => void>();
+    let source: DiffSourceTokenSession | undefined;
+    const current = (): DiffSourceTokenSession => {
+        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);
+                };
+            }
+        } satisfies DiffSourceTokens,
+        release() {
+            // StrictMode replays effects with the same memo; the next read opens fresh sessions.
+            source?.dispose();
+            source = undefined;
+        }
+    };
+}
+
+export function useDiffSourceTokens(document: DiffDocument, language: string, theme: string, runtime?: DiffSyntaxRuntime): DiffSourceTokens {
+    const binding = useMemo(() => createSourceBinding(document, language, theme, runtime), [document, language, theme, runtime]);
+    useLayoutEffect(() => () => binding.release(), [binding]);
+    return binding.tokens;
+}

package/src/host.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,
@@ -244,6 +245,14 @@ export interface ChatHost {
         useThemes(): { light: string; dark: string };
         /* Themes the app ships itself, found by name; the rest Shiki looks up by id. */
         custom: ReadonlyArray<ThemeRegistration & { name: string }>;
+        /* One syntax worker shared by chat diffs and standalone review panes; omitted, tokenize on the page. */
+        syntaxWorker?: () => Worker;
+        /* Starts legacy highlighting with its first diff; an enclosing DiffPool takes precedence. */
+        legacyDiffWorker?: () => Worker;
+        /* Borrow the page highlighter for fallback; the host retains ownership. */
+        highlighter?: () => Promise<Highlighter>;
+        /* Opt in to bounded editor reviews; failures show a status, omitted keeps the legacy renderer. */
+        editor?: () => Promise<EditorEngine>;
     };
     /* How a reply appears while it streams: a word, a block or the whole of it at a time. */
     useStreaming(): 'words' | 'blocks' | 'whole';

package/src/lazy.tsx

@@ -35,7 +35,8 @@ export function onLazyOpenError(listener: (error: unknown) => void): () => void
  */
 export function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name extends keyof Module>(
     load: () => Promise<Module>,
-    name: Name
+    name: Name,
+    options?: { readonly prefetch?: boolean }
 ): ComponentType<ComponentProps<Module[Name]>> {
     let loaded: ComponentType<any> | null = null;
     const open = async (): Promise<ComponentType<any>> => {
@@ -43,8 +44,10 @@ export function lazyNamed<Module extends Record<Name, ComponentType<any>>, 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/src/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/src/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/src/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/src/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/src/prompts/ui/ApprovalBody.tsx

@@ -1,17 +1,15 @@
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { ChatApprovalItem } from '@adecore/agent-contracts';
 import { approvalChanges, fileChanges } from '../../chat/logic/tools';
 import { chatHost } from '../../host';
-import { lazyNamed } from '../../lazy';
+import { ApprovalReview } from '../../chat/ui/diff/ApprovalReview';
+import { reviewEntries } from '../../chat/ui/diff/review-plan';
 import { isPrimaryKey } from '../logic/keys';
 import type { PromptDraft } from '../logic/prompts';
 import { Button, TextMenu } from '@adecore/ui';
 
-const EditDiff = lazyNamed(() => import('../../chat/ui/EditDiff'), 'default');
-const UnifiedDiff = lazyNamed(() => import('../../chat/ui/UnifiedDiff'), '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 }: { command: string; cwd?: string }) {
     return (
@@ -27,6 +25,9 @@ function ApprovalDetails({ item }: { item: ChatApprovalItem }) {
     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 as Record<string, unknown>) : {};
     return (
         <>
@@ -36,15 +37,8 @@ function ApprovalDetails({ item }: { item: ChatApprovalItem }) {
             )}
             {patches.length + edits.length > 0 ? (
                 <div className="overflow-hidden rounded-xl bg-surface-sunken">
-                    <div className={clsx('overflow-auto', !expanded && 'max-h-44')}>
-                        <Suspense fallback={<p className="p-3 text-xs text-text-muted">{t('approval.loadingDiff')}</p>}>
-                            {patches.map((change, i) => (
-                                <UnifiedDiff key={i} change={change} />
-                            ))}
-                            {edits.map((change, i) => (
-                                <EditDiff key={i} change={change} />
-                            ))}
-                        </Suspense>
+                    <div className={clsx(editorPreview ? 'overflow-hidden' : 'overflow-auto', !editorPreview && !expanded && 'max-h-44')}>
+                        <ApprovalReview key={item.requestId} entries={entries} maxHeight={maxHeight} />
                     </div>
                     <div className="flex items-center border-t border-border p-1">
                         <Button size="sm" aria-expanded={expanded} onClick={() => setExpanded(!expanded)}>