@oh-my-pi/pi-tui 18.4.6 → 18.4.9

package/src/apps/debug/raw-sse.ts

@@ -1,6 +1,11 @@
+import type { TspScrollBy } from "@oh-my-pi/pi-wire";
 import { formatKeyHint } from "../../app-keybindings";
 import type { Component } from "../../tui";
 import { matchesKey } from "../../keys";
+import { col, compact, keyed, node, row, span, text } from "../../native/describe";
+import { Memo } from "../../native/memo";
+import type { NativeNode, NativeScreen, NativeScroll, NativeUiEvent } from "../../native/node";
+import { actionBar, actionButton } from "../../native/overlay";
 import { routeSgrMouseInput, type SgrMouseEvent } from "../../mouse";
 import { truncateToWidth } from "../../utils";
 import { sanitizeDisplayText } from "../../overlays/extensions/display-text";
@@ -10,6 +15,7 @@ import {
 	formatRawSseIsoTime,
 	type RawSseDebugBuffer,
 	type RawSseDebugRecord,
+	type RawSseDebugSnapshot,
 	rawSseRecordLines,
 } from "./raw-sse-buffer";
 
@@ -17,6 +23,9 @@ const MIN_VIEWER_WIDTH = 40;
 // `data:` lines below this width render fine on a single row; anything wider gets pretty-printed
 // across multiple `data:` lines so streamed JSON blobs stop getting clipped by `truncateToWidth`.
 const PRETTY_PRINT_DATA_THRESHOLD = 100;
+// The native body is fed append-only (a `text append` op per new record);
+// past this many characters it starts over from the live window.
+const NATIVE_STREAM_CHAR_CAP = 2_000_000;
 
 // Walks the SSE wire lines and replaces single-line `data: <json>` payloads with
 // multi-line `data: <indented-json>` entries when the JSON is wide enough to clip.
@@ -77,7 +86,20 @@ export class RawSseViewerComponent implements Component {
 	readonly #unsubscribe: () => void;
 	readonly #frame: DebugViewerFrame;
 	#statusMessage: string | undefined;
+	#statusFailed = false;
 	#disposed = false;
+	readonly #native = new Memo();
+	readonly #nativeHead = new Memo();
+	readonly #nativeBody = new Memo();
+	/** The last scroll key, forwarded to the stream block (see {@link NativeNode.scroll}). */
+	#nativeScroll: NativeScroll | undefined;
+	/** What the native `ansi` body was fed: every record after a rebase, in order, through {@link #nativeLast}. */
+	#nativeText = "";
+	/** Sequence of the last record in {@link #nativeText}. */
+	#nativeLast = 0;
+	/** Buffer counters at the last feed; a drop means the buffer was cleared. */
+	#nativeEvents = 0;
+	#nativeDropped = 0;
 	// Pretty-printed wire lines keyed by `record.sequence`. Pretty-printing is
 	// the JSON.parse + JSON.stringify per `data:` line, so we cache the result —
 	// the render path runs on every keypress and scroll update.
@@ -123,8 +145,7 @@ export class RawSseViewerComponent implements Component {
 		}
 
 		if (matchesKey(keyData, "escape") || matchesKey(keyData, "esc")) {
-			this.dispose();
-			this.#onExit();
+			this.#close();
 			return;
 		}
 
@@ -133,34 +154,50 @@ export class RawSseViewerComponent implements Component {
 			return;
 		}
 
-		if (matchesKey(keyData, "up")) {
-			this.#frame.scroll(-1);
-			this.#onUpdate?.();
-			return;
-		}
-
-		if (matchesKey(keyData, "down")) {
-			this.#frame.scroll(1);
-			this.#onUpdate?.();
-			return;
-		}
-
-		if (matchesKey(keyData, "pageUp")) {
-			this.#frame.scroll(-this.#frame.getBodyHeight());
-			this.#onUpdate?.();
-			return;
-		}
-
-		if (matchesKey(keyData, "pageDown")) {
-			this.#frame.scroll(this.#frame.getBodyHeight());
-			this.#onUpdate?.();
-			return;
-		}
+		const by: TspScrollBy | undefined = matchesKey(keyData, "up")
+			? "line-up"
+			: matchesKey(keyData, "down")
+				? "line-down"
+				: matchesKey(keyData, "pageUp")
+					? "page-up"
+					: matchesKey(keyData, "pageDown")
+						? "page-down"
+						: matchesKey(keyData, "home")
+							? "start"
+							: matchesKey(keyData, "end")
+								? "end"
+								: undefined;
+		if (by) this.#scroll(by);
+	}
 
-		if (matchesKey(keyData, "end")) {
-			this.#frame.setFollowTail(true);
-			this.#onUpdate?.();
+	/**
+	 * Scroll keys move the row frame and, natively, ask the terminal to move
+	 * the stream block the same way (`end` follows the tail again).
+	 */
+	#scroll(by: TspScrollBy): void {
+		const page = this.#frame.getBodyHeight();
+		switch (by) {
+			case "line-up":
+				this.#frame.scroll(-1);
+				break;
+			case "line-down":
+				this.#frame.scroll(1);
+				break;
+			case "page-up":
+				this.#frame.scroll(-page);
+				break;
+			case "page-down":
+				this.#frame.scroll(page);
+				break;
+			case "start":
+				this.#frame.setScrollOffset(0);
+				break;
+			case "end":
+				this.#frame.setFollowTail(true);
+				break;
 		}
+		this.#nativeScroll = { by, n: (this.#nativeScroll?.n ?? 0) + 1 };
+		this.#onUpdate?.();
 	}
 
 	#handleMouse(event: SgrMouseEvent): boolean {
@@ -187,12 +224,154 @@ export class RawSseViewerComponent implements Component {
 
 	invalidate(): void {
 		this.#frame.invalidate();
+		this.#native.clear();
+		this.#nativeHead.clear();
+		this.#nativeBody.clear();
 	}
 
 	render(width: number): readonly string[] {
 		return this.#frame.render(Math.max(MIN_VIEWER_WIDTH, width));
 	}
 
+	/** The action bar's buttons run the same code as their keys. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type !== "action") return;
+		if (event.act === "copy") this.#copyAll();
+		else if (event.act === "close") this.#close();
+	}
+
+	/**
+	 * The stream as a page of its own: the capture counters over the wire
+	 * text, one `ansi` block that fills the page, scrolls itself and follows
+	 * its tail until the user scrolls away (Tern-local, so no follow state
+	 * here; the scroll keys reach it as `scroll` requests). The copy status
+	 * and the buttons are this component's own node, docked under the page
+	 * so they never scroll away.
+	 */
+	describeScreen(): NativeScreen {
+		const snapshot = this.#buffer.snapshot();
+		const stream = this.#feedNative(snapshot);
+		const head = this.#nativeHead.get(
+			[snapshot.totalEvents, snapshot.records.length, snapshot.droppedRecords, snapshot.lastUpdatedAt],
+			() => this.#describeHead(snapshot),
+		);
+		const body = this.#nativeBody.get([stream, this.#nativeScroll], () =>
+			stream.length > 0
+				? {
+						...node(
+							"ansi",
+							{ text: stream, follow: true, role: "omp.debug.stream", max: { h: 1 } },
+							undefined,
+							"stream",
+						),
+						scroll: this.#nativeScroll,
+					}
+				: keyed(
+						col(
+							[
+								text("No raw SSE frames captured yet", { role: "omp.app.empty-title" }),
+								text([
+									span("HTTP SSE providers populate this view while a model response is streaming.", "muted"),
+								]),
+							],
+							{ gap: "xs", align: "center", role: "omp.app.empty" },
+						),
+						"empty",
+					),
+		);
+		return { role: "omp.debug", main: [head, body], dock: [this] };
+	}
+
+	/** The docked bar under the stream page: the copy status and the buttons. */
+	describe(): NativeNode {
+		return this.#native.get([this.#statusMessage, this.#statusFailed], () =>
+			col(
+				compact([
+					this.#statusMessage !== undefined &&
+						keyed(
+							text([span(this.#statusMessage, this.#statusFailed ? "error" : "success")], {
+								wrap: "word",
+								role: "omp.app.status",
+							}),
+							"status",
+						),
+					actionBar([
+						actionButton("Copy raw", "copy", { keys: "ctrl+c", tone: "accent" }),
+						null,
+						actionButton("Close", "close", { keys: "escape" }),
+					]),
+				]),
+				{ role: "omp.debug.bar", gap: "sm" },
+			),
+		);
+	}
+
+	#describeHead(snapshot: RawSseDebugSnapshot): NativeNode {
+		const stats = [
+			span(`${snapshot.totalEvents} events`, "num"),
+			span(" · ", "dim"),
+			span(`${snapshot.records.length} records`, "num"),
+		];
+		if (snapshot.droppedRecords > 0) {
+			stats.push(span(" · ", "dim"), span(`${snapshot.droppedRecords} dropped`, "warning"));
+		}
+		stats.push(
+			span(" · ", "dim"),
+			snapshot.lastUpdatedAt
+				? span(`last ${formatRawSseIsoTime(snapshot.lastUpdatedAt)}`, "muted")
+				: span("waiting for first frame", "muted"),
+		);
+		return keyed(
+			row([text("Raw provider stream", { role: "omp.app.title" }), text(stats, { truncate: "end" })], {
+				gap: "sm",
+				align: "center",
+				role: "omp.app.head",
+			}),
+			"head",
+		);
+	}
+
+	/**
+	 * Brings {@link #nativeText} up to the live window: appends the records
+	 * after {@link #nativeLast}, so evictions never rewrite what the terminal
+	 * already holds. Starts over once the text outgrows its cap or the buffer
+	 * was cleared.
+	 */
+	#feedNative(snapshot: RawSseDebugSnapshot): string {
+		const records = snapshot.records;
+		const last = records.at(-1)?.sequence ?? 0;
+		if (
+			this.#nativeText.length > NATIVE_STREAM_CHAR_CAP ||
+			last < this.#nativeLast ||
+			snapshot.totalEvents < this.#nativeEvents ||
+			snapshot.droppedRecords < this.#nativeDropped
+		) {
+			this.#nativeText = "";
+			this.#nativeLast = 0;
+		}
+		this.#nativeEvents = snapshot.totalEvents;
+		this.#nativeDropped = snapshot.droppedRecords;
+		if (last === this.#nativeLast) return this.#nativeText;
+		let fed = this.#nativeText;
+		for (const record of records) {
+			if (record.sequence <= this.#nativeLast) continue;
+			for (const line of this.#prettyLinesFor(record)) fed += `${sanitizeDisplayText(line)}\n`;
+			if (record.kind === "event" && record.truncated) {
+				fed += `${theme.fg("warning", `: omp-debug-event-truncated originalChars=${record.originalChars}`)}\n`;
+			}
+			fed += "\n";
+		}
+		this.#nativeText = fed;
+		this.#nativeLast = last;
+		this.#pruneCache(records[0]!.sequence);
+		return fed;
+	}
+
+	#close(): void {
+		this.dispose();
+		this.#onExit();
+	}
+
 	#renderRawLines(innerWidth: number): string[] {
 		const snapshot = this.#buffer.snapshot();
 		if (snapshot.records.length === 0) {
@@ -264,6 +443,7 @@ export class RawSseViewerComponent implements Component {
 		if (payload.trim().length === 0) {
 			const message = "No raw SSE frames to copy";
 			this.#statusMessage = message;
+			this.#statusFailed = true;
 			this.#onStatus?.(message);
 			this.#onUpdate?.();
 			return;
@@ -273,10 +453,12 @@ export class RawSseViewerComponent implements Component {
 			this.#deps.copyToClipboard(payload);
 			const message = "Copied raw SSE stream";
 			this.#statusMessage = message;
+			this.#statusFailed = false;
 			this.#onStatus?.(message);
 		} catch (error) {
 			const message = error instanceof Error ? error.message : String(error);
 			this.#statusMessage = `Copy failed: ${message}`;
+			this.#statusFailed = true;
 		}
 		this.#onUpdate?.();
 	}

package/src/native/apply.ts

@@ -212,7 +212,8 @@ export class TspDocument {
 				this.#focus = id;
 				return;
 			}
-			case "reveal": {
+			case "reveal":
+			case "scroll": {
 				const [, id] = op;
 				this.#node(id);
 				return;

package/src/native/backend.ts

@@ -38,7 +38,7 @@ import {
 	type NativeThemePalette,
 	setNativeSymbolPreset,
 } from "../theme/theme";
-import type { Component, OverlayOptions } from "../tui";
+import type { Component, OverlayOptions, RenderScheduler, RenderTimer } from "../tui";
 import { TspDocument } from "./apply";
 import { getNativeBlob } from "./blobs";
 import { node } from "./describe";
@@ -64,6 +64,18 @@ export interface NativeHost {
 	overlays(): readonly NativeOverlay[];
 	/** Component receiving keyboard input. */
 	focused(): Component | null;
+	/**
+	 * The user clicked into a node described by `owners[0]` (then the
+	 * components containing it, innermost first): move keyboard focus there.
+	 * `field` is the outermost owner that takes keys and whose focus target is
+	 * the clicked `editor`/`input`, if any; `sheet` tells the overlays that
+	 * don't hold the keys while the user works beside them.
+	 */
+	focusFromPointer(
+		owners: readonly Component[],
+		field: Component | null,
+		sheet: (overlay: Component) => boolean,
+	): void;
 	requestRender(): void;
 	/** The terminal switched appearance. */
 	appearanceChanged(dark: boolean): void;
@@ -80,9 +92,23 @@ export interface NativeBackendOptions {
 	readonly recordPath?: string;
 	/** Log the `rows` fallback count per frame. Defaults to `PI_TUI_NATIVE_STATS=1`. */
 	readonly stats?: boolean;
-	readonly now?: () => number;
+	/** Clock and timers (stall wake-up); defaults to `Date.now` and unref'd `setTimeout`. */
+	readonly scheduler?: RenderScheduler;
 }
 
+/** Real clock and timers that never keep the process alive on their own. */
+const DEFAULT_SCHEDULER: RenderScheduler = {
+	now: () => Date.now(),
+	scheduleImmediate: callback => {
+		setImmediate(callback);
+	},
+	scheduleRender: (callback, delayMs) => {
+		const timer = setTimeout(callback, delayMs);
+		timer.unref();
+		return { cancel: () => clearTimeout(timer) };
+	},
+};
+
 /** Frames kept for the debug `tsp` op. */
 const RECENT_FRAMES = 64;
 /** An unanswered frame older than this no longer holds rendering back. */
@@ -216,7 +242,9 @@ export class NativeBackend {
 	#mirror: boolean;
 	#recordPath: string | undefined;
 	#stats: boolean;
-	#now: () => number;
+	#scheduler: RenderScheduler;
+	/** Wakes a render when the oldest unacked frame of a credit-blocked surface turns stalled. */
+	#stallTimer: RenderTimer | undefined;
 	#recent: TspFrame[] = [];
 	#sawResize = false;
 	#live = false;
@@ -237,7 +265,7 @@ export class NativeBackend {
 		this.#mirror = options.mirror === true;
 		this.#recordPath = options.recordPath ?? (Bun.env.PI_TUI_TSP_RECORD || undefined);
 		this.#stats = options.stats ?? Bun.env.PI_TUI_NATIVE_STATS === "1";
-		this.#now = options.now ?? Date.now;
+		this.#scheduler = options.scheduler ?? DEFAULT_SCHEDULER;
 		this.#inline = this.#newSurface("inline");
 	}
 
@@ -338,6 +366,7 @@ export class NativeBackend {
 		this.#unbindTheme?.();
 		this.#unbindTheme = undefined;
 		this.#useNerdSymbols(false);
+		this.#clearStallTimer();
 	}
 
 	/**
@@ -440,6 +469,7 @@ export class NativeBackend {
 		this.#pruneOverlayNodes(overlays);
 		if (!this.#hasCredit(surface)) {
 			surface.dirty = true;
+			this.#armStallTimer(surface);
 			return;
 		}
 		surface.dirty = false;
@@ -504,7 +534,7 @@ export class NativeBackend {
 	#hasCredit(surface: Surface): boolean {
 		if (surface.unacked.length < this.#credits) return true;
 		const oldest = surface.unacked[0]!;
-		if (this.#now() - oldest < STALLED_ACK_MS) return false;
+		if (this.#scheduler.now() - oldest < STALLED_ACK_MS) return false;
 		logger.warn("TSP: terminal stopped acknowledging frames; resuming without credits", {
 			sf: surface.id,
 			s: surface.seq,
@@ -515,9 +545,27 @@ export class NativeBackend {
 		return true;
 	}
 
+	/** Render again once `surface`'s oldest unacked frame counts as stalled, in case no ack ever arrives. */
+	#armStallTimer(surface: Surface): void {
+		if (this.#stallTimer) return;
+		const delay = surface.unacked[0]! + STALLED_ACK_MS - this.#scheduler.now();
+		this.#stallTimer = this.#scheduler.scheduleRender(
+			() => {
+				this.#stallTimer = undefined;
+				this.#host.requestRender();
+			},
+			Math.max(0, delay),
+		);
+	}
+
+	#clearStallTimer(): void {
+		this.#stallTimer?.cancel();
+		this.#stallTimer = undefined;
+	}
+
 	#sendFrame(surface: Surface, ops: readonly TspOp[]): void {
 		surface.seq++;
-		surface.unacked.push(this.#now());
+		surface.unacked.push(this.#scheduler.now());
 		const frame: TspFrame = { sf: surface.id, s: surface.seq, ops };
 		if (surface.doc) {
 			const errors = surface.doc.applyFrame(frame);
@@ -563,7 +611,7 @@ export class NativeBackend {
 			}
 		}
 		try {
-			fs.appendFileSync(path, `${JSON.stringify({ t: this.#now(), dir, verb, params, body: payload })}\n`);
+			fs.appendFileSync(path, `${JSON.stringify({ t: this.#scheduler.now(), dir, verb, params, body: payload })}\n`);
 		} catch (error) {
 			logger.warn("TSP: recording failed; disabling", { path, error: String(error) });
 			this.#recordPath = undefined;
@@ -583,6 +631,7 @@ export class NativeBackend {
 				const newly = Math.min(event.s, surface.seq) - surface.acked;
 				surface.acked = Math.min(event.s, surface.seq);
 				surface.unacked.splice(0, newly);
+				this.#clearStallTimer();
 				if (surface.dirty) this.#host.requestRender();
 				return;
 			}
@@ -624,6 +673,16 @@ export class NativeBackend {
 			case "edit":
 				this.#routeUiEvent(event);
 				return;
+			case "focus": {
+				const reconciler = this.#surfaceFor(event.sf)?.reconciler;
+				const owners = reconciler?.owners(event.id) ?? [];
+				if (!reconciler || owners.length === 0) return;
+				const field =
+					owners.findLast(owner => owner.handleInput && reconciler.focusTarget(owner) === event.id) ?? null;
+				this.#host.focusFromPointer(owners, field, overlay => overlay.nativeSheet?.(this.#cx) === true);
+				this.#host.requestRender();
+				return;
+			}
 		}
 	}
 

package/src/native/encode.ts

@@ -106,9 +106,13 @@ export function encodeTspJson(verb: TspVerb, value: unknown, params?: TspParams,
 	return encodeTspMessage(verb, JSON.stringify(value), params, limit);
 }
 
-/** The `hello` query; callers follow it with a DA1 sentinel. */
+/**
+ * The `hello` query; callers follow it with a DA1 sentinel. `features: ["edit"]`
+ * tells the terminal that omp applies its `edit` events (TSP §8.5), so it may keep a
+ * native selection in omp's editors; without it, every key stays omp's.
+ */
 export function encodeTspHelloQuery(version?: string): string {
-	return encodeTspJson("q", { q: "hello", v: [TSP_VERSION], app: "omp", ver: version });
+	return encodeTspJson("q", { q: "hello", v: [TSP_VERSION], app: "omp", features: ["edit"], ver: version });
 }
 
 /** One decoded APC message: verb, parameters and raw body. */
@@ -166,6 +170,7 @@ const EVENT_REQUIRED: Readonly<Record<string, Readonly<Record<string, "string" |
 	activate: { id: "string", item: "string" },
 	action: { id: "string", act: "string" },
 	edit: { id: "string", from: "number", to: "number", text: "string", cursor: "number", len: "number" },
+	focus: { id: "string" },
 	error: { msg: "string" },
 	gone: { ids: "array" },
 };

package/src/native/node.ts

@@ -13,7 +13,7 @@
  * See `packages/wire/src/tsp.ts` for the wire vocabulary and
  * `crates/tern/SURFACE_PROTOCOL.md` (Stencil repository) for the spec.
  */
-import type { TspEvent, TspKind, TspProps, TspSpan } from "@oh-my-pi/pi-wire";
+import type { TspEvent, TspKind, TspProps, TspScrollBy, TspSpan } from "@oh-my-pi/pi-wire";
 import type { Component } from "../tui";
 
 /** A described node: a wire node minus its id, with components allowed as children. */
@@ -33,9 +33,23 @@ export type NativeNode = {
 		 * added. Key a node by what it points at to reveal it again on a move.
 		 */
 		readonly reveal?: "start" | "end" | "nearest";
+		/**
+		 * Keyboard scrolling forwarded to the terminal (PgUp/PgDn/End reach the
+		 * program): moves the scroller at or above the node by `by` whenever
+		 * `n` differs from the previous description of the same node. Bump `n`
+		 * per key press; presses between two frames repeat the latest `by` once
+		 * each (`start`/`end` once). A freshly added node never scrolls.
+		 */
+		readonly scroll?: NativeScroll;
 	};
 }[TspKind];
 
+/** A {@link NativeNode.scroll} request. */
+export interface NativeScroll {
+	readonly by: TspScrollBy;
+	readonly n: number;
+}
+
 /** A child slot: a described node, or a component that describes itself. */
 export type NativeChild = NativeNode | Component;
 

package/src/native/reconcile.ts

@@ -28,7 +28,7 @@
  * into `layer`; their anchor keypaths are rewritten to wire ids.
  */
 import * as logger from "@oh-my-pi/pi-utils/logger";
-import { TSP_TEXT_KINDS, type TspKind, type TspNode, type TspOp } from "@oh-my-pi/pi-wire";
+import { TSP_TEXT_KINDS, type TspKind, type TspNode, type TspOp, type TspScrollBy } from "@oh-my-pi/pi-wire";
 import { type Component, Container, CURSOR_MARKER } from "../tui";
 import { normalizeIconProps } from "./icons";
 import type { DescribeContext, NativeChild, NativeNode } from "./node";
@@ -58,6 +58,8 @@ const REGION_IDS = ["main", "dock", "layer"] as const;
 type RegionId = (typeof REGION_IDS)[number];
 const RESERVED_IDS: ReadonlySet<string> = new Set(REGION_IDS);
 const TEXT_KINDS: ReadonlySet<string> = new Set(TSP_TEXT_KINDS);
+/** Most `scroll` ops one node's coalesced key presses send in a frame. */
+const MAX_SCROLL_REPEAT = 32;
 let nextComponentId = 0;
 
 /** Stable base-36 wire id of a component instance (its root node's id). */
@@ -213,6 +215,8 @@ export class Reconciler {
 	#settles: string[] = [];
 	/** Selected list items and added `reveal` nodes sent this frame, revealed once the frame's adds have landed. */
 	#reveals: [id: string, at: "start" | "end" | "nearest"][] = [];
+	/** `scroll` requests whose `n` moved this frame, sent after the reveals. */
+	#scrolls: [id: string, by: TspScrollBy][] = [];
 	/** Wire ids `list.selected` keys resolved to (an unresolved key names no node to reveal). */
 	#selectedIds = new Set<string>();
 	#moves: PendingMove[] = [];
@@ -250,6 +254,7 @@ export class Reconciler {
 		this.#dels = [];
 		this.#settles = [];
 		this.#reveals = [];
+		this.#scrolls = [];
 		this.#selectedIds.clear();
 		this.#framePortals = [];
 		this.#rows = 0;
@@ -293,6 +298,7 @@ export class Reconciler {
 		this.#parked = [];
 		for (const id of this.#settles) this.#ops.push(["settle", id]);
 		for (const [id, at] of this.#reveals) this.#ops.push(["reveal", id, at]);
+		if (cx.feature("scroll")) for (const [id, by] of this.#scrolls) this.#ops.push(["scroll", id, by]);
 		const ops = this.#ops;
 		this.#ops = [];
 		return this.#gone.size === 0 ? ops : ops.filter(op => !this.#touchesGone(op));
@@ -339,6 +345,19 @@ export class Reconciler {
 		return { component: state.comp, keypath };
 	}
 
+	/**
+	 * The component that described wire node `id`, then each component whose
+	 * node contains it, innermost first (empty for an unknown id).
+	 */
+	owners(id: string): Component[] {
+		const dot = id.indexOf(".");
+		const out: Component[] = [];
+		for (let state = this.#byId.get(dot === -1 ? id : id.slice(0, dot)) ?? null; state; state = state.container) {
+			out.push(state.comp);
+		}
+		return out;
+	}
+
 	/** The key a list item node was described with (its key, else its child index). */
 	itemKey(id: string): string {
 		const dot = id.indexOf(".");
@@ -583,6 +602,14 @@ export class Reconciler {
 			this.#flushMoves();
 			return;
 		}
+		const scroll = next.node.scroll;
+		if (scroll && scroll.n !== old.node.scroll?.n) {
+			// Presses described in one frame coalesce: repeat the latest step once per
+			// press (an end once), so key repeat keeps its distance.
+			const jump = scroll.by === "start" || scroll.by === "end";
+			const presses = jump ? 1 : Math.min(Math.max(scroll.n - (old.node.scroll?.n ?? 0), 1), MAX_SCROLL_REPEAT);
+			for (let i = 0; i < presses; i++) this.#scrolls.push([next.id, scroll.by]);
+		}
 		const oldEntries = this.#entries(old.node.c, old.keypath, old.owner, old.hoist, null);
 		const newEntries = this.#entries(next.node.c, next.keypath, next.owner, next.hoist, inner);
 		this.#diffProps(