@runtypelabs/persona 4.7.0 → 4.8.0

package/src/components/artifact-inline.test.ts

@@ -0,0 +1,1328 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  PersonaArtifactInline,
+  resolveInlineBody,
+  updateInlineArtifactBlocks
+} from "./artifact-inline";
+import { componentRegistry } from "./registry";
+import type {
+  AgentWidgetArtifactsFeature,
+  AgentWidgetConfig,
+  AgentWidgetMessage,
+  PersonaArtifactRecord,
+  PersonaArtifactStatusLabelContext
+} from "../types";
+import type { ComponentContext } from "./registry";
+
+const ZWSP = "\u200b";
+const HTML_RAW = "<h1>hi</h1>\n";
+const wireFor = (raw: string, lang: string): string =>
+  "```" + lang + "\n" + raw.split("```").join("`" + ZWSP + "``") + "\n```";
+
+const makeConfig = (
+  artifacts: Record<string, unknown> = {}
+): AgentWidgetConfig =>
+  ({
+    sanitize: false,
+    features: { artifacts: { enabled: true, ...artifacts } }
+  }) as AgentWidgetConfig;
+
+const makeContext = (config: AgentWidgetConfig): ComponentContext => {
+  const message: AgentWidgetMessage = {
+    id: "artifact-ref-a1",
+    role: "assistant",
+    content: "",
+    createdAt: new Date().toISOString()
+  };
+  return { message, config, updateProps: () => {} };
+};
+
+const streamingProps = (): Record<string, unknown> => ({
+  artifactId: "a1",
+  title: "Notes",
+  artifactType: "markdown",
+  status: "streaming"
+});
+
+const completeProps = (): Record<string, unknown> => ({
+  artifactId: "a1",
+  title: "Notes",
+  artifactType: "markdown",
+  status: "complete",
+  markdown: "# Done"
+});
+
+describe("PersonaArtifactInline default render", () => {
+  it("renders the shared preview body inside a tagged inline block", () => {
+    const el = PersonaArtifactInline(streamingProps(), makeContext(makeConfig()));
+    expect(el.classList.contains("persona-artifact-inline")).toBe(true);
+    expect(el.getAttribute("data-artifact-inline")).toBe("a1");
+    expect(el.querySelector(".persona-artifact-preview-body")).toBeTruthy();
+  });
+
+  it("applies registry records via updateInlineArtifactBlocks (streaming deltas)", () => {
+    const container = document.createElement("div");
+    const el = PersonaArtifactInline(streamingProps(), makeContext(makeConfig()));
+    container.appendChild(el);
+
+    const record: PersonaArtifactRecord = {
+      id: "a1",
+      artifactType: "markdown",
+      title: "Notes",
+      status: "streaming",
+      markdown: "# Hello"
+    };
+    updateInlineArtifactBlocks(container, [record]);
+    expect(el.textContent).toContain("Hello");
+
+    updateInlineArtifactBlocks(container, [
+      { ...record, markdown: "# Hello world" }
+    ]);
+    expect(el.textContent).toContain("Hello world");
+  });
+
+  describe("streaming→complete View Transition gating", () => {
+    // Typed loosely (cast through unknown) because lib.dom's own
+    // startViewTransition signature differs from this minimal stub.
+    type VTStub = {
+      startViewTransition?: (cb: () => void) => { finished: Promise<void> };
+    };
+
+    const stubViewTransition = () => {
+      const start = vi.fn((cb: () => void) => {
+        cb();
+        return { finished: Promise.resolve() };
+      });
+      (document as unknown as VTStub).startViewTransition = start;
+      return start;
+    };
+
+    afterEach(() => {
+      delete (document as unknown as VTStub).startViewTransition;
+    });
+
+    const setupBlock = () => {
+      const container = document.createElement("div");
+      const el = PersonaArtifactInline(streamingProps(), makeContext(makeConfig()));
+      container.appendChild(el);
+      const completeRecord: PersonaArtifactRecord = {
+        id: "a1",
+        artifactType: "markdown",
+        title: "Notes",
+        status: "complete",
+        markdown: "# Done"
+      };
+      return { container, el, completeRecord };
+    };
+
+    it("animates the boundary swap via startViewTransition by default", async () => {
+      const start = stubViewTransition();
+      const { container, el, completeRecord } = setupBlock();
+
+      updateInlineArtifactBlocks(container, [
+        { ...completeRecord, status: "streaming" }
+      ]);
+      expect(start).not.toHaveBeenCalled();
+
+      updateInlineArtifactBlocks(container, [completeRecord]);
+      expect(start).toHaveBeenCalledTimes(1);
+      expect(el.textContent).toContain("Done");
+      // Let `finished` settle so the module-level in-flight guard resets.
+      await Promise.resolve();
+    });
+
+    it("swaps instantly when suppressTransition is set (transcript still streaming)", () => {
+      const start = stubViewTransition();
+      const { container, el, completeRecord } = setupBlock();
+
+      updateInlineArtifactBlocks(container, [completeRecord], {
+        suppressTransition: true
+      });
+      expect(start).not.toHaveBeenCalled();
+      expect(el.textContent).toContain("Done");
+    });
+  });
+
+  it("ignores records for other artifact ids and empty registry states", () => {
+    const container = document.createElement("div");
+    const el = PersonaArtifactInline(streamingProps(), makeContext(makeConfig()));
+    container.appendChild(el);
+    const before = el.innerHTML;
+
+    updateInlineArtifactBlocks(container, []);
+    updateInlineArtifactBlocks(container, [
+      {
+        id: "other",
+        artifactType: "markdown",
+        status: "streaming",
+        markdown: "# Nope"
+      }
+    ]);
+    expect(el.innerHTML).toBe(before);
+  });
+});
+
+describe("PersonaArtifactInline hydration from props", () => {
+  it("re-renders a completed markdown artifact from props alone (no registry record)", () => {
+    const el = PersonaArtifactInline(
+      {
+        artifactId: "a1",
+        title: "Notes",
+        artifactType: "markdown",
+        status: "complete",
+        markdown: "# Restored"
+      },
+      makeContext(makeConfig())
+    );
+    expect(el.textContent).toContain("Restored");
+  });
+
+  it("re-invokes the registered renderer with embedded component props", () => {
+    const seen: Array<Record<string, unknown>> = [];
+    const name = "TestInlineHydrationChart";
+    componentRegistry.register(name, (props) => {
+      seen.push(props);
+      const node = document.createElement("div");
+      node.className = "test-inline-chart";
+      node.textContent = `series:${JSON.stringify(props.series)}`;
+      return node;
+    });
+    try {
+      const el = PersonaArtifactInline(
+        {
+          artifactId: "a1",
+          title: "Chart",
+          artifactType: "component",
+          status: "complete",
+          component: name,
+          componentProps: { series: [1, 2, 3] }
+        },
+        makeContext(makeConfig())
+      );
+      expect(el.querySelector(".test-inline-chart")).toBeTruthy();
+      expect(seen).toHaveLength(1);
+      expect(seen[0]).toEqual({ series: [1, 2, 3] });
+    } finally {
+      componentRegistry.unregister(name);
+    }
+  });
+
+  it("re-renders a completed file artifact from props as a sandboxed iframe", () => {
+    const el = PersonaArtifactInline(
+      {
+        artifactId: "a1",
+        title: "outputs/cat.html",
+        artifactType: "markdown",
+        status: "complete",
+        markdown: wireFor(HTML_RAW, "html"),
+        file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+      },
+      makeContext(makeConfig())
+    );
+    const iframe = el.querySelector(
+      "iframe.persona-artifact-iframe"
+    ) as HTMLIFrameElement;
+    expect(iframe).toBeTruthy();
+    // The iframe is nested in the positioned preview frame (overlay host); the
+    // geometry classes detect it through the wrapper via a descendant query.
+    expect(iframe.parentElement?.classList.contains("persona-artifact-frame")).toBe(
+      true
+    );
+    expect(iframe.getAttribute("sandbox")).toBe("allow-scripts");
+    // Default loading appends the ready reporter, so the raw source is the prefix.
+    expect(iframe.srcdoc.startsWith(HTML_RAW)).toBe(true);
+  });
+});
+
+describe("PersonaArtifactInline renderInline override", () => {
+  it("uses the custom element when renderInline returns one", () => {
+    const renderInline = vi.fn().mockImplementation(() => {
+      const custom = document.createElement("div");
+      custom.className = "my-inline";
+      return custom;
+    });
+    const el = PersonaArtifactInline(
+      streamingProps(),
+      makeContext(makeConfig({ renderInline }))
+    );
+    expect(el.classList.contains("my-inline")).toBe(true);
+    expect(renderInline).toHaveBeenCalledWith(
+      expect.objectContaining({
+        artifact: {
+          artifactId: "a1",
+          title: "Notes",
+          artifactType: "markdown",
+          status: "streaming"
+        }
+      })
+    );
+  });
+
+  it("falls back to the default block when renderInline returns null", () => {
+    const renderInline = vi.fn().mockReturnValue(null);
+    const el = PersonaArtifactInline(
+      streamingProps(),
+      makeContext(makeConfig({ renderInline }))
+    );
+    expect(renderInline).toHaveBeenCalled();
+    expect(el.classList.contains("persona-artifact-inline")).toBe(true);
+  });
+
+  it("exposes a working defaultRenderer to the override", () => {
+    let defaultEl: HTMLElement | null = null;
+    const renderInline = vi.fn().mockImplementation(
+      (ctx: { defaultRenderer: () => HTMLElement }) => {
+        defaultEl = ctx.defaultRenderer();
+        return null;
+      }
+    );
+    PersonaArtifactInline(streamingProps(), makeContext(makeConfig({ renderInline })));
+    expect(defaultEl).not.toBeNull();
+    expect(
+      (defaultEl as unknown as HTMLElement).classList.contains(
+        "persona-artifact-inline"
+      )
+    ).toBe(true);
+  });
+
+  it("wins over inlineChrome / inlineActions config when it returns an element", () => {
+    const renderInline = vi.fn().mockImplementation(() => {
+      const custom = document.createElement("div");
+      custom.className = "my-inline";
+      return custom;
+    });
+    const el = PersonaArtifactInline(
+      completeProps(),
+      makeContext(
+        makeConfig({
+          renderInline,
+          inlineChrome: true,
+          inlineActions: [{ id: "log", label: "Log", onClick: () => {} }]
+        })
+      )
+    );
+    // No default chrome / body leaked through; the custom element is all there is.
+    expect(el.classList.contains("my-inline")).toBe(true);
+    expect(el.querySelector(".persona-artifact-inline-chrome")).toBeNull();
+    expect(el.querySelector("[data-artifact-custom-action]")).toBeNull();
+  });
+});
+
+describe("PersonaArtifactInline file-preview chrome", () => {
+  it("renders the chrome bar with title, type label, zones, and body wrapper on complete", () => {
+    const el = PersonaArtifactInline(completeProps(), makeContext(makeConfig()));
+
+    // Frame + chrome theme zones.
+    expect(el.getAttribute("data-persona-theme-zone")).toBe("artifact-inline");
+    const chrome = el.querySelector(
+      ".persona-artifact-inline-chrome"
+    ) as HTMLElement | null;
+    expect(chrome).not.toBeNull();
+    expect(chrome!.getAttribute("data-persona-theme-zone")).toBe(
+      "artifact-inline-chrome"
+    );
+
+    // Title + type label.
+    const title = el.querySelector(".persona-artifact-inline-title");
+    expect(title?.textContent).toBe("Notes");
+    const type = el.querySelector(".persona-artifact-inline-type");
+    expect(type?.textContent).toBe("Document");
+
+    // Body wrapper wraps the shared preview body.
+    const body = el.querySelector(".persona-artifact-inline-body");
+    expect(body).not.toBeNull();
+    expect(body!.querySelector(".persona-artifact-preview-body")).toBeTruthy();
+  });
+
+  it("shows a streaming status and hides copy + custom actions while streaming", () => {
+    const el = PersonaArtifactInline(
+      streamingProps(),
+      makeContext(
+        makeConfig({
+          loadingAnimation: "none",
+          inlineActions: [{ id: "log", label: "Log", onClick: () => {} }]
+        })
+      )
+    );
+
+    // Streaming status replaces the type label.
+    const status = el.querySelector(".persona-artifact-inline-status");
+    expect(status).not.toBeNull();
+    expect(status!.textContent).toBe("Generating document...");
+    expect(el.querySelector(".persona-artifact-inline-type")).toBeNull();
+
+    // Copy exists but is hidden; no custom actions rendered mid-stream.
+    const copy = el.querySelector("[data-copy-artifact]") as HTMLElement | null;
+    expect(copy).not.toBeNull();
+    expect(copy!.classList.contains("persona-hidden")).toBe(true);
+    expect(el.querySelector("[data-artifact-custom-action]")).toBeNull();
+  });
+
+  it("shows the type label, copy, expand, and custom actions on complete", () => {
+    const el = PersonaArtifactInline(
+      completeProps(),
+      makeContext(
+        makeConfig({
+          inlineActions: [{ id: "log", label: "Log", onClick: () => {} }]
+        })
+      )
+    );
+
+    const copy = el.querySelector("[data-copy-artifact]") as HTMLElement | null;
+    expect(copy).not.toBeNull();
+    expect(copy!.classList.contains("persona-hidden")).toBe(false);
+    expect(copy!.getAttribute("data-copy-artifact")).toBe("a1");
+
+    const expand = el.querySelector(
+      "[data-expand-artifact-inline]"
+    ) as HTMLElement | null;
+    expect(expand).not.toBeNull();
+    expect(expand!.getAttribute("data-expand-artifact-inline")).toBe("a1");
+
+    const custom = el.querySelector(
+      '[data-artifact-custom-action="log"]'
+    ) as HTMLElement | null;
+    expect(custom).not.toBeNull();
+    // Custom actions render before copy / expand.
+    expect(
+      custom!.compareDocumentPosition(copy!) & Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+  });
+
+  it("flips streaming -> complete in place on the same root element (no remount)", () => {
+    const container = document.createElement("div");
+    const el = PersonaArtifactInline(
+      streamingProps(),
+      makeContext(
+        makeConfig({
+          loadingAnimation: "none",
+          inlineActions: [{ id: "log", label: "Log", onClick: () => {} }]
+        })
+      )
+    );
+    container.appendChild(el);
+    const chromeBefore = el.querySelector(".persona-artifact-inline-chrome");
+    expect(el.querySelector("[data-artifact-custom-action]")).toBeNull();
+
+    updateInlineArtifactBlocks(container, [
+      {
+        id: "a1",
+        artifactType: "markdown",
+        title: "Notes",
+        status: "complete",
+        markdown: "# Done"
+      }
+    ]);
+
+    // Same root + same chrome node: updated in place, not re-rendered.
+    expect(container.firstElementChild).toBe(el);
+    expect(el.querySelector(".persona-artifact-inline-chrome")).toBe(chromeBefore);
+    // Streaming status gave way to the type label and the complete-gated actions.
+    expect(el.querySelector(".persona-artifact-inline-status")).toBeNull();
+    expect(el.querySelector(".persona-artifact-inline-type")?.textContent).toBe(
+      "Document"
+    );
+    const copy = el.querySelector("[data-copy-artifact]") as HTMLElement | null;
+    expect(copy!.classList.contains("persona-hidden")).toBe(false);
+    expect(el.querySelector('[data-artifact-custom-action="log"]')).toBeTruthy();
+  });
+
+  it("omits the chrome bar but keeps the body wrapper when inlineChrome is false", () => {
+    const el = PersonaArtifactInline(
+      completeProps(),
+      makeContext(makeConfig({ inlineChrome: false }))
+    );
+    expect(el.querySelector(".persona-artifact-inline-chrome")).toBeNull();
+    expect(el.querySelector("[data-copy-artifact]")).toBeNull();
+    expect(el.querySelector("[data-expand-artifact-inline]")).toBeNull();
+    // The body wrapper is always present (it carries the frame padding).
+    const body = el.querySelector(".persona-artifact-inline-body");
+    expect(body).not.toBeNull();
+    expect(body!.querySelector(".persona-artifact-preview-body")).toBeTruthy();
+  });
+
+  it("drops only the copy button for inlineChrome { showCopy: false }", () => {
+    const el = PersonaArtifactInline(
+      completeProps(),
+      makeContext(makeConfig({ inlineChrome: { showCopy: false } }))
+    );
+    expect(el.querySelector(".persona-artifact-inline-chrome")).not.toBeNull();
+    expect(el.querySelector("[data-copy-artifact]")).toBeNull();
+    expect(el.querySelector("[data-expand-artifact-inline]")).not.toBeNull();
+  });
+
+  it("drops only the expand button for inlineChrome { showExpand: false }", () => {
+    const el = PersonaArtifactInline(
+      completeProps(),
+      makeContext(makeConfig({ inlineChrome: { showExpand: false } }))
+    );
+    expect(el.querySelector(".persona-artifact-inline-chrome")).not.toBeNull();
+    expect(el.querySelector("[data-copy-artifact]")).not.toBeNull();
+    expect(el.querySelector("[data-expand-artifact-inline]")).toBeNull();
+  });
+
+  it("respects each inline action's visible() gate", () => {
+    const el = PersonaArtifactInline(
+      completeProps(),
+      makeContext(
+        makeConfig({
+          inlineActions: [
+            { id: "shown", label: "Shown", onClick: () => {} },
+            {
+              id: "hidden",
+              label: "Hidden",
+              visible: () => false,
+              onClick: () => {}
+            }
+          ]
+        })
+      )
+    );
+    expect(el.querySelector('[data-artifact-custom-action="shown"]')).toBeTruthy();
+    expect(el.querySelector('[data-artifact-custom-action="hidden"]')).toBeNull();
+  });
+});
+
+describe("PersonaArtifactInline inlineBody height model", () => {
+  const BODY_HEIGHT_VAR = "--persona-artifact-inline-body-height";
+
+  const fileStreamingProps = (): Record<string, unknown> => ({
+    artifactId: "f1",
+    title: "outputs/cat.html",
+    artifactType: "markdown",
+    status: "streaming",
+    markdown: "```html\n<h1>hi",
+    file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+  });
+
+  const fileCompleteRecord = (): PersonaArtifactRecord => ({
+    id: "f1",
+    artifactType: "markdown",
+    title: "outputs/cat.html",
+    status: "complete",
+    markdown: wireFor(HTML_RAW, "html"),
+    file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+  });
+
+  it("defaults to a fixed 320px streaming source window", () => {
+    const el = PersonaArtifactInline(fileStreamingProps(), makeContext(makeConfig()));
+    expect(el.style.getPropertyValue(BODY_HEIGHT_VAR)).toBe("320px");
+    expect(el.querySelector(".persona-artifact-source-window--fixed")).toBeTruthy();
+  });
+
+  it("applies a scalar numeric height to both states", () => {
+    const el = PersonaArtifactInline(
+      fileStreamingProps(),
+      makeContext(makeConfig({ inlineBody: { height: 200 } }))
+    );
+    expect(el.style.getPropertyValue(BODY_HEIGHT_VAR)).toBe("200px");
+  });
+
+  it("applies object heights per state and updates the var on complete", () => {
+    const container = document.createElement("div");
+    const el = PersonaArtifactInline(
+      fileStreamingProps(),
+      makeContext(makeConfig({ inlineBody: { height: { streaming: 150, complete: 400 } } }))
+    );
+    container.appendChild(el);
+    expect(el.style.getPropertyValue(BODY_HEIGHT_VAR)).toBe("150px");
+
+    updateInlineArtifactBlocks(container, [fileCompleteRecord()]);
+    expect(el.style.getPropertyValue(BODY_HEIGHT_VAR)).toBe("400px");
+  });
+
+  it("leaves the height var unset (no fixed window) for height 'auto'", () => {
+    const el = PersonaArtifactInline(
+      fileStreamingProps(),
+      makeContext(makeConfig({ inlineBody: { height: "auto" } }))
+    );
+    expect(el.style.getPropertyValue(BODY_HEIGHT_VAR)).toBe("");
+    expect(el.querySelector(".persona-artifact-source-window--fixed")).toBeNull();
+  });
+
+  it("renders the status placeholder while streaming with streamingView 'status'", () => {
+    const el = PersonaArtifactInline(
+      fileStreamingProps(),
+      makeContext(
+        makeConfig({ inlineBody: { streamingView: "status" }, loadingAnimation: "none" })
+      )
+    );
+    const status = el.querySelector(".persona-artifact-status-view");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toContain("Generating");
+    expect(el.querySelector(".persona-artifact-source-window")).toBeNull();
+  });
+
+  it("caps a non-iframe complete body and leaves the iframe body uncapped", () => {
+    // Non-file markdown complete → capped (no iframe).
+    const capped = PersonaArtifactInline(completeProps(), makeContext(makeConfig()));
+    expect(capped.querySelector(".persona-artifact-inline-body--cap")).toBeTruthy();
+
+    // File complete → iframe, sized by the var, so not capped.
+    const iframeEl = PersonaArtifactInline(
+      {
+        artifactId: "f1",
+        title: "outputs/cat.html",
+        artifactType: "markdown",
+        status: "complete",
+        markdown: wireFor(HTML_RAW, "html"),
+        file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+      },
+      makeContext(makeConfig())
+    );
+    expect(iframeEl.querySelector("iframe")).toBeTruthy();
+    expect(iframeEl.querySelector(".persona-artifact-inline-body--cap")).toBeNull();
+  });
+});
+
+describe("resolveInlineBody fadeMask defaults", () => {
+  it("defaults to top+bottom fade when fadeMask is undefined", () => {
+    const layout = resolveInlineBody({} as AgentWidgetArtifactsFeature);
+    expect(layout.fadeTop).toBe(true);
+    expect(layout.fadeBottom).toBe(true);
+  });
+
+  it("keeps an explicit { top: true } as top-only (bottom off)", () => {
+    const layout = resolveInlineBody({
+      inlineBody: { fadeMask: { top: true } }
+    } as AgentWidgetArtifactsFeature);
+    expect(layout.fadeTop).toBe(true);
+    expect(layout.fadeBottom).toBe(false);
+  });
+
+  it("disables both fades for fadeMask false", () => {
+    const layout = resolveInlineBody({
+      inlineBody: { fadeMask: false }
+    } as AgentWidgetArtifactsFeature);
+    expect(layout.fadeTop).toBe(false);
+    expect(layout.fadeBottom).toBe(false);
+  });
+
+  it("enables both fades for fadeMask true", () => {
+    const layout = resolveInlineBody({
+      inlineBody: { fadeMask: true }
+    } as AgentWidgetArtifactsFeature);
+    expect(layout.fadeTop).toBe(true);
+    expect(layout.fadeBottom).toBe(true);
+  });
+});
+
+describe("resolveInlineBody overflow precedence", () => {
+  it("defaults overflow to 'scroll' with tail-follow on and top+bottom fade", () => {
+    const layout = resolveInlineBody({} as AgentWidgetArtifactsFeature);
+    expect(layout.overflow).toBe("scroll");
+    expect(layout.followOutput).toBe(true);
+    expect(layout.fadeTop).toBe(true);
+    expect(layout.fadeBottom).toBe(true);
+  });
+
+  it("ignores followOutput in clip mode (forced off) even when set true", () => {
+    const layout = resolveInlineBody({
+      inlineBody: { overflow: "clip", followOutput: true }
+    } as AgentWidgetArtifactsFeature);
+    expect(layout.overflow).toBe("clip");
+    expect(layout.followOutput).toBe(false);
+  });
+
+  it("defaults clip mode to bottom-only fade (no top fade)", () => {
+    const layout = resolveInlineBody({
+      inlineBody: { overflow: "clip" }
+    } as AgentWidgetArtifactsFeature);
+    expect(layout.fadeTop).toBe(false);
+    expect(layout.fadeBottom).toBe(true);
+  });
+
+  it("lets an explicit fadeMask win over the clip-mode fade default", () => {
+    const layout = resolveInlineBody({
+      inlineBody: { overflow: "clip", fadeMask: { top: true, bottom: false } }
+    } as AgentWidgetArtifactsFeature);
+    expect(layout.fadeTop).toBe(true);
+    expect(layout.fadeBottom).toBe(false);
+  });
+});
+
+describe("PersonaArtifactInline inlineBody viewMode", () => {
+  const htmlFileProps = (status: "streaming" | "complete"): Record<string, unknown> => ({
+    artifactId: "f1",
+    title: "outputs/cat.html",
+    artifactType: "markdown",
+    status,
+    markdown: wireFor(HTML_RAW, "html"),
+    file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+  });
+
+  it("keeps the rendered default: complete html file previews in an iframe", () => {
+    const el = PersonaArtifactInline(htmlFileProps("complete"), makeContext(makeConfig()));
+    expect(el.querySelector("iframe")).toBeTruthy();
+  });
+
+  it("viewMode 'source' shows highlighted source instead of the iframe preview", () => {
+    const el = PersonaArtifactInline(
+      htmlFileProps("complete"),
+      makeContext(makeConfig({ inlineBody: { viewMode: "source" } }))
+    );
+    expect(el.querySelector("iframe")).toBeNull();
+    expect(el.querySelector(".persona-code-pre")).toBeTruthy();
+    // The complete source view keeps the same sized wrapper + inner window the
+    // streaming state uses (geometry-identical swap): full-bleed like the
+    // pane's source view, no padded-wrapper cap.
+    expect(el.querySelector(".persona-artifact-source-window--fixed")).toBeTruthy();
+    const bodyEl = el.querySelector(".persona-artifact-inline-body")!;
+    expect(bodyEl.classList.contains("persona-artifact-content-flush")).toBe(true);
+    expect(bodyEl.classList.contains("persona-artifact-inline-body--sized")).toBe(true);
+    expect(bodyEl.classList.contains("persona-artifact-inline-body--cap")).toBe(false);
+  });
+
+  it("viewMode 'source' covers markdown-kind files (no rendered markdown)", () => {
+    const MD_RAW = "# Title\n";
+    const el = PersonaArtifactInline(
+      {
+        artifactId: "m1",
+        title: "notes.md",
+        artifactType: "markdown",
+        status: "complete",
+        markdown: wireFor(MD_RAW, "markdown"),
+        file: { path: "notes.md", mimeType: "text/markdown", language: "markdown" }
+      },
+      makeContext(makeConfig({ inlineBody: { viewMode: "source" } }))
+    );
+    expect(el.querySelector(".persona-markdown-bubble")).toBeNull();
+    const pre = el.querySelector(".persona-code-pre");
+    expect(pre).toBeTruthy();
+    expect(pre!.textContent).toContain("# Title");
+  });
+
+  it("viewMode 'source' covers plain markdown artifacts", () => {
+    const el = PersonaArtifactInline(
+      completeProps(),
+      makeContext(makeConfig({ inlineBody: { viewMode: "source" } }))
+    );
+    expect(el.querySelector(".persona-markdown-bubble")).toBeNull();
+    expect(el.querySelector(".persona-code-pre")).toBeTruthy();
+  });
+
+  it("viewMode 'source' keeps the streaming source window and swaps nothing on complete", () => {
+    const container = document.createElement("div");
+    const el = PersonaArtifactInline(
+      htmlFileProps("streaming"),
+      makeContext(makeConfig({ inlineBody: { viewMode: "source" } }))
+    );
+    container.appendChild(el);
+    const preBefore = el.querySelector(".persona-code-pre");
+    expect(preBefore).toBeTruthy();
+
+    updateInlineArtifactBlocks(container, [
+      {
+        id: "f1",
+        artifactType: "markdown",
+        title: "outputs/cat.html",
+        status: "complete",
+        markdown: wireFor(HTML_RAW, "html"),
+        file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+      }
+    ]);
+    expect(el.querySelector("iframe")).toBeNull();
+    // Same <pre> node survives the streaming→complete boundary (in-place update).
+    expect(el.querySelector(".persona-code-pre")).toBe(preBefore);
+  });
+});
+
+describe("PersonaArtifactInline inlineBody flush and sized wrappers", () => {
+  it("streams source full-bleed in a sized wrapper (pane-style flush code)", () => {
+    const el = PersonaArtifactInline(
+      {
+        artifactId: "f1",
+        title: "outputs/cat.html",
+        artifactType: "markdown",
+        status: "streaming",
+        markdown: "```html\n<h1>hi",
+        file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+      },
+      makeContext(makeConfig())
+    );
+    const bodyEl = el.querySelector(".persona-artifact-inline-body")!;
+    expect(bodyEl.classList.contains("persona-artifact-content-flush")).toBe(true);
+    expect(bodyEl.classList.contains("persona-artifact-inline-body--sized")).toBe(true);
+  });
+
+  it("keeps rendered markdown padded (no flush, no sized wrapper)", () => {
+    const el = PersonaArtifactInline(completeProps(), makeContext(makeConfig()));
+    const bodyEl = el.querySelector(".persona-artifact-inline-body")!;
+    expect(bodyEl.classList.contains("persona-artifact-content-flush")).toBe(false);
+    expect(bodyEl.classList.contains("persona-artifact-inline-body--sized")).toBe(false);
+    expect(bodyEl.classList.contains("persona-artifact-inline-body--cap")).toBe(true);
+  });
+
+  it("sizes the wrapper for the complete iframe (padded, same outer box)", () => {
+    const el = PersonaArtifactInline(
+      {
+        artifactId: "f1",
+        title: "outputs/cat.html",
+        artifactType: "markdown",
+        status: "complete",
+        markdown: wireFor(HTML_RAW, "html"),
+        file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+      },
+      makeContext(makeConfig())
+    );
+    const bodyEl = el.querySelector(".persona-artifact-inline-body")!;
+    expect(el.querySelector("iframe")).toBeTruthy();
+    expect(bodyEl.classList.contains("persona-artifact-inline-body--sized")).toBe(true);
+    expect(bodyEl.classList.contains("persona-artifact-content-flush")).toBe(false);
+  });
+});
+
+describe("PersonaArtifactInline view toggle", () => {
+  // The toggle is a segmented group (createToggleGroup) matching the pane: two
+  // always-visible buttons — "Rendered view" (eye) and "Source" (code-xml) — with
+  // the active one carrying aria-pressed="true". The whole group is hidden via
+  // persona-hidden when the artifact has no rendered alternative, and omitted
+  // entirely for showViewToggle: false.
+  const groupOf = (el: HTMLElement): HTMLElement | null =>
+    el.querySelector(".persona-artifact-toggle-group");
+  const renderedBtn = (el: HTMLElement): HTMLElement =>
+    el.querySelector('button[aria-label="Rendered view"]') as HTMLElement;
+  const sourceBtn = (el: HTMLElement): HTMLElement =>
+    el.querySelector('button[aria-label="Source"]') as HTMLElement;
+  const isHidden = (node: HTMLElement | null): boolean =>
+    !!node && node.classList.contains("persona-hidden");
+  const pressed = (btn: HTMLElement): boolean =>
+    btn.getAttribute("aria-pressed") === "true";
+
+  const htmlFileProps = (
+    status: "streaming" | "complete"
+  ): Record<string, unknown> => ({
+    artifactId: "f1",
+    title: "outputs/cat.html",
+    artifactType: "markdown",
+    status,
+    markdown: status === "streaming" ? "```html\n<h1>hi" : wireFor(HTML_RAW, "html"),
+    file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+  });
+
+  const htmlCompleteRecord = (): PersonaArtifactRecord => ({
+    id: "f1",
+    artifactType: "markdown",
+    title: "outputs/cat.html",
+    status: "complete",
+    markdown: wireFor(HTML_RAW, "html"),
+    file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+  });
+
+  it("shows the segmented toggle on a complete html file artifact", () => {
+    const el = PersonaArtifactInline(
+      htmlFileProps("complete"),
+      makeContext(makeConfig())
+    );
+    const group = groupOf(el);
+    expect(group).not.toBeNull();
+    expect(isHidden(group)).toBe(false);
+    // Both segments present; rendered is the default active segment.
+    expect(renderedBtn(el)).not.toBeNull();
+    expect(sourceBtn(el)).not.toBeNull();
+    expect(pressed(renderedBtn(el))).toBe(true);
+    expect(pressed(sourceBtn(el))).toBe(false);
+    // Placed between custom actions and the copy button.
+    const copy = el.querySelector("[data-copy-artifact]") as HTMLElement;
+    expect(
+      group!.compareDocumentPosition(copy) & Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+  });
+
+  it("hides the group while streaming", () => {
+    const el = PersonaArtifactInline(
+      htmlFileProps("streaming"),
+      makeContext(makeConfig({ loadingAnimation: "none" }))
+    );
+    expect(isHidden(groupOf(el))).toBe(true);
+  });
+
+  it("hides the group for plain markdown artifacts", () => {
+    const el = PersonaArtifactInline(completeProps(), makeContext(makeConfig()));
+    expect(isHidden(groupOf(el))).toBe(true);
+  });
+
+  it("hides the group for component artifacts", () => {
+    const name = "TestInlineToggleChart";
+    componentRegistry.register(name, () => {
+      const node = document.createElement("div");
+      node.className = "test-toggle-chart";
+      return node;
+    });
+    try {
+      const el = PersonaArtifactInline(
+        {
+          artifactId: "c1",
+          title: "Chart",
+          artifactType: "component",
+          status: "complete",
+          component: name,
+          componentProps: {}
+        },
+        makeContext(makeConfig())
+      );
+      expect(isHidden(groupOf(el))).toBe(true);
+    } finally {
+      componentRegistry.unregister(name);
+    }
+  });
+
+  it("hides the group for a source-only (kind 'other') file artifact", () => {
+    const el = PersonaArtifactInline(
+      {
+        artifactId: "o1",
+        title: "script.py",
+        artifactType: "markdown",
+        status: "complete",
+        markdown: wireFor("print(1)\n", "python"),
+        file: { path: "script.py", mimeType: "text/x-python", language: "python" }
+      },
+      makeContext(makeConfig())
+    );
+    expect(isHidden(groupOf(el))).toBe(true);
+  });
+
+  it("hides the group when filePreview is disabled for an html file", () => {
+    const el = PersonaArtifactInline(
+      htmlFileProps("complete"),
+      makeContext(makeConfig({ filePreview: { enabled: false } }))
+    );
+    expect(isHidden(groupOf(el))).toBe(true);
+  });
+
+  it("hides the group when inlineBody.viewMode is 'source'", () => {
+    const el = PersonaArtifactInline(
+      htmlFileProps("complete"),
+      makeContext(makeConfig({ inlineBody: { viewMode: "source" } }))
+    );
+    expect(isHidden(groupOf(el))).toBe(true);
+  });
+
+  it("omits the group entirely for inlineChrome { showViewToggle: false }", () => {
+    const el = PersonaArtifactInline(
+      htmlFileProps("complete"),
+      makeContext(makeConfig({ inlineChrome: { showViewToggle: false } }))
+    );
+    expect(groupOf(el)).toBeNull();
+    // Copy + expand remain.
+    expect(el.querySelector("[data-copy-artifact]")).not.toBeNull();
+    expect(el.querySelector("[data-expand-artifact-inline]")).not.toBeNull();
+  });
+
+  it("flips iframe -> source and back when clicking the inactive segment", () => {
+    const el = PersonaArtifactInline(
+      htmlFileProps("complete"),
+      makeContext(makeConfig())
+    );
+    expect(el.querySelector("iframe")).toBeTruthy();
+    const bodyEl = el.querySelector(".persona-artifact-inline-body")!;
+
+    // rendered -> source
+    sourceBtn(el).click();
+    expect(el.querySelector("iframe")).toBeNull();
+    expect(el.querySelector(".persona-code-pre")).toBeTruthy();
+    expect(pressed(sourceBtn(el))).toBe(true);
+    expect(pressed(renderedBtn(el))).toBe(false);
+    // Source view recomputes to full-bleed + sized.
+    expect(bodyEl.classList.contains("persona-artifact-content-flush")).toBe(true);
+    expect(bodyEl.classList.contains("persona-artifact-inline-body--sized")).toBe(true);
+
+    // source -> rendered
+    renderedBtn(el).click();
+    expect(el.querySelector("iframe")).toBeTruthy();
+    expect(el.querySelector(".persona-code-pre")).toBeNull();
+    expect(pressed(renderedBtn(el))).toBe(true);
+    expect(pressed(sourceBtn(el))).toBe(false);
+    // Preview iframe is padded (not flush) but still sized (same outer box).
+    expect(bodyEl.classList.contains("persona-artifact-content-flush")).toBe(false);
+    expect(bodyEl.classList.contains("persona-artifact-inline-body--sized")).toBe(true);
+  });
+
+  it("is a no-op when clicking the already-active segment", () => {
+    const el = PersonaArtifactInline(
+      htmlFileProps("complete"),
+      makeContext(makeConfig())
+    );
+    const iframeBefore = el.querySelector("iframe");
+    expect(iframeBefore).toBeTruthy();
+
+    // Clicking the active (rendered) segment does not re-render the body: the
+    // same iframe node survives and the source view is never built.
+    renderedBtn(el).click();
+    expect(el.querySelector("iframe")).toBe(iframeBefore);
+    expect(el.querySelector(".persona-code-pre")).toBeNull();
+    expect(pressed(renderedBtn(el))).toBe(true);
+    expect(pressed(sourceBtn(el))).toBe(false);
+  });
+
+  it("resets to the configured default view when the block restarts streaming", () => {
+    const container = document.createElement("div");
+    const el = PersonaArtifactInline(
+      htmlFileProps("complete"),
+      makeContext(makeConfig({ loadingAnimation: "none" }))
+    );
+    container.appendChild(el);
+
+    // Toggle to source, then a streaming restart clears the choice.
+    sourceBtn(el).click();
+    expect(el.querySelector(".persona-code-pre")).toBeTruthy();
+
+    updateInlineArtifactBlocks(container, [
+      { ...htmlCompleteRecord(), status: "streaming", markdown: "```html\n<h1>hi" }
+    ]);
+    updateInlineArtifactBlocks(container, [htmlCompleteRecord()]);
+
+    // Back on the rendered default (iframe), the group's selection reset.
+    expect(el.querySelector("iframe")).toBeTruthy();
+    expect(pressed(renderedBtn(el))).toBe(true);
+    expect(pressed(sourceBtn(el))).toBe(false);
+  });
+});
+
+describe("resolveInlineBody completeDisplay", () => {
+  it("defaults completeDisplay to 'inline'", () => {
+    const layout = resolveInlineBody({} as AgentWidgetArtifactsFeature);
+    expect(layout.completeDisplay).toBe("inline");
+  });
+
+  it("resolves completeDisplay 'card' when set", () => {
+    const layout = resolveInlineBody({
+      inlineBody: { completeDisplay: "card" }
+    } as AgentWidgetArtifactsFeature);
+    expect(layout.completeDisplay).toBe("card");
+  });
+});
+
+describe("PersonaArtifactInline completeDisplay 'card'", () => {
+  const cardConfig = () => makeConfig({ inlineBody: { completeDisplay: "card" } });
+
+  it("keeps the streamed inline body while streaming (no card yet)", () => {
+    const el = PersonaArtifactInline(streamingProps(), makeContext(cardConfig()));
+    // Streaming phase renders the normal inline chrome + body, not the card.
+    expect(el.querySelector(".persona-artifact-inline-chrome")).not.toBeNull();
+    expect(el.querySelector(".persona-artifact-inline-body")).not.toBeNull();
+    expect(el.querySelector(".persona-artifact-card")).toBeNull();
+    expect(el.classList.contains("persona-artifact-inline--card")).toBe(false);
+  });
+
+  it("collapses chrome + body to the card on the streaming→complete boundary, same root", () => {
+    const container = document.createElement("div");
+    const el = PersonaArtifactInline(streamingProps(), makeContext(cardConfig()));
+    container.appendChild(el);
+    expect(el.querySelector(".persona-artifact-inline-chrome")).not.toBeNull();
+
+    updateInlineArtifactBlocks(container, [
+      {
+        id: "a1",
+        artifactType: "markdown",
+        title: "Notes",
+        status: "complete",
+        markdown: "# Done"
+      }
+    ]);
+
+    // Same root element, data-artifact-inline + theme zone preserved.
+    expect(container.firstElementChild).toBe(el);
+    expect(el.getAttribute("data-artifact-inline")).toBe("a1");
+    expect(el.getAttribute("data-persona-theme-zone")).toBe("artifact-inline");
+    // Chrome + body replaced by the reference card.
+    expect(el.querySelector(".persona-artifact-inline-chrome")).toBeNull();
+    expect(el.querySelector(".persona-artifact-inline-body")).toBeNull();
+    const card = el.querySelector(".persona-artifact-card") as HTMLElement | null;
+    expect(card).not.toBeNull();
+    expect(card!.getAttribute("data-open-artifact")).toBe("a1");
+    expect(card!.textContent).toContain("Notes");
+    // Frame styling neutralized so the nested card is the sole visual.
+    expect(el.classList.contains("persona-artifact-inline--card")).toBe(true);
+  });
+
+  it("does not run the View Transition on the card-collapse boundary", () => {
+    type VTStub = {
+      startViewTransition?: (cb: () => void) => { finished: Promise<void> };
+    };
+    const start = vi.fn((cb: () => void) => {
+      cb();
+      return { finished: Promise.resolve() };
+    });
+    (document as unknown as VTStub).startViewTransition = start;
+    try {
+      const container = document.createElement("div");
+      const el = PersonaArtifactInline(streamingProps(), makeContext(cardConfig()));
+      container.appendChild(el);
+      updateInlineArtifactBlocks(container, [
+        {
+          id: "a1",
+          artifactType: "markdown",
+          title: "Notes",
+          status: "complete",
+          markdown: "# Done"
+        }
+      ]);
+      // The plain-CSS collapse replaces the body View Transition.
+      expect(start).not.toHaveBeenCalled();
+      expect(el.querySelector(".persona-artifact-card")).not.toBeNull();
+    } finally {
+      delete (document as unknown as VTStub).startViewTransition;
+    }
+  });
+
+  it("hydrates an already-complete block straight to the card (no inline body flash)", () => {
+    const el = PersonaArtifactInline(completeProps(), makeContext(cardConfig()));
+    expect(el.querySelector(".persona-artifact-inline-chrome")).toBeNull();
+    expect(el.querySelector(".persona-artifact-inline-body")).toBeNull();
+    const card = el.querySelector(".persona-artifact-card") as HTMLElement | null;
+    expect(card).not.toBeNull();
+    expect(card!.getAttribute("data-open-artifact")).toBe("a1");
+    expect(el.classList.contains("persona-artifact-inline--card")).toBe(true);
+  });
+
+  it("keeps routing records to the block after the collapse (card stays in sync)", () => {
+    const container = document.createElement("div");
+    const el = PersonaArtifactInline(
+      completeProps(),
+      makeContext(cardConfig())
+    );
+    container.appendChild(el);
+    expect(el.querySelector(".persona-artifact-card")?.textContent).toContain(
+      "Notes"
+    );
+
+    updateInlineArtifactBlocks(container, [
+      {
+        id: "a1",
+        artifactType: "markdown",
+        title: "Renamed",
+        status: "complete",
+        markdown: "# Done"
+      }
+    ]);
+    const card = el.querySelector(".persona-artifact-card") as HTMLElement | null;
+    expect(card).not.toBeNull();
+    expect(card!.textContent).toContain("Renamed");
+  });
+
+  it("leaves no explicit height on the root in the jsdom instant path", () => {
+    const container = document.createElement("div");
+    // Detached container → root is not connected → collapse degrades to an
+    // instant swap, leaving no inline height/overflow/transition behind.
+    const el = PersonaArtifactInline(streamingProps(), makeContext(cardConfig()));
+    container.appendChild(el);
+    updateInlineArtifactBlocks(container, [
+      {
+        id: "a1",
+        artifactType: "markdown",
+        title: "Notes",
+        status: "complete",
+        markdown: "# Done"
+      }
+    ]);
+    expect(el.style.height).toBe("");
+    expect(el.style.overflow).toBe("");
+    expect(el.style.transition).toBe("");
+    expect(
+      el.style.getPropertyValue("--persona-artifact-inline-body-height")
+    ).toBe("");
+  });
+
+  it("default 'inline' completeDisplay stays inline through completion (no card)", () => {
+    const container = document.createElement("div");
+    const el = PersonaArtifactInline(streamingProps(), makeContext(makeConfig()));
+    container.appendChild(el);
+    updateInlineArtifactBlocks(container, [
+      {
+        id: "a1",
+        artifactType: "markdown",
+        title: "Notes",
+        status: "complete",
+        markdown: "# Done"
+      }
+    ]);
+    expect(el.querySelector(".persona-artifact-card")).toBeNull();
+    expect(el.querySelector(".persona-artifact-inline-chrome")).not.toBeNull();
+    expect(el.querySelector(".persona-artifact-inline-body")).not.toBeNull();
+  });
+});
+
+describe("PersonaArtifactInline clip-mode expand hitbox", () => {
+  const fileStreamingProps = (): Record<string, unknown> => ({
+    artifactId: "f1",
+    title: "outputs/cat.html",
+    artifactType: "markdown",
+    status: "streaming",
+    markdown: "```html\n<h1>hi",
+    file: { path: "outputs/cat.html", mimeType: "text/html", language: "html" }
+  });
+  const bodyOf = (el: HTMLElement): HTMLElement =>
+    el.querySelector(".persona-artifact-inline-body") as HTMLElement;
+
+  it("marks the body as an expand hitbox in clip mode with expand enabled", () => {
+    const el = PersonaArtifactInline(
+      fileStreamingProps(),
+      makeContext(makeConfig({ inlineBody: { overflow: "clip" } }))
+    );
+    const body = bodyOf(el);
+    expect(body.getAttribute("data-expand-artifact-inline")).toBe("f1");
+    expect(body.getAttribute("role")).toBe("button");
+    expect(body.getAttribute("tabindex")).toBe("0");
+    expect(body.classList.contains("persona-cursor-pointer")).toBe(true);
+    // File artifacts use the basename as the chrome title.
+    expect(body.getAttribute("aria-label")).toBe("Open cat.html in panel");
+  });
+
+  it("does not mark the body when overflow is 'scroll' (default)", () => {
+    const el = PersonaArtifactInline(
+      fileStreamingProps(),
+      makeContext(makeConfig({ inlineBody: { overflow: "scroll" } }))
+    );
+    expect(
+      bodyOf(el).hasAttribute("data-expand-artifact-inline")
+    ).toBe(false);
+  });
+
+  it("does not mark the body in clip mode when expand is disabled", () => {
+    const el = PersonaArtifactInline(
+      fileStreamingProps(),
+      makeContext(
+        makeConfig({
+          inlineBody: { overflow: "clip" },
+          inlineChrome: { showExpand: false }
+        })
+      )
+    );
+    expect(
+      bodyOf(el).hasAttribute("data-expand-artifact-inline")
+    ).toBe(false);
+  });
+
+  it("does not mark the body in clip mode when chrome is off (no expand control)", () => {
+    const el = PersonaArtifactInline(
+      fileStreamingProps(),
+      makeContext(
+        makeConfig({ inlineBody: { overflow: "clip" }, inlineChrome: false })
+      )
+    );
+    expect(
+      bodyOf(el).hasAttribute("data-expand-artifact-inline")
+    ).toBe(false);
+  });
+});
+
+describe("PersonaArtifactInline statusLabel (inline chrome)", () => {
+  const rec = (markdown: string): PersonaArtifactRecord => ({
+    id: "a1",
+    artifactType: "markdown",
+    title: "Notes",
+    status: "streaming",
+    markdown
+  });
+
+  const mount = (artifacts: Record<string, unknown>) => {
+    const el = PersonaArtifactInline(
+      streamingProps(),
+      makeContext(makeConfig(artifacts))
+    );
+    const container = document.createElement("div");
+    container.appendChild(el);
+    return { el, container };
+  };
+
+  const labelEl = (el: HTMLElement): HTMLElement | null =>
+    el.querySelector(
+      ".persona-artifact-inline-status .persona-artifact-status-label"
+    );
+  const detailEl = (el: HTMLElement): HTMLElement | null =>
+    el.querySelector(
+      ".persona-artifact-inline-status .persona-artifact-status-detail"
+    );
+
+  it("passes the inline-chrome surface and streamed counts; content() is lazy", () => {
+    const calls: PersonaArtifactStatusLabelContext[] = [];
+    const { el, container } = mount({
+      loadingAnimation: "none",
+      statusLabel: (ctx: PersonaArtifactStatusLabelContext) => {
+        calls.push(ctx);
+        return { label: "Writing", detail: `${ctx.lines} lines` };
+      }
+    });
+    updateInlineArtifactBlocks(container, [rec("line one\nline two")]);
+    const last = calls[calls.length - 1];
+    expect(last.surface).toBe("inline-chrome");
+    expect(last.artifactId).toBe("a1");
+    expect(last.artifactType).toBe("markdown");
+    expect(last.chars).toBe("line one\nline two".length);
+    expect(last.lines).toBe(2);
+    // content() returns the accumulated markdown only when the host calls it.
+    expect(last.content()).toBe("line one\nline two");
+    expect(detailEl(el)?.textContent).toBe("2 lines");
+  });
+
+  it("updates the detail per delta while keeping the animated label element stable", () => {
+    const { el, container } = mount({
+      loadingAnimation: "none",
+      statusLabel: (ctx: PersonaArtifactStatusLabelContext) => ({
+        label: "Writing",
+        detail: `${ctx.chars}`
+      })
+    });
+    updateInlineArtifactBlocks(container, [rec("Hello")]);
+    const label1 = labelEl(el);
+    expect(detailEl(el)?.textContent).toBe("5");
+    updateInlineArtifactBlocks(container, [rec("Hello world")]);
+    const label2 = labelEl(el);
+    expect(detailEl(el)?.textContent).toBe("11");
+    // Same node: an unchanged label is never re-applied, so the loading
+    // animation does not restart on a detail-only update.
+    expect(label1).not.toBeNull();
+    expect(label1).toBe(label2);
+  });
+
+  it("re-applies the label element when the label text changes", () => {
+    const { el, container } = mount({
+      loadingAnimation: "none",
+      statusLabel: (ctx: PersonaArtifactStatusLabelContext) => ({
+        label: ctx.chars > 6 ? "Almost done" : "Writing"
+      })
+    });
+    updateInlineArtifactBlocks(container, [rec("short")]);
+    expect(labelEl(el)?.textContent).toBe("Writing");
+    updateInlineArtifactBlocks(container, [rec("a longer body")]);
+    expect(labelEl(el)?.textContent).toBe("Almost done");
+  });
+
+  it("replaces the default status with a plain string", () => {
+    const { el, container } = mount({
+      loadingAnimation: "none",
+      statusLabel: "One moment..."
+    });
+    updateInlineArtifactBlocks(container, [rec("Hi")]);
+    expect(labelEl(el)?.textContent).toBe("One moment...");
+    expect(
+      el.querySelector(".persona-artifact-inline-status")?.textContent
+    ).not.toContain("Generating");
+  });
+
+  it("falls back to the default label when the function throws", () => {
+    const { el, container } = mount({
+      loadingAnimation: "none",
+      statusLabel: () => {
+        throw new Error("boom");
+      }
+    });
+    updateInlineArtifactBlocks(container, [rec("Hi")]);
+    // Plain markdown artifact (no file) → typeLabel "Document".
+    expect(labelEl(el)?.textContent).toBe("Generating document...");
+  });
+
+  it("still applies the loading animation to the label span by default", () => {
+    const { el, container } = mount({
+      statusLabel: () => ({ label: "Writing", detail: "x" })
+    });
+    updateInlineArtifactBlocks(container, [rec("Hi")]);
+    const label = labelEl(el);
+    expect(label?.classList.contains("persona-tool-loading-shimmer")).toBe(true);
+    // The detail span never carries the animation.
+    expect(detailEl(el)?.querySelector(".persona-tool-char")).toBeNull();
+  });
+});