@runtypelabs/persona 4.11.0 → 4.12.0

package/dist/theme-editor.d.cts

@@ -4447,6 +4447,8 @@ type AgentWidgetToolCallConfig$1 = {
     }) => HTMLElement | string | null;
     /**
      * Override the summary content for grouped consecutive tool-call containers.
+     * In `groupedMode: "summary"`, the summary owns the visible row starting
+     * with the first tool so its DOM stays stable as more calls arrive.
      * Return `null` to fall back to the built-in `Called [x] tools` summary.
      */
     renderGroupedSummary?: (context: {

package/dist/theme-editor.d.ts

@@ -4447,6 +4447,8 @@ type AgentWidgetToolCallConfig$1 = {
     }) => HTMLElement | string | null;
     /**
      * Override the summary content for grouped consecutive tool-call containers.
+     * In `groupedMode: "summary"`, the summary owns the visible row starting
+     * with the first tool so its DOM stays stable as more calls arrive.
      * Return `null` to fall back to the built-in `Called [x] tools` summary.
      */
     renderGroupedSummary?: (context: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/codegen.test.ts

@@ -23,6 +23,49 @@ describe("codegen subpath", () => {
     expect(code).not.toContain("@latest");
   });
 
+  describe("cdnBase option", () => {
+    const cdnBase = "https://cdn.runtype.com/persona/latest";
+
+    it("emits the custom base in every script format", () => {
+      expect(fromSubpath(config, "script-installer", { cdnBase })).toContain(
+        `src="${cdnBase}/install.global.js"`
+      );
+      const manual = fromSubpath(config, "script-manual", { cdnBase });
+      expect(manual).toContain(`href="${cdnBase}/widget.css"`);
+      expect(manual).toContain(`src="${cdnBase}/index.global.js"`);
+      expect(fromSubpath(config, "script-advanced", { cdnBase })).toContain(
+        `var CDN_BASE = '${cdnBase}';`
+      );
+    });
+
+    it("tolerates a trailing slash", () => {
+      const code = fromSubpath(config, "script-installer", { cdnBase: `${cdnBase}/` });
+      expect(code).toContain(`src="${cdnBase}/install.global.js"`);
+    });
+
+    it("percent-encodes characters that could break the emitted JS/HTML contexts", () => {
+      const hostile = "https://cdn.example.com/x'\"\\`/persona";
+      const encoded = "https://cdn.example.com/x%27%22%5C%60/persona";
+      // script-advanced emits into a single-quoted JS literal
+      expect(fromSubpath(config, "script-advanced", { cdnBase: hostile })).toContain(
+        `var CDN_BASE = '${encoded}';`
+      );
+      // script-installer / script-manual emit into double-quoted HTML attributes
+      expect(fromSubpath(config, "script-installer", { cdnBase: hostile })).toContain(
+        `src="${encoded}/install.global.js"`
+      );
+      expect(fromSubpath(config, "script-manual", { cdnBase: hostile })).toContain(
+        `href="${encoded}/widget.css"`
+      );
+    });
+
+    it("leaves no jsDelivr URL behind when a custom base is set", () => {
+      for (const format of ["script-installer", "script-manual", "script-advanced"] as const) {
+        expect(fromSubpath(config, format, { cdnBase })).not.toContain("jsdelivr");
+      }
+    });
+  });
+
   describe("mount target option", () => {
     it("defaults to body when no target is given", () => {
       expect(fromSubpath(config, "react-component")).toContain("target: 'body'");

package/src/install.test.ts

@@ -343,6 +343,89 @@ describe("install.ts: deferral gate", () => {
   });
 });
 
+describe("install.ts: CDN base derivation", () => {
+  // The installer captures document.currentScript.src synchronously at module
+  // evaluation; fake it with an own-property override (jsdom's getter lives on
+  // the prototype, so a configurable instance property shadows it cleanly).
+  function setCurrentScript(src: string) {
+    const script = document.createElement("script");
+    script.src = src;
+    Object.defineProperty(document, "currentScript", { value: script, configurable: true });
+  }
+
+  afterEach(() => {
+    delete (document as any).currentScript;
+  });
+
+  /**
+   * Run the deferred path with NO bundles provided so loadCSS/loadLauncher
+   * inject real (never-resolving in jsdom) elements whose URLs we can read.
+   */
+  async function installedUrls(installerOptions: any) {
+    await install({ config: { apiUrl: "/api", launcher: { enabled: true } }, ...installerOptions });
+    await flush();
+    const css = document.head.querySelector("link[rel=\"stylesheet\"][data-persona]") as HTMLLinkElement | null;
+    const scripts = Array.from(document.head.querySelectorAll("script")).map((s) => s.src);
+    return { cssHref: css?.href ?? null, scripts };
+  }
+
+  it("derives asset URLs from the installer's own script directory (first-party CDN)", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    const { cssHref, scripts } = await installedUrls({});
+    expect(cssHref).toBe("https://cdn.runtype.com/persona/latest/widget.css");
+    expect(scripts).toContain("https://cdn.runtype.com/persona/latest/launcher.global.js");
+  });
+
+  it("keeps npm-CDN siblings on the installer's own pinned range (no @latest skew)", async () => {
+    setCurrentScript("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@4/dist/install.global.js");
+    const { cssHref, scripts } = await installedUrls({});
+    expect(cssHref).toBe("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@4/dist/widget.css");
+    expect(scripts).toContain("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@4/dist/launcher.global.js");
+  });
+
+  it("the full bundle URL follows the installer directory on the eager path", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    markCssLoaded();
+    await install({ config: { apiUrl: "/api", launcher: { enabled: false } } });
+    await flush();
+    const scripts = Array.from(document.head.querySelectorAll("script")).map((s) => s.src);
+    expect(scripts).toContain("https://cdn.runtype.com/persona/latest/index.global.js");
+  });
+
+  it("falls back to jsDelivr@latest when currentScript is unavailable", async () => {
+    // No setCurrentScript: module/inline contexts have no script src.
+    const { cssHref } = await installedUrls({});
+    expect(cssHref).toBe("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@latest/dist/widget.css");
+  });
+
+  it("falls back to the npm CDN for a non-http(s) installer source", async () => {
+    setCurrentScript("data:text/javascript,void%200");
+    const { cssHref } = await installedUrls({});
+    expect(cssHref).toBe("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@latest/dist/widget.css");
+  });
+
+  it("an explicit `version` opts back into npm-CDN URLs even when the src is derivable", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    const { cssHref } = await installedUrls({ version: "1.2.3" });
+    expect(cssHref).toBe("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@1.2.3/dist/widget.css");
+  });
+
+  it("an explicit `cdn` opts back into npm-CDN URLs even when the src is derivable", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    const { cssHref } = await installedUrls({ cdn: "unpkg" });
+    expect(cssHref).toBe("https://unpkg.com/@runtypelabs/persona@latest/dist/widget.css");
+  });
+
+  it("explicit cssUrl + jsUrl win over the derived installer base", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    const { cssHref } = await installedUrls({
+      cssUrl: "https://assets.example.com/persona/widget.css",
+      jsUrl: "https://assets.example.com/persona/index.global.js",
+    });
+    expect(cssHref).toBe("https://assets.example.com/persona/widget.css");
+  });
+});
+
 describe("install.ts: onError", () => {
   it("fires onError with phase 'init' and dispatches persona:error when initialization throws", async () => {
     markCssLoaded();

package/src/install.ts

@@ -7,6 +7,9 @@
 export {};
 
 interface SiteAgentInstallConfig {
+  // Setting `version` or `cdn` explicitly opts into npm-CDN asset URLs
+  // (jsDelivr/unpkg). When neither is set, assets load from the directory the
+  // installer script itself was served from — see getCdnBase().
   version?: string;
   cdn?: "unpkg" | "jsdelivr";
   cssUrl?: string;
@@ -137,6 +140,10 @@ declare global {
   // Get config from script attributes (must be called synchronously during script execution)
   const scriptConfig = getConfigFromScript();
 
+  // The installer's own URL, captured now because document.currentScript is
+  // null once synchronous execution ends (and always inside modules).
+  const installerSrc = (document.currentScript as HTMLScriptElement | null)?.src || "";
+
   // Merge script attributes with window config (script attributes take precedence)
   const windowConfig: SiteAgentInstallConfig = window.siteAgentConfig || {};
   const config: SiteAgentInstallConfig = { ...windowConfig, ...scriptConfig };
@@ -194,7 +201,28 @@ declare global {
   const cdn = config.cdn || "jsdelivr";
   const autoInit = config.autoInit !== false; // Default to true
 
-  // Determine CDN base URL
+  // Directory the installer itself was served from. Every published layout
+  // (npm CDN dist/, first-party CDN, self-hosted copies) keeps the sibling
+  // assets next to install.global.js, so this base is valid wherever the
+  // installer loaded from — and always satisfies the same CSP/origin rules
+  // that let the installer through. Non-http(s) sources (inline, blob:) and
+  // module contexts (no currentScript) yield null.
+  const getInstallerBase = (): string | null => {
+    if (!installerSrc) return null;
+    try {
+      const url = new URL(installerSrc, document.baseURI);
+      if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+      return url.origin + url.pathname.slice(0, url.pathname.lastIndexOf("/"));
+    } catch {
+      return null;
+    }
+  };
+
+  // Determine CDN base URL. Precedence:
+  //   1. explicit cssUrl + jsUrl
+  //   2. explicit `cdn` / `version` → npm CDN construction
+  //   3. the installer's own directory (default)
+  //   4. npm CDN construction (currentScript unavailable)
   const getCdnBase = () => {
     // For a custom URL override, derive the sibling launcher URL when the
     // override mirrors the dist layout (…/index.global.js → …/launcher.global.js)
@@ -209,8 +237,26 @@ declare global {
       };
     }
 
+    // Default: load assets from wherever the installer was served, so a page
+    // whose CSP allows only its own CDN (e.g. cdn.runtype.com) never has
+    // sibling requests fan out to a third-party host. An explicit `cdn` or
+    // `version` keeps the documented npm-CDN behavior.
+    if (!config.cdn && !config.version) {
+      const selfBase = getInstallerBase();
+      if (selfBase) {
+        return {
+          cssUrl: `${selfBase}/widget.css`,
+          jsUrl: `${selfBase}/index.global.js`,
+          launcherUrl: `${selfBase}/launcher.global.js` as string | null,
+        };
+      }
+    }
+
     const packageName = "@runtypelabs/persona";
-    const basePath = `/npm/${packageName}@${version}/dist`;
+    // jsDelivr namespaces npm packages under /npm/; unpkg serves them at the root.
+    const basePath = cdn === "unpkg"
+      ? `/${packageName}@${version}/dist`
+      : `/npm/${packageName}@${version}/dist`;
     const host = cdn === "unpkg" ? "https://unpkg.com" : "https://cdn.jsdelivr.net";
 
     return {

package/src/types.ts

@@ -3478,6 +3478,8 @@ export type AgentWidgetToolCallConfig = {
   }) => HTMLElement | string | null;
   /**
    * Override the summary content for grouped consecutive tool-call containers.
+   * In `groupedMode: "summary"`, the summary owns the visible row starting
+   * with the first tool so its DOM stays stable as more calls arrive.
    * Return `null` to fall back to the built-in `Called [x] tools` summary.
    */
   renderGroupedSummary?: (context: {

package/src/ui.tool-display.test.ts

@@ -31,7 +31,10 @@ const injectToolMessage = (
       id,
       role: "assistant",
       content: "",
-      createdAt: new Date().toISOString(),
+      // Real stream updates reuse the original tool message's timeline fields.
+      // Keep them stable here so an upsert does not reorder the group.
+      createdAt: "2026-01-01T00:00:00.000Z",
+      sequence: Number(id.match(/(\d+)$/)?.[1] ?? 0),
       streaming: status !== "complete",
       variant: "tool",
       toolCall: {
@@ -76,6 +79,7 @@ const injectReasoningMessage = (
 
 describe("createAgentExperience tool call display modes", () => {
   beforeEach(() => {
+    window.localStorage.clear();
     vi.stubGlobal("requestAnimationFrame", (cb: (time: number) => void) => {
       cb(0);
       return 1;
@@ -157,6 +161,48 @@ describe("createAgentExperience tool call display modes", () => {
     controller.destroy();
   });
 
+  it("preserves a custom collapsed summary across tool chunk updates", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          grouped: false,
+          expandable: false,
+          loadingAnimation: "none",
+        },
+      },
+      toolCall: {
+        renderCollapsedSummary: ({ toolCall }: any) => {
+          const summary = document.createElement("span");
+          summary.setAttribute("data-test-collapsed-summary", "true");
+          summary.textContent = `${toolCall.name}:${toolCall.status}`;
+          return summary;
+        },
+      },
+    } as any);
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Run SQL",
+      chunks: ["starting"],
+    });
+    const bubble = mount.querySelector("#bubble-tool-1");
+    const summary = mount.querySelector("[data-test-collapsed-summary='true']");
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Run SQL",
+      chunks: ["starting", "received rows"],
+    });
+
+    expect(mount.querySelector("#bubble-tool-1")).toBe(bubble);
+    expect(mount.querySelector("[data-test-collapsed-summary='true']")).toBe(summary);
+
+    controller.destroy();
+  });
+
   it("renders a collapsed preview for active reasoning rows when enabled", () => {
     const mount = createMount();
     const controller = createAgentExperience(mount, {
@@ -202,6 +248,41 @@ describe("createAgentExperience tool call display modes", () => {
     controller.destroy();
   });
 
+  it("preserves tool rows when a standalone row becomes a stacked group", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          grouped: true,
+          groupedMode: "stack",
+        },
+      },
+    } as any);
+
+    injectToolMessage(controller, { id: "tool-1", name: "Inspect data" });
+
+    const firstRow = mount.querySelector("#wrapper-tool-1");
+    const firstBubble = mount.querySelector("#bubble-tool-1");
+    expect(firstRow).not.toBeNull();
+    expect(firstBubble).not.toBeNull();
+
+    injectToolMessage(controller, { id: "tool-2", name: "Run analysis" });
+
+    const groupRow = mount.querySelector("[data-persona-tool-group-row='true']");
+    expect(groupRow).not.toBeNull();
+    expect(mount.querySelector("#wrapper-tool-1")).toBe(firstRow);
+    expect(mount.querySelector("#bubble-tool-1")).toBe(firstBubble);
+
+    injectToolMessage(controller, { id: "tool-3", name: "Build chart" });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("#wrapper-tool-1")).toBe(firstRow);
+    expect(mount.querySelector("#bubble-tool-1")).toBe(firstBubble);
+
+    controller.destroy();
+  });
+
   it("keeps tool calls grouped across reasoning that is hidden", () => {
     const mount = createMount();
     const controller = createAgentExperience(mount, {
@@ -226,30 +307,118 @@ describe("createAgentExperience tool call display modes", () => {
     controller.destroy();
   });
 
-  it("can render a grouped tool sequence as one summary item", () => {
+  it("keeps a summary group's visible DOM stable from the first tool onward", () => {
     const mount = createMount();
+    const renderedSummaries: HTMLElement[] = [];
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",
       launcher: { enabled: false },
       features: {
         toolCallDisplay: {
+          collapsedMode: "tool-name",
+          activePreview: false,
           grouped: true,
           groupedMode: "summary",
+          expandable: false,
+          loadingAnimation: "shimmer-color",
         },
       },
       toolCall: {
-        renderGroupedSummary: () => "Analysis ready",
+        renderCollapsedSummary: ({ message, toolCall }: any) => {
+          const step = document.createElement("span");
+          step.setAttribute("data-test-collapsed-step", message.id);
+          step.textContent = `${toolCall.name}:${toolCall.status}`;
+          return step;
+        },
+        renderGroupedSummary: ({ toolCalls }: any) => {
+          const list = document.createElement("span");
+          list.setAttribute("data-test-activity-list", "true");
+          toolCalls.forEach((toolCall: { id: string; status: string }) => {
+            const step = document.createElement("span");
+            step.setAttribute("data-test-activity-step", toolCall.id);
+            step.textContent = `${toolCall.id}:${toolCall.status}`;
+            list.appendChild(step);
+          });
+          renderedSummaries.push(list);
+          return list;
+        },
       },
     } as any);
 
-    injectToolMessage(controller, { id: "tool-1", name: "Inspect data", status: "complete" });
-    injectToolMessage(controller, { id: "tool-2", name: "Run analysis", status: "complete" });
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Inspect data",
+      status: "pending",
+    });
 
-    const group = mount.querySelector("[data-persona-tool-group='true']");
-    expect(group?.textContent).toContain("Analysis ready");
-    expect(group?.querySelector("[data-persona-tool-group-item]")).toBeNull();
+    const groupRow = mount.querySelector("[data-persona-tool-group-row='true']");
+    const activityList = mount.querySelector("[data-test-activity-list='true']");
+    const firstStep = mount.querySelector("[data-test-activity-step='tool-1']");
+    expect(groupRow).not.toBeNull();
+    expect(groupRow?.getAttribute("data-wrapper-id")).toBe("tool-group-tool-1");
+    expect(activityList).not.toBeNull();
+    expect(firstStep).not.toBeNull();
     expect(mount.querySelector(".persona-tool-bubble")).toBeNull();
 
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Inspect data",
+      status: "running",
+      chunks: ["starting"],
+    });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Inspect data",
+      chunks: ["starting", "received rows"],
+    });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+
+    injectToolMessage(controller, { id: "tool-2", name: "Run analysis" });
+
+    const secondStep = mount.querySelector("[data-test-activity-step='tool-2']");
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+    expect(secondStep).not.toBeNull();
+    expect(mount.querySelector(".persona-tool-bubble")).toBeNull();
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Inspect data",
+      status: "complete",
+      chunks: ["starting", "received rows"],
+    });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+    expect(mount.querySelector("[data-test-activity-step='tool-2']")).toBe(secondStep);
+    expect(firstStep?.textContent).toBe("tool-1:complete");
+    expect(secondStep?.textContent).toBe("tool-2:running");
+
+    injectToolMessage(controller, {
+      id: "tool-2",
+      name: "Run analysis",
+      status: "complete",
+    });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+    expect(mount.querySelector("[data-test-activity-step='tool-2']")).toBe(secondStep);
+    expect(secondStep?.textContent).toBe("tool-2:complete");
+    expect(mount.querySelector(".persona-tool-bubble")).toBeNull();
+
+    // The callback can return a fresh tree on every status update; idiomorph
+    // must reconcile it into the existing visible summary rather than mounting
+    // those detached callback results.
+    expect(renderedSummaries.length).toBeGreaterThan(1);
+    expect(renderedSummaries).not.toContain(activityList);
+
     controller.destroy();
   });
 });

package/src/ui.ts

@@ -4817,6 +4817,8 @@ export const createAgentExperience = (
     if (config.features?.toolCallDisplay?.grouped) {
       const toolGroups: AgentWidgetMessage[][] = [];
       let currentGroup: AgentWidgetMessage[] = [];
+      const summaryOnly =
+        config.features.toolCallDisplay.groupedMode === "summary";
 
       messages.forEach((message) => {
         if (message.variant === "tool" && message.toolCall && showToolCalls) {
@@ -4829,16 +4831,20 @@ export const createAgentExperience = (
         if (message.variant === "reasoning" && !showReasoning) {
           return;
         }
-        if (currentGroup.length > 1) {
+        // Summary mode owns the visible row from the first tool onward. Waiting
+        // for a second tool would replace the standalone tool bubble with a new
+        // group row, restarting custom activity animations and transiently
+        // dropping interactive DOM state during the handoff.
+        if (currentGroup.length > 1 || (summaryOnly && currentGroup.length > 0)) {
           toolGroups.push(currentGroup);
         }
         currentGroup = [];
       });
-      if (currentGroup.length > 1) {
+      if (currentGroup.length > 1 || (summaryOnly && currentGroup.length > 0)) {
         toolGroups.push(currentGroup);
       }
 
-      toolGroups.forEach((group, groupIndex) => {
+      toolGroups.forEach((group) => {
         const wrappers = group
           .map((groupMessage) =>
             Array.from(tempContainer.children).find(
@@ -4849,12 +4855,12 @@ export const createAgentExperience = (
           )
           .filter((wrapper): wrapper is HTMLElement => Boolean(wrapper));
 
-        if (wrappers.length < 2) {
+        if (wrappers.length < (summaryOnly ? 1 : 2)) {
           return;
         }
 
         const groupWrapper = createMessageRow(
-          `tool-group-${groupIndex}-${group[0].id}`,
+          `tool-group-${group[0].id}`,
           "assistant"
         );
         groupWrapper.setAttribute("data-persona-tool-group-row", "true");
@@ -4867,8 +4873,9 @@ export const createAgentExperience = (
         const summary = document.createElement("div");
         summary.className =
           "persona-tool-group-summary persona-text-xs persona-text-persona-muted";
+        summary.id = `tool-group-summary-${group[0].id}`;
 
-        const defaultSummary = `Called ${group.length} tools`;
+        const defaultSummary = `Called ${group.length} ${group.length === 1 ? "tool" : "tools"}`;
         const renderedSummary = config.toolCall?.renderGroupedSummary?.({
           messages: group,
           toolCalls: group
@@ -4883,8 +4890,9 @@ export const createAgentExperience = (
 
         const stack = document.createElement("div");
         stack.className = "persona-tool-group-stack persona-flex persona-flex-col";
+        stack.id = `tool-group-stack-${group[0].id}`;
+        stack.setAttribute("data-persona-tool-group-stack", "true");
 
-        const summaryOnly = config.features?.toolCallDisplay?.groupedMode === "summary";
         groupContainer.appendChild(summary);
         if (!summaryOnly) {
           groupContainer.appendChild(stack);

package/src/utils/code-generators.ts

@@ -151,8 +151,33 @@ export type CodeGeneratorOptions = {
    * @default "body"
    */
   target?: string;
+
+  /**
+   * Base URL of the directory holding the widget assets (install.global.js,
+   * index.global.js, widget.css) for the script formats (script-installer,
+   * script-manual, script-advanced). Pass a first-party base such as
+   * "https://cdn.runtype.com/persona/latest" when the embedding page's CSP
+   * does not allow third-party CDNs. A trailing slash is tolerated.
+   * @default the jsDelivr dist directory pinned to this package version
+   */
+  cdnBase?: string;
 };
 
+/**
+ * Asset directory for script formats: explicit cdnBase or the version-pinned
+ * jsDelivr dist. The base is emitted into single-quoted JS literals AND
+ * double-quoted HTML attributes, so percent-encode the characters that could
+ * break out of either context. All of them are illegal unencoded in a URL
+ * (RFC 3986), so encoding never changes the meaning of a valid base URL.
+ */
+function resolveCdnBase(options?: CodeGeneratorOptions): string {
+  const base = options?.cdnBase
+    ?.trim()
+    .replace(/\/+$/, "")
+    .replace(/[\\'"<>`]/g, (ch) => `%${ch.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`);
+  return base || `https://cdn.jsdelivr.net/npm/@runtypelabs/persona@${VERSION}/dist`;
+}
+
 // Internal type for normalized hooks (always strings)
 type NormalizedHooks = {
   [K in keyof CodeGeneratorHooks]: string | undefined;
@@ -1402,7 +1427,7 @@ function generateScriptInstallerCode(config: any, options?: CodeGeneratorOptions
   // Escape single quotes in JSON for HTML attribute
   const configJson = JSON.stringify(payload, null, 0).replace(/'/g, "&#39;");
 
-  return `<script src="https://cdn.jsdelivr.net/npm/@runtypelabs/persona@${VERSION}/dist/install.global.js" data-config='${configJson}'></script>`;
+  return `<script src="${resolveCdnBase(options)}/install.global.js" data-config='${configJson}'></script>`;
 }
 
 function generateScriptManualCode(config: any, options?: CodeGeneratorOptions): string {
@@ -1410,12 +1435,13 @@ function generateScriptManualCode(config: any, options?: CodeGeneratorOptions):
   const parserType = getParserTypeFromConfig(config as AgentWidgetConfig);
   const shouldEmitParserType = parserType !== "plain";
 
+  const cdnBase = resolveCdnBase(options);
   const lines: string[] = [
     "<!-- Load CSS -->",
-    `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@runtypelabs/persona@${VERSION}/dist/widget.css" />`,
+    `<link rel="stylesheet" href="${cdnBase}/widget.css" />`,
     "",
     "<!-- Load JavaScript -->",
-    `<script src="https://cdn.jsdelivr.net/npm/@runtypelabs/persona@${VERSION}/dist/index.global.js"></script>`,
+    `<script src="${cdnBase}/index.global.js"></script>`,
     "",
     "<!-- Initialize widget -->",
     "<script>",
@@ -1565,7 +1591,7 @@ function generateScriptAdvancedCode(config: any, options?: CodeGeneratorOptions)
     `  var CONFIG = ${configJson.split('\n').map((line, i) => i === 0 ? line : '  ' + line).join('\n')};`,
     "",
     "  // Constants",
-    `  var CDN_BASE = 'https://cdn.jsdelivr.net/npm/@runtypelabs/persona@${VERSION}/dist';`,
+    `  var CDN_BASE = '${resolveCdnBase(options)}';`,
     "  var STORAGE_KEY = 'chat-widget-state';",
     "  var PROCESSED_ACTIONS_KEY = 'chat-widget-processed-actions';",
     "",