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

package/dist/index.js

@@ -46,12 +46,13 @@ var ICON_FILE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path
 var ICON_FILE_IMAGE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.5"/><path d="M4.5 17.5 9 13.5l3.5 3 3-2.5 4.5 4"/></svg>`;
 var ICON_FILE_PDF = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><rect class="glyph--solid" x="7.5" y="13.5" width="9" height="4.5" rx="1"/></svg>`;
 var ICON_FILE_TEXT = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M8.5 13.5h7M8.5 17h4.5"/></svg>`;
+var CHART_ACTIVITY_TYPE = "chart";
 
 // src/skills/fill_template.ts
 var PLACEHOLDER_RE = /\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g;
 function fillTemplate(template, values) {
   const missing = [];
-  const text2 = template.replace(PLACEHOLDER_RE, (token, key) => {
+  const text3 = template.replace(PLACEHOLDER_RE, (token, key) => {
     const value = values[key];
     if (value === void 0 || value === null || value === "") {
       if (!missing.includes(key)) {
@@ -61,7 +62,7 @@ function fillTemplate(template, values) {
     }
     return String(value);
   });
-  return { text: text2, missing };
+  return { text: text3, missing };
 }
 
 // src/skills/parse_skills.ts
@@ -131,17 +132,17 @@ var setInputValue = prototypeSetter(HTMLInputElement.prototype, "value");
 var setTextareaValue = prototypeSetter(HTMLTextAreaElement.prototype, "value");
 var setSelectValue = prototypeSetter(HTMLSelectElement.prototype, "value");
 var setInputChecked = prototypeSetter(HTMLInputElement.prototype, "checked");
-function setNativeValue(el, value) {
-  if (el instanceof HTMLTextAreaElement) {
-    setTextareaValue.call(el, value);
-  } else if (el instanceof HTMLSelectElement) {
-    setSelectValue.call(el, value);
+function setNativeValue(el2, value) {
+  if (el2 instanceof HTMLTextAreaElement) {
+    setTextareaValue.call(el2, value);
+  } else if (el2 instanceof HTMLSelectElement) {
+    setSelectValue.call(el2, value);
   } else {
-    setInputValue.call(el, value);
+    setInputValue.call(el2, value);
   }
 }
-function setNativeChecked(el, checked) {
-  setInputChecked.call(el, checked);
+function setNativeChecked(el2, checked) {
+  setInputChecked.call(el2, checked);
 }
 
 // src/dom/animations.ts
@@ -162,42 +163,42 @@ function motionDelay(ms) {
   }
   return delay(ms);
 }
-function accentColor(el, fallback) {
-  const themed = window.getComputedStyle(el).getPropertyValue(ACCENT_PROPERTY).trim();
+function accentColor(el2, fallback) {
+  const themed = window.getComputedStyle(el2).getPropertyValue(ACCENT_PROPERTY).trim();
   return themed === "" ? fallback : themed;
 }
-function ringShadow(el) {
-  return `0 0 0 3px ${accentColor(el, ACCENT_HALO)}`;
+function ringShadow(el2) {
+  return `0 0 0 3px ${accentColor(el2, ACCENT_HALO)}`;
 }
-async function typeInto(el, value, options = {}) {
+async function typeInto(el2, value, options = {}) {
   const charDelayMs = options.charDelayMs ?? 35;
-  setNativeValue(el, "");
-  el.dispatchEvent(new Event("input", { bubbles: true }));
+  setNativeValue(el2, "");
+  el2.dispatchEvent(new Event("input", { bubbles: true }));
   for (const char of value) {
-    setNativeValue(el, el.value + char);
-    el.dispatchEvent(new Event("input", { bubbles: true }));
+    setNativeValue(el2, el2.value + char);
+    el2.dispatchEvent(new Event("input", { bubbles: true }));
     if (charDelayMs > 0) {
       await delay(charDelayMs);
     }
   }
-  el.dispatchEvent(new Event("change", { bubbles: true }));
+  el2.dispatchEvent(new Event("change", { bubbles: true }));
 }
-async function highlightThenClick(el, options = {}) {
+async function highlightThenClick(el2, options = {}) {
   const highlightMs = options.highlightMs ?? 280;
-  const previousOutline = el.style.outline;
-  const previousOffset = el.style.outlineOffset;
-  el.style.outline = `2px solid ${accentColor(el, ACCENT)}`;
-  el.style.outlineOffset = "2px";
+  const previousOutline = el2.style.outline;
+  const previousOffset = el2.style.outlineOffset;
+  el2.style.outline = `2px solid ${accentColor(el2, ACCENT)}`;
+  el2.style.outlineOffset = "2px";
   await delay(highlightMs);
-  el.style.outline = previousOutline;
-  el.style.outlineOffset = previousOffset;
-  el.click();
+  el2.style.outline = previousOutline;
+  el2.style.outlineOffset = previousOffset;
+  el2.click();
 }
 var SCROLL_SETTLE_MS = 600;
 var SCROLL_START_MS = 100;
-function scrollIntoCenterView(el, options = {}) {
+function scrollIntoCenterView(el2, options = {}) {
   const reduced = prefersReducedMotion();
-  el.scrollIntoView({
+  el2.scrollIntoView({
     block: "center",
     inline: "nearest",
     behavior: reduced ? "auto" : "smooth"
@@ -225,85 +226,85 @@ function scrollIntoCenterView(el, options = {}) {
 }
 var FLASH_MS = 1200;
 var FLASH_FADE_RATIO = 1 / 3;
-async function flashRing(el, options, focusByDefault) {
+async function flashRing(el2, options, focusByDefault) {
   if (options.focus ?? focusByDefault) {
-    el.focus({ preventScroll: true });
+    el2.focus({ preventScroll: true });
   }
   const flashMs = options.flashMs ?? FLASH_MS;
   if (flashMs <= 0) {
     return;
   }
-  const previousOutline = el.style.outline;
-  const previousOffset = el.style.outlineOffset;
-  const previousTransition = el.style.transition;
-  const color = options.color ?? accentColor(el, ACCENT);
-  el.style.outline = `3px solid ${color}`;
-  el.style.outlineOffset = "2px";
+  const previousOutline = el2.style.outline;
+  const previousOffset = el2.style.outlineOffset;
+  const previousTransition = el2.style.transition;
+  const color = options.color ?? accentColor(el2, ACCENT);
+  el2.style.outline = `3px solid ${color}`;
+  el2.style.outlineOffset = "2px";
   const fadeMs = prefersReducedMotion() ? 0 : Math.round(flashMs * FLASH_FADE_RATIO);
   await delay(flashMs - fadeMs);
   if (fadeMs > 0) {
-    el.style.transition = `outline-color ${fadeMs}ms ease-out`;
-    el.style.outline = "3px solid transparent";
+    el2.style.transition = `outline-color ${fadeMs}ms ease-out`;
+    el2.style.outline = "3px solid transparent";
     await delay(fadeMs);
   }
-  el.style.outline = previousOutline;
-  el.style.outlineOffset = previousOffset;
-  el.style.transition = previousTransition;
+  el2.style.outline = previousOutline;
+  el2.style.outlineOffset = previousOffset;
+  el2.style.transition = previousTransition;
 }
-function flash(el, options = {}) {
-  return flashRing(el, options, false);
+function flash(el2, options = {}) {
+  return flashRing(el2, options, false);
 }
-function focusWithFlash(el, options = {}) {
-  return flashRing(el, options, true);
+function focusWithFlash(el2, options = {}) {
+  return flashRing(el2, options, true);
 }
-async function pressThenClick(el, options = {}) {
+async function pressThenClick(el2, options = {}) {
   const pressMs = options.pressMs ?? 140;
-  const previousTransform = el.style.transform;
-  const previousTransition = el.style.transition;
-  const previousShadow = el.style.boxShadow;
-  el.style.transition = "transform 80ms ease";
-  el.style.transform = "scale(0.96)";
-  el.style.boxShadow = ringShadow(el);
+  const previousTransform = el2.style.transform;
+  const previousTransition = el2.style.transition;
+  const previousShadow = el2.style.boxShadow;
+  el2.style.transition = "transform 80ms ease";
+  el2.style.transform = "scale(0.96)";
+  el2.style.boxShadow = ringShadow(el2);
   await motionDelay(pressMs);
-  el.style.transform = previousTransform;
-  el.style.transition = previousTransition;
-  el.style.boxShadow = previousShadow;
-  el.click();
+  el2.style.transform = previousTransform;
+  el2.style.transition = previousTransition;
+  el2.style.boxShadow = previousShadow;
+  el2.click();
 }
-function findOption(el, value) {
-  for (const option of Array.from(el.options)) {
+function findOption(el2, value) {
+  for (const option of Array.from(el2.options)) {
     if (option.value === value || option.text === value) {
       return option;
     }
   }
   return null;
 }
-async function selectOption(el, value, options = {}) {
-  const option = findOption(el, value);
+async function selectOption(el2, value, options = {}) {
+  const option = findOption(el2, value);
   if (option === null) {
     throw new Error(`no <option> matching "${value}"`);
   }
   const highlightMs = options.highlightMs ?? 220;
-  const previousOutline = el.style.outline;
-  const previousOffset = el.style.outlineOffset;
-  el.style.outline = `2px solid ${accentColor(el, ACCENT)}`;
-  el.style.outlineOffset = "2px";
+  const previousOutline = el2.style.outline;
+  const previousOffset = el2.style.outlineOffset;
+  el2.style.outline = `2px solid ${accentColor(el2, ACCENT)}`;
+  el2.style.outlineOffset = "2px";
   await motionDelay(highlightMs);
-  setNativeValue(el, option.value);
-  el.dispatchEvent(new Event("input", { bubbles: true }));
-  el.dispatchEvent(new Event("change", { bubbles: true }));
-  el.style.outline = previousOutline;
-  el.style.outlineOffset = previousOffset;
+  setNativeValue(el2, option.value);
+  el2.dispatchEvent(new Event("input", { bubbles: true }));
+  el2.dispatchEvent(new Event("change", { bubbles: true }));
+  el2.style.outline = previousOutline;
+  el2.style.outlineOffset = previousOffset;
 }
-async function toggleControl(el, checked, options = {}) {
+async function toggleControl(el2, checked, options = {}) {
   const flashMs = options.flashMs ?? 200;
-  const previousShadow = el.style.boxShadow;
-  el.style.boxShadow = ringShadow(el);
+  const previousShadow = el2.style.boxShadow;
+  el2.style.boxShadow = ringShadow(el2);
   await motionDelay(flashMs);
-  setNativeChecked(el, checked);
-  el.dispatchEvent(new Event("input", { bubbles: true }));
-  el.dispatchEvent(new Event("change", { bubbles: true }));
-  el.style.boxShadow = previousShadow;
+  setNativeChecked(el2, checked);
+  el2.dispatchEvent(new Event("input", { bubbles: true }));
+  el2.dispatchEvent(new Event("change", { bubbles: true }));
+  el2.style.boxShadow = previousShadow;
 }
 
 // src/tools/page_action_tools.ts
@@ -677,7 +678,7 @@ function attachCopyButtons(root, strings) {
   }
 }
 function button(code, strings) {
-  const text2 = code.textContent;
+  const text3 = code.textContent;
   const copy = document.createElement("button");
   copy.type = "button";
   copy.className = "code-copy";
@@ -686,19 +687,19 @@ function button(code, strings) {
   copy.title = strings.copyCode;
   copy.setAttribute("aria-label", strings.copyCode);
   copy.addEventListener("click", () => {
-    void writeText(text2).then((ok) => {
+    void writeText(text3).then((ok) => {
       confirm(copy, ok ? strings.copied : strings.copyFailed, strings);
     });
   });
   return copy;
 }
-async function writeText(text2) {
+async function writeText(text3) {
   const clipboard = navigator.clipboard;
   if (clipboard === void 0) {
     return false;
   }
   try {
-    await clipboard.writeText(text2);
+    await clipboard.writeText(text3);
     return true;
   } catch {
     return false;
@@ -984,6 +985,376 @@ function accepts(accept, file) {
   });
 }
 
+// src/ui/chart_block.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var WIDTH = 480;
+var HEIGHT = 220;
+var PAD = { top: 20, right: 12, bottom: 30, left: 44 };
+var PLOT_W = WIDTH - PAD.left - PAD.right;
+var PLOT_H = HEIGHT - PAD.top - PAD.bottom;
+var SERIES_COLORS = [
+  "var(--ag-ui-chart-1, #4f7cff)",
+  "var(--ag-ui-chart-2, #21b573)",
+  "var(--ag-ui-chart-3, #e0803c)",
+  "var(--ag-ui-chart-4, #b563d8)",
+  "var(--ag-ui-chart-5, #d84f6e)",
+  "var(--ag-ui-chart-6, #3ba7c4)"
+];
+function seriesColor(index) {
+  return SERIES_COLORS[index % SERIES_COLORS.length];
+}
+function el(name, attrs) {
+  const node = document.createElementNS(SVG_NS, name);
+  for (const [key, value] of Object.entries(attrs)) {
+    node.setAttribute(key, String(value));
+  }
+  return node;
+}
+function text(value, attrs) {
+  const node = el("text", {
+    "font-size": 10,
+    fill: "currentColor",
+    "fill-opacity": 0.65,
+    ...attrs
+  });
+  node.textContent = value;
+  return node;
+}
+function stackRunning(spec) {
+  const seen = [];
+  spec.labels.forEach((_label, i) => {
+    let running = 0;
+    for (const series of spec.series) {
+      running += series.points[i] ?? 0;
+      seen.push(running);
+    }
+  });
+  return seen;
+}
+function extent(spec) {
+  const values = spec.kind === "stacked" ? stackRunning(spec) : spec.series.flatMap((series) => [...series.points]);
+  const max = Math.max(0, ...values);
+  const min = Math.min(0, ...values);
+  return max === min ? { min, max: max + 1 } : { min, max };
+}
+function scaleY(value, min, max) {
+  return PAD.top + PLOT_H - (value - min) / (max - min) * PLOT_H;
+}
+function bandCentre(index, count) {
+  const step = PLOT_W / count;
+  return PAD.left + step * index + step / 2;
+}
+function drawAxes(svg2, spec, min, max) {
+  for (const value of [min, max]) {
+    const y2 = scaleY(value, min, max);
+    svg2.appendChild(
+      el("line", {
+        x1: PAD.left,
+        y1: y2,
+        x2: WIDTH - PAD.right,
+        y2,
+        stroke: "currentColor",
+        "stroke-opacity": value === min ? 0.35 : 0.12
+      })
+    );
+    svg2.appendChild(
+      text(String(Math.round(value)), { x: PAD.left - 6, y: y2 + 4, "text-anchor": "end" })
+    );
+  }
+  spec.labels.forEach((label, i) => {
+    svg2.appendChild(
+      text(label, {
+        x: bandCentre(i, spec.labels.length),
+        y: HEIGHT - PAD.bottom + 16,
+        "text-anchor": "middle"
+      })
+    );
+  });
+}
+function drawBars(svg2, spec, min, max) {
+  const step = PLOT_W / spec.labels.length;
+  const width = step * 0.7 / spec.series.length;
+  const base = scaleY(min, min, max);
+  spec.series.forEach((series, s) => {
+    series.points.forEach((value, i) => {
+      const y2 = scaleY(value, min, max);
+      svg2.appendChild(
+        el("rect", {
+          x: PAD.left + step * i + step * 0.15 + width * s,
+          y: y2,
+          width,
+          height: Math.max(1, base - y2),
+          fill: seriesColor(s),
+          rx: 2
+        })
+      );
+    });
+  });
+}
+function drawStacked(svg2, spec, min, max) {
+  const step = PLOT_W / spec.labels.length;
+  const width = step * 0.7;
+  const running = spec.labels.map(() => 0);
+  spec.series.forEach((series, s) => {
+    series.points.forEach((value, i) => {
+      const from = running[i] ?? 0;
+      const to = from + value;
+      running[i] = to;
+      const y2 = scaleY(to, min, max);
+      svg2.appendChild(
+        el("rect", {
+          x: PAD.left + step * i + step * 0.15,
+          y: y2,
+          width,
+          height: Math.max(1, scaleY(from, min, max) - y2),
+          fill: seriesColor(s)
+        })
+      );
+    });
+  });
+}
+function drawLines(svg2, spec, min, max) {
+  spec.series.forEach((series, s) => {
+    const points = series.points.map((value, i) => `${bandCentre(i, spec.labels.length)},${scaleY(value, min, max)}`).join(" ");
+    svg2.appendChild(
+      el("polyline", {
+        points,
+        fill: "none",
+        stroke: seriesColor(s),
+        "stroke-width": 2,
+        "stroke-linejoin": "round"
+      })
+    );
+  });
+}
+function drawScatter(svg2, spec, min, max) {
+  spec.series.forEach((series, s) => {
+    series.points.forEach((value, i) => {
+      svg2.appendChild(
+        el("circle", {
+          cx: bandCentre(i, spec.labels.length),
+          cy: scaleY(value, min, max),
+          r: 4,
+          fill: seriesColor(s),
+          "fill-opacity": 0.85
+        })
+      );
+    });
+  });
+}
+function drawPie(svg2, points) {
+  const total = points.reduce((sum, value) => sum + value, 0);
+  const cx = WIDTH / 2;
+  const cy = PAD.top + PLOT_H / 2;
+  const r = Math.min(PLOT_W, PLOT_H) / 2;
+  if (total === 0) {
+    svg2.appendChild(
+      el("circle", { cx, cy, r, fill: "none", stroke: "currentColor", "stroke-opacity": 0.3 })
+    );
+    return;
+  }
+  let angle = -Math.PI / 2;
+  points.forEach((value, i) => {
+    const sweep = value / total * Math.PI * 2;
+    const end = angle + sweep;
+    if (sweep >= Math.PI * 2) {
+      svg2.appendChild(el("circle", { cx, cy, r, fill: seriesColor(i) }));
+    } else {
+      const x1 = cx + r * Math.cos(angle);
+      const y1 = cy + r * Math.sin(angle);
+      const x2 = cx + r * Math.cos(end);
+      const y2 = cy + r * Math.sin(end);
+      const large = sweep > Math.PI ? 1 : 0;
+      svg2.appendChild(
+        el("path", {
+          d: `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`,
+          fill: seriesColor(i)
+        })
+      );
+    }
+    angle = end;
+  });
+}
+function buildLegend(entries2) {
+  if (entries2.length < 2) {
+    return null;
+  }
+  const row = document.createElement("div");
+  row.className = "chart-legend";
+  row.setAttribute("part", "chart-legend");
+  entries2.forEach((label, i) => {
+    const item = document.createElement("span");
+    item.className = "chart-legend-item";
+    const swatch = document.createElement("span");
+    swatch.className = "chart-legend-swatch";
+    swatch.style.background = seriesColor(i);
+    item.append(swatch, document.createTextNode(label));
+    row.appendChild(item);
+  });
+  return row;
+}
+function renderChart(spec) {
+  if (spec.labels.length === 0 || spec.series.length === 0) {
+    return null;
+  }
+  const block = document.createElement("div");
+  block.className = "chart-block";
+  block.setAttribute("part", "chart-block");
+  if (spec.title !== void 0 && spec.title !== "") {
+    const heading = document.createElement("div");
+    heading.className = "chart-title";
+    heading.setAttribute("part", "chart-title");
+    heading.textContent = spec.title;
+    block.appendChild(heading);
+  }
+  const svg2 = el("svg", { viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: "100%", role: "img" });
+  svg2.setAttribute("aria-label", spec.title ?? `${spec.kind} chart`);
+  if (spec.kind === "pie") {
+    const first = spec.series[0];
+    drawPie(
+      svg2,
+      first.points.map((value) => Math.max(0, value))
+    );
+  } else {
+    const { min, max } = extent(spec);
+    drawAxes(svg2, spec, min, max);
+    if (spec.kind === "bar") {
+      drawBars(svg2, spec, min, max);
+    } else if (spec.kind === "stacked") {
+      drawStacked(svg2, spec, min, max);
+    } else if (spec.kind === "line") {
+      drawLines(svg2, spec, min, max);
+    } else {
+      drawScatter(svg2, spec, min, max);
+    }
+  }
+  block.appendChild(svg2);
+  const legend = buildLegend(
+    spec.kind === "pie" ? spec.labels : spec.series.map((series) => series.label)
+  );
+  if (legend !== null) {
+    block.appendChild(legend);
+  }
+  return block;
+}
+
+// src/ui/chart_spec_from.ts
+var KINDS = ["bar", "line", "pie", "scatter", "stacked"];
+var MAX_POINTS = 2e4;
+var MAX_LABELS = 2e3;
+var MAX_MAGNITUDE = 1e15;
+function asKind(value) {
+  return KINDS.includes(value) ? value : "bar";
+}
+function asNumbers(value) {
+  if (!Array.isArray(value)) {
+    return null;
+  }
+  const out = [];
+  for (const item of value) {
+    if (typeof item !== "number" || !Number.isFinite(item)) {
+      return null;
+    }
+    if (Math.abs(item) > MAX_MAGNITUDE) {
+      return null;
+    }
+    out.push(item);
+  }
+  return out;
+}
+function asStrings(value) {
+  if (!Array.isArray(value)) {
+    return null;
+  }
+  for (let i = 0; i < value.length; i += 1) {
+    if (typeof value[i] !== "string") {
+      return null;
+    }
+  }
+  return value;
+}
+function chartSpecFrom(value) {
+  if (typeof value !== "object" || value === null) {
+    return null;
+  }
+  const raw = value;
+  const labels = asStrings(raw["labels"]);
+  if (labels === null || !Array.isArray(raw["series"])) {
+    return null;
+  }
+  const series = [];
+  for (const entry of raw["series"]) {
+    if (typeof entry !== "object" || entry === null) {
+      return null;
+    }
+    const item = entry;
+    const points = asNumbers(item["points"]);
+    if (points === null || points.length !== labels.length) {
+      return null;
+    }
+    series.push({ label: typeof item["label"] === "string" ? item["label"] : "", points });
+  }
+  if (series.length === 0) {
+    return null;
+  }
+  if (series.length * labels.length > MAX_POINTS || labels.length > MAX_LABELS) {
+    return null;
+  }
+  const kind = asKind(raw["kind"]);
+  const title = raw["title"];
+  return typeof title === "string" ? { kind, title, labels, series } : { kind, labels, series };
+}
+
+// src/ui/chart_tool.ts
+var CHART_TOOL_NAME = "render_chart";
+function draw(args) {
+  const spec = chartSpecFrom(args);
+  return spec === null ? null : renderChart(spec);
+}
+function drawable(args) {
+  const spec = chartSpecFrom(args);
+  return spec !== null && spec.labels.length > 0 && spec.series.length > 0;
+}
+var REJECTED = "chart not rendered: expected labels (strings) and series, each with one finite number per label";
+function createChartTool() {
+  return {
+    name: CHART_TOOL_NAME,
+    description: "Show a chart in the conversation. Supply the data and the page draws it. Every series must have exactly one point per label.",
+    parameters: {
+      type: "object",
+      properties: {
+        kind: { type: "string", enum: ["bar", "line", "pie", "scatter", "stacked"] },
+        title: { type: "string" },
+        labels: { type: "array", items: { type: "string" } },
+        series: {
+          type: "array",
+          items: {
+            type: "object",
+            properties: {
+              label: { type: "string" },
+              points: { type: "array", items: { type: "number" } }
+            },
+            required: ["points"]
+          }
+        }
+      },
+      required: ["labels", "series"],
+      "x-summary": "Draw a chart"
+    },
+    // 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 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) => drawable(args) ? "chart rendered" : REJECTED,
+    render: draw
+  };
+}
+
 // src/ui/relative_time.ts
 function relativeTime(timestamp, now = Date.now(), strings = DEFAULT_UI_STRINGS) {
   if (!Number.isFinite(timestamp)) {
@@ -1084,7 +1455,7 @@ var CheckpointMenu = class {
   /** The panel's tabbable controls, in document order. */
   #focusables() {
     return Array.from(this.element.querySelectorAll("button, [tabindex]")).filter(
-      (el) => !el.hidden
+      (el2) => !el2.hidden
     );
   }
   /** Escape closes; Tab is trapped so focus cannot wander behind the dialog. */
@@ -1308,10 +1679,10 @@ function requestQuestion(host, request, options = {}) {
       radio.name = group;
       radio.value = choice;
       radio.setAttribute("part", "question-radio");
-      const text2 = document.createElement("span");
-      text2.setAttribute("part", "question-choice-text");
-      text2.textContent = choice;
-      label.append(radio, text2);
+      const text3 = document.createElement("span");
+      text3.setAttribute("part", "question-choice-text");
+      text3.textContent = choice;
+      label.append(radio, text3);
       form.appendChild(label);
       radios.push(radio);
     }
@@ -1328,10 +1699,10 @@ function requestQuestion(host, request, options = {}) {
         otherRadio.name = group;
         otherRadio.value = "";
         otherRadio.setAttribute("part", "question-radio");
-        const text2 = document.createElement("span");
-        text2.setAttribute("part", "question-choice-text");
-        text2.textContent = strings.otherOption;
-        label.append(otherRadio, text2);
+        const text3 = document.createElement("span");
+        text3.setAttribute("part", "question-choice-text");
+        text3.textContent = strings.otherOption;
+        label.append(otherRadio, text3);
         form.appendChild(label);
         input.disabled = true;
       }
@@ -1652,7 +2023,7 @@ var svgFilters = freeze(["feBlend", "feColorMatrix", "feComponentTransfer", "feC
 var svgDisallowed = freeze(["animate", "color-profile", "cursor", "discard", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignobject", "hatch", "hatchpath", "mesh", "meshgradient", "meshpatch", "meshrow", "missing-glyph", "script", "set", "solidcolor", "unknown", "use"]);
 var mathMl$1 = freeze(["math", "menclose", "merror", "mfenced", "mfrac", "mglyph", "mi", "mlabeledtr", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msup", "msubsup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "mprescripts"]);
 var mathMlDisallowed = freeze(["maction", "maligngroup", "malignmark", "mlongdiv", "mscarries", "mscarry", "msgroup", "mstack", "msline", "msrow", "semantics", "annotation", "annotation-xml", "mprescripts", "none"]);
-var text = freeze(["#text"]);
+var text2 = freeze(["#text"]);
 var html = freeze(["accept", "action", "align", "alt", "autocapitalize", "autocomplete", "autopictureinpicture", "autoplay", "background", "bgcolor", "border", "capture", "cellpadding", "cellspacing", "checked", "cite", "class", "clear", "color", "cols", "colspan", "command", "commandfor", "controls", "controlslist", "coords", "crossorigin", "datetime", "decoding", "default", "dir", "disabled", "disablepictureinpicture", "disableremoteplayback", "download", "draggable", "enctype", "enterkeyhint", "exportparts", "face", "for", "headers", "height", "hidden", "high", "href", "hreflang", "id", "inert", "inputmode", "integrity", "ismap", "kind", "label", "lang", "list", "loading", "loop", "low", "max", "maxlength", "media", "method", "min", "minlength", "multiple", "muted", "name", "nonce", "noshade", "novalidate", "nowrap", "open", "optimum", "part", "pattern", "placeholder", "playsinline", "popover", "popovertarget", "popovertargetaction", "poster", "preload", "pubdate", "radiogroup", "readonly", "rel", "required", "rev", "reversed", "role", "rows", "rowspan", "spellcheck", "scope", "selected", "shape", "size", "sizes", "slot", "span", "srclang", "start", "src", "srcset", "step", "style", "summary", "tabindex", "title", "translate", "type", "usemap", "valign", "value", "width", "wrap", "xmlns"]);
 var svg = freeze(["accent-height", "accumulate", "additive", "alignment-baseline", "amplitude", "ascent", "attributename", "attributetype", "azimuth", "basefrequency", "baseline-shift", "begin", "bias", "by", "class", "clip", "clippathunits", "clip-path", "clip-rule", "color", "color-interpolation", "color-interpolation-filters", "color-profile", "color-rendering", "cx", "cy", "d", "dx", "dy", "diffuseconstant", "direction", "display", "divisor", "dominant-baseline", "dur", "edgemode", "elevation", "end", "exponent", "fill", "fill-opacity", "fill-rule", "filter", "filterunits", "flood-color", "flood-opacity", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "fx", "fy", "g1", "g2", "glyph-name", "glyphref", "gradientunits", "gradienttransform", "height", "href", "id", "image-rendering", "in", "in2", "intercept", "k", "k1", "k2", "k3", "k4", "kerning", "keypoints", "keysplines", "keytimes", "lang", "lengthadjust", "letter-spacing", "kernelmatrix", "kernelunitlength", "lighting-color", "local", "marker-end", "marker-mid", "marker-start", "markerheight", "markerunits", "markerwidth", "maskcontentunits", "maskunits", "max", "mask", "mask-type", "media", "method", "mode", "min", "name", "numoctaves", "offset", "operator", "opacity", "order", "orient", "orientation", "origin", "overflow", "paint-order", "path", "pathlength", "patterncontentunits", "patterntransform", "patternunits", "points", "preservealpha", "preserveaspectratio", "primitiveunits", "r", "rx", "ry", "radius", "refx", "refy", "repeatcount", "repeatdur", "restart", "result", "rotate", "scale", "seed", "shape-rendering", "slope", "specularconstant", "specularexponent", "spreadmethod", "startoffset", "stddeviation", "stitchtiles", "stop-color", "stop-opacity", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke", "stroke-width", "style", "surfacescale", "systemlanguage", "tabindex", "tablevalues", "targetx", "targety", "transform", "transform-origin", "text-anchor", "text-decoration", "text-orientation", "text-rendering", "textlength", "type", "u1", "u2", "unicode", "values", "viewbox", "visibility", "version", "vert-adv-y", "vert-origin-x", "vert-origin-y", "width", "word-spacing", "wrap", "writing-mode", "xchannelselector", "ychannelselector", "x", "x1", "x2", "xmlns", "y", "y1", "y2", "z", "zoomandpan"]);
 var mathMl = freeze(["accent", "accentunder", "align", "bevelled", "close", "columnalign", "columnlines", "columnspacing", "columnspan", "denomalign", "depth", "dir", "display", "displaystyle", "encoding", "fence", "frame", "height", "href", "id", "largeop", "length", "linethickness", "lquote", "lspace", "mathbackground", "mathcolor", "mathsize", "mathvariant", "maxsize", "minsize", "movablelimits", "notation", "numalign", "open", "rowalign", "rowlines", "rowspacing", "rowspan", "rspace", "rquote", "scriptlevel", "scriptminsize", "scriptsizemultiplier", "selection", "separator", "separators", "stretchy", "subscriptshift", "supscriptshift", "symmetric", "voffset", "width", "xmlns"]);
@@ -1813,7 +2184,7 @@ function createDOMPurify() {
   const MUSTACHE_EXPR$1 = MUSTACHE_EXPR, ERB_EXPR$1 = ERB_EXPR, TMPLIT_EXPR$1 = TMPLIT_EXPR, DATA_ATTR$1 = DATA_ATTR, ARIA_ATTR$1 = ARIA_ATTR, IS_SCRIPT_OR_DATA$1 = IS_SCRIPT_OR_DATA, ATTR_WHITESPACE$1 = ATTR_WHITESPACE, CUSTOM_ELEMENT$1 = CUSTOM_ELEMENT;
   let IS_ALLOWED_URI$1 = IS_ALLOWED_URI;
   let ALLOWED_TAGS2 = null;
-  const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]);
+  const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text2]);
   let ALLOWED_ATTR2 = null;
   const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);
   let CUSTOM_ELEMENT_HANDLING = Object.seal(create(null, {
@@ -2012,7 +2383,7 @@ function createDOMPurify() {
       RETURN_DOM = true;
     }
     if (USE_PROFILES) {
-      ALLOWED_TAGS2 = addToSet({}, text);
+      ALLOWED_TAGS2 = addToSet({}, text2);
       ALLOWED_ATTR2 = create(null);
       if (USE_PROFILES.html === true) {
         addToSet(ALLOWED_TAGS2, html$1);
@@ -4228,9 +4599,9 @@ var ALLOWED_TAGS = [
 var ALLOWED_ATTR = ["href", "title", "class"];
 var ALLOWED_TAGS_WITH_IMAGES = [...ALLOWED_TAGS, "img"];
 var ALLOWED_ATTR_WITH_IMAGES = [...ALLOWED_ATTR, "src", "alt", "width", "height"];
-function renderMarkdown(text2, options) {
+function renderMarkdown(text3, options) {
   const allowImages = options?.allowImages === true;
-  const rendered = parser.parse(text2, { async: false });
+  const rendered = parser.parse(text3, { async: false });
   const clean = purify.sanitize(rendered, {
     ALLOWED_TAGS: allowImages ? ALLOWED_TAGS_WITH_IMAGES : ALLOWED_TAGS,
     ALLOWED_ATTR: allowImages ? ALLOWED_ATTR_WITH_IMAGES : ALLOWED_ATTR
@@ -4350,7 +4721,7 @@ function wrapWords(root) {
 }
 
 // src/ui/run_notice.ts
-function renderRunNotice(icon, text2, kind) {
+function renderRunNotice(icon, text3, kind) {
   const notice = document.createElement("div");
   notice.className = `run-notice run-notice--${kind}`;
   notice.setAttribute("part", `run-notice run-notice-${kind}`);
@@ -4363,7 +4734,7 @@ function renderRunNotice(icon, text2, kind) {
   const label = document.createElement("span");
   label.className = "run-notice-text";
   label.setAttribute("part", "run-notice-text");
-  label.textContent = text2;
+  label.textContent = text3;
   notice.append(glyph, label);
   return notice;
 }
@@ -6048,6 +6419,50 @@ var STYLES = `
   margin-top: 6px;
 }
 
+/* Charts.
+ *
+ * The SVG scales to the column and carries no colours of its own beyond the
+ * series palette, so a host restyles it the same way it restyles everything
+ * else. Series colours are custom properties with fallbacks rather than fixed
+ * values, and the axis furniture inherits currentColor at low opacity so it
+ * reads correctly in either theme without a second palette.
+ */
+.chart-block {
+  align-self: stretch;
+  max-width: 100%;
+  margin: 6px 0;
+  color: var(--_fg);
+}
+
+.chart-title {
+  margin-bottom: 2px;
+  font-size: 0.85em;
+  font-weight: 600;
+  opacity: 0.85;
+}
+
+.chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin-top: 4px;
+  font-size: 0.78em;
+  opacity: 0.75;
+}
+
+.chart-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.chart-legend-swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  flex: 0 0 auto;
+}
+
 .run-notice {
   display: inline-flex;
   align-items: center;
@@ -6969,7 +7384,7 @@ var ThreadDrawer = class {
     }
     const focusables = Array.from(
       this.#panel.querySelectorAll("button, input, [tabindex]")
-    ).filter((el) => !el.hidden);
+    ).filter((el2) => !el2.hidden);
     const first = focusables[0];
     const last = focusables[focusables.length - 1];
     const active = this.#activeElement();
@@ -7137,11 +7552,11 @@ function resultLabels(strings) {
     [TOOL_CALL_STATUS.DECLINED]: strings.declinedLabel
   };
 }
-function formatPayload(text2) {
+function formatPayload(text3) {
   try {
-    return JSON.stringify(JSON.parse(text2), null, 2);
+    return JSON.stringify(JSON.parse(text3), null, 2);
   } catch {
-    return text2;
+    return text3;
   }
 }
 var ToolCallCard = class {
@@ -7253,7 +7668,7 @@ var ToolCallCard = class {
    * Flip the status pill to `status` and fill in the result region, whose
    * heading names the outcome (result / error / declined).
    */
-  settle(status, text2) {
+  settle(status, text3) {
     if (this.#settled) {
       return;
     }
@@ -7261,7 +7676,7 @@ var ToolCallCard = class {
     this.element.setAttribute("data-status", status);
     this.#status.textContent = statusLabels(this.#strings)[status];
     this.#resultLabel.textContent = resultLabels(this.#strings)[status];
-    this.#resultBody.textContent = formatPayload(text2);
+    this.#resultBody.textContent = formatPayload(text3);
     this.#resultSection.hidden = false;
   }
   /** Build one labelled region of the body: a heading plus a payload block. */
@@ -7374,10 +7789,10 @@ var VoiceInput = class {
     this.#setState("transcribing");
     const audio = new Blob(this.#chunks, { type: mimeType || "audio/webm" });
     try {
-      const text2 = await this.#transcribe(audio);
+      const text3 = await this.#transcribe(audio);
       this.#setState("idle");
-      if (text2 !== "") {
-        this.#onText(text2);
+      if (text3 !== "") {
+        this.#onText(text3);
       }
     } catch (error) {
       this.#fail(error instanceof Error ? error.message : this.#strings.transcriptionFailed);
@@ -7614,6 +8029,7 @@ var AgUiClient = class {
   #buildSubscriber(pending, runState) {
     const h = this.#handlers;
     const closed = this.#closedMessageIds;
+    const pendingDeltas = /* @__PURE__ */ new Set();
     return {
       onRunInitialized() {
         h.onRunStart();
@@ -7644,8 +8060,39 @@ var AgUiClient = class {
       onToolCallResultEvent({ event }) {
         h.onToolResult(event.toolCallId, event.content);
       },
-      onActivitySnapshotEvent({ event }) {
-        h.onActivity(event.activityType, event.content);
+      onActivitySnapshotEvent({ event, messages }) {
+        const known = messages.some(
+          (message) => message.id === event.messageId && message.role === "activity"
+        );
+        if (known) {
+          h.onActivityChanged(event.messageId, event.activityType, event.content);
+          return;
+        }
+        h.onActivity(event.activityType, event.content, event.messageId);
+      },
+      // Deliberately does *not* read the message here. `@ag-ui/client`
+      // dispatches this subscriber **before** applying the patch, so the
+      // message still holds its previous content: redrawing from it would leave
+      // the chart one revision behind for the life of the run, and disagreeing
+      // with what a reload shows. Note which chart moved and read the result on
+      // the change that follows.
+      onActivityDeltaEvent({ event }) {
+        pendingDeltas.add(event.messageId);
+      },
+      // Emitted after the client has written the patched messages, which is the
+      // first moment the result exists. Only the ids marked above are looked at,
+      // so an ordinary text delta does not walk the transcript.
+      onMessagesChanged({ messages }) {
+        if (pendingDeltas.size === 0) {
+          return;
+        }
+        for (const id of pendingDeltas) {
+          const message = messages.find((entry) => entry.id === id);
+          if (message !== void 0 && message.role === "activity") {
+            h.onActivityChanged(id, message.activityType, message.content);
+          }
+        }
+        pendingDeltas.clear();
       },
       // `@ag-ui/client` maps the deprecated THINKING_* events onto these
       // REASONING_* callbacks, so the reasoning family alone covers both
@@ -7857,9 +8304,9 @@ function isOwnedSuffix(suffix) {
 function deriveTitle(messages) {
   for (const message of messages) {
     if (message.role === "user") {
-      const text2 = cleanText(message.content);
-      if (text2 !== "") {
-        return truncate(text2, TITLE_LIMIT);
+      const text3 = cleanText(message.content);
+      if (text3 !== "") {
+        return truncate(text3, TITLE_LIMIT);
       }
     }
   }
@@ -7867,9 +8314,9 @@ function deriveTitle(messages) {
 }
 function derivePreview(messages) {
   for (const message of [...messages].reverse()) {
-    const text2 = cleanText(message.content);
-    if (text2 !== "") {
-      return truncate(text2, PREVIEW_LIMIT);
+    const text3 = cleanText(message.content);
+    if (text3 !== "") {
+      return truncate(text3, PREVIEW_LIMIT);
     }
   }
   return "";
@@ -7877,8 +8324,8 @@ function derivePreview(messages) {
 function cleanText(content) {
   return typeof content === "string" ? content.replace(/\s+/g, " ").trim() : "";
 }
-function truncate(text2, limit) {
-  return text2.length <= limit ? text2 : `${text2.slice(0, limit - 1).trimEnd()}\u2026`;
+function truncate(text3, limit) {
+  return text3.length <= limit ? text3 : `${text3.slice(0, limit - 1).trimEnd()}\u2026`;
 }
 
 // src/core/create_http_agent.ts
@@ -8397,6 +8844,12 @@ var AgUiChat = class extends HTMLElement {
    * (`TOOL_CALL_RESULT`), so the post-run executeTool sweep doesn't overwrite
    * the real output with the generic "executed on the server" fallback.
    */
+  /** Whether a server-pushed chart activity is drawn. Off unless asked for. */
+  #chartActivity = false;
+  /** Card elements by call id, so a rendering handler can find its own card. */
+  #cardElements = /* @__PURE__ */ new Map();
+  /** Chart blocks by activity message id, so an update redraws in place. */
+  #activityBlocks = /* @__PURE__ */ new Map();
   #serverSettled = /* @__PURE__ */ new Set();
   /**
    * Tool calls made during the current interaction, in the order they started,
@@ -9042,7 +9495,7 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#voice = new VoiceInput({
       transcribe,
-      onText: (text2) => this.#insertVoiceText(text2),
+      onText: (text3) => this.#insertVoiceText(text3),
       strings: this.#strings
     });
     this.#voiceSlot.appendChild(this.#voice.element);
@@ -9059,9 +9512,9 @@ var AgUiChat = class extends HTMLElement {
     });
   }
   /** Drop a voice transcript into the composer (appended to any typed text). */
-  #insertVoiceText(text2) {
+  #insertVoiceText(text3) {
     const current = this.#input.value.trim();
-    this.#input.value = current === "" ? text2 : `${current} ${text2}`;
+    this.#input.value = current === "" ? text3 : `${current} ${text3}`;
     this.#onInput();
     this.#input.focus();
   }
@@ -9205,18 +9658,18 @@ var AgUiChat = class extends HTMLElement {
       void this.sendMessage(`/${skill.name}`);
       return;
     }
-    const { text: text2, missing } = fillTemplate(skill.prompt, this.skillContext());
+    const { text: text3, missing } = fillTemplate(skill.prompt, this.skillContext());
     if (missing.length > 0) {
       this.#skillHint.textContent = this.#strings.skillNeeds.replace("{title}", skill.title).replace("{fields}", missing.join(", "));
       this.#skillHint.hidden = false;
-      this.#input.value = text2;
+      this.#input.value = text3;
       this.#autoGrow();
       this.#input.focus();
-      this.#selectFirstPlaceholder(text2);
+      this.#selectFirstPlaceholder(text3);
       return;
     }
     this.#skillHint.hidden = true;
-    this.#input.value = text2;
+    this.#input.value = text3;
     this.#autoGrow();
     if (skill.sendImmediately === false) {
       this.#input.focus();
@@ -9230,9 +9683,9 @@ var AgUiChat = class extends HTMLElement {
    * Typing then replaces it, which is the shortest path from "this skill needs
    * a topic" to a sendable prompt.
    */
-  #selectFirstPlaceholder(text2) {
-    const start = text2.indexOf("{");
-    this.#input.setSelectionRange(start, text2.indexOf("}", start) + 1);
+  #selectFirstPlaceholder(text3) {
+    const start = text3.indexOf("{");
+    this.#input.setSelectionRange(start, text3.indexOf("}", start) + 1);
   }
   /** Whether the widget is collapsed (reflected as the `collapsed` attribute). */
   get collapsed() {
@@ -9488,6 +9941,8 @@ var AgUiChat = class extends HTMLElement {
     this.#hidePending();
     this.#toolCards.clear();
     this.#serverSettled.clear();
+    this.#cardElements.clear();
+    this.#activityBlocks.clear();
     this.#initialMessages = [];
     this.#attachTray?.clear();
     this.#messages.replaceChildren(this.#emptyWrap);
@@ -9599,11 +10054,11 @@ var AgUiChat = class extends HTMLElement {
    * the full transcript — tool calls and their results — not just the prose.
    */
   #renderHistoricMessage(message) {
-    const text2 = typeof message.content === "string" ? message.content : "";
+    const text3 = typeof message.content === "string" ? message.content : "";
     if (message.role === MESSAGE_ROLE.USER) {
       const attachments = messageAttachments(message);
-      if (text2 !== "" || attachments.length > 0) {
-        const bubble = this.appendMessage(MESSAGE_ROLE.USER, text2);
+      if (text3 !== "" || attachments.length > 0) {
+        const bubble = this.appendMessage(MESSAGE_ROLE.USER, text3);
         if (attachments.length > 0) {
           bubble.appendChild(renderAttachmentChips(attachments));
         }
@@ -9611,8 +10066,8 @@ var AgUiChat = class extends HTMLElement {
       return;
     }
     if (message.role === MESSAGE_ROLE.ASSISTANT) {
-      if (text2 !== "") {
-        this.appendMessage(MESSAGE_ROLE.ASSISTANT, text2).classList.add("message--restored");
+      if (text3 !== "") {
+        this.appendMessage(MESSAGE_ROLE.ASSISTANT, text3).classList.add("message--restored");
       }
       for (const call of restoredToolCalls(message.toolCalls)) {
         const restored = {
@@ -9623,7 +10078,18 @@ var AgUiChat = class extends HTMLElement {
         if (this.#noticeIfSkillLoad(restored)) {
           continue;
         }
-        this.#cardFor(restored);
+        this.#cardElements.set(restored.id, this.#cardFor(restored).element);
+        const render = this.#resolveTool(restored.name)?.render;
+        if (render !== void 0) {
+          this.#renderToolOutput(render, restored);
+        }
+      }
+      return;
+    }
+    if (message.role === "activity") {
+      const activity = message;
+      if (activity.activityType === CHART_ACTIVITY_TYPE && this.#chartActivity) {
+        this.#drawActivityChart(message.id, activity.content);
       }
       return;
     }
@@ -10196,6 +10662,7 @@ var AgUiChat = class extends HTMLElement {
     }
     const card = this.#cardFor(call);
     this.#toolCards.delete(call.id);
+    this.#cardElements.set(call.id, card.element);
     const tool = this.#resolveTool(call.name);
     if (tool === null) {
       if (!this.#serverSettled.has(call.id)) {
@@ -10237,7 +10704,10 @@ var AgUiChat = class extends HTMLElement {
       this.conversationStore.saveCheckpoint(this.#threadId, { toolCallId: call.id });
     }
     try {
-      const result = await tool.handler(call.args);
+      const result = await tool.handler(call.args, call.id);
+      if (tool.render !== void 0) {
+        this.#renderToolOutput(tool.render, call);
+      }
       if (navigates) {
         card.settle(TOOL_CALL_STATUS.DONE, this.#strings.navigating);
         return { content: "", halt: true };
@@ -10356,7 +10826,13 @@ var AgUiChat = class extends HTMLElement {
         this.#runTools.push({ id: call.id, name: call.name });
         this.#cardFor(call);
       },
-      onActivity: (activityType, content) => {
+      onActivity: (activityType, content, messageId) => {
+        if (activityType === CHART_ACTIVITY_TYPE) {
+          if (this.#chartActivity) {
+            this.#drawActivityChart(messageId, content);
+          }
+          return;
+        }
         if (activityType !== COMPACTION_ACTIVITY_TYPE) {
           return;
         }
@@ -10379,6 +10855,11 @@ var AgUiChat = class extends HTMLElement {
         this.#serverSettled.add(toolCallId);
         this.#showPending();
       },
+      onActivityChanged: (messageId, activityType, content) => {
+        if (activityType === CHART_ACTIVITY_TYPE && this.#chartActivity) {
+          this.#drawActivityChart(messageId, content);
+        }
+      },
       onRunEnd: () => {
         this.#hidePending();
         this.#streamingBubble = null;
@@ -10526,8 +11007,84 @@ var AgUiChat = class extends HTMLElement {
     this.#appendNotice("\u2728", this.#strings.usingSkill.replace("{name}", skill), "skill");
     return true;
   }
-  #appendNotice(icon, text2, kind) {
-    this.#ensureGroup().appendChild(renderRunNotice(icon, text2, kind));
+  #appendNotice(icon, text3, kind) {
+    this.#ensureGroup().appendChild(renderRunNotice(icon, text3, kind));
+    this.#updateEmptyState();
+    this.#messages.scrollTop = this.#messages.scrollHeight;
+  }
+  /**
+   * Turn on chart rendering, by whichever route this consumer wants.
+   *
+   * Both routes converge on one renderer deliberately. Built apart they become
+   * two chart implementations with two sets of bugs, and the choice between them
+   * is about *where the data lives* rather than how a bar should look:
+   *
+   * - `"tool"` registers the built-in `render_chart`. The agent decides a chart
+   *   helps and calls it, so the numbers are in its context and it can discuss
+   *   them afterwards. Costs one model round, and works over any transport.
+   * - `"activity"` draws a server-pushed `ACTIVITY_SNAPSHOT` of type `chart`.
+   *   No round trip, and the data never enters the model's context at all —
+   *   which is what makes it the one for a large or sensitive dataset. Only this
+   *   route can update a chart in place as the server computes.
+   *
+   * Off unless asked for, both of them: a component that renders whatever
+   * arrives is not something to switch on for everybody.
+   */
+  enableCharts(routes = ["tool", "activity"]) {
+    const first = !this.#chartActivity && !this.#toolRegistry.has(CHART_TOOL_NAME);
+    if (routes.includes("activity")) {
+      this.#chartActivity = true;
+    }
+    if (routes.includes("tool")) {
+      this.registerTool(createChartTool());
+    }
+    if (first && this.isConnected) {
+      this.reload();
+    }
+  }
+  /**
+   * Place a tool's rendered node against its own card.
+   *
+   * Anchored rather than appended because a client tool's handler does not run
+   * until the round is over: appending would put the node after everything the
+   * model said next, visibly detached from the call that produced it, and in a
+   * different order than the same transcript takes on reload. The card was
+   * created inline, in the right place, so anchoring makes *when* the handler
+   * runs stop mattering.
+   */
+  #renderToolOutput(render, call) {
+    let node;
+    try {
+      node = render(call.args);
+    } catch (error) {
+      console.warn(`ag-ui-chat: render failed for tool ${call.name}`, error);
+      return;
+    }
+    if (node === null) {
+      return;
+    }
+    this.#cardElements.get(call.id)?.after(node);
+    this.#afterTranscriptGrew();
+  }
+  /** Draw, or redraw in place, the chart for one activity message. */
+  #drawActivityChart(messageId, content) {
+    const spec = chartSpecFrom(content);
+    const block = spec === null ? null : renderChart(spec);
+    if (block === null) {
+      this.#activityBlocks.get(messageId)?.remove();
+      this.#activityBlocks.delete(messageId);
+      return;
+    }
+    const existing = this.#activityBlocks.get(messageId);
+    if (existing === void 0) {
+      this.#ensureGroup().appendChild(block);
+    } else {
+      existing.replaceWith(block);
+    }
+    this.#activityBlocks.set(messageId, block);
+    this.#afterTranscriptGrew();
+  }
+  #afterTranscriptGrew() {
     this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
   }
@@ -10580,43 +11137,45 @@ function defineAgUiChat() {
 }
 
 // src/dom/dom_driver.ts
-async function fillField(el, value, options = {}) {
-  await scrollIntoCenterView(el);
-  await focusWithFlash(el, { ...options, flashMs: options.flashMs ?? 0 });
-  await typeInto(el, value, options);
-}
-async function clickElement(el, options = {}) {
-  await scrollIntoCenterView(el);
-  await highlightThenClick(el, options);
-}
-async function pressButton(el, options = {}) {
-  await scrollIntoCenterView(el);
-  await pressThenClick(el, options);
-}
-async function selectControl(el, value, options = {}) {
-  await scrollIntoCenterView(el);
-  await selectOption(el, value, options);
-}
-async function toggleCheckbox(el, checked, options = {}) {
-  await scrollIntoCenterView(el);
-  await toggleControl(el, checked, options);
-}
-function setControlValue(el, value) {
-  if (el instanceof HTMLInputElement && el.type === "checkbox") {
-    setNativeChecked(el, Boolean(value));
+async function fillField(el2, value, options = {}) {
+  await scrollIntoCenterView(el2);
+  await focusWithFlash(el2, { ...options, flashMs: options.flashMs ?? 0 });
+  await typeInto(el2, value, options);
+}
+async function clickElement(el2, options = {}) {
+  await scrollIntoCenterView(el2);
+  await highlightThenClick(el2, options);
+}
+async function pressButton(el2, options = {}) {
+  await scrollIntoCenterView(el2);
+  await pressThenClick(el2, options);
+}
+async function selectControl(el2, value, options = {}) {
+  await scrollIntoCenterView(el2);
+  await selectOption(el2, value, options);
+}
+async function toggleCheckbox(el2, checked, options = {}) {
+  await scrollIntoCenterView(el2);
+  await toggleControl(el2, checked, options);
+}
+function setControlValue(el2, value) {
+  if (el2 instanceof HTMLInputElement && el2.type === "checkbox") {
+    setNativeChecked(el2, Boolean(value));
   } else {
-    setNativeValue(el, String(value));
+    setNativeValue(el2, String(value));
   }
-  el.dispatchEvent(new Event("input", { bubbles: true }));
-  el.dispatchEvent(new Event("change", { bubbles: true }));
+  el2.dispatchEvent(new Event("input", { bubbles: true }));
+  el2.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
 // src/version.ts
-var VERSION = "0.25.2";
+var VERSION = "0.26.1";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
   AgUiClient,
+  CHART_ACTIVITY_TYPE,
+  CHART_TOOL_NAME,
   COMPACTION_ACTIVITY_TYPE,
   CheckpointMenu,
   ClientToolRegistry,
@@ -10643,6 +11202,7 @@ export {
   X_DESTRUCTIVE_KEY,
   X_NAVIGATES_KEY,
   X_SUMMARY_KEY,
+  chartSpecFrom,
   clickElement,
   createHttpAgent,
   createPageActionTools,
@@ -10664,6 +11224,7 @@ export {
   pressButton,
   pressThenClick,
   prettifyToolName,
+  renderChart,
   renderMarkdown,
   requestApproval,
   requestConfirmation,