@adecore/agents-react 0.22.0 → 0.23.0

package/src/chat/ui/intelligent-ui/renderers/links.tsx

@@ -115,11 +115,11 @@ function LinkRow({ target, context, described, children }: { target: UiLinkTarge
         return <UiLinkChip target={target} context={context} />;
     }
     return (
-        <div className="flex min-w-0 items-baseline gap-2 px-2 text-sm">
-            <span className="shrink-0">
+        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 px-2 text-sm">
+            <span className="max-w-full min-w-0">
                 <UiLinkChip target={target} context={context} />
             </span>
-            <span className="min-w-0 text-text-muted">{children}</span>
+            <span className="min-w-0 wrap-break-word text-text-muted">{children}</span>
         </div>
     );
 }

package/src/chat/ui/intelligent-ui/renderers/text.tsx

@@ -31,20 +31,27 @@ function isLive(context: UiRenderContext): boolean {
     return context.phase === 'streaming' || (context.live !== undefined && context.live !== null && context.live.state !== 'refused');
 }
 
+/* A badge longer than this is a sentence, which a tag cannot wrap; it stands under the title as text instead. */
+const BADGE_AS_TAG = 32;
+
 /* The head of the block when it is the first node, a subheading without an icon further down. */
 export function SummaryRenderer({ node, children }: UiRendererProps<UiProps<'Summary'>>) {
     const headId = useContext(UiHeadContext);
     const head = headId === undefined || headId === node.id;
     const { tone, badge } = node.props;
+    const tag = badge !== undefined && badge !== '' && badge.length <= BADGE_AS_TAG;
     return (
         <div className="flex items-start gap-2 px-2">
             {head && tone !== undefined && <Icon icon={UI_TONE_ICONS[tone]} size={16} className={clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone])} />}
-            <div className="min-w-0 grow text-sm font-semibold text-balance text-text">{children}</div>
-            {badge !== undefined && badge !== '' && (
-                <Pill shape="tag" tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]} className="shrink-0">
-                    {badge}
-                </Pill>
-            )}
+            <div className="flex min-w-0 grow flex-wrap items-start gap-x-2 gap-y-1">
+                <div className="max-w-full min-w-0 grow basis-48 text-sm font-semibold text-balance wrap-break-word text-text">{children}</div>
+                {tag && (
+                    <Pill shape="tag" tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]}>
+                        {badge}
+                    </Pill>
+                )}
+                {!tag && badge !== undefined && badge !== '' && <p className="w-full text-xs wrap-anywhere text-text-muted">{badge}</p>}
+            </div>
         </div>
     );
 }
@@ -117,8 +124,11 @@ export function StepRenderer({ node, children, context }: UiRendererProps<UiProp
                 )}
             </span>
             <span className="sr-only">{t(`blocks.step.${state}`)}</span>
-            <span className={clsx('min-w-0 grow', quiet ? 'text-text-faint' : 'text-text')}>{children}</span>
-            {detail !== undefined && detail !== '' && <span className="shrink-0 text-xs text-text-faint tabular-nums">{detail}</span>}
+            {/* A short detail stays beside the title; one that does not fit beside it takes the line under it. */}
+            <span className="flex min-w-0 grow flex-wrap items-baseline justify-between gap-x-2">
+                <span className={clsx('max-w-full min-w-0 grow basis-48 wrap-break-word', quiet ? 'text-text-faint' : 'text-text')}>{children}</span>
+                {detail !== undefined && detail !== '' && <span className="max-w-full text-xs wrap-anywhere text-text-faint tabular-nums">{detail}</span>}
+            </span>
         </li>
     );
 }

package/src/chat/ui/intelligent-ui/table-data.ts

@@ -21,8 +21,8 @@ export type UiTableCell =
 
 /* Rows shown before a person asks for all of them. */
 export const UI_TABLE_ROWS = 50;
-/* Columns a table without Column children takes from its rows. */
-const DERIVED_COLUMNS = 8;
+/* The furthest a JavaScript Date reaches from the epoch either way, in milliseconds. */
+const DATE_RANGE = 8.64e15;
 const NUMERIC_KINDS: ReadonlySet<UiColumnKind> = new Set(['number', 'bytes', 'duration']);
 
 export function isNumericColumn(column: UiTableColumn): boolean {
@@ -51,7 +51,7 @@ export function uiTableColumns(node: UiViewNode<UiProps<'Table'>>): UiTableColum
     const keys: string[] = [];
     for (const row of rows) {
         for (const key of Object.keys(row)) {
-            if (!keys.includes(key) && keys.length < DERIVED_COLUMNS) {
+            if (!keys.includes(key)) {
                 keys.push(key);
             }
         }
@@ -92,7 +92,7 @@ export function uiTableCell(value: unknown, column: UiTableColumn): UiTableCell
         }
         case 'date': {
             const at = typeof value === 'number' ? value : typeof value === 'string' ? Date.parse(value) : Number.NaN;
-            return Number.isFinite(at) ? { kind: 'date', at } : { kind: 'text', text: textOf(value) };
+            return Number.isFinite(at) && Math.abs(at) <= DATE_RANGE ? { kind: 'date', at } : { kind: 'text', text: textOf(value) };
         }
         case 'file':
             return typeof value === 'string' ? { kind: 'file', path: value } : { kind: 'text', text: textOf(value) };

package/src/chat/ui/intelligent-ui/use-truncated.ts

@@ -0,0 +1,33 @@
+import { useCallback, useState } from 'react';
+
+function cut(element: HTMLElement): boolean {
+    return element.scrollWidth > element.clientWidth + 1;
+}
+
+/*
+ * Whether an element's text is cut short where it stands, for a tooltip or a list of values that shows
+ * it whole exactly then. `within` asks the same of every `.truncate` element inside it instead. Measured
+ * again when the box resizes or the text changes, since neither moves the other.
+ */
+export function useTruncated<T extends HTMLElement>(within = false): [(element: T | null) => (() => void) | undefined, boolean] {
+    const [truncated, setTruncated] = useState(false);
+    const measure = useCallback(
+        (element: T | null) => {
+            if (element === null || typeof ResizeObserver === 'undefined') {
+                return undefined;
+            }
+            const check = () => setTruncated(within ? [...element.querySelectorAll<HTMLElement>('.truncate')].some(cut) : cut(element));
+            check();
+            const resize = new ResizeObserver(check);
+            resize.observe(element);
+            const text = new MutationObserver(check);
+            text.observe(element, { characterData: true, childList: true, subtree: true });
+            return () => {
+                resize.disconnect();
+                text.disconnect();
+            };
+        },
+        [within]
+    );
+    return [measure, truncated];
+}

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",
@@ -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/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",
@@ -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/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)}>