4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T48f,export type MeasureStrategy = | FixedStrategy | CappedStrategy | ComputedStrategy // Height is always the same regardless of content or width. // Examples: buttons, pills, status indicators, headers. export type FixedStrategy = { kind: 'fixed' height: number } // Content scrolls inside a capped container. // Height is min(estimatedContent, maxHeight). // Examples: JSON preview, log viewer, reasoning block. export type CappedStrategy = { kind: 'capped' maxHeight: number // If you can estimate content height cheaply (e.g. lineCount * lineHeight), // provide it. Otherwise the cap is used as the height. estimateContent?: number } // Height is deterministic from props — pure arithmetic, no DOM. // Examples: list of N items × row height, grid of N columns. export type ComputedStrategy = { kind: 'computed' measure: (width: number) => number } // --- Virtualisable item --- export type VirtualItem = { id: string | number strategy: MeasureStrategy data: T } // --- Resolved item (after measurement) --- export type PositionedItem = { id: string | number data: T height: number y: number } 51:T79b,import type { MeasureStrategy, VirtualItem, PositionedItem } from './types' /** * Resolve a measurement strategy to a pixel height. */ export function resolveHeight(strategy: MeasureStrategy, width: number): number { switch (strategy.kind) { case 'fixed': return strategy.height case 'capped': return strategy.estimateContent !== undefined ? Math.min(strategy.estimateContent, strategy.maxHeight) : strategy.maxHeight case 'computed': return strategy.measure(width) } } /** * Resolve all items to positioned items with y offsets. * Pure arithmetic — no DOM, no side effects. */ export function positionItems( items: VirtualItem[], width: number, gap: number = 0, heightOverrides?: Map, strategyFallback?: Map, ): { positioned: PositionedItem[]; totalHeight: number } { const positioned: PositionedItem[] = [] let y = 0 for (let i = 0; i < items.length; i++) { const item = items[i]! const height = heightOverrides?.get(item.id) ?? strategyFallback?.get(item.id) ?? resolveHeight(item.strategy, width) positioned.push({ id: item.id, data: item.data, height, y }) y += height if (i < items.length - 1) y += gap } return { positioned, totalHeight: y } } /** * Re-resolve a single item's height (e.g. after expand/collapse) * and recompute y offsets for all items from that index onward. * Returns the height delta for scroll position correction. */ export function updateItemHeight( positioned: PositionedItem[], index: number, newHeight: number, gap: number = 0, ): number { const old = positioned[index]! const delta = newHeight - old.height if (delta === 0) return 0 old.height = newHeight // Recompute y offsets from index+1 onward for (let i = index + 1; i < positioned.length; i++) { positioned[i]!.y += delta } return delta } 52:T2aa0,import { useMemo, useCallback, useRef, useState, useEffect, useLayoutEffect } from 'react' import { flushSync } from 'react-dom' import type { VirtualItem, PositionedItem, MeasureStrategy } from './types' import { positionItems, resolveHeight } from './measure' import { useVirtualize, useScrollState } from '@/hooks/use-virtualize' export type VirtualizedListResult = { items: PositionedItem[] totalHeight: number renderedCount: number totalCount: number topSpacer: number bottomSpacer: number scrollRef: (el: HTMLDivElement | null) => void /** Stable ref callback per item id. Attach to each item's wrapper element. */ getItemRef: (id: string | number) => (el: HTMLElement | null) => void } export function useVirtualizedList( items: VirtualItem[], viewportHeight: number, width: number, gap: number = 0, ): VirtualizedListResult { const scroll = useScrollState() const getScrollEl = scroll.getElement // --- Height tracking --- // heightCache: RO-measured DOM heights, used by positionItems for accurate spacers. // baselineCache: first measured height per mount (= collapsed state). // // Why baseline exists: when a user expands a collapsible (e.g. reasoning block), // scrolls away (item unmounts), then scrolls back (item remounts collapsed), // the spacer must reflect the collapsed height — not the expanded height. // On unmount, we reset heightCache to baseline so spacers match remount state. // // Why scheduleFlush exists: on unmount of an expanded item above the viewport, // we need to update spacers AND correct scrollTop atomically. scheduleFlush // queues a microtask (runs before paint) that flushSync's a re-render to update // spacers, then useLayoutEffect applies the scrollTop correction — all before // the browser paints. This only fires on the rare expand→scroll-away path. const heightCache = useRef(new Map()) const baselineCache = useRef(new Map()) const [version, setVersion] = useState(0) // Normal path: rAF-batched version bump (cheap, max 1 re-render per frame) const rafScheduled = useRef(false) function scheduleVersionBump() { if (rafScheduled.current) return rafScheduled.current = true requestAnimationFrame(() => { rafScheduled.current = false setVersion(v => v + 1) }) } // Expand→unmount path: microtask + flushSync for atomic spacer + scroll correction. // useLayoutEffect skips while flushPending=true (spacers stale), applies after // the flushSync re-render clears the flag (spacers correct). const pendingCorrection = useRef(0) const flushPending = useRef(false) function scheduleFlush() { if (flushPending.current) return flushPending.current = true queueMicrotask(() => { flushSync(() => { flushPending.current = false setVersion(v => v + 1) }) }) } useLayoutEffect(() => { if (pendingCorrection.current !== 0 && !flushPending.current) { const el = getScrollEl() if (el) { // Kill Safari inertia before adjusting scroll — prevents the // blank-frame bug where Safari's compositor doesn't repaint // after programmatic scrollTop changes during momentum scroll. el.style.overflow = 'hidden' el.scrollTop += pendingCorrection.current // Force synchronous reflow so the browser acknowledges the new scrollTop void el.offsetHeight el.style.overflow = '' flushSync(() => scroll.sync()) } pendingCorrection.current = 0 } }) // On width change: clear RO caches (stale at new width) and save scroll anchor // so we can restore position after recomputation. const prevWidth = useRef(width) const scrollAnchor = useRef<{ itemId: string | number; offset: number } | null>(null) const prevPositioned = useRef[]>([]) if (prevWidth.current !== width) { heightCache.current.clear() baselineCache.current.clear() // Save anchor: which item is at viewport top + pixel offset into that item const scrollEl = getScrollEl() const prev = prevPositioned.current if (scrollEl && prev.length > 0) { const st = scrollEl.scrollTop for (const p of prev) { if (p.y + p.height > st) { scrollAnchor.current = { itemId: p.id, offset: st - p.y } break } } } prevWidth.current = width } // Precompute strategy heights incrementally. // Cache by (id, strategy ref, width) — only recompute when strategy or width changes. // Streaming: only the changed message gets recomputed (strategy ref changed). // Width change: all items recompute (width changed), but AST is pre-parsed in strategy. const strategyCache = useRef(new Map()) const strategyHeights = useMemo(() => { const m = new Map() const cache = strategyCache.current for (const item of items) { const cached = cache.get(item.id) if (cached && cached.strategy === item.strategy && cached.width === width) { m.set(item.id, cached.height) } else { const h = resolveHeight(item.strategy, width) m.set(item.id, h) cache.set(item.id, { strategy: item.strategy, width, height: h }) } } return m }, [items, width]) // Position items using cached heights → strategy fallback. const { positioned, totalHeight } = useMemo( () => positionItems(items, width, gap, heightCache.current, strategyHeights), // eslint-disable-next-line react-hooks/exhaustive-deps [items, width, gap, version, strategyHeights], ) // Detect prepend: if the previous first item still exists but moved down, // correct scroll by the displacement so the user doesn't see a jump. const prevFirstId = useRef(null) if (positioned.length > 0 && prevFirstId.current !== null) { const oldFirstInNew = positioned.find(p => p.id === prevFirstId.current) if (oldFirstInNew && oldFirstInNew.y > 0) { pendingCorrection.current += oldFirstInNew.y scheduleFlush() } } prevFirstId.current = positioned.length > 0 ? positioned[0].id : null // Store positioned for scroll anchor on next width change prevPositioned.current = positioned // Restore scroll position after width change useLayoutEffect(() => { const anchor = scrollAnchor.current if (!anchor) return scrollAnchor.current = null const scrollEl = getScrollEl() if (!scrollEl) return // Find the anchored item in new positions const item = positioned.find(p => p.id === anchor.itemId) if (item) { scrollEl.scrollTop = item.y + anchor.offset } }, [positioned, getScrollEl]) // Y-position lookup for "above viewport?" check (ref for stable callback access) const yLookupRef = useRef(new Map()) yLookupRef.current = useMemo(() => { const m = new Map() for (const p of positioned) m.set(p.id, p.y) return m }, [positioned]) const virtual = useVirtualize(positioned, scroll.scrollTop, viewportHeight) // --- Single ResizeObserver --- const roRef = useRef(null) const elementToId = useRef(new Map()) useEffect(() => () => { roRef.current?.disconnect() }, []) if (!roRef.current && typeof ResizeObserver !== 'undefined') { roRef.current = new ResizeObserver((entries) => { let changed = false for (const entry of entries) { const id = elementToId.current.get(entry.target) if (id === undefined) continue const h = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height if (!baselineCache.current.has(id)) { baselineCache.current.set(id, h) } const prev = heightCache.current.get(id) if (prev !== undefined && Math.abs(prev - h) < 1) continue heightCache.current.set(id, h) changed = true } if (changed) { scheduleVersionBump() } }) } // --- Stable ref callbacks per item id --- const refCallbacks = useRef(new Map void>()) const itemElements = useRef(new Map()) const getItemRef = useCallback((id: string | number) => { let cb = refCallbacks.current.get(id) if (cb) return cb cb = (el: HTMLElement | null) => { const ro = roRef.current if (el) { const prev = itemElements.current.get(id) if (prev === el) return if (prev && ro) { ro.unobserve(prev) elementToId.current.delete(prev) } itemElements.current.set(id, el) elementToId.current.set(el, id) baselineCache.current.delete(id) ro?.observe(el) } else { // Unmount const prev = itemElements.current.get(id) if (prev && ro) { ro.unobserve(prev) elementToId.current.delete(prev) } itemElements.current.delete(id) // If item was expanded beyond baseline, reset + correct const cached = heightCache.current.get(id) const base = baselineCache.current.get(id) if (cached !== undefined && base !== undefined && Math.abs(cached - base) > 1) { heightCache.current.set(id, base) // Scroll correction only if item was above viewport const scrollEl = getScrollEl() if (scrollEl) { const itemY = yLookupRef.current.get(id) ?? 0 if (itemY + cached <= scrollEl.scrollTop) { pendingCorrection.current += base - cached } } scheduleFlush() } } } refCallbacks.current.set(id, cb) return cb }, [getScrollEl]) // Cleanup stale entries when items removed from list entirely const prevItemIds = useRef(new Set()) const currentIds = useMemo(() => new Set(items.map(i => i.id)), [items]) if (prevItemIds.current !== currentIds) { for (const id of prevItemIds.current) { if (!currentIds.has(id)) { refCallbacks.current.delete(id) heightCache.current.delete(id) baselineCache.current.delete(id) } } prevItemIds.current = currentIds } // Spacers const topSpacer = virtual.items.length > 0 ? virtual.items[0]!.y : 0 const bottomSpacer = virtual.items.length > 0 ? Math.max(0, totalHeight - (virtual.items[virtual.items.length - 1]!.y + virtual.items[virtual.items.length - 1]!.height)) : 0 return { items: virtual.items, totalHeight, renderedCount: virtual.renderedCount, totalCount: virtual.totalCount, topSpacer, bottomSpacer, scrollRef: scroll.refCallback, getItemRef, } } 53:Tad5,'use client' import { useMemo, useState, useCallback, useRef } from 'react' type Positioned = { y: number; height: number } export type VirtualRange = { startIndex: number endIndex: number // exclusive items: T[] totalHeight: number renderedCount: number totalCount: number } const OVERSCAN = 3 export function useVirtualize( items: T[], scrollTop: number, viewportHeight: number, ): VirtualRange { return useMemo(() => { if (items.length === 0 || viewportHeight <= 0) { return { startIndex: 0, endIndex: 0, items: [], totalHeight: 0, renderedCount: 0, totalCount: 0 } } const last = items[items.length - 1]! const totalHeight = last.y + last.height let start = bsearchFirst(items, scrollTop) let end = bsearchLast(items, scrollTop + viewportHeight) start = Math.max(0, start - OVERSCAN) end = Math.min(items.length, end + OVERSCAN + 1) return { startIndex: start, endIndex: end, items: items.slice(start, end), totalHeight, renderedCount: end - start, totalCount: items.length, } }, [items, scrollTop, viewportHeight]) } function bsearchFirst(items: Positioned[], target: number): number { let lo = 0, hi = items.length - 1 while (lo < hi) { const mid = (lo + hi) >>> 1 if (items[mid]!.y + items[mid]!.height < target) lo = mid + 1 else hi = mid } return lo } function bsearchLast(items: Positioned[], target: number): number { let lo = 0, hi = items.length - 1 while (lo < hi) { const mid = (lo + hi + 1) >>> 1 if (items[mid]!.y > target) hi = mid - 1 else lo = mid } return lo } /** * Track scroll position. Returns [scrollTop, refCallback]. * Pass refCallback as the scroll container's ref. */ export type ScrollState = { scrollTop: number refCallback: (el: HTMLDivElement | null) => void getElement: () => HTMLDivElement | null } export function useScrollState(): ScrollState & { sync: () => void } { const [scrollTop, setScrollTop] = useState(0) const elRef = useRef(null) const handlerRef = useRef(() => { if (elRef.current) setScrollTop(elRef.current.scrollTop) }) const refCallback = useCallback((el: HTMLDivElement | null) => { if (elRef.current) { elRef.current.removeEventListener('scroll', handlerRef.current) } elRef.current = el if (el) { el.addEventListener('scroll', handlerRef.current, { passive: true }) setScrollTop(el.scrollTop) } }, []) const getElement = useCallback(() => elRef.current, []) const sync = useCallback(() => { if (elRef.current) setScrollTop(elRef.current.scrollTop) }, []) return { scrollTop, refCallback, getElement, sync } } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"lib/virtualize/types.ts","content":"$50","type":"registry:lib","target":"lib/virtualize/types.ts"},{"path":"lib/virtualize/measure.ts","content":"$51","type":"registry:lib","target":"lib/virtualize/measure.ts"},{"path":"lib/virtualize/use-virtualized-list.ts","content":"$52","type":"registry:lib","target":"lib/virtualize/use-virtualized-list.ts"},{"path":"lib/virtualize/index.ts","content":"export type {\n MeasureStrategy,\n FixedStrategy,\n CappedStrategy,\n ComputedStrategy,\n VirtualItem,\n PositionedItem,\n} from './types'\nexport { resolveHeight, positionItems } from './measure'\nexport { useVirtualizedList } from './use-virtualized-list'\n","type":"registry:lib","target":"lib/virtualize/index.ts"},{"path":"hooks/use-virtualize.ts","content":"$53","type":"registry:hook","target":"hooks/use-virtualize.ts"}],"className":"h-[70svh] min-h-80"}]]}]