@runtypelabs/persona 4.24.0 → 4.26.0

package/src/components/approval-actions.test.ts

@@ -122,6 +122,33 @@ describe("built-in approval — flag off (default)", () => {
   });
 });
 
+describe("built-in approval — client-token visitor", () => {
+  const cfg: AgentWidgetConfig = {
+    clientToken: "ct_live_demo",
+    approval: { detailsDisplay: "hidden" },
+  };
+  const message = makeMessage({
+    toolName: "place_pickup_order",
+    parameters: { item: "croissant", qty: 12 },
+    reason: "The user asked for this.",
+  });
+
+  it("keeps the raw call behind the disclosure without a client token", () => {
+    const { el } = render({}, message);
+    expect(el?.querySelector('[data-role="raw-call"]')).toBeNull();
+  });
+
+  it("shows the raw tool name and parameters above the agent's reason", () => {
+    const { el } = render(cfg, message);
+    const call = el?.querySelector('[data-role="raw-call"]') as HTMLElement | null;
+    expect(call?.querySelector(".persona-approval-tool-name")?.textContent).toBe("place_pickup_order");
+    expect(call?.querySelector(".persona-approval-params")?.textContent).toContain("croissant");
+    const reason = el?.querySelector(".persona-approval-reason");
+    expect(reason?.textContent).toContain("Agent's stated reason:");
+    expect(call!.compareDocumentPosition(reason!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});
+
 describe("built-in approval — flag on (enableAlwaysAllow)", () => {
   const cfg: AgentWidgetConfig = { approval: { enableAlwaysAllow: true } };
 

package/src/components/approval-actions.ts

@@ -180,7 +180,8 @@ const buildPending = (
   approvalConfig: AgentWidgetApprovalConfig | undefined,
   approve: Decide,
   deny: Decide,
-  enableAlways: boolean
+  enableAlways: boolean,
+  showRawCall = false
 ): HTMLElement => {
   const card = createElement("div", "persona-approval-card persona-shadow-sm");
   card.id = `bubble-${message.id}`;
@@ -199,7 +200,8 @@ const buildPending = (
   // name), so the description is only ever visible here. Mirrors the legacy
   // bubble, which also opened a disclosure when only a description was present.
   const hasDescription = Boolean(approval.description) && detailsMode !== "hidden";
-  const hasParams = approval.parameters != null && detailsMode !== "hidden";
+  // `showRawCall` lifts the parameters out of the disclosure (see below).
+  const hasParams = approval.parameters != null && detailsMode !== "hidden" && !showRawCall;
   const hasDetails = hasDescription || hasParams;
   const expanded = hasDetails && isDetailsExpanded(message.id, expansionState, approvalConfig);
 
@@ -263,6 +265,24 @@ const buildPending = (
     body.appendChild(details);
   }
 
+  // The raw tool name and arguments, always visible and above the reason, so
+  // what will actually run is never less prominent than the agent's claim.
+  if (showRawCall) {
+    const call = createElement("div", "persona-approval-call");
+    call.setAttribute("data-role", "raw-call");
+    const name = createElement("code", "persona-approval-tool-name");
+    name.textContent = approval.toolName;
+    call.appendChild(name);
+    if (approval.parameters != null) {
+      const pre = createElement("pre", "persona-approval-params");
+      if (approvalConfig?.parameterBackgroundColor) pre.style.background = approvalConfig.parameterBackgroundColor;
+      if (approvalConfig?.parameterTextColor) pre.style.color = approvalConfig.parameterTextColor;
+      pre.textContent = formatUnknownValue(approval.parameters);
+      call.appendChild(pre);
+    }
+    body.appendChild(call);
+  }
+
   // Agent-authored justification: attacker-writable, so plain text + attributed.
   if (approval.reason) {
     const reasonLine = createElement("p", "persona-approval-reason");
@@ -422,6 +442,9 @@ export const createBuiltInApprovalPlugin = (
       // closures, but KEEP this approval's place in the pending order so a
       // re-render of an older card doesn't reorder it ahead of a newer one.
       detachMessage(state, message.id);
+      // Client-token visitors answer the gate themselves, so they see the
+      // exact call rather than just the agent's framing.
+      const visitorGate = Boolean(config?.clientToken);
       const enableAlways = approvalConfig?.enableAlwaysAllow === true;
       const card = buildPending(
         state,
@@ -431,7 +454,8 @@ export const createBuiltInApprovalPlugin = (
         approvalConfig,
         approve,
         deny,
-        enableAlways
+        enableAlways,
+        visitorGate
       );
 
       if (enableAlways) {

package/src/components/message-bubble.test.ts

@@ -333,6 +333,25 @@ describe("createStandardBubble", () => {
   });
 });
 
+describe("createStandardBubble: message actions", () => {
+  const actions = { enabled: true, showCopy: true, visibility: "hover", align: "right", layout: "pill-inside" } as const;
+
+  it("gives a voice caption no message actions", () => {
+    const bubble = createStandardBubble(
+      makeMessage({ id: "caption", content: "Okay, placing that now.", voiceCaption: true }),
+      ({ text }) => text,
+      undefined,
+      actions
+    );
+    expect(bubble.querySelector(".persona-message-actions")).toBeNull();
+  });
+
+  it("keeps the copy action on an ordinary short reply", () => {
+    const bubble = createStandardBubble(makeMessage({ content: "Sure." }), ({ text }) => text, undefined, actions);
+    expect(bubble.querySelector('[data-action="copy"]')).not.toBeNull();
+  });
+});
+
 describe("createStandardBubble: components.message geometry tokens", () => {
   const geometry = (bubble: HTMLElement) => ({
     padding: bubble.style.padding,

package/src/components/message-bubble.ts

@@ -1298,6 +1298,8 @@ export const createStandardBubble = (
   const shouldShowActions =
     message.role === "assistant" &&
     !message.streaming &&
+    // A voice caption (the voice model's own speech) is display-only.
+    !message.voiceCaption &&
     message.content &&
     message.content.trim() &&
     actionsConfig?.enabled !== false;

package/src/components/registry.ts

@@ -37,7 +37,7 @@ export interface ComponentRegistrationOptions {
  */
 class ComponentRegistry {
   private components: Map<string, ComponentRenderer> = new Map();
-  private options: Map<string, ComponentRegistrationOptions> = new Map();
+  #options: Map<string, ComponentRegistrationOptions> = new Map();
 
   /**
    * Register a custom component
@@ -52,9 +52,9 @@ class ComponentRegistry {
     }
     this.components.set(name, renderer);
     if (options) {
-      this.options.set(name, options);
+      this.#options.set(name, options);
     } else {
-      this.options.delete(name);
+      this.#options.delete(name);
     }
   }
 
@@ -63,7 +63,7 @@ class ComponentRegistry {
    */
   unregister(name: string): void {
     this.components.delete(name);
-    this.options.delete(name);
+    this.#options.delete(name);
   }
 
   /**
@@ -84,7 +84,7 @@ class ComponentRegistry {
    * Get the registration options for a component, if any were supplied
    */
   getOptions(name: string): ComponentRegistrationOptions | undefined {
-    return this.options.get(name);
+    return this.#options.get(name);
   }
 
   /**
@@ -99,7 +99,7 @@ class ComponentRegistry {
    */
   clear(): void {
     this.components.clear();
-    this.options.clear();
+    this.#options.clear();
   }
 
   /**

package/src/components/tool-bubble.test.ts

@@ -49,3 +49,12 @@ describe("tool failure presentation", () => {
     expect(bubble.querySelector("script")).toBeNull();
   });
 });
+
+describe("approval-superseded presentation", () => {
+  it("labels an approved call that ran again under a new id", () => {
+    const message = makeMessage();
+    message.toolCall = { ...message.toolCall!, approvalStatus: "approved", superseded: true };
+    const bubble = createToolBubble(message);
+    expect(bubble.textContent).toContain("Approved, ran again below");
+  });
+});

package/src/components/tool-bubble.ts

@@ -101,6 +101,7 @@ const getToolSummaryText = (
   }
 
   if (tool.success === false) summary += " · Failed";
+  else if (tool.superseded) summary += " · Approved, ran again below";
   return { summary, previewText, isActive };
 };
 

package/src/history-shell-bundle.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+/**
+ * Bundle guard for the lazy visitor-history shell.
+ *
+ * The CDN IIFE (`dist/index.global.js`) must not carry the shell: it ships as
+ * the sibling chunk `dist/history-shell.js`, fetched only when
+ * `features.history` is enabled or a history API is called. npm builds inline
+ * it (`history-shell-eager.ts`). A stray static import from core would pull
+ * it back into the IIFE; this fails then.
+ *
+ * Skips when `dist/` hasn't been built (e.g. a test-only CI step).
+ */
+const dist = (f: string) => resolve(__dirname, "..", "dist", f);
+
+// Shell-only literals: rail/overlay chrome and conversation-open classes.
+const RUNTIME_MARKERS = [
+  "persona-history-rail-shell",
+  "persona-history-rail-overlay",
+  "persona-conversation-loading-error",
+  "data-persona-history-toggle",
+];
+
+// Stateful core modules arrive through the shell's ctx, never bundled copies:
+// the icon registry's map keys and the tooltip module only exist where bundled.
+const NOT_IN_CHUNK = ["shopping-cart", "persona-tooltip"];
+
+describe("history-shell bundle split", () => {
+  const iifeBuilt =
+    existsSync(dist("index.global.js")) && existsSync(dist("history-shell.js"));
+
+  it.runIf(iifeBuilt)("keeps the history shell OUT of the core IIFE bundle", () => {
+    const core = readFileSync(dist("index.global.js"), "utf8");
+    for (const marker of RUNTIME_MARKERS) {
+      expect(core.includes(marker), `IIFE bundle unexpectedly contains "${marker}"`).toBe(
+        false
+      );
+    }
+    // The loader stub (sibling-URL reference) must remain so the chunk can load.
+    expect(core).toContain("history-shell.js");
+  });
+
+  it.runIf(iifeBuilt)("ships the history shell in the sibling chunk", () => {
+    const chunk = readFileSync(dist("history-shell.js"), "utf8");
+    for (const marker of RUNTIME_MARKERS) {
+      expect(chunk.includes(marker), `chunk is missing "${marker}"`).toBe(true);
+    }
+    for (const marker of NOT_IN_CHUNK) {
+      expect(chunk.includes(marker), `chunk unexpectedly bundles "${marker}"`).toBe(false);
+    }
+  });
+});

package/src/history-shell-eager.ts

@@ -0,0 +1,12 @@
+/**
+ * Eager history-shell registration for the bundled (ESM / CJS) builds.
+ *
+ * npm consumers bundle `history-shell.ts` anyway, so providing it up front
+ * keeps history setup synchronous at mount. Like `client-stream-eager.ts`,
+ * this module must NOT be reachable from `index-global.ts`: the IIFE/CDN build
+ * fetches the `history-shell.js` chunk only when history is used.
+ */
+import * as historyShell from "./history-shell";
+import { provideHistoryShell } from "./history-shell-loader";
+
+provideHistoryShell(historyShell);

package/src/history-shell-loader.ts

@@ -0,0 +1,27 @@
+import { createChunkLoader } from "./utils/chunk-loader";
+import type { createHistoryShell } from "./history-shell";
+
+/**
+ * Loader indirection for the visitor-history shell (`history-shell.ts`). The
+ * ESM/CJS fallback imports `./history-shell` directly (inlined by
+ * `--splitting false`, and provided eagerly by `history-shell-eager.ts`); the
+ * IIFE/CDN build marks it external and registers a loader for the sibling
+ * `history-shell.js` chunk (see `index-global.ts`).
+ */
+export type HistoryShellModule = { createHistoryShell: typeof createHistoryShell };
+
+const { setLoader, load, provide, getSync } = createChunkLoader<HistoryShellModule>({
+  fallbackImport: () => import("./history-shell"),
+});
+
+/** Override how the chunk is fetched (the IIFE build registers a sibling-URL loader). */
+export const setHistoryShellLoader = setLoader;
+
+/** Load the history shell. Memoized; retries after rejection. */
+export const loadHistoryShell = load;
+
+/** Eagerly supply the module (`history-shell-eager.ts`: npm builds and tests). */
+export const provideHistoryShell = provide;
+
+/** Synchronous access once loaded/provided; null before that. */
+export const getHistoryShellSync = getSync;