@runtypelabs/persona 3.33.0 → 3.34.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "3.33.0",
+  "version": "3.34.1",
   "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",
@@ -60,9 +60,9 @@
   ],
   "dependencies": {
     "@mcp-b/webmcp-polyfill": "^3.0.0",
-    "dompurify": "^3.3.3",
+    "dompurify": "^3.4.10",
     "idiomorph": "^0.7.4",
-    "lucide": "^0.552.0",
+    "lucide": "^1.18.0",
     "marked": "^12.0.2",
     "partial-json": "^0.1.7",
     "zod": "^3.22.4"

package/src/client.test.ts

@@ -4121,3 +4121,58 @@ describe('AgentWidgetClient - non-client-token paths always send full clientTool
     }
   });
 });
+
+describe('AgentWidgetClient - Feedback request builder', () => {
+  const INIT_RESPONSE = {
+    sessionId: 'sess_123',
+    expiresAt: new Date(Date.now() + 60_000).toISOString(),
+    flow: {},
+    config: { welcomeMessage: 'hi', placeholder: 'type…', theme: {} },
+  };
+
+  function mockInitAndFeedback() {
+    const feedbackBodies: Array<Record<string, unknown>> = [];
+    global.fetch = vi.fn().mockImplementation(async (url: string, options: { body: string }) => {
+      if (typeof url === 'string' && url.endsWith('/v1/client/feedback')) {
+        feedbackBodies.push(JSON.parse(options.body));
+        return { ok: true, status: 200, json: async () => ({}) };
+      }
+      // init request
+      return { ok: true, status: 200, json: async () => INIT_RESPONSE };
+    });
+    return feedbackBodies;
+  }
+
+  it('includes the client token in the feedback request body', async () => {
+    const feedbackBodies = mockInitAndFeedback();
+    const client = new AgentWidgetClient({
+      apiUrl: 'http://localhost:8000',
+      clientToken: 'ct_live_abc123',
+    });
+    await client.initSession();
+
+    await client.sendFeedback({ sessionId: 'sess_123', messageId: 'm1', type: 'upvote' });
+
+    expect(feedbackBodies).toHaveLength(1);
+    expect(feedbackBodies[0]).toEqual({
+      sessionId: 'sess_123',
+      messageId: 'm1',
+      type: 'upvote',
+      token: 'ct_live_abc123',
+    });
+  });
+
+  it('sends the token on csat/nps submissions too', async () => {
+    const feedbackBodies = mockInitAndFeedback();
+    const client = new AgentWidgetClient({
+      apiUrl: 'http://localhost:8000',
+      clientToken: 'ct_live_xyz789',
+    });
+    await client.initSession();
+
+    await client.sendFeedback({ sessionId: 'sess_123', type: 'csat', rating: 5 });
+
+    expect(feedbackBodies[0].token).toBe('ct_live_xyz789');
+    expect(feedbackBodies[0].rating).toBe(5);
+  });
+});

package/src/client.ts

@@ -482,12 +482,21 @@ export class AgentWidgetClient {
       console.debug("[AgentWidgetClient] sending feedback", feedback);
     }
 
+    // Scope the feedback request to the caller's client token, sourced the same
+    // way as the chat/init requests. sendFeedback is client-token-mode only
+    // (guarded above), so clientToken is always present here and an API key can
+    // never leak into the body. Left undefined only when the embed has none.
+    const requestBody = {
+      ...feedback,
+      ...(this.config.clientToken && { token: this.config.clientToken }),
+    };
+
     const response = await fetch(this.getFeedbackApiUrl(), {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify(feedback),
+      body: JSON.stringify(requestBody),
     });
 
     if (!response.ok) {

package/src/codegen.test.ts

@@ -17,20 +17,6 @@ describe("codegen subpath", () => {
     expect(fromSubpath).toBe(fromInternal);
   });
 
-  it("produces identical output via the subpath for every format", () => {
-    const formats = [
-      "esm",
-      "script-installer",
-      "script-manual",
-      "script-advanced",
-      "react-component",
-      "react-advanced",
-    ] as const;
-    for (const format of formats) {
-      expect(fromSubpath(config, format)).toBe(fromInternal(config, format));
-    }
-  });
-
   it("pins the installer CDN url to the package version (not @latest)", () => {
     const code = fromSubpath(config, "script-installer");
     expect(code).toContain(`@runtypelabs/persona@${VERSION}/dist/install.global.js`);

package/src/runtime/host-layout.test.ts

@@ -108,7 +108,7 @@ describe("createWidgetHostLayout docked", () => {
     layout.destroy();
   });
 
-  it("push reveal translates a track; main column width stays fixed in px", () => {
+  it("push reveal offsets a track with margin (no transform); main column width stays fixed in px", () => {
     const parent = document.createElement("div");
     parent.style.width = "800px";
     document.body.appendChild(parent);
@@ -132,15 +132,20 @@ describe("createWidgetHostLayout docked", () => {
     expect(shell.dataset.personaDockReveal).toBe("push");
     expect(contentSlot?.style.width).toBe("800px");
     expect(pushTrack?.style.width).toBe("1120px");
-    expect(pushTrack?.style.transform).toBe("translateX(0)");
+    expect(pushTrack?.style.marginLeft).toBe("0px");
+    // The track must NOT carry a transform: a transformed ancestor becomes the
+    // containing block for `position: fixed` host chrome and pushes it
+    // off-screen (regression guard, see host-layout.ts push branch).
+    expect(pushTrack?.style.transform).toBe("");
 
     layout.syncWidgetState({ open: true, launcherEnabled: true });
-    expect(pushTrack?.style.transform).toBe("translateX(-320px)");
+    expect(pushTrack?.style.marginLeft).toBe("-320px");
+    expect(pushTrack?.style.transform).toBe("");
 
     layout.destroy();
   });
 
-  it("push reveal on the left uses negative translate when closed", () => {
+  it("push reveal on the left uses negative margin when closed", () => {
     const parent = document.createElement("div");
     parent.style.width = "600px";
     document.body.appendChild(parent);
@@ -159,10 +164,12 @@ describe("createWidgetHostLayout docked", () => {
     layout.updateConfig({ launcher: dockConfig });
 
     const pushTrack = shell.querySelector<HTMLElement>('[data-persona-dock-role="push-track"]');
-    expect(pushTrack?.style.transform).toBe("translateX(-200px)");
+    expect(pushTrack?.style.marginLeft).toBe("-200px");
+    expect(pushTrack?.style.transform).toBe("");
 
     layout.syncWidgetState({ open: true, launcherEnabled: true });
-    expect(pushTrack?.style.transform).toBe("translateX(0)");
+    expect(pushTrack?.style.marginLeft).toBe("0px");
+    expect(pushTrack?.style.transform).toBe("");
 
     layout.destroy();
   });
@@ -219,9 +226,9 @@ describe("createWidgetHostLayout docked", () => {
     }
   });
 
-  it("clamps push and overlay dock slots without sticky (transform/absolute contexts)", () => {
-    // push: the slot lives inside the translated track, where a transformed
-    // ancestor defeats sticky — cap only. overlay: keeps absolute positioning.
+  it("clamps push and overlay dock slots without sticky (in-flow/absolute contexts)", () => {
+    // push: the slot is an in-flow `position: relative` column — max-height cap
+    // only, no sticky. overlay: keeps absolute positioning.
     const cases = [
       { reveal: "push" as const, position: "relative" },
       { reveal: "overlay" as const, position: "absolute" },
@@ -390,6 +397,41 @@ describe("createWidgetHostLayout docked", () => {
     });
   });
 
+  it("resets the push track margin when a desktop push offset enters mobile fullscreen", () => {
+    const parent = document.createElement("div");
+    parent.style.width = "800px";
+    document.body.appendChild(parent);
+    const target = document.createElement("div");
+    parent.appendChild(target);
+
+    const layout = createWidgetHostLayout(target, {
+      launcher: {
+        mountMode: "docked",
+        autoExpand: false,
+        dock: { width: "320px", reveal: "push" },
+      },
+    });
+    const pushTrack = layout.shell?.querySelector<HTMLElement>(
+      '[data-persona-dock-role="push-track"]',
+    );
+
+    // Desktop, expanded: track carries a negative margin offset.
+    withInnerWidth(800, () => {
+      layout.syncWidgetState({ open: true, launcherEnabled: true });
+    });
+    expect(pushTrack?.style.marginLeft).toBe("-320px");
+
+    // Same layout falls into mobile fullscreen (viewport resize): the stale
+    // margin must be cleared or the width:100% track renders 320px off-screen.
+    withInnerWidth(500, () => {
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(layout.shell?.dataset.personaDockMobileFullscreen).toBe("true");
+    expect(pushTrack?.style.marginLeft).toBe("0px");
+
+    layout.destroy();
+  });
+
   it("does not use fixed fullscreen above mobile breakpoint", () => {
     withInnerWidth(800, () => {
       const parent = document.createElement("div");

package/src/runtime/host-layout.ts

@@ -53,9 +53,10 @@ const applyDockSlotMaxHeight = (
  * when the surrounding page is taller than the screen (e.g. a missing height
  * chain or a deliberately scrolling page). With a properly sized shell it
  * behaves exactly like the previous `position: relative`. Not used for push:
- * there the slot lives inside the translated push track, and that transformed
- * ancestor defeats sticky (verified in Chromium) — push gets the max-height
- * cap only, like overlay.
+ * push gets the max-height cap only, like overlay, since the dock slot is an
+ * in-flow `position: relative` column there rather than a viewport-pinned one.
+ * (The push track itself is offset with `margin-left`, not a transform, so it
+ * no longer establishes a containing block for fixed/sticky descendants.)
  */
 const applyInFlowDockSlotPosition = (
   dockSlot: HTMLElement,
@@ -151,6 +152,7 @@ const clearPushTrackStyles = (pushTrack: HTMLElement): void => {
   pushTrack.style.alignItems = "";
   pushTrack.style.transition = "";
   pushTrack.style.transform = "";
+  pushTrack.style.marginLeft = "";
 };
 
 const resetContentSlotFlexSizing = (contentSlot: HTMLElement): void => {
@@ -294,6 +296,11 @@ const applyDockStyles = (
       pushTrack.style.flex = "1 1 auto";
       pushTrack.style.alignItems = "stretch";
       pushTrack.style.transform = "none";
+      // Reset the desktop push offset: this fullscreen path applies styles
+      // inline without going through clearPushTrackStyles, so a stale negative
+      // marginLeft from a prior expanded desktop render would shift the now
+      // width:100% track off-screen on mobile.
+      pushTrack.style.marginLeft = "0";
       pushTrack.style.transition = "none";
       contentSlot.style.flex = "1 1 auto";
       contentSlot.style.width = "100%";
@@ -359,15 +366,24 @@ const applyDockStyles = (
 
     const panelPx = parseDockWidthToPx(dock.width, shell.clientWidth);
     const contentPx = Math.max(0, shell.clientWidth);
-    const dockTransition = dock.animate ? "transform 180ms ease" : "none";
-    const translate =
+    const dockTransition = dock.animate ? "margin-left 180ms ease" : "none";
+    // Slide the wide track with a negative left margin rather than a CSS
+    // transform. A `transform` (even `translateX(0)`) turns the push track into
+    // the containing block for any `position: fixed` descendant, so host pages
+    // that render viewport-fixed chrome inside the pushed content (e.g. the
+    // dashboard editor's `fixed top-0 right-0` toolbar) resolve `right: 0`
+    // against the track's right edge — `panelPx` past the viewport, off-screen.
+    // `margin-left` produces the identical visual offset (the track is clipped
+    // by the overflow:hidden shell) without establishing a containing block for
+    // fixed OR absolutely-positioned descendants.
+    const marginOffsetPx =
       dock.side === "right"
         ? expanded
-          ? `translateX(-${panelPx}px)`
-          : "translateX(0)"
+          ? -panelPx
+          : 0
         : expanded
-          ? "translateX(0)"
-          : `translateX(-${panelPx}px)`;
+          ? 0
+          : -panelPx;
 
     pushTrack.style.display = "flex";
     pushTrack.style.flexDirection = "row";
@@ -378,7 +394,10 @@ const applyDockStyles = (
     pushTrack.style.height = "100%";
     pushTrack.style.width = `${contentPx + panelPx}px`;
     pushTrack.style.transition = dockTransition;
-    pushTrack.style.transform = translate;
+    pushTrack.style.marginLeft = `${marginOffsetPx}px`;
+    // Defensively clear any transform a previous reveal mode may have set —
+    // leaving one would re-establish the fixed-position containing block.
+    pushTrack.style.transform = "";
 
     contentSlot.style.flex = "0 0 auto";
     contentSlot.style.flexGrow = "0";

package/src/runtime/init.test.ts

@@ -424,11 +424,11 @@ describe("initAgentWidget docked mode", () => {
     const panelSlot = shell.querySelector<HTMLElement>('[data-persona-dock-role="panel"]')!;
     expect(pushTrack).not.toBeNull();
     expect(panelSlot.style.width).toBe("400px");
-    expect(pushTrack?.style.transform).toBe("translateX(-400px)");
+    expect(pushTrack?.style.marginLeft).toBe("-400px");
 
     handle.close();
     expect(panelSlot.style.width).toBe("400px");
-    expect(pushTrack?.style.transform).toBe("translateX(0)");
+    expect(pushTrack?.style.marginLeft).toBe("0px");
 
     handle.destroy();
     wrapper.remove();

package/src/types.ts

@@ -145,12 +145,41 @@ export type AgentToolsConfig = {
   mcpServers?: Array<Record<string, unknown>>;
   /** Maximum number of tool invocations per execution */
   maxToolCalls?: number;
+  /** How the model is steered toward tools: let it decide, force a call, or disable */
+  toolCallStrategy?: "auto" | "required" | "none";
+  /** Per-tool invocation limits / requirements keyed by tool name */
+  perToolLimits?: Record<string, { maxCalls?: number; required?: boolean }>;
   /** Tool approval configuration for human-in-the-loop workflows */
   approval?: {
     /** Tool names/patterns to require approval for, or true for all tools */
     require: string[] | boolean;
     /** Approval timeout in milliseconds (default: 300000 / 5 minutes) */
     timeout?: number;
+    /** Ask the agent to state its intent alongside approval requests (default: true) */
+    requestReason?: boolean;
+  };
+  /**
+   * Enables the synthesized `spawn_subagent` tool: the model can spin up
+   * ad-hoc child agents at runtime, restricted to `toolPool` (tool IDs /
+   * runtime-tool names already granted to the parent agent).
+   */
+  subagentConfig?: {
+    toolPool: string[];
+    defaultMaxTurns?: number;
+    maxTurnsLimit?: number;
+    maxSpawnsPerRun?: number;
+    defaultModel?: string;
+    allowNesting?: boolean;
+    defaultTimeoutMs?: number;
+  };
+  /**
+   * Enables the synthesized `code_mode` tool: the model writes JS that calls
+   * pool tools inside a sandbox instead of issuing individual tool calls.
+   */
+  codeModeConfig?: {
+    toolPool: string[];
+    description?: string;
+    timeoutMs?: number;
   };
 };
 

package/src/ui.docked.test.ts

@@ -286,11 +286,11 @@ describe("createAgentExperience docked mode", () => {
     const closeButton = mount.querySelector<HTMLButtonElement>('[aria-label="Close chat"]');
 
     expect(pushTrack).not.toBeNull();
-    expect(pushTrack?.style.transform).toBe("translateX(-420px)");
+    expect(pushTrack?.style.marginLeft).toBe("-420px");
 
     closeButton!.click();
 
-    expect(pushTrack?.style.transform).toBe("translateX(0)");
+    expect(pushTrack?.style.marginLeft).toBe("0px");
 
     openUnsub();
     closeUnsub();

package/src/voice/voice.test.ts

@@ -32,58 +32,7 @@ function mockBrowserSupport(supported: boolean) {
   }
 }
 
-// Note: TypeScript interfaces don't exist at runtime, so we can't test them directly
-// We test the concrete implementations instead
-
-describe('RuntypeVoiceProvider', () => {
-  it('should create instance with valid config', () => {
-    const config = {
-      agentId: 'test-agent',
-      clientToken: 'test-token',
-      host: 'localhost:8787',
-      voiceId: 'rachel'
-    };
-    
-    const provider = new RuntypeVoiceProvider(config);
-    expect(provider).toBeInstanceOf(RuntypeVoiceProvider);
-    expect(provider.type).toBe('runtype');
-  });
-  
-  it('should have correct methods', () => {
-    const config = {
-      agentId: 'test-agent',
-      clientToken: 'test-token'
-    };
-    
-    const provider = new RuntypeVoiceProvider(config);
-    expect(typeof provider.connect).toBe('function');
-    expect(typeof provider.disconnect).toBe('function');
-    expect(typeof provider.startListening).toBe('function');
-    expect(typeof provider.stopListening).toBe('function');
-    expect(typeof provider.onResult).toBe('function');
-    expect(typeof provider.onError).toBe('function');
-    expect(typeof provider.onStatusChange).toBe('function');
-  });
-});
-
 describe('BrowserVoiceProvider', () => {
-  it('should create instance with default config', () => {
-    const provider = new BrowserVoiceProvider();
-    expect(provider).toBeInstanceOf(BrowserVoiceProvider);
-    expect(provider.type).toBe('browser');
-  });
-  
-  it('should have correct methods', () => {
-    const provider = new BrowserVoiceProvider();
-    expect(typeof provider.connect).toBe('function');
-    expect(typeof provider.disconnect).toBe('function');
-    expect(typeof provider.startListening).toBe('function');
-    expect(typeof provider.stopListening).toBe('function');
-    expect(typeof provider.onResult).toBe('function');
-    expect(typeof provider.onError).toBe('function');
-    expect(typeof provider.onStatusChange).toBe('function');
-  });
-  
   it('should check browser support', () => {
     // Test supported
     mockBrowserSupport(true);

package/src/install-config.test.ts

@@ -1,38 +0,0 @@
-import { describe, it, expect } from "vitest";
-
-describe("prototype pollution guard", () => {
-  it("strips __proto__, constructor, and prototype from parsed config", () => {
-    // Simulates the destructuring pattern used in install.ts
-    const malicious = JSON.parse(
-      '{"config":{"apiUrl":"http://localhost"},"__proto__":{"polluted":true},"constructor":{"polluted":true},"prototype":{"polluted":true}}'
-    );
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { __proto__: _a, constructor: _b, prototype: _c, ...safeConfig } = malicious;
-
-    const target: Record<string, unknown> = {};
-    Object.assign(target, safeConfig);
-
-    // The dangerous keys should not be on the target
-    expect(Object.keys(target)).toEqual(["config"]);
-    expect((target as any).__proto__).toBe(Object.prototype); // normal prototype, not polluted
-    expect((target as any).constructor).toBe(Object); // normal constructor
-
-    // Global prototype should not be polluted
-    expect(({} as any).polluted).toBeUndefined();
-  });
-
-  it("preserves safe config properties", () => {
-    const parsed = JSON.parse(
-      '{"config":{"apiUrl":"http://localhost"},"clientToken":"tok_123","flowId":"flow-1"}'
-    );
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { __proto__: _a, constructor: _b, prototype: _c, ...safeConfig } = parsed;
-
-    expect(safeConfig).toEqual({
-      config: { apiUrl: "http://localhost" },
-      clientToken: "tok_123",
-      flowId: "flow-1",
-    });
-  });
-});