@runtypelabs/persona 4.17.1 → 4.18.0

package/src/ui.artifact-rail-resize.test.ts

@@ -0,0 +1,235 @@
+// @vitest-environment jsdom
+
+/**
+ * The history rail beside a resizable artifact split: the rail/panel width
+ * fallback measures the whole split, not the chat column the artifact pane
+ * borrows from, and an artifact drag reserves room for a docked rail plus a
+ * readable transcript.
+ */
+
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import { createHistoryView } from "./components/history-view";
+import { setHistoryViewLoader } from "./history-view-loader";
+import { setHistoryProviderFactory } from "./internal/history-provider-registry";
+import {
+  createDemoHistoryProvider,
+  type DemoHistoryConversationSeed,
+} from "./internal/demo-history-provider";
+import { ARTIFACT_RESIZE_RAILED_TRANSCRIPT_MIN_PX } from "./utils/artifact-resize";
+
+const SEEDS: DemoHistoryConversationSeed[] = [
+  {
+    id: "conv-a",
+    title: "Order status",
+    targetId: null,
+    messages: [{ id: "a1", role: "user", content: "where is my order" }],
+  },
+];
+
+const RAIL_WIDTH = 260;
+const SPLIT_WIDTH = 1200;
+
+beforeAll(() => {
+  if (!window.matchMedia) {
+    window.matchMedia = ((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    })) as unknown as typeof window.matchMedia;
+  }
+});
+
+const mounts: HTMLElement[] = [];
+const controllers: ReturnType<typeof createAgentExperience>[] = [];
+
+const flush = async (times = 12) => {
+  for (let i = 0; i < times; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await Promise.resolve();
+  }
+};
+
+/** jsdom measures nothing; every width in these tests is stated outright. */
+const setWidth = (element: HTMLElement, width: number): void => {
+  element.getBoundingClientRect = () =>
+    ({
+      width,
+      height: 0,
+      top: 0,
+      left: 0,
+      right: width,
+      bottom: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    }) as DOMRect;
+  Object.defineProperty(element, "clientWidth", {
+    configurable: true,
+    get: () => width,
+  });
+};
+
+const setup = (options: { containerWidth?: number } = {}) => {
+  setHistoryProviderFactory(() => createDemoHistoryProvider({ conversations: SEEDS }));
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  mounts.push(mount);
+  const controller = createAgentExperience(mount, {
+    apiUrl: "https://api.example.com/chat",
+    launcher: { enabled: false },
+    persistState: { keyPrefix: "persona-artifact-rail-test-" },
+    suggestionChips: [],
+    features: {
+      history: { enabled: true, presentation: "rail" },
+      artifacts: {
+        enabled: true,
+        allowedTypes: ["markdown"],
+        layout: { resizable: true },
+      },
+    },
+  } as unknown as Parameters<typeof createAgentExperience>[1]);
+  controllers.push(controller);
+  const container = mount.querySelector<HTMLElement>(".persona-widget-container")!;
+  setWidth(container, options.containerWidth ?? SPLIT_WIDTH);
+  setWidth(splitRoot(mount), SPLIT_WIDTH);
+  controller.update({});
+  return { mount, controller };
+};
+
+const splitRoot = (mount: HTMLElement) =>
+  mount.querySelector<HTMLElement>(".persona-artifact-split-root")!;
+const paneEl = (mount: HTMLElement) =>
+  mount.querySelector<HTMLElement>(".persona-artifact-pane")!;
+const artifactHandle = (mount: HTMLElement) =>
+  mount.querySelector<HTMLElement>(".persona-artifact-split-handle")!;
+const railHostOf = (mount: HTMLElement) =>
+  mount.querySelector<HTMLElement>(".persona-history-rail-host");
+const historyButton = (mount: HTMLElement) =>
+  mount.querySelector<HTMLButtonElement>("[data-persona-history-toggle]")!;
+const presentationOf = (mount: HTMLElement) =>
+  mount
+    .querySelector<HTMLElement>("[data-persona-history-presentation]")
+    ?.getAttribute("data-persona-history-presentation") ?? null;
+
+const openHistory = async (mount: HTMLElement) => {
+  historyButton(mount).dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true, detail: 1 })
+  );
+  await flush();
+};
+
+const addArtifact = (controller: ReturnType<typeof createAgentExperience>) => {
+  controller.upsertArtifact({
+    id: "art-1",
+    title: "Draft",
+    artifactType: "markdown",
+    content: "# Draft",
+  });
+};
+
+/** Drags the artifact divider by `dx` px (negative widens the pane). */
+const dragArtifact = (mount: HTMLElement, dx: number) => {
+  const handle = artifactHandle(mount);
+  handle.dispatchEvent(
+    new MouseEvent("pointerdown", {
+      bubbles: true,
+      cancelable: true,
+      button: 0,
+      clientX: 0,
+    })
+  );
+  document.dispatchEvent(new MouseEvent("pointermove", { clientX: dx }));
+  document.dispatchEvent(new MouseEvent("pointerup", { clientX: dx }));
+  return Number.parseFloat(paneEl(mount).style.width);
+};
+
+describe("history rail beside a resizable artifact split", () => {
+  beforeEach(() => {
+    window.scrollTo = vi.fn();
+    setHistoryViewLoader(async () => ({ createHistoryView }));
+  });
+
+  afterEach(() => {
+    setHistoryProviderFactory(null);
+    controllers.splice(0).forEach((controller) => {
+      try {
+        controller.destroy();
+      } catch {
+        /* already destroyed */
+      }
+    });
+    mounts.splice(0).forEach((mount) => mount.remove());
+    document.body.innerHTML = "";
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("resolves the presentation from the split root, not the borrowed chat width", async () => {
+    // The artifact pane has taken most of the row: the chat column is far under
+    // the rail's own minimum, the split root is not.
+    const { mount } = setup({ containerWidth: 400 });
+    await openHistory(mount);
+    expect(presentationOf(mount)).toBe("rail");
+    expect(railHostOf(mount)).not.toBeNull();
+  });
+
+  it("still flips to panel when the split root itself is narrow", async () => {
+    const { mount } = setup({ containerWidth: 400 });
+    await openHistory(mount);
+    expect(presentationOf(mount)).toBe("rail");
+
+    // A real host/window narrowing shrinks the split root too.
+    setWidth(splitRoot(mount), 600);
+    window.dispatchEvent(new Event("resize"));
+    await flush();
+    expect(presentationOf(mount)).toBe("panel");
+    expect(railHostOf(mount)).toBeNull();
+  });
+
+  it("reserves the docked rail plus a readable transcript while dragging", async () => {
+    const { mount, controller } = setup();
+    await openHistory(mount);
+    const railHost = railHostOf(mount)!;
+    setWidth(railHost, RAIL_WIDTH);
+    addArtifact(controller);
+
+    const width = dragArtifact(mount, -2000);
+    const reserved = RAIL_WIDTH + ARTIFACT_RESIZE_RAILED_TRANSCRIPT_MIN_PX;
+    expect(width).toBeGreaterThan(0);
+    expect(width).toBeLessThanOrEqual(SPLIT_WIDTH - reserved);
+    // Everything the reserve does not claim is still draggable (gap 0, handle <= 6).
+    expect(width).toBeGreaterThanOrEqual(SPLIT_WIDTH - reserved - 6);
+  });
+
+  it("keeps the flat chat minimum when no rail is docked", async () => {
+    const { mount, controller } = setup();
+    addArtifact(controller);
+
+    const width = dragArtifact(mount, -2000);
+    const reserved = RAIL_WIDTH + ARTIFACT_RESIZE_RAILED_TRANSCRIPT_MIN_PX;
+    expect(width).toBeGreaterThan(SPLIT_WIDTH - reserved);
+    expect(width).toBeLessThanOrEqual(SPLIT_WIDTH - 200);
+  });
+
+  it("keeps the rail docked after a drag that widened the pane", async () => {
+    const { mount, controller } = setup();
+    await openHistory(mount);
+    setWidth(railHostOf(mount)!, RAIL_WIDTH);
+    addArtifact(controller);
+    const width = dragArtifact(mount, -2000);
+
+    // The chat column now measures what the pane left it; the rail must survive.
+    setWidth(mount.querySelector<HTMLElement>(".persona-widget-container")!, SPLIT_WIDTH - width);
+    window.dispatchEvent(new Event("resize"));
+    await flush();
+    expect(presentationOf(mount)).toBe("rail");
+    expect(railHostOf(mount)).not.toBeNull();
+  });
+});

package/src/ui.attachments-drop.test.ts

@@ -256,6 +256,7 @@ describe("attachment button live config updates", () => {
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",
       launcher: { enabled: false },
+      tooltip: { delayMs: 0 },
       attachments: { enabled: true, buttonIconName: "paperclip", buttonTooltipText: "Attach file" },
     });
 

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

@@ -87,10 +87,10 @@ describe("header stability across unrelated updates", () => {
       mount
         .querySelector('button[aria-label="Clear chat"] svg')!
         .getAttribute("stroke-width");
-    expect(stroke()).toBe("1");
+    expect(stroke()).toBe("1.5");
 
     controller.update({ attachments: { enabled: true, maxFiles: 2 } });
-    expect(stroke()).toBe("1");
+    expect(stroke()).toBe("1.5");
 
     controller.destroy();
   });

package/src/ui.history-chunk.test.ts

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+
+/**
+ * Lazy-chunk transport for the Messages surface. Lives in its own file because
+ * `loadHistoryView` memoizes the resolved module for the lifetime of the module
+ * graph: a successful load anywhere in a file would mask the failure path.
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import { createHistoryView } from "./components/history-view";
+import { setHistoryViewLoader } from "./history-view-loader";
+import { setHistoryProviderFactory } from "./internal/history-provider-registry";
+import { createDemoHistoryProvider } from "./internal/demo-history-provider";
+
+const flush = async (times = 12) => {
+  for (let i = 0; i < times; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await Promise.resolve();
+  }
+};
+
+describe("history lazy chunk", () => {
+  let controller: ReturnType<typeof createAgentExperience> | null = null;
+  let mount: HTMLElement | null = null;
+
+  beforeEach(() => {
+    window.scrollTo = vi.fn();
+    setHistoryProviderFactory(() => createDemoHistoryProvider());
+  });
+
+  afterEach(() => {
+    setHistoryProviderFactory(null);
+    controller?.destroy();
+    controller = null;
+    mount?.remove();
+    mount = null;
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("keeps the conversation interactive on a rejected load and retries later", async () => {
+    setHistoryViewLoader(async () => {
+      throw new Error("chunk rejected");
+    });
+    mount = document.createElement("div");
+    document.body.appendChild(mount);
+    controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      persistState: false,
+      features: { history: { enabled: true } },
+    } as unknown as Parameters<typeof createAgentExperience>[1]);
+
+    mount.querySelector<HTMLButtonElement>("[data-persona-history-toggle]")!.click();
+    await flush();
+
+    expect(mount.querySelector(".persona-history-view")).toBeNull();
+    expect(controller.isHistoryVisible()).toBe(false);
+    const body = mount.querySelector<HTMLElement>("#persona-scroll-container")!;
+    expect(body.style.display).not.toBe("none");
+    expect(body.hasAttribute("inert")).toBe(false);
+
+    // A dropped fetch must not disable the feature for the session.
+    setHistoryViewLoader(async () => ({ createHistoryView }));
+    mount.querySelector<HTMLButtonElement>("[data-persona-history-toggle]")!.click();
+    await flush();
+    expect(mount.querySelector(".persona-history-view")).not.toBeNull();
+    expect(controller.isHistoryVisible()).toBe(true);
+  });
+});

package/src/ui.history-config-provider.test.ts

@@ -0,0 +1,318 @@
+// @vitest-environment jsdom
+
+/**
+ * Public `features.history.provider`: a host-supplied history backend in a
+ * custom-backend session (`apiUrl`, no client token), the factory's
+ * once-per-instance contract, registry precedence, and the affordance-hiding
+ * optional capabilities.
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import { createHistoryView } from "./components/history-view";
+import { setHistoryViewLoader } from "./history-view-loader";
+import { setHistoryProviderFactory } from "./internal/history-provider-registry";
+import {
+  createDemoHistoryProvider,
+  type DemoHistoryConversationSeed,
+  type DemoHistoryProvider,
+} from "./internal/demo-history-provider";
+import type { HistoryProvider } from "./internal/history-provider";
+import { HistoryProviderError, isHistoryProviderError } from "./index-core";
+
+const SEEDS: DemoHistoryConversationSeed[] = [
+  {
+    id: "conv-a",
+    title: "Order status",
+    targetId: null,
+    messages: [
+      { id: "a1", role: "user", content: "where is my order" },
+      { id: "a2", role: "assistant", content: "it ships tomorrow" },
+    ],
+  },
+  {
+    id: "conv-b",
+    title: "Refund request",
+    targetId: null,
+    messages: [{ id: "b1", role: "user", content: "refund please" }],
+  },
+];
+
+const flush = async (times = 12) => {
+  for (let i = 0; i < times; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await Promise.resolve();
+  }
+};
+
+const mounts: HTMLElement[] = [];
+const controllers: Array<ReturnType<typeof createAgentExperience>> = [];
+
+/** Custom-backend session: `apiUrl` only, so client-token mode is off. */
+const setup = (
+  historyFeature: Record<string, unknown>,
+  extraConfig: Record<string, unknown> = {}
+) => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  mounts.push(mount);
+  const controller = createAgentExperience(mount, {
+    apiUrl: "https://api.example.com/chat",
+    launcher: { enabled: false },
+    persistState: false,
+    suggestionChips: [],
+    features: { history: historyFeature },
+    ...extraConfig,
+  } as unknown as Parameters<typeof createAgentExperience>[1]);
+  controllers.push(controller);
+  return { mount, controller };
+};
+
+/** Drops one optional capability without disturbing the closures behind it. */
+const without = (
+  provider: DemoHistoryProvider,
+  key: "update" | "resetDevice"
+): HistoryProvider => {
+  const next: HistoryProvider = { ...provider, capabilities: provider.capabilities };
+  delete next[key];
+  return next;
+};
+
+const historyButton = (mount: HTMLElement) =>
+  mount.querySelector<HTMLButtonElement>("[data-persona-history-toggle]");
+const rowOf = (mount: HTMLElement, id: string) =>
+  mount.querySelector<HTMLButtonElement>(
+    `[data-persona-history-conversation="${id}"]`
+  );
+
+const openHistoryUI = async (mount: HTMLElement) => {
+  historyButton(mount)!.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true, detail: 1 })
+  );
+  await flush();
+};
+
+const listMenuItems = async (mount: HTMLElement) => {
+  mount.querySelector<HTMLButtonElement>(".persona-history-list-options")!.click();
+  await flush();
+  return Array.from(
+    mount.querySelectorAll('.persona-history-caption [role="menuitem"]')
+  ).map((item) => item.textContent);
+};
+
+const starActiveConversation = async (mount: HTMLElement) => {
+  mount
+    .querySelector('[data-persona-theme-zone="header"]')!
+    .dispatchEvent(
+      new CustomEvent("persona:title-menu-builtin", {
+        bubbles: true,
+        detail: { actionId: "star" },
+      })
+    );
+  await flush();
+};
+
+describe("features.history.provider", () => {
+  beforeEach(() => {
+    window.scrollTo = vi.fn();
+    // No registry override: this suite exercises the public config path only.
+    setHistoryProviderFactory(null);
+    setHistoryViewLoader(async () => ({ createHistoryView }));
+  });
+
+  afterEach(() => {
+    setHistoryProviderFactory(null);
+    controllers.splice(0).forEach((controller) => {
+      try {
+        controller.destroy();
+      } catch {
+        /* already destroyed */
+      }
+    });
+    mounts.splice(0).forEach((mount) => mount.remove());
+    document.body.innerHTML = "";
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("renders the history UI in a custom-backend session and lists conversations", async () => {
+    const provider = createDemoHistoryProvider({ conversations: SEEDS });
+    const { mount, controller } = setup({ enabled: true, provider: () => provider });
+
+    expect(historyButton(mount)).not.toBeNull();
+    await openHistoryUI(mount);
+    expect(mount.querySelector(".persona-history-view")).not.toBeNull();
+    expect(rowOf(mount, "conv-a")).not.toBeNull();
+    expect(rowOf(mount, "conv-b")).not.toBeNull();
+
+    const page = await controller.listConversations({ limit: 10 });
+    expect(page.items.map((item) => item.id)).toEqual(["conv-b", "conv-a"]);
+  });
+
+  it("accepts a provider instance as well as a factory", async () => {
+    const provider = createDemoHistoryProvider({ conversations: SEEDS });
+    const { mount } = setup({ enabled: true, provider });
+    await openHistoryUI(mount);
+    expect(rowOf(mount, "conv-a")).not.toBeNull();
+  });
+
+  it("calls the factory exactly once per widget instance", async () => {
+    const provider = createDemoHistoryProvider({ conversations: SEEDS });
+    const factory = vi.fn(() => provider);
+    const { mount, controller } = setup({ enabled: true, provider: factory });
+    expect(factory).toHaveBeenCalledTimes(1);
+
+    // Opening the surface re-reads the provider; it must not rebuild it.
+    await openHistoryUI(mount);
+    expect(factory).toHaveBeenCalledTimes(1);
+
+    // A reinstall that keeps the same factory reuses the built provider.
+    controller.update({ features: { history: { enabled: false, provider: factory } } });
+    controller.update({ features: { history: { enabled: true, provider: factory } } });
+    await flush();
+    expect(factory).toHaveBeenCalledTimes(1);
+  });
+
+  it("rebuilds when a new factory identity arrives through update()", async () => {
+    const first = vi.fn(() => createDemoHistoryProvider({ conversations: SEEDS }));
+    const second = vi.fn(() =>
+      createDemoHistoryProvider({
+        conversations: [
+          {
+            id: "conv-next",
+            title: "Next",
+            targetId: null,
+            messages: [{ id: "n1", role: "user", content: "second backend" }],
+          },
+        ],
+      })
+    );
+    const { mount, controller } = setup({ enabled: true, provider: first });
+    expect(first).toHaveBeenCalledTimes(1);
+
+    controller.update({ features: { history: { enabled: true, provider: second } } });
+    await flush();
+    expect(second).toHaveBeenCalledTimes(1);
+    await openHistoryUI(mount);
+    expect(rowOf(mount, "conv-next")).not.toBeNull();
+    expect(rowOf(mount, "conv-a")).toBeNull();
+  });
+
+  it("lets the internal registry override a config provider", async () => {
+    const registryProvider = createDemoHistoryProvider({ conversations: SEEDS });
+    setHistoryProviderFactory(() => registryProvider);
+    const configFactory = vi.fn(() =>
+      createDemoHistoryProvider({
+        conversations: [
+          {
+            id: "conv-config",
+            title: "Config",
+            targetId: null,
+            messages: [{ id: "c1", role: "user", content: "config backend" }],
+          },
+        ],
+      })
+    );
+    const { mount } = setup({ enabled: true, provider: configFactory });
+
+    await openHistoryUI(mount);
+    expect(configFactory).not.toHaveBeenCalled();
+    expect(rowOf(mount, "conv-a")).not.toBeNull();
+    expect(rowOf(mount, "conv-config")).toBeNull();
+  });
+
+  it("narrows the derived scope to what the provider advertises", async () => {
+    // getIdentityProof derives "verified-user", but the demo provider serves
+    // "browser" only; the derived default must narrow, not fail.
+    const provider = createDemoHistoryProvider({ conversations: SEEDS });
+    const { mount, controller } = setup(
+      { enabled: true, provider: () => provider },
+      { getIdentityProof: async () => "proof" }
+    );
+    await openHistoryUI(mount);
+    expect(rowOf(mount, "conv-a")).not.toBeNull();
+    await controller.openConversation("conv-a");
+    expect(provider.getActiveConversationId()).toBe("conv-a");
+  });
+
+  it("fails closed when an explicit scope is outside the provider's set", async () => {
+    const provider = createDemoHistoryProvider({ conversations: SEEDS });
+    const { controller } = setup({
+      enabled: true,
+      provider: () => provider,
+      scope: "verified-user",
+    });
+    await expect(controller.openConversation("conv-a")).rejects.toMatchObject({
+      code: "unsupported_scope",
+    });
+  });
+
+  it("hides the star affordance for a provider without update", async () => {
+    const provider = createDemoHistoryProvider({ conversations: SEEDS });
+    const { mount, controller } = setup({
+      enabled: true,
+      provider: () => without(provider, "update"),
+    });
+    await controller.openConversation("conv-a");
+    await flush();
+
+    await starActiveConversation(mount);
+    const page = await controller.listConversations({ limit: 10 });
+    expect(page.items.find((item) => item.id === "conv-a")?.starred).toBe(false);
+    await expect(
+      controller.setConversationStarred("conv-a", true)
+    ).rejects.toThrow();
+    await expect(
+      controller.renameConversation("conv-a", "Renamed")
+    ).rejects.toThrow();
+  });
+
+  it("keeps the star affordance for a provider with update", async () => {
+    const provider = createDemoHistoryProvider({ conversations: SEEDS });
+    const { mount, controller } = setup({ enabled: true, provider: () => provider });
+    await controller.openConversation("conv-a");
+    await flush();
+
+    await starActiveConversation(mount);
+    const page = await controller.listConversations({ limit: 10 });
+    expect(page.items.find((item) => item.id === "conv-a")?.starred).toBe(true);
+  });
+
+  it("hides forget-this-device for a provider without resetDevice", async () => {
+    const provider = createDemoHistoryProvider({ conversations: SEEDS });
+    const { mount } = setup({ enabled: true, provider: () => provider });
+    await openHistoryUI(mount);
+    expect(await listMenuItems(mount)).toEqual(["Delete all conversations"]);
+  });
+
+  it("offers forget-this-device for a provider with resetDevice", async () => {
+    const provider = createDemoHistoryProvider({ conversations: SEEDS });
+    const withReset: HistoryProvider = {
+      ...provider,
+      capabilities: provider.capabilities,
+      resetDevice: async () => ({ remoteRevocationConfirmed: false }),
+    };
+    const { mount } = setup({ enabled: true, provider: () => withReset });
+    await openHistoryUI(mount);
+    expect(await listMenuItems(mount)).toEqual([
+      "Delete all conversations",
+      "Forget this device",
+    ]);
+  });
+});
+
+describe("history provider error exports", () => {
+  it("round-trips HistoryProviderError through the package entry", () => {
+    const error = new HistoryProviderError("rate_limited", "slow down", {
+      retryAfterSeconds: 12,
+    });
+    expect(error).toBeInstanceOf(Error);
+    expect(error).toBeInstanceOf(HistoryProviderError);
+    expect(error.name).toBe("HistoryProviderError");
+    expect(error.code).toBe("rate_limited");
+    expect(error.retryAfterSeconds).toBe(12);
+    expect(isHistoryProviderError(error)).toBe(true);
+    expect(isHistoryProviderError(new Error("nope"))).toBe(false);
+  });
+});