]*>.*Check the project/,
+ );
+ });
+
+ it("leaves the prompt row unpinned when the setting is off", () => {
+ const markup = renderWithPromptAnchor(PROMPT_TURN, false);
+ expect(markup).toContain("Check the project");
+ expect(markup.includes("sticky top-0")).toBe(false);
+ });
+
+ it("stacks pinned prompts in transcript order", () => {
+ const markup = renderWithPromptAnchor(
+ [...PROMPT_TURN, { id: "user-2", role: "user", text: "And again" }],
+ true,
+ );
+ const zIndexes = [...markup.matchAll(/z-index:(\d+)/g)].map((match) =>
+ Number(match[1]),
+ );
+ expect(zIndexes).toEqual([1, 2]);
+ });
+
+ it("virtualizes the turn body, not the wrapper the prompt sticks to", () => {
+ const markup = renderWithPromptAnchor(PROMPT_TURN, true);
+ expect(markup).toContain('class="transcript-turn-body');
+ const css = readFileSync(new URL("../index.css", import.meta.url), "utf8");
+ const rule = (selector: string) =>
+ css.match(new RegExp(`\\${selector} \\{[^}]*\\}`))?.[0] ?? "";
+ expect(rule(".transcript-turn-body")).toContain("content-visibility: auto");
+ expect(rule(".transcript-turn")).toBe("");
+ });
+});
diff --git a/src/surfaces/AgentTranscript.tsx b/src/surfaces/AgentTranscript.tsx
index b10bc82f..38bc5650 100644
--- a/src/surfaces/AgentTranscript.tsx
+++ b/src/surfaces/AgentTranscript.tsx
@@ -416,7 +416,9 @@ function AgentTranscriptComponent({
key={item.block.id}
block={item.block}
layout={transcriptLayout}
- stickyIndex={firstVisibleTurn + turnIndex + 1}
+ // A prompt only reports itself pinned while it can be pinned,
+ // and it watches the scroller it is pinned to.
+ scroller={promptAnchor ? scrollerEl : null}
// Prose reads the same wherever it lands: under the fold
// line at the top of the turn, or under the work it follows.
underLine={
@@ -449,6 +451,14 @@ function AgentTranscriptComponent({
/>
);
+ // groupTurns opens a turn at its prompt, so the user message is
+ // always the first item. It is rendered outside the turn body: the
+ // body is the contained, virtualized block, and a sticky row inside
+ // it would stick to the body rather than to the scroller.
+ const promptItem =
+ items[0]?.type === "block" && items[0].block.role === "user"
+ ? items[0]
+ : undefined;
return (
- {items.flatMap((item, itemIndex) => {
- const inFold =
- !!fold && itemIndex >= fold.start && itemIndex <= fold.end;
- if (inFold) {
- if (itemIndex !== fold.start) return [];
- return [
- foldLineRow,
-
- {() =>
- items
- .slice(fold.start, fold.end + 1)
- .map((entry, offset) => (
-
- {renderItem(entry, fold.start + offset)}
-
- ))
- }
- ,
- ];
- }
- const row = (
-
- {renderItem(item, itemIndex)}
-
- );
- if (itemIndex !== foldLineAt) return row;
- return [foldLineRow, row];
- })}
- {foldLineAt >= items.length ? foldLineRow : null}
- {durationMs != null && settled ? (
-
onSecondOpinion(target, turn, model)
- : undefined
- }
- onHandoff={
- onHandoff
- ? (target, model) => onHandoff(target, turn, model)
+ {promptItem ? (
+ // Pinned, the prompt travels the whole height of its turn and
+ // the next turn's prompt pushes it out. The ascending z-index
+ // keeps the arriving prompt above the leaving one during that
+ // handoff.
+
+ >
+ {renderItem(promptItem, 0)}
+
) : null}
+
+ {items.flatMap((item, itemIndex) => {
+ if (item === promptItem) return [];
+ const inFold =
+ !!fold && itemIndex >= fold.start && itemIndex <= fold.end;
+ if (inFold) {
+ if (itemIndex !== fold.start) return [];
+ return [
+ foldLineRow,
+
+ {() =>
+ items
+ .slice(fold.start, fold.end + 1)
+ .map((entry, offset) => (
+
+ {renderItem(entry, fold.start + offset)}
+
+ ))
+ }
+ ,
+ ];
+ }
+ const row = (
+
+ {renderItem(item, itemIndex)}
+
+ );
+ if (itemIndex !== foldLineAt) return row;
+ return [foldLineRow, row];
+ })}
+ {foldLineAt >= items.length ? foldLineRow : null}
+ {durationMs != null && settled ? (
+
+ onSecondOpinion(target, turn, model)
+ : undefined
+ }
+ onHandoff={
+ onHandoff
+ ? (target, model) => onHandoff(target, turn, model)
+ : undefined
+ }
+ />
+ ) : null}
+