@runtypelabs/persona 4.11.1 → 4.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.11.1",
+  "version": "4.13.0",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/codegen.test.ts

@@ -23,6 +23,49 @@ describe("codegen subpath", () => {
     expect(code).not.toContain("@latest");
   });
 
+  describe("cdnBase option", () => {
+    const cdnBase = "https://cdn.runtype.com/persona/latest";
+
+    it("emits the custom base in every script format", () => {
+      expect(fromSubpath(config, "script-installer", { cdnBase })).toContain(
+        `src="${cdnBase}/install.global.js"`
+      );
+      const manual = fromSubpath(config, "script-manual", { cdnBase });
+      expect(manual).toContain(`href="${cdnBase}/widget.css"`);
+      expect(manual).toContain(`src="${cdnBase}/index.global.js"`);
+      expect(fromSubpath(config, "script-advanced", { cdnBase })).toContain(
+        `var CDN_BASE = '${cdnBase}';`
+      );
+    });
+
+    it("tolerates a trailing slash", () => {
+      const code = fromSubpath(config, "script-installer", { cdnBase: `${cdnBase}/` });
+      expect(code).toContain(`src="${cdnBase}/install.global.js"`);
+    });
+
+    it("percent-encodes characters that could break the emitted JS/HTML contexts", () => {
+      const hostile = "https://cdn.example.com/x'\"\\`/persona";
+      const encoded = "https://cdn.example.com/x%27%22%5C%60/persona";
+      // script-advanced emits into a single-quoted JS literal
+      expect(fromSubpath(config, "script-advanced", { cdnBase: hostile })).toContain(
+        `var CDN_BASE = '${encoded}';`
+      );
+      // script-installer / script-manual emit into double-quoted HTML attributes
+      expect(fromSubpath(config, "script-installer", { cdnBase: hostile })).toContain(
+        `src="${encoded}/install.global.js"`
+      );
+      expect(fromSubpath(config, "script-manual", { cdnBase: hostile })).toContain(
+        `href="${encoded}/widget.css"`
+      );
+    });
+
+    it("leaves no jsDelivr URL behind when a custom base is set", () => {
+      for (const format of ["script-installer", "script-manual", "script-advanced"] as const) {
+        expect(fromSubpath(config, format, { cdnBase })).not.toContain("jsdelivr");
+      }
+    });
+  });
+
   describe("mount target option", () => {
     it("defaults to body when no target is given", () => {
       expect(fromSubpath(config, "react-component")).toContain("target: 'body'");

package/src/install.test.ts

@@ -343,6 +343,89 @@ describe("install.ts: deferral gate", () => {
   });
 });
 
+describe("install.ts: CDN base derivation", () => {
+  // The installer captures document.currentScript.src synchronously at module
+  // evaluation; fake it with an own-property override (jsdom's getter lives on
+  // the prototype, so a configurable instance property shadows it cleanly).
+  function setCurrentScript(src: string) {
+    const script = document.createElement("script");
+    script.src = src;
+    Object.defineProperty(document, "currentScript", { value: script, configurable: true });
+  }
+
+  afterEach(() => {
+    delete (document as any).currentScript;
+  });
+
+  /**
+   * Run the deferred path with NO bundles provided so loadCSS/loadLauncher
+   * inject real (never-resolving in jsdom) elements whose URLs we can read.
+   */
+  async function installedUrls(installerOptions: any) {
+    await install({ config: { apiUrl: "/api", launcher: { enabled: true } }, ...installerOptions });
+    await flush();
+    const css = document.head.querySelector("link[rel=\"stylesheet\"][data-persona]") as HTMLLinkElement | null;
+    const scripts = Array.from(document.head.querySelectorAll("script")).map((s) => s.src);
+    return { cssHref: css?.href ?? null, scripts };
+  }
+
+  it("derives asset URLs from the installer's own script directory (first-party CDN)", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    const { cssHref, scripts } = await installedUrls({});
+    expect(cssHref).toBe("https://cdn.runtype.com/persona/latest/widget.css");
+    expect(scripts).toContain("https://cdn.runtype.com/persona/latest/launcher.global.js");
+  });
+
+  it("keeps npm-CDN siblings on the installer's own pinned range (no @latest skew)", async () => {
+    setCurrentScript("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@4/dist/install.global.js");
+    const { cssHref, scripts } = await installedUrls({});
+    expect(cssHref).toBe("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@4/dist/widget.css");
+    expect(scripts).toContain("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@4/dist/launcher.global.js");
+  });
+
+  it("the full bundle URL follows the installer directory on the eager path", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    markCssLoaded();
+    await install({ config: { apiUrl: "/api", launcher: { enabled: false } } });
+    await flush();
+    const scripts = Array.from(document.head.querySelectorAll("script")).map((s) => s.src);
+    expect(scripts).toContain("https://cdn.runtype.com/persona/latest/index.global.js");
+  });
+
+  it("falls back to jsDelivr@latest when currentScript is unavailable", async () => {
+    // No setCurrentScript: module/inline contexts have no script src.
+    const { cssHref } = await installedUrls({});
+    expect(cssHref).toBe("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@latest/dist/widget.css");
+  });
+
+  it("falls back to the npm CDN for a non-http(s) installer source", async () => {
+    setCurrentScript("data:text/javascript,void%200");
+    const { cssHref } = await installedUrls({});
+    expect(cssHref).toBe("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@latest/dist/widget.css");
+  });
+
+  it("an explicit `version` opts back into npm-CDN URLs even when the src is derivable", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    const { cssHref } = await installedUrls({ version: "1.2.3" });
+    expect(cssHref).toBe("https://cdn.jsdelivr.net/npm/@runtypelabs/persona@1.2.3/dist/widget.css");
+  });
+
+  it("an explicit `cdn` opts back into npm-CDN URLs even when the src is derivable", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    const { cssHref } = await installedUrls({ cdn: "unpkg" });
+    expect(cssHref).toBe("https://unpkg.com/@runtypelabs/persona@latest/dist/widget.css");
+  });
+
+  it("explicit cssUrl + jsUrl win over the derived installer base", async () => {
+    setCurrentScript("https://cdn.runtype.com/persona/latest/install.global.js");
+    const { cssHref } = await installedUrls({
+      cssUrl: "https://assets.example.com/persona/widget.css",
+      jsUrl: "https://assets.example.com/persona/index.global.js",
+    });
+    expect(cssHref).toBe("https://assets.example.com/persona/widget.css");
+  });
+});
+
 describe("install.ts: onError", () => {
   it("fires onError with phase 'init' and dispatches persona:error when initialization throws", async () => {
     markCssLoaded();

package/src/install.ts

@@ -7,6 +7,9 @@
 export {};
 
 interface SiteAgentInstallConfig {
+  // Setting `version` or `cdn` explicitly opts into npm-CDN asset URLs
+  // (jsDelivr/unpkg). When neither is set, assets load from the directory the
+  // installer script itself was served from — see getCdnBase().
   version?: string;
   cdn?: "unpkg" | "jsdelivr";
   cssUrl?: string;
@@ -137,6 +140,10 @@ declare global {
   // Get config from script attributes (must be called synchronously during script execution)
   const scriptConfig = getConfigFromScript();
 
+  // The installer's own URL, captured now because document.currentScript is
+  // null once synchronous execution ends (and always inside modules).
+  const installerSrc = (document.currentScript as HTMLScriptElement | null)?.src || "";
+
   // Merge script attributes with window config (script attributes take precedence)
   const windowConfig: SiteAgentInstallConfig = window.siteAgentConfig || {};
   const config: SiteAgentInstallConfig = { ...windowConfig, ...scriptConfig };
@@ -194,7 +201,28 @@ declare global {
   const cdn = config.cdn || "jsdelivr";
   const autoInit = config.autoInit !== false; // Default to true
 
-  // Determine CDN base URL
+  // Directory the installer itself was served from. Every published layout
+  // (npm CDN dist/, first-party CDN, self-hosted copies) keeps the sibling
+  // assets next to install.global.js, so this base is valid wherever the
+  // installer loaded from — and always satisfies the same CSP/origin rules
+  // that let the installer through. Non-http(s) sources (inline, blob:) and
+  // module contexts (no currentScript) yield null.
+  const getInstallerBase = (): string | null => {
+    if (!installerSrc) return null;
+    try {
+      const url = new URL(installerSrc, document.baseURI);
+      if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+      return url.origin + url.pathname.slice(0, url.pathname.lastIndexOf("/"));
+    } catch {
+      return null;
+    }
+  };
+
+  // Determine CDN base URL. Precedence:
+  //   1. explicit cssUrl + jsUrl
+  //   2. explicit `cdn` / `version` → npm CDN construction
+  //   3. the installer's own directory (default)
+  //   4. npm CDN construction (currentScript unavailable)
   const getCdnBase = () => {
     // For a custom URL override, derive the sibling launcher URL when the
     // override mirrors the dist layout (…/index.global.js → …/launcher.global.js)
@@ -209,8 +237,26 @@ declare global {
       };
     }
 
+    // Default: load assets from wherever the installer was served, so a page
+    // whose CSP allows only its own CDN (e.g. cdn.runtype.com) never has
+    // sibling requests fan out to a third-party host. An explicit `cdn` or
+    // `version` keeps the documented npm-CDN behavior.
+    if (!config.cdn && !config.version) {
+      const selfBase = getInstallerBase();
+      if (selfBase) {
+        return {
+          cssUrl: `${selfBase}/widget.css`,
+          jsUrl: `${selfBase}/index.global.js`,
+          launcherUrl: `${selfBase}/launcher.global.js` as string | null,
+        };
+      }
+    }
+
     const packageName = "@runtypelabs/persona";
-    const basePath = `/npm/${packageName}@${version}/dist`;
+    // jsDelivr namespaces npm packages under /npm/; unpkg serves them at the root.
+    const basePath = cdn === "unpkg"
+      ? `/${packageName}@${version}/dist`
+      : `/npm/${packageName}@${version}/dist`;
     const host = cdn === "unpkg" ? "https://unpkg.com" : "https://cdn.jsdelivr.net";
 
     return {

package/src/ui.scroll-additive.test.ts

@@ -449,3 +449,368 @@ describe("scrollBehavior.announce (Principle 15)", () => {
     controller.destroy();
   });
 });
+
+
+// Anchor-top parks on the first UNREAD attention-worthy block of a turn:
+// tool calls and reasoning are chrome and never targeted, so a response that
+// opens with them scrolls them past rather than stranding the answer below
+// the fold.
+describe("anchor-top first-unread positioning", () => {
+  beforeEach(() => {
+    installRafMock();
+  });
+
+  const anchorTopConfig = () =>
+    baseConfig({
+      features: { scrollBehavior: { mode: "anchor-top", anchorTopOffset: 16 } },
+    });
+
+  const emitToolMessage = (
+    controller: ReturnType<typeof createAgentExperience>,
+    id: string
+  ) => {
+    controller.injectTestMessage({
+      type: "message",
+      message: {
+        id,
+        role: "assistant",
+        content: "",
+        createdAt: CREATED_AT,
+        variant: "tool",
+        toolCall: { id, name: "search", status: "complete" },
+      },
+    });
+  };
+
+  // An artifact / component block: substance lives in rawContent, `content`
+  // is empty. Testing text alone would silently skip these.
+  const emitArtifactMessage = (
+    controller: ReturnType<typeof createAgentExperience>,
+    id: string
+  ) => {
+    controller.injectTestMessage({
+      type: "message",
+      message: {
+        id,
+        role: "assistant",
+        content: "",
+        createdAt: CREATED_AT,
+        rawContent: JSON.stringify({
+          text: "",
+          component: "PersonaArtifactInline",
+          props: { artifactId: "art-1", title: "Report" },
+        }),
+      },
+    });
+  };
+
+  const setBubbleOffsetTop = (mount: HTMLElement, id: string, value: number) => {
+    const bubble = getScrollContainer(mount).querySelector<HTMLElement>(
+      `[data-message-id="${id}"]`
+    );
+    expect(bubble).not.toBeNull();
+    Object.defineProperty(bubble!, "offsetTop", { configurable: true, value });
+  };
+
+  const startTurn = (
+    controller: ReturnType<typeof createAgentExperience>,
+    mount: HTMLElement,
+    raf: ReturnType<typeof installRafMock>
+  ) => {
+    emitAssistantMessage(controller, "seed", "Earlier reply");
+    emitUserMessage(controller, "u1", "Where is my order?");
+    setBubbleOffsetTop(mount, "u1", 300);
+    raf.flush();
+  };
+
+  it("skips a run of tool calls and anchors the answer", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, anchorTopConfig());
+    const metrics = installScrollMetrics(getScrollContainer(mount), {
+      scrollHeight: 1000,
+      clientHeight: 400,
+    });
+
+    startTurn(controller, mount, raf);
+    expect(metrics.getScrollTop()).toBe(284); // parked on the sent message
+
+    for (let i = 0; i < 6; i += 1) emitToolMessage(controller, `t${i}`);
+    metrics.setScrollHeight(1500);
+    raf.flush();
+    // Tool calls are chrome: they never move the anchor.
+    expect(metrics.getScrollTop()).toBe(284);
+
+    emitStreamingAssistant(controller, "a1", "Good news — your order is on track.");
+    setBubbleOffsetTop(mount, "a1", 700);
+    raf.flush();
+    expect(metrics.getScrollTop()).toBe(684);
+
+    controller.destroy();
+  });
+
+  it("anchors an artifact block, whose content lives in rawContent", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, anchorTopConfig());
+    const metrics = installScrollMetrics(getScrollContainer(mount), {
+      scrollHeight: 1000,
+      clientHeight: 400,
+    });
+
+    startTurn(controller, mount, raf);
+    for (let i = 0; i < 3; i += 1) emitToolMessage(controller, `t${i}`);
+    metrics.setScrollHeight(1500);
+    raf.flush();
+
+    emitArtifactMessage(controller, "art-msg");
+    setBubbleOffsetTop(mount, "art-msg", 620);
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(604);
+    controller.destroy();
+  });
+
+  it("holds the FIRST unread block when more text streams in after it", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, anchorTopConfig());
+    const metrics = installScrollMetrics(getScrollContainer(mount), {
+      scrollHeight: 1000,
+      clientHeight: 400,
+    });
+
+    startTurn(controller, mount, raf);
+    emitStreamingAssistant(controller, "a1", "First segment.");
+    setBubbleOffsetTop(mount, "a1", 500);
+    metrics.setScrollHeight(1400);
+    raf.flush();
+    expect(metrics.getScrollTop()).toBe(484);
+
+    // Interleaved: tool, then a second text segment. The anchor stays on the
+    // first unread block — later blocks stream in below it.
+    emitToolMessage(controller, "t0");
+    emitStreamingAssistant(controller, "a2", "Second segment.");
+    setBubbleOffsetTop(mount, "a2", 900);
+    metrics.setScrollHeight(1800);
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(484);
+    controller.destroy();
+  });
+
+  it("stands down once the reader scrolls", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, anchorTopConfig());
+    const sc = getScrollContainer(mount);
+    const metrics = installScrollMetrics(sc, { scrollHeight: 1000, clientHeight: 400 });
+
+    startTurn(controller, mount, raf);
+    for (let i = 0; i < 6; i += 1) emitToolMessage(controller, `t${i}`);
+    metrics.setScrollHeight(1500);
+    raf.flush();
+
+    // The reader takes over: wheels down to watch the tools run. Engagement
+    // is keyed on real input, NOT on the scroll event (streaming content
+    // clamps and restores scrollTop on its own — see the regression test
+    // below), so the wheel is what must register here.
+    metrics.setScrollTop(520);
+    sc.dispatchEvent(new WheelEvent("wheel", { deltaY: -120, bubbles: true }));
+    sc.dispatchEvent(new Event("scroll"));
+
+    emitStreamingAssistant(controller, "a1", "Good news — your order is on track.");
+    setBubbleOffsetTop(mount, "a1", 700);
+    raf.flush();
+
+    // Their position wins: no re-anchor under them.
+    expect(metrics.getScrollTop()).toBe(520);
+    controller.destroy();
+  });
+
+  it("re-arms on the next send after the reader scrolled away", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, anchorTopConfig());
+    const sc = getScrollContainer(mount);
+    const metrics = installScrollMetrics(sc, { scrollHeight: 1000, clientHeight: 400 });
+
+    startTurn(controller, mount, raf);
+    metrics.setScrollTop(520);
+    sc.dispatchEvent(new WheelEvent("wheel", { deltaY: -120, bubbles: true }));
+    sc.dispatchEvent(new Event("scroll"));
+
+    // A new send is an explicit "take me along".
+    emitUserMessage(controller, "u2", "And the second order?");
+    setBubbleOffsetTop(mount, "u2", 600);
+    metrics.setScrollHeight(1400);
+    raf.flush();
+
+    emitStreamingAssistant(controller, "a2", "That one shipped Tuesday.");
+    setBubbleOffsetTop(mount, "a2", 800);
+    metrics.setScrollHeight(1600);
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(784);
+    controller.destroy();
+  });
+});
+
+// Two shapes the browser testbed covers but that are worth pinning down here,
+// since they are where the policy's judgement calls actually bite.
+describe("anchor-top first-unread — edge shapes", () => {
+  beforeEach(() => {
+    installRafMock();
+  });
+
+  const anchorTopConfig = () =>
+    baseConfig({
+      features: { scrollBehavior: { mode: "anchor-top", anchorTopOffset: 16 } },
+    });
+
+  const emitTool = (
+    controller: ReturnType<typeof createAgentExperience>,
+    id: string
+  ) => {
+    controller.injectTestMessage({
+      type: "message",
+      message: {
+        id,
+        role: "assistant",
+        content: "",
+        createdAt: CREATED_AT,
+        variant: "tool",
+        toolCall: { id, name: "search", status: "complete" },
+      },
+    });
+  };
+
+  const setTop = (mount: HTMLElement, id: string, value: number) => {
+    const bubble = getScrollContainer(mount).querySelector<HTMLElement>(
+      `[data-message-id="${id}"]`
+    );
+    expect(bubble).not.toBeNull();
+    Object.defineProperty(bubble!, "offsetTop", { configurable: true, value });
+  };
+
+  // KNOWN TRADEOFF: a chatty preamble ("Let me look that up…") is itself the
+  // first unread block, so the anchor lands there and the tool run still
+  // pushes the real answer toward the fold. That is the policy behaving as
+  // specified — chronological, honest about what arrived first — but it is
+  // the case most likely to want revisiting.
+  it("anchors a preamble, not the answer that follows the tool run", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, anchorTopConfig());
+    const metrics = installScrollMetrics(getScrollContainer(mount), {
+      scrollHeight: 1000,
+      clientHeight: 400,
+    });
+
+    emitAssistantMessage(controller, "seed", "Earlier reply");
+    emitUserMessage(controller, "u1", "Look into my order");
+    setTop(mount, "u1", 300);
+    raf.flush();
+
+    emitStreamingAssistant(controller, "pre", "Sure — let me pull that up.");
+    setTop(mount, "pre", 420);
+    metrics.setScrollHeight(1200);
+    raf.flush();
+    expect(metrics.getScrollTop()).toBe(404);
+
+    for (let i = 0; i < 6; i += 1) emitTool(controller, `t${i}`);
+    emitStreamingAssistant(controller, "answer", "Good news — it is on track.");
+    setTop(mount, "answer", 900);
+    metrics.setScrollHeight(1800);
+    raf.flush();
+
+    // Still parked on the preamble: the answer is NOT re-targeted.
+    expect(metrics.getScrollTop()).toBe(404);
+    controller.destroy();
+  });
+
+  it("holds the sent message when a turn produces only tool calls", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(mount, anchorTopConfig());
+    const metrics = installScrollMetrics(getScrollContainer(mount), {
+      scrollHeight: 1000,
+      clientHeight: 400,
+    });
+
+    emitAssistantMessage(controller, "seed", "Earlier reply");
+    emitUserMessage(controller, "u1", "Just refresh the tracking data");
+    setTop(mount, "u1", 300);
+    raf.flush();
+    expect(metrics.getScrollTop()).toBe(284);
+
+    for (let i = 0; i < 6; i += 1) emitTool(controller, `t${i}`);
+    metrics.setScrollHeight(1600);
+    raf.flush();
+
+    // Nothing attention-worthy ever arrived: never chase the tool bubbles.
+    expect(metrics.getScrollTop()).toBe(284);
+    controller.destroy();
+  });
+});
+
+// Regression: streaming content under a pinned anchor makes the browser clamp
+// scrollTop and then restore it — a matched pair of real scroll events with no
+// user involved (observed live as -12 then +12 during a tool run). Treating
+// those as reader intent silently disabled every later re-anchor, so a
+// response that opened with tool calls stayed stuck on the sent message.
+describe("anchor-top first-unread — layout scroll is not reader intent", () => {
+  beforeEach(() => {
+    installRafMock();
+  });
+
+  it("still anchors the answer after a clamp/restore scroll pair", () => {
+    const raf = installRafMock();
+    const mount = createMount();
+    const controller = createAgentExperience(
+      mount,
+      baseConfig({
+        features: { scrollBehavior: { mode: "anchor-top", anchorTopOffset: 16 } },
+      })
+    );
+    const sc = getScrollContainer(mount);
+    const metrics = installScrollMetrics(sc, { scrollHeight: 1000, clientHeight: 400 });
+
+    emitAssistantMessage(controller, "seed", "Earlier reply");
+    emitUserMessage(controller, "u1", "Where is my order?");
+    const userBubble = sc.querySelector<HTMLElement>('[data-message-id="u1"]');
+    Object.defineProperty(userBubble!, "offsetTop", { configurable: true, value: 300 });
+    raf.flush();
+    expect(metrics.getScrollTop()).toBe(284);
+
+    // Tool run: the spacer shrinks, scrollTop is clamped down, then the
+    // growing transcript restores it. Both are layout, not the reader.
+    for (let i = 0; i < 6; i += 1) {
+      controller.injectTestMessage({
+        type: "message",
+        message: {
+          id: `t${i}`,
+          role: "assistant",
+          content: "",
+          createdAt: CREATED_AT,
+          variant: "tool",
+          toolCall: { id: `t${i}`, name: "search", status: "complete" },
+        },
+      });
+    }
+    metrics.setScrollTop(272);
+    sc.dispatchEvent(new Event("scroll"));
+    metrics.setScrollHeight(1500);
+    metrics.setScrollTop(284);
+    sc.dispatchEvent(new Event("scroll"));
+    raf.flush();
+
+    emitStreamingAssistant(controller, "a1", "Good news — your order is on track.");
+    const answer = sc.querySelector<HTMLElement>('[data-message-id="a1"]');
+    Object.defineProperty(answer!, "offsetTop", { configurable: true, value: 700 });
+    raf.flush();
+
+    expect(metrics.getScrollTop()).toBe(684);
+    controller.destroy();
+  });
+});

package/src/ui.scroll.test.ts

@@ -991,7 +991,7 @@ describe("createAgentExperience streaming scroll", () => {
     controller.destroy();
   });
 
-  it("anchor-top mode pins the sent user message near the viewport top and never follows the stream", () => {
+  it("anchor-top mode pins the turn's first unread block near the viewport top and never follows the stream", () => {
     const raf = installRafMock();
     const resize = installResizeObserverMock();
     const mount = createMount();
@@ -1034,16 +1034,29 @@ describe("createAgentExperience streaming scroll", () => {
     raf.flush();
     expect(metrics.getScrollTop()).toBe(684);
 
-    // Streaming below the anchor never moves the viewport.
-    metrics.setScrollHeight(1150);
+    // The response's first block is the turn's first unread output, so the
+    // anchor hands off to it: target = 900 - 16 = 884, and with content at
+    // 1284 - 84 = 1200 the spacer re-sizes to 884 + 400 - 1200 = 84.
+    metrics.setScrollHeight(1284);
     emitStreamingMessage(controller, "Streaming response");
+    const streamBubble = scrollContainer!.querySelector<HTMLElement>(
+      `[data-message-id="${STREAM_MESSAGE_ID}"]`
+    );
+    expect(streamBubble).not.toBeNull();
+    Object.defineProperty(streamBubble!, "offsetTop", { value: 900 });
     raf.flush();
-    expect(metrics.getScrollTop()).toBe(684);
+    expect(metrics.getScrollTop()).toBe(884);
+
+    // Continuing to stream below that anchor never moves the viewport again.
+    metrics.setScrollHeight(1324);
+    emitStreamingMessage(controller, "Streaming response, now longer");
+    raf.flush();
+    expect(metrics.getScrollTop()).toBe(884);
 
     // As real content grows, the spacer gives room back (shrink-only):
-    // content grew from 1000 to 1150 - 84 = 1066, so spacer 84 - 66 = 18.
+    // content grew from 1200 to 1324 - 84 = 1240, so spacer 84 - 40 = 44.
     resize.trigger();
-    expect(spacer?.style.height).toBe("18px");
+    expect(spacer?.style.height).toBe("44px");
 
     // Jumping to the latest abandons the anchor: the spacer is dropped so
     // "bottom" is the real end of content.