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

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.3.0",
+  "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

@@ -19,6 +19,7 @@ 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";
@@ -72,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;
 
@@ -569,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;
     }
@@ -700,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,
       });
@@ -878,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;
   }
@@ -901,7 +914,9 @@ export class AgUiChat extends HTMLElement {
     const summary =
       typeof labelled === "string"
         ? labelled
-        : (this.toolSummaries[call.name] ?? this.#toolCatalog[call.name]);
+        : (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

@@ -80,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/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.3.0";
+export const VERSION: string = "0.3.1";