fix(trajectory): bound work during long streams

packages/client/ui-trajectory/tests/table.spec.tsx

@@ -323,7 +323,7 @@ describe('TrajectoryTable', () => {
     expect(tablePane.scrollTop).toBe(20)
   })
 
-  it('loads one older page at the top and preserves the visible anchor', async () => {
+  it('preserves the visible anchor when the last older page disables virtualization', async () => {
     let resolveOlder: ((advanced: boolean) => void) | undefined
     const older = new Promise<boolean>((resolve) => { resolveOlder = resolve })
     const onLoadOlder = vi.fn(() => older)
@@ -362,7 +362,6 @@ describe('TrajectoryTable', () => {
         }, ...TURNS]}
         {...FOLD_PROPS}
         historyStartSeq={0}
-        hasOlderRecords
         onLoadOlder={onLoadOlder}
       />,
     )
@@ -384,6 +383,21 @@ describe('TrajectoryTable', () => {
     expect(screen.getByRole('table').getAttribute('data-scroll-ready')).toBe('true')
   })
 
+  it('keeps a paged tail virtualized before its loaded window crosses the row threshold', async () => {
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600)
+    Object.defineProperty(HTMLElement.prototype, 'scrollTo', {
+      configurable: true,
+      value: vi.fn(),
+    })
+    const view = render(
+      <TrajectoryTable turns={TURNS} {...FOLD_PROPS} hasOlderRecords />,
+    )
+
+    await waitFor(() => {
+      expect(view.container.querySelector('tr[data-virtual-position]')).toBeTruthy()
+    })
+  })
+
   it('mounts only the visible window for a long ledger', async () => {
     vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600)
     const scrollTo = vi.fn()
@@ -409,6 +423,9 @@ describe('TrajectoryTable', () => {
     })
     expect(view.container.querySelectorAll('tr[data-virtual-position]').length)
       .toBeLessThan(cells.length)
+    expect(screen.getByRole('table').getAttribute('aria-rowcount')).toBe('500')
+    expect(view.container.querySelector('tr[data-trajectory-row-key]')
+      ?.getAttribute('aria-rowindex')).toBe('1')
     expect(scrollTo).toHaveBeenCalled()
     expect(view.container.querySelector('tr[data-virtual-spacer="bottom"]')).toBeTruthy()
     expect(screen.getByText('Context 1')).toBeTruthy()
@@ -426,6 +443,47 @@ describe('TrajectoryTable', () => {
     expect(screen.queryByText('Context 1')).toBeNull()
   })
 
+  it('does not re-scroll a virtual ledger when streaming only changes row content', async () => {
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600)
+    const scrollTo = vi.fn()
+    Object.defineProperty(HTMLElement.prototype, 'scrollTo', {
+      configurable: true,
+      value: scrollTo,
+    })
+    const cells = Array.from({ length: 500 }, (_, index) => ({
+      index: index + 1,
+      kind: 'context' as const,
+      sourceSeq: index + 1,
+      text: `Context ${index + 1}`,
+      timeSeconds: 0,
+    }))
+    const turns: readonly TrajectoryTurnModel[] = [{
+      turn: 1,
+      groups: [{ title: 'Context', cells }],
+    }]
+    const view = render(
+      <TrajectoryTable
+        turns={turns}
+        {...FOLD_PROPS}
+      />,
+    )
+    await waitFor(() => {
+      expect(view.container.querySelector('tr[data-virtual-position]')).toBeTruthy()
+    })
+    scrollTo.mockClear()
+
+    view.rerender(
+      <TrajectoryTable
+        turns={turns}
+        streamingCells={[{ ...cells[0]!, text: 'Context 1 streaming update' }]}
+        {...FOLD_PROPS}
+      />,
+    )
+
+    expect(scrollTo).not.toHaveBeenCalled()
+    expect(screen.getByText('Context 1 streaming update')).toBeTruthy()
+  })
+
   it('keeps the virtual tail reachable with collapsed-summary row heights', async () => {
     vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600)
     Object.defineProperty(HTMLElement.prototype, 'scrollTo', {

packages/client/ui-trajectory/tests/virtual-rows.spec.ts

@@ -0,0 +1,95 @@
+/** Measurable virtual-row grouping and durable identity contracts. */
+
+import { describe, expect, it } from 'vitest'
+import type { TrajectoryCellProps } from '../src/client/trajectory-record.ts'
+import {
+  groupTrajectoryVirtualRows, trajectoryVirtualRecordKey,
+  type VirtualizableTrajectoryRecord,
+} from '../src/client/trajectory-virtual-rows.ts'
+
+function record(
+  index: number,
+  cell: Partial<TrajectoryCellProps> = {},
+  collapsedSummaryKind?: 'turn' | 'assistant',
+): VirtualizableTrajectoryRecord {
+  return {
+    cell: {
+      index,
+      kind: 'message',
+      text: `record ${index}`,
+      timeSeconds: 0,
+      ...cell,
+    },
+    ...(collapsedSummaryKind === undefined ? {} : { collapsedSummaryKind }),
+  }
+}
+
+describe('trajectory virtual rows', () => {
+  it('groups zero-height request boundaries with the following content row', () => {
+    const first = record(1, { requestOnly: true, sourceSeq: 10 })
+    const second = record(2, { requestOnly: true, sourceSeq: 11 })
+    const content = record(3, { sourceSeq: 12 })
+
+    expect(groupTrajectoryVirtualRows([first, second, content])).toEqual([{
+      entries: [
+        { logicalIndex: 0, record: first },
+        { logicalIndex: 1, record: second },
+        { logicalIndex: 2, record: content },
+      ],
+      height: 30,
+      key: trajectoryVirtualRecordKey(content),
+    }])
+  })
+
+  it('retains terminal request-boundary clearance as a measurable row', () => {
+    const content = record(1, { sourceSeq: 10 })
+    const boundary = record(2, { requestOnly: true, sourceSeq: 11 })
+    const rows = groupTrajectoryVirtualRows([content, boundary])
+
+    expect(rows).toHaveLength(2)
+    expect(rows[1]).toEqual({
+      entries: [{ logicalIndex: 1, record: boundary }],
+      height: 9,
+      key: trajectoryVirtualRecordKey(boundary),
+    })
+  })
+
+  it('uses the rendered collapsed-summary height', () => {
+    const summary = record(1, { sourceSeq: 10 }, 'turn')
+
+    expect(groupTrajectoryVirtualRows([summary])[0]?.height).toBe(20)
+  })
+
+  it('keeps an existing row key stable when older history is prepended', () => {
+    const existing = record(2, { sourceSeq: 100 })
+    const prepended = record(1, { sourceSeq: 10 })
+
+    const before = groupTrajectoryVirtualRows([existing])[0]?.key
+    const after = groupTrajectoryVirtualRows([prepended, existing])[1]?.key
+
+    expect(after).toBe(before)
+  })
+
+  it('keeps the content key when a request boundary joins its row', () => {
+    const content = record(2, { sourceSeq: 100 })
+    const boundary = record(1, { requestOnly: true, sourceSeq: 99 })
+
+    expect(groupTrajectoryVirtualRows([boundary, content])[0]?.key)
+      .toBe(groupTrajectoryVirtualRows([content])[0]?.key)
+  })
+
+  it('distinguishes a folded summary from its source record', () => {
+    const source = record(1, { sourceSeq: 10 })
+    const summary = record(1, { sourceSeq: 10 }, 'assistant')
+
+    expect(trajectoryVirtualRecordKey(summary)).not.toBe(trajectoryVirtualRecordKey(source))
+  })
+
+  it('exposes a DOM-safe semantic key', () => {
+    const source = record(1, { callId: 'call with spaces/and?punctuation' })
+
+    expect(trajectoryVirtualRecordKey(source)).toBe(
+      'message%00call%00call%20with%20spaces%2Fand%3Fpunctuation',
+    )
+  })
+})