@adecore/agents-react 0.21.0 → 0.21.2

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

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useState } from 'react';
+import { Suspense, useEffect, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
 import clsx from 'clsx';
 import i18next from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -40,14 +40,14 @@ export function ToggleLine({
     trailing,
     className
 }: {
-    icon: React.ReactNode;
+    icon: ReactNode;
     label: string;
     detail?: string;
     open: boolean;
     onToggle(): void;
     failed?: boolean;
     live?: boolean;
-    trailing?: React.ReactNode;
+    trailing?: ReactNode;
     className?: string;
 }) {
     return (
@@ -75,24 +75,60 @@ export function ToggleLine({
     );
 }
 
-function ToolBody({ tool }: { tool: ChatToolItem }) {
+/* The diff renderers load lazily, so a diff waits on them under a line that says so. */
+function DiffSuspense({ children }: { children: ReactNode }) {
     const { t } = useTranslation('agent-chat');
+    return <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>{children}</Suspense>;
+}
+
+/* A file in a changed files card, which opens its diff under it. */
+function ChangedFileLine({
+    path,
+    open,
+    onToggle,
+    trailing,
+    children
+}: {
+    path: string;
+    open: boolean;
+    onToggle(): void;
+    trailing: ReactNode;
+    children: ReactNode;
+}) {
+    return (
+        <div className="border-t border-border">
+            <button
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover"
+                data-file-path={path}
+                onClick={onToggle}
+            >
+                <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
+                <span className="min-w-0 truncate font-mono text-text">{path}</span>
+                <span className="grow" />
+                {trailing}
+            </button>
+            {open && <div className="border-t border-border">{children}</div>}
+        </div>
+    );
+}
+
+function ToolBody({ tool }: { tool: ChatToolItem }) {
     const patches = unifiedChanges(tool);
     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 ? (
-                <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+                <DiffSuspense>
                     {patches.map((change, index) => (
                         <UnifiedDiff key={index} change={change} />
                     ))}
-                </Suspense>
+                </DiffSuspense>
             ) : changes.length > 0 ? (
-                <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+                <DiffSuspense>
                     {changes.map((change, index) => (
                         <EditDiff key={index} change={change} />
                     ))}
-                </Suspense>
+                </DiffSuspense>
             ) : (
                 <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) ?? '')}
@@ -113,9 +149,10 @@ function ToolBody({ tool }: { tool: ChatToolItem }) {
     );
 }
 
-/* One settled tool call: a line, and its input and output behind it. An image the call looked at
-   is drawn under the line, because a picture says more about that read than its path does.
-   `icon`, `label` and `failed` let a row that knows the call better name it in its own words. */
+/*
+ * One settled tool call: a line, and its input and output behind it. An image the call looked at is
+ * drawn under the line. `icon`, `label` and `failed` let a row that knows the call better name it.
+ */
 export function WorkRow({
     tool,
     nested,
@@ -127,7 +164,7 @@ export function WorkRow({
     tool: ChatToolItem;
     nested?: boolean;
     detail?: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     label?: string;
     failed?: boolean;
 }) {
@@ -235,14 +272,13 @@ function omittedLabel(reason: 'binary' | 'too-large'): string {
 
 /* One file of a turn's checkpoint diff: its patch, or the reason there is none. */
 function CheckpointFileBody({ file }: { file: ChatCheckpointFile }) {
-    const { t } = useTranslation('agent-chat');
     if (file.omitted) {
         return <div className="px-3 py-2 text-xs text-text-faint">{omittedLabel(file.omitted)}</div>;
     }
     return (
-        <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+        <DiffSuspense>
             <UnifiedDiff change={file} />
-        </Suspense>
+        </DiffSuspense>
     );
 }
 
@@ -261,11 +297,11 @@ function ChangedFilesCard({
     deleted?: number;
     /* A jump from outside the chat that asked for this card; each new one opens it. */
     revealNonce?: number;
-    children: React.ReactNode;
+    children: ReactNode;
 }) {
     const { t } = useTranslation('agent-chat');
     const [expanded, setExpanded] = useState(false);
-    // A jump from outside opens the card, also when the jump put the row on screen and so mounted it; the flash is gone by the time the row is scrolled to again.
+    // A jump opens the card, also one that mounted it by scrolling it on screen; the flash is gone by the next visit.
     const [seenReveal, setSeenReveal] = useState(0);
     if (revealNonce > 0 && revealNonce !== seenReveal) {
         setSeenReveal(revealNonce);
@@ -345,28 +381,20 @@ export function ChangedFilesRow({
                 deleted={files.reduce((sum, file) => sum + file.deleted, 0)}
             >
                 {files.map((file) => (
-                    <div key={file.path} className="border-t border-border">
-                        <button
-                            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover"
-                            data-file-path={file.path}
-                            onClick={() => setOpen((o) => ({ ...o, [file.path]: !o[file.path] }))}
-                        >
-                            <Icon
-                                icon={ChevronRight}
-                                size={12}
-                                className={clsx('shrink-0 text-text-faint transition-transform', open[file.path] && 'rotate-90')}
-                            />
-                            <span className="min-w-0 truncate font-mono text-text">{file.path}</span>
-                            <span className="grow" />
-                            <span className="text-chat-added tabular-nums">+{file.added}</span>
-                            <span className="text-chat-removed tabular-nums">-{file.deleted}</span>
-                        </button>
-                        {open[file.path] && (
-                            <div className="border-t border-border">
-                                <CheckpointFileBody file={file} />
-                            </div>
-                        )}
-                    </div>
+                    <ChangedFileLine
+                        key={file.path}
+                        path={file.path}
+                        open={open[file.path] === true}
+                        onToggle={() => setOpen((o) => ({ ...o, [file.path]: !o[file.path] }))}
+                        trailing={
+                            <>
+                                <span className="text-chat-added tabular-nums">+{file.added}</span>
+                                <span className="text-chat-removed tabular-nums">-{file.deleted}</span>
+                            </>
+                        }
+                    >
+                        <CheckpointFileBody file={file} />
+                    </ChangedFileLine>
                 ))}
             </ChangedFilesCard>
         );
@@ -384,7 +412,7 @@ function ProviderChangedFiles({
     tools: ChatToolItem[];
     open: Record<string, boolean>;
     revealNonce: number;
-    setOpen: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    setOpen: Dispatch<SetStateAction<Record<string, boolean>>>;
 }) {
     const { t } = useTranslation('agent-chat');
     const byPath = new Map<string, { edits: FileChange[]; patches: ChatFileChange[] }>();
@@ -411,35 +439,24 @@ function ProviderChangedFiles({
     }
     return (
         <ChangedFilesCard count={byPath.size} revealNonce={revealNonce}>
-            {[...byPath].map(([path, entry]) => {
-                const count = entry.edits.length + entry.patches.length;
-                return (
-                    <div key={path} className="border-t border-border">
-                        <button
-                            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover"
-                            data-file-path={path}
-                            onClick={() => setOpen((o) => ({ ...o, [path]: !o[path] }))}
-                        >
-                            <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open[path] && 'rotate-90')} />
-                            <span className="min-w-0 truncate font-mono text-text">{path}</span>
-                            <span className="grow" />
-                            <span className="text-text-faint">{t('work.edits', { count })}</span>
-                        </button>
-                        {open[path] && (
-                            <div className="border-t border-border">
-                                <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
-                                    {entry.patches.map((change, index) => (
-                                        <UnifiedDiff key={`patch-${index}`} change={change} />
-                                    ))}
-                                    {entry.edits.map((change, index) => (
-                                        <EditDiff key={`edit-${index}`} change={change} />
-                                    ))}
-                                </Suspense>
-                            </div>
-                        )}
-                    </div>
-                );
-            })}
+            {[...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>
+            ))}
         </ChangedFilesCard>
     );
 }

package/src/chat/visual-viewport.ts

@@ -2,7 +2,7 @@ import type { VisualScrollRequest } from '@adecore/agent-contracts/visual';
 import { visualViewportGeometry } from './logic/visual-viewport';
 import type { VisualBridge } from './visual-bridge';
 
-/** Keeps one small frame in a full-height timeline row, without rendering React on scroll. */
+/* Keeps one small frame in a full-height timeline row, without rendering React on scroll. */
 export class VisualViewportController {
     private readonly box: HTMLElement;
     private readonly viewport: HTMLElement;
@@ -40,11 +40,7 @@ export class VisualViewportController {
         if (this.disposed) {
             return;
         }
-        const outer = this.scroller.getBoundingClientRect();
-        const box = this.box.getBoundingClientRect();
-        // A chat on a canvas can be scaled; messages inside its frame use unscaled CSS pixels.
-        const scale = outer.height / this.scroller.offsetHeight || 1;
-        const top = (box.top - outer.top) / scale - this.scroller.clientTop;
+        const top = this.offsetInScroller(this.scroller.getBoundingClientRect(), this.box.getBoundingClientRect());
         const available = this.scroller.clientHeight;
         const geometry = visualViewportGeometry(this.box.offsetHeight, available, top);
         this.viewport.style.height = `${geometry.height}px`;
@@ -67,8 +63,7 @@ export class VisualViewportController {
             return;
         }
         this.pendingDelta = 0;
-        const scale = outer.height / this.scroller.offsetHeight || 1;
-        const start = this.scroller.scrollTop + (box.top - outer.top) / scale - this.scroller.clientTop;
+        const start = this.scroller.scrollTop + this.offsetInScroller(outer, box);
         const top = 'to' in request ? start + request.to : request.edge === 'start' ? 0 : this.scroller.scrollHeight;
         this.scroller.scrollTo({ top, behavior: 'instant' });
         this.refresh();
@@ -83,6 +78,13 @@ export class VisualViewportController {
         this.bridge.setViewport(null);
     }
 
+    /* The box's top below the scroller's visible top, in the scroller's own pixels. */
+    private offsetInScroller(outer: DOMRect, box: DOMRect): number {
+        // A chat on a canvas can be scaled; messages inside its frame use unscaled CSS pixels.
+        const scale = outer.height / this.scroller.offsetHeight || 1;
+        return (box.top - outer.top) / scale - this.scroller.clientTop;
+    }
+
     private schedule(): void {
         if (this.frame || this.disposed) {
             return;

package/src/host.ts

@@ -134,7 +134,7 @@ export interface TimelineFind {
 /* The dictation control beside the composer's editor; it takes its text from the editor itself. */
 export interface ComposerDictationProps {
     targetRef: RefObject<HTMLElement | null>;
-    /* Where the button goes, in the composer's row of round controls. */
+    /* In the composer's row of round controls. */
     buttonContainer: HTMLElement | null | undefined;
     disabled: boolean;
     editor(): EditorView | null;
@@ -239,7 +239,6 @@ export interface ChatHost {
     /* The image a tool read, drawn under its row; null draws none. */
     ReadImage: ComponentType<{ path: string }> | null;
     code: {
-        /* Whether the app is light or dark right now. */
         useMode(): 'light' | 'dark';
         /* The Shiki theme ids code is drawn in, one per mode. */
         useThemes(): { light: string; dark: string };
@@ -300,7 +299,6 @@ export interface ChatHost {
     };
     /* Offers a fork of the chat after one of its turns; null offers none. */
     fork: ((chatId: string, turnId: string) => void) | null;
-    /* Opens the app's settings on a section: `providers`, or `agents`. */
     openSettings(section: 'providers' | 'agents'): void;
     /* Whether the host lets a chat go on by itself once a limit it stopped on lifts. */
     useResumeAtReset(scopeId: string): boolean;

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

@@ -498,6 +498,7 @@
       "from": "from {{previous}}"
     },
     "table": {
+      "label": "Table of {{columns}}",
       "showAll": "Show all {{total}} rows"
     },
     "chart": {
@@ -514,8 +515,10 @@
     "outsideProject": "Outside the project, shown as text",
     "options": "Options",
     "choices": "Choices",
+    "checklist": "Checklist",
     "choice": {
       "waiting": "Available when the reply is done",
+      "reading": "Available once the live data is read",
       "unavailable": "Not available",
       "sent": "Sent",
       "queued": "Queued",
@@ -525,14 +528,11 @@
     "answered": "Answered with “{{label}}”",
     "chose": "Chose “{{label}}”",
     "choseOlder": "Chose “{{label}}” on the reply of {{time}}",
-    "sendContext": "Send",
-    "copyText": "Copy text",
     "fixes_one": "{{count}} fix",
     "fixes_other": "{{count}} fixes",
     "shownAsText": "Shown as text",
     "unknownComponent": "This version cannot draw {{component}}",
     "renderFailed": "Could not draw this part",
-    "tooLarge": "The block is too large to draw",
     "unreadable": "The block could not be read",
     "live": {
       "label": "Live",
@@ -540,7 +540,26 @@
       "sources": "Reads {{sources}}",
       "failed": "Could not read {{source}}",
       "refused": "Not allowed to read {{source}}",
-      "notRead": "Not read"
+      "notRead": "Not read",
+      "reasons": {
+        "access-unavailable": "The access of the chat that wrote this is no longer available.",
+        "block-stale": "This block changed since it was drawn.",
+        "busy": "Too many live blocks are reading right now.",
+        "link-unchecked": "This link has to be checked again.",
+        "link-unsupported": "This is not a link the machine can open.",
+        "links-unsupported": "The machine does not open links from blocks.",
+        "no-unique-match": "The source found no single match for that name.",
+        "outside-project": "This is outside the project the agent wrote this in.",
+        "query-undeclared": "This block does not read that source.",
+        "refresh-limit": "This source reads at most once every ten seconds.",
+        "result-too-large": "What the source returned is too large.",
+        "snapshot-too-large": "The first readings were too large to keep.",
+        "source-unregistered": "The machine does not know this source.",
+        "stale-read": "Read the source again before you choose.",
+        "target-unavailable": "What this points to is no longer available.",
+        "timed-out": "The source took too long to answer.",
+        "unreadable": "The source could not be read."
+      }
     }
   }
 }

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

@@ -498,6 +498,7 @@
       "from": "vanaf {{previous}}"
     },
     "table": {
+      "label": "Tabel van {{columns}}",
       "showAll": "Alle {{total}} rijen tonen"
     },
     "chart": {
@@ -514,8 +515,10 @@
     "outsideProject": "Buiten het project, als tekst getoond",
     "options": "Opties",
     "choices": "Keuzes",
+    "checklist": "Checklijst",
     "choice": {
       "waiting": "Beschikbaar zodra het antwoord klaar is",
+      "reading": "Beschikbaar zodra de live gegevens gelezen zijn",
       "unavailable": "Niet beschikbaar",
       "sent": "Verstuurd",
       "queued": "In de wachtrij",
@@ -525,14 +528,11 @@
     "answered": "Beantwoord met “{{label}}”",
     "chose": "Gekozen: “{{label}}”",
     "choseOlder": "Gekozen: “{{label}}”, bij het antwoord van {{time}}",
-    "sendContext": "Versturen",
-    "copyText": "Tekst kopiëren",
     "fixes_one": "{{count}} correctie",
     "fixes_other": "{{count}} correcties",
     "shownAsText": "Als tekst getoond",
     "unknownComponent": "Deze versie kan {{component}} niet tekenen",
     "renderFailed": "Dit deel kon niet getekend worden",
-    "tooLarge": "Het blok is te groot om te tekenen",
     "unreadable": "Het blok kon niet gelezen worden",
     "live": {
       "label": "Live",
@@ -540,7 +540,26 @@
       "sources": "Leest {{sources}}",
       "failed": "{{source}} lezen lukte niet",
       "refused": "Geen toegang tot {{source}}",
-      "notRead": "Niet gelezen"
+      "notRead": "Niet gelezen",
+      "reasons": {
+        "access-unavailable": "De toegang van de chat die dit schreef is niet meer beschikbaar.",
+        "block-stale": "Dit blok is veranderd sinds het getekend werd.",
+        "busy": "Er lezen nu te veel live blokken tegelijk.",
+        "link-unchecked": "Deze link moet opnieuw gecontroleerd worden.",
+        "link-unsupported": "Dit is geen link die de machine kan openen.",
+        "links-unsupported": "De machine opent geen links uit blokken.",
+        "no-unique-match": "De bron vond voor die naam niet precies één overeenkomst.",
+        "outside-project": "Dit valt buiten het project waarin de agent dit schreef.",
+        "query-undeclared": "Dit blok leest die bron niet.",
+        "refresh-limit": "Deze bron leest hooguit eens per tien seconden.",
+        "result-too-large": "Wat de bron teruggaf is te groot.",
+        "snapshot-too-large": "De eerste metingen waren te groot om te bewaren.",
+        "source-unregistered": "De machine kent deze bron niet.",
+        "stale-read": "Lees de bron opnieuw voordat je kiest.",
+        "target-unavailable": "Waar dit naar verwijst is niet meer beschikbaar.",
+        "timed-out": "De bron deed er te lang over om te antwoorden.",
+        "unreadable": "De bron kon niet gelezen worden."
+      }
     }
   }
 }

package/src/port-transport.ts

@@ -110,15 +110,11 @@ export function portTransport(port: FramePort): PortTransport {
             return promise;
         },
         on<E extends AgentEventType>(event: E, handler: (payload: ChatEventMap[E]) => void): () => void {
-            let handlers = eventHandlers.get(event);
-            if (!handlers) {
-                handlers = new Set();
-                eventHandlers.set(event, handlers);
-            }
-            const set = handlers;
-            set.add(handler);
+            const handlers = eventHandlers.get(event) ?? new Set();
+            eventHandlers.set(event, handlers);
+            handlers.add(handler);
             return () => {
-                set.delete(handler);
+                handlers.delete(handler);
             };
         },
         subscribeStatus(handler: (status: ChatTransportStatus) => void): () => void {

package/src/state/chats.ts

@@ -160,7 +160,11 @@ export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
         case 'delta': {
             const item = state.items[event.itemId];
             if (event.uiQueries && item?.kind === 'assistant') {
-                return { ...state, items: { ...state.items, [event.itemId]: { ...item, uiQueries: event.uiQueries } } };
+                // The text first, as the daemon's thread applies it, then the metadata on what it grew into.
+                const { uiQueries, ...text } = event;
+                const grown = event.text === '' ? state : applyEvent(state, text);
+                const reply = grown.items[event.itemId] ?? item;
+                return { ...grown, items: { ...grown.items, [event.itemId]: { ...reply, uiQueries } as ChatItem } };
             }
             if (event.ui !== undefined && event.text === '') {
                 if (item?.kind === 'assistant' && item.streaming && event.textLength === item.text.length) {
@@ -190,6 +194,15 @@ export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
     }
 }
 
+/* Fields of a held chat that are not part of its thread; a chat this client does not hold stays as it is. */
+function withFields(store: ChatsStore, key: string, fields: Pick<ChatState, 'bookmarks' | 'visuals'>): Partial<ChatsStore> {
+    const current = store.byKey[key];
+    if (!current) {
+        return {};
+    }
+    return { byKey: { ...store.byKey, [key]: { ...current, ...fields } } };
+}
+
 export const useChats = create<ChatsStore>((set) => ({
     byKey: {},
     statusByKey: {},
@@ -243,22 +256,10 @@ export const useChats = create<ChatsStore>((set) => ({
         });
     },
     bookmarks(key, bookmarks) {
-        set((s) => {
-            const current = s.byKey[key];
-            if (!current) {
-                return {};
-            }
-            return { byKey: { ...s.byKey, [key]: { ...current, bookmarks } } };
-        });
+        set((s) => withFields(s, key, { bookmarks }));
     },
     visuals(key, visuals) {
-        set((s) => {
-            const current = s.byKey[key];
-            if (!current) {
-                return {};
-            }
-            return { byKey: { ...s.byKey, [key]: { ...current, visuals } } };
-        });
+        set((s) => withFields(s, key, { visuals }));
     },
     forget(key) {
         set((s) => {