@runtypelabs/persona 4.8.0 → 4.10.0

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

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+
+// An update must not restyle or reveal header chrome the mount deliberately
+// set: the close button hidden on non-closeable panels, and the clear-chat
+// icon's stroke weight (builder and updater drifted to different constants).
+
+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;
+};
+
+const inlineConfig = () => ({
+  apiUrl: "https://api.example.com/chat",
+  launcher: { enabled: false },
+  attachments: { enabled: true },
+});
+
+describe("header stability across unrelated updates", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("keeps the close button hidden on a non-closeable panel after an unrelated update", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, inlineConfig());
+
+    const closeBtn = () =>
+      mount.querySelector<HTMLElement>('button[aria-label="Close chat"]')!;
+    expect(closeBtn().style.display).toBe("none");
+
+    controller.update({ attachments: { enabled: true, maxFiles: 2 } });
+    expect(closeBtn().style.display).toBe("none");
+
+    controller.destroy();
+  });
+
+  it("showCloseButton filters on top of toggleability, it cannot force-show", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, inlineConfig());
+
+    const closeBtn = () =>
+      mount.querySelector<HTMLElement>('button[aria-label="Close chat"]')!;
+
+    // Non-closeable panel stays hidden even with an explicit true (which is
+    // also the default, so it cannot mean force-show).
+    controller.update({ layout: { header: { showCloseButton: true } } });
+    expect(closeBtn().style.display).toBe("none");
+
+    controller.destroy();
+  });
+
+  it("still honors showCloseButton on a toggleable (launcher) panel", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: true, autoExpand: true },
+    });
+
+    const closeBtn = () =>
+      mount.querySelector<HTMLElement>('button[aria-label="Close chat"]')!;
+    expect(closeBtn().style.display).toBe("");
+
+    controller.update({ layout: { header: { showCloseButton: false } } });
+    expect(closeBtn().style.display).toBe("none");
+
+    controller.update({ layout: { header: { showCloseButton: true } } });
+    expect(closeBtn().style.display).toBe("");
+
+    controller.destroy();
+  });
+
+  it("keeps the clear-chat icon stroke weight stable across updates", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, inlineConfig());
+
+    const stroke = () =>
+      mount
+        .querySelector('button[aria-label="Clear chat"] svg')!
+        .getAttribute("stroke-width");
+    expect(stroke()).toBe("1");
+
+    controller.update({ attachments: { enabled: true, maxFiles: 2 } });
+    expect(stroke()).toBe("1");
+
+    controller.destroy();
+  });
+});
+
+describe("composer and header icon stability across unrelated updates", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("keeps the mic icon stroke and button color stable", () => {
+    window.scrollTo = vi.fn();
+    // The mic button only renders when speech recognition is available.
+    vi.stubGlobal("SpeechRecognition", class {});
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      voiceRecognition: { enabled: true },
+    });
+
+    const mic = () => mount.querySelector<HTMLElement>("[data-persona-composer-mic]")!;
+    expect(mic()).not.toBeNull();
+    expect(mic().querySelector("svg")!.getAttribute("stroke-width")).toBe("1.5");
+    expect(mic().style.color).toBe("var(--persona-text, #111827)");
+
+    controller.update({ attachments: { enabled: true } });
+
+    expect(mic().querySelector("svg")!.getAttribute("stroke-width")).toBe("1.5");
+    expect(mic().style.color).toBe("var(--persona-text, #111827)");
+
+    controller.destroy();
+  });
+
+  it("keeps display:block on close and clear-chat icons", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: true, autoExpand: true },
+    });
+
+    const iconDisplay = (label: string) =>
+      mount.querySelector<SVGElement>(`button[aria-label="${label}"] svg`)!.style.display;
+    expect(iconDisplay("Close chat")).toBe("block");
+    expect(iconDisplay("Clear chat")).toBe("block");
+
+    controller.update({ attachments: { enabled: true } });
+
+    expect(iconDisplay("Close chat")).toBe("block");
+    expect(iconDisplay("Clear chat")).toBe("block");
+
+    controller.destroy();
+  });
+});

package/src/ui.launcher-update-merge.test.ts

@@ -0,0 +1,83 @@
+// @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;
+};
+
+describe("createAgentExperience partial launcher update", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("preserves defaulted launcher styling when update() carries a partial launcher (regression: header buttons fell back to UA buttonface chrome)", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false, title: "Before" },
+    });
+
+    const closeBefore = mount.querySelector<HTMLButtonElement>('button[aria-label="Close chat"]');
+    const clearBefore = mount.querySelector<HTMLButtonElement>('button[aria-label="Clear chat"]');
+    expect(closeBefore).not.toBeNull();
+    expect(clearBefore).not.toBeNull();
+    // mergeWithDefaults supplies transparent button chrome at mount time.
+    expect(closeBefore!.style.backgroundColor).toBe("transparent");
+    expect(clearBefore!.style.backgroundColor).toBe("transparent");
+
+    // A partial launcher update (e.g. a live settings preview changing only
+    // the title) must not wholesale-replace the defaulted launcher config.
+    controller.update({ launcher: { enabled: false, title: "After" } });
+
+    const closeAfter = mount.querySelector<HTMLButtonElement>('button[aria-label="Close chat"]');
+    const clearAfter = mount.querySelector<HTMLButtonElement>('button[aria-label="Clear chat"]');
+    expect(closeAfter).not.toBeNull();
+    expect(clearAfter).not.toBeNull();
+    expect(closeAfter!.style.backgroundColor).toBe("transparent");
+    expect(clearAfter!.style.backgroundColor).toBe("transparent");
+  });
+
+  it("keeps nested clearChat overrides across unrelated launcher updates", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: {
+        enabled: false,
+        clearChat: { backgroundColor: "#123456" },
+      },
+    });
+
+    controller.update({ launcher: { enabled: false, title: "After" } });
+
+    const clear = mount.querySelector<HTMLButtonElement>('button[aria-label="Clear chat"]');
+    expect(clear).not.toBeNull();
+    expect(clear!.style.backgroundColor).toBe("rgb(18, 52, 86)");
+  });
+
+  it("keeps a clearChat override when a later update patches only launcher.dock", () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: {
+        enabled: false,
+        clearChat: { backgroundColor: "#123456" },
+      },
+    });
+
+    // A partial dock patch must not wholesale-replace the launcher group.
+    controller.update({ launcher: { dock: { side: "left" } } });
+
+    const clear = mount.querySelector<HTMLButtonElement>('button[aria-label="Clear chat"]');
+    expect(clear).not.toBeNull();
+    expect(clear!.style.backgroundColor).toBe("rgb(18, 52, 86)");
+  });
+});

package/src/ui.mention-submit.test.ts

@@ -0,0 +1,235 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  createAgentExperience,
+  mergeMentionContext,
+  mergeFinalizedMentions,
+} from "./ui";
+import { createStaticMentionSource } from "./utils/mention-matcher";
+import { loadContextMentions } from "./context-mentions-loader";
+import type { MentionSubmitBundle } from "./utils/context-mention-manager";
+
+const createMount = () => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+const flush = async (times = 8) => {
+  for (let i = 0; i < times; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await Promise.resolve();
+  }
+};
+
+// Deterministically flush the lazy mention chunk load → mount → open chain by
+// awaiting the same memoized loader promise the orchestrator uses, then pumping
+// a few macrotasks for the debounced menu search.
+const flushMentions = async () => {
+  await loadContextMentions().catch(() => {});
+  for (let i = 0; i < 8; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await new Promise((r) => setTimeout(r, 0));
+  }
+};
+
+const getTextarea = (mount: HTMLElement) =>
+  mount.querySelector<HTMLTextAreaElement>("[data-persona-composer-input]")!;
+
+const getSubmit = (mount: HTMLElement) =>
+  mount.querySelector<HTMLButtonElement>("[data-persona-composer-submit]")!;
+
+const press = (el: Element, key: string) =>
+  el.dispatchEvent(
+    new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true })
+  );
+
+// --- Bug 3: deep cross-bundle context merge (pure helpers) -----------------
+describe("mergeMentionContext / mergeFinalizedMentions", () => {
+  it("deep-merges per-item maps for a source present in both bundles", () => {
+    const a = { files: { app: "a-body" }, docs: { r: 1 } };
+    const b = { files: { readme: "b-body" }, links: { x: 2 } };
+    const merged = mergeMentionContext(a, b);
+    // The shared `files` source keeps BOTH items (shallow spread would drop `app`).
+    expect(merged.files).toEqual({ app: "a-body", readme: "b-body" });
+    expect(merged.docs).toEqual({ r: 1 });
+    expect(merged.links).toEqual({ x: 2 });
+  });
+
+  it("b wins on a genuine per-item collision", () => {
+    const merged = mergeMentionContext(
+      { files: { app: "old" } },
+      { files: { app: "new" } }
+    );
+    expect(merged.files).toEqual({ app: "new" });
+  });
+
+  it("concatenates blocks/contentParts and deep-merges context", () => {
+    const ra: MentionSubmitBundle = {
+      blocks: ["A"],
+      contentParts: [],
+      context: { files: { app: "a" } },
+    };
+    const rb: MentionSubmitBundle = {
+      blocks: ["B"],
+      contentParts: [],
+      context: { files: { readme: "b" } },
+    };
+    const out = mergeFinalizedMentions([ra, rb]);
+    expect(out.blocks).toEqual(["A", "B"]);
+    expect(out.context.files).toEqual({ app: "a", readme: "b" });
+  });
+
+  it("returns an empty bundle when nothing is fulfilled", () => {
+    expect(mergeFinalizedMentions([])).toEqual({
+      blocks: [],
+      contentParts: [],
+      context: {},
+    });
+  });
+});
+
+// --- Bug 1: double-submit re-entrancy guard --------------------------------
+describe("createAgentExperience: double-submit guard", () => {
+  const originalFetch = global.fetch;
+  let fetchCalls = 0;
+
+  beforeEach(() => {
+    fetchCalls = 0;
+    window.scrollTo = vi.fn();
+    vi.stubGlobal("requestAnimationFrame", (cb: (t: number) => void) => {
+      cb(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    // Fetch hangs (models an in-flight SSE stream) and counts invocations.
+    global.fetch = vi.fn().mockImplementation((_url: string, options: any) => {
+      fetchCalls += 1;
+      const signal = options.signal as AbortSignal;
+      return new Promise((_resolve, reject) => {
+        signal.addEventListener("abort", () => {
+          const err = new Error("aborted");
+          err.name = "AbortError";
+          reject(err);
+        });
+      });
+    }) as unknown as typeof fetch;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    global.fetch = originalFetch;
+    vi.restoreAllMocks();
+  });
+
+  it("two synchronous submits dispatch the message only once", async () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+    });
+
+    const textarea = getTextarea(mount);
+    textarea.value = "hello";
+
+    // Both clicks land inside the async pre-send window (isStreaming() is still
+    // false); the guard must swallow the second.
+    getSubmit(mount).click();
+    getSubmit(mount).click();
+    await flush();
+
+    expect(fetchCalls).toBe(1);
+    controller.destroy();
+  });
+});
+
+// --- Bug 4: history recall must not open the mention menu ------------------
+describe("createAgentExperience: history recall does not open the mention menu", () => {
+  beforeEach(() => {
+    window.scrollTo = vi.fn();
+    try {
+      window.localStorage.clear();
+    } catch {
+      /* jsdom edge cases */
+    }
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  const menuOpen = () =>
+    document.querySelector('[role="listbox"]') !== null ||
+    !!document
+      .querySelector("[aria-haspopup='listbox']")
+      ?.getAttribute("aria-expanded")
+      ?.includes("true");
+
+  it("recalling a message ending in '@word' keeps the menu closed and ArrowUp still navigates", async () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      contextMentions: {
+        enabled: true,
+        sources: [
+          createStaticMentionSource({
+            id: "files",
+            label: "Files",
+            items: [{ id: "app", label: "app" }],
+            resolve: (i: { label: string }) => ({ llmAppend: `body of ${i.label}` }),
+          }),
+        ],
+      },
+      initialMessages: [
+        {
+          id: "u1",
+          role: "user",
+          content: "first note",
+          createdAt: "2026-01-01T00:00:00.000Z",
+        },
+        {
+          id: "u2",
+          role: "user",
+          content: "second @app",
+          createdAt: "2026-01-01T00:00:02.000Z",
+        },
+      ],
+    });
+
+    const textarea = getTextarea(mount);
+
+    // Warm the lazy mention engine by opening the picker from its affordance
+    // button, so `engine` is live for the recall step below (a loaded engine is
+    // exactly the state in which the bug reopened the menu on synthetic input).
+    mount.querySelector<HTMLButtonElement>("[aria-haspopup='listbox']")!.click();
+    await flushMentions();
+    // If the harness can't drive the async menu open, this scenario can't be
+    // expressed; bail loudly rather than asserting a vacuous pass.
+    expect(menuOpen()).toBe(true);
+
+    // Close the menu, back to an empty composer.
+    press(textarea, "Escape");
+    await flush();
+    expect(menuOpen()).toBe(false);
+
+    // Recall the newest user message (ends in '@app'): its synthetic input must
+    // NOT reopen the menu (engine.handleInput would otherwise fire synchronously).
+    textarea.setSelectionRange(0, 0);
+    press(textarea, "ArrowUp");
+    await flush();
+    expect(textarea.value).toBe("second @app");
+    expect(menuOpen()).toBe(false);
+
+    // Because the menu stayed closed, ArrowUp is still owned by history nav.
+    textarea.setSelectionRange(0, 0);
+    press(textarea, "ArrowUp");
+    await flush();
+    expect(textarea.value).toBe("first note");
+
+    controller.destroy();
+  });
+});

package/src/ui.send-button-stream-update.test.ts

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+
+// An update() that lands during an active stream must not clobber the stop
+// icon back to the send icon: the button holds the stop glyph (owned by
+// setSendButtonMode) and the aria-label still reads "stop", so re-rendering
+// the send icon here produced a mid-stream icon/label mismatch.
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import { buildAssistantTurnFrames, createMockSSEStream } from "./testing/mock-stream";
+
+const sleep = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
+
+const createMount = () => {
+  const m = document.createElement("div");
+  document.body.appendChild(m);
+  return m;
+};
+
+describe("send button icon stability across a mid-stream update", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("keeps the stop icon after update() while streaming, and heals to send on completion", async () => {
+    window.scrollTo = vi.fn();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      sendButton: { useIcon: true, iconName: "arrow-up", stopIconName: "square" },
+    });
+
+    // The send button element is mutated in place by update(); hold the ref.
+    const btn = Array.from(mount.querySelectorAll("button")).find(
+      (b) => b.getAttribute("aria-label") === "Send message"
+    )!;
+    const glyph = () => btn.querySelector("svg")?.querySelector("rect, path")?.tagName.toLowerCase() ?? null;
+
+    // Send icon (arrow-up) is a <path>; stop icon (square) is a <rect>.
+    expect(glyph()).toBe("path");
+
+    const frames = buildAssistantTurnFrames({
+      executionId: "e1",
+      text: "a reasonably long streamed reply to keep the stream open",
+      chunkSize: 4,
+    });
+    const done = controller.connectStream(createMockSSEStream(frames, { delayMs: 40 }));
+
+    await sleep(80); // stop mode engages
+    expect(btn.getAttribute("aria-label")).toBe("Stop generating");
+    expect(glyph()).toBe("rect");
+
+    // Unrelated update mid-stream must not revert the stop icon.
+    controller.update({ attachments: { enabled: true } });
+    expect(btn.getAttribute("aria-label")).toBe("Stop generating");
+    expect(glyph()).toBe("rect");
+
+    await done;
+    await sleep(20);
+    // Completion returns the button to send mode.
+    expect(btn.getAttribute("aria-label")).toBe("Send message");
+    expect(glyph()).toBe("path");
+
+    controller.destroy();
+  });
+});