@three-flatland/devtools 0.1.0-alpha.3 → 1.0.0-alpha.6

package/dist/dashboard/panels/protocol-log.tsx

@@ -28,6 +28,7 @@ import type { DebugMessage } from 'three-flatland/debug-protocol'
 import { getClient } from '../client.js'
 import { exportSession } from '../export.js'
 import { useDevtoolsState } from '../hooks.js'
+import { getFrameCursor, setFrameCursor } from '../frame-cursor.js'
 import { getProtocolStore, type LogEntry } from '../protocol-store.js'
 
 const ROW_HEIGHT = 22
@@ -64,8 +65,12 @@ export function ProtocolLog() {
   const [hoveredId, setHoveredId] = useState<number | null>(null)
 
   const [tail, setTail] = useState(true)
+  // Time-travel cursor (#29 Phase A): parked wins over tail — the log
+  // stops following new entries while the user inspects a past frame.
+  const frameCursor = getFrameCursor()
+  const effectiveTail = tail && frameCursor === null
   const tailRef = useRef(true)
-  tailRef.current = tail
+  tailRef.current = effectiveTail
 
   const scrollerRef = useRef<HTMLDivElement | null>(null)
   const filterInputRef = useRef<HTMLInputElement | null>(null)
@@ -75,6 +80,62 @@ export function ProtocolLog() {
   const pendingBumpRef = useRef(0)
   const [viewport, setViewport] = useState({ scrollTop: 0, height: 0 })
 
+  // Parked cursor → scroll to the row whose frame is closest ≤ the
+  // cursor (nearest-frame semantics: data batches at ~4 Hz, engine
+  // frames at 60 Hz — most frames have no exact row). Only rows in the
+  // tail cache are scanned; deeper history scrolls in as it hydrates.
+  const parkedCursorRef = useRef<{ providerId: string | null; frame: number | null }>({
+    providerId: null,
+    frame: null,
+  })
+  useEffect(() => {
+    // Key the parked cursor by provider AND frame: switching producers while
+    // both are parked on the same frame number must still re-scroll.
+    const sameCursor =
+      parkedCursorRef.current.providerId === activeProviderId && parkedCursorRef.current.frame === frameCursor
+    if (frameCursor === null || sameCursor) {
+      parkedCursorRef.current = { providerId: activeProviderId, frame: frameCursor }
+      return
+    }
+    parkedCursorRef.current = { providerId: activeProviderId, frame: frameCursor }
+    if (activeProviderId === null) return
+    const { total, ids } = store.statsFor(activeProviderId)
+    let matched = false
+    for (let i = 0; i < total; i++) {
+      const id = ids[total - 1 - i]
+      if (id === undefined) continue
+      const entry = store.peek(activeProviderId, id)
+      if (entry?.frame !== undefined && entry.frame <= frameCursor) {
+        const el = scrollerRef.current
+        if (el !== null) el.scrollTop = i * ROW_HEIGHT
+        matched = true
+        break
+      }
+    }
+    if (!matched) {
+      // Older than the tail cache — locate the row through IDB, then
+      // scroll if the cursor hasn't moved on while we were reading.
+      const target = frameCursor
+      const provider = activeProviderId
+      void store
+        .queryFiltered(provider, (entry) => entry.frame !== undefined && entry.frame <= target)
+        .then((matchedIds) => {
+          if (parkedCursorRef.current.providerId !== provider || parkedCursorRef.current.frame !== target) return
+          const lastId = matchedIds[matchedIds.length - 1]
+          if (lastId === undefined) return
+          const { total: t, ids: allIds } = store.statsFor(provider)
+          for (let i = 0; i < t; i++) {
+            if (allIds[t - 1 - i] === lastId) {
+              const el = scrollerRef.current
+              if (el !== null) el.scrollTop = i * ROW_HEIGHT
+              break
+            }
+          }
+        })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [frameCursor, activeProviderId])
+
   // Wire the raw-message tap → store. The store owns IDB persistence,
   // counters, cache + eviction; this listener translates raw messages
   // to log rows AND tags each with whichever provider was selected at
@@ -195,10 +256,7 @@ export function ProtocolLog() {
     minBytes,
     excluded: excludedTypes,
   }
-  const hasActiveFilter = needle.length > 0
-    || dirFilter !== null
-    || minBytes > 0
-    || excludedTypes.size > 0
+  const hasActiveFilter = needle.length > 0 || dirFilter !== null || minBytes > 0 || excludedTypes.size > 0
 
   // Filter pipeline is authoritative — when a filter is active, we
   // query IDB directly via the store's `queryFiltered` cursor. Query
@@ -223,23 +281,19 @@ export function ProtocolLog() {
     const signal = { aborted: false }
     const predicate = filterPredicateRef.current!
     setFilterLoading(true)
-    const handle = (globalThis.setTimeout as unknown as (cb: () => void, ms: number) => number)(
-      () => {
-        void store.queryFiltered(activeProviderId, predicate, signal).then((result) => {
-          if (signal.aborted) return
-          setFilteredIds(result)
-          setFilterLoading(false)
-        })
-      },
-      150,
-    )
+    const handle = (globalThis.setTimeout as unknown as (cb: () => void, ms: number) => number)(() => {
+      void store.queryFiltered(activeProviderId, predicate, signal).then((result) => {
+        if (signal.aborted) return
+        setFilteredIds(result)
+        setFilterLoading(false)
+      })
+    }, 150)
     return () => {
       signal.aborted = true
       clearTimeout(handle)
     }
     // Filter primitives as deps; `filterPredicateRef.current` is read
     // inside but kept stable against renders via the ref.
-     
   }, [store, activeProviderId, hasActiveFilter, needle, dirFilter, minBytes, excludedTypes])
 
   // Live-append: when a new message matches the active filter, extend
@@ -275,7 +329,10 @@ export function ProtocolLog() {
     let visualIdx = 0
     if (selectedId !== null) {
       for (let i = 0; i < total; i++) {
-        if (ids[total - 1 - i] === selectedId) { visualIdx = i; break }
+        if (ids[total - 1 - i] === selectedId) {
+          visualIdx = i
+          break
+        }
       }
     }
     const nextIdx = Math.max(0, Math.min(total - 1, visualIdx + delta))
@@ -294,7 +351,10 @@ export function ProtocolLog() {
     }
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        if (selectedId !== null) { setSelectedId(null); e.preventDefault() }
+        if (selectedId !== null) {
+          setSelectedId(null)
+          e.preventDefault()
+        }
         return
       }
       if (isTypingTarget(e.target)) return
@@ -325,8 +385,8 @@ export function ProtocolLog() {
 
   // Window-scope prefetch (unfiltered case). When filter is active the
   // bulk prefetch above covers it.
-  const startId = end > 0 && total > 0 ? ids[Math.max(0, total - end)] ?? 0 : 0
-  const endId = total > 0 ? ids[Math.max(0, total - 1 - start)] ?? 0 : 0
+  const startId = end > 0 && total > 0 ? (ids[Math.max(0, total - end)] ?? 0) : 0
+  const endId = total > 0 ? (ids[Math.max(0, total - 1 - start)] ?? 0) : 0
   useEffect(() => {
     if (hasActiveFilter) return
     if (activeProviderId === null || startId === 0 || startId > endId) return
@@ -334,7 +394,10 @@ export function ProtocolLog() {
     for (let i = start; i < end; i++) {
       const id = ids[total - 1 - i]
       if (id === undefined) continue
-      if (store.peek(activeProviderId, id) === null) { needsFetch = true; break }
+      if (store.peek(activeProviderId, id) === null) {
+        needsFetch = true
+        break
+      }
     }
     if (needsFetch) void store.prefetchRange(activeProviderId, startId, endId)
   }, [store, activeProviderId, hasActiveFilter, startId, endId, start, end, total, ids])
@@ -351,16 +414,24 @@ export function ProtocolLog() {
   // Selection follows the active provider. Swapping providers clears
   // any cross-provider selection.
   useEffect(() => {
-    if (selectedId === null || activeProviderId === null) { setSelectedEntry(null); return }
+    if (selectedId === null || activeProviderId === null) {
+      setSelectedEntry(null)
+      return
+    }
     const cached = store.peek(activeProviderId, selectedId)
-    if (cached !== null) { setSelectedEntry(cached); return }
+    if (cached !== null) {
+      setSelectedEntry(cached)
+      return
+    }
     let cancelled = false
     void store.prefetchRange(activeProviderId, selectedId, selectedId).then(() => {
       if (cancelled) return
       const fetched = store.peek(activeProviderId, selectedId)
       if (fetched !== null) setSelectedEntry(fetched)
     })
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+    }
   }, [store, activeProviderId, selectedId])
   const selected = selectedEntry
 
@@ -418,11 +489,7 @@ export function ProtocolLog() {
         <div class="protocol-filter-menu-wrap" ref={filterMenuRef}>
           <button
             type="button"
-            class={
-              (minBytes > 0 || excludedTypes.size > 0
-                ? 'protocol-btn protocol-btn-on'
-                : 'protocol-btn')
-            }
+            class={minBytes > 0 || excludedTypes.size > 0 ? 'protocol-btn protocol-btn-on' : 'protocol-btn'}
             onClick={() => setFilterMenuOpen((o) => !o)}
             title="Type + size filters"
           >
@@ -510,7 +577,17 @@ export function ProtocolLog() {
                     type="button"
                     class={cls}
                     style={{ transform: `translateY(${offsetTop}px)`, height: `${ROW_HEIGHT}px` }}
-                    onClick={isPlaceholder ? undefined : () => setSelectedId((x) => (x === id ? null : id))}
+                    onClick={
+                      isPlaceholder
+                        ? undefined
+                        : () => {
+                            setSelectedId((x) => (x === id ? null : id))
+                            // Entry point per the time-travel design:
+                            // clicking a row parks the cursor at its frame.
+                            const frame = e!.frame
+                            if (frame !== undefined) setFrameCursor(frame)
+                          }
+                    }
                     onMouseEnter={isPlaceholder ? undefined : () => setHoveredId(id)}
                     onMouseLeave={isPlaceholder ? undefined : () => setHoveredId((h) => (h === id ? null : h))}
                     title={isPlaceholder ? undefined : new Date(e!.at).toISOString()}
@@ -520,7 +597,7 @@ export function ProtocolLog() {
                     <span class="protocol-time">{isLoading ? 'loading…' : formatTime(e!.at)}</span>
                     <span class="protocol-frame">{!isPlaceholder && e!.frame !== undefined ? `#${e!.frame}` : ''}</span>
                     <span class="protocol-type">{isPlaceholder ? '' : e!.type}</span>
-                    <span class="protocol-tag">{isPlaceholder ? '' : e!.tag ?? ''}</span>
+                    <span class="protocol-tag">{isPlaceholder ? '' : (e!.tag ?? '')}</span>
                     <span class="protocol-size">{isPlaceholder ? '' : formatBytes(e!.bytes)}</span>
                   </button>
                 )
@@ -536,12 +613,9 @@ export function ProtocolLog() {
                 {selected.type}
                 {selected.tag !== undefined && <span class="protocol-tag"> · {selected.tag}</span>}
               </span>
-              <button
-                type="button"
-                class="protocol-btn"
-                onClick={() => setSelectedId(null)}
-                aria-label="Close detail"
-              >×</button>
+              <button type="button" class="protocol-btn" onClick={() => setSelectedId(null)} aria-label="Close detail">
+                ×
+              </button>
             </div>
             <div class="protocol-detail-meta">
               <span>{formatTime(selected.at)}</span>
@@ -612,7 +686,9 @@ function FilterMenu({
               type="button"
               class="protocol-btn protocol-filter-menu-clear"
               onClick={() => setExcludedTypes(new Set())}
-            >reset</button>
+            >
+              reset
+            </button>
           )}
         </div>
         <ul class="protocol-filter-types">
@@ -622,11 +698,7 @@ function FilterMenu({
             types.map((t) => (
               <li key={t}>
                 <label class="protocol-filter-type">
-                  <input
-                    type="checkbox"
-                    checked={!excludedTypes.has(t)}
-                    onChange={() => toggle(t)}
-                  />
+                  <input type="checkbox" checked={!excludedTypes.has(t)} onChange={() => toggle(t)} />
                   <span>{t}</span>
                 </label>
               </li>
@@ -671,14 +743,29 @@ function estimateBytes(msg: DebugMessage): number {
   const seen = new WeakSet<object>()
   const walk = (v: unknown): void => {
     if (v === null || v === undefined) return
-    if (typeof v === 'string') { bytes += v.length; return }
-    if (typeof v === 'number' || typeof v === 'boolean') { bytes += 8; return }
-    if (v instanceof ArrayBuffer) { bytes += v.byteLength; return }
-    if (ArrayBuffer.isView(v)) { bytes += v.byteLength; return }
+    if (typeof v === 'string') {
+      bytes += v.length
+      return
+    }
+    if (typeof v === 'number' || typeof v === 'boolean') {
+      bytes += 8
+      return
+    }
+    if (v instanceof ArrayBuffer) {
+      bytes += v.byteLength
+      return
+    }
+    if (ArrayBuffer.isView(v)) {
+      bytes += v.byteLength
+      return
+    }
     if (typeof v === 'object') {
       if (seen.has(v)) return
       seen.add(v)
-      if (Array.isArray(v)) { for (const x of v) walk(x); return }
+      if (Array.isArray(v)) {
+        for (const x of v) walk(x)
+        return
+      }
       for (const k in v as Record<string, unknown>) {
         bytes += k.length
         walk((v as Record<string, unknown>)[k])
@@ -703,11 +790,15 @@ function formatTime(at: number): string {
 
 function stringify(msg: DebugMessage): string {
   try {
-    return JSON.stringify(msg, (_k, v) => {
-      if (v instanceof ArrayBuffer) return `[ArrayBuffer ${v.byteLength}B]`
-      if (ArrayBuffer.isView(v)) return `[${v.constructor.name} ${v.byteLength}B]`
-      return v as unknown
-    }, 2)
+    return JSON.stringify(
+      msg,
+      (_k, v) => {
+        if (v instanceof ArrayBuffer) return `[ArrayBuffer ${v.byteLength}B]`
+        if (ArrayBuffer.isView(v)) return `[${v.constructor.name} ${v.byteLength}B]`
+        return v as unknown
+      },
+      2
+    )
   } catch {
     return '[unserialisable]'
   }
@@ -722,10 +813,7 @@ function stringify(msg: DebugMessage): string {
  * arbitrary markup from message payloads.
  */
 function highlightJson(json: string): string {
-  const escaped = json
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
+  const escaped = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
   return escaped.replace(
     /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g,
     (match) => {
@@ -738,6 +826,6 @@ function highlightJson(json: string): string {
         cls = 'json-null'
       }
       return `<span class="${cls}">${match}</span>`
-    },
+    }
   )
 }

package/dist/dashboard/panels/registry.tsx

@@ -17,6 +17,7 @@
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import type { RegistryEntrySnapshot } from '../../devtools-client.js'
 import { getClient } from '../client.js'
+import { getFrameCursor } from '../frame-cursor.js'
 import { useDevtoolsState } from '../hooks.js'
 
 const ROW_STRIDE = 8
@@ -43,7 +44,9 @@ export function RegistryPanel() {
   // Opt into the unfiltered drain on mount; reset on unmount.
   useEffect(() => {
     client.setRegistry(null)
-    return () => { client.setRegistry([]) }
+    return () => {
+      client.setRegistry([])
+    }
   }, [client])
 
   const entries = useMemo(() => {
@@ -53,15 +56,17 @@ export function RegistryPanel() {
   }, [state.registry, state.registry.size])
 
   const needle = filter.trim().toLowerCase()
-  const visible = needle.length > 0
-    ? entries.filter((e) => e.name.toLowerCase().includes(needle) || (e.label?.toLowerCase().includes(needle) ?? false))
-    : entries
+  const visible =
+    needle.length > 0
+      ? entries.filter(
+          (e) => e.name.toLowerCase().includes(needle) || (e.label?.toLowerCase().includes(needle) ?? false)
+        )
+      : entries
 
-  const effectiveSelected = selected !== null && visible.some((e) => e.name === selected)
-    ? selected
-    : (visible[0]?.name ?? null)
+  const effectiveSelected =
+    selected !== null && visible.some((e) => e.name === selected) ? selected : (visible[0]?.name ?? null)
 
-  const selectedEntry = effectiveSelected !== null ? state.registry.get(effectiveSelected) ?? null : null
+  const selectedEntry = effectiveSelected !== null ? (state.registry.get(effectiveSelected) ?? null) : null
 
   return (
     <section class="panel registry-panel">
@@ -76,6 +81,11 @@ export function RegistryPanel() {
         />
         <span class="registry-count">{entries.length}</span>
       </header>
+      {getFrameCursor() !== null ? (
+        <div class="registry-parked-note">
+          parked — showing the latest registry state (per-frame history needs the Phase C checkpoint snapshots)
+        </div>
+      ) : null}
       <div class="registry-layout">
         <ul class="registry-list">
           {visible.length === 0 ? (
@@ -85,10 +95,7 @@ export function RegistryPanel() {
               <li key={e.name}>
                 <button
                   type="button"
-                  class={
-                    'registry-row' +
-                    (e.name === effectiveSelected ? ' registry-row-selected' : '')
-                  }
+                  class={'registry-row' + (e.name === effectiveSelected ? ' registry-row-selected' : '')}
                   onClick={() => setSelected(e.name)}
                 >
                   <span class="registry-kind">{e.kind}</span>
@@ -139,13 +146,7 @@ function RegistrySparkline({
     if (ctx === null) return
     drawVisualizer(ctx, w, h, entry)
   }, [entry.version, entry.name, width, height])
-  return (
-    <canvas
-      class="registry-sparkline"
-      ref={canvasRef}
-      style={{ width: `${width}px`, height: `${height}px` }}
-    />
-  )
+  return <canvas class="registry-sparkline" ref={canvasRef} style={{ width: `${width}px`, height: `${height}px` }} />
 }
 
 function RegistryDetail({ entry }: { entry: RegistryEntrySnapshot }): preact.JSX.Element {
@@ -171,11 +172,7 @@ function RegistryDetail({ entry }: { entry: RegistryEntrySnapshot }): preact.JSX
   const scrollGridToAxisIdx = (idx: number): void => {
     const el = gridScrollerRef.current
     if (el === null) return
-    const perAxisIdx =
-      entry.kind === 'float2' ? 2 :
-      entry.kind === 'float3' ? 3 :
-      entry.kind === 'float4' ? 4 :
-      1
+    const perAxisIdx = entry.kind === 'float2' ? 2 : entry.kind === 'float3' ? 3 : entry.kind === 'float4' ? 4 : 1
     const scalarIdx = entry.kind === 'bits' ? idx : idx * perAxisIdx
     const rowIdx = Math.floor(scalarIdx / ROW_STRIDE)
     const top = rowIdx * SAMPLE_ROW_HEIGHT
@@ -270,9 +267,7 @@ function RegistryDetail({ entry }: { entry: RegistryEntrySnapshot }): preact.JSX
         <span>v{version}</span>
         <span>{sample.constructor.name}</span>
         {stats.summary !== '' && <span>{stats.summary}</span>}
-        {cursorIdx !== null && (
-          <span class="registry-cursor-label">cursor {cursorIdx}</span>
-        )}
+        {cursorIdx !== null && <span class="registry-cursor-label">cursor {cursorIdx}</span>}
       </div>
       <div class="registry-viz-wrap">
         <div
@@ -289,19 +284,19 @@ function RegistryDetail({ entry }: { entry: RegistryEntrySnapshot }): preact.JSX
         </div>
       </div>
       <div class="registry-detail-body">
-        {sample.length === 0
-          ? <div class="panel-empty">No sample yet.</div>
-          : (
-              <SampleGrid
-                entry={entry}
-                stride={ROW_STRIDE}
-                float={isFloat}
-                pinnedIdx={pinnedIdx}
-                scrollerRef={gridScrollerRef}
-                onPinIdx={(idx) => setPinnedIdx(idx)}
-                onScrollIdx={(idx) => setPinnedIdx(idx)}
-              />
-            )}
+        {sample.length === 0 ? (
+          <div class="panel-empty">No sample yet.</div>
+        ) : (
+          <SampleGrid
+            entry={entry}
+            stride={ROW_STRIDE}
+            float={isFloat}
+            pinnedIdx={pinnedIdx}
+            scrollerRef={gridScrollerRef}
+            onPinIdx={(idx) => setPinnedIdx(idx)}
+            onScrollIdx={(idx) => setPinnedIdx(idx)}
+          />
+        )}
       </div>
     </>
   )
@@ -328,11 +323,7 @@ function SampleGrid({
   onScrollIdx: (i: number) => void
 }): preact.JSX.Element {
   const { kind, sample } = entry
-  const scalarsPerAxisIdx =
-    kind === 'float2' ? 2 :
-    kind === 'float3' ? 3 :
-    kind === 'float4' ? 4 :
-    1
+  const scalarsPerAxisIdx = kind === 'float2' ? 2 : kind === 'float3' ? 3 : kind === 'float4' ? 4 : 1
   const cursorIdx = pinnedIdx
 
   const [viewport, setViewport] = useState({ scrollTop: 0, height: 0 })
@@ -343,7 +334,7 @@ function SampleGrid({
     setViewport((v) => ({ ...v, height: el.clientHeight }))
     const obs = new ResizeObserver(() => {
       const h = scrollerRef.current?.clientHeight ?? 0
-      setViewport((v) => v.height === h ? v : { ...v, height: h })
+      setViewport((v) => (v.height === h ? v : { ...v, height: h }))
     })
     obs.observe(el)
     return () => obs.disconnect()
@@ -359,9 +350,7 @@ function SampleGrid({
     if (height === 0) return
     const centerRow = Math.floor((scrollTop + height / 2) / SAMPLE_ROW_HEIGHT)
     const centerScalarIdx = centerRow * stride
-    const axisIdx = kind === 'bits'
-      ? centerScalarIdx * 32
-      : Math.floor(centerScalarIdx / scalarsPerAxisIdx)
+    const axisIdx = kind === 'bits' ? centerScalarIdx * 32 : Math.floor(centerScalarIdx / scalarsPerAxisIdx)
     if (axisIdx >= 0) onScrollIdx(axisIdx)
   }
 
@@ -377,14 +366,12 @@ function SampleGrid({
     for (let j = 0; j < stride && i + j < sample.length; j++) {
       const scalarIdx = i + j
       const v = sample[scalarIdx]!
-      const axisIdxForCell = kind === 'bits'
-        ? scalarIdx * 32
-        : Math.floor(scalarIdx / scalarsPerAxisIdx)
-      const inCursor = cursorIdx !== null && (
-        kind === 'bits'
+      const axisIdxForCell = kind === 'bits' ? scalarIdx * 32 : Math.floor(scalarIdx / scalarsPerAxisIdx)
+      const inCursor =
+        cursorIdx !== null &&
+        (kind === 'bits'
           ? cursorIdx >= axisIdxForCell && cursorIdx < axisIdxForCell + 32
-          : axisIdxForCell === cursorIdx
-      )
+          : axisIdxForCell === cursorIdx)
       cells.push(
         <span
           class={`sample-cell${inCursor ? ' sample-cell-cursor' : ''}`}
@@ -392,7 +379,7 @@ function SampleGrid({
           onClick={() => onPinIdx(axisIdxForCell)}
         >
           {float ? fmtFloatFixed(v) : v.toString()}
-        </span>,
+        </span>
       )
     }
     rows.push(
@@ -406,13 +393,13 @@ function SampleGrid({
       >
         <span class="sample-index">{i}</span>
         {cells}
-      </div>,
+      </div>
     )
   }
 
   const onScroll = (e: Event): void => {
     const el = e.currentTarget as HTMLDivElement
-    setViewport((v) => v.scrollTop === el.scrollTop ? v : { ...v, scrollTop: el.scrollTop })
+    setViewport((v) => (v.scrollTop === el.scrollTop ? v : { ...v, scrollTop: el.scrollTop }))
     reportScrollIdx(el.scrollTop, el.clientHeight)
   }
 
@@ -458,7 +445,10 @@ function computeStats(entry: RegistryEntrySnapshot): { summary: string } {
     let ones = 0
     for (let i = 0; i < data.length; i++) {
       let w = data[i]! >>> 0
-      while (w !== 0) { ones += w & 1; w >>>= 1 }
+      while (w !== 0) {
+        ones += w & 1
+        w >>>= 1
+      }
     }
     return { summary: `${ones} / ${count * 32} set` }
   }
@@ -485,9 +475,7 @@ function computeStats(entry: RegistryEntrySnapshot): { summary: string } {
     sum += v
   }
   const mean = sum / n
-  const f = (v: number) => kind === 'uint' || kind === 'int'
-    ? Math.round(v).toString()
-    : v.toFixed(2)
+  const f = (v: number) => (kind === 'uint' || kind === 'int' ? Math.round(v).toString() : v.toFixed(2))
   return { summary: `μ=${f(mean)}  ${f(min)}–${f(max)}` }
 }
 
@@ -502,7 +490,7 @@ function drawVisualizer(
   w: number,
   h: number,
   entry: RegistryEntrySnapshot,
-  cursorIdx: number | null = null,
+  cursorIdx: number | null = null
 ): void {
   ctx.clearRect(0, 0, w, h)
   const { kind, sample } = entry
@@ -551,7 +539,7 @@ function drawBars(
   h: number,
   sample: Float32Array | Int32Array | Uint32Array,
   isSigned: boolean,
-  color: string,
+  color: string
 ): void {
   let min = Infinity
   let max = -Infinity
@@ -564,9 +552,7 @@ function drawBars(
   if (!Number.isFinite(min) || !Number.isFinite(max)) return
 
   const zeroY = isSigned ? h / 2 : h
-  const scale = isSigned
-    ? (h / 2) / Math.max(Math.abs(min), Math.abs(max) || 1)
-    : h / (max || 1)
+  const scale = isSigned ? h / 2 / Math.max(Math.abs(min), Math.abs(max) || 1) : h / (max || 1)
 
   ctx.fillStyle = color
 
@@ -623,7 +609,7 @@ function drawBits(
   h: number,
   sample: Uint32Array,
   count: number,
-  color: string,
+  color: string
 ): void {
   const totalBits = count * 32
   if (totalBits === 0) return