@artooi/ag-ui-web-component 0.26.0 → 0.26.1

package/dist/tools/client_tool_registry.d.ts

@@ -6,6 +6,15 @@ import type { Tool } from "@ag-ui/core";
  * `handler` receives the parsed arguments and returns a result that is
  * JSON-serialised into the AG-UI tool-result message sent back to the agent.
  */
+/**
+ * Draws one call from its arguments alone.
+ *
+ * Named separately so the replay path can take *this* and never the tool that
+ * owns it: a function of this type cannot reach a `handler`, which is what
+ * makes "a reload never re-runs a tool's effect" a property of the code rather
+ * than a note asking maintainers to be careful.
+ */
+export type ChartRenderer = (args: Record<string, unknown>) => Node | null;
 export interface ClientTool {
     name: string;
     description: string;
@@ -33,7 +42,7 @@ export interface ClientTool {
      *
      * Return `null` for arguments that say nothing worth drawing.
      */
-    render?: (args: Record<string, unknown>) => Node | null;
+    render?: ChartRenderer;
 }
 /**
  * Holds the frontend tools a host has declared on an `<ag-ui-chat>` element.

package/dist/tools/client_tool_registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client_tool_registry.d.ts","sourceRoot":"","sources":["../../src/tools/client_tool_registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC;;;;OAIG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACxF;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,IAAI,CAAC;CACzD;AAED;;;;;;GAMG;AACH,qBAAa,kBAAkB;;IAG7B;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAE/B;IAED,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEzB;IAED,yCAAyC;IACzC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CAM5B;IAED,wDAAwD;IACxD,KAAK,IAAI,IAAI,EAAE,CAMd;CACF"}
+{"version":3,"file":"client_tool_registry.d.ts","sourceRoot":"","sources":["../../src/tools/client_tool_registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;GAMG;AACH;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,IAAI,CAAC;AAE3E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC;;;;OAIG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACxF;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;;;;;GAMG;AACH,qBAAa,kBAAkB;;IAG7B;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAE/B;IAED,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEzB;IAED,yCAAyC;IACzC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CAM5B;IAED,wDAAwD;IACxD,KAAK,IAAI,IAAI,EAAE,CAMd;CACF"}

package/dist/ui/chart_block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart_block.d.ts","sourceRoot":"","sources":["../../src/ui/chart_block.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,mCAAmC;AACnC,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CACpC;AAED,2BAA2B;AAC3B,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvE,wBAAwB;AACxB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;CACzC;AAoBD,uFAAuF;AACvF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIjD;AAwOD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI,CAoDlE"}
+{"version":3,"file":"chart_block.d.ts","sourceRoot":"","sources":["../../src/ui/chart_block.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,mCAAmC;AACnC,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CACpC;AAED,2BAA2B;AAC3B,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvE,wBAAwB;AACxB,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;CACzC;AAoBD,uFAAuF;AACvF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIjD;AA6OD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI,CAoDlE"}

package/dist/ui/chart_spec_from.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart_spec_from.d.ts","sourceRoot":"","sources":["../../src/ui/chart_spec_from.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA0D7D,gFAAgF;AAChF,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,CAqC9D"}
+{"version":3,"file":"chart_spec_from.d.ts","sourceRoot":"","sources":["../../src/ui/chart_spec_from.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA6E7D,gFAAgF;AAChF,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,CAqC9D"}

package/dist/ui/chart_tool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart_tool.d.ts","sourceRoot":"","sources":["../../src/ui/chart_tool.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAInE,wDAAwD;AACxD,eAAO,MAAM,eAAe,iBAAiB,CAAC;AAU9C,+BAA+B;AAC/B,wBAAgB,eAAe,IAAI,UAAU,CAqC5C"}
+{"version":3,"file":"chart_tool.d.ts","sourceRoot":"","sources":["../../src/ui/chart_tool.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAInE,wDAAwD;AACxD,eAAO,MAAM,eAAe,iBAAiB,CAAC;AAgB9C,+BAA+B;AAC/B,wBAAgB,eAAe,IAAI,UAAU,CAuC5C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artooi/ag-ui-web-component",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "description": "Framework-free <ag-ui-chat> Web Component over the AG-UI protocol. Drop-in chat sidebar with a pluggable client-side tool registry, DOM driver primitives, animations, and destructive-action confirmation modal.",
   "type": "module",
   "main": "./dist/index.js",

package/src/core/ag_ui_chat.ts

@@ -24,6 +24,7 @@ import {
 import { fillTemplate } from "../skills/fill_template.js";
 import { parseSkills } from "../skills/parse_skills.js";
 import type { Skill } from "../skills/skill.js";
+import type { ChartRenderer } from "../tools/client_tool_registry.js";
 import { type ClientTool, ClientToolRegistry } from "../tools/client_tool_registry.js";
 import { isDestructive } from "../tools/is_destructive.js";
 import { isNavigates } from "../tools/is_navigates.js";
@@ -42,7 +43,7 @@ import { renderAttachmentChips } from "../ui/attachment_chips.js";
 import { AttachmentTray } from "../ui/attachment_tray.js";
 import { renderChart } from "../ui/chart_block.js";
 import { chartSpecFrom } from "../ui/chart_spec_from.js";
-import { createChartTool } from "../ui/chart_tool.js";
+import { CHART_TOOL_NAME, createChartTool } from "../ui/chart_tool.js";
 import { CheckpointMenu, type CheckpointVerb } from "../ui/checkpoint_menu.js";
 import { type ConfirmationRequest, requestConfirmation } from "../ui/confirmation_card.js";
 import { prettifyToolName } from "../ui/prettify_tool_name.js";
@@ -1840,9 +1841,15 @@ export class AgUiChat extends HTMLElement {
         this.#cardElements.set(restored.id, this.#cardFor(restored).element);
         // Only `render` is replayed, never `handler`. A restored transcript
         // redraws what the call drew; it must not re-run what the call *did*.
-        const tool = this.#resolveTool(restored.name);
-        if (tool !== null) {
-          this.#renderToolOutput(tool, restored);
+        // Only the renderer is handed over, never the tool. The guarantee that
+        // a reload cannot re-run a tool's *effect* is worth more than a comment
+        // saying so: this signature cannot reach `handler`, so a later
+        // maintainer adding a "no render? fall back to the handler" convenience
+        // here has to change the type first, which is exactly the moment the
+        // question should be asked.
+        const render = this.#resolveTool(restored.name)?.render;
+        if (render !== undefined) {
+          this.#renderToolOutput(render, restored);
         }
       }
       return;
@@ -2653,7 +2660,9 @@ export class AgUiChat extends HTMLElement {
       const result = await tool.handler(call.args, call.id);
       // Drawn from the arguments rather than the result, so the live path and
       // the replay path render the same thing from the same input.
-      this.#renderToolOutput(tool, call);
+      if (tool.render !== undefined) {
+        this.#renderToolOutput(tool.render, call);
+      }
       if (navigates) {
         card.settle(TOOL_CALL_STATUS.DONE, this.#strings.navigating);
         return { content: "", halt: true };
@@ -3053,12 +3062,21 @@ export class AgUiChat extends HTMLElement {
    * arrives is not something to switch on for everybody.
    */
   enableCharts(routes: readonly ("tool" | "activity")[] = ["tool", "activity"]): void {
+    const first = !this.#chartActivity && !this.#toolRegistry.has(CHART_TOOL_NAME);
     if (routes.includes("activity")) {
       this.#chartActivity = true;
     }
     if (routes.includes("tool")) {
       this.registerTool(createChartTool());
     }
+    // Called after the element is connected, the history has already replayed
+    // and every chart in it was skipped -- charts were off at the time. That is
+    // the ordinary way to call this (you have to query the element to call
+    // anything on it), so redrawing rather than documenting an ordering rule is
+    // the only answer that does not make the obvious usage wrong.
+    if (first && this.isConnected) {
+      this.reload();
+    }
   }
 
   /**
@@ -3071,13 +3089,10 @@ export class AgUiChat extends HTMLElement {
    * created inline, in the right place, so anchoring makes *when* the handler
    * runs stop mattering.
    */
-  #renderToolOutput(tool: ClientTool, call: AgUiToolCall): void {
-    if (tool.render === undefined) {
-      return;
-    }
+  #renderToolOutput(render: ChartRenderer, call: AgUiToolCall): void {
     let node: Node | null;
     try {
-      node = tool.render(call.args);
+      node = render(call.args);
     } catch (error) {
       // `render` is consumer code and this runs inside the history replay, where
       // a throw abandons the loop and takes every later turn of the transcript
@@ -3100,11 +3115,16 @@ export class AgUiChat extends HTMLElement {
   /** Draw, or redraw in place, the chart for one activity message. */
   #drawActivityChart(messageId: string, content: unknown): void {
     const spec = chartSpecFrom(content);
-    if (spec === null) {
-      return;
-    }
-    const block = renderChart(spec);
+    const block = spec === null ? null : renderChart(spec);
     if (block === null) {
+      // The server superseded this chart with something undrawable. Leaving the
+      // old one up is the worst available answer: it shows numbers that have
+      // been retracted, reading as current, and a reload then drops the chart
+      // entirely because the *stored* content is the version we could not draw.
+      // Live and reload should agree, and both should say "gone" rather than
+      // one of them lying.
+      this.#activityBlocks.get(messageId)?.remove();
+      this.#activityBlocks.delete(messageId);
       return;
     }
     const existing = this.#activityBlocks.get(messageId);

package/src/tools/client_tool_registry.ts

@@ -7,6 +7,16 @@ import type { Tool } from "@ag-ui/core";
  * `handler` receives the parsed arguments and returns a result that is
  * JSON-serialised into the AG-UI tool-result message sent back to the agent.
  */
+/**
+ * Draws one call from its arguments alone.
+ *
+ * Named separately so the replay path can take *this* and never the tool that
+ * owns it: a function of this type cannot reach a `handler`, which is what
+ * makes "a reload never re-runs a tool's effect" a property of the code rather
+ * than a note asking maintainers to be careful.
+ */
+export type ChartRenderer = (args: Record<string, unknown>) => Node | null;
+
 export interface ClientTool {
   name: string;
   description: string;
@@ -34,7 +44,7 @@ export interface ClientTool {
    *
    * Return `null` for arguments that say nothing worth drawing.
    */
-  render?: (args: Record<string, unknown>) => Node | null;
+  render?: ChartRenderer;
 }
 
 /**

package/src/ui/chart_block.ts

@@ -174,7 +174,12 @@ function drawStacked(svg: SVGSVGElement, spec: ChartSpec, min: number, max: numb
   const running = spec.labels.map(() => 0);
   spec.series.forEach((series, s) => {
     series.points.forEach((value, i) => {
-      const from = running[i] as number;
+      // `?? 0` rather than a cast: `renderChart` is exported, so a caller can
+      // hand it a series carrying more points than there are labels, which
+      // `chartSpecFrom` would have refused. The cast that used to be here
+      // claimed that could not happen and wrote `y="NaN"` into the DOM when it
+      // did.
+      const from = running[i] ?? 0;
       const to = from + value;
       running[i] = to;
       const y = scaleY(to, min, max);

package/src/ui/chart_spec_from.ts

@@ -22,6 +22,17 @@ const KINDS: readonly ChartKind[] = ["bar", "line", "pie", "scatter", "stacked"]
  */
 const MAX_POINTS = 20_000;
 
+/**
+ * Whether a spec's *labels* are cheap enough to draw.
+ *
+ * `MAX_POINTS` bounds the data; this bounds the DOM. Every label produces an
+ * axis text node whatever the series count, so a spec well inside the point
+ * budget can still emit tens of thousands of nodes and block the main thread —
+ * again on every reload, since it is in the transcript. Kept separate because
+ * the two limits answer different questions and a single number cannot.
+ */
+const MAX_LABELS = 2_000;
+
 /**
  * Largest magnitude a point may carry.
  *
@@ -59,9 +70,17 @@ function asNumbers(value: unknown): number[] | null {
 }
 
 function asStrings(value: unknown): string[] | null {
-  if (!Array.isArray(value) || value.some((item) => typeof item !== "string")) {
+  if (!Array.isArray(value)) {
     return null;
   }
+  // `every` over an index range rather than `Array.prototype.some`, which skips
+  // holes: a sparse array passed the old check and drew a chart with blank axis
+  // labels, which reads as a rendering bug rather than bad input.
+  for (let i = 0; i < value.length; i += 1) {
+    if (typeof value[i] !== "string") {
+      return null;
+    }
+  }
   return value as string[];
 }
 
@@ -94,7 +113,7 @@ export function chartSpecFrom(value: unknown): ChartSpec | null {
   if (series.length === 0) {
     return null;
   }
-  if (series.length * labels.length > MAX_POINTS) {
+  if (series.length * labels.length > MAX_POINTS || labels.length > MAX_LABELS) {
     return null;
   }
 

package/src/ui/chart_tool.ts

@@ -20,6 +20,12 @@ function draw(args: Record<string, unknown>): HTMLDivElement | null {
   return spec === null ? null : renderChart(spec);
 }
 
+/** Whether these arguments would produce a chart, without producing one. */
+function drawable(args: Record<string, unknown>): boolean {
+  const spec = chartSpecFrom(args);
+  return spec !== null && spec.labels.length > 0 && spec.series.length > 0;
+}
+
 const REJECTED =
   "chart not rendered: expected labels (strings) and series, each with one finite number per label";
 
@@ -54,11 +60,13 @@ export function createChartTool(): ClientTool {
     // Says what happened and nothing else; the drawing is `render`'s job. Told
     // plainly when the arguments are unusable, because the model can fix that
     // and retry — a silent no-op would leave it believing the chart is on screen.
-    // Answers on what was actually drawn, not on what validated. A spec can
-    // pass validation and still have nothing to show -- zero labels matches zero
-    // points -- and reporting success then would leave the model believing a
-    // chart is on screen.
-    handler: (args: Record<string, unknown>) => (draw(args) === null ? REJECTED : "chart rendered"),
+    // Answers on what will actually be drawn, not on what validated: a spec can
+    // pass validation and still have nothing to show, and reporting success
+    // then would leave the model believing a chart is on screen. Asks the
+    // question without building the chart, because `render` is about to build
+    // the same one a moment later and drawing it twice is pure waste on a spec
+    // large enough to matter.
+    handler: (args: Record<string, unknown>) => (drawable(args) ? "chart rendered" : REJECTED),
     render: draw,
   };
 }

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.26.0";
+export const VERSION: string = "0.26.1";