@adecore/agents-react 0.17.0-beta.1 → 0.17.0

package/dist/chat/ui/rows/WorkRows.js

@@ -34,7 +34,7 @@ function ToolBody({ tool }) {
     const { t } = useTranslation('agent-chat');
     const patches = unifiedChanges(tool);
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
-    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: changes.map((change, index) => (_jsx(EditDiff, { change: change }, index))) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-term-red' : 'text-term-fg'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
+    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: changes.map((change, index) => (_jsx(EditDiff, { change: change }, index))) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
 }
 /* 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. */
@@ -56,7 +56,7 @@ export function WorkLiveRow({ chatId, tool: derived }) {
     const [open, setOpen] = useState(false);
     const tool = useCurrentItem(chatId, derived);
     const tail = liveOutput(tool);
-    return (_jsxs("div", { children: [_jsx(ToggleLine, { icon: toolIcon(tool.name), label: tool.name, detail: toolSummary(tool.name, tool.input) || tool.progress?.description || '', open: open, onToggle: () => setOpen((o) => !o), trailing: _jsx(RunningFor, { startedAt: toolStartedAt(tool) }), live: true }), open && _jsx(ToolBody, { tool: tool }), tail !== null && !open && (_jsx("pre", { className: "mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-term-fg select-text", children: _jsx(AnsiOutput, { text: tail, tailLines: 12 }) }))] }));
+    return (_jsxs("div", { children: [_jsx(ToggleLine, { icon: toolIcon(tool.name), label: tool.name, detail: toolSummary(tool.name, tool.input) || tool.progress?.description || '', open: open, onToggle: () => setOpen((o) => !o), trailing: _jsx(RunningFor, { startedAt: toolStartedAt(tool) }), live: true }), open && _jsx(ToolBody, { tool: tool }), tail !== null && !open && (_jsx("pre", { className: "mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-chat-output select-text", children: _jsx(AnsiOutput, { text: tail, tailLines: 12 }) }))] }));
 }
 /* A run of tool calls as one line ("Read 4 files"); opening it lists every call. */
 export function WorkGroupRow({ tools, summary, expanded, onToggle }) {
@@ -91,7 +91,7 @@ function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, c
         setSeenReveal(revealNonce);
         setExpanded(true);
     }
-    return (_jsxs("div", { className: "mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [_jsx(Icon, { icon: FileDiff, size: 12, className: "shrink-0" }), _jsx("span", { className: "shrink-0 font-medium text-text", children: t('work.changedFiles', { count }) }), truncated && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: t('work.andMore') }), _jsx("span", { className: "grow" }), added !== undefined && _jsxs("span", { className: "text-term-green tabular-nums", children: ["+", added] }), deleted !== undefined && _jsxs("span", { className: "text-term-red tabular-nums", children: ["-", deleted] }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90') })] }), expanded && children] }));
+    return (_jsxs("div", { className: "mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [_jsx(Icon, { icon: FileDiff, size: 12, className: "shrink-0" }), _jsx("span", { className: "shrink-0 font-medium text-text", children: t('work.changedFiles', { count }) }), truncated && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: t('work.andMore') }), _jsx("span", { className: "grow" }), added !== undefined && _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", added] }), deleted !== undefined && _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", deleted] }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90') })] }), expanded && children] }));
 }
 /*
  * The files a settled turn changed, as a card; each file opens its diff in place. The host's
@@ -126,7 +126,7 @@ export function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }) {
     const revealNonce = flash !== null && flash.opens && flash.key === keyOf(chatId) && flash.rowId === `files-${turnId}` ? flash.nonce : 0;
     if (checkpointDiff !== null && checkpointDiff.files.length > 0) {
         const files = checkpointDiff.files;
-        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsxs("div", { className: "border-t border-border", children: [_jsxs("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] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[file.path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: file.path }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "text-term-green tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-term-red tabular-nums", children: ["-", file.deleted] })] }), open[file.path] && (_jsx("div", { className: "border-t border-border", children: _jsx(CheckpointFileBody, { file: file }) }))] }, file.path))) }));
+        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsxs("div", { className: "border-t border-border", children: [_jsxs("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] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[file.path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: file.path }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", file.deleted] })] }), open[file.path] && (_jsx("div", { className: "border-t border-border", children: _jsx(CheckpointFileBody, { file: file }) }))] }, file.path))) }));
     }
     return _jsx(ProviderChangedFiles, { tools: tools, open: open, setOpen: setOpen, revealNonce: revealNonce });
 }

package/dist/chat/ui/visual-theme.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+import { type VisualAppearance, type VisualTheme } from '@adecore/agent-contracts/visual';
+export interface VisualTokens {
+    color(token: string): string;
+    length(token: string): string;
+    value(token: string): string;
+}
+export declare function visualThemeOf(tokens: VisualTokens, appearance: VisualAppearance, background: string): VisualTheme;
+export declare function backgroundBehind(layers: readonly string[]): string | null;
+export declare function useVisualTheme(ref: RefObject<HTMLElement | null>): VisualTheme | null;

package/dist/chat/ui/visual-theme.js

@@ -0,0 +1,172 @@
+import { useLayoutEffect, useState } from 'react';
+import { cleanVisualVariables } from '@adecore/agent-contracts/visual';
+import { chatHost } from '../../host.js';
+/*
+ * A page's theme from the app's tokens. The names follow common component themes, where `--accent`
+ * is a quiet hover ground and `--primary` the color that stands out, so the app's accent is the
+ * primary, the ring and the first series of a chart. A variable without a token here, or with a
+ * token the app does not set, keeps the page's default for this appearance.
+ */
+export function visualThemeOf(tokens, appearance, background) {
+    const text = tokens.color('--text');
+    const quiet = tokens.color('--surface-hover');
+    const raised = tokens.color('--surface-raised');
+    const accent = tokens.color('--accent');
+    const onAccent = tokens.color('--accent-text');
+    const variables = {
+        '--background': background,
+        '--foreground': text,
+        '--muted': quiet,
+        '--muted-foreground': tokens.color('--text-muted'),
+        '--card': raised,
+        '--card-foreground': text,
+        '--popover': raised,
+        '--popover-foreground': text,
+        '--secondary': quiet,
+        '--secondary-foreground': text,
+        '--border': tokens.color('--border'),
+        '--input': tokens.color('--border-strong'),
+        '--ring': accent,
+        '--primary': accent,
+        '--primary-foreground': onAccent,
+        '--accent': quiet,
+        '--accent-foreground': text,
+        '--destructive': tokens.color('--status-error'),
+        '--destructive-foreground': onAccent,
+        '--warning': tokens.color('--status-needs-you'),
+        '--success': tokens.color('--positive'),
+        '--success-foreground': tokens.color('--positive-text'),
+        '--info': tokens.color('--status-running'),
+        '--code-background': tokens.color('--chat-code-bg'),
+        '--code-foreground': tokens.color('--chat-output'),
+        '--chart-1': tokens.color('--chart-1') || accent,
+        '--chart-2': tokens.color('--chart-2'),
+        '--chart-3': tokens.color('--chart-3'),
+        '--chart-4': tokens.color('--chart-4'),
+        '--chart-5': tokens.color('--chart-5'),
+        '--chart-6': tokens.color('--chart-6'),
+        '--radius': tokens.length('--radius-lg'),
+        '--font-sans': tokens.value('--font-sans'),
+        '--font-mono': tokens.value('--font-mono')
+    };
+    return { appearance, variables: cleanVisualVariables(variables) };
+}
+const RGB = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+)(%?)\s*)?\)$/;
+function rgbaOf(color) {
+    const match = RGB.exec(color.trim());
+    if (match === null) {
+        return null;
+    }
+    const alpha = match[4] === undefined ? 1 : Number(match[4]) / (match[5] === '%' ? 100 : 1);
+    return { red: Number(match[1]), green: Number(match[2]), blue: Number(match[3]), alpha };
+}
+function isTransparent(color) {
+    return color === 'transparent' || rgbaOf(color)?.alpha === 0;
+}
+/*
+ * What lies behind an element, from the computed backgrounds of it and its ancestors, nearest first:
+ * the first one that covers what is under it, with every translucent one in front of it laid over it.
+ * Null when none of them paints.
+ */
+export function backgroundBehind(layers) {
+    const translucent = [];
+    for (const layer of layers) {
+        if (layer === '' || isTransparent(layer)) {
+            continue;
+        }
+        const color = rgbaOf(layer);
+        if (color !== null && color.alpha < 1) {
+            translucent.push(color);
+            continue;
+        }
+        if (color === null || translucent.length === 0) {
+            // A color in a space other than sRGB stays as the engine wrote it, since there is no laying another over it here.
+            return color === null ? layer : `rgb(${color.red}, ${color.green}, ${color.blue})`;
+        }
+        let { red, green, blue } = color;
+        for (const over of translucent.reverse()) {
+            red = over.red * over.alpha + red * (1 - over.alpha);
+            green = over.green * over.alpha + green * (1 - over.alpha);
+            blue = over.blue * over.alpha + blue * (1 - over.alpha);
+        }
+        return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
+    }
+    return null;
+}
+function sameTheme(left, right) {
+    return left.appearance === right.appearance && JSON.stringify(left.variables) === JSON.stringify(right.variables);
+}
+/*
+ * The theme where `element` stands. Colors and lengths are read off a probe in that very place, so a
+ * nested theme answers for itself and every value comes out the way the engine computes it.
+ */
+function readTheme(element, mode) {
+    const view = element.ownerDocument.defaultView ?? window;
+    const style = view.getComputedStyle(element);
+    const probe = element.ownerDocument.createElement('span');
+    probe.style.position = 'absolute';
+    probe.style.visibility = 'hidden';
+    element.append(probe);
+    try {
+        const probed = view.getComputedStyle(probe);
+        const declared = (token) => style.getPropertyValue(token).trim();
+        const computed = (property, token) => {
+            if (declared(token) === '') {
+                return '';
+            }
+            probe.style[property] = `var(${token})`;
+            return probed[property];
+        };
+        const tokens = {
+            color: (token) => computed('color', token),
+            length: (token) => computed('borderTopLeftRadius', token),
+            value: declared
+        };
+        const layers = [];
+        for (let node = element; node !== null; node = node.parentElement) {
+            layers.push(view.getComputedStyle(node).backgroundColor);
+        }
+        const scheme = style.colorScheme.trim();
+        const appearance = scheme === 'light' || scheme === 'dark' ? scheme : mode;
+        return visualThemeOf(tokens, appearance, backgroundBehind(layers) ?? tokens.color('--surface'));
+    }
+    finally {
+        probe.remove();
+    }
+}
+/* The attributes an app switches its theme or its accent with. */
+const THEME_ATTRIBUTES = ['class', 'style', 'data-theme'];
+/*
+ * The app's theme for a visual drawn in `ref`, null until the element is there. It is read again when
+ * the app turns light or dark, and when the root of the document changes a theme attribute, so an
+ * accent or a font a person picks reaches every frame as well.
+ */
+export function useVisualTheme(ref) {
+    const mode = chatHost().code.useMode();
+    const [theme, setTheme] = useState(null);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (element === null) {
+            return;
+        }
+        const read = () => {
+            const next = readTheme(element, mode);
+            setTheme((current) => (current !== null && sameTheme(current, next) ? current : next));
+        };
+        read();
+        const owner = element.ownerDocument;
+        const observer = new MutationObserver(read);
+        for (const root of [owner.documentElement, owner.body]) {
+            if (root !== null) {
+                observer.observe(root, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
+            }
+        }
+        const scheme = owner.defaultView?.matchMedia?.('(prefers-color-scheme: dark)') ?? null;
+        scheme?.addEventListener('change', read);
+        return () => {
+            observer.disconnect();
+            scheme?.removeEventListener('change', read);
+        };
+    }, [ref, mode]);
+    return theme;
+}

package/dist/chat/visual-bridge.d.ts

@@ -0,0 +1,37 @@
+import { type ChatVisual, type VisualAppearance, type VisualTheme } from '@adecore/agent-contracts/visual';
+export interface VisualFrameWindow {
+    postMessage(message: unknown, targetOrigin: string): void;
+}
+export interface VisualBridgeOptions {
+    frame(): VisualFrameWindow | null;
+    visual: Pick<ChatVisual, 'maxHeight'>;
+    page: Promise<string>;
+    theme: VisualTheme;
+    mayOpenLink(): boolean;
+    openLink(url: string): void;
+    onHeight(height: number): void;
+    onAppearance(appearance: VisualAppearance): void;
+    onFailure(): void;
+    after?(ms: number, run: () => void): () => void;
+}
+export declare class VisualBridge {
+    private readonly options;
+    private theme;
+    private html;
+    private heard;
+    private waiting;
+    private sent;
+    private live;
+    private disposed;
+    private cancelSilence;
+    constructor(options: VisualBridgeOptions);
+    receive(event: {
+        source: unknown;
+        data: unknown;
+    }): void;
+    setTheme(theme: VisualTheme): void;
+    loaded(): void;
+    dispose(): void;
+    private sendPage;
+    private postTheme;
+}

package/dist/chat/visual-bridge.js

@@ -0,0 +1,129 @@
+import { VISUAL_BRIDGE_METHODS, parseVisualMessage, visualHostContextMessage, visualOpenLinkResult, visualResourceReadyMessage } from '@adecore/agent-contracts/visual';
+import { clampVisualHeight } from './logic/visual-height.js';
+/*
+ * How long a frame that finished loading may stay silent before it counts as failed. The sandbox host
+ * page speaks while it loads, so silence means the address served something else; the margin is for
+ * its message and the load event, which cross between processes and may arrive in either order.
+ */
+const SILENCE_MS = 3000;
+function timeout(ms, run) {
+    const timer = setTimeout(run, ms);
+    return () => clearTimeout(timer);
+}
+/*
+ * Talks to the frame of one visual. It hands the sandbox host page the visual's page when it says it
+ * listens, keeps the page in the app's theme, follows the size the page reports and opens the links a
+ * person follows in it. A message counts only when it comes from the frame's own window, and the
+ * messages that come from the page count only once the page was sent.
+ */
+export class VisualBridge {
+    options;
+    theme;
+    html = null;
+    /* Whether the sandbox host page ever said it listens, which is what tells it from an error page. */
+    heard = false;
+    /* The sandbox host page listens and has not been sent the page yet. */
+    waiting = false;
+    /* The theme the page was last sent, from the moment it was sent; null before that. */
+    sent = null;
+    /* Whether the page reported a size since it was sent, which says it runs and is drawn. */
+    live = false;
+    disposed = false;
+    cancelSilence = () => undefined;
+    constructor(options) {
+        this.options = options;
+        this.theme = options.theme;
+        options.page.then((html) => {
+            this.html = html;
+            this.sendPage();
+        }, () => {
+            if (!this.disposed) {
+                options.onFailure();
+            }
+        });
+    }
+    /* A `message` event of the window the frame is in. */
+    receive(event) {
+        const frame = this.options.frame();
+        if (this.disposed || frame === null || event.source !== frame) {
+            return;
+        }
+        const message = parseVisualMessage(event.data);
+        switch (message?.method) {
+            case VISUAL_BRIDGE_METHODS.sandboxProxyReady:
+                // A frame that loads again starts over from the sandbox host page.
+                this.heard = true;
+                this.waiting = true;
+                this.sent = null;
+                this.live = false;
+                this.cancelSilence();
+                this.sendPage();
+                return;
+            case VISUAL_BRIDGE_METHODS.sizeChanged:
+                if (this.sent === null) {
+                    return;
+                }
+                if (!this.live) {
+                    this.live = true;
+                    this.options.onAppearance(this.sent.appearance);
+                }
+                this.options.onHeight(clampVisualHeight(this.options.visual, message.height));
+                return;
+            case VISUAL_BRIDGE_METHODS.openLink:
+                if (this.sent === null) {
+                    return;
+                }
+                if (this.options.mayOpenLink()) {
+                    this.options.openLink(message.url);
+                }
+                frame.postMessage(visualOpenLinkResult(message.id), '*');
+                return;
+            default:
+                return;
+        }
+    }
+    /* The app's theme changed; a page that was sent follows it at once, without loading again. */
+    setTheme(theme) {
+        this.theme = theme;
+        const frame = this.options.frame();
+        if (this.disposed || this.sent === null || frame === null) {
+            return;
+        }
+        this.postTheme(frame);
+        if (this.live) {
+            this.options.onAppearance(theme.appearance);
+        }
+    }
+    /* The frame fired `load`. */
+    loaded() {
+        if (this.heard || this.disposed) {
+            return;
+        }
+        this.cancelSilence();
+        this.cancelSilence = (this.options.after ?? timeout)(SILENCE_MS, () => {
+            if (!this.heard && !this.disposed) {
+                this.options.onFailure();
+            }
+        });
+    }
+    dispose() {
+        this.disposed = true;
+        this.cancelSilence();
+    }
+    sendPage() {
+        const frame = this.options.frame();
+        if (this.disposed || !this.waiting || this.html === null || frame === null) {
+            return;
+        }
+        this.waiting = false;
+        // Any origin, since the frame's own is opaque; `receive` checks every answer's source instead.
+        frame.postMessage(visualResourceReadyMessage(this.html), '*');
+        // The page writes itself as that message arrives and listens before the next one, so a theme
+        // that changed since the frame's address was set follows right after it.
+        this.postTheme(frame);
+    }
+    postTheme(frame) {
+        this.sent = this.theme;
+        frame.postMessage(visualHostContextMessage(this.theme), '*');
+    }
+}

package/dist/chat/visuals.d.ts

@@ -0,0 +1,9 @@
+interface VisualDialog {
+    chatKey: string | null;
+    visualId: string | null;
+    kind: 'expand' | 'remove' | null;
+    open(chatKey: string, visualId: string, kind: 'expand' | 'remove'): void;
+    close(): void;
+}
+export declare const useVisualDialog: import("zustand").UseBoundStore<import("zustand").StoreApi<VisualDialog>>;
+export {};

package/dist/chat/visuals.js

@@ -0,0 +1,8 @@
+import { create } from 'zustand';
+export const useVisualDialog = create((set) => ({
+    chatKey: null,
+    visualId: null,
+    kind: null,
+    open: (chatKey, visualId, kind) => set({ chatKey, visualId, kind }),
+    close: () => set({ chatKey: null, visualId: null, kind: null })
+}));

package/dist/host.d.ts

@@ -106,6 +106,10 @@ export interface ThreadCard {
     at: number;
     render(): ReactNode;
 }
+export interface VisualHost {
+    frameUrl: string;
+    openLink(url: string): void;
+}
 export interface ReplyAuthor {
     name: string;
     mark?: ReactNode;
@@ -190,6 +194,7 @@ export interface ChatHost {
     SubagentSlot: ComponentType<SubagentSlotProps> | null;
     useThreadCards(scopeId: string, chatId: string): readonly ThreadCard[];
     useReplyAuthor(scopeId: string, chatId: string): ReplyAuthor | null;
+    visuals: VisualHost | null;
 }
 export declare function setChatHost(patch: Partial<ChatHost>): void;
 export declare function chatHost(): ChatHost;

package/dist/host.js

@@ -41,7 +41,8 @@ const DEFAULT_HOST = {
     ComposerSlot: null,
     SubagentSlot: null,
     useThreadCards: () => NO_CARDS,
-    useReplyAuthor: () => null
+    useReplyAuthor: () => null,
+    visuals: null
 };
 let host = DEFAULT_HOST;
 export function setChatHost(patch) {

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

@@ -416,6 +416,18 @@
     "renameFailed": "The bookmark could not be renamed",
     "removeFailed": "The bookmark could not be removed"
   },
+  "visuals": {
+    "actions": "Actions for {{title}}",
+    "expand": "Open large",
+    "more": "More actions",
+    "remove": "Remove visual",
+    "removeTitle": "Remove this visual?",
+    "removeDescription": "{{title}} is deleted from the chat. This cannot be undone.",
+    "removeFailed": "The visual could not be removed",
+    "loading": "Loading {{title}}",
+    "failed": "Could not load {{title}}",
+    "renderFailed": "This visual failed to render"
+  },
   "image": {
     "zoomIn": "Zoom in",
     "zoomOut": "Zoom out",

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

@@ -416,6 +416,18 @@
     "renameFailed": "De bladwijzer kon niet worden hernoemd",
     "removeFailed": "De bladwijzer kon niet worden verwijderd"
   },
+  "visuals": {
+    "actions": "Acties voor {{title}}",
+    "expand": "Groot openen",
+    "more": "Meer acties",
+    "remove": "Visualisatie verwijderen",
+    "removeTitle": "Deze visualisatie verwijderen?",
+    "removeDescription": "{{title}} wordt uit de chat verwijderd. Dit kan niet ongedaan worden gemaakt.",
+    "removeFailed": "De visualisatie kon niet worden verwijderd",
+    "loading": "{{title}} wordt geladen",
+    "failed": "{{title}} kon niet worden geladen",
+    "renderFailed": "Deze visualisatie kon niet worden getekend"
+  },
   "image": {
     "zoomIn": "Inzoomen",
     "zoomOut": "Uitzoomen",

package/dist/state/chats.d.ts

@@ -1,4 +1,4 @@
-import type { ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem } from '@adecore/agent-contracts';
+import type { ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem, ChatVisual } from '@adecore/agent-contracts';
 export interface ChatState {
     info: ChatInfo;
     items: Record<string, ChatItem>;
@@ -7,6 +7,7 @@ export interface ChatState {
     history?: ChatHistoryPage;
     waitingBefore?: string[];
     bookmarks?: ChatBookmark[];
+    visuals?: ChatVisual[];
 }
 export type ChatHistoryPage = ChatHistoryResult['history'];
 export interface ChatPage {
@@ -21,6 +22,7 @@ export interface ChatSink {
     apply(chatId: string, event: ChatEvent): void;
     status(chatId: string, info: ChatInfo): void;
     bookmarks(chatId: string, bookmarks: ChatBookmark[]): void;
+    visuals(chatId: string, visuals: ChatVisual[]): void;
     forget(chatId: string): void;
 }
 interface ChatsStore {
@@ -31,6 +33,7 @@ interface ChatsStore {
     apply(key: string, event: ChatEvent): void;
     status(key: string, info: ChatInfo): void;
     bookmarks(key: string, bookmarks: ChatBookmark[]): void;
+    visuals(key: string, visuals: ChatVisual[]): void;
     forget(key: string): void;
     forgetWhere(matches: (key: string) => boolean): void;
 }

package/dist/state/chats.js

@@ -105,11 +105,11 @@ export const useChats = create((set) => ({
     statusByKey: {},
     reset(key, info, items, page) {
         set((s) => {
-            // The bookmarks are not part of the thread; they come in on their own and outlive a reset of it.
-            const bookmarks = s.byKey[key]?.bookmarks;
-            const next = stateOf(info, items, page);
+            // The bookmarks and the visuals are not part of the thread; they come in on their own and outlive a reset of it.
+            const { bookmarks, visuals } = s.byKey[key] ?? {};
+            const next = { ...stateOf(info, items, page), ...(bookmarks === undefined ? {} : { bookmarks }), ...(visuals === undefined ? {} : { visuals }) };
             return {
-                byKey: { ...s.byKey, [key]: bookmarks === undefined ? next : { ...next, bookmarks } },
+                byKey: { ...s.byKey, [key]: next },
                 statusByKey: withStatus(s.statusByKey, key, info)
             };
         });
@@ -161,6 +161,15 @@ export const useChats = create((set) => ({
             return { byKey: { ...s.byKey, [key]: { ...current, bookmarks } } };
         });
     },
+    visuals(key, visuals) {
+        set((s) => {
+            const current = s.byKey[key];
+            if (!current) {
+                return {};
+            }
+            return { byKey: { ...s.byKey, [key]: { ...current, visuals } } };
+        });
+    },
     forget(key) {
         set((s) => {
             const next = { ...s.byKey };
@@ -182,6 +191,7 @@ export function chatSink(keyOf) {
         apply: (chatId, event) => useChats.getState().apply(keyOf(chatId), event),
         status: (chatId, info) => useChats.getState().status(keyOf(chatId), info),
         bookmarks: (chatId, bookmarks) => useChats.getState().bookmarks(keyOf(chatId), bookmarks),
+        visuals: (chatId, visuals) => useChats.getState().visuals(keyOf(chatId), visuals),
         forget: (chatId) => useChats.getState().forget(keyOf(chatId))
     };
 }

package/dist/theme.css

@@ -18,6 +18,15 @@
     --chart-context-files: #9a63e0;
     --chart-context-conversation: #2f9e5a;
     --chart-context-system: var(--text-faint);
+    /* The current hit of a find, which has to stand out from the accent of a bookmark next to it. */
+    --chat-find: #facc15;
+    /* The series of a chart in a visual after the first, which is the accent. A categorical order checked
+       for color vision deficiency on both grounds: orange, aqua, yellow, magenta, green. */
+    --chart-2: #eb6834;
+    --chart-3: #1baf7a;
+    --chart-4: #eda100;
+    --chart-5: #e87ba4;
+    --chart-6: #008300;
 }
 
 [data-theme="dark"] {
@@ -31,6 +40,22 @@
     --chart-context-files: #b98af3;
     --chart-context-conversation: #6dd08b;
     --chart-context-system: var(--text-faint);
+    --chat-find: #f5c542;
+    --chart-2: #d95926;
+    --chart-3: #199e70;
+    --chart-4: #c98500;
+    --chart-5: #d55181;
+    --chart-6: #008300;
+}
+
+/* Output and diffs take the terminal's colors when the app loads `@adecore/terminal/terminal.css`,
+   and the base theme's otherwise. Declared on every themed element, so a nested theme resolves its own. */
+:root, [data-theme] {
+    --chat-code-bg: var(--term-bg, var(--surface-sunken));
+    --chat-output: var(--term-fg, var(--text));
+    --chat-added: var(--term-ansi-green, var(--positive));
+    --chat-removed: var(--term-ansi-red, var(--status-error));
+    --chart-1: var(--accent);
 }
 
 @theme inline {
@@ -44,6 +69,10 @@
     --color-chart-context-files: var(--chart-context-files);
     --color-chart-context-conversation: var(--chart-context-conversation);
     --color-chart-context-system: var(--chart-context-system);
+    --color-chat-find: var(--chat-find);
+    --color-chat-output: var(--chat-output);
+    --color-chat-added: var(--chat-added);
+    --color-chat-removed: var(--chat-removed);
 }
 
 @layer components {
@@ -98,6 +127,8 @@
         @starting-style { opacity: 0; }
     }
     @keyframes chat-fade { from { opacity: 0; } to { opacity: 1; } }
+    /* A visual still on its way says so only once it takes long enough to be noticed. */
+    .chat-visual-wait { animation: chat-fade 200ms ease-out 600ms both; }
 
     /* The row a jump from outside the chat (the card of a change in a file) landed on. */
     .chat-flash { animation: chat-flash 1600ms ease-out both; }
@@ -160,7 +191,7 @@
 .chat-markdown :is(th, td) { border: 1px solid var(--tw-prose-td-borders); padding: 4px 8px; text-align: left; }
 
 /* A code block is shiki's own `<pre>`, which brings a background of its own to override. */
-.chat-code { border-radius: 8px; border: 1px solid var(--border); background: var(--term-bg); overflow: auto; }
+.chat-code { border-radius: 8px; border: 1px solid var(--border); background: var(--chat-code-bg); overflow: auto; }
 .chat-code pre { margin: 0; padding: round(0.625rem, 1px) round(0.75rem, 1px); background: transparent !important; font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
 .chat-code code { font-family: inherit; }