@runtypelabs/persona 4.25.0 → 4.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.25.0",
+  "version": "4.26.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",
@@ -149,6 +149,7 @@
     "fake-indexeddb": "^6.2.5",
     "rimraf": "^5.0.5",
     "size-limit": "^12.1.0",
+    "terser": "^5.49.0",
     "tsup": "^8.0.1",
     "typescript": "^5.4.5",
     "vitest": "^4.0.9"
@@ -180,10 +181,15 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rimraf dist && pnpm run build:styles && pnpm run build:markdown-parsers && pnpm run build:client && pnpm run build:installer && pnpm run build:launcher && pnpm run build:webmcp-polyfill && pnpm run build:context-mentions && pnpm run build:context-mentions-inline && pnpm run build:history-view && pnpm run build:event-stream-view && pnpm run build:runtype-tts && pnpm run build:theme-ref && pnpm run build:codegen && pnpm run build:theme-editor && pnpm run build:theme-editor-preview && pnpm run build:testing && pnpm run build:smart-dom-reader && pnpm run build:voice-worklet-player && pnpm run build:plugin-kit && pnpm run build:animations && pnpm run build:animations-extra && pnpm run build:approval-ui && pnpm run build:session-reconnect && pnpm run build:webmcp-runtime && pnpm run build:icons-extra && pnpm run build:artifacts-ui && pnpm run build:voice-runtime && pnpm run build:forms-ui && pnpm run check:dist-vite8 && pnpm run check:size",
+    "build": "rimraf dist && pnpm run build:styles && pnpm run build:markdown-parsers && pnpm run build:client-stream && pnpm run build:client-history && pnpm run build:ui-extras && pnpm run build:session-actions && pnpm run build:history-shell && pnpm run build:client && pnpm run build:installer && pnpm run build:launcher && pnpm run build:webmcp-polyfill && pnpm run build:context-mentions && pnpm run build:context-mentions-inline && pnpm run build:history-view && pnpm run build:event-stream-view && pnpm run build:runtype-tts && pnpm run build:theme-ref && pnpm run build:codegen && pnpm run build:theme-editor && pnpm run build:theme-editor-preview && pnpm run build:testing && pnpm run build:smart-dom-reader && pnpm run build:voice-worklet-player && pnpm run build:plugin-kit && pnpm run build:animations && pnpm run build:animations-extra && pnpm run build:approval-ui && pnpm run build:session-reconnect && pnpm run build:webmcp-runtime && pnpm run build:icons-extra && pnpm run build:artifacts-ui && pnpm run build:voice-runtime && pnpm run build:forms-ui && pnpm run check:dist-vite8 && pnpm run check:size",
     "check:size": "node scripts/check-size.mjs",
     "check:dist-vite8": "node scripts/check-dist-no-in-for-init.mjs",
     "build:markdown-parsers": "tsup --config tsup.markdown-parsers.config.ts",
+    "build:client-stream": "tsup --config tsup.client-stream.config.ts",
+    "build:client-history": "tsup --config tsup.client-history.config.ts",
+    "build:ui-extras": "tsup --config tsup.ui-extras.config.ts",
+    "build:session-actions": "tsup --config tsup.session-actions.config.ts",
+    "build:history-shell": "tsup --config tsup.history-shell.config.ts",
     "build:plugin-kit": "tsup src/plugin-kit.ts --format esm,cjs --minify --dts --out-dir dist --no-splitting",
     "build:theme-editor": "tsup src/theme-editor.ts --format esm,cjs --minify --dts --out-dir dist --no-splitting",
     "build:theme-editor-preview": "tsup src/theme-editor-preview.ts --format esm,cjs --minify --dts --out-dir dist",
@@ -202,14 +208,14 @@
     "build:theme-ref": "tsup src/theme-reference.ts --format esm,cjs --minify --dts",
     "build:codegen": "tsup src/codegen.ts --format esm,cjs --minify --dts",
     "build:styles": "node scripts/build-styles.mjs",
-    "build:client": "tsup src/index.ts --format esm,cjs --minify --sourcemap --splitting false --dts --loader \".css=text\" --external @runtypelabs/persona/context-mentions --external @runtypelabs/persona/context-mentions-inline --external @runtypelabs/persona/history-view --external @runtypelabs/persona/event-stream-view --external @runtypelabs/persona/animations-extra --external @runtypelabs/persona/approval-ui --external @runtypelabs/persona/session-reconnect --external @runtypelabs/persona/webmcp-runtime --external @runtypelabs/persona/icons-extra --external @runtypelabs/persona/artifacts-ui --external @runtypelabs/persona/voice-runtime --external @runtypelabs/persona/forms-ui && tsup --config tsup.global.config.ts && node -e \"const fs=require('fs');for(const ext of ['.global.js','.global.js.map']){const from='dist/index-global'+ext;if(fs.existsSync(from))fs.renameSync(from,'dist/index'+ext);}\"",
+    "build:client": "tsup src/index.ts --format esm,cjs --minify --sourcemap --splitting false --dts --loader \".css=text\" --external @runtypelabs/persona/context-mentions --external @runtypelabs/persona/context-mentions-inline --external @runtypelabs/persona/history-view --external @runtypelabs/persona/event-stream-view --external @runtypelabs/persona/animations-extra --external @runtypelabs/persona/approval-ui --external @runtypelabs/persona/session-reconnect --external @runtypelabs/persona/webmcp-runtime --external @runtypelabs/persona/icons-extra --external @runtypelabs/persona/artifacts-ui --external @runtypelabs/persona/voice-runtime --external @runtypelabs/persona/forms-ui && tsup --config tsup.global.config.ts && node -e \"const fs=require('fs');for(const ext of ['.global.js','.global.js.map']){const from='dist/index-global'+ext;if(fs.existsSync(from))fs.renameSync(from,'dist/index'+ext);}\" && node scripts/terser-global.mjs dist/index.global.js",
     "build:webmcp-polyfill": "tsup --config tsup.webmcp-polyfill.config.ts",
     "build:context-mentions": "tsup --config tsup.context-mentions.config.ts",
     "build:context-mentions-inline": "tsup --config tsup.context-mentions-inline.config.ts",
     "build:history-view": "tsup --config tsup.history-view.config.ts",
     "build:runtype-tts": "tsup --config tsup.runtype-tts.config.ts",
-    "build:installer": "tsup src/install.ts --format iife --global-name SiteAgentInstaller --out-dir dist --minify --sourcemap --no-splitting",
-    "build:launcher": "tsup --config tsup.launcher.config.ts && node -e \"const fs=require('fs');for(const ext of ['.global.js','.global.js.map']){const from='dist/launcher-global'+ext;if(fs.existsSync(from))fs.renameSync(from,'dist/launcher'+ext);}\"",
+    "build:installer": "tsup src/install.ts --format iife --global-name SiteAgentInstaller --out-dir dist --minify --sourcemap --no-splitting && node scripts/terser-global.mjs dist/install.global.js",
+    "build:launcher": "tsup --config tsup.launcher.config.ts && node -e \"const fs=require('fs');for(const ext of ['.global.js','.global.js.map']){const from='dist/launcher-global'+ext;if(fs.existsSync(from))fs.renameSync(from,'dist/launcher'+ext);}\" && node scripts/terser-global.mjs dist/launcher.global.js",
     "lint": "eslint . --ext .ts",
     "typecheck": "pnpm run check:runtype-types && tsc --noEmit",
     "test": "vitest",

package/src/approval-paused-tool-settle.test.ts

@@ -0,0 +1,325 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AgentWidgetClient } from "./client";
+import { AgentWidgetSession } from "./session";
+import type { AgentWidgetMessage } from "./types";
+
+// Older servers resume an approval by re-running the agent, which re-issues the
+// gated call under a NEW toolCallId, so no terminal frame arrives for the paused
+// one; the session settles it when the stream ends. Current servers run the
+// paused call itself under its original id, and that real result wins.
+
+const originalFetch = global.fetch;
+afterEach(() => {
+  global.fetch = originalFetch;
+  vi.restoreAllMocks();
+});
+
+const sse = (events: Array<Record<string, unknown>>) =>
+  new Response(events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join(""), {
+    headers: { "Content-Type": "text/event-stream" },
+  });
+
+const liveSession = (client: AgentWidgetClient) => {
+  (client as unknown as { clientSession: { sessionId: string; expiresAt: Date } }).clientSession = {
+    sessionId: "cs_123",
+    expiresAt: new Date(Date.now() + 60_000),
+  };
+};
+
+const pausedTool = (status: "running" | "complete" = "running"): AgentWidgetMessage => ({
+  id: "tool-toolu_paused",
+  role: "assistant",
+  content: "",
+  createdAt: new Date(Date.now() - 2_000).toISOString(),
+  streaming: status === "running",
+  variant: "tool",
+  toolCall: {
+    id: "toolu_paused",
+    name: "place_pickup_order",
+    status,
+    args: { item: "latte" },
+    startedAt: Date.now() - 2_000,
+  },
+});
+
+const pendingApproval = (toolCallId?: string): AgentWidgetMessage => ({
+  id: "approval-appr_1",
+  role: "assistant",
+  content: "",
+  createdAt: new Date(Date.now() - 1_000).toISOString(),
+  variant: "approval",
+  approval: {
+    id: "appr_1",
+    status: "pending",
+    agentId: "agent_abc",
+    executionId: "exec_abc",
+    toolName: "place_pickup_order",
+    description: "Place the order",
+    ...(toolCallId ? { toolCallId } : {}),
+  },
+});
+
+const setup = (initialMessages: AgentWidgetMessage[]) => {
+  let messages: AgentWidgetMessage[] = [];
+  const toolStates: Array<AgentWidgetMessage["toolCall"]> = [];
+  const session = new AgentWidgetSession(
+    { clientToken: "ct_live_demo", apiUrl: "https://api.runtype.com", initialMessages },
+    {
+      onMessagesChanged: (m) => {
+        messages = m;
+        toolStates.push(m.find((x) => x.toolCall?.id === "toolu_paused")?.toolCall);
+      },
+      onStatusChanged: () => {},
+      onStreamingChanged: () => {},
+      onError: () => {},
+    }
+  );
+  liveSession((session as unknown as { client: AgentWidgetClient }).client);
+  const approval = initialMessages.find((m) => m.variant === "approval")!.approval!;
+  return {
+    resolve: (decision: "approved" | "denied") => session.resolveApproval(approval, decision),
+    tool: (id = "toolu_paused") => messages.find((m) => m.toolCall?.id === id),
+    toolStates,
+  };
+};
+
+const resumeStream = (decision: "approved" | "denied" | "timeout", rerun = true) =>
+  sse([
+    { type: "approval_complete", executionId: "exec_abc", approvalId: "appr_1", decision },
+    ...(rerun
+      ? [
+          { type: "tool_start", toolCallId: "toolu_rerun", toolName: "place_pickup_order", toolType: "custom" },
+          {
+            type: "tool_complete",
+            toolCallId: "toolu_rerun",
+            toolName: "place_pickup_order",
+            success: decision === "approved",
+            result: decision === "approved" ? { orderId: "ord_1" } : undefined,
+          },
+        ]
+      : []),
+    { type: "execution_complete", kind: "agent", success: true },
+  ]);
+
+describe("approval_start records the paused toolCallId", () => {
+  it("carries toolCallId onto the approval message", async () => {
+    const client = new AgentWidgetClient({ clientToken: "ct_live_demo", apiUrl: "https://api.runtype.com" });
+    const emitted: AgentWidgetMessage[] = [];
+    await client.processStream(
+      sse([
+        {
+          type: "approval_start",
+          executionId: "exec_abc",
+          approvalId: "appr_1",
+          toolCallId: "toolu_paused",
+          toolName: "place_pickup_order",
+          parameters: { item: "latte" },
+        },
+      ]).body!,
+      (event) => {
+        if (event.type === "message") emitted.push(event.message);
+      }
+    );
+    const approvalMessage = emitted.find((m) => m.variant === "approval");
+    expect(approvalMessage?.approval?.toolCallId).toBe("toolu_paused");
+  });
+});
+
+describe("AgentWidgetSession settles the approval-paused tool bubble", () => {
+  it("marks an approved call superseded and leaves the result on the re-run", async () => {
+    global.fetch = vi.fn().mockResolvedValue(resumeStream("approved"));
+    const { resolve, tool } = setup([pausedTool(), pendingApproval("toolu_paused")]);
+    await resolve("approved");
+
+    expect(tool()?.toolCall).toMatchObject({
+      status: "complete",
+      approvalStatus: "approved",
+      superseded: true,
+    });
+    expect(tool()?.toolCall?.success).toBeUndefined();
+    expect(tool()?.streaming).toBe(false);
+    expect(tool("toolu_rerun")?.toolCall).toMatchObject({
+      status: "complete",
+      result: { orderId: "ord_1" },
+    });
+  });
+
+  it("settles a denied call as failed with a Denied error", async () => {
+    global.fetch = vi.fn().mockResolvedValue(resumeStream("denied", false));
+    const { resolve, tool } = setup([pausedTool(), pendingApproval("toolu_paused")]);
+    await resolve("denied");
+
+    expect(tool()?.toolCall).toMatchObject({
+      status: "complete",
+      approvalStatus: "denied",
+      success: false,
+      error: "Denied",
+    });
+    expect(tool()?.toolCall?.superseded).toBeUndefined();
+  });
+
+  it("settles a timed-out call as failed", async () => {
+    global.fetch = vi.fn().mockResolvedValue(resumeStream("timeout", false));
+    const { resolve, tool } = setup([pausedTool(), pendingApproval("toolu_paused")]);
+    await resolve("denied");
+
+    expect(tool()?.toolCall).toMatchObject({
+      status: "complete",
+      approvalStatus: "timeout",
+      success: false,
+      error: "Approval timed out",
+    });
+  });
+
+  it("leaves the bubble running when the server refuses the decision", async () => {
+    global.fetch = vi.fn().mockResolvedValue(Response.json({ error: "Failed to process approval" }, { status: 500 }));
+    const { resolve, tool } = setup([pausedTool(), pendingApproval("toolu_paused")]);
+    await resolve("approved").catch(() => {});
+
+    expect(tool()?.toolCall?.status).toBe("running");
+    expect(tool()?.toolCall?.approvalStatus).toBeUndefined();
+  });
+
+  it("settles the call as timed out when the server reports the pause gone", async () => {
+    global.fetch = vi.fn().mockResolvedValue(
+      Response.json({ code: "APPROVAL_ALREADY_RESOLVED", message: "Already resolved" }, { status: 409 })
+    );
+    const { resolve, tool } = setup([pausedTool(), pendingApproval("toolu_paused")]);
+    await resolve("approved").catch(() => {});
+
+    expect(tool()?.toolCall).toMatchObject({
+      status: "complete",
+      approvalStatus: "timeout",
+      success: false,
+      error: "Approval timed out",
+    });
+  });
+
+  it("lets the server's own result for the paused id complete an approved call", async () => {
+    global.fetch = vi.fn().mockResolvedValue(
+      sse([
+        { type: "approval_complete", executionId: "exec_abc", approvalId: "appr_1", decision: "approved" },
+        { type: "tool_start", toolCallId: "toolu_paused", toolName: "place_pickup_order", toolType: "custom" },
+        {
+          type: "tool_complete",
+          toolCallId: "toolu_paused",
+          toolName: "place_pickup_order",
+          success: true,
+          result: { orderId: "ord_1" },
+        },
+        { type: "execution_complete", kind: "agent", success: true },
+      ])
+    );
+    const { resolve, tool, toolStates } = setup([pausedTool(), pendingApproval("toolu_paused")]);
+    await resolve("approved");
+
+    expect(tool()?.toolCall).toMatchObject({ status: "complete", result: { orderId: "ord_1" } });
+    expect(toolStates.some((state) => state?.superseded)).toBe(false);
+  });
+
+  it("lets the server's own failed result for the paused id complete a denied call", async () => {
+    global.fetch = vi.fn().mockResolvedValue(
+      sse([
+        { type: "approval_complete", executionId: "exec_abc", approvalId: "appr_1", decision: "denied" },
+        { type: "tool_start", toolCallId: "toolu_paused", toolName: "place_pickup_order", toolType: "custom" },
+        {
+          type: "tool_complete",
+          toolCallId: "toolu_paused",
+          toolName: "place_pickup_order",
+          success: false,
+          error: 'Tool "place_pickup_order" was denied by the user.',
+        },
+        { type: "execution_complete", kind: "agent", success: true },
+      ])
+    );
+    const { resolve, tool } = setup([pausedTool(), pendingApproval("toolu_paused")]);
+    await resolve("denied");
+
+    expect(tool()?.toolCall).toMatchObject({ status: "complete", success: false });
+    expect(tool()?.toolCall?.error).toContain("denied by the user");
+  });
+
+  it("does not touch a tool call that already completed", async () => {
+    global.fetch = vi.fn().mockResolvedValue(resumeStream("denied", false));
+    const { resolve, tool } = setup([pausedTool("complete"), pendingApproval("toolu_paused")]);
+    await resolve("denied");
+
+    expect(tool()?.toolCall?.success).toBeUndefined();
+    expect(tool()?.toolCall?.approvalStatus).toBeUndefined();
+  });
+
+  it("does nothing for an approval without a toolCallId", async () => {
+    global.fetch = vi.fn().mockResolvedValue(resumeStream("denied", false));
+    const { resolve, tool } = setup([pausedTool(), pendingApproval()]);
+    await resolve("denied");
+
+    expect(tool()?.toolCall?.status).toBe("running");
+  });
+
+  it("settles a denied call when the accepted denial has no stream body", async () => {
+    global.fetch = vi.fn().mockResolvedValue(new Response(null, { status: 200 }));
+    const { resolve, tool } = setup([pausedTool(), pendingApproval("toolu_paused")]);
+    await resolve("denied");
+
+    expect(tool()?.toolCall).toMatchObject({
+      status: "complete",
+      approvalStatus: "denied",
+      success: false,
+      error: "Denied",
+    });
+  });
+});
+
+describe("approval settles stay with the stream that decided them", () => {
+  const tool = (id: string): AgentWidgetMessage => ({
+    ...pausedTool(),
+    id: `tool-${id}`,
+    toolCall: { ...pausedTool().toolCall!, id },
+  });
+  const approval = (approvalId: string, toolCallId: string): AgentWidgetMessage => ({
+    ...pendingApproval(toolCallId),
+    id: `approval-${approvalId}`,
+    approval: { ...pendingApproval(toolCallId).approval!, id: approvalId, toolCallId },
+  });
+  const frame = (event: Record<string, unknown>) =>
+    new TextEncoder().encode(`data: ${JSON.stringify(event)}\n\n`);
+
+  it("does not settle another stream's paused call when one stream ends", async () => {
+    let messages: AgentWidgetMessage[] = [];
+    const session = new AgentWidgetSession(
+      {
+        clientToken: "ct_live_demo",
+        apiUrl: "https://api.runtype.com",
+        initialMessages: [tool("toolu_a"), approval("appr_a", "toolu_a"), tool("toolu_b"), approval("appr_b", "toolu_b")],
+      },
+      {
+        onMessagesChanged: (m) => { messages = m; },
+        onStatusChanged: () => {},
+        onStreamingChanged: () => {},
+        onError: () => {},
+      }
+    );
+    let controlB!: ReadableStreamDefaultController<Uint8Array>;
+    const streamB = new ReadableStream<Uint8Array>({ start: (c) => { controlB = c; } });
+    const connectedB = session.connectStream(streamB, { allowReentry: true });
+    controlB.enqueue(frame({ type: "approval_complete", executionId: "exec_b", approvalId: "appr_b", decision: "approved" }));
+    await new Promise((r) => setTimeout(r, 0));
+
+    await session.connectStream(
+      sse([
+        { type: "approval_complete", executionId: "exec_a", approvalId: "appr_a", decision: "approved" },
+        { type: "execution_complete", kind: "agent", success: true },
+      ]).body!,
+      { allowReentry: true }
+    );
+    const b = () => messages.find((m) => m.toolCall?.id === "toolu_b")?.toolCall;
+    expect(b()?.superseded).toBeUndefined();
+
+    controlB.enqueue(frame({ type: "tool_start", toolCallId: "toolu_b", toolName: "place_pickup_order", toolType: "custom" }));
+    controlB.enqueue(frame({ type: "tool_complete", toolCallId: "toolu_b", toolName: "place_pickup_order", success: true, result: { orderId: "ord_b" } }));
+    controlB.close();
+    await connectedB;
+    expect(b()).toMatchObject({ status: "complete", result: { orderId: "ord_b" } });
+    expect(b()?.superseded).toBeUndefined();
+  });
+});