@artooi/ag-ui-web-component 0.2.2 → 0.3.1

package/dist/tools/parse_tool_catalog.d.ts

@@ -0,0 +1,19 @@
+/**
+ * One entry in the server-tool catalog served by django-ag-ui's `tools/`
+ * endpoint and fetched via the `data-tools-url` attribute.
+ */
+export interface ToolCatalogEntry {
+    /** The tool's wire name (matches the name in `TOOL_CALL_START`). */
+    readonly name: string;
+    /** A friendly card label for the tool. */
+    readonly summary: string;
+    /** Optional longer blurb (e.g. for a future tooltip). */
+    readonly description?: string;
+}
+/**
+ * Parse a fetched tool catalog into a `name → summary` map, skipping any entry
+ * that isn't a `{ name: string, summary: string }` object. Tolerant by design:
+ * a malformed payload yields an empty map rather than throwing.
+ */
+export declare function parseToolCatalog(data: unknown): Record<string, string>;
+//# sourceMappingURL=parse_tool_catalog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parse_tool_catalog.d.ts","sourceRoot":"","sources":["../../src/tools/parse_tool_catalog.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBtE"}

package/dist/ui/prettify_tool_name.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Prettify a raw tool name for display: separators become spaces and the
+ * first letter is capitalised — `list_projects` → "List projects",
+ * `invoices.retrieve` → "Invoices retrieve".
+ *
+ * Final fallback of the tool-card label chain (`x-summary` →
+ * `toolSummaries` → fetched catalog → this). Purely cosmetic: the original
+ * name still rides on the card's dataset for debugging.
+ */
+export declare function prettifyToolName(name: string): string;
+//# sourceMappingURL=prettify_tool_name.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prettify_tool_name.d.ts","sourceRoot":"","sources":["../../src/ui/prettify_tool_name.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMrD"}

package/dist/ui/render_markdown.d.ts

@@ -1,3 +1,12 @@
+/** Options for {@link renderMarkdown}. */
+export interface RenderMarkdownOptions {
+    /**
+     * Permit `<img>` tags (and their `src`/`alt`/`width`/`height` attributes)
+     * in the sanitised output. **Off by default** — see the allowlist note on
+     * the exfiltration risk. Only enable for trusted content sources.
+     */
+    readonly allowImages?: boolean;
+}
 /**
  * Render markdown (and any embedded raw HTML) to a sanitised HTML string.
  *
@@ -9,5 +18,5 @@
  * The result is trimmed so a single-paragraph message round-trips to clean
  * `textContent` (no trailing newline from the wrapping `<p>`).
  */
-export declare function renderMarkdown(text: string): string;
+export declare function renderMarkdown(text: string, options?: RenderMarkdownOptions): string;
 //# sourceMappingURL=render_markdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"render_markdown.d.ts","sourceRoot":"","sources":["../../src/ui/render_markdown.ts"],"names":[],"mappings":"AA8CA;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAUnD"}
+{"version":3,"file":"render_markdown.d.ts","sourceRoot":"","sources":["../../src/ui/render_markdown.ts"],"names":[],"mappings":"AA0DA,0CAA0C;AAC1C,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAcpF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artooi/ag-ui-web-component",
-  "version": "0.2.2",
+  "version": "0.3.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",
@@ -13,8 +13,7 @@
     },
     "./bundle": {
       "import": "./dist/ag-ui-web-component.bundle.js"
-    },
-    "./style.css": "./dist/ag-ui-web-component.bundle.css"
+    }
   },
   "files": [
     "dist/",

package/src/core/ag_ui_chat.ts

@@ -15,9 +15,11 @@ import { type ClientTool, ClientToolRegistry } from "../tools/client_tool_regist
 import { isDestructive } from "../tools/is_destructive.js";
 import { isNavigates } from "../tools/is_navigates.js";
 import { createPageMapContext, type PageMap } from "../tools/page_map.js";
+import { parseToolCatalog } from "../tools/parse_tool_catalog.js";
 import { createRouteTools, type RouteMap } from "../tools/route_map.js";
 import { createStateHookTools, type StateHook } from "../tools/state_hook.js";
 import { type ConfirmationRequest, requestConfirmation } from "../ui/confirmation_card.js";
+import { prettifyToolName } from "../ui/prettify_tool_name.js";
 import { renderMarkdown } from "../ui/render_markdown.js";
 import { wrapWords } from "../ui/reveal_words.js";
 import { SkillsMenu } from "../ui/skills_menu.js";
@@ -71,6 +73,14 @@ export class AgUiChat extends HTMLElement {
   /** Extra HTTP headers for the AG-UI endpoint (e.g. CSRF). */
   headers: Record<string, string> = {};
 
+  /**
+   * Permit `<img>` in rendered assistant markdown. **Off by default**: a
+   * model-controlled image URL is fetched with no user interaction, which
+   * makes it a zero-click exfiltration channel for prompt-injected page
+   * data. Enable only when the content source is trusted.
+   */
+  allowImages = false;
+
   /** When true, destructive tools execute without a confirmation modal. */
   autoConfirm = false;
 
@@ -159,6 +169,13 @@ export class AgUiChat extends HTMLElement {
    */
   toolSummaries: Record<string, string> = {};
 
+  /**
+   * Card labels fetched from a server tool catalog (`data-tools-url`), keyed by
+   * tool name. The base layer behind {@link toolSummaries}: an explicit entry in
+   * `toolSummaries` wins, this fills the rest. Populated once on connect.
+   */
+  #toolCatalog: Record<string, string> = {};
+
   readonly #toolRegistry = new ClientToolRegistry();
   /** Tool-call cards awaiting execution, keyed by call id. */
   readonly #toolCards = new Map<string, ToolCallCard>();
@@ -312,10 +329,25 @@ export class AgUiChat extends HTMLElement {
       this.setAttribute("collapsed", "");
     }
     this.#initSkills();
+    void this.#fetchToolCatalog();
     this.#threadId = this.conversationStore.threadId();
     void this.#rehydrate();
   }
 
+  /** Fetch the server tool-label catalog from `data-tools-url`, if set. */
+  async #fetchToolCatalog(): Promise<void> {
+    const url = this.getAttribute("data-tools-url");
+    if (url === null) {
+      return;
+    }
+    try {
+      const response = await fetch(url, { headers: this.headers });
+      this.#toolCatalog = parseToolCatalog(await response.json());
+    } catch {
+      // Network/parse failure: cards fall back to toolSummaries / raw names.
+    }
+  }
+
   /**
    * Replace the host-supplied (client) skill catalog. Merged after the embedded
    * and fetched skills (so a client skill overrides a same-named server one).
@@ -546,7 +578,7 @@ export class AgUiChat extends HTMLElement {
     const bubble = document.createElement("div");
     bubble.className = `message message--${role}`;
     if (role === MESSAGE_ROLE.ASSISTANT) {
-      bubble.innerHTML = renderMarkdown(content);
+      bubble.innerHTML = renderMarkdown(content, { allowImages: this.allowImages });
     } else {
       bubble.textContent = content;
     }
@@ -677,6 +709,10 @@ export class AgUiChat extends HTMLElement {
       const agent = this.agentFactory({
         endpoint: this.endpoint,
         headers: this.headers,
+        // Live getter: the client is built once and cached, but a rotated
+        // token must still reach every request — the factory's fetch wrapper
+        // re-reads this on each call.
+        getHeaders: () => this.headers,
         threadId: this.#threadId,
         initialMessages: this.#initialMessages,
       });
@@ -855,7 +891,7 @@ export class AgUiChat extends HTMLElement {
       this.#streamingBubble = this.appendMessage(MESSAGE_ROLE.ASSISTANT, "");
       this.#streamDeltas = 0;
     }
-    this.#streamingBubble.innerHTML = renderMarkdown(buffer);
+    this.#streamingBubble.innerHTML = renderMarkdown(buffer, { allowImages: this.allowImages });
     this.#messages.scrollTop = this.#messages.scrollHeight;
     return this.#streamingBubble;
   }
@@ -871,10 +907,16 @@ export class AgUiChat extends HTMLElement {
     if (existing !== undefined) {
       return existing;
     }
-    // Prefer the tool's own `x-summary`; fall back to the `toolSummaries` map
-    // for server-side tools whose schema never reached the browser.
+    // Prefer the tool's own `x-summary`; then an explicit `toolSummaries`
+    // entry; then the fetched server catalog (`data-tools-url`). All cover
+    // server-side tools whose schema never reached the browser.
     const labelled = this.#resolveTool(call.name)?.parameters[X_SUMMARY_KEY];
-    const summary = typeof labelled === "string" ? labelled : this.toolSummaries[call.name];
+    const summary =
+      typeof labelled === "string"
+        ? labelled
+        : (this.toolSummaries[call.name] ??
+          this.#toolCatalog[call.name] ??
+          prettifyToolName(call.name));
     const card = new ToolCallCard(call.name, call.args, this.toolDisplay, summary);
     this.#toolCards.set(call.id, card);
     this.#messages.appendChild(card.element);

package/src/core/create_http_agent.ts

@@ -5,6 +5,15 @@ import type { Message } from "@ag-ui/core";
 export interface HttpAgentOptions {
   endpoint: string;
   headers?: Record<string, string>;
+  /**
+   * Live header source, re-read on **every** request. `HttpAgent` bakes the
+   * static `headers` into its constructor and the element caches the agent
+   * for the whole conversation — so a rotated token (CSRF, short-lived JWT)
+   * would otherwise never reach the agent endpoint and a long session 401s
+   * mid-conversation. When set, the fetch wrapper overlays these values on
+   * each call; `headers` still seeds the initial/static configuration.
+   */
+  getHeaders?: () => Record<string, string>;
   /** Stable conversation id, so the agent's runs share a thread. */
   threadId?: string;
   /** Rehydrated history to seed the agent with (durable conversation). */
@@ -25,8 +34,20 @@ export function createHttpAgent(options: HttpAgentOptions): AbstractAgent {
     // HttpAgent invokes its configured fetch as a method (`this.fetch(...)`),
     // which would rebind the global `fetch` to the agent instance and trigger
     // "Illegal invocation" in browsers. Wrap it so `fetch` is always called as
-    // a free function with the correct receiver.
-    fetch: (url, init) => fetch(url, init),
+    // a free function with the correct receiver. The wrapper also overlays
+    // `getHeaders()` per request, so header rotation (CSRF, short-lived JWT)
+    // reaches the stream even though the agent instance is cached.
+    fetch: (url, init) => {
+      const fresh = options.getHeaders?.();
+      if (fresh === undefined) {
+        return fetch(url, init);
+      }
+      const headers = new Headers(init?.headers);
+      for (const [name, value] of Object.entries(fresh)) {
+        headers.set(name, value);
+      }
+      return fetch(url, { ...init, headers });
+    },
     // Spread conditionally: under `exactOptionalPropertyTypes` an explicit
     // `undefined` is not assignable to these optional config fields.
     ...(options.threadId !== undefined ? { threadId: options.threadId } : {}),

package/src/index.ts

@@ -71,6 +71,7 @@ export { type ClientTool, ClientToolRegistry } from "./tools/client_tool_registr
 export { isDestructive } from "./tools/is_destructive.js";
 export { isNavigates } from "./tools/is_navigates.js";
 export { createPageMapContext, type PageMap } from "./tools/page_map.js";
+export { parseToolCatalog, type ToolCatalogEntry } from "./tools/parse_tool_catalog.js";
 export {
   createRouteTools,
   type Route,
@@ -79,7 +80,8 @@ export {
 } from "./tools/route_map.js";
 export { createStateHookTools, type StateHook } from "./tools/state_hook.js";
 export { type ConfirmationRequest, requestConfirmation } from "./ui/confirmation_card.js";
-export { renderMarkdown } from "./ui/render_markdown.js";
+export { prettifyToolName } from "./ui/prettify_tool_name.js";
+export { type RenderMarkdownOptions, renderMarkdown } from "./ui/render_markdown.js";
 export {
   type SettledStatus,
   ToolCallCard,

package/src/tools/parse_tool_catalog.ts

@@ -0,0 +1,36 @@
+/**
+ * One entry in the server-tool catalog served by django-ag-ui's `tools/`
+ * endpoint and fetched via the `data-tools-url` attribute.
+ */
+export interface ToolCatalogEntry {
+  /** The tool's wire name (matches the name in `TOOL_CALL_START`). */
+  readonly name: string;
+  /** A friendly card label for the tool. */
+  readonly summary: string;
+  /** Optional longer blurb (e.g. for a future tooltip). */
+  readonly description?: string;
+}
+
+/**
+ * Parse a fetched tool catalog into a `name → summary` map, skipping any entry
+ * that isn't a `{ name: string, summary: string }` object. Tolerant by design:
+ * a malformed payload yields an empty map rather than throwing.
+ */
+export function parseToolCatalog(data: unknown): Record<string, string> {
+  const out: Record<string, string> = {};
+  if (!Array.isArray(data)) {
+    return out;
+  }
+  for (const entry of data) {
+    if (entry === null || typeof entry !== "object") {
+      continue;
+    }
+    const record = entry as Record<string, unknown>;
+    const name = record["name"];
+    const summary = record["summary"];
+    if (typeof name === "string" && typeof summary === "string") {
+      out[name] = summary;
+    }
+  }
+  return out;
+}

package/src/ui/prettify_tool_name.ts

@@ -0,0 +1,16 @@
+/**
+ * Prettify a raw tool name for display: separators become spaces and the
+ * first letter is capitalised — `list_projects` → "List projects",
+ * `invoices.retrieve` → "Invoices retrieve".
+ *
+ * Final fallback of the tool-card label chain (`x-summary` →
+ * `toolSummaries` → fetched catalog → this). Purely cosmetic: the original
+ * name still rides on the card's dataset for debugging.
+ */
+export function prettifyToolName(name: string): string {
+  const spaced = name.replace(/[._-]+/g, " ").trim();
+  if (spaced === "") {
+    return name;
+  }
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}

package/src/ui/render_markdown.ts

@@ -1,13 +1,22 @@
 import DOMPurify from "dompurify";
-import { marked } from "marked";
+import { Marked } from "marked";
 
-// GitHub-flavoured markdown with single-newline line breaks (chat-like).
-marked.setOptions({ gfm: true, breaks: true });
+// Local parser instance so configuration never leaks into the shared `marked`
+// singleton (a host app's deduped copy keeps its own options). GitHub-flavoured
+// markdown with single-newline line breaks (chat-like). Constructed once at
+// module scope — configured here and never mutated afterwards; per-call
+// construction would re-pay setup on every streaming re-render.
+const parser = new Marked({ gfm: true, breaks: true });
 
 // Conservative allowlist for assistant chat content: inline emphasis, code,
-// lists, quotes, headings, links, tables, and images. Deliberately excludes
-// `iframe`, `style`, and any scripting — rendering untrusted model/tool output
-// as HTML is an XSS surface, so the sanitiser is the load-bearing safety net.
+// lists, quotes, headings, links, and tables. Deliberately excludes `iframe`,
+// `style`, and any scripting — rendering untrusted model/tool output as HTML
+// is an XSS surface, so the sanitiser is the load-bearing safety net.
+//
+// `img` is excluded by default: a model-controlled `<img src="https://...">`
+// is fetched by the browser with **no user interaction**, which turns any
+// prompt-injected page data into a zero-click exfiltration channel. Hosts
+// that trust their content can opt back in via `allowImages`.
 const ALLOWED_TAGS = [
   "a",
   "p",
@@ -39,10 +48,23 @@ const ALLOWED_TAGS = [
   "tr",
   "th",
   "td",
-  "img",
 ];
 
-const ALLOWED_ATTR = ["href", "title", "class", "src", "alt", "width", "height"];
+const ALLOWED_ATTR = ["href", "title", "class"];
+
+// The image-permitting variants used when the host opts in.
+const ALLOWED_TAGS_WITH_IMAGES = [...ALLOWED_TAGS, "img"];
+const ALLOWED_ATTR_WITH_IMAGES = [...ALLOWED_ATTR, "src", "alt", "width", "height"];
+
+/** Options for {@link renderMarkdown}. */
+export interface RenderMarkdownOptions {
+  /**
+   * Permit `<img>` tags (and their `src`/`alt`/`width`/`height` attributes)
+   * in the sanitised output. **Off by default** — see the allowlist note on
+   * the exfiltration risk. Only enable for trusted content sources.
+   */
+  readonly allowImages?: boolean;
+}
 
 /**
  * Render markdown (and any embedded raw HTML) to a sanitised HTML string.
@@ -55,9 +77,13 @@ const ALLOWED_ATTR = ["href", "title", "class", "src", "alt", "width", "height"]
  * The result is trimmed so a single-paragraph message round-trips to clean
  * `textContent` (no trailing newline from the wrapping `<p>`).
  */
-export function renderMarkdown(text: string): string {
-  const rendered = marked.parse(text, { async: false });
-  const clean = DOMPurify.sanitize(rendered, { ALLOWED_TAGS, ALLOWED_ATTR });
+export function renderMarkdown(text: string, options?: RenderMarkdownOptions): string {
+  const allowImages = options?.allowImages === true;
+  const rendered = parser.parse(text, { async: false });
+  const clean = DOMPurify.sanitize(rendered, {
+    ALLOWED_TAGS: allowImages ? ALLOWED_TAGS_WITH_IMAGES : ALLOWED_TAGS,
+    ALLOWED_ATTR: allowImages ? ALLOWED_ATTR_WITH_IMAGES : ALLOWED_ATTR,
+  });
   const template = document.createElement("template");
   template.innerHTML = clean;
   for (const anchor of template.content.querySelectorAll("a[href]")) {

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.2.2";
+export const VERSION: string = "0.3.1";