@runtypelabs/persona 4.9.0 → 4.10.0

package/src/runtime/init-update-reset.test.ts

@@ -0,0 +1,81 @@
+// @vitest-environment jsdom
+
+// End-to-end handle.update() through the REAL ui module (init.test.ts mocks it,
+// so it cannot see the controller's own patch merge). Regression: explicit
+// undefined resets must reach the controller, not be materialized as absent
+// keys by the handle's pre-merge.
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { initAgentWidget } from "./init";
+
+describe("handle.update explicit-undefined reset reaches the controller", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("round-trips artifact pane appearance seamless -> panel via explicit undefined", () => {
+    window.scrollTo = vi.fn();
+    document.body.innerHTML = `<div id="target"></div>`;
+
+    const handle = initAgentWidget({
+      target: "#target",
+      config: {
+        apiUrl: "https://api.example.com/chat",
+        launcher: { enabled: false },
+        features: { artifacts: { enabled: true } },
+      },
+    });
+
+    const root = () => document.querySelector<HTMLElement>("[data-persona-root]")!;
+    expect(root().classList.contains("persona-artifact-appearance-panel")).toBe(true);
+
+    handle.update({
+      features: {
+        artifacts: {
+          layout: { paneAppearance: "seamless", splitGap: "0", paneShadow: "none" },
+        },
+      },
+    });
+    expect(root().classList.contains("persona-artifact-appearance-seamless")).toBe(true);
+
+    handle.update({
+      features: {
+        artifacts: {
+          layout: { paneAppearance: undefined, splitGap: undefined, paneShadow: undefined },
+        },
+      },
+    });
+    expect(root().classList.contains("persona-artifact-appearance-panel")).toBe(true);
+    expect(root().classList.contains("persona-artifact-appearance-seamless")).toBe(false);
+    expect(root().style.getPropertyValue("--persona-artifact-pane-shadow")).toBe("");
+
+    handle.destroy();
+  });
+
+  it("handle and controller stored configs converge on the same merged result", () => {
+    window.scrollTo = vi.fn();
+    document.body.innerHTML = `<div id="target"></div>`;
+
+    const handle = initAgentWidget({
+      target: "#target",
+      config: {
+        apiUrl: "https://api.example.com/chat",
+        launcher: { enabled: false, clearChat: { backgroundColor: "#123456" } },
+      },
+    });
+
+    // Sibling override must survive an unrelated patch in BOTH layers: the
+    // controller renders it now, and the handle's stored config must carry it
+    // into a mount-mode rebuild. tooltipText also renames the aria-label.
+    handle.update({ launcher: { clearChat: { tooltipText: "Wipe" } } });
+    const clear = () => document.querySelector<HTMLButtonElement>('button[aria-label="Wipe"]')!;
+    expect(clear().style.backgroundColor).toBe("rgb(18, 52, 86)");
+
+    handle.update({ launcher: { mountMode: "docked" } });
+    expect(clear().style.backgroundColor).toBe("rgb(18, 52, 86)");
+
+    handle.destroy();
+  });
+});

package/src/runtime/init.test.ts

@@ -483,3 +483,65 @@ describe("initAgentWidget docked mode", () => {
     handleB.destroy();
   });
 });
+
+describe("initAgentWidget update merge policy", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    createAgentExperienceMock.mockReset();
+  });
+
+  it("passes the raw patch to the controller so explicit-undefined resets survive", async () => {
+    const { initAgentWidget } = await import("./init");
+    document.body.innerHTML = `<div id="target"></div>`;
+
+    let controllerRef: ReturnType<typeof createMockController> | undefined;
+    createAgentExperienceMock.mockImplementation((_mount, config) => {
+      controllerRef = createMockController(config);
+      return controllerRef;
+    });
+
+    const handle = initAgentWidget({
+      target: "#target",
+      config: {
+        apiUrl: "https://api.example.com/chat",
+        launcher: { enabled: false, clearChat: { backgroundColor: "#123456" } },
+      },
+    });
+
+    // The merged config materializes explicit-undefined as absence, which the
+    // controller's patch merge would preserve; only the raw patch carries resets.
+    const patch = { launcher: { clearChat: { tooltipText: "Clear" } } };
+    handle.update(patch);
+
+    const passed = controllerRef!.update.mock.calls.at(-1)?.[0] as any;
+    expect(passed).toBe(patch);
+
+    handle.destroy();
+  });
+
+  it("retains prior nested overrides when a mount-mode change rebuilds the controller", async () => {
+    const { initAgentWidget } = await import("./init");
+    document.body.innerHTML = `<div id="target"></div>`;
+
+    createAgentExperienceMock.mockImplementation((_mount, config) => createMockController(config));
+
+    const handle = initAgentWidget({
+      target: "#target",
+      config: {
+        apiUrl: "https://api.example.com/chat",
+        launcher: { enabled: false, clearChat: { backgroundColor: "#123456" } },
+      },
+    });
+
+    // Patch a sibling, then flip the mount mode to force a rebuild.
+    handle.update({ launcher: { clearChat: { tooltipText: "Clear" } } });
+    handle.update({ launcher: { mountMode: "docked" } });
+
+    const rebuildConfig = createAgentExperienceMock.mock.calls.at(-1)?.[1] as any;
+    expect(rebuildConfig.launcher.clearChat.backgroundColor).toBe("#123456");
+    expect(rebuildConfig.launcher.clearChat.tooltipText).toBe("Clear");
+    expect(rebuildConfig.launcher.mountMode).toBe("docked");
+
+    handle.destroy();
+  });
+});

package/src/runtime/init.ts

@@ -1,6 +1,7 @@
 import { createAgentExperience, AgentWidgetController } from "../ui";
-import { AgentWidgetConfig as _AgentWidgetConfig, AgentWidgetInitOptions, AgentWidgetEvent as _AgentWidgetEvent } from "../types";
+import { AgentWidgetConfig as _AgentWidgetConfig, AgentWidgetConfigPatch, AgentWidgetInitOptions, AgentWidgetEvent as _AgentWidgetEvent } from "../types";
 import { isComposerBarMountMode, isDockedMountMode } from "../utils/dock";
+import { mergeConfigUpdate } from "../utils/config-merge";
 import { createWidgetHostLayout } from "./host-layout";
 
 const ensureTarget = (target: string | HTMLElement): HTMLElement => {
@@ -126,19 +127,8 @@ export const initAgentWidget = (
   };
 
   const handleBase = {
-    update(nextConfig: _AgentWidgetConfig) {
-      const mergedConfig = {
-        ...config,
-        ...nextConfig,
-        launcher: {
-          ...(config?.launcher ?? {}),
-          ...(nextConfig?.launcher ?? {}),
-          dock: {
-            ...(config?.launcher?.dock ?? {}),
-            ...(nextConfig?.launcher?.dock ?? {}),
-          },
-        },
-      } as _AgentWidgetConfig;
+    update(nextConfig: AgentWidgetConfigPatch) {
+      const mergedConfig = mergeConfigUpdate(config ?? ({} as _AgentWidgetConfig), nextConfig);
       const previousDocked = isDockedMountMode(config);
       const nextDocked = isDockedMountMode(mergedConfig);
       const previousComposerBar = isComposerBarMountMode(config);
@@ -151,6 +141,9 @@ export const initAgentWidget = (
 
       config = mergedConfig;
       hostLayout.updateConfig(config);
+      // Pass the raw patch: mergedConfig materializes explicit-undefined resets
+      // as absent keys, which the controller's patch merge would preserve
+      // instead of clearing. Both layers share mergeConfigUpdate, so they converge.
       controller.update(nextConfig);
       syncHostState();
     },

package/src/styles/widget.css

@@ -3206,6 +3206,20 @@
 /* Shared artifact preview body wrapper (artifact-preview.ts): generates no box
    so children (e.g. the iframe's height: 100%) lay out against the host
    container exactly as if they were its direct children. */
+[data-persona-root] .persona-artifact-content {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+[data-persona-root]
+  .persona-artifact-content
+  > .persona-artifact-preview-body
+  > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
 [data-persona-root] .persona-artifact-preview-body {
   display: contents;
 }

package/src/types.ts

@@ -5431,6 +5431,23 @@ export type AgentWidgetConfig = {
   loadingIndicator?: AgentWidgetLoadingIndicatorConfig;
 };
 
+/**
+ * Patch-aware deep-partial of {@link AgentWidgetConfig} accepted by `update()`.
+ * Function types and arrays are preserved whole (not mapped over); plain-object
+ * leaves recurse so a partial patch merges into the live config. See the merge
+ * policy in utils/config-merge.ts (some plain-object fields still replace
+ * wholesale at runtime; that is not encoded at the type level).
+ */
+export type AgentWidgetConfigPatch = ConfigPatch<AgentWidgetConfig>;
+
+type ConfigPatch<T> = T extends (...args: never[]) => unknown
+  ? T
+  : T extends readonly unknown[]
+    ? T
+    : T extends object
+      ? { [K in keyof T]?: ConfigPatch<T[K]> }
+      : T;
+
 export type AgentWidgetMessageRole = "user" | "assistant" | "system";
 
 export type AgentWidgetReasoning = {

package/src/ui.artifact-pane-gating.test.ts

@@ -402,7 +402,17 @@ describe("artifact pane expand toggle (full widget)", () => {
     expect(mountEl.classList.contains("persona-artifact-expanded")).toBe(true);
 
     // Turning the toggle back off hides the button and collapses the pane.
-    controller.update(base);
+    // update() patches recursively now, so omission preserves the prior
+    // showExpandToggle: the flag must be set false explicitly to disable it.
+    controller.update({
+      features: {
+        artifacts: {
+          enabled: true,
+          allowedTypes: ["markdown", "component"],
+          layout: { showExpandToggle: false },
+        },
+      },
+    });
     expect(mountEl.classList.contains("persona-artifact-expanded")).toBe(false);
     expect(expandBtn(mountEl).classList.contains("persona-hidden")).toBe(true);
     controller.destroy();

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

@@ -186,3 +186,93 @@ describe("createAgentExperience attachment file drop", () => {
     controller.destroy();
   });
 });
+
+describe("drop overlay live config updates", () => {
+  beforeEach(() => {
+    window.scrollTo = vi.fn();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("rebuilds the overlay with new dropOverlay values on update() (regression: built once, live updates ignored)", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      attachments: { enabled: true, dropOverlay: { label: "Drop it", background: "#111111" } },
+    });
+
+    const overlay = () => mount.querySelector<HTMLElement>(".persona-attachment-drop-overlay")!;
+    expect(overlay()).not.toBeNull();
+    expect(overlay().querySelector(".persona-drop-overlay-label")!.textContent).toBe("Drop it");
+    expect(overlay().style.getPropertyValue("--persona-drop-overlay-bg")).toBe("#111111");
+
+    controller.update({
+      attachments: { dropOverlay: { label: "New label", background: "#222222" } },
+    });
+
+    expect(overlay().querySelector(".persona-drop-overlay-label")!.textContent).toBe("New label");
+    expect(overlay().style.getPropertyValue("--persona-drop-overlay-bg")).toBe("#222222");
+    // Only one overlay after the rebuild.
+    expect(mount.querySelectorAll(".persona-attachment-drop-overlay").length).toBe(1);
+
+    controller.destroy();
+  });
+
+  it("clears overlay styling when dropOverlay is reset via explicit undefined", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      attachments: { enabled: true, dropOverlay: { label: "Drop it", background: "#111111" } },
+    });
+
+    controller.update({ attachments: { dropOverlay: undefined } });
+
+    const overlay = mount.querySelector<HTMLElement>(".persona-attachment-drop-overlay")!;
+    expect(overlay).not.toBeNull();
+    expect(overlay.querySelector(".persona-drop-overlay-label")).toBeNull();
+    expect(overlay.style.getPropertyValue("--persona-drop-overlay-bg")).toBe("");
+
+    controller.destroy();
+  });
+});
+
+describe("attachment button live config updates", () => {
+  beforeEach(() => {
+    window.scrollTo = vi.fn();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("re-renders the button icon and tooltip on update() (regression: set once at creation)", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      attachments: { enabled: true, buttonIconName: "paperclip", buttonTooltipText: "Attach file" },
+    });
+
+    const button = () => mount.querySelector<HTMLButtonElement>(".persona-attachment-button")!;
+    expect(button()).not.toBeNull();
+    const initialSvg = button().querySelector("svg")!.outerHTML;
+
+    controller.update({
+      attachments: { buttonIconName: "camera", buttonTooltipText: "Add a photo" },
+    });
+
+    expect(button().getAttribute("aria-label")).toBe("Add a photo");
+    const updatedSvg = button().querySelector("svg")!.outerHTML;
+    expect(updatedSvg).not.toBe(initialSvg);
+    const tooltip = button().parentElement!.querySelector(".persona-send-button-tooltip");
+    expect(tooltip?.textContent).toBe("Add a photo");
+
+    controller.destroy();
+  });
+});

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.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();
+  });
+});