@runtypelabs/persona 3.34.1 → 3.36.0

package/src/ui.approval-plugin.test.ts

@@ -104,7 +104,7 @@ describe("renderApproval plugin hook", () => {
         head.setAttribute("data-action", "toggle");
         const params = document.createElement("pre");
         params.setAttribute("data-test-id", "appr-params");
-        // Single delegated listener at the root — the recommended pattern.
+        // Single delegated listener at the root: the recommended pattern.
         root.addEventListener("click", (e) => {
           const target = (e.target as HTMLElement).closest("[data-action]");
           if (target?.getAttribute("data-action") === "toggle") {
@@ -125,7 +125,7 @@ describe("renderApproval plugin hook", () => {
     } as unknown as Parameters<typeof createAgentExperience>[1]);
 
     injectApproval(controller);
-    // Force a re-render — the scenario where innerHTML morph drops listeners
+    // Force a re-render: the scenario where innerHTML morph drops listeners
     // on a freshly-built plugin element unless it's hydrated post-morph.
     injectNoise(controller);
 
@@ -195,7 +195,7 @@ describe("renderApproval plugin hook", () => {
       plugins: [plugin],
     } as unknown as Parameters<typeof createAgentExperience>[1]);
 
-    // Inject directly in the resolved state — plugin opts out, built-in renders.
+    // Inject directly in the resolved state: plugin opts out, built-in renders.
     injectApproval(controller, { status: "approved" });
 
     expect(mount.querySelector('[data-test-id="custom-pending"]')).toBeNull();

package/src/ui.ask-user-question-plugin.test.ts

@@ -127,7 +127,7 @@ describe("renderAskUserQuestion plugin hook", () => {
     injectAskUserQuestion(controller);
     expect(mount.querySelector("[data-persona-ask-sheet-for]")).toBeNull();
 
-    // Force a re-render by injecting a second message — the ask_user_question
+    // Force a re-render by injecting a second message: the ask_user_question
     // wrapper now goes through the render path again. The built-in overlay
     // sheet must NOT appear; the plugin still owns the UI.
     controller.injectTestMessage({
@@ -158,7 +158,7 @@ describe("renderAskUserQuestion plugin hook", () => {
         btn.type = "button";
         btn.setAttribute("data-test-id", "click-pill");
         btn.textContent = "Pick me";
-        // Single delegated listener at root — pattern recommended for plugins.
+        // Single delegated listener at root: pattern recommended for plugins.
         root.addEventListener("click", (e) => {
           if ((e.target as HTMLElement).getAttribute("data-test-id") === "click-pill") {
             resolve("Pick me");
@@ -190,7 +190,7 @@ describe("renderAskUserQuestion plugin hook", () => {
 
     injectAskUserQuestion(controller);
 
-    // Force a re-render before the click — this is exactly the scenario
+    // Force a re-render before the click: this is exactly the scenario
     // where innerHTML-based morph used to drop listeners on the freshly-built
     // plugin root.
     controller.injectTestMessage({
@@ -226,7 +226,7 @@ describe("renderAskUserQuestion plugin hook", () => {
 
     // Plugin renders an interactive card while the question is awaiting an
     // answer. Once answered, the widget suppresses the original tool message
-    // entirely — the plugin renderer is invoked but returns null — and the
+    // entirely, the plugin renderer is invoked but returns null, and the
     // session injects Q→A pair messages (assistant question + user answer)
     // that render through the standard transcript pipeline.
     const plugin: AgentWidgetPlugin = {
@@ -350,7 +350,7 @@ describe("renderAskUserQuestion plugin hook", () => {
     (sheet.querySelector('[data-option-label="A"]') as HTMLElement).click();
     expect(sheet.getAttribute("data-ask-current-index")).toBe("1");
 
-    // Final page: pick should NOT auto-submit — Submit-all button still present.
+    // Final page: pick should NOT auto-submit: Submit-all button still present.
     (sheet.querySelector('[data-option-label="C"]') as HTMLElement).click();
     expect(sheet.getAttribute("data-ask-current-index")).toBe("2");
     (sheet.querySelector('[data-option-label="E"]') as HTMLElement).click();
@@ -519,12 +519,12 @@ describe("renderAskUserQuestion plugin hook", () => {
     expect(sheet.getAttribute("data-ask-layout")).toBe("rows");
     expect(sheet.getAttribute("data-ask-current-index")).toBe("0");
 
-    // Focus on body — no element inside the overlay subtree is focused.
+    // Focus on body: no element inside the overlay subtree is focused.
     if (document.activeElement && document.activeElement !== document.body) {
       (document.activeElement as HTMLElement).blur?.();
     }
 
-    // Dispatch the digit keypress on `mount` — the listener on `mount`
+    // Dispatch the digit keypress on `mount`: the listener on `mount`
     // catches it regardless of focus location. In grouped single-select mode,
     // a successful pick auto-advances to the next page (default behavior).
     mount.dispatchEvent(
@@ -564,7 +564,7 @@ describe("renderAskUserQuestion plugin hook", () => {
       new KeyboardEvent("keydown", { key: "2", bubbles: true })
     );
 
-    // No row should have been picked — input is the focused target so the
+    // No row should have been picked: input is the focused target so the
     // mount-level handler bails out.
     const beta = sheet.querySelector<HTMLElement>('[data-option-label="Beta"]')!;
     expect(beta.getAttribute("aria-pressed")).toBe("false");
@@ -572,7 +572,7 @@ describe("renderAskUserQuestion plugin hook", () => {
     controller.destroy();
   });
 
-  it("respects groupedAutoAdvance: false — pick stays on current page", () => {
+  it("respects groupedAutoAdvance: false: pick stays on current page", () => {
     const mount = createMount();
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",

package/src/ui.component-directive.test.ts

@@ -38,7 +38,7 @@ const directiveMessage = (
   });
 };
 
-describe("component directive bubble — listener preservation across morphs", () => {
+describe("component directive bubble: listener preservation across morphs", () => {
   beforeEach(() => {
     // The component registry is a singleton; clear it between tests so each
     // test starts from a clean slate.
@@ -89,7 +89,7 @@ describe("component directive bubble — listener preservation across morphs", (
     const formBefore = mount.querySelector<HTMLFormElement>('[data-test-id="test-form-el"]');
     expect(formBefore).not.toBeNull();
 
-    // Force another render pass — this is what triggered the bug pre-fix:
+    // Force another render pass: this is what triggered the bug pre-fix:
     // Idiomorph would replace the form via innerHTML serialization, dropping
     // the addEventListener-attached submit handler.
     controller.injectTestMessage({
@@ -103,7 +103,7 @@ describe("component directive bubble — listener preservation across morphs", (
       },
     });
 
-    // The form node should be the SAME instance — preserved by the live
+    // The form node should be the SAME instance: preserved by the live
     // wrapper's `data-preserve-runtime` and the post-morph hydrate skipping
     // when fingerprint is unchanged.
     const formAfter = mount.querySelector<HTMLFormElement>('[data-test-id="test-form-el"]');
@@ -145,7 +145,7 @@ describe("component directive bubble — listener preservation across morphs", (
     });
     expect(mount.querySelector('[data-test-id="test-badge"]')?.textContent).toBe("first");
 
-    // Same id, new props — fingerprint changes, so renderer should be invoked
+    // Same id, new props: fingerprint changes, so renderer should be invoked
     // again and the new element hydrated into the live wrapper.
     directiveMessage(controller, {
       id: "badge-1",

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

@@ -17,7 +17,7 @@ describe("createAgentExperience composer-bar mode", () => {
     }
   });
 
-  it("starts collapsed with pill geometry — bottom-centered, configured width on pillRoot", () => {
+  it("starts collapsed with pill geometry: bottom-centered, configured width on pillRoot", () => {
     const mount = document.createElement("div");
     document.body.appendChild(mount);
 
@@ -197,21 +197,20 @@ describe("createAgentExperience composer-bar mode", () => {
     expect(pillRoot).not.toBeNull();
     expect(wrapper!.dataset.state).toBe("collapsed");
     expect(pillRoot!.dataset.state).toBe("collapsed");
-    // Modal's expanded geometry on the wrapper must be cleared on close —
-    // the wrapper has no visible chrome in collapsed state since the
+    // Modal's expanded geometry on the wrapper must be cleared on close:    // the wrapper has no visible chrome in collapsed state since the
     // container is hidden via CSS and the pill lives in pillRoot.
     expect(wrapper!.style.transform).toBe("");
     expect(wrapper!.style.top).toBe("");
     expect(wrapper!.style.maxHeight).toBe("");
     expect(wrapper!.style.height).toBe("");
-    // Pill geometry on pillRoot is reapplied per state — bottom uses the
+    // Pill geometry on pillRoot is reapplied per state: bottom uses the
     // configured offset (default 16px).
     expect(pillRoot!.style.bottom).toBe("16px");
 
     controller.destroy();
   });
 
-  it("does NOT cap the pill composer form with contentMaxWidth — the pill matches the wrapper's responsive width", () => {
+  it("does NOT cap the pill composer form with contentMaxWidth: the pill matches the wrapper's responsive width", () => {
     const mount = document.createElement("div");
     document.body.appendChild(mount);
 
@@ -374,7 +373,7 @@ describe("createAgentExperience composer-bar mode", () => {
     controller.destroy();
   });
 
-  it("places the pill (footer) inside pillRoot — a viewport-fixed sibling of the wrapper, not inside the panel", () => {
+  it("places the pill (footer) inside pillRoot: a viewport-fixed sibling of the wrapper, not inside the panel", () => {
     const mount = document.createElement("div");
     document.body.appendChild(mount);
 
@@ -519,7 +518,7 @@ describe("createAgentExperience composer-bar mode", () => {
     expect(wrapper!.dataset.state).toBe("expanded");
 
     // Simulate a pointerdown anywhere outside the wrapper. Use document.body
-    // as the target — definitely outside the wrapper subtree.
+    // as the target: definitely outside the wrapper subtree.
     const outsideTarget = document.createElement("div");
     document.body.appendChild(outsideTarget);
     outsideTarget.dispatchEvent(
@@ -813,7 +812,7 @@ describe("createAgentExperience composer-bar mode", () => {
     panel!.dispatchEvent(new PointerEvent("pointerenter", { bubbles: true }));
 
     const textNode = getPeekText(mount)!;
-    // letter-rise wins over typewriter — peek-specific config beats inherit.
+    // letter-rise wins over typewriter: peek-specific config beats inherit.
     expect(textNode.classList.contains("persona-stream-letter-rise")).toBe(true);
     expect(textNode.classList.contains("persona-stream-typewriter")).toBe(false);
     expect(textNode.style.getPropertyValue("--persona-stream-step")).toBe("40ms");
@@ -945,7 +944,7 @@ describe("createAgentExperience composer-bar mode", () => {
 
     const textNode = getPeekText(mount)!;
     expect(textNode.querySelector(".persona-pill-peek__skeleton")).not.toBeNull();
-    // No char spans yet — skeleton stands alone.
+    // No char spans yet: skeleton stands alone.
     expect(textNode.querySelectorAll(".persona-stream-char").length).toBe(0);
 
     controller.destroy();
@@ -986,7 +985,7 @@ describe("createAgentExperience composer-bar mode", () => {
     const wrapper = mount.querySelector<HTMLElement>("[data-persona-composer-bar]");
     expect(wrapper!.dataset.state).toBe("expanded");
 
-    // Click inside the pill textarea — must keep the panel expanded.
+    // Click inside the pill textarea: must keep the panel expanded.
     const textarea = mount.querySelector<HTMLTextAreaElement>(
       "[data-persona-composer-input]"
     );
@@ -996,7 +995,7 @@ describe("createAgentExperience composer-bar mode", () => {
     );
     expect(wrapper!.dataset.state).toBe("expanded");
 
-    // Click inside the chat container body — must also keep the panel open.
+    // Click inside the chat container body: must also keep the panel open.
     const body = mount.querySelector<HTMLElement>(".persona-widget-body");
     expect(body).not.toBeNull();
     body!.dispatchEvent(

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

@@ -25,7 +25,7 @@ const press = (el: Element, key: string) =>
     new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true })
   );
 
-describe("createAgentExperience composer keyboard — Enter / Esc while streaming", () => {
+describe("createAgentExperience composer keyboard: Enter / Esc while streaming", () => {
   const originalFetch = global.fetch;
   let capturedSignals: AbortSignal[] = [];
 
@@ -38,7 +38,7 @@ describe("createAgentExperience composer keyboard — Enter / Esc while streamin
     vi.stubGlobal("cancelAnimationFrame", () => {});
     window.scrollTo = vi.fn();
 
-    // Fetch hangs until aborted — models an in-flight SSE stream so the widget
+    // Fetch hangs until aborted: models an in-flight SSE stream so the widget
     // stays "streaming".
     global.fetch = vi.fn().mockImplementation((_url: string, options: any) => {
       const signal = options.signal as AbortSignal;
@@ -80,7 +80,7 @@ describe("createAgentExperience composer keyboard — Enter / Esc while streamin
     expect(controller.getState().streaming).toBe(true);
     expect(capturedSignals).toHaveLength(1);
 
-    // Type something new, then hit Enter — it must be inert mid-stream.
+    // Type something new, then hit Enter: it must be inert mid-stream.
     textarea.value = "queued text";
     press(textarea, "Enter");
     await flush();
@@ -130,7 +130,7 @@ describe("createAgentExperience composer keyboard — Enter / Esc while streamin
   });
 });
 
-describe("createAgentExperience composer keyboard — Up/Down history", () => {
+describe("createAgentExperience composer keyboard: Up/Down history", () => {
   beforeEach(() => {
     window.scrollTo = vi.fn();
     try {
@@ -207,7 +207,7 @@ describe("createAgentExperience composer keyboard — Up/Down history", () => {
     textarea.setSelectionRange(5, 5); // caret mid-text
 
     press(textarea, "ArrowUp");
-    // Value unchanged — Up moved the cursor instead of recalling history.
+    // Value unchanged: Up moved the cursor instead of recalling history.
     expect(textarea.value).toBe("line one\nline two");
 
     controller.destroy();

package/src/ui.header-icon-color.test.ts

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+
+const createMount = () => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+// The header icon lives in the icon holder (the only `.persona-rounded-xl`
+// element in the header zone; the close/clear buttons are `.persona-rounded-full`).
+const HEADER_ICON_SELECTOR =
+  '[data-persona-theme-zone="header"] .persona-rounded-xl svg';
+
+describe("createAgentExperience header icon color", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("renders the header Lucide icon with currentColor so it inherits the themed icon color", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false, headerIconName: "bot" },
+    });
+
+    const icon = mount.querySelector<SVGElement>(HEADER_ICON_SELECTOR);
+    expect(icon).not.toBeNull();
+    expect(icon!.getAttribute("stroke")).toBe("currentColor");
+  });
+
+  it("keeps the header icon on currentColor after controller.update (regression: was hardcoded #ffffff)", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false, headerIconName: "bot", title: "Before" },
+    });
+
+    // A runtime update re-renders the header icon. It must preserve
+    // `currentColor` so the themed `--persona-header-icon-fg` keeps applying;
+    // previously this path hardcoded "#ffffff", so the icon color "wouldn't
+    // stick" whenever the theme editor (or any update) ran.
+    controller.update({
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false, headerIconName: "bot", title: "After" },
+    });
+
+    const icon = mount.querySelector<SVGElement>(HEADER_ICON_SELECTOR);
+    expect(icon).not.toBeNull();
+    expect(icon!.getAttribute("stroke")).toBe("currentColor");
+    expect(icon!.getAttribute("stroke")).not.toBe("#ffffff");
+  });
+});

package/src/ui.scroll.test.ts

@@ -808,7 +808,7 @@ describe("createAgentExperience streaming scroll", () => {
     expect(metrics.getScrollTop()).toBe(metrics.getBottomScrollTop());
 
     // Content grows with no render event (e.g. an image finishing loading
-    // mid-stream) — only the ResizeObserver sees it.
+    // mid-stream): only the ResizeObserver sees it.
     metrics.setScrollHeight(1200);
     resize.trigger();
     raf.flush();
@@ -869,8 +869,7 @@ describe("createAgentExperience streaming scroll", () => {
 
     expect(metrics.getScrollTop()).toBe(metrics.getBottomScrollTop());
 
-    // A selection forms inside the transcript (mouse drag or keyboard —
-    // both surface as selectionchange).
+    // A selection forms inside the transcript (mouse drag or keyboard:    // both surface as selectionchange).
     let currentSelection: Partial<Selection> | null = {
       isCollapsed: false,
       anchorNode: scrollContainer,
@@ -888,7 +887,7 @@ describe("createAgentExperience streaming scroll", () => {
     // Auto-follow paused: the selection isn't dragged out from under the user.
     expect(metrics.getScrollTop()).toBe(600);
 
-    // Drag-selecting toward the bottom edge auto-scrolls down — that must
+    // Drag-selecting toward the bottom edge auto-scrolls down: that must
     // not read as a resume gesture while the selection is still active.
     metrics.setScrollTop(metrics.getBottomScrollTop());
     scrollContainer!.dispatchEvent(new Event("scroll"));
@@ -1023,7 +1022,7 @@ describe("createAgentExperience streaming scroll", () => {
     );
     expect(spacer?.style.height).toBe("84px");
 
-    // The spacer's height is invisible to the mocked scroll metrics — apply
+    // The spacer's height is invisible to the mocked scroll metrics: apply
     // it manually so the anchor target is reachable, as in a real browser.
     metrics.setScrollHeight(1084);
     raf.flush();
@@ -1078,7 +1077,7 @@ describe("createAgentExperience streaming scroll", () => {
     Object.defineProperty(bubble!, "offsetTop", { value: 500 });
 
     raf.step(1); // anchor frame: starts the scroll animation
-    raf.step(1); // first animation frame — animation now in flight
+    raf.step(1); // first animation frame: animation now in flight
 
     // Jump to the latest mid-animation: the stale anchor animation must not
     // keep easing scrollTop back toward the old target.

package/src/ui.stop-button.test.ts

@@ -30,7 +30,7 @@ describe("createAgentExperience stop-streaming submit button", () => {
     vi.stubGlobal("cancelAnimationFrame", () => {});
     window.scrollTo = vi.fn();
 
-    // Fetch hangs until the caller aborts the signal — models an in-flight
+    // Fetch hangs until the caller aborts the signal: models an in-flight
     // SSE stream so the widget stays in the "streaming" state.
     global.fetch = vi.fn().mockImplementation((_url: string, options: any) => {
       const signal = options.signal as AbortSignal;
@@ -78,7 +78,7 @@ describe("createAgentExperience stop-streaming submit button", () => {
     expect(capturedSignals).toHaveLength(1);
     expect(capturedSignals[0].aborted).toBe(false);
 
-    // Second click — acts as "stop generating".
+    // Second click: acts as "stop generating".
     submit!.click();
 
     await flush();
@@ -89,8 +89,7 @@ describe("createAgentExperience stop-streaming submit button", () => {
     expect(capturedSignals).toHaveLength(1);
     // Typed text is preserved so the user can resend after stopping.
     expect(textarea.value).toBe("");
-    // (The textarea was cleared on the *first* submit, not by the stop click —
-    // that's fine because after cancel the user can keep typing.)
+    // (The textarea was cleared on the *first* submit, not by the stop click:    // that's fine because after cancel the user can keep typing.)
 
     controller.destroy();
   });

package/src/ui.suggest-replies.test.ts

@@ -62,7 +62,7 @@ const injectSuggestReplies = (
         args: { suggestions },
         chunks: [],
       },
-      // No executionId/awaitingLocalTool — rendering is driven purely by the
+      // No executionId/awaitingLocalTool: rendering is driven purely by the
       // message list; the auto-resume path is covered in
       // suggest-replies-tool.test.ts.
     },
@@ -167,7 +167,7 @@ describe("suggest_replies chips UI", () => {
     expect(chipButtons(mount, "Tell me more")).toHaveLength(1);
 
     // A display-only config update (e.g. theme tweak) re-renders the
-    // suggestions row — it must re-apply the agent-chips rule, not fall back
+    // suggestions row: it must re-apply the agent-chips rule, not fall back
     // to the static config chips (which are hidden mid-conversation).
     controller.update({
       apiUrl: "https://api.example.com/chat",