@adecore/agents-react 0.32.0 → 0.33.1

package/README.md

@@ -61,4 +61,4 @@ The root holds the host, the scope and the transport; `/chat`, `/chat/ui`, `/pro
 
 FSL-1.1-MIT. See [LICENSE](./LICENSE).
 
-Diagrams in a reply are drawn by [Mermaid](https://github.com/mermaid-js/mermaid), a dependency under the MIT license, loaded only when a reply holds one.
+Diagrams in a reply are drawn by [Pele](https://github.com/obsidianmd/pele), a dependency under the MIT license, loaded only when a reply holds one.

package/dist/chat/logic/workflow.d.ts

@@ -12,3 +12,13 @@ export interface WorkflowPhaseView {
 export declare function workflowAgentState(agent: ChatWorkflowAgent, workflowRunning: boolean): WorkflowAgentState;
 export declare function workflowPhases(workflow: ChatWorkflow, workflowRunning: boolean): WorkflowPhaseView[];
 export declare function workflowAgentTime(view: WorkflowAgentView): string | null;
+export interface WorkflowAgentPreview {
+    tool: string | null;
+    text: string | null;
+}
+export declare function workflowAgentPreview(view: WorkflowAgentView): WorkflowAgentPreview;
+export type WorkflowCounts = Record<WorkflowAgentState, number> & {
+    total: number;
+};
+export declare function workflowCounts(phases: WorkflowPhaseView[]): WorkflowCounts;
+export declare function workflowDescription(input: unknown): string | null;

package/dist/chat/logic/workflow.js

@@ -41,7 +41,6 @@ export function workflowPhases(workflow, workflowRunning) {
 }
 /* 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) {
-  const duration = view.agent.durationMs === null ? null : formatElapsedShort(view.agent.durationMs);
   switch (view.state) {
     case 'running':
       return null;
@@ -51,8 +50,96 @@ export function workflowAgentTime(view) {
       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);
   }
+}
+/* The CLI's previews start with a markdown heading as often as not, which says nothing on one line. */
+function firstLine(text) {
+  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) {
+  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 function workflowCounts(phases) {
+  const counts = {
+    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) {
+  const start = META_START.exec(script);
+  if (start === null) {
+    return null;
+  }
+  const from = start.index + start[0].length - 1;
+  let depth = 0;
+  let quote = 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) {
+  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/dist/chat/ui/MermaidBlock.js

@@ -5,14 +5,12 @@ import { Code, Workflow } from 'lucide-react';
 import { IconButton } from '@adecore/ui';
 import { CodeBlock } from './CodeBlock.js';
 import { CodeStreamingContext } from './code-streaming.js';
-import { MERMAID_TOKENS, mermaidConfig, sizedSvg, svgDataUrl } from './mermaid.js';
+import { DIAGRAM_TOKENS, GROUND_TOKEN, renderOptions, svgDataUrl, themedSvg } from './mermaid.js';
 import { watchTheme } from './theme-watch.js';
 import { useHostCodeMode } from '../../host-hooks.js';
-// Mermaid keeps one configuration for the page, so one diagram is drawn at a time with its own.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let queue = Promise.resolve();
 let probeCanvas = 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, token, ground) {
   probeCanvas ??= document.createElement('canvas');
   probeCanvas.width = 1;
@@ -31,38 +29,46 @@ function resolveColor(element, token, ground) {
   const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
   return `#${[red, green, blue].map(channel => channel.toString(16).padStart(2, '0')).join('')}`;
 }
-function themeColors(element) {
-  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);
-}
 function diagramLook(element) {
   const style = getComputedStyle(element);
+  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: themeColors(element),
-    font: {
-      family: style.fontFamily,
-      size: style.fontSize
-    }
+    colors,
+    font
   };
 }
-async function drawDiagram(id, source, look, dark) {
+/* 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) {
+  return current => current !== null && JSON.stringify(current) === JSON.stringify(next) ? current : next;
+}
+async function layOut(id, source, font) {
   const {
-    default: mermaid
-  } = await import('mermaid');
-  mermaid.initialize(mermaidConfig(look.colors, dark, look.font));
+    renderAsync
+  } = await import('pele/lazy');
   const {
-    svg
-  } = await mermaid.render(id, source);
-  return sizedSvg(svg);
+    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(t0) {
-  const $ = _c(37);
+  const $ = _c(48);
   const {
     code
   } = t0;
@@ -100,46 +106,62 @@ export function MermaidBlock(t0) {
     t3 = $[3];
   }
   const [drawing, setDrawing] = useState(t3);
-  const drawnLook = useRef(null);
-  const [themeRevision, setThemeRevision] = useState(0);
+  const [look, setLook] = useState(null);
   let t4;
-  let t5;
   if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
     t4 = () => {
       const element = frame.current;
-      if (element === null) {
-        return;
+      if (element !== null) {
+        setLook(keepingSame(diagramLook(element)));
       }
-      return watchTheme(element.ownerDocument, () => {
-        if (drawnLook.current !== null && JSON.stringify(diagramLook(element)) !== drawnLook.current) {
-          setThemeRevision(_temp);
-        }
-      });
     };
-    t5 = [];
     $[4] = t4;
-    $[5] = t5;
   } else {
     t4 = $[4];
-    t5 = $[5];
+  }
+  let t5;
+  if ($[5] !== dark) {
+    t5 = [dark];
+    $[5] = dark;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
   }
   useEffect(t4, t5);
   let t6;
-  if ($[6] !== code || $[7] !== dark || $[8] !== id || $[9] !== streaming) {
+  let t7;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
     t6 = () => {
       const element_0 = frame.current;
-      if (streaming || element_0 === null) {
+      if (element_0 === null) {
+        return;
+      }
+      return watchTheme(element_0.ownerDocument, () => setLook(keepingSame(diagramLook(element_0))));
+    };
+    t7 = [];
+    $[7] = t6;
+    $[8] = t7;
+  } else {
+    t6 = $[7];
+    t7 = $[8];
+  }
+  useEffect(t6, t7);
+  const fontFamily = look?.font.family;
+  const fontMono = look?.font.mono;
+  const fontSize = look?.font.size;
+  let t8;
+  let t9;
+  if ($[9] !== code || $[10] !== fontFamily || $[11] !== fontMono || $[12] !== fontSize || $[13] !== id || $[14] !== streaming) {
+    t8 = () => {
+      if (streaming || fontFamily === undefined || fontMono === undefined || fontSize === undefined) {
         return;
       }
       let cancelled = false;
-      const look = diagramLook(element_0);
-      drawnLook.current = JSON.stringify(look);
-      setDrawing(_temp2);
-      const drawn = queue.then(() => cancelled ? null : drawDiagram(id, code, look, dark));
-      queue = drawn.catch(_temp3);
-      drawn.then(image => !cancelled && setDrawing(image === null ? {
-        state: "failed"
-      } : {
+      layOut(id, code, {
+        family: fontFamily,
+        mono: fontMono,
+        size: fontSize
+      }).then(image => !cancelled && setDrawing({
         state: "drawn",
         image
       }), () => !cancelled && setDrawing({
@@ -149,117 +171,131 @@ export function MermaidBlock(t0) {
         cancelled = true;
       };
     };
-    $[6] = code;
-    $[7] = dark;
-    $[8] = id;
-    $[9] = streaming;
-    $[10] = t6;
-  } else {
-    t6 = $[10];
-  }
-  let t7;
-  if ($[11] !== code || $[12] !== dark || $[13] !== id || $[14] !== streaming || $[15] !== themeRevision) {
-    t7 = [code, dark, id, streaming, themeRevision];
-    $[11] = code;
-    $[12] = dark;
+    t9 = [code, fontFamily, fontMono, fontSize, id, streaming];
+    $[9] = code;
+    $[10] = fontFamily;
+    $[11] = fontMono;
+    $[12] = fontSize;
     $[13] = id;
     $[14] = streaming;
-    $[15] = themeRevision;
-    $[16] = t7;
+    $[15] = t8;
+    $[16] = t9;
   } else {
-    t7 = $[16];
+    t8 = $[15];
+    t9 = $[16];
   }
-  useEffect(t6, t7);
-  const showsDiagram = !streaming && !source && drawing.state !== "failed";
-  let t8;
-  if ($[17] !== drawing.state || $[18] !== source || $[19] !== streaming || $[20] !== t) {
-    t8 = streaming || drawing.state === "failed" ? undefined : /*#__PURE__*/_jsx(IconButton, {
-      icon: source ? Workflow : Code,
-      size: "sm",
-      label: source ? t("code.mermaid.showDiagram") : t("code.mermaid.showSource"),
-      onClick: () => setSource(_temp4)
-    });
-    $[17] = drawing.state;
-    $[18] = source;
-    $[19] = streaming;
-    $[20] = t;
-    $[21] = t8;
-  } else {
-    t8 = $[21];
-  }
-  const toggle = t8;
-  let t9;
-  if ($[22] !== drawing.image || $[23] !== drawing.state || $[24] !== showsDiagram || $[25] !== t) {
-    t9 = showsDiagram ? /*#__PURE__*/_jsx("div", {
+  useEffect(t8, t9);
+  let T0;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t14;
+  if ($[17] !== code || $[18] !== drawing.image || $[19] !== drawing.state || $[20] !== look || $[21] !== source || $[22] !== streaming || $[23] !== t) {
+    const image_0 = drawing.state === "drawn" && look !== null ? {
+      ...drawing.image,
+      svg: themedSvg(drawing.image.svg, look.colors)
+    } : null;
+    const showsDiagram = !streaming && !source && drawing.state !== "failed";
+    let t15;
+    if ($[30] !== drawing.state || $[31] !== source || $[32] !== streaming || $[33] !== t) {
+      t15 = streaming || drawing.state === "failed" ? undefined : /*#__PURE__*/_jsx(IconButton, {
+        icon: source ? Workflow : Code,
+        size: "sm",
+        label: source ? t("code.mermaid.showDiagram") : t("code.mermaid.showSource"),
+        onClick: () => setSource(_temp)
+      });
+      $[30] = drawing.state;
+      $[31] = source;
+      $[32] = streaming;
+      $[33] = t;
+      $[34] = t15;
+    } else {
+      t15 = $[34];
+    }
+    const toggle = t15;
+    t14 = frame;
+    T0 = CodeBlock;
+    t10 = code;
+    t11 = "mermaid";
+    t12 = toggle;
+    t13 = showsDiagram ? /*#__PURE__*/_jsx("div", {
       className: "overflow-x-auto p-3",
-      "aria-busy": drawing.state === "drawing" || undefined,
-      children: drawing.state === "drawn" && /*#__PURE__*/_jsx("img", {
-        src: svgDataUrl(drawing.image.svg),
-        width: drawing.image.width,
-        height: drawing.image.height,
+      "aria-busy": image_0 === null || undefined,
+      children: image_0 !== null && /*#__PURE__*/_jsx("img", {
+        src: svgDataUrl(image_0.svg),
+        width: image_0.width,
+        height: image_0.height,
         alt: t("code.mermaid.diagram"),
         className: "m-0 max-w-none",
         draggable: false
       })
     }) : undefined;
-    $[22] = drawing.image;
-    $[23] = drawing.state;
-    $[24] = showsDiagram;
-    $[25] = t;
-    $[26] = t9;
+    $[17] = code;
+    $[18] = drawing.image;
+    $[19] = drawing.state;
+    $[20] = look;
+    $[21] = source;
+    $[22] = streaming;
+    $[23] = t;
+    $[24] = T0;
+    $[25] = t10;
+    $[26] = t11;
+    $[27] = t12;
+    $[28] = t13;
+    $[29] = t14;
   } else {
-    t9 = $[26];
+    T0 = $[24];
+    t10 = $[25];
+    t11 = $[26];
+    t12 = $[27];
+    t13 = $[28];
+    t14 = $[29];
   }
-  let t10;
-  if ($[27] !== code || $[28] !== t9 || $[29] !== toggle) {
-    t10 = /*#__PURE__*/_jsx(CodeBlock, {
-      code: code,
-      lang: "mermaid",
-      actions: toggle,
-      view: t9
+  let t15;
+  if ($[35] !== T0 || $[36] !== t10 || $[37] !== t11 || $[38] !== t12 || $[39] !== t13) {
+    t15 = /*#__PURE__*/_jsx(T0, {
+      code: t10,
+      lang: t11,
+      actions: t12,
+      view: t13
     });
-    $[27] = code;
-    $[28] = t9;
-    $[29] = toggle;
-    $[30] = t10;
+    $[35] = T0;
+    $[36] = t10;
+    $[37] = t11;
+    $[38] = t12;
+    $[39] = t13;
+    $[40] = t15;
   } else {
-    t10 = $[30];
+    t15 = $[40];
   }
-  let t11;
-  if ($[31] !== drawing.state || $[32] !== t) {
-    t11 = drawing.state === "failed" && /*#__PURE__*/_jsx("p", {
+  let t16;
+  if ($[41] !== drawing.state || $[42] !== t) {
+    t16 = drawing.state === "failed" && /*#__PURE__*/_jsx("p", {
       className: "m-0 mt-1 text-xs text-text-faint",
       children: t("code.mermaid.failed")
     });
-    $[31] = drawing.state;
-    $[32] = t;
-    $[33] = t11;
+    $[41] = drawing.state;
+    $[42] = t;
+    $[43] = t16;
   } else {
-    t11 = $[33];
+    t16 = $[43];
   }
-  let t12;
-  if ($[34] !== t10 || $[35] !== t11) {
-    t12 = /*#__PURE__*/_jsxs("div", {
-      ref: frame,
-      children: [t10, t11]
+  let t17;
+  if ($[44] !== t14 || $[45] !== t15 || $[46] !== t16) {
+    t17 = /*#__PURE__*/_jsxs("div", {
+      ref: t14,
+      children: [t15, t16]
     });
-    $[34] = t10;
-    $[35] = t11;
-    $[36] = t12;
+    $[44] = t14;
+    $[45] = t15;
+    $[46] = t16;
+    $[47] = t17;
   } else {
-    t12 = $[36];
+    t17 = $[47];
   }
-  return t12;
+  return t17;
 }
-function _temp4(shown) {
+function _temp(shown) {
   return !shown;
-}
-function _temp3() {}
-function _temp2(current) {
-  return current.state === "drawn" ? current : {
-    state: "drawing"
-  };
-}
-function _temp(revision) {
-  return revision + 1;
 }

package/dist/chat/ui/mermaid.d.ts

@@ -1,23 +1,11 @@
-import type { MermaidConfig } from 'mermaid';
-export interface MermaidColors {
-    ground: string;
-    node: string;
-    nodeBorder: string;
-    text: string;
-    line: string;
-    cluster: string;
-    clusterBorder: string;
-    note: string;
-}
-export declare const MERMAID_TOKENS: Readonly<Record<keyof MermaidColors, string>>;
-export declare function mermaidConfig(colors: MermaidColors, dark: boolean, font: {
+import type { RenderOptions } from 'pele';
+export declare const DIAGRAM_TOKENS: Readonly<Record<string, string>>;
+export declare const GROUND_TOKEN: string;
+export interface DiagramFont {
     family: string;
-    size: string;
-}): MermaidConfig;
-export interface SizedSvg {
-    svg: string;
-    width: number;
-    height: number;
+    mono: string;
+    size: number;
 }
-export declare function sizedSvg(svg: string): SizedSvg | null;
+export declare function renderOptions(font: DiagramFont, idPrefix: string): RenderOptions;
+export declare function themedSvg(svg: string, colors: Readonly<Record<string, string>>): string;
 export declare function svgDataUrl(svg: string): string;