feat: Implement createDevtoolsRows function and associated tests for row state management

packages/build/src/config.ts

@@ -1,7 +1,7 @@
 import { join } from 'node:path'
 import { root } from './root.ts'
 
-export const threshold = 600_000
+export const threshold = 620_000
 
 export const instantiations = 200_000
 

packages/chat-debug-view/src/parts/CreateDevtoolsRows/CreateDevtoolsRows.ts

@@ -0,0 +1,16 @@
+import type { ChatViewEvent } from '../ChatViewEvent/ChatViewEvent.ts'
+import type { DevtoolsRow } from '../DevtoolsRow/DevtoolsRow.ts'
+import { hasErrorStatus } from '../HasErrorStatus/HasErrorStatus.ts'
+
+export const createDevtoolsRows = (events: readonly ChatViewEvent[], selectedEventIndex: number | null, startIndex = 0): readonly DevtoolsRow[] => {
+  return events.map((event, index) => {
+    const actualIndex = startIndex + index
+    return {
+      event,
+      index: actualIndex,
+      isErrorStatus: hasErrorStatus(event),
+      isEven: actualIndex % 2 === 1,
+      isSelected: selectedEventIndex === actualIndex,
+    }
+  })
+}

packages/chat-debug-view/src/parts/DevtoolsRow/DevtoolsRow.ts

@@ -0,0 +1,9 @@
+import type { ChatViewEvent } from '../ChatViewEvent/ChatViewEvent.ts'
+
+export interface DevtoolsRow {
+  readonly event: ChatViewEvent
+  readonly index: number
+  readonly isErrorStatus: boolean
+  readonly isEven: boolean
+  readonly isSelected: boolean
+}

packages/chat-debug-view/src/parts/GetDevtoolsDom/GetDevtoolsDom.ts

@@ -5,6 +5,7 @@ import type { TimelineInfo } from '../GetTimelineInfo/GetTimelineInfo.ts'
 import * as ChatDebugStrings from '../ChatDebugStrings/ChatDebugStrings.ts'
 import { ChatDebugView, ChatDebugViewDevtools } from '../ClassNames/ClassNames.ts'
 import { createDetailTabs } from '../CreateDetailTabs/CreateDetailTabs.ts'
+import { createDevtoolsRows } from '../CreateDevtoolsRows/CreateDevtoolsRows.ts'
 import { getDetailsDom } from '../GetDetailsDom/GetDetailsDom.ts'
 import { getDevtoolsRows } from '../GetDevtoolsRows/GetDevtoolsRows.ts'
 import { getEffectiveTimelineRange } from '../GetEffectiveTimelineRange/GetEffectiveTimelineRange.ts'
@@ -49,7 +50,8 @@ export const getDevtoolsDom = (
   maxLineY = events.length,
 ): readonly VirtualDomNode[] => {
   const visibleEvents = events.slice(minLineY, maxLineY)
-  const rowNodes = getDevtoolsRows(visibleEvents, selectedEventIndex, visibleTableColumns, minLineY)
+  const rows = createDevtoolsRows(visibleEvents, selectedEventIndex, minLineY)
+  const rowNodes = getDevtoolsRows(rows, visibleTableColumns)
   const effectiveRange = getEffectiveTimelineRange(
     timelineStartSeconds,
     timelineEndSeconds,

packages/chat-debug-view/src/parts/GetDevtoolsRows/GetDevtoolsRows.ts

@@ -1,28 +1,21 @@
 import { mergeClassNames, type VirtualDomNode, VirtualDomElements } from '@lvce-editor/virtual-dom-worker'
-import type { ChatViewEvent } from '../ChatViewEvent/ChatViewEvent.ts'
+import type { DevtoolsRow } from '../DevtoolsRow/DevtoolsRow.ts'
 import { TableRow, TableRowEven, TableRowOdd, TableRowSelected } from '../ClassNames/ClassNames.ts'
 import { getRowCellNodes } from '../GetRowCellNodes/GetRowCellNodes.ts'
-import { hasErrorStatus } from '../HasErrorStatus/HasErrorStatus.ts'
 import { defaultVisibleTableColumns } from '../TableColumn/TableColumn.ts'
 
 export const getDevtoolsRows = (
-  events: readonly ChatViewEvent[],
-  selectedEventIndex: number | null,
+  rows: readonly DevtoolsRow[],
   visibleTableColumns: readonly string[] = defaultVisibleTableColumns,
-  startIndex = 0,
 ): readonly VirtualDomNode[] => {
-  return events.flatMap((event, i) => {
-    const actualIndex = startIndex + i
-    const isEvenRow = actualIndex % 2 === 1
-    const rowClassName = isEvenRow ? TableRowEven : TableRowOdd
-    const isSelected = selectedEventIndex === actualIndex
-    const isErrorStatus = hasErrorStatus(event)
-    const rowCellNodes = getRowCellNodes(event, isErrorStatus, visibleTableColumns)
+  return rows.flatMap((row) => {
+    const rowClassName = row.isEven ? TableRowEven : TableRowOdd
+    const rowCellNodes = getRowCellNodes(row.event, row.isErrorStatus, visibleTableColumns)
     return [
       {
         childCount: visibleTableColumns.length,
-        className: mergeClassNames(TableRow, rowClassName, isSelected ? TableRowSelected : ''),
-        'data-index': `${actualIndex}`,
+        className: mergeClassNames(TableRow, rowClassName, row.isSelected ? TableRowSelected : ''),
+        'data-index': `${row.index}`,
         type: VirtualDomElements.Tr,
       },
       ...rowCellNodes,

packages/chat-debug-view/test/CreateDevtoolsRows.test.ts

@@ -0,0 +1,68 @@
+import { expect, test } from '@jest/globals'
+import * as CreateDevtoolsRows from '../src/parts/CreateDevtoolsRows/CreateDevtoolsRows.ts'
+
+test('createDevtoolsRows should derive row state for a virtualized slice', () => {
+  const events = [
+    {
+      eventId: 3,
+      sessionId: 'session-1',
+      timestamp: '2026-03-08T00:00:02.000Z',
+      type: 'request',
+    },
+    {
+      eventId: 4,
+      sessionId: 'session-1',
+      timestamp: '2026-03-08T00:00:03.000Z',
+      type: 'response',
+    },
+  ]
+
+  const result = CreateDevtoolsRows.createDevtoolsRows(events, 3, 2)
+
+  expect(result).toEqual([
+    {
+      event: events[0],
+      index: 2,
+      isErrorStatus: false,
+      isEven: false,
+      isSelected: false,
+    },
+    {
+      event: events[1],
+      index: 3,
+      isErrorStatus: false,
+      isEven: true,
+      isSelected: true,
+    },
+  ])
+})
+
+test('createDevtoolsRows should mark error rows from event status', () => {
+  const events = [
+    {
+      arguments: {
+        uri: '/test/playground',
+      },
+      eventId: 1,
+      name: 'list_files',
+      result: {
+        error: 'Invalid argument: uri must be an absolute URI.',
+      },
+      sessionId: 'session-1',
+      timestamp: '2026-04-02T07:26:35.172Z',
+      type: 'tool-execution',
+    },
+  ]
+
+  const result = CreateDevtoolsRows.createDevtoolsRows(events, null)
+
+  expect(result).toEqual([
+    {
+      event: events[0],
+      index: 0,
+      isErrorStatus: true,
+      isEven: false,
+      isSelected: false,
+    },
+  ])
+})

packages/chat-debug-view/test/GetDevtoolsRows.test.ts

@@ -1,8 +1,20 @@
 import { expect, test } from '@jest/globals'
 import { VirtualDomElements, text } from '@lvce-editor/virtual-dom-worker'
+import type { DevtoolsRow } from '../src/parts/DevtoolsRow/DevtoolsRow.ts'
 import * as GetDevtoolsRows from '../src/parts/GetDevtoolsRows/GetDevtoolsRows.ts'
 import * as TableColumn from '../src/parts/TableColumn/TableColumn.ts'
 
+const createRow = (event: Readonly<Record<string, unknown>>, index = 0, overrides: Readonly<Partial<DevtoolsRow>> = {}): DevtoolsRow => {
+  return {
+    event: event as DevtoolsRow['event'],
+    index,
+    isErrorStatus: false,
+    isEven: index % 2 === 1,
+    isSelected: false,
+    ...overrides,
+  }
+}
+
 test('getDevtoolsRows should render tool execution labels with the tool name', () => {
   const events = [
     {
@@ -14,7 +26,7 @@ test('getDevtoolsRows should render tool execution labels with the tool name', (
     },
   ]
 
-  const result = GetDevtoolsRows.getDevtoolsRows(events, null)
+  const result = GetDevtoolsRows.getDevtoolsRows([createRow(events[0])])
 
   expect(result).toEqual([
     {
@@ -64,7 +76,7 @@ test('getDevtoolsRows should render tool execution labels with tool name from ar
     },
   ]
 
-  const result = GetDevtoolsRows.getDevtoolsRows(events, null)
+  const result = GetDevtoolsRows.getDevtoolsRows([createRow(events[0])])
 
   expect(result).toEqual([
     {
@@ -116,7 +128,7 @@ test('getDevtoolsRows should render tool execution labels with tool name from to
     },
   ]
 
-  const result = GetDevtoolsRows.getDevtoolsRows(events, null)
+  const result = GetDevtoolsRows.getDevtoolsRows([createRow(events[0], 0, { isErrorStatus: true })])
 
   expect(result).toEqual([
     {
@@ -169,7 +181,7 @@ test('getDevtoolsRows should render 400 status when tool error is nested in resu
     },
   ]
 
-  const result = GetDevtoolsRows.getDevtoolsRows(events, null)
+  const result = GetDevtoolsRows.getDevtoolsRows([createRow(events[0], 0, { isErrorStatus: true })])
 
   expect(result).toEqual([
     {
@@ -221,7 +233,7 @@ test('getDevtoolsRows should add odd and even row classes to table rows', () =>
     },
   ]
 
-  const result = GetDevtoolsRows.getDevtoolsRows(events, null)
+  const result = GetDevtoolsRows.getDevtoolsRows([createRow(events[0]), createRow(events[1], 1)])
 
   expect(result).toEqual([
     {
@@ -312,7 +324,7 @@ test('getDevtoolsRows should render merged ai request duration from timestamps',
     },
   ]
 
-  const result = GetDevtoolsRows.getDevtoolsRows(events, null)
+  const result = GetDevtoolsRows.getDevtoolsRows([createRow(events[0])])
 
   expect(result).toEqual([
     {
@@ -360,7 +372,7 @@ test('getDevtoolsRows should omit hidden columns', () => {
     },
   ]
 
-  const result = GetDevtoolsRows.getDevtoolsRows(events, null, [TableColumn.Type, TableColumn.Status])
+  const result = GetDevtoolsRows.getDevtoolsRows([createRow(events[0])], [TableColumn.Type, TableColumn.Status])
 
   expect(result).toEqual([
     {
@@ -400,7 +412,10 @@ test('getDevtoolsRows should preserve row parity and selection for a virtualized
     },
   ]
 
-  const result = GetDevtoolsRows.getDevtoolsRows(events, 3, TableColumn.defaultVisibleTableColumns, 2)
+  const result = GetDevtoolsRows.getDevtoolsRows(
+    [createRow(events[0], 2), createRow(events[1], 3, { isEven: true, isSelected: true })],
+    TableColumn.defaultVisibleTableColumns,
+  )
 
   expect(result).toEqual([
     {