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

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.27.0",
   "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";
@@ -85,7 +86,7 @@ import { RemoteConversationStore } from "./remote_conversation_store.js";
 import { RunIndex } from "./run_index.js";
 import { type TranscribeHandler, transcribeAudio } from "./transcribe_audio.js";
 import { type UploadHandler, uploadAttachment } from "./upload_attachment.js";
-import { withCredentials } from "./utils.js";
+import { mintThread, withCredentials } from "./utils.js";
 
 /** The role a rendered chat message takes. */
 export type MessageRole = (typeof MESSAGE_ROLE)[keyof typeof MESSAGE_ROLE];
@@ -1652,16 +1653,25 @@ export class AgUiChat extends HTMLElement {
   }
 
   /**
-   * Start a fresh conversation: forget the persisted history, drop the
-   * in-memory run state, clear the transcript, and mint a new thread id.
+   * Start a fresh conversation: drop the in-memory run state, clear the
+   * transcript, and mint a new thread id.
+   *
+   * The conversation being left is kept, and stays in the history drawer to
+   * return to. Deleting one is the drawer row's own action; a button that
+   * starts something new must not be the button that destroys what was there.
    */
   newChat(): void {
     // Stop any in-flight run first — discarding the client mid-run would
     // leave the old agent streaming into a cleared transcript.
     this.#cancelRun();
-    this.conversationStore.clear(this.#threadId);
+    // A thread nothing was ever sent in has nothing to come back to, and the
+    // drawer never listed it — so reap it here rather than strand one record
+    // per press of a button whose whole use is being pressed again.
+    if (this.conversationStore.isUnsent?.(this.#threadId) === true) {
+      this.conversationStore.clear(this.#threadId);
+    }
     this.#resetState();
-    this.#threadId = this.conversationStore.threadId();
+    this.#threadId = mintThread(this.conversationStore);
     this.#setRunning(false);
     this.#setUnread(0);
   }
@@ -1840,9 +1850,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 +2669,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 +3071,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 +3098,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 +3124,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/core/agui_client.ts

@@ -408,6 +408,9 @@ export class AgUiClient {
   #buildSubscriber(pending: AgUiToolCall[], runState: RunState): AgentSubscriber {
     const h = this.#handlers;
     const closed = this.#closedMessageIds;
+    // Read at event time, not captured now: the flag flips mid-run, and the
+    // subscriber is built before the run that a later `cancel()` stops.
+    const cancelled = (): boolean => this.#cancelled;
     // Charts whose patch has been dispatched but not yet applied. Scoped to the
     // subscriber, so it cannot outlive the run that created it.
     const pendingDeltas = new Set<string>();
@@ -510,6 +513,15 @@ export class AgUiClient {
       onRunErrorEvent({ event }) {
         runState.terminal = true;
         runState.errored = true;
+        // Cancelling aborts the response mid-read, and the browser's own words
+        // for that can arrive here as a RUN_ERROR — Chrome's is
+        // "BodyStreamBuffer was aborted". The run is over either way, but a
+        // deliberate stop is not a failure, and reporting it would raise a
+        // warning bubble above the stopped note saying the same thing twice.
+        // The promise route in `#run` reports the cancellation.
+        if (cancelled()) {
+          return;
+        }
         h.onError(event.message);
       },
       onRunFinalized() {
@@ -532,7 +544,19 @@ interface RunState {
  * Whether a rejection came from aborting the run's fetch. Belt-and-suspenders
  * with the `#cancelled` flag: some `@ag-ui/client` versions re-throw the
  * `AbortError` instead of filtering it.
+ *
+ * Aborting a fetch whose body is mid-read does not always surface as an
+ * `AbortError`. Chrome raises `TypeError: BodyStreamBuffer was aborted`, which
+ * is the same event wearing a different name, so a message naming the abort is
+ * read as one too. Narrow on purpose: only a `TypeError`, and only when it says
+ * so — a genuine type error carries no such word, and misreading one as a
+ * cancellation would hide a real failure behind a stopped note.
  */
 function isAbortError(error: unknown): boolean {
-  return error instanceof Error && error.name === "AbortError";
+  if (!(error instanceof Error)) {
+    return false;
+  }
+  return (
+    error.name === "AbortError" || (error instanceof TypeError && /abort/i.test(error.message))
+  );
 }

package/src/core/conversation_store.ts

@@ -36,12 +36,24 @@ export interface ThreadMeta {
  * is a small local hint a server store can derive from history and no-op.
  *
  * Thread enumeration backs the chat-history drawer; deleting a thread reuses
- * {@link clear} and "new chat" reuses {@link threadId} after clearing the
- * active thread.
+ * {@link clear}, and "new chat" is {@link newThread} — which leaves the
+ * conversation it moves off of intact, for the drawer to offer back.
  */
 export interface ClientConversationStore {
   /** The active conversation id, generated and persisted on first read. */
   threadId(): string;
+  /**
+   * Start a fresh conversation, make it active, and return its id.
+   *
+   * Existing threads are left where they are: "new chat" adds one, and
+   * {@link clear} is the only method that takes one away.
+   *
+   * Optional, so a store written before this method existed still works. The
+   * caller then mints the id itself and hands it to {@link setActiveThread},
+   * which loses only the store's own record that the thread is new (see
+   * {@link isUnsent}).
+   */
+  newThread?(): string;
   /** Load the persisted message history, or `null` when none exists. */
   loadMessages(threadId: string): Promise<readonly Message[] | null>;
   /** Persist the message history (and refresh the thread's drawer metadata). */
@@ -123,13 +135,12 @@ export class SessionStorageStore implements ClientConversationStore {
   }
 
   threadId(): string {
-    const key = this.#key(THREAD_SUFFIX);
-    const existing = sessionStorage.getItem(key);
-    if (existing !== null) {
-      return existing;
-    }
+    return sessionStorage.getItem(this.#key(THREAD_SUFFIX)) ?? this.newThread();
+  }
+
+  newThread(): string {
     const id = randomUUID();
-    sessionStorage.setItem(key, id);
+    sessionStorage.setItem(this.#key(THREAD_SUFFIX), id);
     sessionStorage.setItem(this.#key(MINTED_SUFFIX + id), "1");
     return id;
   }

package/src/core/remote_conversation_store.ts

@@ -5,7 +5,7 @@ import {
   SessionStorageStore,
   type ThreadMeta,
 } from "./conversation_store.js";
-import { withCredentials } from "./utils.js";
+import { mintThread, withCredentials } from "./utils.js";
 
 /** One row of the server thread index (django-ag-ui's `ThreadsView` wire shape). */
 interface ServerThreadRow {
@@ -69,6 +69,15 @@ export class RemoteConversationStore implements ClientConversationStore {
     this.#local.setActiveThread(threadId);
   }
 
+  /**
+   * Delegated to the local store, which owns the active id — and deliberately
+   * silent on the wire: the server learns of a thread when its first message is
+   * persisted, so an abandoned new chat costs no round-trip and leaves no row.
+   */
+  newThread(): string {
+    return mintThread(this.#local);
+  }
+
   /** Delegated, so wrapping a store does not lose what it knows about its own ids. */
   isUnsent(threadId: string): boolean {
     return this.#local.isUnsent?.(threadId) === true;

package/src/core/utils.ts

@@ -1,4 +1,7 @@
-// Non-exported-from-index helpers shared by the core transport modules.
+// Non-exported-from-index helpers shared by the core modules.
+
+import { randomUUID } from "@ag-ui/client";
+import type { ClientConversationStore } from "./conversation_store.js";
 
 /**
  * Overlay a `credentials` mode onto a fetch `init`, or hand the `init` back
@@ -14,3 +17,24 @@ export function withCredentials(
 ): RequestInit | undefined {
   return credentials === undefined ? init : { ...init, credentials };
 }
+
+/**
+ * Start a new conversation in `store` and return its id.
+ *
+ * `newThread` is optional on the interface, so a store that predates it is
+ * driven the only other way the interface allows: mint an id here and make it
+ * active. That path loses the store's own note that the thread is new, so a
+ * remote store would go on to ask the server for a conversation that cannot
+ * exist yet — which is why every store in this package implements the method.
+ *
+ * What neither path does is clear the thread being left behind. Starting a
+ * conversation is not a reason to destroy the previous one.
+ */
+export function mintThread(store: ClientConversationStore): string {
+  if (store.newThread !== undefined) {
+    return store.newThread();
+  }
+  const id = randomUUID();
+  store.setActiveThread(id);
+  return id;
+}

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.27.0";