@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/agent/tool-result-image.tsx

@@ -1,38 +1,6 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react'
+import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react'
 import type { WorkerDeckClient } from '@workerdeck/client'
 
-/**
- * How a row gets the picture the replay refused to send.
- *
- * The sibling of `tool-result-fetch.tsx` and the same shape of seam, because it
- * answers the same shape of question: an opted-in socket delivers a base64
- * `image` part as an `image_ref` — media type, decoded size, and its index in
- * the stored block — and the bytes are fetched over REST by whoever is actually
- * looking at the row. Across a measured corpus that payload was 91% of every
- * tool result and nothing rendered a byte of it.
- *
- * A **context**, not a prop chain, for the variant's reason: the rows are drawn
- * by `terminalBlocks` and by `ToolCallCard`, several layers under whoever holds
- * the session. The default resolves `undefined`, which is exactly right for
- * every surface that never asked (the playground, a fixture, a hand-composed
- * row): `result.images` is only ever set by a replay a renderer opted into, so a
- * row with no loader also has no reference to load. Only `SessionPanel` supplies
- * a real one, because it owns the session's one attach and therefore the only
- * `(seq, toolUseId)` addresses that mean anything.
- */
-
-/** One image part, as the row addresses it: the reducer's entry plus the id of
- * the call it came back from. `sourceSeq` is the entry's **own** — the
- * result-level one is cleared by text hydration, and a reader who pressed "show
- * everything" must still be able to load the screenshot afterwards. */
 export type ToolResultImageRef = {
   toolUseId: string
   sourceSeq: number
@@ -41,22 +9,13 @@ export type ToolResultImageRef = {
   bytes: number
 }
 
-/** Resolves an object URL for the picture, or `undefined` when the gateway will
- * not serve it — a stale address after a dormant wake, a gateway with no such
- * route, a dropped connection. The row draws a box either way. */
 export type ToolResultImageLoader = (ref: ToolResultImageRef) => Promise<string | undefined>
 
 const noop: ToolResultImageLoader = async () => undefined
 
 const ImageContext = createContext<ToolResultImageLoader>(noop)
 
-export function ToolResultImageProvider({
-  value,
-  children,
-}: {
-  value: ToolResultImageLoader | undefined
-  children: ReactNode
-}) {
+export function ToolResultImageProvider({ value, children }: { value: ToolResultImageLoader | undefined; children: ReactNode }) {
   return <ImageContext.Provider value={value ?? noop}>{children}</ImageContext.Provider>
 }
 
@@ -64,31 +23,10 @@ export function useToolResultImageLoader(): ToolResultImageLoader {
   return useContext(ImageContext)
 }
 
-/**
- * Long enough that a fast scrub through an image-heavy session fetches nothing
- * it flew past, short enough to be invisible to a reader who stopped.
- *
- * There is no second visibility system here on purpose: the transcript is
- * virtualized, so a *mounted* row is by definition within an overscan of the
- * viewport — the virtualizer already is the IntersectionObserver, and a second
- * answer to a question that has one is how the two disagree.
- */
 const MOUNT_SETTLE_MS = 150
 
 export type ToolResultImageState = { src?: string; failed: boolean }
 
-/**
- * One box's load, for either theme.
- *
- * Fires once the row has been mounted for {@link MOUNT_SETTLE_MS}, and then
- * **runs to completion** — an aborted fetch re-pays the whole image on the
- * return visit, and the gateway is HTTP/1.1, so the browser's per-origin
- * connection cap is the concurrency throttle for free.
- *
- * The effect keys on the address's *primitives*, never on the ref object: the
- * reducer replaces items on every streamed delta, so an object-identity dep
- * would re-run this on every token of the turn after it.
- */
 export function useToolResultImageSrc(ref: ToolResultImageRef): ToolResultImageState {
   const load = useToolResultImageLoader()
   const [state, setState] = useState<ToolResultImageState>({ failed: false })
@@ -99,10 +37,14 @@ export function useToolResultImageSrc(ref: ToolResultImageRef): ToolResultImageS
     const timer = setTimeout(() => {
       load({ toolUseId, sourceSeq, partIndex, mediaType, bytes })
         .then((src) => {
-          if (live) setState({ src, failed: src === undefined })
+          if (live) {
+            setState({ src, failed: src === undefined })
+          }
         })
         .catch(() => {
-          if (live) setState({ failed: true })
+          if (live) {
+            setState({ failed: true })
+          }
         })
     }, MOUNT_SETTLE_MS)
     return () => {
@@ -113,63 +55,41 @@ export function useToolResultImageSrc(ref: ToolResultImageRef): ToolResultImageS
   return state
 }
 
-/** ~64 MB of decoded pictures held at once. At the corpus's 335 KB median that
- * is ~190 images, which no viewport holds; the budget exists so a session
- * scrolled end to end does not pin every screenshot it passed. */
 const CACHE_BUDGET_BYTES = 64 * 1024 * 1024
 
 type Entry = { pending: Promise<string | undefined>; url?: string; bytes: number }
 
-/**
- * `useHostImage`'s shape, generalized to the replay route — and **bounded**,
- * which `useHostImage` is not.
- *
- * The promise-per-key cache is what makes this callable from a transcript row at
- * all: rows re-render on every streamed delta, and an uncached resolver would
- * re-fetch each time. The LRU is the part that is new. Object URLs pin their
- * blob until revoked, so a fully-scrolled hundred-image session would otherwise
- * hold ~50 MB until the panel unmounted — and evicting means revoking, or the
- * eviction frees a `Map` entry and nothing else.
- *
- * Re-fetching on a return scroll is fine, and is the whole design: the bytes are
- * one authenticated request away, which is precisely what makes it cheap not to
- * have shipped them in the attach.
- */
-export function useToolResultImages(
-  client: WorkerDeckClient,
-  sessionId: string | undefined,
-): ToolResultImageLoader {
+export function useToolResultImages(client: WorkerDeckClient, sessionId: string | undefined): ToolResultImageLoader {
   const cache = useRef(new Map<string, Entry>())
   useEffect(
     () => () => {
-      for (const entry of cache.current.values()) if (entry.url) URL.revokeObjectURL(entry.url)
+      for (const entry of cache.current.values()) {
+        if (entry.url) {
+          URL.revokeObjectURL(entry.url)
+        }
+      }
       cache.current.clear()
     },
     [],
   )
   return useCallback(
     (ref: ToolResultImageRef) => {
-      if (!sessionId) return Promise.resolve(undefined)
-      // The whole address, because every part of it can change under a row that
-      // is still on screen: a dormant wake restarts the seqs, and a cached
-      // address that outlived its log must miss rather than serve another
-      // call's pixels.
+      if (!sessionId) {
+        return Promise.resolve(undefined)
+      }
       const key = `${sessionId}:${ref.sourceSeq}:${ref.toolUseId}:${ref.partIndex}`
       const hit = cache.current.get(key)
       if (hit) {
-        // Re-inserting is the "recently used" half of the LRU: `Map` iterates in
-        // insertion order, so eviction reads oldest-first for free.
         cache.current.delete(key)
         cache.current.set(key, hit)
         return hit.pending
       }
-      // Fetched rather than pointed at: a bare `<img src>` at the gateway
-      // carries a credential in exactly one of four clients (the dashboard's
-      // same-origin host), and a broken icon in the other three.
       const pending = client
         .toolResultImage(sessionId, ref.sourceSeq, ref.toolUseId, ref.partIndex)
         .then((blob) => {
-          if (blob.size === 0) return undefined
+          if (blob.size === 0) {
+            return undefined
+          }
           const url = URL.createObjectURL(blob)
           const entry = cache.current.get(key)
           if (entry) {
@@ -177,15 +97,11 @@ export function useToolResultImages(
             entry.bytes = blob.size
             evict(cache.current, key)
           } else {
-            // Evicted (or unmounted) while in flight — nothing will ever draw
-            // this, and an unrevoked URL is the leak the budget exists to stop.
             URL.revokeObjectURL(url)
           }
           return url
         })
         .catch(() => undefined)
-      // The declared size is what the budget counts until the bytes land: a
-      // hundred fetches in flight must not all read as free.
       cache.current.set(key, { pending, bytes: ref.bytes })
       return pending
     },
@@ -193,16 +109,21 @@ export function useToolResultImages(
   )
 }
 
-/** Drop oldest-first until the held bytes fit the budget, revoking as it goes.
- * `keep` is the entry just resolved — evicting the picture a row is about to
- * draw would be a fetch spent on nothing. */
 function evict(cache: Map<string, Entry>, keep: string): void {
   let held = 0
-  for (const entry of cache.values()) held += entry.bytes
+  for (const entry of cache.values()) {
+    held += entry.bytes
+  }
   for (const [key, entry] of cache) {
-    if (held <= CACHE_BUDGET_BYTES) return
-    if (key === keep) continue
-    if (entry.url) URL.revokeObjectURL(entry.url)
+    if (held <= CACHE_BUDGET_BYTES) {
+      return
+    }
+    if (key === keep) {
+      continue
+    }
+    if (entry.url) {
+      URL.revokeObjectURL(entry.url)
+    }
     cache.delete(key)
     held -= entry.bytes
   }

package/src/components/agent/transcript-rows.ts

@@ -1,114 +1,58 @@
-/**
- * The virtual row model: what one row of the transcript's virtual list *is*,
- * and the two rules everything positional must go through — which item a row
- * is spaced as, and how an item index maps onto a row index. Pure; shared by
- * the transcript shell and its hooks.
- */
 import type { TranscriptItem } from '@workerdeck/react'
-import { needsBlank, type TerminalBlock } from '../terminal/items.tsx'
+import { needsBlank, type TerminalBlock } from '../terminal/blocks.ts'
 
-/** One row of the virtual list: a {@link TerminalBlock} (a transcript item,
- * — under the terminal theme — a folded run of tool calls, or a task block
- * standing for a `Task` call and everything its subagent produced), or the
- * recap boundary line spliced in at `catchUp.from`. One flat array so the
- * virtualizer sees stable indices, and each row carries the key the item was
- * already React-keyed by — measurements are cached per key, so a row keeps its
- * measured height when the recap splice shifts every index after it. */
-export type TranscriptRow =
-  | TerminalBlock
-  | { key: 'recap'; line: string }
-  /** The sub-agent's brief, spliced in as the takeover frame's first row — what
-   * the agent was asked, before what it did. Synthetic like the recap row and
-   * for the same reason: it is not a transcript item (the engine puts the
-   * instruction in the spawning call's `prompt`, never in the stream), but it
-   * has to be a row so the virtualizer can size and key it. */
-  | { key: 'brief'; text: string }
+const absorbedCache = new WeakMap<readonly TranscriptRow[], Map<number, number>>()
+const positionCache = new WeakMap<readonly TranscriptRow[], Map<number, RowPosition>>()
+
+export type TranscriptRow = TerminalBlock | { key: 'recap'; line: string } | { key: 'brief'; text: string }
 
-/** The item a row is spaced *as*. A run stands for the calls it folded, and a
- * task block for the `Task` call it absorbed into — all tool calls, so a run,
- * a task and a lone tool call below them still read as one block. */
 export function rowItem(row: TranscriptRow | undefined): TranscriptItem | undefined {
-  if (!row) return undefined
-  if ('item' in row) return row.item
-  if ('run' in row) return row.run[0]
-  if ('task' in row) return row.task
+  if (!row) {
+    return undefined
+  }
+  if ('item' in row) {
+    return row.item
+  }
+  if ('run' in row) {
+    return row.run[0]
+  }
+  if ('task' in row) {
+    return row.task
+  }
   return undefined
 }
 
-/**
- * Does a blank line go above this row, in the terminal theme?
- *
- * The recap row always earns one — it is a boundary, and a boundary flush
- * against the row above reads as part of it. Otherwise the pair decides
- * (`needsBlank`): consecutive tool calls are one block in the CLI and get none.
- */
 export function gapBefore(rows: TranscriptRow[], index: number): boolean {
   const before = rowItem(rows[index - 1])
   const after = rowItem(rows[index])
-  if (!before || !after) return true
+  if (!before || !after) {
+    return true
+  }
   return needsBlank(before, after)
 }
 
-/**
- * Which items each task block absorbed, as itemIndex → rowIndex — the one
- * lookup {@link rowIndexForItem} cannot answer from ordering (see its comment).
- * Memoized per rows array identity: the shell builds `rows` in a `useMemo`, so
- * within one row list this is built once, and a WeakMap means a discarded list
- * takes its map with it. Memoization only — the answer is a pure function of
- * the array.
- */
-const absorbedCache = new WeakMap<readonly TranscriptRow[], Map<number, number>>()
-
 function absorbedRows(rows: readonly TranscriptRow[]): Map<number, number> {
   const hit = absorbedCache.get(rows)
-  if (hit) return hit
+  if (hit) {
+    return hit
+  }
   const map = new Map<number, number>()
   rows.forEach((row, rowIndex) => {
-    if ('task' in row) for (const itemIndex of row.childIndices) map.set(itemIndex, rowIndex)
+    if ('task' in row) {
+      for (const itemIndex of row.childIndices) {
+        map.set(itemIndex, rowIndex)
+      }
+    }
   })
   absorbedCache.set(rows, map)
   return map
 }
 
-/**
- * Transcript-item index → virtual-row index — **the off-by-a-fold trap.**
- *
- * The virtualizer's rows are {@link TerminalBlock}s, not items: a folded tool
- * run occupies ONE row for `run.length` consecutive items, a task block
- * occupies ONE row for its `Task` call *plus every item its subagent produced*,
- * and the recap boundary is a row with *no* item index at all, shifting every
- * row after it by one. `virtualizer.scrollToIndex(itemIndex)` is therefore
- * wrong by construction on any folded or spliced transcript — every jump that
- * starts from an item (the scrubber's marks, a future bookmark) must come
- * through here first.
- *
- * The contract, in two halves:
- *
- * - An index a task block **absorbed** maps to that block's row, wherever the
- *   child fell in the stream. Subagents run in parallel, so absorbed indices
- *   interleave arbitrarily with later rows' starts — no ordering argument can
- *   find their row, which is why they are answered first, from a per-row-list
- *   map ({@link absorbedRows}) built once per rows array. A row's coverage is
- *   its `childIndices`, never `[index, index + N)` arithmetic.
- * - Every other index maps to the **last non-recap row whose start (`index`)
- *   is ≤ the target** — the original rule, still a binary search. Rows stay
- *   ordered by `index`, and the ordering argument is now: between one row's
- *   start and the next row's, every index is either absorbed (answered above)
- *   or a member of the earlier row — note that is *weaker* than the old
- *   contiguity claim, because a run can fold across an absorbed gap (two
- *   top-level calls separated only by a subagent's step are adjacent on
- *   screen), so `[index, index + run.length)` arithmetic no longer describes
- *   a run's coverage; membership does. The recap row is skipped by giving it
- *   its successor's start for navigation (both qualify at the boundary, and
- *   "last wins" lands on the real row) while never letting it be the answer.
- *
- * Exhaustively checked against a linear reference — every fixture × every item
- * index × several splice positions — by `__wdCheckMapping` in `dev/App.tsx`,
- * and against constructed interleavings in `test/transcript-rows.test.ts`.
- */
 export function rowIndexForItem(rows: readonly TranscriptRow[], itemIndex: number): number {
   const absorbed = absorbedRows(rows).get(itemIndex)
-  if (absorbed !== undefined) return absorbed
+  if (absorbed !== undefined) {
+    return absorbed
+  }
   let lo = 0
   let hi = rows.length - 1
   let best = 0
@@ -116,13 +60,16 @@ export function rowIndexForItem(rows: readonly TranscriptRow[], itemIndex: numbe
     const mid = (lo + hi) >> 1
     const row = rows[mid]!
     let start: number
-    if ('index' in row) start = row.index
-    else {
+    if ('index' in row) {
+      start = row.index
+    } else {
       const next = rows[mid + 1]
       start = next && 'index' in next ? next.index : Number.MAX_SAFE_INTEGER
     }
     if (start <= itemIndex) {
-      if ('index' in row) best = mid
+      if ('index' in row) {
+        best = mid
+      }
       lo = mid + 1
     } else {
       hi = mid - 1
@@ -131,15 +78,13 @@ export function rowIndexForItem(rows: readonly TranscriptRow[], itemIndex: numbe
   return best
 }
 
-/** Where an item sits inside a row it shares with other items: its 0-based
- * ordinal in stream order, out of `count` siblings. `0 ≤ ordinal < count`. */
 export type RowPosition = { ordinal: number; count: number }
 
-const positionCache = new WeakMap<readonly TranscriptRow[], Map<number, RowPosition>>()
-
 function rowPositions(rows: readonly TranscriptRow[]): Map<number, RowPosition> {
   const hit = positionCache.get(rows)
-  if (hit) return hit
+  if (hit) {
+    return hit
+  }
   const map = new Map<number, RowPosition>()
   for (const row of rows) {
     if ('task' in row) {
@@ -154,28 +99,6 @@ function rowPositions(rows: readonly TranscriptRow[]): Map<number, RowPosition>
   return map
 }
 
-/**
- * Where an item sits inside a row that holds MORE than itself — a task block's
- * absorbed child, or a member of a folded run of two or more. `undefined` for
- * everything else, including a row's own head item (the `Task` call, a run's
- * first member is *not* exempt) and a **singleton run**: there the row's extent
- * IS the item's, and a mark spanning it is honest.
- *
- * That carve-out is load-bearing rather than tidy: `pushLeaf` makes *every*
- * top-level tool call a `RunBlock`, usually of length 1, so without it every
- * ordinary failed call's scrubber mark would shrink from its row's extent to a
- * tick and the rail would stop reading as a map — a regression traded for a fix.
- *
- * The scrubber is the consumer: a mark for a shared-row item anchors at
- * `ordinal / count` of the row's *measured* height instead of inheriting an
- * extent that is mostly other items' work (one failed child of a hundred-call
- * task painted the whole expanded block red). Memoized per rows array identity
- * exactly like {@link absorbedRows}, and pure — the answer is a function of the
- * array alone, and a discarded array takes its map with it.
- */
-export function positionInRow(
-  rows: readonly TranscriptRow[],
-  itemIndex: number,
-): RowPosition | undefined {
+export function positionInRow(rows: readonly TranscriptRow[], itemIndex: number): RowPosition | undefined {
   return rowPositions(rows).get(itemIndex)
 }

package/src/components/agent/transcript-variant.tsx

@@ -1,35 +1,10 @@
 import { createContext, useContext, type ReactNode } from 'react'
 
-/**
- * How the transcript draws a turn.
- *
- * - `cards` — the chat convention: bubbles, bordered tool cards, generous gaps.
- *   Right for a wide dashboard where the transcript is the page.
- * - `terminal` — the CLI's own form: every row on a character cell, no boxes
- *   anywhere, diffs as full-width bands. Right where the transcript sits beside
- *   a terminal (a VS Code dock) and where vertical space is scarce.
- *
- * `terminal` is **not** a second set of branches in the components under
- * `components/agent/`: it is its own renderer (`components/terminal/`) that the
- * shell mounts *instead* of them. So a row component here never asks which
- * variant it is in — if it is drawing at all, it is drawing cards.
- *
- * A context rather than a prop chain because the pieces that DO need it sit
- * outside the transcript (the composer, the pending prompts) and because
- * `Message`/`ToolCallCard` are exported on their own, so an embedder composing
- * them by hand gets the right treatment for free.
- */
 export type TranscriptVariant = 'cards' | 'terminal'
 
 const VariantContext = createContext<TranscriptVariant>('cards')
 
-export function TranscriptVariantProvider({
-  value,
-  children,
-}: {
-  value: TranscriptVariant
-  children: ReactNode
-}) {
+export function TranscriptVariantProvider({ value, children }: { value: TranscriptVariant; children: ReactNode }) {
   return <VariantContext.Provider value={value}>{children}</VariantContext.Provider>
 }
 
@@ -37,33 +12,11 @@ export function useTranscriptVariant(): TranscriptVariant {
   return useContext(VariantContext)
 }
 
-/**
- * How much room the transcript gives each row.
- *
- * - `comfortable` — a blank line between messages, which is what the Claude Code
- *   CLI does. The default: a transcript is prose before it is a table.
- * - `compact` — rows tight against each other, for a dock where every line of
- *   vertical space is contested.
- *
- * Separate from the variant, and deliberately: they answer different questions.
- * The variant decides *how a row is drawn* and follows from the surface; density
- * decides *how much air is around it* and is a preference the reader holds.
- *
- * Reaches `cards` only. The terminal theme's spacing is a blank *line*, decided
- * per pair of blocks by `needsBlank` — a terminal has one line height, which is
- * the whole premise — so there is nothing there for this to turn.
- */
 export type TranscriptDensity = 'comfortable' | 'compact'
 
 const DensityContext = createContext<TranscriptDensity>('comfortable')
 
-export function TranscriptDensityProvider({
-  value,
-  children,
-}: {
-  value: TranscriptDensity
-  children: ReactNode
-}) {
+export function TranscriptDensityProvider({ value, children }: { value: TranscriptDensity; children: ReactNode }) {
   return <DensityContext.Provider value={value}>{children}</DensityContext.Provider>
 }
 
@@ -71,39 +24,9 @@ export function useTranscriptDensity(): TranscriptDensity {
   return useContext(DensityContext)
 }
 
-/**
- * The typeface the panel runs in.
- *
- * `sans` is the host's UI font; `mono` repoints the sans token at the mono stack
- * for the panel's subtree (see the `[data-agent-font='mono']` rule in
- * `theme.css`), so the transcript reads as part of a terminal rather than as a
- * web app beside one.
- *
- * No context and no hook, unlike variant and density: nothing branches on it in
- * JS. It is one attribute on the panel root and the cascade does the rest, which
- * is also what keeps it from leaking past the panel.
- */
 export type TranscriptFont = 'sans' | 'mono'
 
-/**
- * The gap between two rows, per variant and density — the whole of the density
- * feature, since it is the only vertical spacing between rows that exists.
- *
- * `className` goes on the **measured** wrapper (see `Transcript`), so the gap is
- * part of each row's measured height and no pixel constant is load-bearing.
- * `px` is fed to `estimateSize` alone, where being approximate is the contract:
- * it sets the scrollbar's length before rows mount and is replaced by a real
- * measurement the moment one does.
- */
-export const ROW_GAP: Record<
-  TranscriptVariant,
-  Record<TranscriptDensity, { className?: string; px: number }>
-> = {
-  // The terminal theme has no gap scale: the space between blocks is a **blank
-  // line**, decided per pair by `needsBlank` (a tool call and its output get
-  // none), so it is a class the shell applies conditionally rather than a
-  // constant it applies to every row. Density does not reach it — a terminal
-  // has one line height, which is the whole premise.
+export const ROW_GAP: Record<TranscriptVariant, Record<TranscriptDensity, { className?: string; px: number }>> = {
   terminal: {
     comfortable: { className: 'term-row-gap', px: 18 },
     compact: { className: 'term-row-gap', px: 18 },

package/src/components/agent/use-height-epoch.ts

@@ -1,22 +1,8 @@
-/**
- * The height epoch: one cache generation of computed row heights (terminal
- * theme only — cards have no calculator and keep the flat estimate). Owned by
- * the transcript shell because it owns the virtualizer the heights feed; the
- * WeakMap inside self-invalidates through the reducer's replace-on-mutation,
- * and the epoch itself is replaced wholesale when the wrap width or the cell
- * changes. Measured off the rows container: it *is* the width rows wrap in
- * (the scroller can resize without it moving — `ConversationContent` caps at
- * 48rem — and the window never hears about a splitter drag), and it inherits
- * the surface's font, which is what makes the `ch` probe honest. All DOM
- * reads happen in the effect, debounced; render never touches layout.
- */
 import { useEffect, useState, type RefObject } from 'react'
 import { createHeightEpoch, measureCh, type HeightEpoch } from '../terminal/height.ts'
 
 export function useHeightEpoch(options: {
   terminal: boolean
-  /** The terminal cell, when the host set one — only read as a signal that the
-   * epoch must re-measure; the epoch's numbers come from the DOM. */
   fontSize?: number
   lineHeight?: number
   rowsRef: RefObject<HTMLDivElement | null>
@@ -24,17 +10,21 @@ export function useHeightEpoch(options: {
   const { terminal, fontSize, lineHeight, rowsRef } = options
   const [epoch, setEpoch] = useState<HeightEpoch | null>(null)
   useEffect(() => {
-    if (!terminal) return
+    if (!terminal) {
+      return
+    }
     const element = rowsRef.current
-    if (!element) return
+    if (!element) {
+      return
+    }
     let timer: ReturnType<typeof setTimeout> | undefined
     const measure = () => {
-      const line = Number.parseFloat(
-        getComputedStyle(element).getPropertyValue('--term-line'),
-      )
+      const line = Number.parseFloat(getComputedStyle(element).getPropertyValue('--term-line'))
       const width = element.clientWidth
       const ch = measureCh(element)
-      if (!line || !width || !ch) return
+      if (!line || !width || !ch) {
+        return
+      }
       setEpoch((previous) =>
         previous && previous.width === width && previous.ch === ch && previous.line === line
           ? previous
@@ -51,10 +41,6 @@ export function useHeightEpoch(options: {
       observer.disconnect()
       clearTimeout(timer)
     }
-    // fontSize/lineHeight: a cell change re-renders every row, which usually
-    // moves the container's size and fires the observer — but a transcript
-    // whose height happens to survive the change would keep a stale `ch`, so
-    // the props re-arm the measurement directly.
   }, [terminal, fontSize, lineHeight, rowsRef])
   return epoch
 }