@runtypelabs/persona 4.23.1 → 4.24.0

package/src/ui.detached-panel.test.ts

@@ -82,10 +82,11 @@ describe("createAgentExperience detached panel", () => {
     setInnerWidth(originalInnerWidth);
   });
 
-  it("keeps flush sidebar chrome when detachedPanel is unset", () => {
+  it.each([false, true])("keeps flush sidebar chrome when detachedPanel is unset (v5=%s)", (v5Defaults) => {
     const mount = createMount();
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",
+      future: { v5Defaults },
       launcher: {
         sidebarMode: true,
         position: "bottom-right",
@@ -100,7 +101,9 @@ describe("createAgentExperience detached panel", () => {
     expect(wrapper.style.bottom).toBe("0px");
     expect(wrapper.style.right).toBe("0px");
     expect(wrapper.style.height).toBe("100vh");
-    expect(panel?.style.borderRadius).toBe("0px");
+    expect(panel?.style.borderRadius).toBe(
+      "var(--persona-components-panel-modes-sidebar-borderRadius, 0)"
+    );
 
     controller.destroy();
   });
@@ -172,11 +175,12 @@ describe("createAgentExperience detached panel", () => {
     controller.destroy();
   });
 
-  it("drops card chrome for docked + launcher off + detached on a mobile viewport", () => {
+  it.each([false, true])("drops card chrome for docked + launcher off + detached on a mobile viewport (v5=%s)", (v5Defaults) => {
     setInnerWidth(480);
     const mount = createMount();
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",
+      future: { v5Defaults },
       launcher: {
         mountMode: "docked",
         enabled: false,
@@ -188,7 +192,9 @@ describe("createAgentExperience detached panel", () => {
 
     // Host-layout goes flush fullscreen: no detached attribute, no card shadow or inset.
     expect(mount.hasAttribute("data-persona-panel-detached")).toBe(false);
-    expect(panel?.style.boxShadow).toBe("none");
+    expect(panel?.style.boxShadow).toBe(
+      "var(--persona-components-panel-modes-mobile-shadow, none)"
+    );
     expect(wrapper?.style.padding).toBe("");
 
     controller.destroy();
@@ -214,20 +220,24 @@ describe("createAgentExperience detached panel", () => {
     controller.destroy();
   });
 
-  it("renders a flush inline embed with no shadow; detached opts elevation back in", () => {
+  it.each([false, true])("renders a flush inline embed with no shadow; detached opts elevation back in (v5=%s)", (v5Defaults) => {
     const mount = createMount();
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",
+      future: { v5Defaults },
       launcher: { enabled: false },
     });
 
     const { panel } = queryEmbedRefs(mount);
-    expect(panel?.style.boxShadow).toBe("none");
+    expect(panel?.style.boxShadow).toBe(
+      "var(--persona-components-panel-modes-inline-shadow, none)"
+    );
     controller.destroy();
 
     const detachedMount = createMount();
     const detachedController = createAgentExperience(detachedMount, {
       apiUrl: "https://api.example.com/chat",
+      future: { v5Defaults },
       launcher: { enabled: false, detachedPanel: true },
     });
 
@@ -235,6 +245,23 @@ describe("createAgentExperience detached panel", () => {
     expect(detachedPanel?.style.boxShadow).toContain("--persona-panel-shadow");
     detachedController.destroy();
   });
+
+  it.each([false, true])("emits mode chrome tokens in defaults v%s", (v5Defaults) => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      future: { v5Defaults },
+      launcher: { enabled: false },
+    });
+
+    const { panel } = queryEmbedRefs(mount);
+    expect(mount.dataset.personaDefaults).toBe(v5Defaults ? "v5" : "v4");
+    expect(panel?.style.boxShadow).toBe(
+      "var(--persona-components-panel-modes-inline-shadow, none)"
+    );
+    expect(mount.style.getPropertyValue("--persona-components-panel-modes-inline-shadow")).toBe("none");
+    controller.destroy();
+  });
 });
 
 describe("createAgentExperience detached artifact split chrome", () => {

package/src/ui.docked.test.ts

@@ -10,6 +10,25 @@ describe("createAgentExperience docked mode", () => {
     document.body.innerHTML = "";
   });
 
+  it.each([false, true])("lets an active dark mode token override global panel chrome (v5=%s)", (v5Defaults) => {
+    const mount = document.createElement("div");
+    document.body.appendChild(mount);
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      colorScheme: "dark",
+      future: { v5Defaults },
+      launcher: { mountMode: "docked", autoExpand: true },
+      theme: { components: { panel: { border: "2px solid red" } } },
+      darkTheme: {
+        components: { panel: { modes: { docked: { border: "3px solid blue" } } } },
+      },
+    });
+
+    const container = mount.querySelector<HTMLElement>(".persona-widget-container");
+    expect(container?.style.border).toBe("3px solid blue");
+    controller.destroy();
+  });
+
   it("toggles docked panel open/closed; built-in launcher stays hidden (open via controller.open)", () => {
     const mount = document.createElement("div");
     document.body.appendChild(mount);

package/src/ui.header-update-stability.test.ts

@@ -94,6 +94,31 @@ describe("header stability across unrelated updates", () => {
 
     controller.destroy();
   });
+
+  it.each([false, true])("updates header padding through live theme variables without rebuilding the header (v5=%s)", (v5Defaults) => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, { ...inlineConfig(), future: { v5Defaults } });
+    const header = mount.querySelector<HTMLElement>(".persona-widget-header")!;
+
+    expect(header.style.padding).toBe(
+      "var(--persona-components-header-padding, 20px 24px)"
+    );
+    expect(mount.style.getPropertyValue("--persona-components-header-padding")).toBe(
+      v5Defaults ? "8px 8px 8px 16px" : "20px 24px"
+    );
+
+    controller.update({ theme: { components: { header: { padding: "12px 16px" } } } });
+    expect(mount.querySelector(".persona-widget-header")).toBe(header);
+    expect(mount.style.getPropertyValue("--persona-components-header-padding")).toBe(
+      "12px 16px"
+    );
+    expect(mount.style.getPropertyValue("--persona-components-header-minimalPadding")).toBe(
+      "12px 16px"
+    );
+
+    controller.destroy();
+  });
 });
 
 describe("composer and header icon stability across unrelated updates", () => {

package/src/ui.identity-proof.test.ts

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+
+import { afterEach, expect, it, vi } from 'vitest';
+import { createAgentExperience } from './ui';
+
+let controller: ReturnType<typeof createAgentExperience> | undefined;
+
+afterEach(() => {
+  controller?.destroy();
+  controller = undefined;
+  document.body.replaceChildren();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+it('forwards verified identity from the embedded composer on the first turn with history disabled', async () => {
+  const chatBodies: Array<Record<string, unknown>> = [];
+  vi.stubGlobal('fetch', vi.fn(async (url: string, init: RequestInit) => {
+    const body = JSON.parse(String(init.body));
+    if (url.endsWith('/init')) {
+      return Response.json({
+        sessionId: 'session-1',
+        expiresAt: new Date(Date.now() + 600_000).toISOString(),
+        flow: { id: 'agent-1', name: 'Agent', description: null },
+        config: { welcomeMessage: null, placeholder: 'Ask...', theme: null },
+      });
+    }
+    chatBodies.push(body);
+    if (!body.identityProof) {
+      return Response.json({ error: 'Tenant scope required' }, { status: 403 });
+    }
+    return new Response('data: {"type":"done"}\n\n', {
+      headers: { 'Content-Type': 'text/event-stream' },
+    });
+  }));
+  const mount = document.createElement('div');
+  document.body.appendChild(mount);
+  const getIdentityProof = vi.fn().mockResolvedValue('signed-organization-proof');
+  controller = createAgentExperience(mount, {
+    apiUrl: 'https://example.com',
+    clientToken: 'ct_test_identity',
+    agentId: 'agent-1',
+    identityProvider: 'clerk',
+    getIdentityProof,
+    features: { history: { enabled: false } },
+    launcher: { enabled: false },
+    persistState: false,
+  });
+  const textarea = mount.querySelector<HTMLTextAreaElement>('[data-persona-composer-input]')!;
+  textarea.value = 'Show my orders';
+  textarea.dispatchEvent(new Event('input', { bubbles: true }));
+  mount.querySelector<HTMLFormElement>('[data-persona-composer-form]')!
+    .dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+  await vi.waitFor(() => expect(chatBodies).toHaveLength(1));
+  expect(chatBodies[0].identityProof).toEqual({ provider: 'clerk', token: 'signed-organization-proof' });
+  expect(getIdentityProof).toHaveBeenCalledTimes(1);
+  expect(mount.querySelector('[data-persona-history-toggle]')).toBeNull();
+});

package/src/ui.launcher-teaser.test.ts

@@ -60,6 +60,31 @@ describe("launcher teaser", () => {
     controller.destroy();
   });
 
+  it("keeps the defaults-version root attribute in parity through critical-launcher handoff", () => {
+    const prefix = nextPrefix();
+    const config = {
+      apiUrl: "https://api.example.com/chat",
+      persistState: { keyPrefix: prefix },
+      future: { v5Defaults: false },
+    };
+    const host = createMount();
+    const controller = createAgentExperience(host, config);
+    const criticalTarget = createMount();
+    const critical = mountCriticalLauncher({ target: criticalTarget, config, onOpen: () => {} });
+
+    expect(host.getAttribute("data-persona-defaults")).toBe("v4");
+    expect(critical.root.getAttribute("data-persona-defaults")).toBe("v4");
+
+    controller.update({ future: { v5Defaults: true } });
+    critical.update({ ...config, future: { v5Defaults: true } });
+
+    expect(host.getAttribute("data-persona-defaults")).toBe("v5");
+    expect(critical.root.getAttribute("data-persona-defaults")).toBe("v5");
+
+    critical.destroy();
+    controller.destroy();
+  });
+
   it("live-updates the teaser through controller.update()", () => {
     const prefix = nextPrefix();
     const host = createMount();

package/src/ui.message-width.test.ts

@@ -135,6 +135,21 @@ describe("createAgentExperience: role-specific message width", () => {
     controller.destroy();
   });
 
+  it.each([false, true])("allows explicit max-width tokens on full rows with v5Defaults=%s", (v5Defaults) => {
+    const mount = createMount();
+    const controller = createController(mount, {
+      future: { v5Defaults },
+      theme: { components: { message: { assistant: { maxWidth: "65ch" } } } },
+      layout: { messages: { assistant: { width: "full" } } },
+    });
+    injectMessage(controller, { id: "token-width", role: "assistant", content: "Response" });
+    expectRowLayout(getRow(mount, "token-width"), {
+      role: "assistant", width: "full", maxWidth: "var(--persona-message-assistant-max-width, 100%)",
+    });
+    expect(mount.style.getPropertyValue("--persona-message-assistant-max-width")).toBe("65ch");
+    controller.destroy();
+  });
+
   it("configures user and assistant geometry independently", () => {
     const mount = createMount();
     const controller = createController(mount, {
@@ -165,7 +180,7 @@ describe("createAgentExperience: role-specific message width", () => {
     expectRowLayout(getRow(mount, "assistant-full"), {
       role: "assistant",
       width: "full",
-      maxWidth: "100%",
+      maxWidth: "var(--persona-message-assistant-max-width, 100%)",
     });
 
     controller.destroy();
@@ -316,7 +331,7 @@ describe("createAgentExperience: role-specific message width", () => {
     expectRowLayout(userRow, {
       role: "user",
       width: "full",
-      maxWidth: "100%",
+      maxWidth: "var(--persona-message-user-max-width, 100%)",
     });
     expect(userRow.querySelector(":scope > [data-custom-user]")).not.toBeNull();
 

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

@@ -81,6 +81,22 @@ const injectText = (
 const rowOf = (mount: HTMLElement, id: string) =>
   mount.querySelector<HTMLElement>(`#wrapper-${id}`);
 
+const toggleExpansion = (mount: HTMLElement, id: string, bubbleType: "reasoning" | "tool") => {
+  const header = rowOf(mount, id)?.querySelector<HTMLElement>(
+    `button[data-bubble-type="${bubbleType}"]`
+  );
+  expect(header).not.toBeNull();
+  header?.dispatchEvent(new Event("pointerdown", { bubbles: true }));
+};
+
+const expansionStateOf = (mount: HTMLElement, id: string, bubbleType: "reasoning" | "tool") => {
+  const header = rowOf(mount, id)?.querySelector<HTMLElement>(
+    `button[data-bubble-type="${bubbleType}"]`
+  );
+  expect(header).not.toBeNull();
+  return header!.getAttribute("aria-expanded");
+};
+
 describe("features.reasoningDisplay.iconName", () => {
   beforeEach(() => {
     window.localStorage.clear();
@@ -296,3 +312,79 @@ describe("features.toolCallDisplay.completedVisibility", () => {
     ).toEqual("complete");
   });
 });
+
+describe("expandable transcript state", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.stubGlobal("requestAnimationFrame", (cb: (time: number) => void) => {
+      cb(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    window.scrollTo = vi.fn();
+  });
+
+  afterEach(() => {
+    controllers.splice(0).forEach((controller) => controller.destroy());
+    mounts.splice(0).forEach((mount) => mount.remove());
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("keeps tool and reasoning expansion separate for widgets with matching message ids", () => {
+    const first = makeController();
+    injectReasoning(first.controller, "shared-reasoning", "complete");
+    injectToolCall(first.controller, "shared-tool", "complete");
+    toggleExpansion(first.mount, "shared-reasoning", "reasoning");
+    toggleExpansion(first.mount, "shared-tool", "tool");
+    expect(expansionStateOf(first.mount, "shared-reasoning", "reasoning")).toBe("true");
+    expect(expansionStateOf(first.mount, "shared-tool", "tool")).toBe("true");
+
+    // The transcript derives DOM ids from the message id. Keep both widgets
+    // mounted while removing only the first rendered row ids so the fixture
+    // can model equal message ids without duplicate document ids.
+    first.mount.querySelectorAll("[id]").forEach((element) => element.removeAttribute("id"));
+
+    const second = makeController();
+    injectReasoning(second.controller, "shared-reasoning", "complete");
+    injectToolCall(second.controller, "shared-tool", "complete");
+
+    expect(expansionStateOf(second.mount, "shared-reasoning", "reasoning")).toBe("false");
+    expect(expansionStateOf(second.mount, "shared-tool", "tool")).toBe("false");
+  });
+
+  it("resets tool and reasoning expansion on clearChat", () => {
+    const { mount, controller } = makeController();
+    injectReasoning(controller, "reasoning-after-clear", "complete");
+    injectToolCall(controller, "tool-after-clear", "complete");
+    toggleExpansion(mount, "reasoning-after-clear", "reasoning");
+    toggleExpansion(mount, "tool-after-clear", "tool");
+    expect(expansionStateOf(mount, "reasoning-after-clear", "reasoning")).toBe("true");
+    expect(expansionStateOf(mount, "tool-after-clear", "tool")).toBe("true");
+
+    controller.clearChat();
+    injectReasoning(controller, "reasoning-after-clear", "complete");
+    injectToolCall(controller, "tool-after-clear", "complete");
+
+    expect(expansionStateOf(mount, "reasoning-after-clear", "reasoning")).toBe("false");
+    expect(expansionStateOf(mount, "tool-after-clear", "tool")).toBe("false");
+  });
+
+  it("releases expansion state when a widget is destroyed", () => {
+    const first = makeController();
+    injectReasoning(first.controller, "reasoning-after-destroy", "complete");
+    injectToolCall(first.controller, "tool-after-destroy", "complete");
+    toggleExpansion(first.mount, "reasoning-after-destroy", "reasoning");
+    toggleExpansion(first.mount, "tool-after-destroy", "tool");
+    expect(expansionStateOf(first.mount, "reasoning-after-destroy", "reasoning")).toBe("true");
+    expect(expansionStateOf(first.mount, "tool-after-destroy", "tool")).toBe("true");
+    first.controller.destroy();
+
+    const second = makeController();
+    injectReasoning(second.controller, "reasoning-after-destroy", "complete");
+    injectToolCall(second.controller, "tool-after-destroy", "complete");
+
+    expect(expansionStateOf(second.mount, "reasoning-after-destroy", "reasoning")).toBe("false");
+    expect(expansionStateOf(second.mount, "tool-after-destroy", "tool")).toBe("false");
+  });
+});

package/src/ui.rebuild-composer.test.ts

@@ -366,23 +366,40 @@ describe("rebuildComposer (composer ctx requestRender)", () => {
     expect(footer.style.display).toBe("none");
   });
 
-  it("keeps the floating panel's fixed height across a rebuild", () => {
+  it.each([false, true])("keeps the floating panel's fixed height across a rebuild (v5=%s)", (v5Defaults) => {
     // applyFullHeightStyles wipes panel.style.cssText and only restores width;
     // the fixed height belongs to recalcPanelHeight. Without a re-stamp in
     // syncPanelChrome, a rebuild leaves the floating panel height-less and it
     // grows to fit its content (pre-chat submit stretched to the viewport).
     const { plugin, state } = createGatePlugin();
     const { mount } = makeController({
+      future: { v5Defaults },
       plugins: [plugin],
       launcher: { enabled: true },
     });
 
+    expect(mount.style.getPropertyValue("--persona-components-panel-height")).toBe(v5Defaults ? "min(704px, calc(100dvh - 104px))" : "min(640px, max(200px, calc(100vh - 64px)))");
     const panel = mount.querySelector<HTMLElement>(".persona-widget-panel")!;
-    expect(panel.style.height).toBe("640px");
+    expect(panel.style.height).toBe("max(200px, var(--persona-components-panel-height))");
 
     state.ctx!.requestRender();
 
-    expect(panel.style.height).toBe("640px");
+    expect(panel.style.height).toBe("max(200px, var(--persona-components-panel-height))");
+  });
+
+  it.each([false, true])("retains transient connection status through a composer rebuild (v5=%s)", (v5Defaults) => {
+    const { plugin, state } = createGatePlugin();
+    state.gated = false;
+    const { mount, controller } = makeController({
+      plugins: [plugin], future: { v5Defaults },
+      statusIndicator: { mode: "transient", connectingText: "Connecting now" },
+    });
+    controller.injectTestMessage({ type: "status", status: "connecting" });
+    state.ctx!.requestRender();
+    const status = mount.querySelector<HTMLElement>("[data-persona-composer-status]")!;
+    expect(status.style.display).toBe("");
+    expect(status.textContent).toBe("Connecting now");
+    expect(status.nextElementSibling?.matches("[data-persona-composer-form]")).toBe(true);
   });
 
   it("does not stamp copy onto a plugin-owned composer's input", () => {

package/src/ui.scroll.test.ts

@@ -818,6 +818,38 @@ describe("createAgentExperience streaming scroll", () => {
     controller.destroy();
   });
 
+  describe.each([false, true])('manual activity disclosure (V5 %s)', v5Defaults => {
+    it.each(['pointer', 'keyboard'])('keeps the viewport after %s expansion and later content growth', activation => {
+      const raf = installRafMock();
+      const resize = installResizeObserverMock();
+      const mount = createMount();
+      const controller = createAgentExperience(mount, {
+        apiUrl: '/test', future: { v5Defaults }, launcher: { enabled: false },
+        features: { toolCallDisplay: { variant: 'row', grouped: false, autoExpand: false } }
+      });
+      const body = mount.querySelector<HTMLElement>('#persona-scroll-container')!;
+      const metrics = installScrollMetrics(body, { scrollHeight: 1000, clientHeight: 400 });
+      controller.injectTestMessage({ type: 'message', message: {
+        id: 'tool-scroll', role: 'assistant', content: '', createdAt: STREAM_CREATED_AT,
+        variant: 'tool', toolCall: { id: 'tool-scroll', name: 'Search', status: 'complete', result: 'Long result' }
+      } });
+      raf.flush();
+      metrics.setScrollTop(600);
+      const header = mount.querySelector<HTMLButtonElement>('[data-message-id="tool-scroll"] > button')!;
+      header.dispatchEvent(activation === 'pointer'
+        ? new MouseEvent('pointerdown', { bubbles: true, cancelable: true })
+        : new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+      expect(header.getAttribute('aria-expanded')).toBe('true');
+      metrics.setScrollHeight(1400);
+      resize.trigger(); raf.flush();
+      expect(metrics.getScrollTop()).toBe(600);
+      metrics.setScrollHeight(1600);
+      resize.trigger(); raf.flush();
+      expect(metrics.getScrollTop()).toBe(600);
+      controller.destroy();
+    });
+  });
+
   it("does not yank a paused reader when content grows without a render event", () => {
     const raf = installRafMock();
     const resize = installResizeObserverMock();