()
- const member = (block: NativeChatBlock, blockIndex: number): React.ReactNode => {
- const taskList = taskLists.rows.get(block)
- if (taskList) {
- return
- }
- if (taskLists.consumedResults.has(block)) {
- return null
- }
- const edit = editCards.get(block)
- if (edit) {
- return (
-
- {edit.files.map((file, fileIndex) => (
+ const renderRow = useCallback(
+ (row: NativeChatToolRunRow): React.ReactNode => {
+ switch (row.kind) {
+ case 'aside':
+ return row.element
+ case 'tasks':
+ return (
+
+ )
+ case 'edit':
+ return row.files.map((file, fileIndex) => (
- ))}
-
- )
- }
- // A result its call now owns is drawn by that call's line, not as a row of its own.
- if (consumedResults.has(block) || pairedResults.has(block)) {
- return null
- }
- const lineIdentity = nativeChatToolLineIdentity(block, seen)
- return (
-
- )
- }
+ ))
+ case 'line':
+ return (
+
+ )
+ }
+ },
+ [disclosureId, onRevealDiff, revealedDiff]
+ )
- // One flat keyed list with or without asides, so a row gaining its first never remounts a line.
return (
- <>
- {headerBlocks.flatMap((block, blockIndex) => [
- ...(asides?.before.get(block) ?? []),
- member(block, blockIndex)
- ])}
- {asides?.after}
-
+
)
}
diff --git a/src/renderer/src/components/native-chat/tools/runs/NativeChatToolRunMembers.reader.test.tsx b/src/renderer/src/components/native-chat/tools/runs/NativeChatToolRunMembers.reader.test.tsx
new file mode 100644
index 00000000000..f5146e6968c
--- /dev/null
+++ b/src/renderer/src/components/native-chat/tools/runs/NativeChatToolRunMembers.reader.test.tsx
@@ -0,0 +1,667 @@
+// @vitest-environment happy-dom
+
+import '@testing-library/jest-dom/vitest'
+import { useMemo } from 'react'
+import { act, cleanup, fireEvent, render } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { NativeChatBlock } from '../../../../../../shared/native-chat/native-chat-types'
+import type { NativeChatDiffReveal } from '../../../../../../shared/native-chat/tools/native-chat-turn-diffs'
+import { NativeChatToolRun } from './NativeChatToolRun'
+import { NativeChatToolRunWindowContext } from './native-chat-tool-run-window-context'
+import {
+ NativeChatDisclosureContext,
+ useNativeChatDisclosures
+} from '../../messages/disclosure/native-chat-disclosure-store'
+
+const BOX_HEIGHT_PX = 288
+/** Measured rows are taller than the 26px estimate, so a pixel position alone lands on the wrong row. */
+const ROW_HEIGHT_PX = 40
+/** Every row's laid-out height unless a test says otherwise. */
+const layout = { rowPx: ROW_HEIGHT_PX }
+const ROW = '[data-native-chat-tool-run-row]'
+/** Rows that have grown in place, by row key. */
+const grownRows = new Map()
+/** A hidden pane is display:none: nothing in it has a size. */
+const pane = { hidden: false }
+
+const resizeObservers = new Set()
+class StubResizeObserver implements ResizeObserver {
+ readonly targets = new Set()
+ constructor(readonly callback: ResizeObserverCallback) {
+ resizeObservers.add(this)
+ }
+ observe(target: Element): void {
+ this.targets.add(target)
+ }
+ unobserve(target: Element): void {
+ this.targets.delete(target)
+ }
+ disconnect(): void {
+ this.targets.clear()
+ resizeObservers.delete(this)
+ }
+}
+
+/** Deliver what a browser's ResizeObserver would after `element` changed size. */
+function resized(element: Element, height: number): void {
+ for (const observer of resizeObservers) {
+ if (observer.targets.has(element)) {
+ const size = { blockSize: height, inlineSize: 400 }
+ const entry = {
+ target: element,
+ contentRect: element.getBoundingClientRect(),
+ borderBoxSize: [size],
+ contentBoxSize: [size],
+ devicePixelContentBoxSize: [size]
+ } satisfies ResizeObserverEntry
+ observer.callback([entry], observer)
+ }
+ }
+}
+
+function rowHeight(element: Element): number {
+ return grownRows.get(element.getAttribute('data-native-chat-tool-run-row') ?? '') ?? layout.rowPx
+}
+
+/** happy-dom lays nothing out: stack the run box's children by their stated heights. */
+function layOutRunBox(): void {
+ const heightOf = (element: Element): number => {
+ if (pane.hidden) {
+ return 0
+ }
+ if (element.matches(ROW)) {
+ return rowHeight(element)
+ }
+ return element instanceof HTMLElement ? Number.parseFloat(element.style.height) || 0 : 0
+ }
+ const box = (element: Element): HTMLElement | null =>
+ element.closest('[data-native-chat-tool-run-members]')
+ vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function (
+ this: HTMLElement
+ ) {
+ if (pane.hidden) {
+ return 0
+ }
+ if (this.hasAttribute('data-native-chat-tool-run-members')) {
+ return BOX_HEIGHT_PX
+ }
+ return this.matches(ROW) ? rowHeight(this) : 0
+ })
+ vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(400)
+ vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function (
+ this: HTMLElement
+ ) {
+ return this.hasAttribute('data-native-chat-tool-run-members') ? BOX_HEIGHT_PX : 0
+ })
+ vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function (
+ this: HTMLElement
+ ) {
+ const content = this.hasAttribute('data-native-chat-tool-run-members')
+ ? this.firstElementChild
+ : null
+ return content ? Array.from(content.children).reduce((sum, c) => sum + heightOf(c), 0) : 0
+ })
+ // A browser clamps scrollTop to what the box can reach; an unclamped box would hide a wrong scroll.
+ const scrollTops = new WeakMap()
+ vi.spyOn(Element.prototype, 'scrollTop', 'get').mockImplementation(function (this: Element) {
+ return scrollTops.get(this) ?? 0
+ })
+ vi.spyOn(Element.prototype, 'scrollTop', 'set').mockImplementation(function (
+ this: Element,
+ value: number
+ ) {
+ const max = this instanceof HTMLElement ? Math.max(0, this.scrollHeight - this.clientHeight) : 0
+ scrollTops.set(this, Math.min(Math.max(0, value), max))
+ })
+ vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
+ const scroller = box(this)
+ if (!scroller || pane.hidden) {
+ return DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 })
+ }
+ if (this === scroller) {
+ return DOMRect.fromRect({ x: 0, y: 0, width: 400, height: BOX_HEIGHT_PX })
+ }
+ const row = this.closest(ROW) ?? this
+ let top = -scroller.scrollTop
+ for (const child of Array.from(scroller.firstElementChild?.children ?? [])) {
+ if (child === row) {
+ return DOMRect.fromRect({ x: 0, y: top, width: 400, height: heightOf(child) })
+ }
+ top += heightOf(child)
+ }
+ return DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 })
+ })
+}
+
+function calls(count: number): NativeChatBlock[] {
+ return Array.from({ length: count }, (_, index) => ({
+ type: 'tool-call' as const,
+ name: 'Read',
+ callId: `call-${index}`,
+ input: { file_path: `src/file-${index}.ts` }
+ }))
+}
+
+const PATCH =
+ '*** Begin Patch\n*** Update File: first.ts\n ctx\n-was\n+now\n*** Update File: second.ts\n@@ -1,1 +1,1 @@\n-a\n+b\n*** End Patch'
+
+/** A long settled run with one two-file edit far from its top. */
+function editRun(count: number, editAt: number): NativeChatBlock[] {
+ const blocks = calls(count)
+ blocks.splice(
+ editAt,
+ 0,
+ {
+ type: 'tool-call',
+ name: 'apply_patch',
+ callId: 'edit-1',
+ input: { input: PATCH },
+ state: 'completed'
+ },
+ { type: 'tool-result', callId: 'edit-1', output: 'Success. Updated the following files' }
+ )
+ return blocks
+}
+
+// Stable, as a real transcript's callback is: a new one each render would make every card reveal again.
+const ignoreRevealTarget = (): void => {}
+
+function Transcript({
+ blocks,
+ mounted = true,
+ live = false,
+ visible = true,
+ find = false,
+ revealedDiff
+}: {
+ blocks: NativeChatBlock[]
+ mounted?: boolean
+ live?: boolean
+ visible?: boolean
+ find?: boolean
+ revealedDiff?: NativeChatDiffReveal
+}) {
+ const disclosures = useNativeChatDisclosures()
+ const windowFacts = useMemo(() => ({ isVisible: visible, findActive: find }), [visible, find])
+ return (
+
+
+ {mounted ? (
+
+ ) : null}
+
+
+ )
+}
+
+function membersBox(container: HTMLElement): HTMLElement {
+ const element = container.querySelector('[data-native-chat-tool-run-members]')
+ if (!element) {
+ throw new Error('members box did not render')
+ }
+ return element
+}
+
+/** The row at the box's top edge and how far into it the box starts. */
+function topRow(container: HTMLElement): { key: string | null; offset: number } {
+ for (const row of Array.from(container.querySelectorAll(ROW))) {
+ const rect = row.getBoundingClientRect()
+ if (rect.bottom > 0) {
+ return { key: row.getAttribute('data-native-chat-tool-run-row'), offset: -rect.top }
+ }
+ }
+ return { key: null, offset: 0 }
+}
+
+/** Deliver frames and the anchor's idle record on the fake clock: no wall-clock waits. */
+async function settle(): Promise {
+ for (let pass = 0; pass < 4; pass++) {
+ await act(async () => {
+ vi.advanceTimersByTime(250)
+ })
+ }
+}
+
+/** A drawn row's laid-out height changes, as a browser's ResizeObserver reports it. */
+async function growRow(container: HTMLElement, key: string, height: number): Promise {
+ const row = container.querySelector(`[data-native-chat-tool-run-row="${key}"]`)
+ if (!row) {
+ throw new Error(`row ${key} is not drawn`)
+ }
+ grownRows.set(key, height)
+ await act(async () => {
+ resized(row, height)
+ })
+ await settle()
+}
+
+async function scrollBox(container: HTMLElement, top: number): Promise {
+ const box = membersBox(container)
+ await act(async () => {
+ box.scrollTop = top
+ fireEvent.scroll(box)
+ })
+ await settle()
+}
+
+/** The browser's report of a landing's own scroll write, which this harness does not send: it may only
+ * let the window catch up to where the box already is, never move it. */
+async function reportLandingScroll(container: HTMLElement): Promise {
+ const box = membersBox(container)
+ const landed = box.scrollTop
+ await act(async () => {
+ fireEvent.scroll(box)
+ })
+ await settle()
+ expect(box.scrollTop).toBe(landed)
+}
+
+/** The browser's first size report for each drawn row, which it sends in the frame a row appears and this
+ * harness only sends when asked: rows the window drew while it believed the box was scrolling get theirs here. */
+async function reportDrawnRowSizes(container: HTMLElement): Promise {
+ await act(async () => {
+ for (const row of Array.from(container.querySelectorAll(ROW))) {
+ resized(row, rowHeight(row))
+ }
+ })
+ await settle()
+}
+
+describe('NativeChatToolRun opened-run reader', () => {
+ beforeEach(() => {
+ vi.useFakeTimers({
+ toFake: ['setTimeout', 'clearTimeout', 'requestAnimationFrame', 'cancelAnimationFrame']
+ })
+ grownRows.clear()
+ layout.rowPx = ROW_HEIGHT_PX
+ pane.hidden = false
+ vi.stubGlobal('ResizeObserver', StubResizeObserver)
+ layOutRunBox()
+ })
+ afterEach(() => {
+ cleanup()
+ vi.useRealTimers()
+ vi.restoreAllMocks()
+ vi.unstubAllGlobals()
+ })
+
+ it('returns to the same row and offset after the transcript unmounts it and work arrives', async () => {
+ const { container, rerender } = render()
+ await settle()
+ await scrollBox(container, 9_013)
+ const before = topRow(container)
+ expect(before.key).not.toBeNull()
+ expect(before.offset).toBeGreaterThan(0)
+
+ rerender()
+ rerender()
+ // Evicted again before that return lands: the place it was landing on is what it keeps.
+ rerender()
+ rerender()
+ await settle()
+ await reportLandingScroll(container)
+
+ const after = topRow(container)
+ expect(after.key).toBe(before.key)
+ expect(Math.abs(after.offset - before.offset)).toBeLessThanOrEqual(1)
+ })
+
+ it('keeps a revealed edit at the top over the place the reader had scrolled to', async () => {
+ const blocks = editRun(600, 400)
+ const { container, rerender } = render()
+ await settle()
+ await scrollBox(container, 2_000)
+ const reveal = { messageId: 'message-1', editKey: 'apply_patch:400', fileIndex: 1 }
+
+ rerender()
+ await settle()
+ expect(topRow(container).key).toBe('edit:apply_patch:400')
+
+ await scrollBox(container, 2_000)
+ rerender()
+ await settle()
+ expect(topRow(container).key).toBe('edit:apply_patch:400')
+ })
+
+ it('forgets its place when the reader closes and reopens it', async () => {
+ const { container } = render()
+ await settle()
+ await scrollBox(container, 9_013)
+ const header = container.querySelector('[data-native-chat-tool-run-state]')
+ if (!header) {
+ throw new Error('run header did not render')
+ }
+ await act(async () => {
+ fireEvent.click(header)
+ })
+ await settle()
+ await act(async () => {
+ fireEvent.click(header)
+ })
+ await settle()
+ expect(membersBox(container).scrollTop).toBe(0)
+ expect(topRow(container).key).toBe('call:call-0')
+ })
+
+ it('follows new work at the end, but not a detail growing after it lands', async () => {
+ const { container, rerender } = render()
+ await settle()
+ const box = membersBox(container)
+ const atEnd = (): boolean => box.scrollTop >= box.scrollHeight - BOX_HEIGHT_PX - 1
+ expect(atEnd()).toBe(true)
+
+ // A burst larger than the window, then a result that adds no row.
+ rerender()
+ await settle()
+ expect(atEnd()).toBe(true)
+ const withResult = [
+ ...calls(260),
+ { type: 'tool-result' as const, callId: 'call-259', output: 'done' }
+ ]
+ rerender()
+ await settle()
+ expect(atEnd()).toBe(true)
+
+ // In-place growth that is not new work leaves the reader where they are.
+ const landed = box.scrollTop
+ const tail = container.querySelector('[data-native-chat-tool-run-row="call:call-259"]')
+ if (!tail) {
+ throw new Error('tail row is not drawn')
+ }
+ grownRows.set('call:call-259', 400)
+ await act(async () => {
+ resized(tail, 400)
+ })
+ await settle()
+ expect(box.scrollTop).toBe(landed)
+
+ // A reader scrolled away stays put when more work arrives.
+ await scrollBox(container, 1_000)
+ rerender()
+ await settle()
+ expect(box.scrollTop).toBe(1_000)
+ })
+
+ it('lets a reveal win over a restore that has not landed yet', async () => {
+ const blocks = editRun(600, 400)
+ const { container, rerender } = render()
+ await settle()
+ await scrollBox(container, 2_000)
+ rerender()
+ rerender()
+ // No settling: the returning restore is still pending when the reveal arrives.
+ const reveal = { messageId: 'message-1', editKey: 'apply_patch:400', fileIndex: 1 }
+ rerender()
+ await settle()
+ expect(topRow(container).key).toBe('edit:apply_patch:400')
+
+ // A reveal made in the same render that shows the pane again wins over the place it kept while hidden,
+ // and is what the run keeps even before the browser reports the reveal's scroll: hidden again at once and
+ // shown under the same request (so no fresh reveal), it returns to the revealed edit.
+ await scrollBox(container, 2_000)
+ pane.hidden = true
+ rerender(
+
+ )
+ pane.hidden = false
+ rerender()
+ pane.hidden = true
+ rerender(
+
+ )
+ pane.hidden = false
+ rerender()
+ await settle()
+ // The revealed row stays drawn while its request stands, so no scroll report is needed to see it.
+ expect(topRow(container).key).toBe('edit:apply_patch:400')
+ })
+
+ it('stops following when the reader scrolls before new work has settled', async () => {
+ const { container, rerender } = render()
+ await settle()
+ const box = membersBox(container)
+ rerender()
+ await act(async () => {
+ box.scrollTop = 1_000
+ fireEvent.scroll(box)
+ })
+ await settle()
+ expect(box.scrollTop).toBe(1_000)
+ })
+
+ it('finishes a follow that started while the pane was hidden once it shows again', async () => {
+ const { container, rerender } = render()
+ await settle()
+ pane.hidden = true
+ rerender()
+ rerender()
+ await settle()
+ pane.hidden = false
+ rerender()
+ await settle()
+ const box = membersBox(container)
+ expect(box.scrollTop).toBe(box.scrollHeight - BOX_HEIGHT_PX)
+
+ // Once landed, growth that is not new work leaves the reader where they are.
+ const landed = box.scrollTop
+ await growRow(container, 'call:call-229', 300)
+ expect(box.scrollTop).toBe(landed)
+ })
+
+ it('finishes a follow whose tail first measures exactly as estimated', async () => {
+ // 26px rows: a live run opens following before any row is drawn; the tail's first real
+ // measurement then changes no size, so only that measurement can end the follow.
+ layout.rowPx = 26
+ const { container } = render()
+ await settle()
+ const box = membersBox(container)
+ expect(box.scrollTop).toBe(box.scrollHeight - BOX_HEIGHT_PX)
+ // The follow ended, so growth that is not new work leaves the reader in place.
+ const landed = box.scrollTop
+ await growRow(container, 'call:call-199', 300)
+ expect(box.scrollTop).toBe(landed)
+ })
+
+ it('waits for a tail with no size yet, then lands on it once it has one', async () => {
+ const { container, rerender } = render()
+ await settle()
+ grownRows.set('call:call-259', 0)
+ rerender()
+ await settle()
+ // A measurement with no size does not count as landing.
+ await growRow(container, 'call:call-259', 0)
+ // The tail now lays out: the follow that waited for it lands on the new end.
+ await growRow(container, 'call:call-259', 40)
+ const box = membersBox(container)
+ expect(box.scrollTop).toBe(box.scrollHeight - BOX_HEIGHT_PX)
+ const landed = box.scrollTop
+ await growRow(container, 'call:call-259', 300)
+ expect(box.scrollTop).toBe(landed)
+ })
+
+ it('returns to where the reader scrolled with Find open after the pane hides and shows', async () => {
+ const { container, rerender } = render()
+ await settle()
+ rerender()
+ await settle()
+ await scrollBox(container, 9_013)
+ const before = topRow(container)
+ expect(before.key).toBe('call:call-225')
+
+ // A hidden box loses its offset; only the remembered row brings the reader back.
+ pane.hidden = true
+ rerender()
+ membersBox(container).scrollTop = 0
+ pane.hidden = false
+ rerender()
+ await settle()
+ expect(topRow(container)).toEqual(before)
+
+ // The landing finished without any size change: later growth elsewhere leaves the reader in place.
+ await growRow(container, 'call:call-900', 300)
+ expect(topRow(container)).toEqual(before)
+ })
+
+ it('keeps a reader who jumps past the drawn rows of a live run where they jumped', async () => {
+ layout.rowPx = 26
+ const { container, rerender } = render()
+ await settle()
+ const box = membersBox(container)
+ const opened = container.querySelector('[data-native-chat-tool-run-row="call:call-28"] button')
+ if (!opened) {
+ throw new Error('row call-28 is not drawn')
+ }
+ await act(async () => {
+ fireEvent.click(opened)
+ })
+ await growRow(container, 'call:call-28', 68)
+ for (let count = 30; count <= 62; count++) {
+ rerender()
+ await settle()
+ }
+
+ // A scrollbar drag lands far from every drawn row; then work arrives.
+ await scrollBox(container, 683)
+ rerender()
+ await settle()
+ expect(box.scrollTop).toBe(683)
+ })
+
+ for (const mode of ['small run shown again', 'long run with Find'] as const) {
+ it(`lets a reader scroll away from a followed live run without a jump (${mode})`, async () => {
+ layout.rowPx = 26
+ const find = mode === 'long run with Find'
+ const first = find ? 200 : 30
+ const { container, rerender } = render()
+ await settle()
+ if (!find) {
+ pane.hidden = true
+ rerender()
+ pane.hidden = false
+ rerender()
+ await settle()
+ }
+ for (let count = first + 1; count <= first + 15; count++) {
+ rerender()
+ await settle()
+ }
+ const box = membersBox(container)
+ const away = box.scrollHeight - BOX_HEIGHT_PX - 120
+ await scrollBox(container, away)
+ expect(box.scrollTop).toBe(away)
+ rerender()
+ await settle()
+ expect(box.scrollTop).toBe(away)
+ })
+ }
+
+ for (const hiddenAfterMs of [100, 160]) {
+ it(`keeps the reader's row through a hidden pane that reports a scroll of its own (hidden ${hiddenAfterMs}ms after a scroll)`, async () => {
+ const { container, rerender } = render()
+ await settle()
+ await scrollBox(container, 9_013)
+ await reportDrawnRowSizes(container)
+
+ // Hidden shortly after one more scroll, before anything deferred from it could settle.
+ await act(async () => {
+ fireEvent.scroll(membersBox(container))
+ vi.advanceTimersByTime(hiddenAfterMs)
+ })
+ // The reader's place as the pane hides is the one that must come back.
+ const before = topRow(container)
+ pane.hidden = true
+ rerender()
+ // A hidden box loses its offset and may report that as a scroll; the transcript then unmounts the run.
+ await scrollBox(container, 0)
+ rerender()
+ pane.hidden = false
+ rerender()
+ await settle()
+ await reportLandingScroll(container)
+ await reportDrawnRowSizes(container)
+ expect(topRow(container)).toEqual(before)
+ })
+ }
+
+ it('keeps a parked reader on its row through Find, the window threshold and a selection', async () => {
+ const { container, rerender } = render()
+ await settle()
+ await scrollBox(container, 613)
+ const before = topRow(container)
+
+ rerender()
+ await settle()
+ expect(topRow(container)).toEqual(before)
+ rerender()
+ await settle()
+ expect(topRow(container)).toEqual(before)
+ rerender()
+ await settle()
+ expect(topRow(container)).toEqual(before)
+
+ const box = membersBox(container)
+ await act(async () => {
+ document.getSelection()?.selectAllChildren(box)
+ document.dispatchEvent(new Event('selectionchange'))
+ })
+ await settle()
+ expect(topRow(container)).toEqual(before)
+ await act(async () => {
+ document.getSelection()?.removeAllRanges()
+ document.dispatchEvent(new Event('selectionchange'))
+ })
+ await settle()
+ expect(topRow(container)).toEqual(before)
+ })
+
+ it("lands on the reader's row once a pane shown before its layout finally lays out", async () => {
+ const { container, rerender } = render()
+ await settle()
+ await scrollBox(container, 9_013)
+ const before = topRow(container)
+
+ pane.hidden = true
+ rerender()
+ membersBox(container).scrollTop = 0
+ // Shown, but its box has no geometry for longer than any landing waits on frames alone.
+ rerender()
+ await settle()
+ await settle()
+ // Layout arrives; the held row reports a size that changes nothing.
+ pane.hidden = false
+ await growRow(container, before.key ?? '', 40)
+ expect(topRow(container)).toEqual(before)
+
+ await growRow(container, 'call:call-900', 300)
+ expect(topRow(container)).toEqual(before)
+ })
+
+ it('does not keep a selection span drawn after it ended while the pane was hidden', async () => {
+ const { container, rerender } = render()
+ await settle()
+ const box = membersBox(container)
+ await act(async () => {
+ document.getSelection()?.selectAllChildren(box)
+ document.dispatchEvent(new Event('selectionchange'))
+ })
+ expect(container.querySelectorAll(ROW).length).toBe(1_000)
+
+ pane.hidden = true
+ rerender()
+ await act(async () => {
+ document.getSelection()?.removeAllRanges()
+ document.dispatchEvent(new Event('selectionchange'))
+ })
+ pane.hidden = false
+ rerender()
+ await settle()
+ expect(container.querySelectorAll(ROW).length).toBeLessThan(100)
+ })
+})
diff --git a/src/renderer/src/components/native-chat/tools/runs/NativeChatToolRunMembers.tsx b/src/renderer/src/components/native-chat/tools/runs/NativeChatToolRunMembers.tsx
index 0b13e5a9e63..ad8d99a461f 100644
--- a/src/renderer/src/components/native-chat/tools/runs/NativeChatToolRunMembers.tsx
+++ b/src/renderer/src/components/native-chat/tools/runs/NativeChatToolRunMembers.tsx
@@ -1,5 +1,17 @@
-import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import {
+ Fragment,
+ memo,
+ useCallback,
+ useContext,
+ useEffect,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useState
+} from 'react'
import { cn } from '@/lib/class-names'
+import { createProgrammaticScrollMarks } from '@/hooks/programmatic-scroll-marks'
+import { VIRTUALIZED_LIST_MIN_ROWS } from '@/components/virtualized-list'
import {
distanceFromBottom,
NATIVE_CHAT_FOLLOW_REARM_PX
@@ -9,14 +21,18 @@ import {
MAX_NATIVE_CHAT_DISCLOSURES,
NativeChatDisclosureContext
} from '../../messages/disclosure/native-chat-disclosure-store'
-
-function openDetailHeight(content: HTMLElement): number {
- let height = 0
- for (const detail of content.querySelectorAll('[data-native-chat-member-detail]')) {
- height += detail.offsetHeight
- }
- return height
-}
+import { NativeChatToolRunWindowContext } from './native-chat-tool-run-window-context'
+import type { NativeChatToolRunRow } from './native-chat-tool-run-rows'
+import { ROW_KEY_ATTRIBUTE, useNativeChatToolRunPins } from './use-native-chat-tool-run-pins'
+import {
+ useNativeChatToolRunWindow,
+ type NativeChatToolRunDrawnRow
+} from './use-native-chat-tool-run-window'
+import { useNativeChatToolRunDetailRoom } from './use-native-chat-tool-run-detail-room'
+import {
+ claimNativeChatToolRunReveal,
+ useNativeChatToolRunReaderPosition
+} from './use-native-chat-tool-run-reader-position'
/** Scroll inside the run, then return its box for transcript alignment; member offsets omit internal scroll. */
export function revealNativeChatToolRunMember(member: HTMLElement): HTMLElement {
@@ -25,97 +41,326 @@ export function revealNativeChatToolRunMember(member: HTMLElement): HTMLElement
return member
}
scroller.scrollTop += member.getBoundingClientRect().top - scroller.getBoundingClientRect().top
+ // The revealed card is now the reader's place: a pending landing or follow must not move it again.
+ claimNativeChatToolRunReveal(scroller, member)
return scroller
}
-/** An opened run's members in a bounded scroll box, so live work fills it instead of lengthening the page. */
+/** A drawn row re-renders only when its own row or renderer changes, not on every window move. */
+const WindowRow = memo(function WindowRow({
+ row,
+ renderRow
+}: {
+ row: NativeChatToolRunRow
+ renderRow: (row: NativeChatToolRunRow) => React.ReactNode
+}): React.ReactNode {
+ return renderRow(row)
+})
+
+/** The drawn rows; unchanged in draw-every-row mode while the reader scrolls, so that mode costs nothing per move. */
+const WindowRows = memo(function WindowRows({
+ drawn,
+ rows,
+ renderRow,
+ measureRow
+}: {
+ drawn: readonly NativeChatToolRunDrawnRow[]
+ rows: readonly NativeChatToolRunRow[]
+ renderRow: (row: NativeChatToolRunRow) => React.ReactNode
+ measureRow: (node: HTMLDivElement | null) => void
+}): React.ReactNode {
+ const children: React.ReactNode[] = []
+ let previousEnd = 0
+ for (const { index, start, end } of drawn) {
+ const row = rows[index]
+ if (!row) {
+ continue
+ }
+ children.push(
+
+ {start > previousEnd + 0.5 ? (
+
+ ) : null}
+
+
+
+
+ )
+ previousEnd = Math.max(previousEnd, end)
+ }
+ return children
+})
+
+/** An opened run's rows in a bounded scroll box that draws only what the reader can reach, so a long run costs a window, not its length. */
export function NativeChatToolRunMembers({
+ rows,
+ renderRow,
followKey,
startsAtEnd,
memoryKey,
- children
+ revealRowKey
}: {
+ rows: readonly NativeChatToolRunRow[]
+ renderRow: (row: NativeChatToolRunRow) => React.ReactNode
/** How much work the run holds: a reader at the end follows it growing. Opening a detail must not count. */
followKey: number
/** A live run opens on what it is doing now; a settled one reads from its top. */
startsAtEnd: boolean
/** The run's disclosure key. Windowing unmounts an off-screen row; its box comes back as the reader left it. */
memoryKey?: string
- children: React.ReactNode
+ /** The edit row a diff reveal targets; its card does the scrolling once drawn. */
+ revealRowKey?: string
}): React.JSX.Element {
const scrollerRef = useRef(null)
- const contentRef = useRef(null)
- const [fades, setFades] = useState({ top: false, bottom: false })
+ const { isVisible, findActive } = useContext(NativeChatToolRunWindowContext)
const runScroll = useContext(NativeChatDisclosureContext)?.runScroll
const [remembered] = useState(() =>
memoryKey === undefined ? undefined : runScroll?.get(memoryKey)
)
+ const returningTo =
+ remembered && !remembered.followsEnd ? (remembered.position ?? undefined) : undefined
const followsEndRef = useRef(remembered?.followsEnd ?? startsAtEnd)
-
+ // Drawn while a landing is pending, so it lands on the real row rather than an estimate.
+ const [heldRowKey, setHeldRowKey] = useState(returningTo?.key)
+ const [marks] = useState(createProgrammaticScrollMarks)
+ const [fades, setFades] = useState({ top: false, bottom: false })
+ // The row whose real measurement says new work has landed: the last one that draws something
+ // (a thought with no words draws nothing, so it can never be measured).
+ const followTailKey = useMemo(
+ () => rows.findLast((row) => row.kind !== 'aside' || row.focusable)?.key,
+ [rows]
+ )
+ const isVisibleRef = useRef(isVisible)
+ const followTailKeyRef = useRef(followTailKey)
useLayoutEffect(() => {
- if (scrollerRef.current && remembered && !remembered.followsEnd) {
- scrollerRef.current.scrollTop = remembered.top
- }
- }, [remembered])
+ isVisibleRef.current = isVisible
+ followTailKeyRef.current = followTailKey
+ })
- // Before paint: follow only if the reader was at the end before the new work.
- useLayoutEffect(() => {
+ const rowIndexByKey = useMemo(() => new Map(rows.map((row, index) => [row.key, index])), [rows])
+ // Below the threshold, or while Find searches drawn text, every row is drawn; one keyed tree serves both modes.
+ const drawsEveryRow = rows.length < VIRTUALIZED_LIST_MIN_ROWS || findActive
+ const pins = useNativeChatToolRunPins({
+ rows,
+ rowIndexByKey,
+ revealRowKey,
+ heldRowKey,
+ drawsEveryRow,
+ isVisible,
+ scrollerRef
+ })
+ const detailRoom = useNativeChatToolRunDetailRoom({
+ scrollerRef,
+ rowIndexByKey,
+ initial: remembered?.detailHeights
+ })
+ // Follow transaction: armed by new work while the reader is at the end; done once the tail has really been measured.
+ const followRef = useRef<{ observedTail: boolean } | null>(null)
+ // A real tail measurement wakes the follow pass even when it changed no size.
+ const [tailObservations, setTailObservations] = useState(0)
+ // The reader-position owner exists after the window; a measured landing row reaches it through here.
+ const onRowMeasuredRef = useRef<(key: string) => void>(() => {})
+ const onMeasure = useCallback(
+ (element: HTMLDivElement) => {
+ const key = element.getAttribute(ROW_KEY_ATTRIBUTE)
+ if (key === null || !isVisibleRef.current) {
+ return
+ }
+ detailRoom.record(key, element)
+ onRowMeasuredRef.current(key)
+ const follow = followRef.current
+ // Only a laid-out tail counts: a callback can carry a cached or zero size.
+ if (
+ follow &&
+ !follow.observedTail &&
+ key === followTailKeyRef.current &&
+ element.getBoundingClientRect().height > 0
+ ) {
+ follow.observedTail = true
+ setTailObservations((count) => count + 1)
+ }
+ },
+ [detailRoom]
+ )
+ const { virtualizer, measureRow, totalSize, drawn } = useNativeChatToolRunWindow({
+ rows,
+ scrollerRef,
+ isVisible,
+ drawsEveryRow,
+ rangeExtractor: pins.rangeExtractor,
+ marks,
+ onMeasure
+ })
+
+ const pinToEnd = useCallback(() => {
const scroller = scrollerRef.current
- if (scroller && followsEndRef.current) {
+ if (scroller && scroller.scrollTop < scroller.scrollHeight - scroller.clientHeight - 1) {
+ marks.mark(scroller.scrollHeight)
scroller.scrollTop = scroller.scrollHeight
}
- }, [followKey])
+ }, [marks])
+
+ const onRevealed = useCallback(() => {
+ followRef.current = null
+ followsEndRef.current = false
+ }, [])
+ const reader = useNativeChatToolRunReaderPosition({
+ scrollerRef,
+ virtualizer,
+ rows,
+ rowIndexByKey,
+ isVisible,
+ followsEndRef,
+ marks,
+ totalSize,
+ initial: returningTo,
+ setHeldRowKey,
+ onRevealed
+ })
+
+ useLayoutEffect(() => {
+ onRowMeasuredRef.current = reader.onRowMeasured
+ }, [reader])
+
+ // A following reader whose pane shows again goes back to the end.
+ const wasVisibleRef = useRef(isVisible)
+ useLayoutEffect(() => {
+ if (wasVisibleRef.current !== isVisible) {
+ wasVisibleRef.current = isVisible
+ if (isVisible && followsEndRef.current) {
+ followRef.current = { observedTail: false }
+ }
+ }
+ }, [isVisible])
+
+ // Before paint: new work starts a follow only if the reader was at the end before it. Each visible
+ // pass re-pins; once the tail is really measured (now, on a later measurement, or when a hidden pane
+ // shows again), one frame without tail growth ends it.
+ const followKeyRef = useRef(null)
+ useLayoutEffect(() => {
+ if (followKeyRef.current !== followKey) {
+ followKeyRef.current = followKey
+ if (followsEndRef.current) {
+ followRef.current = { observedTail: false }
+ }
+ }
+ const follow = followRef.current
+ if (!follow || !isVisible) {
+ return
+ }
+ if (!follow.observedTail && followTailKeyRef.current === undefined) {
+ // Nothing in the run draws: there is no landing to wait for.
+ follow.observedTail = true
+ }
+ if (!follow.observedTail) {
+ const tail = followTailKeyRef.current
+ const tailElement = Array.from(
+ scrollerRef.current?.querySelectorAll(`[${ROW_KEY_ATTRIBUTE}]`) ?? []
+ ).findLast((element) => element.getAttribute(ROW_KEY_ATTRIBUTE) === tail)
+ // The default measurement returns a cached size without a resize; read the tail itself.
+ const height = tailElement?.getBoundingClientRect().height ?? 0
+ if (tailElement && height > 0) {
+ virtualizer.resizeItem(Number(tailElement.dataset.index), height)
+ follow.observedTail = true
+ }
+ }
+ pinToEnd()
+ if (!follow.observedTail) {
+ return
+ }
+ const frame = window.requestAnimationFrame(() => {
+ if (followRef.current === follow && virtualizer.getTotalSize() === totalSize) {
+ followRef.current = null
+ }
+ })
+ return () => window.cancelAnimationFrame(frame)
+ }, [followKey, isVisible, pinToEnd, tailObservations, totalSize, virtualizer])
+
+ const remember = useCallback(() => {
+ const scroller = scrollerRef.current
+ if (!scroller || !runScroll || memoryKey === undefined) {
+ return
+ }
+ setWithLRU(
+ runScroll,
+ memoryKey,
+ {
+ position: reader.current(),
+ followsEnd: followsEndRef.current,
+ detailHeights: detailRoom.snapshot()
+ },
+ MAX_NATIVE_CHAT_DISCLOSURES
+ )
+ }, [detailRoom, memoryKey, reader, runScroll])
const readPosition = useCallback(() => {
const scroller = scrollerRef.current
- if (!scroller) {
+ // A hidden pane reads zero geometry, which is not where the reader is.
+ if (!scroller || !isVisibleRef.current) {
return
}
const fromEnd = distanceFromBottom(scroller)
- followsEndRef.current = fromEnd <= NATIVE_CHAT_FOLLOW_REARM_PX
+ followsEndRef.current = !reader.landingPending() && fromEnd <= NATIVE_CHAT_FOLLOW_REARM_PX
const top = scroller.scrollTop > 1
const bottom = fromEnd > 1
setFades((current) =>
current.top === top && current.bottom === bottom ? current : { top, bottom }
)
- if (runScroll && memoryKey !== undefined) {
- setWithLRU(
- runScroll,
- memoryKey,
- { top: scroller.scrollTop, followsEnd: followsEndRef.current },
- MAX_NATIVE_CHAT_DISCLOSURES
- )
- }
- }, [memoryKey, runScroll])
+ remember()
+ }, [reader, remember])
+
+ const onScroll = useCallback(
+ (event: React.UIEvent) => {
+ const scroller = event.currentTarget
+ const maxScroll = Math.max(0, scroller.scrollHeight - scroller.clientHeight)
+ const byReader = !marks.consume(event.nativeEvent, scroller.scrollTop, maxScroll)
+ if (byReader && isVisibleRef.current) {
+ // The reader moved: any follow in flight yields to them.
+ followRef.current = null
+ }
+ // Registered on the box before the window's own listener, so this runs before the redraw it causes.
+ reader.onScrolled(scroller.scrollTop, byReader)
+ readPosition()
+ },
+ [marks, readPosition, reader]
+ )
useEffect(() => {
const scroller = scrollerRef.current
- const content = contentRef.current
- if (!scroller || !content || typeof ResizeObserver === 'undefined') {
+ if (!scroller || typeof ResizeObserver === 'undefined') {
return
}
- let roomForDetails = 0
- const observer = new ResizeObserver(() => {
- const opened = openDetailHeight(content)
- if (opened !== roomForDetails) {
- roomForDetails = opened
- // A variable, not state: a detail animating open would re-render every frame.
- scroller.style.setProperty('--native-chat-opened-detail', `${opened}px`)
- }
- readPosition()
- })
- observer.observe(content)
// The box's cap moves with an opened detail, which changes what lies past its edges.
+ const observer = new ResizeObserver(readPosition)
observer.observe(scroller)
+ if (scroller.firstElementChild) {
+ observer.observe(scroller.firstElementChild)
+ }
return () => observer.disconnect()
}, [readPosition])
+ // The owned place is saved as the run leaves; nothing is read from a box that may already be hidden.
+ useLayoutEffect(() => remember, [remember])
+
+ const { retainInteractedRow } = pins
+ const onReaderAct = useCallback(
+ (event: React.SyntheticEvent) => {
+ // Opening a detail is the reader acting, not new work: it ends any follow in flight.
+ followRef.current = null
+ retainInteractedRow(event)
+ },
+ [retainInteractedRow]
+ )
+
+ // Drawn rows are in index order, so the last one ends the drawn extent.
+ const trailing = drawsEveryRow ? 0 : totalSize - (drawn.at(-1)?.end ?? 0)
+
return (
-
{children}
+
+
+ {trailing > 0.5 ?
: null}
+