From a3306d456e36d6f0bd8d2d0eb48e1488bbbd6f2c Mon Sep 17 00:00:00 2001
From: new-Beginner <3205732937@qq.com>
Date: Sat, 24 Oct 2026 00:05:15 +0800
Subject: [PATCH] fix(transcript): continue restored reading ranges
 automatically

Restored reading ranges should preserve their bookmark without leaving
readers behind a manual history paging control. Continue bounded pages
near the viewport boundary and rejoin live output only after the gap closes.

Keep explicit search paging isolated, preserve the viewport and model
input, and cover continuation, retries, and hidden-pane cleanup.
---
 .../chat/transcript/ChatTranscript.tsx        | 14 ++-
 .../src/hooks/use-transcript-continuation.ts  | 51 ++++++++++
 apps/desktop/src/lib/transcript-reading.ts    | 16 +++-
 apps/desktop/test/transcript-reading.test.mjs | 35 +++++++
 docs/spec/04-ux/08-component-spec.md          |  6 ++
 docs/spec/06-delivery/04-e2e-test-plan.md     | 15 ++-
 scripts/e2e-transcript-reading-position.mjs   |  5 +-
 scripts/e2e/session-reading-position.tsx      | 37 ++++++++
 scripts/e2e/transcript-continuation.tsx       | 93 +++++++++++++++++++
 scripts/e2e/transcript-reading-position.tsx   |  1 +
 10 files changed, 263 insertions(+), 10 deletions(-)
 create mode 100644 apps/desktop/src/hooks/use-transcript-continuation.ts
 create mode 100644 scripts/e2e/transcript-continuation.tsx

diff --git a/apps/desktop/src/features/chat/transcript/ChatTranscript.tsx b/apps/desktop/src/features/chat/transcript/ChatTranscript.tsx
index 828ca77796..1012190411 100644
--- a/apps/desktop/src/features/chat/transcript/ChatTranscript.tsx
+++ b/apps/desktop/src/features/chat/transcript/ChatTranscript.tsx
@@ -19,6 +19,7 @@ import { TranscriptHistory, TranscriptTail } from "./AssistantTurn";
 import { collectLiveDelegationEntries } from "../../../lib/live-delegation-entries";
 import { reuseReadonlyMap } from "../../../lib/assistant-turns";
 import { useTranscriptScroll } from "./hooks/useTranscriptScroll";
+import { useTranscriptContinuation } from "../../../hooks/use-transcript-continuation";
 import type { TranscriptSearchTarget } from "../../../lib/transcript-reading";
 import type { RestoreTranscriptReading } from "../../../hooks/use-transcript-reading-position";
 import { TranscriptSearchContext } from "../../../lib/transcript-search-context";
@@ -158,6 +159,17 @@ function TranscriptBody({
     onRestoreReading,
   });
 
+  const continuationCursor = useAppStore((state) =>
+    sessionId ? state.transcriptViews[sessionId]?.messageEnd : undefined,
+  );
+  const automaticContinuation = readingWindow && !searchTarget;
+  useTranscriptContinuation({
+    scrollRef, contentRef, messages, onLoadNewer,
+    enabled: automaticContinuation && hasMoreAfter && paneVisible && !veilCovering,
+    cursor: continuationCursor,
+    loading: navigationLoading,
+  });
+
   const specializedActivity = agentActivity;
   const rawLiveDelegations = useMemo(
     () => collectLiveDelegationEntries(historyEntries, tailEntry, transcriptRunning),
@@ -293,7 +305,7 @@ function TranscriptBody({
               runtimeActivity={specializedActivity}
             />
           ) : null}
-          {hasMoreAfter ? (
+          {hasMoreAfter && !automaticContinuation ? (
             <button
               type="button"
               className="transcript-load-later"
diff --git a/apps/desktop/src/hooks/use-transcript-continuation.ts b/apps/desktop/src/hooks/use-transcript-continuation.ts
new file mode 100644
index 0000000000..cfba105a7c
--- /dev/null
+++ b/apps/desktop/src/hooks/use-transcript-continuation.ts
@@ -0,0 +1,51 @@
+import { useEffect, useRef, type RefObject } from "react";
+import type { UiMessage } from "@pi-desktop/shared";
+
+/** Continue a restored reading range without turning it into a manual search page. */
+export function useTranscriptContinuation({
+  scrollRef, contentRef, enabled, loading, messages, cursor, onLoadNewer,
+}: {
+  scrollRef: RefObject<HTMLDivElement | null>;
+  contentRef: RefObject<HTMLDivElement | null>;
+  enabled: boolean;
+  loading: boolean;
+  messages: UiMessage[];
+  cursor?: number;
+  /** The reading service owns request coalescing, stale results and error reporting. */
+  onLoadNewer?: () => Promise<void>;
+}) {
+  const attemptedRef = useRef<{ cursor?: number } | null>(null);
+  useEffect(() => {
+    const scroller = scrollRef.current;
+    const content = contentRef.current;
+    if (!enabled || loading || !onLoadNewer || !scroller || !content) return;
+    let requested = false;
+    const check = () => {
+      if (requested || scroller.clientHeight <= 0) return;
+      if (scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop > 240) return;
+      // A failed/empty page must not spin on loading, resize or queued scroll
+      // events. New reading input can retry; new rows can fill a short viewport.
+      if (attemptedRef.current?.cursor === cursor && attemptedRef.current !== null) return;
+      requested = true;
+      attemptedRef.current = { cursor };
+      void onLoadNewer();
+    };
+    const onScroll = () => check();
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    const onInput = () => {
+      attemptedRef.current = null;
+      check();
+    };
+    const inputEvents = ["wheel", "touchmove", "pointerdown", "keydown"] as const;
+    for (const event of inputEvents) scroller.addEventListener(event, onInput, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => check());
+    observer?.observe(content);
+    observer?.observe(scroller);
+    check();
+    return () => {
+      scroller.removeEventListener("scroll", onScroll);
+      for (const event of inputEvents) scroller.removeEventListener(event, onInput);
+      observer?.disconnect();
+    };
+  }, [contentRef, cursor, enabled, loading, messages, onLoadNewer, scrollRef]);
+}
diff --git a/apps/desktop/src/lib/transcript-reading.ts b/apps/desktop/src/lib/transcript-reading.ts
index eb23ff69d5..4c38899e1c 100644
--- a/apps/desktop/src/lib/transcript-reading.ts
+++ b/apps/desktop/src/lib/transcript-reading.ts
@@ -107,9 +107,10 @@ function replaceReadingOverlap(
 /** Live output remains authoritative outside an explicit historical search. */
 export function transcriptViewMessages(live: UiMessage[], view?: TranscriptView): UiMessage[] {
   if (!view) return live;
-  // Search deliberately holds its historical snapshot. Do not index or merge
-  // the live transcript when it cannot contribute anything to this view.
-  if (view.focus || view.restored) return withNavigationParent(view.messages, view.parentMessage);
+  // Search holds its selected snapshot. Restoration only stays isolated while
+  // unread physical pages separate it from the live tail.
+  if (view.focus || (view.restored && view.hasMoreAfter))
+    return withNavigationParent(view.messages, view.parentMessage);
 
   const normalized = dedupeSessionMessages(live);
   const source = getSessionMessageSnapshot(normalized);
@@ -121,8 +122,15 @@ export function transcriptViewMessages(live: UiMessage[], view?: TranscriptView)
   const cached = projections.get(source.owner);
   let messages = cached && replaceReadingOverlap(cached, source, view.parentMessage);
   if (!messages) {
+    // The live cache can start before a short restored range. Joining at the
+    // first overlapping identity avoids prepending rows and moving the anchor;
+    // without overlap, do not invent continuity across an unknown gap.
+    const restoredStart = view.restored
+      ? normalized.findIndex((message) => getSessionMessageSnapshot(view.messages).positions.has(message.id))
+      : 0;
+    const liveTail = restoredStart < 0 ? EMPTY_TRANSCRIPT : normalized.slice(restoredStart);
     messages = withNavigationParent(
-      mergeLiveSessionMessages(view.messages, normalized).map((message) => {
+      mergeLiveSessionMessages(view.messages, liveTail).map((message) => {
         // A stale reading snapshot must not outrank the canonical row, even
         // when a previously streaming row has just completed.
         const index = source.positions.get(message.id);
diff --git a/apps/desktop/test/transcript-reading.test.mjs b/apps/desktop/test/transcript-reading.test.mjs
index 274f00d18a..575d353897 100644
--- a/apps/desktop/test/transcript-reading.test.mjs
+++ b/apps/desktop/test/transcript-reading.test.mjs
@@ -576,3 +576,38 @@ test("selection revalidation cannot remove a restored range, but an explicit rew
   r.set({ messages: [message("tail", "edited")] });
   assert.equal(r.view(), undefined);
 });
+
+test("a restored range joins live output only after paging closes the gap", async () => {
+  const calls = [];
+  const canonical = [message("cached-before"), message("tail", "streaming")];
+  const r = reader(async (_id, options) => {
+    calls.push(options);
+    return calls.length === 1
+      ? page([message("old")], { messageStart: 20, messageEnd: 80 })
+      : page([message("tail", "persisted")], {
+          messageStart: 80, messageEnd: 100, hasMoreAfter: false,
+        });
+  }, { messages: canonical, runningSessions: { s: true } });
+  await r.restoreTranscriptReading("s", bookmark, new AbortController().signal);
+  assert.deepEqual(r.visible().map((row) => row.id), ["old"], "do not skip unloaded history");
+  await r.loadTranscriptPage("s", "after");
+  assert.equal(r.view().hasMoreAfter, false);
+  assert.deepEqual(r.visible().map((row) => row.id), ["old", "tail"], "do not prepend cached rows on continuation");
+  assert.equal(r.visible().at(-1).content, "streaming");
+  r.set({ messages: [message("cached-before"), message("tail", "complete"), message("new")], runningSessions: {} });
+  assert.deepEqual(r.visible().map((row) => row.id), ["old", "tail", "new"]);
+  assert.equal(r.visible().find((row) => row.id === "tail").content, "complete");
+  assert.equal(r.get().messages.some((row) => row.id === "old"), false, "reading must not populate model input");
+});
+
+test("a restored range already at the tail uses canonical updates without adding older cached rows", () => {
+  const restored = { ...transcriptViewFromSession(page([message("tail", "persisted")], {
+    messageStart: 90, messageEnd: 100, hasMoreAfter: false,
+  }).session), restored: true };
+  const live = [message("before"), message("tail", "latest"), message("next")];
+  assert.deepEqual(transcriptViewMessages(live, restored).map((row) => [row.id, row.content]),
+    [["tail", "latest"], ["next", "next"]]);
+  const search = { ...restored, focus: { ...target("tail"), requestId: 1 } };
+  assert.deepEqual(transcriptViewMessages(live, search).map((row) => [row.id, row.content]),
+    [["tail", "persisted"]], "explicit search keeps its selected snapshot");
+});
diff --git a/docs/spec/04-ux/08-component-spec.md b/docs/spec/04-ux/08-component-spec.md
index 4a1a103ce5..0b18ac1b0a 100644
--- a/docs/spec/04-ux/08-component-spec.md
+++ b/docs/spec/04-ux/08-component-spec.md
@@ -123,6 +123,12 @@ Outer frame that positions Topbar, Sidebar, MainChat, and WorkPanel. Owns resize
   the message is already loaded but outside the mounted row window, first restore
   the saved absolute scroll offset; the bounded window can then grow as the user
   scrolls toward the anchor.
+  Restored ranges continue automatically near the visible lower boundary, in
+  bounded pages and without a Load later messages button. Appending a page must
+  preserve the viewport; hidden panes must not initiate continuation. Do not
+  merge a disjoint live tail across unread history. Once the range reaches the
+  tail, canonical updates and new live rows resume without prepending older
+  cached rows. Explicit search retains its separate manual paging behavior.
   Explicit disclosure choices and the mounted-window budget survive eviction;
   bookmarks do not persist across renderer/app restarts.
 - A pane renders the store's live `messages` while its session is the active one
diff --git a/docs/spec/06-delivery/04-e2e-test-plan.md b/docs/spec/06-delivery/04-e2e-test-plan.md
index 79d47e03f7..747eb7957c 100644
--- a/docs/spec/06-delivery/04-e2e-test-plan.md
+++ b/docs/spec/06-delivery/04-e2e-test-plan.md
@@ -6150,9 +6150,10 @@ must keep splitting are covered by `markdown-blocks.test.mjs`.
 - **Steps**: 1) Open sessions A, B, and C in that order, scrolling each one up a
   measured amount. 2) Switch back to A, then B, and confirm each returns to its
   own offset. 3) Open D and then E, so A and B fall outside the retained budget.
-  4) Return to A. 5) Return to E, then D, and confirm they are still warm. 6)
-  Repeat the whole cycle once more and watch for a stuck progress track, an error
-  toast, or a blank chat area.
+  4) Return to A and scroll to the lower boundary of the restored range without
+  clicking any load control. 5) Return to E, then D, and confirm they are still
+  warm. 6) Repeat the whole cycle once more and watch for a stuck progress track,
+  an error toast, or a blank chat area.
 - **Expected**: Only the visible pane and the two most recently visited ones are
   retained; visiting beyond that budget evicts the oldest pane. A warm return
   paints the retained frame and offset immediately. Returning to an evicted
@@ -6167,6 +6168,14 @@ must keep splitting are covered by `markdown-blocks.test.mjs`.
   dimmed at any point, hidden panes stay non-interactive and out of the
   accessibility tree, and repeated cycling neither leaks a growing number of
   mounted transcripts nor leaves a pane showing another session's rows.
+  A restored historical range has no Load later messages button: reaching its
+  lower boundary automatically reads bounded newer pages without moving the
+  visible anchor. Short ranges fill the viewport automatically; hidden panes do
+  not initiate reads. Pending reads coalesce, obsolete results cannot replace
+  a newer navigation, and failures do not cause automatic retry loops. After
+  continuation reaches the tail, live updates resume without adding older
+  cached rows above the reading position. Explicit search still uses manual
+  later-message paging.
 - **Specs linked**: `04-ux/08-component-spec.md` §1.6 / §3.5 / §7,
   `04-ux/09-interaction-patterns.md` §5, ADR 0130, ADR 0137
 - **Acceptance**: C (switch sessions), Quality
diff --git a/scripts/e2e-transcript-reading-position.mjs b/scripts/e2e-transcript-reading-position.mjs
index 47bbf0cd65..36abe47591 100644
--- a/scripts/e2e-transcript-reading-position.mjs
+++ b/scripts/e2e-transcript-reading-position.mjs
@@ -50,7 +50,8 @@ app.whenReady().then(async () => {
     await window.loadFile(path.join(__dirname, "index.html"));
     const scrolling = await window.webContents.executeJavaScript("globalThis.transcriptReadingPositionProbe()");
     const session = scrolling.ok ? await window.webContents.executeJavaScript("globalThis.sessionReadingPositionProbe()") : null;
-    const result = { ok: scrolling.ok && session?.ok, scrolling, session };
+    const continuation = session?.ok ? await window.webContents.executeJavaScript("globalThis.transcriptContinuationProbe()") : null;
+    const result = { ok: scrolling.ok && session?.ok && continuation?.ok, scrolling, session, continuation };
     console.log("READING_POSITION_PROBE " + JSON.stringify(result));
     app.exit(result.ok ? 0 : 1);
   } catch (error) { console.error(error); app.exit(1); }
@@ -69,7 +70,7 @@ app.whenReady().then(async () => {
   assert(line, `No probe result (exit=${code}): ${output.slice(-4000)}`);
   const result = JSON.parse(line.slice("READING_POSITION_PROBE ".length));
   console.log(JSON.stringify(result));
-  assert.equal(code, 0, result.scrolling?.error ?? result.session?.error ?? output.slice(-4000));
+  assert.equal(code, 0, result.scrolling?.error ?? result.session?.error ?? result.continuation?.error ?? output.slice(-4000));
   assert.equal(result.ok, true);
 } finally {
   await rm(temp, { recursive: true, force: true });
diff --git a/scripts/e2e/session-reading-position.tsx b/scripts/e2e/session-reading-position.tsx
index fafa14b927..928952260f 100644
--- a/scripts/e2e/session-reading-position.tsx
+++ b/scripts/e2e/session-reading-position.tsx
@@ -42,6 +42,7 @@ globalThis.sessionReadingPositionProbe = async () => {
   const bridge = window.piDesktop;
   let firstARead = true;
   const aroundReads: string[] = [];
+  const forwardReads: number[] = [];
   const unexpected: string[] = [];
   window.piDesktop = {
     channels: IPC, platform: "win32", on: () => () => {},
@@ -61,6 +62,11 @@ globalThis.sessionReadingPositionProbe = async () => {
           assert(index >= 0, "missing anchor");
           start = Math.max(0, index - 20);
           end = Math.min(messages.length, index + 40);
+        } else if ("messageBefore" in input && typeof input.messageBefore === "number") {
+          const limit = "messageLimit" in input ? Number(input.messageLimit) : 100;
+          end = Math.min(input.messageBefore, messages.length);
+          start = Math.max(0, end - limit);
+          forwardReads.push(start);
         } else if (input.id === "real-A" && firstARead) {
           firstARead = false;
           start = 0;
@@ -126,6 +132,37 @@ globalThis.sessionReadingPositionProbe = async () => {
     assert(host.querySelectorAll("[data-session-pane]").length === 3, "pane count changed");
     assert(useAppStore.getState().messages[0]?.id === "real-m110", "restore changed canonical/live input");
     const restoredOffset = offset(id);
+    assert(!scroller().querySelector(".transcript-load-later"), "ordinary restoration must not expose manual paging");
+    const readsBefore = forwardReads.length;
+    const continuation = useAppStore.getState().transcriptViews["real-A"];
+    assert(continuation?.hasMoreAfter, "restore must leave a real gap to exercise continuation");
+    const end = continuation.messageEnd!;
+    const boundaryId = `real-m${end - 1}`;
+    const boundary = row(boundaryId)!;
+    scroller().dispatchEvent(new WheelEvent("wheel", { bubbles: true, deltaY: 1000 }));
+    scroller().scrollTop = scroller().scrollHeight - scroller().clientHeight;
+    const boundaryOffset = boundary.getBoundingClientRect().top - scroller().getBoundingClientRect().top;
+    scroller().dispatchEvent(new Event("scroll", { bubbles: true }));
+    await until(() => useAppStore.getState().transcriptViews["real-A"]?.hasMoreAfter === false && Boolean(row("real-m139")),
+      "scrolling continues restored history without a button");
+    assert(forwardReads.length > readsBefore, "continuation must perform a physical page read");
+    const continuedOffset = row(boundaryId)!.getBoundingClientRect().top - scroller().getBoundingClientRect().top;
+    assert(Math.abs(continuedOffset - boundaryOffset) < 2,
+      `appending a continuation page moved the reading viewport: ${continuedOffset} vs ${boundaryOffset}`);
+    assert(row("real-m139"), "continuation did not reach the latest row");
+    assert(useAppStore.getState().messages[0]?.id === "real-m110", "continuation changed model input");
+    await useAppStore.getState().navigateTranscript({ sessionId: "real-A", messageId: id, query: "Message" });
+    await until(() => Boolean(scroller().querySelector(".transcript-load-later")), "explicit search keeps manual continuation");
+    const searchReads = forwardReads.length;
+    scroller().scrollTop = scroller().scrollHeight - scroller().clientHeight;
+    scroller().dispatchEvent(new Event("scroll", { bubbles: true }));
+    await frame();
+    await frame();
+    assert(forwardReads.length === searchReads, "search must not automatically load later pages");
+    const loadLater = scroller().querySelector<HTMLButtonElement>(".transcript-load-later")!;
+    flushSync(() => loadLater.click());
+    await until(() => useAppStore.getState().transcriptViews["real-A"]?.hasMoreAfter === false,
+      "explicit search can still load later pages manually");
     const jump = host.querySelector<HTMLButtonElement>('[data-visible="true"] .jump-latest-btn')!;
     flushSync(() => jump.click());
     await until(() => !useAppStore.getState().transcriptViews["real-A"] &&
diff --git a/scripts/e2e/transcript-continuation.tsx b/scripts/e2e/transcript-continuation.tsx
new file mode 100644
index 0000000000..03a05f9d9e
--- /dev/null
+++ b/scripts/e2e/transcript-continuation.tsx
@@ -0,0 +1,93 @@
+import { useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import type { UiMessage } from "@pi-desktop/shared";
+import { useTranscriptContinuation } from "../../apps/desktop/src/hooks/use-transcript-continuation";
+
+const frame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+const page = (count: number): UiMessage[] => Array.from({ length: count }, (_, index) => ({
+  id: `continuation-${index}`, role: "user", content: `Row ${index}`, createdAt: "2026-09-13T00:00:00Z",
+}));
+function assert(condition: unknown, label: string): asserts condition {
+  if (!condition) throw new Error(label);
+}
+function Surface(props: {
+  enabled: boolean; loading: boolean; messages: UiMessage[]; onLoadNewer: () => Promise<void>;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  useTranscriptContinuation({ ...props, cursor: props.messages.length, scrollRef, contentRef });
+  return <div ref={scrollRef} style={{ height: 200, overflowY: "auto", overflowAnchor: "none" }}>
+    <div ref={contentRef}>{props.messages.map((row) => <div key={row.id} style={{ height: 100 }}>{row.content}</div>)}</div>
+  </div>;
+}
+
+declare global { var transcriptContinuationProbe: () => Promise<unknown>; }
+globalThis.transcriptContinuationProbe = async () => {
+  const host = document.createElement("div");
+  host.style.cssText = "position:fixed;inset:0";
+  document.body.append(host);
+  const root = createRoot(host);
+  let calls = 0;
+  const onLoadNewer = async () => { calls++; };
+  let props = { enabled: false, loading: false, messages: page(10), onLoadNewer };
+  const render = (patch: Partial<typeof props> = {}) => {
+    props = { ...props, ...patch };
+    flushSync(() => root.render(<Surface {...props} />));
+  };
+  const scroll = () => host.firstElementChild as HTMLDivElement;
+  const atBoundary = () => {
+    scroll().scrollTop = scroll().scrollHeight - scroll().clientHeight;
+    scroll().dispatchEvent(new Event("scroll"));
+  };
+  try {
+    render();
+    atBoundary();
+    await frame();
+    assert(calls === 0, "hidden/search panes must not continue");
+    scroll().scrollTop = 0;
+    render({ enabled: true });
+    await frame();
+    assert(calls === 0, "restoring a distant anchor must not drain all later history");
+    atBoundary();
+    for (let i = 0; i < 4; i++) scroll().dispatchEvent(new Event("scroll"));
+    assert(Number(calls) === 1, "one boundary request must coalesce scroll and resize events");
+    // The service reports an IO failure and clears loading without new rows.
+    render({ loading: true });
+    render({ loading: false });
+    await frame();
+    await frame();
+    assert(Number(calls) === 1, "loading/resize changes must not loop after a failed page");
+    scroll().dispatchEvent(new WheelEvent("wheel", { deltaY: -10 }));
+    scroll().scrollTop -= 10;
+    scroll().dispatchEvent(new Event("scroll"));
+    assert(Number(calls) === 2, "a subsequent scroll must allow retrying a failed read");
+    const top = scroll().scrollTop;
+    render({ messages: page(20) });
+    await frame();
+    assert(scroll().scrollTop === top, "appending rows must preserve the current scroll offset");
+    assert(Number(calls) === 2, "a viewport no longer near the boundary must stop fetching");
+    scroll().scrollTop = 0;
+    render({ messages: page(1) });
+    await frame();
+    assert(Number(calls) === 3, "a short range must fill the viewport without a native scroll");
+    render({ messages: page(1) });
+    await frame();
+    assert(Number(calls) === 3, "an empty/non-advancing page must not loop on a new message array");
+    render({ enabled: false, messages: page(2) });
+    atBoundary();
+    await frame();
+    assert(Number(calls) === 3, "hiding a pane must stop follow-up requests");
+    const detached = scroll();
+    flushSync(() => root.unmount());
+    detached.dispatchEvent(new Event("scroll"));
+    await frame();
+    assert(Number(calls) === 3, "unmount must release continuation listeners");
+    return { ok: true, requests: calls };
+  } catch (error) {
+    return { ok: false, error: error instanceof Error ? error.stack : String(error), requests: calls };
+  } finally {
+    root.unmount();
+    host.remove();
+  }
+};
diff --git a/scripts/e2e/transcript-reading-position.tsx b/scripts/e2e/transcript-reading-position.tsx
index f44870dc55..dfb4887abb 100644
--- a/scripts/e2e/transcript-reading-position.tsx
+++ b/scripts/e2e/transcript-reading-position.tsx
@@ -1,4 +1,5 @@
 import "./session-reading-position";
+import "./transcript-continuation";
 import { useCallback } from "react";
 import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";