@runtypelabs/persona 4.32.0 → 4.32.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.32.0",
+  "version": "4.32.2",
   "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/index-global.ts

@@ -37,12 +37,13 @@ export type { StreamAnimationPlugin, StreamAnimationContext } from "./types";
 // ---------------------------------------------------------------------------
 
 import { setWebMcpPolyfillLoader } from "./webmcp-bridge";
+import { pinCdnRelease } from "./utils/cdn-release";
 
 // Capture at module-evaluation time: `document.currentScript` is null once
 // execution leaves the script's initial synchronous run.
 const widgetScriptSrc: string | null =
   typeof document !== "undefined"
-    ? ((document.currentScript as HTMLScriptElement | null)?.src ?? null)
+    ? pinCdnRelease((document.currentScript as HTMLScriptElement | null)?.src ?? "") || null
     : null;
 
 /**

package/src/install.test.ts

@@ -10,6 +10,7 @@
 // `vi.runAllTimersAsync()` to drive it forward deterministically.
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { version } from "../package.json";
 
 const PERSONA_EVENTS = [
   "persona:script-load",
@@ -464,11 +465,11 @@ describe("install.ts: CDN base derivation", () => {
     return { cssHref: css?.href ?? null, scripts };
   }
 
-  it("derives asset URLs from the installer's own script directory (first-party CDN)", async () => {
+  it("pins first-party latest installer assets to the embedded release", 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");
+    expect(cssHref).toBe(`https://cdn.runtype.com/persona/${version}/widget.css`);
+    expect(scripts).toContain(`https://cdn.runtype.com/persona/${version}/launcher.global.js`);
   });
 
   it("keeps npm-CDN siblings on the installer's own pinned range (no @latest skew)", async () => {
@@ -478,13 +479,13 @@ describe("install.ts: CDN base derivation", () => {
     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 () => {
+  it("pins the full bundle on the eager first-party latest 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");
+    expect(scripts).toContain(`https://cdn.runtype.com/persona/${version}/index.global.js`);
   });
 
   it("falls back to jsDelivr@latest when currentScript is unavailable", async () => {

package/src/install.ts

@@ -4,7 +4,7 @@
  * if configuration is provided via window.siteAgentConfig
  */
 
-export {};
+import { pinCdnRelease } from "./utils/cdn-release";
 
 import type { BrandConfig } from "./types/theme";
 import { delayInstallLoading } from "./utils/install-loading";
@@ -201,7 +201,7 @@ declare global {
   const getInstallerBase = (): string | null => {
     if (!installerSrc) return null;
     try {
-      const url = new URL(installerSrc, document.baseURI);
+      const url = new URL(pinCdnRelease(installerSrc), document.baseURI);
       if (url.protocol !== "http:" && url.protocol !== "https:") return null;
       return url.origin + url.pathname.slice(0, url.pathname.lastIndexOf("/"));
     } catch {

package/src/launcher-global.ts

@@ -24,6 +24,7 @@ import { createLauncherSurface } from "./components/launcher";
 import { applyLauncherThemeVariables } from "./utils/theme";
 import { DEFAULT_LAUNCHER_CONFIG, DEFAULT_LAUNCHER_V5 } from "./defaults";
 import { setIconsExtraLoader } from "./icons-extra-loader";
+import { pinCdnRelease } from "./utils/cdn-release";
 import type { AgentWidgetConfig } from "./types";
 
 // ---------------------------------------------------------------------------
@@ -33,7 +34,7 @@ import type { AgentWidgetConfig } from "./types";
 // ---------------------------------------------------------------------------
 const launcherScriptSrc: string | null =
   typeof document !== "undefined"
-    ? ((document.currentScript as HTMLScriptElement | null)?.src ?? null)
+    ? pinCdnRelease((document.currentScript as HTMLScriptElement | null)?.src ?? "") || null
     : null;
 
 setIconsExtraLoader(() => {

package/src/session.test.ts

@@ -1070,6 +1070,47 @@ describe('AgentWidgetSession - dispatch error fallback', () => {
     expect(session.getStatus()).toBe('idle');
   });
 
+  it('does not blame the backend for an internal stream TypeError after a successful response', async () => {
+    const response = new Response('data: {}\n\n', { headers: { 'Content-Type': 'text/event-stream' } });
+    const fault = new TypeError('t.streamGeneration is not a function');
+    vi.spyOn(response.body!, 'getReader').mockImplementation(() => { throw fault; });
+    global.fetch = vi.fn().mockResolvedValue(response);
+    const errors: Error[] = [];
+    const session = new AgentWidgetSession({ apiUrl: 'http://example.invalid/chat' }, {
+      onMessagesChanged: () => {}, onStatusChanged: () => {}, onStreamingChanged: () => {},
+      onError: error => errors.push(error),
+    });
+    await session.sendMessage('Hello');
+    const content = lastAssistantMessage(session)?.content;
+    expect(content).toContain('the chat encountered an unexpected error');
+    expect(content).toContain('t.streamGeneration is not a function');
+    expect(content).not.toContain('backend');
+    expect(content).not.toContain("couldn't reach");
+    expect(errors).toContain(fault);
+    expect(session.isStreaming()).toBe(false);
+  });
+
+  it.each(['Failed to fetch', 'Load failed', 'NetworkError when attempting to fetch resource.', 'fetch failed'])(
+    'recognizes the browser fetch TypeError: %s', async (message) => {
+      failFetchWith(new TypeError(message));
+      const session = new AgentWidgetSession({ apiUrl: 'http://example.invalid/chat' }, {
+        onMessagesChanged: () => {}, onStatusChanged: () => {}, onStreamingChanged: () => {},
+      });
+      await session.sendMessage('Hello');
+      expect(lastAssistantMessage(session)?.content).toContain("I couldn't reach the assistant");
+    },
+  );
+
+  it('describes a server rejection without claiming the server was unreachable', async () => {
+    global.fetch = vi.fn().mockResolvedValue(new Response('unavailable', { status: 503 }));
+    const session = new AgentWidgetSession({ apiUrl: 'http://example.invalid/chat' }, {
+      onMessagesChanged: () => {}, onStatusChanged: () => {}, onStreamingChanged: () => {},
+    });
+    await session.sendMessage('Hello');
+    expect(lastAssistantMessage(session)?.content).toContain("chat service couldn't complete the request");
+    expect(lastAssistantMessage(session)?.content).toContain('_Details: Chat backend request failed: 503_');
+  });
+
   it('uses a static errorMessage override verbatim', async () => {
     failFetchWith(new Error('boom'));
     const session = new AgentWidgetSession(

package/src/session.ts

@@ -265,10 +265,9 @@ export class SessionHistoryError extends Error {
 }
 
 /**
- * Build the user-facing detail shown when a dispatch fails. This fires on real network/server errors
- * (connection refused, CORS, 4xx/5xx, malformed stream): not just an
- * un-wired proxy, so the copy stays honest about the failure and surfaces the
- * underlying reason to help with debugging.
+ * Dispatch can fail in transport, stream parsing, lazy modules or application
+ * callbacks. Only recognized fetch failures should suggest connectivity;
+ * unknown/internal failures must not send users to debug a healthy backend.
  *
  * Callers can override the copy via `config.errorMessage` (a static string or
  * a function of the error). An override that returns an empty string yields ""
@@ -283,9 +282,17 @@ function buildDispatchErrorContent(
   if (typeof override === "string") return override;
   if (typeof override === "function") return override(err);
 
-  const base =
-    "Sorry: I couldn't reach the assistant. The chat service didn't respond. Please check that your proxy or backend is running and reachable, then try again.";
-  return err.message ? `${base}\n\n_Details: ${err.message}_` : base;
+  // Fetch rejects with TypeError too, so the error class cannot distinguish
+  // an offline browser from an internal fault such as a missing function.
+  const detail = err.message.trim();
+  const networkFailure = /^(Failed to fetch|fetch failed|Load failed|NetworkError when attempting to fetch resource\.?)$/i.test(detail);
+  const backendFailure = /^(Chat backend|Agent execution) request failed: \d{3}\b/.test(detail);
+  const base = networkFailure
+    ? "Sorry: I couldn't reach the assistant. Please check your connection and try again."
+    : backendFailure
+      ? "Sorry: the chat service couldn't complete the request. Please try again."
+      : "Sorry: the chat encountered an unexpected error. Please reload the page and try again.";
+  return detail ? `${base}\n\n_Details: ${detail}_` : base;
 }
 
 /**

package/src/styles/widget.css

@@ -6993,6 +6993,18 @@
 .persona-turn-activity-body .persona-tool-bubble.persona-activity-row {
   --persona-activity-height: var(--persona-components-toolBubble-rowHeight, var(--persona-components-activity-rowHeight, 28px));
 }
+[data-persona-defaults="v5"] [data-persona-tool-group-stack] .persona-tool-bubble.persona-activity-row {
+  --persona-activity-height: var(--persona-components-toolBubble-rowHeight, var(--persona-components-activity-rowHeight, 24px));
+}
+[data-persona-defaults="v5"] [data-persona-tool-group-stack] .persona-activity-header:not(.persona-theme-padding) {
+  padding-block: 2px;
+  line-height: max(18px, calc(var(--persona-activity-label-size) * 1.35));
+}
+@media (any-pointer: coarse) {
+  [data-persona-defaults="v5"] [data-persona-tool-group-stack] .persona-tool-bubble.persona-activity-row {
+    --persona-activity-height: var(--persona-components-toolBubble-rowHeight, var(--persona-components-activity-rowHeight, 44px));
+  }
+}
 .persona-turn-activity-body .persona-reasoning-bubble.persona-activity-row {
   --persona-activity-height: var(--persona-components-reasoningBubble-rowHeight, var(--persona-components-activity-rowHeight, 28px));
 }

package/src/utils/brand.test.ts

@@ -73,6 +73,56 @@ describe('brand derivation', () => {
     expect(theme.components?.panel?.modes?.floating?.border).toContain('var(--persona-border)');
     expect(theme.components?.panel?.shadow).toBe(theme.palette?.shadows?.xl);
   });
+  describe.each(['light', 'dark'] as const)('%s message presentation', (colorScheme) => {
+    const elevations = [
+      ['flat', 'none'],
+      ['subtle', '0 2px 8px rgba(0, 0, 0, 0.08)'],
+      ['raised', '0 12px 32px rgba(0, 0, 0, 0.18)'],
+    ] as const;
+    it.each(elevations)('keeps V5 prose plain with %s elevation at every density', (elevation, shadow) => {
+      for (const density of ['compact', 'comfortable', 'spacious'] as const) {
+        const config = { colorScheme, future: { v5Defaults: true }, brand: { elevation, density } };
+        const vars = getCssVariables(getActiveTheme(config));
+        expect(vars['--persona-message-assistant-shadow']).toBe('none');
+        expect(vars['--persona-message-assistant-border']).toBe('transparent');
+        expect(vars['--persona-message-assistant-padding']).toBe('0px');
+        // These existing surfaces still follow elevation; this is not a global
+        // rule that every default of `none` must opt out of brand styling.
+        expect(vars['--persona-message-user-shadow']).toBe(shadow);
+        expect(getActiveTheme(config).components.introCard?.shadow).toBe(shadow);
+        const v4 = getCssVariables(getActiveTheme({ ...config, future: { v5Defaults: false } }));
+        expect(v4['--persona-message-assistant-shadow']).toBe(shadow);
+        expect(v4['--persona-message-assistant-border']).not.toBe('transparent');
+      }
+    });
+    it.each(elevations)('lets custom padded bubbles follow %s elevation', (elevation, shadow) => {
+      for (const [density, padding] of [['compact', '8px'], ['comfortable', '12px'], ['spacious', '16px']] as const) {
+        const theme = { components: { message: { assistant: {
+          background: 'semantic.colors.container', padding, borderRadius: '12px',
+          border: 'semantic.colors.border', borderWidth: '1px', shadow: 'palette.shadows.sm',
+        } } } };
+        // Shared overrides and dark-only overrides both remain authoritative.
+        for (const overrides of colorScheme === 'dark' ? [{ theme }, { darkTheme: theme }] : [{ theme }]) {
+          const vars = getCssVariables(getActiveTheme({
+            colorScheme, future: { v5Defaults: true }, brand: { elevation, density }, ...overrides,
+          }));
+          expect(vars['--persona-message-assistant-shadow']).toBe(shadow);
+          expect(vars['--persona-message-assistant-padding']).toBe(padding);
+          expect(vars['--persona-message-assistant-border']).not.toBe('transparent');
+          expect(vars['--persona-message-assistant-border-width']).toBe('1px');
+        }
+      }
+    });
+    it('preserves explicit assistant shadows and borders over brand elevation', () => {
+      const vars = getCssVariables(getActiveTheme({
+        colorScheme, future: { v5Defaults: true }, brand: { elevation: 'raised' },
+        theme: { components: { message: { assistant: { shadow: '0 1px 2px red', border: '#123456' } } } },
+        ...(colorScheme === 'dark' ? { darkTheme: { components: { message: { assistant: { shadow: 'none', border: '#abcdef' } } } } } : {}),
+      }));
+      expect(vars['--persona-message-assistant-shadow']).toBe(colorScheme === 'dark' ? 'none' : '0 1px 2px red');
+      expect(vars['--persona-message-assistant-border']).toBe(colorScheme === 'dark' ? '#abcdef' : '#123456');
+    });
+  });
   it.each([false, true])('keeps neutral-derived surfaces and elevation coherent (%s)', (v5Defaults) => {
     const theme = getActiveTheme({ future: { v5Defaults }, brand: { neutral: '#161b22', radius: 'none', elevation: 'flat' } });
     const vars = getCssVariables(theme);

package/src/utils/brand.ts

@@ -111,8 +111,12 @@ export const deriveBrandTheme = (brand?: BrandConfig, scheme: 'light' | 'dark' =
     const shadow = flat ? 'none' : brand.elevation === 'subtle' ? '0 2px 8px rgba(0, 0, 0, 0.08)' : '0 12px 32px rgba(0, 0, 0, 0.18)';
     const border = flat ? '1px solid var(--persona-border)' : '1px solid color-mix(in srgb, var(--persona-border) 65%, transparent)';
     theme.palette = { ...theme.palette, shadows: { sm: shadow, md: shadow, lg: shadow, xl: shadow, '2xl': shadow } };
-    const shadows = (node: Record<string, unknown>): Record<string, unknown> => {
+    const shadows = (node: Record<string, unknown>, path = ''): Record<string, unknown> => {
       const overlay: Record<string, unknown> = {};
+      // V5 assistant defaults are unpadded prose, not a surface to elevate.
+      // Explicit theme tokens still win; custom bubbles can opt into the brand
+      // shadow scale with `palette.shadows.sm` alongside their padding/background.
+      if (v5Defaults && path === 'message.assistant') return overlay;
       for (const [key, value] of Object.entries(node)) {
         if (key.toLowerCase().endsWith('shadow')) {
           overlay[key] = shadow;
@@ -120,7 +124,7 @@ export const deriveBrandTheme = (brand?: BrandConfig, scheme: 'light' | 'dark' =
           if (borderKey in node) overlay[borderKey] = typeof node[borderKey] === 'string' && (node[borderKey] as string).includes('solid') ? border : flat ? 'semantic.colors.border' : 'color-mix(in srgb, var(--persona-border) 65%, transparent)';
         }
         else if (value && typeof value === 'object') {
-          const child = shadows(value as Record<string, unknown>);
+          const child = shadows(value as Record<string, unknown>, path ? `${path}.${key}` : key);
           if (Object.keys(child).length) overlay[key] = child;
         }
       }

package/src/utils/cdn-release.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { version } from "../../package.json";
+import { pinCdnRelease } from "./cdn-release";
+
+describe("pinCdnRelease", () => {
+  it.each(["install", "index", "launcher"])("pins the %s entry's dependencies to its embedded release", (entry) => {
+    expect(pinCdnRelease(`https://cdn.runtype.com/persona/latest/${entry}.global.js?embed=1`))
+      .toBe(`https://cdn.runtype.com/persona/${version}/${entry}.global.js?embed=1`);
+  });
+
+  it.each([
+    "https://cdn.runtype.com/persona/4.0.0/index.global.js",
+    "https://cdn.example.com/persona/latest/index.global.js",
+    "https://cdn.jsdelivr.net/npm/@runtypelabs/persona@4/dist/index.global.js",
+    "https://cdn.runtype.com/other/latest/index.global.js",
+    "",
+  ])("preserves explicit versions and other hosting layouts: %s", (src) => {
+    expect(pinCdnRelease(src)).toBe(src);
+  });
+});

package/src/utils/cdn-release.ts

@@ -0,0 +1,14 @@
+import { version } from "../../package.json";
+
+/**
+ * A cached /latest/ entry must keep using its own release, even after another
+ * release replaces latest. Only rewrite our published CDN layout; custom hosts
+ * and explicitly versioned URLs retain their existing sibling resolution.
+ * The bundler embeds this package version in each script-tag entry.
+ */
+export function pinCdnRelease(src: string): string {
+  return src.replace(
+    /^https:\/\/cdn\.runtype\.com\/persona\/latest\//,
+    `https://cdn.runtype.com/persona/${version}/`,
+  );
+}

package/src/utils/tokens.ts

@@ -603,7 +603,8 @@ export const DEFAULT_COMPONENTS_V5: ComponentTokens = {
   },
   launcher: CIRCLE_LAUNCHER_TOKENS,
   activity: {
-    rowHeight: "32px", labelSize: "13px", iconSize: "16px", indent: "0px",
+    // CSS owns contextual parent, nested, and coarse-pointer row heights.
+    labelSize: "13px", iconSize: "16px", indent: "0px",
     transcriptGap: "0px", responseGap: "12px",
     groupIndent: "16px", groupGap: "2px", groupPadding: "2px 0",
     bodyPadding: "4px 0", bodyFontWeight: "400", sectionGap: "8px", bodySurface: "transparent",

package/src/utils/tool-activity-summary.test.ts

@@ -6,6 +6,7 @@ const tool = (name: string, extra: Partial<AgentWidgetToolCall> = {}): AgentWidg
 
 describe("semantic tool activity", () => {
   it.each([
+    ["search_docs", "Searched docs"], ["read_file", "Read a file"],
     ["web_search", "Searched the web"], ["web_search_preview", "Searched the web"], ["WebSearch", "Searched the web"],
     ["web_fetch", "Read a web page"], ["WebFetch", "Read a web page"],
     ["file_search", "Searched files"], ["search_files", "Searched files"], ["Glob", "Searched files"],
@@ -22,6 +23,12 @@ describe("semantic tool activity", () => {
     ["sql_db_query", "Queried the database"], ["search_gmail", "Searched email"],
   ])("maps exact alias %s", (name, label) => expect(toolActivityLabel(tool(name))).toBe(label));
 
+  it("summarizes documentation searches and file reads without a custom hook", () => {
+    expect(summarizeToolActivity([tool("search_docs"), tool("read_file")])).toBe("Searched docs, read files");
+    expect(summarizeToolActivity([tool("search_docs", { status: "running" }), tool("read_file", { status: "pending" })])).toBe("Searching docs, reading files");
+    expect(toolActivityLabel(tool("read_file", { status: "running" }))).toBe("Reading a file");
+  });
+
   it.each(["search_events", "search_nodes", "read_graph", "open_nodes", "read", "search", "git_commit", "my_web_search", "web_search_custom"])("keeps ambiguous %s generic", name => {
     expect(toolActivityLabel(tool(name))).toMatch(/^Used /);
   });
@@ -127,6 +134,7 @@ describe("semantic tool activity", () => {
 });
 
  it.each([
+   ["search_docs", "search"], ["read_file", "file-text"],
    ["web_search", "globe"], ["Read", "file-text"], ["edit_file", "pencil"], ["Bash", "terminal"],
    ["sql_db_query", "database"], ["search_events", "wrench"], ["my_web_search", "wrench"],
  ])("maps the completed icon for %s without guessing", (name, icon) => expect(toolActivityIcon(tool(name))).toBe(icon));

package/src/utils/tool-activity-summary.ts

@@ -3,10 +3,11 @@ import type { AgentWidgetConfig, AgentWidgetToolCall } from "../types";
 // Exact documented names only. Ambiguous names such as search_events or
 // search_nodes need provider metadata, which tool messages do not carry.
 const categories = [
+  ["search_docs", "Searching docs", "Searched docs", "search"],
   ["web_search|web_search_preview|WebSearch", "Searching the web", "Searched the web", "globe"],
   ["web_fetch|WebFetch", "Reading web pages", "Read web pages", "globe", "single"],
   ["file_search|search_files|Glob", "Searching files", "Searched files", "search"],
-  ["read_text_file|read_multiple_files|Read", "Reading files", "Read files", "file-text", "single"],
+  ["read_file|read_text_file|read_multiple_files|Read", "Reading files", "Read files", "file-text", "single"],
   ["write_file|edit_file|apply_patch|Write|Edit|NotebookEdit", "Editing files", "Edited files", "pencil", "single"],
   ["list_directory|list_directory_with_sizes|directory_tree", "Browsing files", "Browsed files", "folder"],
   ["Grep", "Searching code", "Searched code", "search"],

package/dist/chunk-DDAwu89-.js

@@ -1 +0,0 @@
-const e=`4.32.0`;export{e as t};