@narumitw/pi-inspect 0.0.0-stage → 0.1.0

package/src/web/trace.tsx

@@ -0,0 +1,273 @@
+import { ChevronDownIcon, ChevronRightIcon, ListBulletIcon, RowsIcon } from "@radix-ui/react-icons";
+import { Button, Flex, Heading, Text } from "@radix-ui/themes";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { Call, EntrySummary } from "../model.js";
+import { Glyph, Status } from "./components.js";
+import { count, eventName, time } from "./format.js";
+import { flatten, hierarchy, label, reveal, withAncestors } from "./hierarchy.js";
+import { InlineEntry } from "./inline-entry.js";
+import { TimelineMark } from "./timeline.js";
+import { axis } from "./timing.js";
+
+export function scrollWithin(container: HTMLElement, element: HTMLElement): void {
+  const parent = container.getBoundingClientRect();
+  const child = element.getBoundingClientRect();
+  if (child.top < parent.top) container.scrollTop -= Math.ceil(parent.top - child.top);
+  else if (child.bottom > parent.bottom) container.scrollTop += Math.ceil(child.bottom - parent.bottom);
+}
+export function Trace({
+  entries,
+  matches,
+  selected,
+  serial,
+  revealSelected,
+  select,
+  view,
+  changeView,
+  calls,
+}: {
+  entries: EntrySummary[];
+  matches: Set<string>;
+  selected: string;
+  serial: number;
+  revealSelected: boolean;
+  select(id: string): void;
+  view: string;
+  changeView(view: string): void;
+  calls: Call[];
+}) {
+  const tree = useMemo(() => hierarchy(entries), [entries]);
+  const keep = useMemo(
+    () => withAncestors(tree, new Set([...matches, ...(revealSelected && selected ? [selected] : [])])),
+    [tree, matches, revealSelected, selected],
+  );
+  const [expanded, setExpanded] = useState(new Set<string>());
+  const [disclosed, setDisclosed] = useState(new Set<string>());
+  const [offset, setOffset] = useState(0);
+  const [focused, setFocused] = useState("");
+  const lastReveal = useRef(-1);
+  const focusRequest = useRef(false);
+  const scroller = useRef<HTMLDivElement>(null);
+  const rowRefs = useRef(new Map<string, HTMLDivElement>());
+  const rows = useMemo(() => flatten(tree, expanded, keep), [tree, expanded, keep]);
+  const pageRows = rows.slice(offset, offset + 50);
+  const visibleFocused = pageRows.some((row) => row.node.id === focused) ? focused : (pageRows[0]?.node.id ?? "");
+  const baseDepth = pageRows.length ? Math.min(...pageRows.map((row) => row.depth)) : 0;
+  const relativeDepth = Math.max(1, ...pageRows.map((row) => row.depth - baseDepth));
+  const indent = Math.min(14, 140 / relativeDepth); // Scale the visual rail, never cap hierarchy depth.
+  const range = useMemo(() => axis(entries, calls), [entries, calls]);
+  useEffect(() => {
+    if (!tree.nodes.has(selected) || serial === lastReveal.current) return;
+    lastReveal.current = serial;
+    const next = reveal(tree, expanded, selected);
+    setExpanded(next);
+    const index = flatten(tree, next, keep).findIndex((row) => row.node.id === selected);
+    if (index >= 0) {
+      setOffset(Math.floor(index / 50) * 50);
+      setFocused(selected);
+    }
+  }, [tree, selected, serial, expanded, keep]);
+  useEffect(() => {
+    const element = rowRefs.current.get(visibleFocused);
+    if (!element || !scroller.current) return;
+    if (focusRequest.current) {
+      element.focus({ preventScroll: true });
+      focusRequest.current = false;
+    }
+    scrollWithin(scroller.current, element);
+  }, [visibleFocused]);
+  useEffect(() => {
+    if (offset >= rows.length && offset) setOffset(Math.max(0, Math.floor((rows.length - 1) / 50) * 50));
+  }, [offset, rows.length]);
+  function toggle(id: string): void {
+    setExpanded((previous) => {
+      const next = new Set(previous);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+    setDisclosed((previous) => new Set([...previous, id]));
+  }
+  function focus(id: string): void {
+    const index = rows.findIndex((row) => row.node.id === id);
+    if (index === -1) return;
+    focusRequest.current = true;
+    setOffset(Math.floor(index / 50) * 50);
+    setFocused(id);
+    rowRefs.current.get(id)?.focus({ preventScroll: true });
+  }
+  return (
+    <section className={`panel trace-panel trace-${view}`}>
+      <div className="trace-toolbar">
+        <Heading size="3">Trace explorer</Heading>
+        <Text size="1" color="gray">
+          Session log hierarchy
+        </Text>
+        <div className="trace-actions">
+          <Button
+            size="1"
+            variant="ghost"
+            disabled={!keep.size}
+            onClick={() => {
+              setExpanded(new Set(keep));
+              setDisclosed(new Set(keep));
+            }}
+          >
+            Expand all
+          </Button>
+          <Button size="1" variant="ghost" disabled={!expanded.size} onClick={() => setExpanded(new Set())}>
+            Collapse all
+          </Button>
+          <div className="view-switch">
+            {["list", "timeline"].map((mode) => (
+              <button type="button" key={mode} aria-pressed={view === mode} onClick={() => changeView(mode)}>
+                {mode === "list" ? <ListBulletIcon /> : <RowsIcon />}
+                {mode === "list" ? "List" : "Timeline"}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="trace-hint">
+        Row: select + toggle · Chevron: toggle only · ↑↓ navigate · ←→ collapse/expand · Enter select · Space toggle
+      </div>
+      {view === "timeline" && (
+        <div className="time-axis">
+          <span>{range ? new Date(range.start).toISOString().slice(11, 23) : "No timing"}</span>
+          <span>● Log timestamp · ▰ Observed tool interval (live drawer)</span>
+          <span>{range ? new Date(range.end).toISOString().slice(11, 23) : "—"}</span>
+        </div>
+      )}
+      <div className="trace-scroll" ref={scroller}>
+        <div role="tree" aria-label="Session trace" className="trace-tree">
+          {!rows.length && <div className="empty-state">No entries match. Filters keep actual ancestor context.</div>}
+          {pageRows.map(({ node: entry, depth, childCount }) => {
+            const open = expanded.has(entry.id);
+            const selectedRow = selected === entry.id;
+            return (
+              <div
+                className="trace-item"
+                key={entry.id}
+                data-trace-entry-id={entry.id}
+                data-parent-id={entry.parentId ?? ""}
+                data-depth={depth}
+                data-state={open ? "open" : "closed"}
+                style={{ marginLeft: (depth - baseDepth) * indent }}
+              >
+                <div
+                  role="treeitem"
+                  aria-level={depth + 1}
+                  aria-expanded={open}
+                  aria-selected={selectedRow}
+                  tabIndex={visibleFocused === entry.id ? 0 : -1}
+                  ref={(element) => {
+                    if (element) rowRefs.current.set(entry.id, element);
+                    else rowRefs.current.delete(entry.id);
+                  }}
+                  className={`trace-row ${selectedRow ? "selected" : ""} ${open ? "expanded" : ""}`}
+                  data-trace-id={entry.id}
+                  onFocus={() => setFocused(entry.id)}
+                  onClick={(event) => {
+                    if (event.target !== event.currentTarget && (event.target as HTMLElement).closest("button")) return;
+                    select(entry.id);
+                    toggle(entry.id);
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.target !== event.currentTarget || event.altKey || event.ctrlKey || event.metaKey) return;
+                    const index = rows.findIndex((row) => row.node.id === entry.id);
+                    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Enter", " "].includes(event.key)) return;
+                    event.preventDefault();
+                    if (event.key === "ArrowDown") {
+                      const next = rows[index + 1];
+                      if (next) focus(next.node.id);
+                    } else if (event.key === "ArrowUp") {
+                      const prev = rows[index - 1];
+                      if (prev) focus(prev.node.id);
+                    } else if (event.key === "ArrowRight") {
+                      if (!open) toggle(entry.id);
+                      else {
+                        const child = rows[index + 1];
+                        if (child && child.depth > depth) focus(child.node.id);
+                      }
+                    } else if (event.key === "ArrowLeft") {
+                      if (open) toggle(entry.id);
+                      else if (entry.parentId) focus(entry.parentId);
+                    } else if (event.key === "Enter") select(entry.id);
+                    else toggle(entry.id);
+                  }}
+                >
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="expand-button"
+                    aria-label={`Expand event ${entry.id}`}
+                    aria-expanded={open}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      toggle(entry.id);
+                    }}
+                  >
+                    {open ? <ChevronDownIcon /> : <ChevronRightIcon />}
+                  </button>
+                  <div className="trace-event">
+                    <Glyph kind={entry.kind} />
+                    <span className="row-title">
+                      <strong>{eventName(entry.kind)}</strong>
+                      <span title={label(entry)}>{label(entry)}</span>
+                    </span>
+                    <code title={entry.id}>{entry.id.slice(0, 8)}</code>
+                    {!matches.has(entry.id) && (
+                      <span className="ancestor-badge">{selectedRow ? "selected outside filters" : "ancestor"}</span>
+                    )}
+                    {depth === 0 && entry.parentId && tree.nodes.has(entry.parentId) && (
+                      <span className="ancestor-badge">recorded parent cycle</span>
+                    )}
+                  </div>
+                  <div className="row-metrics">
+                    {entry.status && <Status value={entry.status} />}
+                    {entry.tokens !== undefined && (
+                      <span title="Recorded assistant totalTokens">{count(entry.tokens)} tok</span>
+                    )}
+                    <time title={entry.timestamp}>{time(entry.timestamp)}</time>
+                  </div>
+                  {view === "timeline" && <TimelineMark range={range} logTime={entry.timestamp} />}
+                </div>
+                {open && disclosed.has(entry.id) && (
+                  <div className="entry-expanded">
+                    <InlineEntry entry={entry} inspect={select} />
+                    {childCount > 0 && (
+                      <span className="children-label">
+                        {childCount} visible child {childCount === 1 ? "entry" : "entries"}
+                      </span>
+                    )}
+                    {entry.parentId && !tree.nodes.has(entry.parentId) && (
+                      <span className="children-label">Parent outside indexed data: {entry.parentId}</span>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className="trace-pagination">
+        <span>
+          {baseDepth
+            ? `Absolute hierarchy level ${baseDepth + 1}+ · page-local indentation`
+            : "Original parents retained · browser-only selection"}
+        </span>
+        <Flex gap="2" align="center">
+          <Button size="1" variant="ghost" disabled={!offset} onClick={() => setOffset(Math.max(0, offset - 50))}>
+            Previous
+          </Button>
+          <Text size="1">
+            {rows.length ? offset + 1 : 0}–{Math.min(offset + 50, rows.length)} / {rows.length}
+          </Text>
+          <Button size="1" variant="ghost" disabled={offset + 50 >= rows.length} onClick={() => setOffset(offset + 50)}>
+            Next
+          </Button>
+        </Flex>
+      </div>
+    </section>
+  );
+}

package/src/web/tree.tsx

@@ -0,0 +1,281 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  MagnifyingGlassIcon,
+  MixerHorizontalIcon,
+  Share2Icon,
+} from "@radix-ui/react-icons";
+import { Checkbox, Flex, Heading, IconButton, Select, Text, TextField } from "@radix-ui/themes";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { EntrySummary } from "../model.js";
+import { Glyph } from "./components.js";
+import { eventName, type Filters } from "./format.js";
+import { flatten, hierarchy, label, reveal, withAncestors } from "./hierarchy.js";
+import { scrollWithin } from "./trace.js";
+
+function Tree({
+  nodes,
+  matches,
+  selected,
+  serial,
+  revealSelected,
+  choose,
+}: {
+  nodes: EntrySummary[];
+  matches: Set<string>;
+  selected: string;
+  serial: number;
+  revealSelected: boolean;
+  choose(id: string): void;
+}) {
+  const tree = useMemo(() => hierarchy(nodes), [nodes]);
+  const keep = useMemo(
+    () => withAncestors(tree, new Set([...matches, ...(revealSelected && selected ? [selected] : [])])),
+    [tree, matches, revealSelected, selected],
+  );
+  const [expanded, setExpanded] = useState(new Set<string>());
+  const [offset, setOffset] = useState(0);
+  const previous = useRef<{ selected: string; serial: number; revealSelected: boolean } | undefined>(undefined);
+  const nav = useRef<HTMLElement>(null);
+  const rows = flatten(tree, expanded, keep);
+  useEffect(() => {
+    const old = previous.current;
+    if (
+      !tree.nodes.has(selected) ||
+      (old?.selected === selected && old.serial === serial && old.revealSelected === revealSelected)
+    )
+      return;
+    previous.current = { selected, serial, revealSelected };
+    const next = reveal(tree, expanded, selected);
+    setExpanded(next);
+    const index = flatten(tree, next, keep).findIndex((row) => row.node.id === selected);
+    if (index >= 0) setOffset(Math.floor(index / 100) * 100);
+  }, [selected, serial, revealSelected, tree, expanded, keep]);
+  const selectedVisible = rows.slice(offset, offset + 100).some((row) => row.node.id === selected);
+  const lastScroll = useRef<{ selected: string; offset: number; element: HTMLElement } | undefined>(undefined);
+  useEffect(() => {
+    const element = nav.current?.querySelector<HTMLElement>('[aria-current="true"]');
+    if (!selectedVisible || !nav.current || !element || element.dataset.entryId !== selected) return;
+    const last = lastScroll.current;
+    if (last?.selected === selected && last.offset === offset && last.element === element) return;
+    lastScroll.current = { selected, offset, element };
+    scrollWithin(nav.current, element);
+  }, [selected, offset, selectedVisible]);
+  useEffect(() => {
+    if (offset >= rows.length && offset) setOffset(0);
+  }, [offset, rows.length]);
+  const pageRows = rows.slice(offset, offset + 100);
+  const base = pageRows.length ? Math.min(...pageRows.map((row) => row.depth)) : 0;
+  const rail = Math.min(8, 64 / Math.max(1, ...pageRows.map((row) => row.depth - base)));
+  return (
+    <>
+      <nav ref={nav} className="tree-scroll" aria-label="Session branches">
+        {pageRows.map(({ node, depth, childCount }) => (
+          <div key={node.id} className="tree-row" style={{ paddingLeft: (depth - base) * rail }}>
+            {childCount ? (
+              <IconButton
+                variant="ghost"
+                size="1"
+                aria-label={`Toggle children of ${node.id}`}
+                aria-expanded={expanded.has(node.id)}
+                onClick={() =>
+                  setExpanded((previous) => {
+                    const next = new Set(previous);
+                    if (next.has(node.id)) next.delete(node.id);
+                    else next.add(node.id);
+                    return next;
+                  })
+                }
+              >
+                {expanded.has(node.id) ? <ChevronDownIcon /> : <ChevronRightIcon />}
+              </IconButton>
+            ) : (
+              <span className="tree-spacer" />
+            )}
+            <button
+              type="button"
+              className="node"
+              data-entry-id={node.id}
+              data-match={matches.has(node.id)}
+              aria-current={selected === node.id ? "true" : undefined}
+              onClick={() => choose(node.id)}
+              title={`${node.kind} · ${node.id}\n${label(node)}${node.nameTruncated ? " [truncated; inspect Raw for the complete captured value]" : ""}`}
+            >
+              <Glyph kind={node.kind} />
+              <span className="node-copy">
+                <span className="node-title">
+                  <strong>{eventName(node.kind)}</strong>
+                  <small>{node.id.slice(0, 8)}</small>
+                </span>
+                <span className="node-description">{label(node)}</span>
+              </span>
+            </button>
+          </div>
+        ))}
+      </nav>
+      {rows.length > 100 && (
+        <div className="nav-pagination">
+          <button type="button" disabled={!offset} onClick={() => setOffset(Math.max(0, offset - 100))}>
+            Previous nodes
+          </button>
+          <span>
+            {offset + 1}–{Math.min(offset + 100, rows.length)}
+          </span>
+          <button type="button" disabled={offset + 100 >= rows.length} onClick={() => setOffset(offset + 100)}>
+            Next nodes
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
+export function Sidebar({
+  nodes,
+  matches,
+  total,
+  selected,
+  serial,
+  revealSelected,
+  choose,
+  filters,
+  change,
+}: {
+  nodes: EntrySummary[];
+  matches: Set<string>;
+  total: number;
+  selected: string;
+  serial: number;
+  revealSelected: boolean;
+  choose(id: string): void;
+  filters: Filters;
+  change(filters: Filters): void;
+}) {
+  const toggleGroup = (group: string) =>
+    change({
+      ...filters,
+      groups: filters.groups.includes(group)
+        ? filters.groups.filter((item) => item !== group)
+        : [...filters.groups, group],
+    });
+  return (
+    <aside className="sidebar">
+      <section className="panel tree-panel">
+        <div className="panel-heading">
+          <Heading size="3">
+            <Share2Icon />
+            Session tree
+          </Heading>
+          <Text size="1" color="gray">
+            {total} entries
+          </Text>
+        </div>
+        <div className="tree-controls">
+          <TextField.Root
+            aria-label="Search session"
+            placeholder="Search entries or content…"
+            value={filters.query}
+            onChange={(event) => change({ ...filters, query: event.target.value })}
+          >
+            <TextField.Slot>
+              <MagnifyingGlassIcon />
+            </TextField.Slot>
+          </TextField.Root>
+          <div className="filter-pills">
+            {["All", "Model", "Tool", "Custom"].map((group) => (
+              <button
+                type="button"
+                key={group}
+                aria-pressed={
+                  group === "All" ? !filters.groups.length : filters.groups.length === 1 && filters.groups[0] === group
+                }
+                onClick={() => change({ ...filters, kind: "all", groups: group === "All" ? [] : [group] })}
+              >
+                {group}
+              </button>
+            ))}
+          </div>
+        </div>
+        <Tree
+          nodes={nodes}
+          matches={matches}
+          selected={selected}
+          serial={serial}
+          revealSelected={revealSelected}
+          choose={choose}
+        />
+        <div className="tree-count">
+          {matches.size} matches / {total} entries
+        </div>
+      </section>
+      <Collapsible.Root className="panel filter-panel" defaultOpen={false}>
+        <Collapsible.Trigger asChild>
+          <button className="filters-toggle" type="button">
+            <MixerHorizontalIcon />
+            Filters
+            <ChevronDownIcon />
+          </button>
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          <label className="filter-check" htmlFor="filter-errors">
+            <span>Errors only</span>
+            <Checkbox
+              id="filter-errors"
+              checked={filters.errorsOnly}
+              onCheckedChange={(checked) => change({ ...filters, errorsOnly: checked === true })}
+            />
+          </label>
+          <label className="filter-check" htmlFor="filter-slow">
+            <span>Slow tool calls (&gt; 10s)</span>
+            <Checkbox
+              id="filter-slow"
+              checked={filters.slowOnly}
+              onCheckedChange={(checked) => change({ ...filters, slowOnly: checked === true })}
+            />
+          </label>
+          {[
+            ["Tool", "Tool events"],
+            ["Model", "Model events"],
+            ["Custom", "Custom events"],
+          ].map(([group, label]) => (
+            <label className="filter-check" key={group} htmlFor={`filter-${group}`}>
+              <span>{label}</span>
+              <Checkbox
+                id={`filter-${group}`}
+                checked={filters.groups.includes(group)}
+                onCheckedChange={() => toggleGroup(group)}
+              />
+            </label>
+          ))}
+          <Flex justify="between" align="center" gap="2">
+            <Text size="1" color="gray">
+              Entry type
+            </Text>
+            <Select.Root value={filters.kind} onValueChange={(kind) => change({ ...filters, kind })}>
+              <Select.Trigger aria-label="Filter entry type" variant="soft" />
+              <Select.Content>
+                {[
+                  "all",
+                  "user",
+                  "assistant",
+                  "toolResult",
+                  "system",
+                  "custom",
+                  "compaction",
+                  "branch_summary",
+                  "model_change",
+                  "thinking_level_change",
+                  "context_edit",
+                ].map((kind) => (
+                  <Select.Item key={kind} value={kind}>
+                    {kind}
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select.Root>
+          </Flex>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </aside>
+  );
+}

package/src/web/virtual-context.ts

@@ -0,0 +1,138 @@
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+// Variable-height virtualization. The top visible source ID anchors measurements and tail appends.
+export function useVirtualContext(ids: string[]) {
+  const scroller = useRef<HTMLElement>(null);
+  const elements = useRef(new Map<string, HTMLDivElement>());
+  const anchor = useRef<{ id: string; offset: number } | undefined>(undefined);
+  const resetting = useRef(false);
+  const [resetPending, setResetPending] = useState(false);
+  const pendingFocus = useRef<string | undefined>(undefined);
+  const [heights, measure] = useState(new Map<string, number>());
+  const [range, setRange] = useState({ start: 0, end: 20 });
+  const [viewport, setViewport] = useState({ start: 0, end: 0 });
+  const positions = useMemo(() => {
+    let top = 0;
+    const rows = ids.map((id) => {
+      const height = heights.get(id) ?? 52;
+      const row = { id, top, height };
+      top += height;
+      return row;
+    });
+    return { rows, total: top };
+  }, [ids, heights]);
+  const current = useRef(positions);
+  current.current = positions;
+  const refresh = useCallback(() => {
+    const node = scroller.current;
+    if (!node) return;
+    const rows = current.current.rows;
+    const at = (top: number) => {
+      let lo = 0;
+      let hi = rows.length;
+      while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        const row = rows[mid];
+        if (row && row.top + row.height <= top) lo = mid + 1;
+        else hi = mid;
+      }
+      return Math.min(lo, Math.max(0, rows.length - 1));
+    };
+    const index = at(node.scrollTop);
+    const row = rows[index];
+    if (!resetting.current) anchor.current = row ? { id: row.id, offset: node.scrollTop - row.top } : undefined;
+    const visible = { start: index, end: Math.min(rows.length, at(node.scrollTop + node.clientHeight) + 1) };
+    setViewport((old) => (old.start === visible.start && old.end === visible.end ? old : visible));
+    const next = {
+      start: Math.max(0, index - 5),
+      end: Math.min(rows.length, at(node.scrollTop + node.clientHeight) + 6),
+    };
+    setRange((old) => (old.start === next.start && old.end === next.end ? old : next));
+  }, []);
+  useLayoutEffect(() => {
+    const node = scroller.current;
+    if (!node) return;
+    const point = anchor.current;
+    const row = point && positions.rows.find((item) => item.id === point.id);
+    if (resetPending) {
+      node.scrollTop = 0;
+      anchor.current = undefined;
+      resetting.current = false;
+      setResetPending(false);
+    } else if (row) node.scrollTop = row.top + point.offset;
+    refresh();
+  }, [positions, refresh, resetPending]);
+  useLayoutEffect(() => {
+    const valid = new Set(ids);
+    measure((old) => {
+      if ([...old.keys()].every((key) => valid.has(key))) return old;
+      return new Map([...old].filter(([key]) => valid.has(key)));
+    });
+  }, [ids]);
+  useLayoutEffect(() => {
+    let disposed = false;
+    const observer = new ResizeObserver((entries) => {
+      if (disposed) return;
+      const measured = entries.flatMap((entry) => {
+        const id = (entry.target as HTMLElement).dataset.segmentId;
+        if (!id) {
+          refresh();
+          return [];
+        }
+        const height = Math.ceil(entry.target.getBoundingClientRect().height);
+        return height > 0 ? [{ id, height }] : [];
+      });
+      if (measured.length)
+        measure((old) => {
+          if (measured.every((item) => old.get(item.id) === item.height)) return old;
+          const next = new Map(old);
+          for (const item of measured) next.set(item.id, item.height);
+          return next;
+        });
+    });
+    if (scroller.current) observer.observe(scroller.current);
+    for (const id of ids.slice(range.start, range.end)) {
+      const element = elements.current.get(id);
+      if (element) observer.observe(element);
+    }
+    const focused =
+      pendingFocus.current && elements.current.get(pendingFocus.current)?.querySelector<HTMLElement>(".segment-row");
+    if (focused) {
+      focused.focus({ preventScroll: true });
+      pendingFocus.current = undefined;
+    }
+    return () => {
+      disposed = true;
+      observer.disconnect();
+    };
+  }, [range.start, range.end, ids, refresh]);
+  function jump(index: number, focus = false): void {
+    const row = positions.rows[index];
+    if (!row || !scroller.current) return;
+    if (focus) {
+      const element = elements.current.get(row.id)?.querySelector<HTMLElement>(".segment-row");
+      if (element) element.focus({ preventScroll: true });
+      else pendingFocus.current = row.id;
+    }
+    scroller.current.scrollTop = row.top;
+    refresh();
+  }
+  const reset = useCallback(() => {
+    resetting.current = true;
+    setResetPending(true);
+    if (scroller.current) scroller.current.scrollTop = 0;
+    anchor.current = undefined;
+    refresh();
+  }, [refresh]);
+  return {
+    scroller,
+    elements,
+    positions: positions.rows,
+    totalHeight: positions.total,
+    range,
+    viewport,
+    refresh,
+    jump,
+    reset,
+  };
+}