@adecore/agents-react 0.32.0 → 0.33.0

package/dist/locales/en/agent-chat.d.ts

@@ -177,6 +177,14 @@ declare const _default: {
             waiting: string;
             stopped: string;
             stalled: string;
+            running: string;
+            done: string;
+            failed: string;
+            agents_one: string;
+            agents_other: string;
+            working: string;
+            finished: string;
+            failedCount: string;
         };
     };
     work: {

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

@@ -176,7 +176,15 @@ export default {
       notStarted: 'not started',
       waiting: 'waiting',
       stopped: 'stopped',
-      stalled: 'No progress for five minutes. It is still running, and you can stop it.'
+      stalled: 'No progress for five minutes. It is still running, and you can stop it.',
+      running: 'Workflow running',
+      done: 'Workflow done',
+      failed: 'Workflow failed',
+      agents_one: '{{count}} agent',
+      agents_other: '{{count}} agents',
+      working: '{{count}} working',
+      finished: '{{count}} done',
+      failedCount: '{{count}} failed'
     }
   },
   work: {

package/dist/locales/nl/agent-chat.d.ts

@@ -177,6 +177,14 @@ declare const _default: {
             waiting: string;
             stopped: string;
             stalled: string;
+            running: string;
+            done: string;
+            failed: string;
+            agents_one: string;
+            agents_other: string;
+            working: string;
+            finished: string;
+            failedCount: string;
         };
     };
     work: {

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

@@ -176,7 +176,15 @@ export default {
       notStarted: 'nog niet begonnen',
       waiting: 'wacht',
       stopped: 'gestopt',
-      stalled: 'Vijf minuten geen voortgang. Hij loopt nog, en je kunt hem stoppen.'
+      stalled: 'Vijf minuten geen voortgang. Hij loopt nog, en je kunt hem stoppen.',
+      running: 'Workflow loopt',
+      done: 'Workflow klaar',
+      failed: 'Workflow mislukt',
+      agents_one: '{{count}} agent',
+      agents_other: '{{count}} agents',
+      working: '{{count}} bezig',
+      finished: '{{count}} klaar',
+      failedCount: '{{count}} mislukt'
     }
   },
   work: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.32.0",
-    "@adecore/editor": "0.32.0",
-    "@adecore/editor-react": "0.32.0",
-    "@adecore/intelligent-ui": "0.32.0",
-    "@adecore/merge": "0.32.0",
+    "@adecore/agent-contracts": "0.33.0",
+    "@adecore/editor": "0.33.0",
+    "@adecore/editor-react": "0.33.0",
+    "@adecore/intelligent-ui": "0.33.0",
+    "@adecore/merge": "0.33.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -84,7 +84,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.47.0",
     "maplibre-gl": "^6.14.0",
-    "mermaid": "^12.2.0",
+    "pele": "1.8.0",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.32.0",
+    "@adecore/ui": "^0.33.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.32.0",
+    "@adecore/ui": "0.33.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/logic/workflow.ts

@@ -49,7 +49,6 @@ export function workflowPhases(workflow: ChatWorkflow, workflowRunning: boolean)
 
 /* What the line of an agent that is not at work says about its time; one at work counts on by itself. */
 export function workflowAgentTime(view: WorkflowAgentView): string | null {
-    const duration = view.agent.durationMs === null ? null : formatElapsedShort(view.agent.durationMs);
     switch (view.state) {
         case 'running':
             return null;
@@ -59,8 +58,91 @@ export function workflowAgentTime(view: WorkflowAgentView): string | null {
             return i18next.t('agent-chat:rows.workflow.stopped');
         case 'done':
         case 'failed':
-            return duration === null
-                ? i18next.t(`agent-chat:common.status.${view.state}`)
-                : i18next.t(`agent-chat:rows.subagent.${view.state}In`, { duration });
+            return view.agent.durationMs === null ? null : formatElapsedShort(view.agent.durationMs);
     }
 }
+
+export interface WorkflowAgentPreview {
+    /* The tool an agent at work last called, drawn apart from what it was called on. */
+    tool: string | null;
+    text: string | null;
+}
+
+/* The CLI's previews start with a markdown heading as often as not, which says nothing on one line. */
+function firstLine(text: string | undefined): string | null {
+    const line = text
+        ?.split('\n')
+        .map((part) => part.replace(/^#+\s*/, '').trim())
+        .find((part) => part !== '');
+    return line === undefined ? null : line;
+}
+
+/* The second line of an agent: what it does while at work, what it answered once it stopped, what it was asked before. */
+export function workflowAgentPreview(view: WorkflowAgentView): WorkflowAgentPreview {
+    const { agent } = view;
+    switch (view.state) {
+        case 'running':
+            return agent.lastTool === null
+                ? { tool: null, text: firstLine(agent.promptPreview) }
+                : { tool: agent.lastTool, text: firstLine(agent.lastToolSummary) };
+        case 'waiting':
+            return { tool: null, text: firstLine(agent.promptPreview) };
+        case 'failed':
+            return { tool: null, text: firstLine(agent.error) ?? firstLine(agent.resultPreview) };
+        case 'done':
+        case 'stopped':
+            return { tool: null, text: firstLine(agent.resultPreview) ?? firstLine(agent.promptPreview) };
+    }
+}
+
+export type WorkflowCounts = Record<WorkflowAgentState, number> & { total: number };
+
+export function workflowCounts(phases: WorkflowPhaseView[]): WorkflowCounts {
+    const counts: WorkflowCounts = { total: 0, running: 0, waiting: 0, stopped: 0, done: 0, failed: 0 };
+    for (const view of phases.flatMap((phase) => phase.agents)) {
+        counts.total += 1;
+        counts[view.state] += 1;
+    }
+    return counts;
+}
+
+const META_START = /export\s+const\s+meta\s*=\s*\{/;
+const DESCRIPTION = /\bdescription\s*:\s*(['"`])((?:\\.|(?!\1)[^\\])*)\1/;
+
+/* The literal from its opening brace to the one that closes it, skipping braces inside strings. */
+function metaLiteral(script: string): string | null {
+    const start = META_START.exec(script);
+    if (start === null) {
+        return null;
+    }
+    const from = start.index + start[0].length - 1;
+    let depth = 0;
+    let quote: string | null = null;
+    for (let i = from; i < script.length; i++) {
+        const char = script[i]!;
+        if (quote !== null) {
+            if (char === '\\') {
+                i++;
+            } else if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === "'" || char === '"' || char === '`') {
+            quote = char;
+        } else if (char === '{') {
+            depth++;
+        } else if (char === '}' && --depth === 0) {
+            return script.slice(from, i + 1);
+        }
+    }
+    return null;
+}
+
+/* The script's `meta` is a pure literal by the CLI's own rule, so its description reads without running anything. A saved workflow called by name has no script here. */
+export function workflowDescription(input: unknown): string | null {
+    const script = typeof input === 'object' && input !== null && 'script' in input ? input.script : undefined;
+    const meta = typeof script === 'string' ? metaLiteral(script) : null;
+    const found = meta === null ? undefined : DESCRIPTION.exec(meta)?.[2]?.replace(/\\(.)/g, '$1').trim();
+    return found ? found : null;
+}

package/src/chat/ui/MermaidBlock.tsx

@@ -4,18 +4,21 @@ import { Code, Workflow } from 'lucide-react';
 import { IconButton } from '@adecore/ui';
 import { CodeBlock } from './CodeBlock';
 import { CodeStreamingContext } from './code-streaming';
-import { MERMAID_TOKENS, mermaidConfig, sizedSvg, svgDataUrl, type MermaidColors, type SizedSvg } from './mermaid';
+import { DIAGRAM_TOKENS, GROUND_TOKEN, renderOptions, svgDataUrl, themedSvg, type DiagramFont } from './mermaid';
 import { watchTheme } from './theme-watch';
 import { useHostCodeMode } from '../../host-hooks';
 
-type Drawing = { state: 'drawing' } | { state: 'drawn'; image: SizedSvg } | { state: 'failed' };
+interface LaidOut {
+    svg: string;
+    width: number;
+    height: number;
+}
 
-// Mermaid keeps one configuration for the page, so one diagram is drawn at a time with its own.
-let queue: Promise<unknown> = Promise.resolve();
+type Drawing = { state: 'drawing' } | { state: 'drawn'; image: LaidOut } | { state: 'failed' };
 
 let probeCanvas: HTMLCanvasElement | null = null;
 
-/* A token as an opaque `#rrggbb` over `ground`, which is what Mermaid's color math reads. */
+/* A token as an opaque `#rrggbb` over `ground`, so a border with an alpha mixes with the ground and not with what is under the image. */
 function resolveColor(element: HTMLElement, token: string, ground: string): string {
     probeCanvas ??= document.createElement('canvas');
     probeCanvas.width = 1;
@@ -33,34 +36,41 @@ function resolveColor(element: HTMLElement, token: string, ground: string): stri
     return `#${[red, green, blue].map((channel) => channel!.toString(16).padStart(2, '0')).join('')}`;
 }
 
-function themeColors(element: HTMLElement): MermaidColors {
-    const ground = resolveColor(element, MERMAID_TOKENS.ground, '#808080');
-    const entries = Object.entries(MERMAID_TOKENS).map(([name, token]) => [name, name === 'ground' ? ground : resolveColor(element, token, ground)]);
-    return Object.fromEntries(entries) as unknown as MermaidColors;
-}
-
 /* What a diagram reads of the theme where it stands. */
 interface DiagramLook {
-    colors: MermaidColors;
-    font: { family: string; size: string };
+    colors: Record<string, string>;
+    font: DiagramFont;
 }
 
 function diagramLook(element: HTMLElement): DiagramLook {
     const style = getComputedStyle(element);
-    return { colors: themeColors(element), font: { family: style.fontFamily, size: style.fontSize } };
+    const ground = resolveColor(element, GROUND_TOKEN, '#808080');
+    const colors = Object.fromEntries(
+        Object.entries(DIAGRAM_TOKENS).map(([name, token]) => [name, token === GROUND_TOKEN ? ground : resolveColor(element, token, ground)])
+    );
+    const font = {
+        family: style.fontFamily,
+        mono: style.getPropertyValue('--font-mono').trim() || 'monospace',
+        size: Number.parseFloat(style.fontSize) || 14
+    };
+    return { colors, font };
+}
+
+/* Keeps the look on screen when nothing of it changed, so a change of the root that leaves every color alone draws nothing again. */
+function keepingSame(next: DiagramLook) {
+    return (current: DiagramLook | null) => (current !== null && JSON.stringify(current) === JSON.stringify(next) ? current : next);
 }
 
-async function drawDiagram(id: string, source: string, look: DiagramLook, dark: boolean): Promise<SizedSvg | null> {
-    const { default: mermaid } = await import('mermaid');
-    mermaid.initialize(mermaidConfig(look.colors, dark, look.font));
-    const { svg } = await mermaid.render(id, source);
-    return sizedSvg(svg);
+async function layOut(id: string, source: string, font: DiagramFont): Promise<LaidOut> {
+    const { renderAsync } = await import('pele/lazy');
+    const { svg, width, height } = await renderAsync(source, renderOptions(font, id));
+    return { svg, width: Math.ceil(width), height: Math.ceil(height) };
 }
 
 /*
- * A ```mermaid fence, drawn as the diagram once the fence is closed. Mermaid is large, so it loads on
- * the first diagram of the page. While the fence grows, and when the text is no diagram Mermaid can
- * draw, it is the code block it would otherwise be.
+ * A ```mermaid fence, drawn as the diagram once the fence is closed. Pele loads on the first diagram of the
+ * page, and then only what a diagram of that kind needs. While the fence grows, and when the text is no diagram
+ * Pele can draw, it is the code block it would otherwise be.
  */
 export function MermaidBlock({ code }: { code: string }) {
     const { t } = useTranslation('agent-chat');
@@ -70,9 +80,14 @@ export function MermaidBlock({ code }: { code: string }) {
     const frame = useRef<HTMLDivElement>(null);
     const [source, setSource] = useState(false);
     const [drawing, setDrawing] = useState<Drawing>({ state: 'drawing' });
-    // The look of the diagram on screen or on its way there, null before the first.
-    const drawnLook = useRef<string | null>(null);
-    const [themeRevision, setThemeRevision] = useState(0);
+    const [look, setLook] = useState<DiagramLook | null>(null);
+
+    useEffect(() => {
+        const element = frame.current;
+        if (element !== null) {
+            setLook(keepingSame(diagramLook(element)));
+        }
+    }, [dark]);
 
     // An app may change its colors without turning light or dark, which only the root of the page tells.
     useEffect(() => {
@@ -80,34 +95,28 @@ export function MermaidBlock({ code }: { code: string }) {
         if (element === null) {
             return;
         }
-        return watchTheme(element.ownerDocument, () => {
-            if (drawnLook.current !== null && JSON.stringify(diagramLook(element)) !== drawnLook.current) {
-                setThemeRevision((revision) => revision + 1);
-            }
-        });
+        return watchTheme(element.ownerDocument, () => setLook(keepingSame(diagramLook(element))));
     }, []);
 
+    const fontFamily = look?.font.family;
+    const fontMono = look?.font.mono;
+    const fontSize = look?.font.size;
     useEffect(() => {
-        const element = frame.current;
-        if (streaming || element === null) {
+        if (streaming || fontFamily === undefined || fontMono === undefined || fontSize === undefined) {
             return;
         }
         let cancelled = false;
-        const look = diagramLook(element);
-        drawnLook.current = JSON.stringify(look);
-        // A diagram already drawn stays until the next one is there, so a change of the theme does not make it blink.
-        setDrawing((current) => (current.state === 'drawn' ? current : { state: 'drawing' }));
-        const drawn = queue.then(() => (cancelled ? null : drawDiagram(id, code, look, dark)));
-        queue = drawn.catch(() => undefined);
-        drawn.then(
-            (image) => !cancelled && setDrawing(image === null ? { state: 'failed' } : { state: 'drawn', image }),
+        // A diagram already drawn stays until the next one is there, so it does not blink.
+        layOut(id, code, { family: fontFamily, mono: fontMono, size: fontSize }).then(
+            (image) => !cancelled && setDrawing({ state: 'drawn', image }),
             () => !cancelled && setDrawing({ state: 'failed' })
         );
         return () => {
             cancelled = true;
         };
-    }, [code, dark, id, streaming, themeRevision]);
+    }, [code, fontFamily, fontMono, fontSize, id, streaming]);
 
+    const image = drawing.state === 'drawn' && look !== null ? { ...drawing.image, svg: themedSvg(drawing.image.svg, look.colors) } : null;
     const showsDiagram = !streaming && !source && drawing.state !== 'failed';
     const toggle =
         streaming || drawing.state === 'failed' ? undefined : (
@@ -127,12 +136,12 @@ export function MermaidBlock({ code }: { code: string }) {
                 actions={toggle}
                 view={
                     showsDiagram ? (
-                        <div className="overflow-x-auto p-3" aria-busy={drawing.state === 'drawing' || undefined}>
-                            {drawing.state === 'drawn' && (
+                        <div className="overflow-x-auto p-3" aria-busy={image === null || undefined}>
+                            {image !== null && (
                                 <img
-                                    src={svgDataUrl(drawing.image.svg)}
-                                    width={drawing.image.width}
-                                    height={drawing.image.height}
+                                    src={svgDataUrl(image.svg)}
+                                    width={image.width}
+                                    height={image.height}
                                     alt={t('code.mermaid.diagram')}
                                     className="m-0 max-w-none"
                                     draggable={false}

package/src/chat/ui/mermaid.ts

@@ -1,116 +1,72 @@
-import type { MermaidConfig } from 'mermaid';
+import type { RenderOptions } from 'pele';
 
-/* The colors of a diagram, each a token of the theme resolved to an opaque color over the frame it is drawn in. */
-export interface MermaidColors {
-    ground: string;
-    node: string;
-    nodeBorder: string;
-    text: string;
-    line: string;
-    cluster: string;
-    clusterBorder: string;
-    note: string;
-}
-
-/* The token each color reads. Borders carry an alpha, so they are resolved over the ground. */
-export const MERMAID_TOKENS: Readonly<Record<keyof MermaidColors, string>> = {
-    ground: '--chat-code-bg',
-    node: '--surface-raised',
-    nodeBorder: '--border-strong',
-    text: '--text',
-    line: '--text-muted',
-    cluster: '--surface',
-    clusterBorder: '--border',
-    note: '--accent-soft'
+/* The variable of Pele each token of the theme fills. Borders carry an alpha, so every color is resolved over the ground. */
+export const DIAGRAM_TOKENS: Readonly<Record<string, string>> = {
+    '--pele-bg': '--chat-code-bg',
+    '--pele-fg': '--text',
+    '--pele-muted': '--text-muted',
+    '--pele-line': '--text-muted',
+    '--pele-surface': '--surface-raised',
+    '--pele-surface-alt': '--surface',
+    '--pele-border': '--border-strong',
+    '--pele-accent': '--accent',
+    '--pele-critical': '--status-error',
+    '--pele-series-1': '--accent',
+    '--pele-series-2': '--chart-2',
+    '--pele-series-3': '--chart-3',
+    '--pele-series-4': '--chart-4',
+    '--pele-series-5': '--chart-5',
+    '--pele-series-6': '--chart-6'
 };
 
-// Mermaid's own list plus what keeps a diagram in the theme and out of HTML: a directive in the text cannot change these.
-const SECURE_KEYS = [
-    'secure',
-    'securityLevel',
-    'startOnLoad',
-    'maxTextSize',
-    'maxEdges',
-    'suppressErrorRendering',
-    'htmlLabels',
-    'theme',
-    'themeVariables',
-    'themeCSS',
-    'darkMode',
-    'fontFamily'
-];
+export const GROUND_TOKEN = DIAGRAM_TOKENS['--pele-bg']!;
+
+export interface DiagramFont {
+    family: string;
+    mono: string;
+    size: number;
+}
 
 /*
- * Strict: no HTML in labels, no click handlers, no links that run script. What comes out is drawn as an
- * image as well, which never runs script and loads nothing, whatever the text of the diagram says.
+ * At the size it was laid out at, since an image has no container to shrink to. No links and no images, and no
+ * math or icon resolver, which are the only markup Pele inserts unfiltered. What comes out is drawn as an image as
+ * well, which never runs script and loads nothing, whatever the text of the diagram says.
  */
-export function mermaidConfig(colors: MermaidColors, dark: boolean, font: { family: string; size: string }): MermaidConfig {
+export function renderOptions(font: DiagramFont, idPrefix: string): RenderOptions {
     return {
-        startOnLoad: false,
-        securityLevel: 'strict',
-        htmlLabels: false,
-        suppressErrorRendering: true,
-        secure: SECURE_KEYS,
-        theme: 'base',
-        darkMode: dark,
+        responsive: false,
+        idPrefix,
         fontFamily: font.family,
-        themeVariables: {
-            darkMode: dark,
-            fontFamily: font.family,
-            fontSize: font.size,
-            background: colors.ground,
-            primaryColor: colors.node,
-            primaryTextColor: colors.text,
-            primaryBorderColor: colors.nodeBorder,
-            secondaryColor: colors.note,
-            tertiaryColor: colors.cluster,
-            mainBkg: colors.node,
-            nodeBorder: colors.nodeBorder,
-            textColor: colors.text,
-            titleColor: colors.text,
-            lineColor: colors.line,
-            clusterBkg: colors.cluster,
-            clusterBorder: colors.clusterBorder,
-            edgeLabelBackground: colors.ground,
-            noteBkgColor: colors.note,
-            noteTextColor: colors.text,
-            noteBorderColor: colors.nodeBorder
-        }
+        fontFamilyMono: font.mono,
+        fontSize: font.size,
+        links: false,
+        images: false
     };
 }
 
-export interface SizedSvg {
-    svg: string;
-    width: number;
-    height: number;
-}
-
 const ROOT = /<svg\b[^>]*>/;
-const VIEW_BOX = /\sviewBox="([^"]*)"/;
-const SIZE_ATTRIBUTES = /\s(?:width|height|style)="[^"]*"/g;
+const STYLE = /\sstyle="/;
+
+function attributeText(value: string): string {
+    return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
 
 /*
- * The diagram at the size it was laid out at. Mermaid fits it to the width of its container instead,
- * which an image does not have, so the root takes the size its view box names. Null for anything
- * without one.
+ * The drawing with the colors set on its root. An image does not see the variables of the page, so they are
+ * written in, and a change of the theme only writes them again.
  */
-export function sizedSvg(svg: string): SizedSvg | null {
+export function themedSvg(svg: string, colors: Readonly<Record<string, string>>): string {
     const root = ROOT.exec(svg);
-    const viewBox = root === null ? null : VIEW_BOX.exec(root[0]);
-    if (root === null || viewBox === null) {
-        return null;
-    }
-    const [, , boxWidth, boxHeight] = viewBox[1]!
-        .trim()
-        .split(/[\s,]+/)
-        .map(Number);
-    if (!Number.isFinite(boxWidth) || !Number.isFinite(boxHeight) || boxWidth! <= 0 || boxHeight! <= 0) {
-        return null;
+    if (root === null) {
+        return svg;
     }
-    const width = Math.ceil(boxWidth!);
-    const height = Math.ceil(boxHeight!);
-    const tag = root[0].replace(SIZE_ATTRIBUTES, '').replace(/^<svg\b/, `<svg width="${width}" height="${height}"`);
-    return { svg: svg.slice(0, root.index) + tag + svg.slice(root.index + root[0].length), width, height };
+    const variables = attributeText(
+        Object.entries(colors)
+            .map(([name, value]) => `${name}:${value};`)
+            .join('')
+    );
+    const tag = STYLE.test(root[0]) ? root[0].replace(STYLE, (style) => style + variables) : root[0].replace(/^<svg\b/, `<svg style="${variables}"`);
+    return svg.slice(0, root.index) + tag + svg.slice(root.index + root[0].length);
 }
 
 export function svgDataUrl(svg: string): string {

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

@@ -283,7 +283,7 @@ function ToolOutput({ tool }: { tool: ChatToolItem }) {
 }
 
 /* An opened call without a card: what it was asked in the foreground, what it answered muted below. */
-function ToolBody({ tool }: { tool: ChatToolItem }) {
+export function ToolBody({ tool }: { tool: ChatToolItem }) {
     const patches = unifiedChanges(tool);
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
     if (patches.length + changes.length > 0) {