@runtypelabs/persona 4.10.1 → 4.11.1

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

@@ -0,0 +1,407 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  createAgentExperience,
+  type AgentWidgetController,
+} from "./ui";
+import type {
+  AgentWidgetConfig,
+  AgentWidgetMessage,
+} from "./types";
+
+const CREATED_AT = "2026-07-24T00:00:00.000Z";
+
+const createMount = (): HTMLElement => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+const createController = (
+  mount: HTMLElement,
+  config: Partial<AgentWidgetConfig> = {}
+): AgentWidgetController =>
+  createAgentExperience(mount, {
+    apiUrl: "https://api.example.com/chat",
+    launcher: { enabled: false },
+    ...config,
+  });
+
+const injectMessage = (
+  controller: AgentWidgetController,
+  message: Partial<AgentWidgetMessage> &
+    Pick<AgentWidgetMessage, "id" | "role">
+): void => {
+  controller.injectTestMessage({
+    type: "message",
+    message: {
+      content: "",
+      createdAt: CREATED_AT,
+      streaming: false,
+      ...message,
+    },
+  });
+};
+
+const getRow = (mount: HTMLElement, id: string): HTMLElement => {
+  const row = mount.querySelector<HTMLElement>(`#wrapper-${id}`);
+  expect(row).not.toBeNull();
+  return row!;
+};
+
+const expectRowLayout = (
+  row: HTMLElement,
+  expected: {
+    role: "user" | "assistant" | "system";
+    width: "content" | "full";
+    maxWidth: string;
+  }
+): void => {
+  expect(row.classList.contains("persona-message-row")).toBe(true);
+  expect(row.classList.contains(`persona-message-row-${expected.role}`)).toBe(
+    true
+  );
+  expect(row.classList.contains(`persona-message-width-${expected.width}`)).toBe(
+    true
+  );
+  expect(row.getAttribute("data-message-role")).toBe(expected.role);
+  expect(row.getAttribute("data-message-width")).toBe(expected.width);
+  expect(
+    row.style.getPropertyValue("--persona-message-row-max-width")
+  ).toBe(expected.maxWidth);
+};
+
+describe("createAgentExperience: role-specific message width", () => {
+  beforeEach(() => {
+    vi.stubGlobal("requestAnimationFrame", (callback: (time: number) => void) => {
+      callback(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    window.scrollTo = vi.fn();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    if (typeof localStorage !== "undefined") localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("preserves content-sized 85% rows by default", () => {
+    const mount = createMount();
+    const controller = createController(mount);
+
+    injectMessage(controller, {
+      id: "user-default",
+      role: "user",
+      content: "Hello",
+    });
+    injectMessage(controller, {
+      id: "assistant-default",
+      role: "assistant",
+      content: "Hi there",
+    });
+
+    expectRowLayout(getRow(mount, "user-default"), {
+      role: "user",
+      width: "content",
+      maxWidth: "85%",
+    });
+    expect(getRow(mount, "user-default").classList.contains("persona-justify-end")).toBe(
+      true
+    );
+    expectRowLayout(getRow(mount, "assistant-default"), {
+      role: "assistant",
+      width: "content",
+      maxWidth: "85%",
+    });
+
+    controller.destroy();
+  });
+
+  it("configures user and assistant geometry independently", () => {
+    const mount = createMount();
+    const controller = createController(mount, {
+      layout: {
+        messages: {
+          user: { width: "content", maxWidth: "70%" },
+          assistant: { width: "full" },
+        },
+      },
+    });
+
+    injectMessage(controller, {
+      id: "user-narrow",
+      role: "user",
+      content: "Question",
+    });
+    injectMessage(controller, {
+      id: "assistant-full",
+      role: "assistant",
+      content: "A longer response",
+    });
+
+    expectRowLayout(getRow(mount, "user-narrow"), {
+      role: "user",
+      width: "content",
+      maxWidth: "70%",
+    });
+    expectRowLayout(getRow(mount, "assistant-full"), {
+      role: "assistant",
+      width: "full",
+      maxWidth: "100%",
+    });
+
+    controller.destroy();
+  });
+
+  it("sizes the avatar and bubble together as one full-width content track", () => {
+    const mount = createMount();
+    const controller = createController(mount, {
+      layout: {
+        messages: {
+          assistant: { width: "full", maxWidth: "72ch" },
+          avatar: {
+            show: true,
+            position: "left",
+            assistantAvatar: "A",
+          },
+        },
+      },
+    });
+
+    injectMessage(controller, {
+      id: "assistant-avatar",
+      role: "assistant",
+      content: "Avatar-backed response",
+    });
+
+    const row = getRow(mount, "assistant-avatar");
+    expectRowLayout(row, {
+      role: "assistant",
+      width: "full",
+      maxWidth: "72ch",
+    });
+    const track = row.querySelector<HTMLElement>(
+      ":scope > .persona-message-with-avatar"
+    );
+    expect(track).not.toBeNull();
+    expect(
+      track?.querySelector(":scope > .persona-message-bubble")
+    ).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("applies assistant geometry to tools, reasoning, approvals, and idle UI", () => {
+    const mount = createMount();
+    const controller = createController(mount, {
+      layout: {
+        messages: {
+          assistant: { width: "full", maxWidth: "64rem" },
+        },
+      },
+      loadingIndicator: {
+        renderIdle: () => {
+          const idle = document.createElement("span");
+          idle.textContent = "Ready";
+          return idle;
+        },
+      },
+    });
+
+    injectMessage(controller, {
+      id: "tool-width",
+      role: "assistant",
+      variant: "tool",
+      toolCall: {
+        id: "tool-width",
+        name: "Read file",
+        status: "complete",
+        chunks: ["Done"],
+      },
+    });
+    injectMessage(controller, {
+      id: "reasoning-width",
+      role: "assistant",
+      variant: "reasoning",
+      reasoning: {
+        id: "reasoning-width",
+        status: "complete",
+        chunks: ["Considered the options"],
+      },
+    });
+    injectMessage(controller, {
+      id: "approval-width",
+      role: "assistant",
+      variant: "approval",
+      approval: {
+        id: "approval-1",
+        status: "pending",
+        agentId: "agent-1",
+        executionId: "execution-1",
+        toolName: "Write file",
+        description: "Write the generated file",
+        parameters: { path: "output.md" },
+      },
+    });
+
+    for (const id of ["tool-width", "reasoning-width", "approval-width"]) {
+      expectRowLayout(getRow(mount, id), {
+        role: "assistant",
+        width: "full",
+        maxWidth: "64rem",
+      });
+    }
+    expectRowLayout(getRow(mount, "idle-indicator"), {
+      role: "assistant",
+      width: "full",
+      maxWidth: "64rem",
+    });
+
+    controller.destroy();
+  });
+
+  it("wraps custom renderers in the resolved role row", () => {
+    const mount = createMount();
+    const controller = createController(mount, {
+      layout: {
+        messages: {
+          user: { width: "full" },
+          assistant: { width: "content", maxWidth: "42rem" },
+          renderUserMessage: ({ message }) => {
+            const element = document.createElement("article");
+            element.setAttribute("data-custom-user", "");
+            element.textContent = message.content;
+            return element;
+          },
+          renderAssistantMessage: ({ message }) => {
+            const element = document.createElement("article");
+            element.setAttribute("data-custom-assistant", "");
+            element.textContent = message.content;
+            return element;
+          },
+        },
+      },
+    });
+
+    injectMessage(controller, {
+      id: "custom-user",
+      role: "user",
+      content: "Custom question",
+    });
+    injectMessage(controller, {
+      id: "custom-assistant",
+      role: "assistant",
+      content: "Custom answer",
+    });
+
+    const userRow = getRow(mount, "custom-user");
+    expectRowLayout(userRow, {
+      role: "user",
+      width: "full",
+      maxWidth: "100%",
+    });
+    expect(userRow.querySelector(":scope > [data-custom-user]")).not.toBeNull();
+
+    const assistantRow = getRow(mount, "custom-assistant");
+    expectRowLayout(assistantRow, {
+      role: "assistant",
+      width: "content",
+      maxWidth: "42rem",
+    });
+    expect(
+      assistantRow.querySelector(":scope > [data-custom-assistant]")
+    ).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("re-renders live rows when role width changes through update()", () => {
+    const mount = createMount();
+    const controller = createController(mount);
+
+    injectMessage(controller, {
+      id: "update-width",
+      role: "assistant",
+      content: "Update my row",
+    });
+    expectRowLayout(getRow(mount, "update-width"), {
+      role: "assistant",
+      width: "content",
+      maxWidth: "85%",
+    });
+
+    controller.update({
+      layout: {
+        messages: {
+          assistant: {
+            width: "full",
+            maxWidth: "68ch",
+          },
+        },
+      },
+    });
+
+    expectRowLayout(getRow(mount, "update-width"), {
+      role: "assistant",
+      width: "full",
+      maxWidth: "68ch",
+    });
+
+    controller.destroy();
+  });
+
+  it("lets a grouped tool row own the cap without applying it twice", () => {
+    const mount = createMount();
+    const controller = createController(mount, {
+      layout: {
+        messages: {
+          assistant: { width: "content", maxWidth: "80%" },
+        },
+      },
+      features: {
+        toolCallDisplay: {
+          grouped: true,
+        },
+      },
+    });
+
+    for (const id of ["group-tool-1", "group-tool-2"]) {
+      injectMessage(controller, {
+        id,
+        role: "assistant",
+        variant: "tool",
+        toolCall: {
+          id,
+          name: "Read file",
+          status: "complete",
+          chunks: ["Done"],
+        },
+      });
+    }
+
+    const groupRow = mount.querySelector<HTMLElement>(
+      "[data-persona-tool-group-row]"
+    );
+    expect(groupRow).not.toBeNull();
+    expectRowLayout(groupRow!, {
+      role: "assistant",
+      width: "content",
+      maxWidth: "80%",
+    });
+    const innerRows = groupRow!.querySelectorAll<HTMLElement>(
+      ".persona-message-row"
+    );
+    expect(innerRows.length).toBe(2);
+    innerRows.forEach((innerRow) => {
+      expect(
+        innerRow.style.getPropertyValue("--persona-message-row-max-width")
+      ).toBe("100%");
+    });
+
+    controller.destroy();
+  });
+});

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

@@ -31,7 +31,10 @@ const injectToolMessage = (
       id,
       role: "assistant",
       content: "",
-      createdAt: new Date().toISOString(),
+      // Real stream updates reuse the original tool message's timeline fields.
+      // Keep them stable here so an upsert does not reorder the group.
+      createdAt: "2026-01-01T00:00:00.000Z",
+      sequence: Number(id.match(/(\d+)$/)?.[1] ?? 0),
       streaming: status !== "complete",
       variant: "tool",
       toolCall: {
@@ -76,6 +79,7 @@ const injectReasoningMessage = (
 
 describe("createAgentExperience tool call display modes", () => {
   beforeEach(() => {
+    window.localStorage.clear();
     vi.stubGlobal("requestAnimationFrame", (cb: (time: number) => void) => {
       cb(0);
       return 1;
@@ -157,6 +161,48 @@ describe("createAgentExperience tool call display modes", () => {
     controller.destroy();
   });
 
+  it("preserves a custom collapsed summary across tool chunk updates", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          grouped: false,
+          expandable: false,
+          loadingAnimation: "none",
+        },
+      },
+      toolCall: {
+        renderCollapsedSummary: ({ toolCall }: any) => {
+          const summary = document.createElement("span");
+          summary.setAttribute("data-test-collapsed-summary", "true");
+          summary.textContent = `${toolCall.name}:${toolCall.status}`;
+          return summary;
+        },
+      },
+    } as any);
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Run SQL",
+      chunks: ["starting"],
+    });
+    const bubble = mount.querySelector("#bubble-tool-1");
+    const summary = mount.querySelector("[data-test-collapsed-summary='true']");
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Run SQL",
+      chunks: ["starting", "received rows"],
+    });
+
+    expect(mount.querySelector("#bubble-tool-1")).toBe(bubble);
+    expect(mount.querySelector("[data-test-collapsed-summary='true']")).toBe(summary);
+
+    controller.destroy();
+  });
+
   it("renders a collapsed preview for active reasoning rows when enabled", () => {
     const mount = createMount();
     const controller = createAgentExperience(mount, {
@@ -202,6 +248,41 @@ describe("createAgentExperience tool call display modes", () => {
     controller.destroy();
   });
 
+  it("preserves tool rows when a standalone row becomes a stacked group", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: {
+        toolCallDisplay: {
+          grouped: true,
+          groupedMode: "stack",
+        },
+      },
+    } as any);
+
+    injectToolMessage(controller, { id: "tool-1", name: "Inspect data" });
+
+    const firstRow = mount.querySelector("#wrapper-tool-1");
+    const firstBubble = mount.querySelector("#bubble-tool-1");
+    expect(firstRow).not.toBeNull();
+    expect(firstBubble).not.toBeNull();
+
+    injectToolMessage(controller, { id: "tool-2", name: "Run analysis" });
+
+    const groupRow = mount.querySelector("[data-persona-tool-group-row='true']");
+    expect(groupRow).not.toBeNull();
+    expect(mount.querySelector("#wrapper-tool-1")).toBe(firstRow);
+    expect(mount.querySelector("#bubble-tool-1")).toBe(firstBubble);
+
+    injectToolMessage(controller, { id: "tool-3", name: "Build chart" });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("#wrapper-tool-1")).toBe(firstRow);
+    expect(mount.querySelector("#bubble-tool-1")).toBe(firstBubble);
+
+    controller.destroy();
+  });
+
   it("keeps tool calls grouped across reasoning that is hidden", () => {
     const mount = createMount();
     const controller = createAgentExperience(mount, {
@@ -226,30 +307,118 @@ describe("createAgentExperience tool call display modes", () => {
     controller.destroy();
   });
 
-  it("can render a grouped tool sequence as one summary item", () => {
+  it("keeps a summary group's visible DOM stable from the first tool onward", () => {
     const mount = createMount();
+    const renderedSummaries: HTMLElement[] = [];
     const controller = createAgentExperience(mount, {
       apiUrl: "https://api.example.com/chat",
       launcher: { enabled: false },
       features: {
         toolCallDisplay: {
+          collapsedMode: "tool-name",
+          activePreview: false,
           grouped: true,
           groupedMode: "summary",
+          expandable: false,
+          loadingAnimation: "shimmer-color",
         },
       },
       toolCall: {
-        renderGroupedSummary: () => "Analysis ready",
+        renderCollapsedSummary: ({ message, toolCall }: any) => {
+          const step = document.createElement("span");
+          step.setAttribute("data-test-collapsed-step", message.id);
+          step.textContent = `${toolCall.name}:${toolCall.status}`;
+          return step;
+        },
+        renderGroupedSummary: ({ toolCalls }: any) => {
+          const list = document.createElement("span");
+          list.setAttribute("data-test-activity-list", "true");
+          toolCalls.forEach((toolCall: { id: string; status: string }) => {
+            const step = document.createElement("span");
+            step.setAttribute("data-test-activity-step", toolCall.id);
+            step.textContent = `${toolCall.id}:${toolCall.status}`;
+            list.appendChild(step);
+          });
+          renderedSummaries.push(list);
+          return list;
+        },
       },
     } as any);
 
-    injectToolMessage(controller, { id: "tool-1", name: "Inspect data", status: "complete" });
-    injectToolMessage(controller, { id: "tool-2", name: "Run analysis", status: "complete" });
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Inspect data",
+      status: "pending",
+    });
 
-    const group = mount.querySelector("[data-persona-tool-group='true']");
-    expect(group?.textContent).toContain("Analysis ready");
-    expect(group?.querySelector("[data-persona-tool-group-item]")).toBeNull();
+    const groupRow = mount.querySelector("[data-persona-tool-group-row='true']");
+    const activityList = mount.querySelector("[data-test-activity-list='true']");
+    const firstStep = mount.querySelector("[data-test-activity-step='tool-1']");
+    expect(groupRow).not.toBeNull();
+    expect(groupRow?.getAttribute("data-wrapper-id")).toBe("tool-group-tool-1");
+    expect(activityList).not.toBeNull();
+    expect(firstStep).not.toBeNull();
     expect(mount.querySelector(".persona-tool-bubble")).toBeNull();
 
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Inspect data",
+      status: "running",
+      chunks: ["starting"],
+    });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Inspect data",
+      chunks: ["starting", "received rows"],
+    });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+
+    injectToolMessage(controller, { id: "tool-2", name: "Run analysis" });
+
+    const secondStep = mount.querySelector("[data-test-activity-step='tool-2']");
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+    expect(secondStep).not.toBeNull();
+    expect(mount.querySelector(".persona-tool-bubble")).toBeNull();
+
+    injectToolMessage(controller, {
+      id: "tool-1",
+      name: "Inspect data",
+      status: "complete",
+      chunks: ["starting", "received rows"],
+    });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+    expect(mount.querySelector("[data-test-activity-step='tool-2']")).toBe(secondStep);
+    expect(firstStep?.textContent).toBe("tool-1:complete");
+    expect(secondStep?.textContent).toBe("tool-2:running");
+
+    injectToolMessage(controller, {
+      id: "tool-2",
+      name: "Run analysis",
+      status: "complete",
+    });
+    expect(mount.querySelector("[data-persona-tool-group-row='true']")).toBe(groupRow);
+    expect(mount.querySelector("[data-test-activity-list='true']")).toBe(activityList);
+    expect(mount.querySelector("[data-test-activity-step='tool-1']")).toBe(firstStep);
+    expect(mount.querySelector("[data-test-activity-step='tool-2']")).toBe(secondStep);
+    expect(secondStep?.textContent).toBe("tool-2:complete");
+    expect(mount.querySelector(".persona-tool-bubble")).toBeNull();
+
+    // The callback can return a fresh tree on every status update; idiomorph
+    // must reconcile it into the existing visible summary rather than mounting
+    // those detached callback results.
+    expect(renderedSummaries.length).toBeGreaterThan(1);
+    expect(renderedSummaries).not.toContain(activityList);
+
     controller.destroy();
   });
 });