@adecore/agents-react 0.22.1 → 0.23.0

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

@@ -0,0 +1,145 @@
+import { useReviewSettled } from './review-settle';
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getFiletypeFromFileName } from '@pierre/diffs';
+import type { EditorEngine } from '@adecore/editor';
+import { DiffView } from '@adecore/editor-react';
+import { diffDocument, patchOf, type DiffDocument } from '@adecore/merge';
+import { chatHost } from '../../../host';
+import type { FileChange } from '../../logic/tools';
+import { useDiffSourceTokens } from '../use-diff-source-tokens';
+import { diffSourceBudget } from './diff-source-budget';
+import { DiffOmitted } from './DiffOmitted';
+import { canRenderEditorDiff, EDITOR_DIFF_LIMITS, EDITOR_DIFF_WORK } from './editor-edit-model';
+
+type EngineLoader = () => Promise<EditorEngine>;
+
+// Virtualized rows remount; retain the engine so their height does not return to the loading placeholder.
+const engines = new WeakMap<EngineLoader, EditorEngine | null>();
+
+function ReadyDiff({
+    document,
+    path,
+    engine,
+    wrap,
+    fill,
+    layout,
+    maxHeight
+}: {
+    document: DiffDocument;
+    path: string;
+    engine: EditorEngine;
+    wrap: boolean;
+    fill: boolean;
+    layout: 'unified' | 'split';
+    maxHeight: number;
+}) {
+    useReviewSettled();
+    const { t } = useTranslation('agent-chat');
+    const mode = chatHost().code.useMode();
+    const theme = chatHost().code.useThemes()[mode];
+    const language = getFiletypeFromFileName(path);
+    const tokens = useDiffSourceTokens(document, language, theme);
+    return (
+        <DiffView
+            engine={engine}
+            document={document}
+            tokens={tokens}
+            theme={theme}
+            maxHeight={maxHeight}
+            unfoldLimits={EDITOR_DIFF_LIMITS}
+            label={t('work.diffLabel', { path })}
+            layout={layout}
+            wrap={wrap}
+            fill={fill}
+            className="chat-diff select-text"
+        />
+    );
+}
+
+export function EditorDocumentDiff({
+    document,
+    path,
+    loadEngine,
+    fallback,
+    wrap = true,
+    fill = false,
+    layout = 'unified',
+    maxHeight = 480
+}: {
+    document: DiffDocument;
+    path: string;
+    loadEngine: EngineLoader;
+    fallback: ReactNode;
+    wrap?: boolean;
+    fill?: boolean;
+    layout?: 'unified' | 'split';
+    maxHeight?: number;
+}) {
+    const { t } = useTranslation('agent-chat');
+    const withinLimits = useMemo(() => canRenderEditorDiff(document), [document]);
+    const [loaded, setLoaded] = useState<{ load: EngineLoader; engine: EditorEngine | null }>();
+    useEffect(() => {
+        if (!withinLimits || engines.has(loadEngine)) {
+            return;
+        }
+        let active = true;
+        void Promise.resolve()
+            .then(loadEngine)
+            .then(
+                (engine) => {
+                    engines.set(loadEngine, engine);
+                    if (active) {
+                        setLoaded({ load: loadEngine, engine });
+                    }
+                },
+                () => {
+                    engines.set(loadEngine, null);
+                    if (active) {
+                        setLoaded({ load: loadEngine, engine: null });
+                    }
+                }
+            );
+        return () => {
+            active = false;
+        };
+    }, [loadEngine, withinLimits]);
+    const engine = loaded?.load === loadEngine ? loaded.engine : engines.get(loadEngine);
+    if (!withinLimits) {
+        return <DiffOmitted path={path} />;
+    }
+    if (engine === undefined) {
+        return <div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>;
+    }
+    return engine === null ? (
+        fallback
+    ) : (
+        <ReadyDiff document={document} path={path} engine={engine} wrap={wrap} fill={fill} layout={layout} maxHeight={maxHeight} />
+    );
+}
+
+export default function EditorEditDiff({
+    change,
+    loadEngine,
+    fallback,
+    maxHeight,
+    sourceChecked = false
+}: {
+    change: FileChange;
+    sourceChecked?: boolean;
+    loadEngine: EngineLoader;
+    fallback: ReactNode;
+    maxHeight?: number;
+}) {
+    const document = useMemo(
+        () =>
+            sourceChecked || diffSourceBudget(change.before, change.after)
+                ? diffDocument(patchOf(change.before, change.after, 3, { maxWork: EDITOR_DIFF_WORK }), { old: change.before, new: change.after })
+                : undefined,
+        [change.before, change.after, sourceChecked]
+    );
+    if (document === undefined) {
+        return <DiffOmitted path={change.path} />;
+    }
+    return <EditorDocumentDiff document={document} path={change.path} loadEngine={loadEngine} fallback={fallback} maxHeight={maxHeight} />;
+}

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

@@ -0,0 +1,60 @@
+import { useMemo, type ReactNode } from 'react';
+import type { ChatFileChange } from '@adecore/agent-contracts';
+import type { EditorEngine } from '@adecore/editor';
+import { diffDocument, parsePatch } from '@adecore/merge';
+import type { DiffContents } from '../full-diff';
+import { diffSourceBudget, patchSourceBudget } from './diff-source-budget';
+import { DiffOmitted } from './DiffOmitted';
+import { EditorDocumentDiff } from './EditorEditDiff';
+
+export default function EditorPatchDiff({
+    change,
+    sourceChecked = false,
+    contents,
+    ignoreWhitespace,
+    wrap,
+    fill,
+    maxHeight,
+    layout = 'unified',
+    loadEngine,
+    fallback
+}: {
+    change: ChatFileChange;
+    sourceChecked?: boolean;
+    contents?: DiffContents;
+    ignoreWhitespace: boolean;
+    wrap: boolean;
+    fill: boolean;
+    layout?: 'unified' | 'split';
+    maxHeight?: number;
+    loadEngine: () => Promise<EditorEngine>;
+    fallback: ReactNode;
+}) {
+    const oldText = contents?.old;
+    const newText = contents?.new;
+    const document = useMemo(() => {
+        if (!sourceChecked && (!diffSourceBudget(oldText ?? '', newText ?? '') || !patchSourceBudget(change.diff))) {
+            return undefined;
+        }
+        return diffDocument(
+            parsePatch(change.diff),
+            oldText === undefined || newText === undefined ? undefined : { old: oldText, new: newText },
+            ignoreWhitespace
+        );
+    }, [change.diff, oldText, newText, ignoreWhitespace, sourceChecked]);
+    if (document === undefined) {
+        return <DiffOmitted path={change.path} />;
+    }
+    return (
+        <EditorDocumentDiff
+            document={document}
+            path={change.path}
+            loadEngine={loadEngine}
+            fallback={fallback}
+            wrap={wrap}
+            fill={fill}
+            layout={layout}
+            maxHeight={maxHeight}
+        />
+    );
+}

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { useWorkerPool } from '@pierre/diffs/react';
+import { chatHost } from '../../../host';
+import DiffPool from '../DiffPool';
+
+export function LegacyDiffPool({ children }: { children: ReactNode }) {
+    const outer = useWorkerPool();
+    const workerFactory = chatHost().code.legacyDiffWorker;
+    if (outer !== undefined || workerFactory === undefined) {
+        return children;
+    }
+    return <DiffPool workerFactory={workerFactory}>{children}</DiffPool>;
+}

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

@@ -0,0 +1,33 @@
+import { LegacyDiffPool } from './LegacyDiffPool';
+import { useReviewSettled } from './review-settle';
+import { useMemo } from 'react';
+import { MultiFileDiff } from '@pierre/diffs/react';
+import { chatHost } from '../../../host';
+import { useDiffTheme } from '../diff-theme';
+import type { FileChange } from '../../logic/tools';
+
+export default function LegacyEditDiff({ change, maxHeight }: { change: FileChange; maxHeight?: number }) {
+    useReviewSettled();
+    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]
+    );
+    return (
+        <div className="chat-diff select-text" style={maxHeight === undefined ? undefined : { maxHeight, overflow: 'auto' }}>
+            <LegacyDiffPool>
+                <MultiFileDiff oldFile={oldFile} newFile={newFile} options={options} />
+            </LegacyDiffPool>
+        </div>
+    );
+}

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

@@ -0,0 +1,93 @@
+import { LegacyDiffPool } from './LegacyDiffPool';
+import { useReviewSettled } from './review-settle';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { FileDiff, PatchDiff } from '@pierre/diffs/react';
+import type { ChatFileChange } from '@adecore/agent-contracts';
+import { chatHost } from '../../../host';
+import { useDiffTheme } from '../diff-theme';
+import { fullFileDiff } from '../full-diff';
+import type { UnifiedDiffProps } from './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}`;
+}
+
+/* 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';
+    }
+    if (line.startsWith('-')) {
+        return 'text-chat-removed';
+    }
+    return 'text-text-muted';
+}
+
+export default function LegacyUnifiedDiff({ change, overflow = 'wrap', diffStyle = 'unified', fill = false, contents, maxHeight }: UnifiedDiffProps) {
+    useReviewSettled();
+    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" style={fill ? undefined : { maxHeight }}>
+                {change.diff
+                    .replace(/\n$/, '')
+                    .split('\n')
+                    .map((line, index) => (
+                        <div key={index} className={clsx(lineClass(line), 'whitespace-pre-wrap')}>
+                            {line}
+                        </div>
+                    ))}
+            </pre>
+        );
+    }
+    return (
+        <div
+            className={clsx('chat-diff select-text', fill && 'flex grow flex-col')}
+            style={fill || maxHeight === undefined ? undefined : { maxHeight, overflow: 'auto' }}
+        >
+            <LegacyDiffPool>{full === null ? <PatchDiff patch={patch} options={options} /> : <FileDiff fileDiff={full} options={options} />}</LegacyDiffPool>
+        </div>
+    );
+}

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

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import { useReviewSettled } from './review-settle';
+
+export function RawDiff({ text, overflow, fill, maxHeight }: { text: string; overflow: 'wrap' | 'scroll'; fill: boolean; maxHeight?: number }) {
+    useReviewSettled();
+    return (
+        <pre
+            data-diff-raw
+            className={clsx(
+                'overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text',
+                fill && 'h-full min-h-0',
+                overflow === 'wrap' ? 'whitespace-pre-wrap' : 'whitespace-pre'
+            )}
+            style={fill ? undefined : { maxHeight: maxHeight ?? 256 }}
+        >
+            {text.replace(/\n$/, '')}
+        </pre>
+    );
+}

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

@@ -0,0 +1,22 @@
+import { Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+import { lazyNamed } from '../../../lazy';
+import type { ReviewEntry } from './review-plan';
+
+const EditDiff = lazyNamed(() => import('../EditDiff'), 'default');
+const UnifiedDiff = lazyNamed(() => import('../UnifiedDiff'), 'default');
+
+export function ReviewDiff({ entry, maxHeight = 480 }: { entry: ReviewEntry; maxHeight?: number }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div data-review-entry={entry.key}>
+            <Suspense fallback={<p className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</p>}>
+                {entry.change.kind === 'edit' ? (
+                    <EditDiff change={entry.change.edit} maxHeight={maxHeight} />
+                ) : (
+                    <UnifiedDiff change={entry.change.patch} contents={entry.change.contents} maxHeight={maxHeight} />
+                )}
+            </Suspense>
+        </div>
+    );
+}

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

@@ -0,0 +1,16 @@
+import type { ChatFileChange } from '@adecore/agent-contracts';
+import type { DiffContents } from '../full-diff';
+
+export interface UnifiedDiffProps {
+    allowEditor?: boolean;
+    maxHeight?: number;
+    ignoreWhitespace?: boolean;
+    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;
+}

package/src/chat/ui/diff/diff-source-budget.ts

@@ -0,0 +1,56 @@
+interface TextBudget {
+    readonly rows: number;
+    readonly characters: number;
+    readonly lineLength: number;
+}
+
+// Diff preparation is synchronous; cap source work before creating lines or hunks.
+const SOURCE_BUDGET: TextBudget = { rows: 20000, characters: 2000000, lineLength: 1000000 };
+const PATCH_BUDGET: TextBudget = { rows: 50000, characters: 4000000, lineLength: 1000001 };
+const LEGACY_BUDGET: TextBudget = { rows: 400, characters: 100000, lineLength: 10000 };
+
+export function textFitsBudget(text: string, budget: TextBudget): boolean {
+    if (text.length > budget.characters) {
+        return false;
+    }
+    let rows = text.length === 0 ? 0 : 1;
+    let length = 0;
+    for (let index = 0; index < text.length; index++) {
+        if (text.charCodeAt(index) === 10) {
+            if (index < text.length - 1 && ++rows > budget.rows) {
+                return false;
+            }
+            length = 0;
+        } else if (++length > budget.lineLength) {
+            return false;
+        }
+    }
+    return rows <= budget.rows;
+}
+
+export function diffSourceBudget(before: string, after: string): boolean {
+    return textFitsBudget(before, SOURCE_BUDGET) && textFitsBudget(after, SOURCE_BUDGET);
+}
+
+export function patchSourceBudget(patch: string): boolean {
+    return textFitsBudget(patch, PATCH_BUDGET);
+}
+
+export function legacyDiffBudget(before: string, after: string, patch = ''): boolean {
+    // Combined sources and patch must fit one small legacy render, including trailing blank lines.
+    if (before.length + after.length + patch.length > LEGACY_BUDGET.characters) {
+        return false;
+    }
+    let rows = 2;
+    for (const text of [before, after, patch]) {
+        if (!textFitsBudget(text, LEGACY_BUDGET)) {
+            return false;
+        }
+        for (let index = 0; index < text.length; index++) {
+            if (text.charCodeAt(index) === 10 && ++rows > LEGACY_BUDGET.rows) {
+                return false;
+            }
+        }
+    }
+    return true;
+}

package/src/chat/ui/diff/editor-edit-model.ts

@@ -0,0 +1,21 @@
+import { diffRows, type DiffDocument } from '@adecore/merge';
+
+// Larger rendering tiers need native production measurements before this gate expands.
+export const EDITOR_DIFF_WORK = 4_000_000;
+export const EDITOR_DIFF_LIMITS = { rows: 2000, characters: 2000000, lineLength: 10000 };
+
+export function canRenderEditorDiff(document: DiffDocument): boolean {
+    let rows = 0;
+    let characters = 0;
+    for (const row of diffRows(document, 'unified')) {
+        if (row.kind === 'gap') {
+            continue;
+        }
+        const text = row.new === undefined ? document.sides.old[row.old!.index]! : document.sides.new[row.new.index]!;
+        characters += text.length + (rows > 0 ? 1 : 0);
+        if (++rows > EDITOR_DIFF_LIMITS.rows || characters > EDITOR_DIFF_LIMITS.characters || text.length > EDITOR_DIFF_LIMITS.lineLength) {
+            return false;
+        }
+    }
+    return true;
+}

package/src/chat/ui/diff/review-plan.ts

@@ -0,0 +1,69 @@
+import type { ChatFileChange } from '@adecore/agent-contracts';
+import type { FileChange } from '../../logic/tools';
+import type { DiffContents } from '../full-diff';
+
+export interface ReviewEntry {
+    readonly key: string;
+    readonly path: string;
+    readonly change:
+        | { readonly kind: 'edit'; readonly edit: FileChange }
+        | { readonly kind: 'patch'; readonly patch: ChatFileChange; readonly contents?: DiffContents };
+}
+
+export interface ReviewBudget {
+    readonly editors: number;
+    readonly rows: number;
+    readonly characters: number;
+}
+
+export const REVIEW_BUDGET: ReviewBudget = { editors: 3, rows: 2000, characters: 2000000 };
+export type ReviewSlot = 'editor' | 'deferred';
+
+export function reviewEntries(patches: readonly ChatFileChange[], edits: readonly FileChange[]): readonly ReviewEntry[] {
+    return [
+        ...patches.map((patch, index): ReviewEntry => ({ key: `patch:${index}:${patch.path}`, path: patch.path, change: { kind: 'patch', patch } })),
+        ...edits.map((edit, index): ReviewEntry => ({ key: `edit:${index}:${edit.path}`, path: edit.path, change: { kind: 'edit', edit } }))
+    ];
+}
+
+export function reviewSize(entry: ReviewEntry, budget: ReviewBudget = REVIEW_BUDGET): { rows: number; characters: number } {
+    const texts = entry.change.kind === 'edit' ? [entry.change.edit.before, entry.change.edit.after] : [entry.change.patch.diff];
+    const characters = texts.reduce((sum, text) => sum + text.length, 0);
+    if (characters > budget.characters) {
+        return { rows: budget.rows + 1, characters };
+    }
+    let rows = 0;
+    for (const text of texts) {
+        if (text.length > 0) {
+            rows++;
+        }
+        for (let index = text.indexOf('\n'); index >= 0; index = text.indexOf('\n', index + 1)) {
+            if (++rows > budget.rows) {
+                return { rows, characters };
+            }
+        }
+    }
+    return { rows, characters };
+}
+
+export function planReview(entries: readonly ReviewEntry[], promoted: string | null, budget: ReviewBudget = REVIEW_BUDGET): ReadonlyMap<string, ReviewSlot> {
+    const priority = entries.find((entry) => entry.key === promoted);
+    const ordered = priority === undefined ? entries : [priority, ...entries.filter((entry) => entry !== priority)];
+    const slots = new Map<string, ReviewSlot>();
+    let editors = 0;
+    let rows = 0;
+    let characters = 0;
+    for (const entry of ordered) {
+        const size = reviewSize(entry, budget);
+        // The first review keeps its own omission and error handling, even when the group estimate exceeds the budget.
+        if (editors === 0 || (editors < budget.editors && rows + size.rows <= budget.rows && characters + size.characters <= budget.characters)) {
+            slots.set(entry.key, 'editor');
+            editors++;
+            rows += size.rows;
+            characters += size.characters;
+        } else {
+            slots.set(entry.key, 'deferred');
+        }
+    }
+    return slots;
+}

package/src/chat/ui/diff/review-settle.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext, useEffect } from 'react';
+
+export const ReviewSettleContext = createContext<{ readonly key: string; settle(key: string): void } | null>(null);
+
+export function useReviewSettled(): void {
+    const scope = useContext(ReviewSettleContext);
+    const key = scope?.key;
+    const settle = scope?.settle;
+    useEffect(() => {
+        if (key !== undefined) {
+            settle?.(key);
+        }
+    }, [key, settle]);
+}