@adecore/agents-react 0.21.1 → 0.21.2

package/src/chat/ui/VisualFrame.tsx

@@ -28,10 +28,9 @@ function personActsIn(frame: HTMLIFrameElement): boolean {
 }
 
 /*
- * One visual's page in a frame on the thread's own ground. The frame loads the app's sandbox host
- * page and the bridge hands it the page and the theme. The frame never gets `allow-same-origin`,
- * which keeps the page on an opaque origin even when the host page is served on the app's own. Its
- * box keeps one height while the page loads and when it fails, so nothing under it moves.
+ * One visual's page in a frame that loads the app's sandbox host page; the bridge hands it the page and
+ * the theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even
+ * when the host page is served on the app's own. Its box keeps one height while it loads or fails.
  */
 export function VisualFrame({ chatId, visual, fill = false, className }: VisualFrameProps) {
     const { t } = useTranslation('agent-chat');

package/src/chat/ui/composer/keys.ts

@@ -60,25 +60,35 @@ export function enterAction(keys: EnterKeys, { inOpenFence, list, column }: Ente
     return list.empty ? 'leave-list' : 'continue-list';
 }
 
-/* Whether `pos` sits inside a fenced code block that has an opening fence and no closing one yet. */
-export function inOpenFence(tree: Tree, pos: number): boolean {
+/* The innermost fenced code block around `pos`, if any. */
+function enclosingFence(tree: Tree, pos: number): SyntaxNode | null {
     for (let node: SyntaxNode | null = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
         if (node.name === 'FencedCode') {
-            return pos > node.from && node.getChildren('CodeMark').length < 2;
+            return node;
         }
     }
-    return false;
+    return null;
+}
+
+/* A fence nobody has closed yet has its opening mark only. */
+function isOpenFence(fence: SyntaxNode): boolean {
+    return fence.getChildren('CodeMark').length < 2;
+}
+
+/* Whether `pos` sits inside a fenced code block that has an opening fence and no closing one yet. */
+export function inOpenFence(tree: Tree, pos: number): boolean {
+    const fence = enclosingFence(tree, pos);
+    return fence !== null && pos > fence.from && isOpenFence(fence);
 }
 
 /* Whether `pos` sits in the body of a fenced code block, open or closed: below its opening line and before its end. */
 export function inFenceBody(tree: Tree, text: string, pos: number): boolean {
-    for (let node: SyntaxNode | null = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
-        if (node.name === 'FencedCode') {
-            const openingEnd = text.indexOf('\n', node.from);
-            return openingEnd !== -1 && pos > openingEnd && (pos < node.to || node.getChildren('CodeMark').length < 2);
-        }
+    const fence = enclosingFence(tree, pos);
+    if (fence === null) {
+        return false;
     }
-    return false;
+    const openingEnd = text.indexOf('\n', fence.from);
+    return openingEnd !== -1 && pos > openingEnd && (pos < fence.to || isOpenFence(fence));
 }
 
 /* The spaces Tab inserts at `column`, up to the next stop of four, the way a code editor lines up. */
@@ -97,7 +107,7 @@ export function inCode(tree: Tree, text: string, pos: number): boolean {
     let blockFrom: number | null = null;
     for (let node: SyntaxNode | null = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
         if (node.name === 'FencedCode') {
-            return pos > node.from && (pos < node.to || node.getChildren('CodeMark').length < 2);
+            return pos > node.from && (pos < node.to || isOpenFence(node));
         }
         if (node.name === 'InlineCode' && pos > node.from && pos < node.to) {
             return true;

package/src/chat/ui/intelligent-ui/render-context.ts

@@ -1,9 +1,9 @@
 import { createContext, type ReactNode } from 'react';
 import type { UiComponentName, UiProps, UiViewNode } from '@adecore/intelligent-ui';
-
-export type { UiLinkTarget } from '@adecore/intelligent-ui/links';
 import type { UiLinkTarget } from '@adecore/intelligent-ui/links';
 
+export type { UiLinkTarget };
+
 /* How the host lets a link be drawn: a chip it can open, or plain text it cannot. */
 export interface UiLink {
     state: 'chip' | 'plain';

package/src/chat/ui/rehype-chips.ts

@@ -1,6 +1,6 @@
 import { chipText, tokenizeChips, type ChipSegment } from '../mentions';
 
-/* Just the part of hast this plugin touches; the package's own types are not a dependency of the client. */
+/* Just the part of hast this plugin touches; the package's own types are not a dependency here. */
 interface HastText {
     type: 'text';
     value: string;

package/src/chat/ui/rehype-fade.ts

@@ -1,4 +1,4 @@
-/* Just the part of hast this plugin touches; the package's own types are not a dependency of the client. */
+/* Just the part of hast this plugin touches; the package's own types are not a dependency here. */
 interface HastText {
     type: 'text';
     value: string;

package/src/chat/ui/remark-html-as-text.ts

@@ -1,4 +1,4 @@
-/* Just the part of mdast this plugin touches; the package's own types are not a dependency of the client. */
+/* Just the part of mdast this plugin touches; the package's own types are not a dependency here. */
 interface MdastNode {
     type: string;
     value?: string;

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

@@ -391,9 +391,8 @@ function OpenChatButton({ chatId }: { chatId: string }) {
 }
 
 /*
- * The header of a turn the agent started itself, in place of the message of the person that is
- * missing. It is one line: what the sub-agent came back with lives on that agent's own row, behind
- * "Show result". When the CLI named the sub-agent it woke up about, the header opens that row.
+ * The header of a turn the agent started itself, in place of a message of the person. What the
+ * sub-agent came back with lives on its own row, which the header opens when the CLI named it.
  */
 export function AgentTurnRow({ label, onOpen }: { label: string; onOpen?: () => void }) {
     const line = 'mb-0.5 flex h-7 w-full items-center gap-2 text-left text-xs text-text-muted';
@@ -430,7 +429,7 @@ export function CompactionRow({ preTokens }: { preTokens: number | null }) {
     );
 }
 
-const DECISION_ICON: Record<Exclude<ChatApprovalItem['decision'], 'pending'>, React.ReactNode> = {
+const DECISION_ICON: Record<Exclude<ChatApprovalItem['decision'], 'pending'>, ReactNode> = {
     allow: <Icon icon={Check} size={12} />,
     'allow-always': <Icon icon={Check} size={12} />,
     deny: <Icon icon={X} size={12} />,

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/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

@@ -194,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: {},
@@ -247,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) => {