@lvce-editor/chat-debug-view 10.0.0 → 10.3.0

package/dist/chatDebugViewWorkerMain.js

@@ -1315,6 +1315,9 @@ const listChatViewEvents$1 = async sessionId => {
 const loadSelectedEvent$1 = async (sessionId, eventId, type) => {
   return invoke$1('ChatStorage.loadSelectedEvent', sessionId, eventId, type);
 };
+const registerUpdateListener = async (sessionId, rpcId, uid) => {
+  return invoke$1('ChatStorage.registerUpdateListener', sessionId, rpcId, uid);
+};
 
 const appendStoredEventForTest = async (state, event) => {
   await appendEvent(event);
@@ -2217,6 +2220,8 @@ const createDefaultState = () => {
     largeBreakpoint: 900,
     mediumBreakpoint: 600,
     platform: 0,
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     sashPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
@@ -2230,11 +2235,17 @@ const createDefaultState = () => {
     sortDescending: false,
     tableColumns: createTableColumns(),
     tableColumnWidths: defaultTableColumnWidths,
+    tableDeltaY: 0,
+    tableMaxLineY: 0,
+    tableMinLineY: 0,
     tableResizerDownId: 0,
+    tableScrollBarHandleOffset: 0,
+    tableScrollBarPointerActive: false,
     tableWidth: defaultTableWidth,
     timelineEndSeconds: '',
     timelineEvents: [],
     timelineFilterDescription: '',
+    timelineHeight: 81,
     timelineHoverPercent: null,
     timelineHoverSeconds: '',
     timelineInfo: emptyTimelineInfo,
@@ -2282,7 +2293,7 @@ const RenderFocusContext = 4;
 const RenderFocus = 5;
 
 const diff = (oldState, newState) => {
-  if (oldState.categoryFilters !== newState.categoryFilters || oldState.detailTabs !== newState.detailTabs || oldState.errorMessage !== newState.errorMessage || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.sortColumn !== newState.sortColumn || oldState.sortDescending !== newState.sortDescending || oldState.tableColumnWidths !== newState.tableColumnWidths || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineHoverPercent !== newState.timelineHoverPercent || oldState.timelineHoverSeconds !== newState.timelineHoverSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.tableColumns !== newState.tableColumns || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.focus !== newState.focus || oldState.width !== newState.width || oldState.uid !== newState.uid) {
+  if (oldState.categoryFilters !== newState.categoryFilters || oldState.detailTabs !== newState.detailTabs || oldState.errorMessage !== newState.errorMessage || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.previewTextCursorColumnIndex !== newState.previewTextCursorColumnIndex || oldState.previewTextCursorRowIndex !== newState.previewTextCursorRowIndex || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.sortColumn !== newState.sortColumn || oldState.sortDescending !== newState.sortDescending || oldState.tableColumnWidths !== newState.tableColumnWidths || oldState.tableDeltaY !== newState.tableDeltaY || oldState.tableMaxLineY !== newState.tableMaxLineY || oldState.tableMinLineY !== newState.tableMinLineY || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineHeight !== newState.timelineHeight || oldState.timelineHoverPercent !== newState.timelineHoverPercent || oldState.timelineHoverSeconds !== newState.timelineHoverSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.tableColumns !== newState.tableColumns || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.focus !== newState.focus || oldState.width !== newState.width || oldState.uid !== newState.uid) {
     return [RenderIncremental, RenderCss];
   }
   return [];
@@ -2373,6 +2384,76 @@ const mergeToolExecutionEvents = (startedEvent, finishedEvent, type = mergedEven
   return mergedEvent;
 };
 
+const requestEventTypes = new Set(['request', 'ai-request']);
+const responseEventTypes = new Set(['response', 'ai-response-success']);
+const getPairId = event => {
+  const {
+    request_id: requestIdSnake,
+    requestId,
+    requestID,
+    turn_id: turnIdSnake,
+    turnId
+  } = event;
+  if (typeof requestId === 'string' || typeof requestId === 'number') {
+    return requestId;
+  }
+  if (typeof requestIdSnake === 'string' || typeof requestIdSnake === 'number') {
+    return requestIdSnake;
+  }
+  if (typeof requestID === 'string' || typeof requestID === 'number') {
+    return requestID;
+  }
+  if (typeof turnId === 'string' || typeof turnId === 'number') {
+    return turnId;
+  }
+  if (typeof turnIdSnake === 'string' || typeof turnIdSnake === 'number') {
+    return turnIdSnake;
+  }
+  const {
+    body,
+    request,
+    response,
+    value
+  } = event;
+  const bodyPairId = body?.requestId ?? body?.request_id ?? body?.requestID ?? body?.turnId ?? body?.turn_id;
+  if (typeof bodyPairId === 'string' || typeof bodyPairId === 'number') {
+    return bodyPairId;
+  }
+  const requestPairId = request?.requestId ?? request?.request_id ?? request?.requestID ?? request?.turnId ?? request?.turn_id;
+  if (typeof requestPairId === 'string' || typeof requestPairId === 'number') {
+    return requestPairId;
+  }
+  const valuePairId = value?.requestId ?? value?.request_id ?? value?.requestID ?? value?.turnId ?? value?.turn_id;
+  if (typeof valuePairId === 'string' || typeof valuePairId === 'number') {
+    return valuePairId;
+  }
+  const responsePairId = response?.requestId ?? response?.request_id ?? response?.requestID ?? response?.turnId ?? response?.turn_id;
+  if (typeof responsePairId === 'string' || typeof responsePairId === 'number') {
+    return responsePairId;
+  }
+  return undefined;
+};
+const mergeRequestResponseEvents = (startedEvent, finishedEvent) => {
+  return {
+    ...mergeToolExecutionEvents(startedEvent, finishedEvent, startedEvent.type),
+    requestEvent: startedEvent,
+    responseEvent: finishedEvent
+  };
+};
+const isMatchingRequestResponsePair = (startedEvent, finishedEvent) => {
+  if (!requestEventTypes.has(startedEvent.type) || !responseEventTypes.has(finishedEvent.type)) {
+    return false;
+  }
+  if (startedEvent.sessionId !== finishedEvent.sessionId) {
+    return false;
+  }
+  const startedPairId = getPairId(startedEvent);
+  const finishedPairId = getPairId(finishedEvent);
+  if (startedPairId !== undefined && finishedPairId !== undefined) {
+    return startedPairId === finishedPairId;
+  }
+  return startedEvent.type === 'ai-request' && finishedEvent.type === 'ai-response-success';
+};
 const isMatchingHandleSubmitPair = (startedEvent, finishedEvent) => {
   return startedEvent.type === handleSubmitEventType && finishedEvent.type === sseResponseCompletedEventType && startedEvent.sessionId === finishedEvent.sessionId;
 };
@@ -2386,6 +2467,11 @@ const collapseToolExecutionEvents = events => {
       i++;
       continue;
     }
+    if (nextEvent && isMatchingRequestResponsePair(event, nextEvent)) {
+      collapsedEvents.push(mergeRequestResponseEvents(event, nextEvent));
+      i++;
+      continue;
+    }
     if (nextEvent && isMatchingHandleSubmitPair(event, nextEvent)) {
       collapsedEvents.push(mergeToolExecutionEvents(event, nextEvent, handleSubmitEventType));
       i++;
@@ -2555,6 +2641,9 @@ const hasErrorStatus = event => {
   const {
     status
   } = event;
+  if (status === 'error') {
+    return true;
+  }
   if (isErrorStatusCode(status)) {
     return true;
   }
@@ -2631,6 +2720,129 @@ const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreNam
   return loadSelectedEvent$1(sessionId, eventId, type);
 };
 
+const mergeSelectedEventDetails = (selectedEvent, selectedEventDetails) => {
+  if (!selectedEventDetails) {
+    return selectedEvent;
+  }
+  const {
+    requestEvent,
+    responseEvent
+  } = selectedEvent;
+  if (!requestEvent || !responseEvent || typeof requestEvent !== 'object' || typeof responseEvent !== 'object') {
+    return selectedEventDetails;
+  }
+  const selectedEventDetailsType = selectedEventDetails.type;
+  const resolvedResponseEvent = selectedEventDetailsType === 'response' || selectedEventDetailsType === 'ai-response-success' ? selectedEventDetails : responseEvent;
+  return {
+    ...selectedEventDetails,
+    ...selectedEvent,
+    requestEvent: {
+      ...requestEvent,
+      ...selectedEventDetails
+    },
+    responseEvent: resolvedResponseEvent
+  };
+};
+
+const devtoolsTableHeaderHeight = 24;
+const devtoolsTableRowHeight = 24;
+const devtoolsTableScrollBarWidth = 12;
+const devtoolsTableSummaryHeight = 24;
+const minimumDevtoolsTableScrollBarHeight = 20;
+
+const devtoolsRootGap = 4;
+const devtoolsTopHeight = 28;
+const devtoolsTimelineHeight = 88;
+const getTableBodyY = (state, hasTimeline) => {
+  const {
+    y
+  } = state;
+  return y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
+};
+
+const getTableBodyHeight = (state, eventCount) => {
+  if (eventCount === 0) {
+    return 0;
+  }
+  const tableBodyY = getTableBodyY(state, true);
+  return Math.max(0, state.height - (tableBodyY - state.y) - viewPadding - devtoolsTableSummaryHeight);
+};
+const getVisibleRowCount = tableBodyHeight => {
+  if (tableBodyHeight <= 0) {
+    return 0;
+  }
+  return Math.max(1, Math.ceil(tableBodyHeight / devtoolsTableRowHeight));
+};
+const getMaxDeltaY = (eventCount, tableBodyHeight) => {
+  return Math.max(eventCount * devtoolsTableRowHeight - tableBodyHeight, 0);
+};
+const clampTableDeltaY = (deltaY, eventCount, tableBodyHeight) => {
+  const maxDeltaY = getMaxDeltaY(eventCount, tableBodyHeight);
+  if (deltaY < 0) {
+    return 0;
+  }
+  if (deltaY > maxDeltaY) {
+    return maxDeltaY;
+  }
+  return deltaY;
+};
+const getScrollBarHeight = (eventCount, tableBodyHeight) => {
+  if (eventCount === 0 || tableBodyHeight <= 0) {
+    return 0;
+  }
+  const contentHeight = eventCount * devtoolsTableRowHeight;
+  if (contentHeight <= tableBodyHeight) {
+    return 0;
+  }
+  return Math.max(minimumDevtoolsTableScrollBarHeight, Math.floor(tableBodyHeight * tableBodyHeight / contentHeight));
+};
+const getScrollBarOffset = (deltaY, maxDeltaY, tableBodyHeight, scrollBarHeight) => {
+  if (maxDeltaY <= 0 || scrollBarHeight <= 0 || tableBodyHeight <= scrollBarHeight) {
+    return 0;
+  }
+  return Math.round(deltaY / maxDeltaY * (tableBodyHeight - scrollBarHeight));
+};
+const applyVirtualTableState = state => {
+  const currentEvents = getCurrentEvents$2(state);
+  const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
+  const deltaY = clampTableDeltaY(state.tableDeltaY, currentEvents.length, tableBodyHeight);
+  const minLineY = Math.floor(deltaY / devtoolsTableRowHeight);
+  const visibleRowCount = getVisibleRowCount(tableBodyHeight);
+  const maxLineY = Math.min(currentEvents.length, minLineY + visibleRowCount);
+  return {
+    ...state,
+    tableDeltaY: deltaY,
+    tableMaxLineY: maxLineY,
+    tableMinLineY: minLineY
+  };
+};
+const setTableDeltaY = (state, deltaY) => {
+  return applyVirtualTableState({
+    ...state,
+    tableDeltaY: deltaY
+  });
+};
+const withSelectedEventVisible = state => {
+  if (state.selectedEventIndex === null || state.selectedEventIndex < 0) {
+    return applyVirtualTableState(state);
+  }
+  const currentEvents = getCurrentEvents$2(state);
+  const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
+  const visibleRowCount = getVisibleRowCount(tableBodyHeight);
+  if (visibleRowCount === 0) {
+    return applyVirtualTableState(state);
+  }
+  const minLineY = Math.floor(state.tableDeltaY / devtoolsTableRowHeight);
+  const maxLineY = minLineY + visibleRowCount;
+  if (state.selectedEventIndex < minLineY) {
+    return setTableDeltaY(state, state.selectedEventIndex * devtoolsTableRowHeight);
+  }
+  if (state.selectedEventIndex >= maxLineY) {
+    return setTableDeltaY(state, (state.selectedEventIndex + 1) * devtoolsTableRowHeight - tableBodyHeight);
+  }
+  return applyVirtualTableState(state);
+};
+
 const svgWidthRegex = /\bwidth=["']([\d.]+)(?:px)?["']/i;
 const svgHeightRegex = /\bheight=["']([\d.]+)(?:px)?["']/i;
 const svgViewBoxRegex = /\bviewBox=["'][^"']*?([\d.]+)\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)["']/i;
@@ -2774,14 +2986,16 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
     };
   }
   const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
-  const resolvedSelectedEvent = await withPreparedSelectedEventPreview(selectedEventDetails ?? selectedEvent);
-  return {
+  const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
+  return withSelectedEventVisible({
     ...state,
     detailTabs: createDetailTabs(selectedDetailTab, resolvedSelectedEvent),
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
-  };
+  });
 };
 
 const focusIndex = async (state, index) => {
@@ -2879,35 +3093,33 @@ const show2 = async (uid, menuId, x, y, args) => {
   await showContextMenu2(uid, menuId, x, y, args);
 };
 
-const devtoolsTableHeaderHeight = 24;
-const devtoolsTableRowHeight = 24;
-
-const devtoolsRootGap = 4;
-const devtoolsTopHeight = 28;
-const devtoolsTimelineHeight = 88;
-const getTableBodyY = (state, hasTimeline) => {
-  return state.y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
-};
-
 const getTableBodyEventIndex = (state, eventX, eventY) => {
-  if (!state.useDevtoolsLayout) {
+  const {
+    tableMaxLineY,
+    tableMinLineY,
+    tableWidth,
+    useDevtoolsLayout,
+    width,
+    x
+  } = state;
+  if (!useDevtoolsLayout) {
     return -1;
   }
   const currentEvents = getCurrentEvents$1(state);
   if (currentEvents.length === 0) {
     return -1;
   }
-  const tableX = state.x + leftPadding;
-  const tableWidth = clampTableWidth(state.width, state.tableWidth);
+  const tableX = x + leftPadding;
+  const tableWidthNew = clampTableWidth(width, tableWidth);
   const hasTimeline = currentEvents.length > 0;
   const tableBodyY = getTableBodyY(state, hasTimeline);
   const relativeX = eventX - tableX;
   const relativeY = eventY - tableBodyY;
-  if (relativeX < 0 || relativeX >= tableWidth || relativeY < 0) {
+  if (relativeX < 0 || relativeX >= tableWidthNew || relativeY < 0) {
     return -1;
   }
-  const eventIndex = Math.floor(relativeY / devtoolsTableRowHeight);
-  if (eventIndex < 0 || eventIndex >= currentEvents.length) {
+  const eventIndex = tableMinLineY + Math.floor(relativeY / devtoolsTableRowHeight);
+  if (eventIndex < tableMinLineY || eventIndex >= tableMaxLineY || eventIndex >= currentEvents.length) {
     return -1;
   }
   return eventIndex;
@@ -3120,6 +3332,8 @@ const restoreSelectedEvent = async state => {
   if (state.selectedEventId === null) {
     return {
       ...state,
+      previewTextCursorColumnIndex: null,
+      previewTextCursorRowIndex: null,
       selectedEvent: null,
       selectedEventIndex: null
     };
@@ -3129,6 +3343,8 @@ const restoreSelectedEvent = async state => {
   if (selectedEventIndex === -1) {
     return {
       ...state,
+      previewTextCursorColumnIndex: null,
+      previewTextCursorRowIndex: null,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null
@@ -3138,15 +3354,19 @@ const restoreSelectedEvent = async state => {
   if (!selectedEvent || typeof selectedEvent.eventId !== 'number') {
     return {
       ...state,
+      previewTextCursorColumnIndex: null,
+      previewTextCursorRowIndex: null,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null
     };
   }
   const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
-  const resolvedSelectedEvent = selectedEventDetails ? await withPreparedSelectedEventPreview(selectedEventDetails) : null;
+  const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return {
     ...state,
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
@@ -3162,7 +3382,7 @@ const loadEventsForSessionId = async (state, sessionId) => {
   } = state;
   const result = await loadEventsDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
   if (result.type === 'error') {
-    return getStateWithTimelineInfo({
+    return applyVirtualTableState(getStateWithTimelineInfo({
       ...state,
       errorMessage: getFailedToLoadMessage(sessionId, result.error),
       events: [],
@@ -3171,13 +3391,13 @@ const loadEventsForSessionId = async (state, sessionId) => {
       selectedEventId: null,
       selectedEventIndex: null,
       sessionId
-    });
+    }));
   }
   const {
     events
   } = result;
   if (events.length === 0) {
-    return getStateWithTimelineInfo({
+    return applyVirtualTableState(getStateWithTimelineInfo({
       ...state,
       errorMessage: getSessionNotFoundMessage(sessionId),
       events: [],
@@ -3186,7 +3406,7 @@ const loadEventsForSessionId = async (state, sessionId) => {
       selectedEventId: null,
       selectedEventIndex: null,
       sessionId
-    });
+    }));
   }
   const nextState = getStateWithTimelineInfo({
     ...state,
@@ -3195,7 +3415,8 @@ const loadEventsForSessionId = async (state, sessionId) => {
     initial: false,
     sessionId
   });
-  return restoreSelectedEvent(nextState);
+  const restoredState = await restoreSelectedEvent(nextState);
+  return withSelectedEventVisible(restoredState);
 };
 
 const loadEventsFromUri = async state => {
@@ -3228,6 +3449,8 @@ const handleClickRefresh = async state => {
 const handleCloseDetails = state => {
   return {
     ...state,
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null
@@ -3311,12 +3534,12 @@ const getPreservedSelectedEventIndex$1 = (oldState, newState) => {
 const withPreservedSelection$1 = (state, nextState) => {
   const nextStateWithTimelineInfo = getStateWithTimelineInfo(nextState);
   const selectedEventIndex = getPreservedSelectedEventIndex$1(state, nextStateWithTimelineInfo);
-  return {
+  return withSelectedEventVisible({
     ...nextStateWithTimelineInfo,
     selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
     selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
     selectedEventIndex
-  };
+  });
 };
 
 const handleEventCategoryFilter = (state, value, ctrlKey = false, metaKey = false) => {
@@ -3423,12 +3646,14 @@ const parseSelectedEventIndex = value => {
 const withPreservedSelection = (state, nextState) => {
   const nextStateWithTimelineInfo = getStateWithTimelineInfo(nextState);
   const selectedEventIndex = getPreservedSelectedEventIndex(state, nextStateWithTimelineInfo);
-  return {
+  return withSelectedEventVisible({
     ...nextStateWithTimelineInfo,
+    previewTextCursorColumnIndex: selectedEventIndex === null ? null : state.previewTextCursorColumnIndex,
+    previewTextCursorRowIndex: selectedEventIndex === null ? null : state.previewTextCursorRowIndex,
     selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
     selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
     selectedEventIndex
-  };
+  });
 };
 const handleInput = (state, name, value, checked) => {
   if (name === Filter) {
@@ -3473,22 +3698,26 @@ const handleInput = (state, name, value, checked) => {
   if (name === UseDevtoolsLayout) {
     const useDevtoolsLayout = getBoolean(checked);
     const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex(state) : null;
-    return {
+    return applyVirtualTableState({
       ...state,
+      previewTextCursorColumnIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorColumnIndex : null,
+      previewTextCursorRowIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorRowIndex : null,
       selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
       selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
       selectedEventIndex,
       useDevtoolsLayout
-    };
+    });
   }
   if (name === SelectedEventIndex) {
     const selectedEventIndex = parseSelectedEventIndex(value);
-    return {
+    return withSelectedEventVisible({
       ...state,
+      previewTextCursorColumnIndex: selectedEventIndex === null ? null : state.previewTextCursorColumnIndex,
+      previewTextCursorRowIndex: selectedEventIndex === null ? null : state.previewTextCursorRowIndex,
       selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
       selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
       selectedEventIndex
-    };
+    });
   }
   if (name === TimelineStartSeconds) {
     const nextState = {
@@ -3512,12 +3741,14 @@ const handleInput = (state, name, value, checked) => {
     return withPreservedSelection(state, nextState);
   }
   if (name === CloseDetails) {
-    return {
+    return applyVirtualTableState({
       ...state,
+      previewTextCursorColumnIndex: null,
+      previewTextCursorRowIndex: null,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null
-    };
+    });
   }
   if (name === DetailTab) {
     if (!isDetailTab(value)) {
@@ -3535,1382 +3766,1607 @@ const handleInput = (state, name, value, checked) => {
   return state;
 };
 
-const handleSashPointerDown = (state, eventX, eventY) => {
-  if (state.sashPointerActive) {
-    return state;
+const getListFilesPreviewEvent = (event, name) => {
+  if (name !== 'list_files') {
+    return undefined;
   }
-  return {
-    ...state,
-    sashPointerActive: true
-  };
-};
-
-const handleSashPointerMove = (state, eventX, eventY) => {
-  if (!state.sashPointerActive) {
-    return state;
+  const {
+    result
+  } = event;
+  if (typeof result !== 'object' || result === null) {
+    return undefined;
   }
-  return {
-    ...state,
-    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
-  };
+  const {
+    entries
+  } = result;
+  if (entries !== undefined) {
+    return entries;
+  }
+  return result;
 };
 
-const handleSashPointerUp = (state, eventX, eventY) => {
-  if (!state.sashPointerActive) {
-    return state;
+const getPreviewName = event => {
+  if (typeof event.name === 'string' && event.name) {
+    return event.name;
   }
-  return {
-    ...state,
-    sashPointerActive: false
-  };
+  if (typeof event.toolName === 'string' && event.toolName) {
+    return event.toolName;
+  }
+  return undefined;
 };
 
-const FocusChatDebugTable = 221_139;
-
-const handleTableFocus = state => {
-  return {
-    ...state,
-    focus: FocusChatDebugTable
-  };
+const hasOwn = (event, key) => {
+  return Object.hasOwn(event, key);
 };
 
-const handleTableHeaderClick = (state, value) => {
-  if (!isTableColumn(value)) {
-    return state;
+const shouldIncludeArguments = (event, name) => {
+  if (!hasOwn(event, 'arguments')) {
+    return false;
   }
-  const sortDescending = state.sortColumn === value ? !state.sortDescending : false;
-  const nextState = {
-    ...state,
-    sortColumn: value,
-    sortDescending
-  };
-  return withPreservedSelection$1(state, nextState);
-};
-
-const getTableResizerId = name => {
-  switch (name) {
-    case 'ResizerOne':
-      return 1;
-    case 'ResizerTwo':
-      return 2;
-    default:
-      return 0;
+  if (name === 'getWorkspaceUri') {
+    return false;
   }
-};
-const handleTableResizerPointerDown = (state, name, clientX) => {
-  return {
-    ...state,
-    tableResizerDownId: getTableResizerId(name)
-  };
+  return true;
 };
 
-const handleTableResizerPointerMove = (state, clientX) => {
-  if (!state.tableResizerDownId) {
-    return state;
+const getPayloadEvent = event => {
+  const {
+    requestEvent
+  } = event;
+  if (requestEvent && typeof requestEvent === 'object' && typeof requestEvent.type === 'string') {
+    const mergedRequestEvent = requestEvent;
+    if (mergedRequestEvent.body !== undefined) {
+      return mergedRequestEvent.body;
+    }
+    if (mergedRequestEvent.value !== undefined) {
+      return mergedRequestEvent.value;
+    }
+    if (hasOwn(mergedRequestEvent, 'arguments')) {
+      return mergedRequestEvent.arguments;
+    }
+    return requestEvent;
   }
-  return {
-    ...state,
-    tableColumnWidths: getResizedTableColumnWidths(state.width, state.tableWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths, state.x, clientX, state.tableResizerDownId)
-  };
-};
-
-const handleTableResizerPointerUp = state => {
-  if (!state.tableResizerDownId) {
-    return state;
+  const name = getPreviewName(event);
+  if (name === 'list_files' && hasOwn(event, 'arguments')) {
+    return event.arguments;
   }
-  return {
-    ...state,
-    tableResizerDownId: 0
+  const payloadEvent = {
+    ...(name === undefined ? {} : {
+      name
+    }),
+    ...(shouldIncludeArguments(event, name) ? {
+      arguments: event.arguments
+    } : {}),
+    ...(hasOwn(event, 'result') ? {
+      result: event.result
+    } : {})
   };
-};
-
-const handleTableRowCopy = async (state, eventIndex) => {
-  const currentEvents = getCurrentEvents$1(state);
-  const event = currentEvents[eventIndex];
-  if (!event) {
-    return state;
+  if (Object.keys(payloadEvent).length > 0) {
+    return payloadEvent;
   }
-  const text = JSON.stringify(event, null, 2);
-  await writeClipBoardText(text);
-  return state;
+  return event;
 };
 
-const handleTimelineContextMenu = state => {
-  return state;
+const isChatMessageAddedEvent = event => {
+  return event.type === 'chat-message-added';
 };
 
-const clearTimelineSelectionState = state => {
-  return getStateWithTimelineInfo({
-    ...state,
-    timelineSelectionActive: false,
-    timelineSelectionAnchorSeconds: '',
-    timelineSelectionFocusSeconds: ''
-  });
+const isChatMessageUpdatedEvent = event => {
+  return event.type === 'chat-message-updated';
 };
 
-const parseTimelineRangePreset = value => {
-  if (!value) {
-    return {
-      timelineEndSeconds: '',
-      timelineStartSeconds: ''
-    };
+const getResponseContentText = content => {
+  if (!content || typeof content !== 'object') {
+    return undefined;
   }
-  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
-  return {
-    timelineEndSeconds,
-    timelineStartSeconds
-  };
-};
-const handleTimelineStartSeconds = (state, value) => {
-  const nextState = {
-    ...state,
-    timelineStartSeconds: value
-  };
-  return withPreservedSelection$1(state, nextState);
+  if (Array.isArray(content)) {
+    const [firstContentItem] = content;
+    if (!firstContentItem || typeof firstContentItem !== 'object') {
+      return undefined;
+    }
+    const {
+      text
+    } = firstContentItem;
+    return typeof text === 'string' ? text : undefined;
+  }
+  const {
+    text
+  } = content;
+  return typeof text === 'string' ? text : undefined;
 };
-const handleTimelineEndSeconds = (state, value) => {
-  const nextState = {
-    ...state,
-    timelineEndSeconds: value
-  };
-  return withPreservedSelection$1(state, nextState);
+const getSseResponseCompletedPreviewText = event => {
+  if (event.type !== 'sse-response-completed') {
+    return undefined;
+  }
+  const {
+    value
+  } = event;
+  if (!value || typeof value !== 'object') {
+    return undefined;
+  }
+  const {
+    response
+  } = value;
+  if (!response || typeof response !== 'object') {
+    return undefined;
+  }
+  const {
+    output
+  } = response;
+  if (!Array.isArray(output) || output.length === 0) {
+    return undefined;
+  }
+  const [firstOutput] = output;
+  if (!firstOutput || typeof firstOutput !== 'object') {
+    return undefined;
+  }
+  const {
+    content
+  } = firstOutput;
+  return getResponseContentText(content);
 };
-const handleTimelineRangePreset = (state, value) => {
-  const nextState = {
-    ...state,
-    ...parseTimelineRangePreset(value)
-  };
-  return withPreservedSelection$1(state, nextState);
+const getPreviewMessageText = event => {
+  if (isChatMessageUpdatedEvent(event) && typeof event.text === 'string') {
+    return event.text;
+  }
+  const sseResponseCompletedPreviewText = getSseResponseCompletedPreviewText(event);
+  if (sseResponseCompletedPreviewText !== undefined) {
+    return sseResponseCompletedPreviewText;
+  }
+  if (!isChatMessageAddedEvent(event)) {
+    return undefined;
+  }
+  const {
+    message
+  } = event;
+  if (!message || typeof message !== 'object') {
+    return undefined;
+  }
+  if (!Object.hasOwn(message, 'text')) {
+    return undefined;
+  }
+  const {
+    text
+  } = message;
+  if (typeof text !== 'string') {
+    return undefined;
+  }
+  return text;
 };
 
-const handleTimelineDoubleClick = state => {
-  const nextState = handleTimelineRangePreset(state, '');
-  return clearTimelineSelectionState(nextState);
+const getReadFilePreviewText = (event, name) => {
+  if (name !== 'read_file') {
+    return undefined;
+  }
+  const {
+    result
+  } = event;
+  if (typeof result !== 'string') {
+    return undefined;
+  }
+  return result;
 };
 
-const trailingZeroFractionRegex = /\.0+$/;
-const trailingFractionZeroRegex = /(\.\d*?)0+$/;
-const formatTimelinePresetValue = value => {
-  return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
+const getWriteFilePreviewText = (event, name) => {
+  if (name !== 'write_file') {
+    return undefined;
+  }
+  const {
+    arguments: toolArguments
+  } = event;
+  if (typeof toolArguments !== 'object' || toolArguments === null || !Object.hasOwn(toolArguments, 'content')) {
+    return undefined;
+  }
+  const {
+    content
+  } = toolArguments;
+  if (typeof content !== 'string') {
+    return undefined;
+  }
+  return content;
 };
 
-const getTimelineEventX = (state, eventX) => {
-  return state.x + eventX;
+const getPreviewEvent = event => {
+  const selectedEventPreview = getSelectedEventPreview(event);
+  if (selectedEventPreview !== undefined) {
+    return selectedEventPreview;
+  }
+  const previewMessageText = getPreviewMessageText(event);
+  if (previewMessageText !== undefined) {
+    return previewMessageText;
+  }
+  const name = getPreviewName(event);
+  const writeFilePreviewText = getWriteFilePreviewText(event, name);
+  if (writeFilePreviewText !== undefined) {
+    return writeFilePreviewText;
+  }
+  const readFilePreviewText = getReadFilePreviewText(event, name);
+  if (readFilePreviewText !== undefined) {
+    return readFilePreviewText;
+  }
+  const listFilesPreviewEvent = getListFilesPreviewEvent(event, name);
+  if (listFilesPreviewEvent !== undefined) {
+    return listFilesPreviewEvent;
+  }
+  return getPayloadEvent(event);
 };
 
-const getTimelineLeft = state => {
-  return state.x + viewPadding + timelineHorizontalPadding;
+const previewTextRowHeight = 20;
+const defaultPreviewTextColumnWidth = 9;
+const clamp = (value, min, max) => {
+  return Math.min(Math.max(value, min), max);
 };
-const getTimelineWidth = state => {
-  return Math.max(0, getMainWidth(state.width) - timelineHorizontalPadding * 2);
-};
-
-const getTimelineDurationSeconds = events => {
-  const eventsWithTime = getEventsWithTime(events);
-  if (eventsWithTime.length === 0) {
-    return 0;
-  }
-  const baseTime = eventsWithTime[0].time;
-  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
-  return roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
+const getPreviewTextCursorFromPoint = (value, x, y) => {
+  const lines = value.split('\n');
+  const rowIndex = clamp(Math.floor(Math.max(y, 0) / previewTextRowHeight), 0, Math.max(lines.length - 1, 0));
+  const line = lines[rowIndex] || '';
+  const columnIndex = clamp(Math.floor(Math.max(x, 0) / defaultPreviewTextColumnWidth), 0, line.length);
+  return {
+    columnIndex,
+    rowIndex
+  };
 };
-
-const getTimelineSecondsFromClientX = (events, eventX, timelineLeft, timelineWidth) => {
-  if (timelineWidth <= 0) {
-    return undefined;
-  }
-  const durationSeconds = getTimelineDurationSeconds(events);
-  const relativeX = Math.min(Math.max(eventX - timelineLeft, 0), timelineWidth);
-  const ratio = relativeX / timelineWidth;
-  return formatTimelinePresetValue(durationSeconds * ratio);
+const getPreviewTextCursorStyle = cursor => {
+  return `height: ${previewTextRowHeight}px; left: ${cursor.columnIndex * defaultPreviewTextColumnWidth}px; top: ${cursor.rowIndex * previewTextRowHeight}px; width: 0px;`;
 };
 
-const Start = 'TimelineSelectionStartHandle';
-const End = 'TimelineSelectionEndHandle';
-
-const getResizeState = (state, name) => {
-  if (state.timelineInfo.startSeconds === null || state.timelineInfo.endSeconds === null) {
-    return undefined;
-  }
-  if (name === Start) {
-    return getStateWithTimelineInfo({
-      ...state,
-      timelineSelectionActive: true,
-      timelineSelectionAnchorSeconds: formatTimelinePresetValue(state.timelineInfo.endSeconds),
-      timelineSelectionFocusSeconds: formatTimelinePresetValue(state.timelineInfo.startSeconds)
-    });
+const hasNumberedTextPreview = (state, previewEvent) => {
+  if (typeof previewEvent !== 'string') {
+    return false;
   }
-  if (name === End) {
-    return getStateWithTimelineInfo({
-      ...state,
-      timelineSelectionActive: true,
-      timelineSelectionAnchorSeconds: formatTimelinePresetValue(state.timelineInfo.startSeconds),
-      timelineSelectionFocusSeconds: formatTimelinePresetValue(state.timelineInfo.endSeconds)
-    });
+  if (previewEvent === ImageCouldNotBeLoaded) {
+    return false;
   }
-  return undefined;
+  return !state.selectedEvent || !isChatMessageUpdatedEvent(state.selectedEvent);
 };
-const handleTimelinePointerDown = (state, name, eventX) => {
-  const resizeState = getResizeState(state, name);
-  if (resizeState) {
-    return resizeState;
+const handlePreviewTextPointerDown = (state, x, y) => {
+  if (!state.selectedEvent) {
+    return state;
   }
-  const timelineLeft = getTimelineLeft(state);
-  const timelineWidth = getTimelineWidth(state);
-  const clientX = getTimelineEventX(state, eventX);
-  const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
-  if (seconds === undefined) {
+  const previewEvent = getPreviewEvent(state.selectedEvent);
+  if (!hasNumberedTextPreview(state, previewEvent)) {
     return state;
   }
-  const timelineHoverPercent = getSelectionPercent(Number.parseFloat(seconds), state.timelineInfo.durationSeconds);
-  return getStateWithTimelineInfo({
+  const cursor = getPreviewTextCursorFromPoint(previewEvent, x, y);
+  if (state.previewTextCursorColumnIndex === cursor.columnIndex && state.previewTextCursorRowIndex === cursor.rowIndex) {
+    return state;
+  }
+  return {
     ...state,
-    timelineHoverPercent,
-    timelineHoverSeconds: seconds,
-    timelineSelectionActive: true,
-    timelineSelectionAnchorSeconds: seconds,
-    timelineSelectionFocusSeconds: seconds
-  });
+    previewTextCursorColumnIndex: cursor.columnIndex,
+    previewTextCursorRowIndex: cursor.rowIndex
+  };
 };
 
-const handleTimelinePointerLeave = state => {
-  if (state.timelineHoverPercent === null && state.timelineHoverSeconds === '') {
+const handleSashPointerDown = (state, eventX, eventY) => {
+  if (state.sashPointerActive) {
     return state;
   }
   return {
     ...state,
-    timelineHoverPercent: null,
-    timelineHoverSeconds: ''
+    sashPointerActive: true
   };
 };
 
-const handleTimelinePointerMove = (state, eventX) => {
-  const timelineLeft = getTimelineLeft(state);
-  const timelineWidth = getTimelineWidth(state);
-  const clientX = getTimelineEventX(state, eventX);
-  const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
-  if (seconds === undefined) {
+const handleSashPointerMove = (state, eventX, eventY) => {
+  if (!state.sashPointerActive) {
     return state;
   }
-  const timelineHoverPercent = getSelectionPercent(Number.parseFloat(seconds), state.timelineInfo.durationSeconds);
-  if (!state.timelineSelectionActive) {
-    return {
-      ...state,
-      timelineHoverPercent,
-      timelineHoverSeconds: seconds
-    };
-  }
-  return getStateWithTimelineInfo({
+  return {
     ...state,
-    timelineHoverPercent,
-    timelineHoverSeconds: seconds,
-    timelineSelectionFocusSeconds: seconds
-  });
+    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
+  };
 };
 
-const handleTimelinePointerUp = (state, eventX) => {
-  if (!state.timelineSelectionActive) {
+const handleSashPointerUp = (state, eventX, eventY) => {
+  if (!state.sashPointerActive) {
     return state;
   }
-  const timelineLeft = getTimelineLeft(state);
-  const timelineWidth = getTimelineWidth(state);
-  const clientX = getTimelineEventX(state, eventX);
-  const focusSeconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
-  if (focusSeconds === undefined) {
-    return clearTimelineSelectionState(state);
-  }
-  const timelineHoverPercent = getSelectionPercent(Number.parseFloat(focusSeconds), state.timelineInfo.durationSeconds);
-  const anchor = Number.parseFloat(state.timelineSelectionAnchorSeconds);
-  const focus = Number.parseFloat(focusSeconds);
-  const startSeconds = formatTimelinePresetValue(Math.min(anchor, focus));
-  const endSeconds = formatTimelinePresetValue(Math.max(anchor, focus));
-  const nextState = handleTimelineRangePreset(state, `${startSeconds}:${endSeconds}`);
-  return clearTimelineSelectionState({
-    ...nextState,
-    timelineHoverPercent,
-    timelineHoverSeconds: focusSeconds
-  });
+  return {
+    ...state,
+    sashPointerActive: false
+  };
 };
 
-const setUseDevtoolsLayout = (state, checked) => {
-  const useDevtoolsLayout = getBoolean(checked);
-  const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex$1(state) : null;
+const FocusChatDebugTable = 221_139;
+
+const handleTableFocus = state => {
   return {
     ...state,
-    selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
-    selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
-    selectedEventIndex,
-    useDevtoolsLayout
+    focus: FocusChatDebugTable
   };
 };
 
-const handleShowEventStreamFinishedEvents = (state, checked) => {
+const handleTableHeaderClick = (state, value) => {
+  const {
+    sortColumn,
+    sortDescending
+  } = state;
+  if (!isTableColumn(value)) {
+    return state;
+  }
+  const newSortDescending = sortColumn === value ? !sortDescending : false;
   const nextState = {
     ...state,
-    showEventStreamFinishedEvents: getBoolean(checked)
+    sortColumn: value,
+    sortDescending: newSortDescending
   };
   return withPreservedSelection$1(state, nextState);
 };
-const handleShowInputEvents = (state, checked) => {
-  const nextState = {
+
+const getTableResizerId = name => {
+  switch (name) {
+    case 'ResizerOne':
+      return 1;
+    case 'ResizerTwo':
+      return 2;
+    default:
+      return 0;
+  }
+};
+const handleTableResizerPointerDown = (state, name, clientX) => {
+  return {
     ...state,
-    showInputEvents: getBoolean(checked)
+    tableResizerDownId: getTableResizerId(name)
   };
-  return withPreservedSelection$1(state, nextState);
 };
-const handleShowResponsePartEvents = (state, checked) => {
-  const nextState = {
+
+const handleTableResizerPointerMove = (state, clientX) => {
+  if (!state.tableResizerDownId) {
+    return state;
+  }
+  return {
     ...state,
-    showResponsePartEvents: getBoolean(checked)
+    tableColumnWidths: getResizedTableColumnWidths(state.width, state.tableWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths, state.x, clientX, state.tableResizerDownId)
   };
-  return withPreservedSelection$1(state, nextState);
 };
 
-const loadContent = async (state, savedState) => {
-  await getPreference('chatDebug.autoRefresh');
-  const nextState = await loadEventsFromUri(restoreSavedState(state, savedState));
+const handleTableResizerPointerUp = state => {
+  if (!state.tableResizerDownId) {
+    return state;
+  }
   return {
-    ...nextState,
-    categoryFilters: createCategoryFilters(getSelectedEventCategoryFilters(nextState.categoryFilters)),
-    detailTabs: createDetailTabs(getSelectedDetailTab(nextState.detailTabs), nextState.selectedEvent),
-    tableColumns: createTableColumns()
+    ...state,
+    tableResizerDownId: 0
   };
 };
 
-// cspell:ignore liga calt
-
-const getCss = state => {
-  const hasSelectedEvent = !!state.selectedEvent;
-  const tableWidth = hasSelectedEvent ? clampTableWidth(state.width, state.tableWidth) : getMainWidth(state.width);
-  const detailsWidth = hasSelectedEvent ? getDetailsWidth(state.width, state.tableWidth) : 0;
-  const topSize = state.width >= state.largeBreakpoint ? 30 : state.width >= state.mediumBreakpoint ? 60 : 60;
-  const tableColumnLayout = getTableColumnLayout(tableWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths);
-  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0] = tableColumnLayout.visibleColumnWidths;
-  const resizerOneLeft = tableColumnLayout.resizerLefts[0] ?? 0;
-  const resizerTwoLeft = tableColumnLayout.resizerLefts[1] ?? 0;
-  const {
-    selectionEndPercent,
-    selectionStartPercent
-  } = state.timelineInfo;
-  return `
-.ChatDebugView {
-  --ChatDebugViewTableHeaderHeight: ${devtoolsTableHeaderHeight}px;
-  --ChatDebugViewTableColZeroWidth: ${tableColZeroWidth}px;
-  --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
-  --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
-  --ChatDebugViewDetailsWidth: ${detailsWidth}px;
-  --ChatDebugViewDurationColumnWidth: ${state.tableColumnWidths.duration}px;
-  --ChatDebugViewTableRowHeight: ${devtoolsTableRowHeight}px;
-  --ResizerOneLeft: ${resizerOneLeft}px;
-  --ResizerTwoLeft: ${resizerTwoLeft}px;
-  --ChatDebugViewSashWidth: ${sashWidth}px;
-  --ChatDebugViewTableWidth: ${tableWidth}px;
-  --ChatDebugViewTimelineCursorGuideLeft: ${state.timelineHoverPercent ?? 0}%;
-  --ChatDebugViewTimelineSelectionEndLeft: ${selectionEndPercent ?? 0}%;
-  --ChatDebugViewTimelineSelectionStartLeft: ${selectionStartPercent ?? 0}%;
-  --ChatDebugViewTopSize: ${topSize}px;
-  --ChatDebugViewTypeColumnWidth: ${state.tableColumnWidths.type}px;
-  padding: ${viewPadding}px;
-}
-
-`;
+const handleTableRowCopy = async (state, eventIndex) => {
+  const currentEvents = getCurrentEvents$1(state);
+  const event = currentEvents[eventIndex];
+  if (!event) {
+    return state;
+  }
+  const text = JSON.stringify(event, null, 2);
+  await writeClipBoardText(text);
+  return state;
 };
 
-const renderCss = (oldState, newState) => {
-  const css = getCss(newState);
-  return [SetCss, newState.uid, css];
+const getHandleOffsetAndPercent = (tableBodyHeight, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    return {
+      handleOffset: relativeY,
+      percent: 0
+    };
+  }
+  if (relativeY <= tableBodyHeight - halfScrollBarHeight) {
+    return {
+      handleOffset: halfScrollBarHeight,
+      percent: (relativeY - halfScrollBarHeight) / Math.max(1, tableBodyHeight - scrollBarHeight)
+    };
+  }
+  return {
+    handleOffset: scrollBarHeight - tableBodyHeight + relativeY,
+    percent: 1
+  };
 };
-
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
+const handleTableScrollBarPointerDown = (state, eventY) => {
+  const currentEvents = getCurrentEvents$2(state);
+  const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
+  const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
+  if (tableBodyHeight === 0 || scrollBarHeight === 0) {
+    return state;
+  }
+  const relativeY = eventY - getTableBodyY(state, currentEvents.length > 0);
+  const {
+    handleOffset,
+    percent
+  } = getHandleOffsetAndPercent(tableBodyHeight, scrollBarHeight, relativeY);
+  const maxDeltaY = getMaxDeltaY(currentEvents.length, tableBodyHeight);
+  const nextState = setTableDeltaY(state, percent * maxDeltaY);
+  return {
+    ...nextState,
+    tableScrollBarHandleOffset: handleOffset,
+    tableScrollBarPointerActive: true
+  };
 };
 
-const text = data => {
+const handleTableScrollBarPointerMove = (state, eventY) => {
+  if (!state.tableScrollBarPointerActive) {
+    return state;
+  }
+  const currentEvents = getCurrentEvents$2(state);
+  const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
+  const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
+  if (tableBodyHeight === 0 || scrollBarHeight === 0) {
+    return state;
+  }
+  const relativeY = eventY - getTableBodyY(state, currentEvents.length > 0);
+  const nextHandleTop = Math.max(0, Math.min(tableBodyHeight - scrollBarHeight, relativeY - state.tableScrollBarHandleOffset));
+  const percent = nextHandleTop / Math.max(1, tableBodyHeight - scrollBarHeight);
+  const maxDeltaY = getMaxDeltaY(currentEvents.length, tableBodyHeight);
+  const nextState = setTableDeltaY(state, percent * maxDeltaY);
   return {
-    childCount: 0,
-    text: data,
-    type: Text
+    ...nextState,
+    tableScrollBarPointerActive: true
   };
 };
 
-const SetText = 1;
-const Replace = 2;
-const SetAttribute = 3;
-const RemoveAttribute = 4;
-const Add = 6;
-const NavigateChild = 7;
-const NavigateParent = 8;
-const RemoveChild = 9;
-const NavigateSibling = 10;
-const SetReferenceNodeUid = 11;
+const handleTableScrollBarPointerUp = state => {
+  if (!state.tableScrollBarPointerActive && state.tableScrollBarHandleOffset === 0) {
+    return state;
+  }
+  return {
+    ...state,
+    tableScrollBarHandleOffset: 0,
+    tableScrollBarPointerActive: false
+  };
+};
 
-const isKey = key => {
-  return key !== 'type' && key !== 'childCount';
+const handleTableWheel = (state, deltaY) => {
+  return setTableDeltaY(state, state.tableDeltaY + deltaY);
 };
 
-const getKeys = node => {
-  const keys = Object.keys(node).filter(isKey);
-  return keys;
+const handleTimelineContextMenu = state => {
+  return state;
 };
 
-const arrayToTree = nodes => {
-  const result = [];
-  let i = 0;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    const {
-      children,
-      nodesConsumed
-    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
-    result.push({
-      node,
-      children
-    });
-    i += 1 + nodesConsumed;
-  }
-  return result;
+const clearTimelineSelectionState = state => {
+  return getStateWithTimelineInfo({
+    ...state,
+    timelineSelectionActive: false,
+    timelineSelectionAnchorSeconds: '',
+    timelineSelectionFocusSeconds: ''
+  });
 };
-const getChildrenWithCount = (nodes, startIndex, childCount) => {
-  if (childCount === 0) {
+
+const parseTimelineRangePreset = value => {
+  if (!value) {
     return {
-      children: [],
-      nodesConsumed: 0
+      timelineEndSeconds: '',
+      timelineStartSeconds: ''
     };
   }
-  const children = [];
-  let i = startIndex;
-  let remaining = childCount;
-  let totalConsumed = 0;
-  while (remaining > 0 && i < nodes.length) {
-    const node = nodes[i];
-    const nodeChildCount = node.childCount || 0;
-    const {
-      children: nodeChildren,
-      nodesConsumed
-    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
-    children.push({
-      node,
-      children: nodeChildren
-    });
-    const nodeSize = 1 + nodesConsumed;
-    i += nodeSize;
-    totalConsumed += nodeSize;
-    remaining--;
-  }
+  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
   return {
-    children,
-    nodesConsumed: totalConsumed
+    timelineEndSeconds,
+    timelineStartSeconds
+  };
+};
+const handleTimelineStartSeconds = (state, value) => {
+  const nextState = {
+    ...state,
+    timelineStartSeconds: value
+  };
+  return withPreservedSelection$1(state, nextState);
+};
+const handleTimelineEndSeconds = (state, value) => {
+  const nextState = {
+    ...state,
+    timelineEndSeconds: value
   };
+  return withPreservedSelection$1(state, nextState);
+};
+const handleTimelineRangePreset = (state, value) => {
+  const nextState = {
+    ...state,
+    ...parseTimelineRangePreset(value)
+  };
+  return withPreservedSelection$1(state, nextState);
 };
 
-const compareNodes = (oldNode, newNode) => {
-  const patches = [];
-  // Check if node type changed - return null to signal incompatible nodes
-  // (caller should handle this with a Replace operation)
-  if (oldNode.type !== newNode.type) {
-    return null;
-  }
-  // Handle reference nodes - special handling for uid changes
-  if (oldNode.type === Reference) {
-    if (oldNode.uid !== newNode.uid) {
-      patches.push({
-        type: SetReferenceNodeUid,
-        uid: newNode.uid
-      });
-    }
-    return patches;
-  }
-  // Handle text nodes
-  if (oldNode.type === Text && newNode.type === Text) {
-    if (oldNode.text !== newNode.text) {
-      patches.push({
-        type: SetText,
-        value: newNode.text
-      });
-    }
-    return patches;
-  }
-  // Compare attributes
-  const oldKeys = getKeys(oldNode);
-  const newKeys = getKeys(newNode);
-  // Check for attribute changes
-  for (const key of newKeys) {
-    if (oldNode[key] !== newNode[key]) {
-      patches.push({
-        type: SetAttribute,
-        key,
-        value: newNode[key]
-      });
-    }
-  }
-  // Check for removed attributes
-  for (const key of oldKeys) {
-    if (!(key in newNode)) {
-      patches.push({
-        type: RemoveAttribute,
-        key
-      });
-    }
+const handleTimelineDoubleClick = state => {
+  const nextState = handleTimelineRangePreset(state, '');
+  return clearTimelineSelectionState(nextState);
+};
+
+const trailingZeroFractionRegex = /\.0+$/;
+const trailingFractionZeroRegex = /(\.\d*?)0+$/;
+const formatTimelinePresetValue = value => {
+  return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
+};
+
+const getTimelineEventX = eventX => {
+  return eventX;
+};
+
+const getTimelineLeft = state => {
+  return state.x + viewPadding + timelineHorizontalPadding;
+};
+const getTimelineWidth = state => {
+  return Math.max(0, getMainWidth(state.width) - timelineHorizontalPadding * 2);
+};
+
+const getTimelineDurationSeconds = events => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return 0;
   }
-  return patches;
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  return roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
 };
 
-const treeToArray = node => {
-  const result = [node.node];
-  for (const child of node.children) {
-    result.push(...treeToArray(child));
+const getTimelineSecondsFromClientX = (events, eventX, timelineLeft, timelineWidth) => {
+  if (timelineWidth <= 0) {
+    return undefined;
   }
-  return result;
+  const durationSeconds = getTimelineDurationSeconds(events);
+  const relativeX = Math.min(Math.max(eventX - timelineLeft, 0), timelineWidth);
+  const ratio = relativeX / timelineWidth;
+  return formatTimelinePresetValue(durationSeconds * ratio);
 };
 
-const diffChildren = (oldChildren, newChildren, patches) => {
-  const maxLength = Math.max(oldChildren.length, newChildren.length);
-  // Track where we are: -1 means at parent, >= 0 means at child index
-  let currentChildIndex = -1;
-  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
-  const indicesToRemove = [];
-  for (let i = 0; i < maxLength; i++) {
-    const oldNode = oldChildren[i];
-    const newNode = newChildren[i];
-    if (!oldNode && !newNode) {
-      continue;
-    }
-    if (!oldNode) {
-      // Add new node - we should be at the parent
-      if (currentChildIndex >= 0) {
-        // Navigate back to parent
-        patches.push({
-          type: NavigateParent
-        });
-        currentChildIndex = -1;
-      }
-      // Flatten the entire subtree so renderInternal can handle it
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Add,
-        nodes: flatNodes
-      });
-    } else if (newNode) {
-      // Compare nodes to see if we need any patches
-      const nodePatches = compareNodes(oldNode.node, newNode.node);
-      // If nodePatches is null, the node types are incompatible - need to replace
-      if (nodePatches === null) {
-        // Navigate to this child
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Replace the entire subtree
-        const flatNodes = treeToArray(newNode);
-        patches.push({
-          type: Replace,
-          nodes: flatNodes
-        });
-        // After replace, we're at the new element (same position)
-        continue;
-      }
-      // Check if we need to recurse into children
-      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
-      // Only navigate to this element if we need to do something
-      if (nodePatches.length > 0 || hasChildrenToCompare) {
-        // Navigate to this child if not already there
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Apply node patches (these apply to the current element, not children)
-        if (nodePatches.length > 0) {
-          patches.push(...nodePatches);
-        }
-        // Compare children recursively
-        if (hasChildrenToCompare) {
-          diffChildren(oldNode.children, newNode.children, patches);
-        }
-      }
-    } else {
-      // Remove old node - collect the index for later removal
-      indicesToRemove.push(i);
-    }
+const Start = 'TimelineSelectionStartHandle';
+const End = 'TimelineSelectionEndHandle';
+
+const getResizeState = (state, name) => {
+  if (state.timelineInfo.startSeconds === null || state.timelineInfo.endSeconds === null) {
+    return undefined;
   }
-  // Navigate back to parent if we ended at a child
-  if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
+  if (name === Start) {
+    return getStateWithTimelineInfo({
+      ...state,
+      timelineSelectionActive: true,
+      timelineSelectionAnchorSeconds: formatTimelinePresetValue(state.timelineInfo.endSeconds),
+      timelineSelectionFocusSeconds: formatTimelinePresetValue(state.timelineInfo.startSeconds)
     });
-    currentChildIndex = -1;
   }
-  // Add remove patches in reverse order (highest index first)
-  // This ensures indices remain valid as we remove
-  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
-    patches.push({
-      type: RemoveChild,
-      index: indicesToRemove[j]
+  if (name === End) {
+    return getStateWithTimelineInfo({
+      ...state,
+      timelineSelectionActive: true,
+      timelineSelectionAnchorSeconds: formatTimelinePresetValue(state.timelineInfo.startSeconds),
+      timelineSelectionFocusSeconds: formatTimelinePresetValue(state.timelineInfo.endSeconds)
     });
   }
+  return undefined;
 };
-const diffTrees = (oldTree, newTree, patches, path) => {
-  // At the root level (path.length === 0), we're already AT the element
-  // So we compare the root node directly, then compare its children
-  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
-    const oldNode = oldTree[0];
-    const newNode = newTree[0];
-    // Compare root nodes
-    const nodePatches = compareNodes(oldNode.node, newNode.node);
-    // If nodePatches is null, the root node types are incompatible - need to replace
-    if (nodePatches === null) {
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Replace,
-        nodes: flatNodes
-      });
-      return;
-    }
-    if (nodePatches.length > 0) {
-      patches.push(...nodePatches);
-    }
-    // Compare children
-    if (oldNode.children.length > 0 || newNode.children.length > 0) {
-      diffChildren(oldNode.children, newNode.children, patches);
-    }
-  } else {
-    // Non-root level or multiple root elements - use the regular comparison
-    diffChildren(oldTree, newTree, patches);
-  }
+const handleTimelinePointerDown = (state, name, eventX) => {
+  const resizeState = getResizeState(state, name);
+  if (resizeState) {
+    return resizeState;
+  }
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = getTimelineEventX(eventX);
+  const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (seconds === undefined) {
+    return state;
+  }
+  const timelineHoverPercent = getSelectionPercent(Number.parseFloat(seconds), state.timelineInfo.durationSeconds);
+  return getStateWithTimelineInfo({
+    ...state,
+    timelineHoverPercent,
+    timelineHoverSeconds: seconds,
+    timelineSelectionActive: true,
+    timelineSelectionAnchorSeconds: seconds,
+    timelineSelectionFocusSeconds: seconds
+  });
 };
 
-const removeTrailingNavigationPatches = patches => {
-  // Find the last non-navigation patch
-  let lastNonNavigationIndex = -1;
-  for (let i = patches.length - 1; i >= 0; i--) {
-    const patch = patches[i];
-    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
-      lastNonNavigationIndex = i;
-      break;
-    }
+const handleTimelinePointerLeave = state => {
+  if (state.timelineHoverPercent === null && state.timelineHoverSeconds === '') {
+    return state;
   }
-  // Return patches up to and including the last non-navigation patch
-  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+  return {
+    ...state,
+    timelineHoverPercent: null,
+    timelineHoverSeconds: ''
+  };
 };
 
-const diffTree = (oldNodes, newNodes) => {
-  // Step 1: Convert flat arrays to tree structures
-  const oldTree = arrayToTree(oldNodes);
-  const newTree = arrayToTree(newNodes);
-  // Step 3: Compare the trees
-  const patches = [];
-  diffTrees(oldTree, newTree, patches, []);
-  // Remove trailing navigation patches since they serve no purpose
-  return removeTrailingNavigationPatches(patches);
+const handleTimelinePointerMove = (state, eventX) => {
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = getTimelineEventX(eventX);
+  const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (seconds === undefined) {
+    return state;
+  }
+  const timelineHoverPercent = getSelectionPercent(Number.parseFloat(seconds), state.timelineInfo.durationSeconds);
+  if (!state.timelineSelectionActive) {
+    return {
+      ...state,
+      timelineHoverPercent,
+      timelineHoverSeconds: seconds
+    };
+  }
+  return getStateWithTimelineInfo({
+    ...state,
+    timelineHoverPercent,
+    timelineHoverSeconds: seconds,
+    timelineSelectionFocusSeconds: seconds
+  });
 };
 
-const ChatDebugView = 'ChatDebugView';
-const ChatDebugViewDevtools = 'ChatDebugView--devtools';
-const ChatDebugViewDetails = 'ChatDebugViewDetails';
-const ChatDebugViewDetailsBottom = 'ChatDebugViewDetailsBottom';
-const ChatDebugViewDetailsClose = 'ChatDebugViewDetailsClose';
-const EditorContainer = 'EditorContainer';
-const PanelTab = 'PanelTab';
-const PanelTabSelected = 'PanelTabSelected';
-const ChatDebugViewDetailsTabs = 'ChatDebugViewDetailsTabs';
-const ChatDebugViewDetailsTop = 'ChatDebugViewDetailsTop';
-const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
-const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
-const ChatDebugViewError = 'ChatDebugViewError';
-const EditorContent = 'EditorContent';
-const EditorInput = 'EditorInput';
-const EditorLayers = 'EditorLayers';
-const EditorRow = 'EditorRow';
-const EditorRows = 'EditorRows';
-const EditorSelection = 'EditorSelection';
-const EditorSelections = 'Selections';
-const EditorViewlet = 'Viewlet Editor';
-const ChatDebugViewEventLineNumber = 'ChatDebugViewEventLineNumber';
-const Gutter = 'Gutter';
-const TableRowSelected = 'TableRowSelected';
-const ChatDebugViewEvents = 'ChatDebugViewEvents';
-const ChatDebugViewEventsFullWidth = 'ChatDebugViewEventsFullWidth';
-const ChatDebugViewFilterInput = 'ChatDebugViewFilterInput';
-const ChatDebugViewFilterInputDevtools = 'ChatDebugViewFilterInput--devtools';
-const ChatDebugViewHeaderCell = 'TableCell';
-const ChatDebugViewImagePreview = 'ChatDebugViewImagePreview';
-const ChatDebugViewImagePreviewImageWrapper = 'ChatDebugViewImagePreviewImageWrapper';
-const ChatDebugViewImagePreviewImage = 'ChatDebugViewImagePreviewImage';
-const ChatDebugViewImagePreviewLabel = 'ChatDebugViewImagePreviewLabel';
-const ChatDebugViewRefreshButton = 'ChatDebugViewRefreshButton';
-const ChatDebugViewQuickFilterPill = 'ChatDebugViewQuickFilterPill';
-const ChatDebugViewQuickFilterPillSelected = 'ChatDebugViewQuickFilterPillSelected';
-const ChatDebugViewQuickFilters = 'ChatDebugViewQuickFilters';
-const Sash = 'Sash';
-const ChatDebugViewSashLine = 'ChatDebugViewSashLine';
-const Table = 'Table';
-const TableBody = 'TableBody';
-const TableSummary = 'TableSummary';
-const TableWrapper = 'TableWrapper';
-const TableWrapperWrapper = 'TableWrapperWrapper';
-const FocusOutline = 'FocusOutline';
-const Resizer = 'Resizer';
-const ResizerInner = 'ResizerInner';
-const ResizerOne = 'ResizerOne';
-const ResizerTwo = 'ResizerTwo';
-const TableHead = 'TableHead';
-const Resizers = 'Resizers';
-const TableCol = 'TableCol';
-const TableRow = 'TableRow';
-const TableRowOdd = 'TableRowOdd';
-const TableRowEven = 'TableRowEven';
-const ChatDebugViewTimeline = 'ChatDebugViewTimeline';
-const ChatDebugViewTimelineBadge = 'ChatDebugViewTimelineBadge';
-const ChatDebugViewTimelineBadges = 'ChatDebugViewTimelineBadges';
-const ChatDebugViewTimelineBucket = 'ChatDebugViewTimelineBucket';
-const ChatDebugViewTimelineBucketBar = 'ChatDebugViewTimelineBucketBar';
-const ChatDebugViewTimelineBucketBarSelected = 'ChatDebugViewTimelineBucketBarSelected';
-const ChatDebugViewTimelineBucketSelected = 'ChatDebugViewTimelineBucketSelected';
-const ChatDebugViewTimelineBucketUnit = 'ChatDebugViewTimelineBucketUnit';
-const ChatDebugViewTimelineBucketUnitEmpty = 'ChatDebugViewTimelineBucketUnitEmpty';
-const ChatDebugViewTimelineBuckets = 'ChatDebugViewTimelineBuckets';
-const ChatDebugViewTimelineCursorGuide = 'ChatDebugViewTimelineCursorGuide';
-const ChatDebugViewTimelineCursorGuideVisible = 'ChatDebugViewTimelineCursorGuideVisible';
-const ChatDebugViewTimelineInteractive = 'ChatDebugViewTimelineInteractive';
-const ChatDebugViewTimelineSelectionHandle = 'ChatDebugViewTimelineSelectionHandle';
-const ChatDebugViewTimelineSelectionHandleEnd = 'ChatDebugViewTimelineSelectionHandleEnd';
-const ChatDebugViewTimelineSelectionHandleStart = 'ChatDebugViewTimelineSelectionHandleStart';
-const ChatDebugViewTimelineSelectionMarker = 'ChatDebugViewTimelineSelectionMarker';
-const ChatDebugViewTimelineSelectionMarkerEnd = 'ChatDebugViewTimelineSelectionMarkerEnd';
-const ChatDebugViewTimelineSelectionMarkerStart = 'ChatDebugViewTimelineSelectionMarkerStart';
-const ChatDebugViewTimelineSelectionOverlay = 'ChatDebugViewTimelineSelectionOverlay';
-const ChatDebugViewTimelineSelectionRange = 'ChatDebugViewTimelineSelectionRange';
-const ChatDebugViewTimelineTop = 'ChatDebugViewTimelineTop';
-const ChatDebugViewTiming = 'ChatDebugViewTiming';
-const ChatDebugViewTimingLabel = 'ChatDebugViewTimingLabel';
-const ChatDebugViewTimingPreview = 'ChatDebugViewTimingPreview';
-const ChatDebugViewTimingPreviewMarker = 'ChatDebugViewTimingPreviewMarker';
-const ChatDebugViewTimingPreviewMarkerEnd = 'ChatDebugViewTimingPreviewMarkerEnd';
-const ChatDebugViewTimingPreviewMarkerStart = 'ChatDebugViewTimingPreviewMarkerStart';
-const ChatDebugViewTimingPreviewRail = 'ChatDebugViewTimingPreviewRail';
-const ChatDebugViewTimingPreviewSegment = 'ChatDebugViewTimingPreviewSegment';
-const ChatDebugViewTimingPreviewTrack = 'ChatDebugViewTimingPreviewTrack';
-const ChatDebugViewTimingPreviewTrackOverlay = 'ChatDebugViewTimingPreviewTrackOverlay';
-const ChatDebugViewTimingRow = 'ChatDebugViewTimingRow';
-const ChatDebugViewTimingValue = 'ChatDebugViewTimingValue';
-const ChatDebugViewTop = 'ChatDebugViewTop';
-const ChatDebugViewTopDevtools = 'ChatDebugViewTop--devtools';
-const TableCell = 'TableCell';
-const ChatDebugViewColumnFixed = 'ChatDebugViewColumnFixed';
-const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
-const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
-const InputBox = 'InputBox';
-const TokenBoolean = 'Token TokenBoolean';
-const TokenKey = 'Token TokenKey';
-const TokenNumeric = 'Token TokenNumeric';
-const TokenString = 'Token TokenString';
-const TokenText = 'Token TokenText';
+const handleTimelinePointerUp = (state, eventX) => {
+  if (!state.timelineSelectionActive) {
+    return state;
+  }
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = getTimelineEventX(eventX);
+  const focusSeconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (focusSeconds === undefined) {
+    return clearTimelineSelectionState(state);
+  }
+  const timelineHoverPercent = getSelectionPercent(Number.parseFloat(focusSeconds), state.timelineInfo.durationSeconds);
+  const anchor = Number.parseFloat(state.timelineSelectionAnchorSeconds);
+  const focus = Number.parseFloat(focusSeconds);
+  const startSeconds = formatTimelinePresetValue(Math.min(anchor, focus));
+  const endSeconds = formatTimelinePresetValue(Math.max(anchor, focus));
+  const nextState = handleTimelineRangePreset(state, `${startSeconds}:${endSeconds}`);
+  return clearTimelineSelectionState({
+    ...nextState,
+    timelineHoverPercent,
+    timelineHoverSeconds: focusSeconds
+  });
+};
 
-const debugErrorRootNode = {
-  childCount: 1,
-  className: ChatDebugView,
-  type: Div
+const setUseDevtoolsLayout = (state, checked) => {
+  const useDevtoolsLayout = getBoolean(checked);
+  const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex$1(state) : null;
+  return applyVirtualTableState({
+    ...state,
+    previewTextCursorColumnIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorColumnIndex : null,
+    previewTextCursorRowIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorRowIndex : null,
+    selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
+    selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
+    selectedEventIndex,
+    useDevtoolsLayout
+  });
 };
-const debugErrorMessageNode = {
-  childCount: 1,
-  className: ChatDebugViewError,
-  type: Div
+
+const handleShowEventStreamFinishedEvents = (state, checked) => {
+  const nextState = {
+    ...state,
+    showEventStreamFinishedEvents: getBoolean(checked)
+  };
+  return withPreservedSelection$1(state, nextState);
 };
-const getDebugErrorDom = errorMessage => {
-  return [debugErrorRootNode, debugErrorMessageNode, text(errorMessage)];
+const handleShowInputEvents = (state, checked) => {
+  const nextState = {
+    ...state,
+    showInputEvents: getBoolean(checked)
+  };
+  return withPreservedSelection$1(state, nextState);
+};
+const handleShowResponsePartEvents = (state, checked) => {
+  const nextState = {
+    ...state,
+    showResponsePartEvents: getBoolean(checked)
+  };
+  return withPreservedSelection$1(state, nextState);
 };
 
-const HandleEventCategoryFilter = 4;
-const HandleFilterInput = 5;
-const SelectDetailTab = 6;
-const HandleEventRowClickAt = 7;
-const HandleHeaderContextMenu = 8;
-const HandleSashPointerDown = 9;
-const HandleSashPointerMove = 10;
-const HandleSashPointerUp = 11;
-const HandleTableResizerPointerDown = 12;
-const HandleTableResizerPointerMove = 13;
-const HandleTableResizerPointerUp = 14;
-const HandleTableBodyContextMenu = 15;
-const HandleDetailsContextMenu = 16;
-const HandleTimelinePointerDown = 17;
-const HandleTimelinePointerMove = 18;
-const HandleTimelinePointerUp = 19;
-const HandleTimelineDoubleClick = 20;
-const HandleTableHeaderClick = 21;
-const HandleTimelineRangePreset = 22;
-const HandleCloseDetails = 23;
-const HandleClickRefresh = 24;
-const HandleDetailsTopContextMenu = 25;
-const HandleTimelineContextMenu = 26;
-const HandleTimelinePointerLeave = 27;
-const HandleEventRowClick = 28;
-const HandleTableFocus = 29;
-const HandleDetailTabsFocus = 30;
+const rpcId = 'handleStorageWorkerUpdate';
+const handleStorageWorkerUpdate = async uid => {
+  await invoke('Viewlet.executeViewletCommand', uid, 'ChatDebug.handleClickRefresh');
+};
 
-const getFilterInputDom = (filterValue, useDevtoolsLayout) => {
-  return {
-    autocomplete: 'off',
-    childCount: 0,
-    className: useDevtoolsLayout ? mergeClassNames(InputBox, ChatDebugViewFilterInput, ChatDebugViewFilterInputDevtools) : mergeClassNames(InputBox, ChatDebugViewFilterInput),
-    inputType: 'search',
-    name: Filter,
-    onInput: HandleFilterInput,
-    placeholder: filterEvents(),
-    type: Input,
-    value: filterValue
-  };
+const loadContentDependencies = loadEventsDependencies;
+loadContentDependencies.registerUpdateListener = registerUpdateListener;
+const loadContent = async (state, savedState) => {
+  await getPreference('chatDebug.autoRefresh');
+  const nextState = await loadEventsFromUri(restoreSavedState(state, savedState));
+  if (nextState.sessionId) {
+    try {
+      await loadContentDependencies.registerUpdateListener(nextState.sessionId, rpcId, nextState.uid);
+    } catch {
+      // ignore
+    }
+  }
+  return applyVirtualTableState({
+    ...nextState,
+    categoryFilters: createCategoryFilters(getSelectedEventCategoryFilters(nextState.categoryFilters)),
+    detailTabs: createDetailTabs(getSelectedDetailTab(nextState.detailTabs), nextState.selectedEvent),
+    tableColumns: createTableColumns()
+  });
 };
 
-const getQuickFilterDom = categoryFilter => {
+// cspell:ignore liga calt
+
+const getCss = state => {
+  const hasSelectedEvent = !!state.selectedEvent;
+  const tableWidth = hasSelectedEvent ? clampTableWidth(state.width, state.tableWidth) : getMainWidth(state.width);
+  const currentEvents = getCurrentEvents$2(state);
+  const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
+  const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
+  const maxDeltaY = getMaxDeltaY(currentEvents.length, tableBodyHeight);
+  const showScrollBar = scrollBarHeight > 0;
+  const scrollBarOffset = getScrollBarOffset(state.tableDeltaY, maxDeltaY, tableBodyHeight, scrollBarHeight);
+  const tableContentWidth = Math.max(0, tableWidth - (showScrollBar ? devtoolsTableScrollBarWidth : 0));
+  const detailsWidth = hasSelectedEvent ? getDetailsWidth(state.width, state.tableWidth) : 0;
+  const topSize = state.width >= state.largeBreakpoint ? 30 : state.width >= state.mediumBreakpoint ? 60 : 60;
+  const tableColumnLayout = getTableColumnLayout(tableContentWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths);
+  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0] = tableColumnLayout.visibleColumnWidths;
+  const resizerOneLeft = tableColumnLayout.resizerLefts[0] ?? 0;
+  const resizerTwoLeft = tableColumnLayout.resizerLefts[1] ?? 0;
   const {
-    isSelected,
-    label,
-    name
-  } = categoryFilter;
-  return [{
-    ariaSelected: isSelected,
-    childCount: 1,
-    className: mergeClassNames(ChatDebugViewQuickFilterPill, isSelected ? ChatDebugViewQuickFilterPillSelected : ''),
-    name,
-    onClick: HandleEventCategoryFilter,
-    role: Option,
-    type: Button$1
-  }, text(label)];
-};
+    selectionEndPercent,
+    selectionStartPercent
+  } = state.timelineInfo;
+  return `
+.ChatDebugView {
+  --ChatDebugViewTableBodyHeight: ${tableBodyHeight}px;
+  --ChatDebugViewTableHeaderHeight: ${devtoolsTableHeaderHeight}px;
+  --ChatDebugViewTableColZeroWidth: ${tableColZeroWidth}px;
+  --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
+  --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
+  --ChatDebugViewDetailsWidth: ${detailsWidth}px;
+  --ChatDebugViewDurationColumnWidth: ${state.tableColumnWidths.duration}px;
+  --ChatDebugViewTableRowHeight: ${devtoolsTableRowHeight}px;
+  --ChatDebugViewTableScrollBarHeight: ${scrollBarHeight}px;
+  --ChatDebugViewTableScrollBarOffset: ${scrollBarOffset}px;
+  --ChatDebugViewTableScrollBarWidth: ${showScrollBar ? devtoolsTableScrollBarWidth : 0}px;
+  --ResizerOneLeft: ${resizerOneLeft}px;
+  --ResizerTwoLeft: ${resizerTwoLeft}px;
+  --ChatDebugViewSashWidth: ${sashWidth}px;
+  --ChatDebugViewTableWidth: ${tableWidth}px;
+  --ChatDebugViewTimelineHeight: ${state.timelineHeight}px;
+  --ChatDebugViewTimelineCursorGuideLeft: ${state.timelineHoverPercent ?? 0}%;
+  --ChatDebugViewTimelineSelectionEndLeft: ${selectionEndPercent ?? 0}%;
+  --ChatDebugViewTimelineSelectionStartLeft: ${selectionStartPercent ?? 0}%;
+  --ChatDebugViewTopSize: ${topSize}px;
+  --ChatDebugViewTypeColumnWidth: ${state.tableColumnWidths.type}px;
+  padding: ${viewPadding}px;
+  padding-right: 0;
+}
 
-// cspell:ignore multiselectable
-const getQuickFilterNodes = categoryFilters => {
-  return [{
-    'aria-multiselectable': true,
-    childCount: categoryFilters.length,
-    className: ChatDebugViewQuickFilters,
-    onClick: HandleEventCategoryFilter,
-    role: ListBox,
-    type: Div
-  }, ...categoryFilters.flatMap(getQuickFilterDom)];
-};
+.TableWrapper {
+  height: calc(var(--ChatDebugViewTableHeaderHeight) + var(--ChatDebugViewTableBodyHeight));
+  overflow: hidden;
+  position: relative;
+}
 
-const refreshButtonDom = [{
-  'aria-label': refreshEvents$1(),
-  childCount: 1,
-  className: ChatDebugViewRefreshButton,
-  name: Refresh,
-  onClick: HandleClickRefresh,
-  type: Button$1,
-  value: Refresh
-}, text(refresh$1())];
-const getRefreshButtonDom = () => {
-  return refreshButtonDom;
-};
+.Table {
+  width: calc(100% - var(--ChatDebugViewTableScrollBarWidth));
+}
 
-const getDebugViewTopDom = (filterValue, useDevtoolsLayout, categoryFilters) => {
-  const refreshButtonDom = getRefreshButtonDom();
-  if (useDevtoolsLayout) {
-    const quickFilterNodes = getQuickFilterNodes(categoryFilters);
-    return [{
-      childCount: 2 + (quickFilterNodes.length > 0 ? 1 : 0),
-      className: mergeClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
-      onContextMenu: HandleHeaderContextMenu,
-      type: Search
-    }, getFilterInputDom(filterValue, true), ...quickFilterNodes, ...refreshButtonDom];
-  }
-  return [{
-    childCount: 2,
-    className: ChatDebugViewTop,
-    onContextMenu: HandleHeaderContextMenu,
-    type: Search
-  }, getFilterInputDom(filterValue, false), ...refreshButtonDom];
-};
+.ChatDebugViewTimeline {
+  contain: strict;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: var(--ChatDebugViewTimelineHeight);
+}
 
-const detailsCloseButtonDom = [{
-  'aria-label': closeDetails(),
-  childCount: 1,
-  className: ChatDebugViewDetailsClose,
-  name: CloseDetails,
-  onChange: HandleCloseDetails,
-  onClick: HandleCloseDetails,
-  type: Button$1,
-  value: 'close'
-}, {
-  childCount: 0,
-  className: 'MaskIcon MaskIconClose',
-  type: Div
-}];
-const getDetailsCloseButtonDom = () => {
-  return detailsCloseButtonDom;
-};
+.ChatDebugViewTimelineInteractive {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
 
-const getEditorSelectionDom = () => {
-  return [{
-    childCount: 1,
-    className: EditorSelections,
-    type: Div
-  }, {
-    childCount: 0,
-    className: EditorSelection,
-    style: 'height: 20px; left: 0px; top: 20px; width: 0px;',
-    type: Div
-  }];
-};
-const getGutterDom = (lineData, showLineNumbers) => {
-  const gutterNodes = showLineNumbers ? lineData.flatMap((_, index) => {
-    return [{
-      childCount: 1,
-      className: ChatDebugViewEventLineNumber,
-      type: Span
-    }, text(String(index + 1))];
-  }) : [];
-  return [{
-    childCount: showLineNumbers ? lineData.length : 0,
-    className: Gutter,
-    type: Div
-  }, ...gutterNodes];
+.TableScrollBar {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 999px;
+  height: var(--ChatDebugViewTableBodyHeight);
+  position: absolute;
+  right: 0;
+  top: var(--ChatDebugViewTableHeaderHeight);
+  width: var(--ChatDebugViewTableScrollBarWidth);
+}
+
+.TableScrollBarThumb {
+  background: rgba(255, 255, 255, 0.22);
+  border-radius: 999px;
+  height: var(--ChatDebugViewTableScrollBarHeight);
+  left: 2px;
+  position: absolute;
+  top: var(--ChatDebugViewTableScrollBarOffset);
+  width: calc(100% - 4px);
+}
+
+`;
 };
-const getEditorRowDom = line => {
-  return [{
-    childCount: line.childCount,
-    className: EditorRow,
-    type: Div
-  }, ...line.nodes];
+
+const renderCss = (oldState, newState) => {
+  const css = getCss(newState);
+  return [SetCss, newState.uid, css];
 };
-const getEditorRowsDom = lineData => {
-  return [{
-    childCount: lineData.length,
-    className: EditorRows,
-    type: Div
-  }, ...lineData.flatMap(getEditorRowDom)];
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
 };
-const getEditorDom = (lineData, showLineNumbers = true) => {
-  return [{
-    childCount: 1,
-    className: EditorContainer,
-    type: Div
-  }, {
-    childCount: 2,
-    className: EditorViewlet,
-    role: 'code',
-    type: Div
-  }, ...getGutterDom(lineData, showLineNumbers), {
-    childCount: 2,
-    className: EditorContent,
-    type: Div
-  }, {
-    'aria-autocomplete': 'list',
-    'aria-multiline': true,
-    'aria-roledescription': 'editor',
-    autocapitalize: 'off',
-    autocomplete: 'off',
-    autocorrect: 'off',
+
+const text = data => {
+  return {
     childCount: 0,
-    className: EditorInput,
-    name: 'editor',
-    role: 'textbox',
-    spellcheck: false,
-    type: TextArea,
-    wrap: 'off'
-  }, {
-    childCount: 2,
-    className: EditorLayers,
-    type: Div
-  }, ...getEditorSelectionDom(), ...getEditorRowsDom(lineData)];
+    text: data,
+    type: Text
+  };
 };
 
-const isDigit = character => {
-  return character !== undefined && character >= '0' && character <= '9';
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const SetReferenceNodeUid = 11;
+
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
 };
-const isWhitespace = character => {
-  return character === ' ' || character === '\n' || character === '\r' || character === '\t';
+
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
 };
-const getNumberEnd = (json, start) => {
-  let i = start;
-  if (json[i] === '-') {
-    i++;
+
+const arrayToTree = nodes => {
+  const result = [];
+  let i = 0;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    const {
+      children,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
+    result.push({
+      node,
+      children
+    });
+    i += 1 + nodesConsumed;
   }
-  if (json[i] === '0') {
-    i++;
-  } else {
-    if (!isDigit(json[i])) {
-      return start;
-    }
-    while (isDigit(json[i])) {
-      i++;
-    }
-  }
-  if (json[i] === '.') {
-    const decimalStart = i;
-    i++;
-    if (!isDigit(json[i])) {
-      return decimalStart;
-    }
-    while (isDigit(json[i])) {
-      i++;
-    }
+  return result;
+};
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
+    return {
+      children: [],
+      nodesConsumed: 0
+    };
   }
-  if (json[i] === 'e' || json[i] === 'E') {
-    const exponentStart = i;
-    i++;
-    if (json[i] === '+' || json[i] === '-') {
-      i++;
-    }
-    if (!isDigit(json[i])) {
-      return exponentStart;
-    }
-    while (isDigit(json[i])) {
-      i++;
-    }
+  const children = [];
+  let i = startIndex;
+  let remaining = childCount;
+  let totalConsumed = 0;
+  while (remaining > 0 && i < nodes.length) {
+    const node = nodes[i];
+    const nodeChildCount = node.childCount || 0;
+    const {
+      children: nodeChildren,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
+    children.push({
+      node,
+      children: nodeChildren
+    });
+    const nodeSize = 1 + nodesConsumed;
+    i += nodeSize;
+    totalConsumed += nodeSize;
+    remaining--;
   }
-  return i;
+  return {
+    children,
+    nodesConsumed: totalConsumed
+  };
 };
-const forEachTokenSegment = (json, onToken) => {
-  let i = 0;
-  while (i < json.length) {
-    const character = json[i];
-    if (character === '"') {
-      const start = i;
-      i++;
-      while (i < json.length) {
-        const currentCharacter = json[i];
-        if (currentCharacter === '\\') {
-          i += 2;
-          continue;
-        }
-        if (currentCharacter === '"') {
-          i++;
-          break;
-        }
-        i++;
-      }
-      let lookAheadIndex = i;
-      while (lookAheadIndex < json.length && isWhitespace(json[lookAheadIndex])) {
-        lookAheadIndex++;
-      }
-      const className = json[lookAheadIndex] === ':' ? TokenKey : TokenString;
-      onToken(className, json.slice(start, i));
-      continue;
-    }
-    const numberEnd = getNumberEnd(json, i);
-    if (numberEnd > i) {
-      onToken(TokenNumeric, json.slice(i, numberEnd));
-      i = numberEnd;
-      continue;
+
+const compareNodes = (oldNode, newNode) => {
+  const patches = [];
+  // Check if node type changed - return null to signal incompatible nodes
+  // (caller should handle this with a Replace operation)
+  if (oldNode.type !== newNode.type) {
+    return null;
+  }
+  // Handle reference nodes - special handling for uid changes
+  if (oldNode.type === Reference) {
+    if (oldNode.uid !== newNode.uid) {
+      patches.push({
+        type: SetReferenceNodeUid,
+        uid: newNode.uid
+      });
     }
-    if (json.startsWith('true', i)) {
-      onToken(TokenBoolean, 'true');
-      i += 4;
-      continue;
+    return patches;
+  }
+  // Handle text nodes
+  if (oldNode.type === Text && newNode.type === Text) {
+    if (oldNode.text !== newNode.text) {
+      patches.push({
+        type: SetText,
+        value: newNode.text
+      });
     }
-    if (json.startsWith('false', i)) {
-      onToken(TokenBoolean, 'false');
-      i += 5;
-      continue;
+    return patches;
+  }
+  // Compare attributes
+  const oldKeys = getKeys(oldNode);
+  const newKeys = getKeys(newNode);
+  // Check for attribute changes
+  for (const key of newKeys) {
+    if (oldNode[key] !== newNode[key]) {
+      patches.push({
+        type: SetAttribute,
+        key,
+        value: newNode[key]
+      });
     }
-    if (json.startsWith('null', i)) {
-      onToken(TokenBoolean, 'null');
-      i += 4;
-      continue;
+  }
+  // Check for removed attributes
+  for (const key of oldKeys) {
+    if (!(key in newNode)) {
+      patches.push({
+        type: RemoveAttribute,
+        key
+      });
     }
-    onToken(TokenText, character);
-    i++;
   }
+  return patches;
 };
 
-const getJsonLines = value => {
-  const json = JSON.stringify(value, null, 2);
-  if (!json) {
-    return [[{
-      className: TokenText,
-      value: String(json)
-    }]];
+const treeToArray = node => {
+  const result = [node.node];
+  for (const child of node.children) {
+    result.push(...treeToArray(child));
   }
-  const lines = [];
-  let currentLine = [];
-  const pushLineSegment = (className, lineValue) => {
-    if (!lineValue) {
-      return;
-    }
-    const lastSegment = currentLine.at(-1);
-    if (lastSegment && lastSegment.className === className) {
-      lastSegment.value += lineValue;
-      return;
-    }
-    currentLine.push({
-      className,
-      value: lineValue
-    });
-  };
-  forEachTokenSegment(json, (className, segmentValue) => {
-    let start = 0;
-    for (let i = 0; i < segmentValue.length; i++) {
-      if (segmentValue[i] === '\n') {
-        pushLineSegment(className, segmentValue.slice(start, i));
-        lines.push(currentLine);
-        currentLine = [];
-        start = i + 1;
-      }
-    }
-    pushLineSegment(className, segmentValue.slice(start));
-  });
-  lines.push(currentLine);
-  return lines;
-};
-const getLineContentNodes = line => {
-  return line.flatMap(segment => {
-    return [{
-      childCount: 1,
-      className: segment.className,
-      type: Span
-    }, text(segment.value)];
-  });
-};
-const isChatViewEvent = value => {
-  return typeof value === 'object' && value !== null && typeof value.type === 'string';
-};
-const getEventNode = value => {
-  const renderedValue = isChatViewEvent(value) ? {
-    ...value,
-    type: getEventTypeLabel(value)
-  } : value;
-  const lines = getJsonLines(renderedValue);
-  const lineData = lines.map(line => {
-    const lineContentNodes = getLineContentNodes(line);
-    return {
-      childCount: lineContentNodes.length / 2,
-      nodes: lineContentNodes
-    };
-  });
-  return getEditorDom(lineData);
+  return result;
 };
 
-const getPanelId = detailTab => {
-  return `ChatDebugViewDetailsPanel-${detailTab}`;
+const diffChildren = (oldChildren, newChildren, patches) => {
+  const maxLength = Math.max(oldChildren.length, newChildren.length);
+  // Track where we are: -1 means at parent, >= 0 means at child index
+  let currentChildIndex = -1;
+  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
+  const indicesToRemove = [];
+  for (let i = 0; i < maxLength; i++) {
+    const oldNode = oldChildren[i];
+    const newNode = newChildren[i];
+    if (!oldNode && !newNode) {
+      continue;
+    }
+    if (!oldNode) {
+      // Add new node - we should be at the parent
+      if (currentChildIndex >= 0) {
+        // Navigate back to parent
+        patches.push({
+          type: NavigateParent
+        });
+        currentChildIndex = -1;
+      }
+      // Flatten the entire subtree so renderInternal can handle it
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Add,
+        nodes: flatNodes
+      });
+    } else if (newNode) {
+      // Compare nodes to see if we need any patches
+      const nodePatches = compareNodes(oldNode.node, newNode.node);
+      // If nodePatches is null, the node types are incompatible - need to replace
+      if (nodePatches === null) {
+        // Navigate to this child
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Replace the entire subtree
+        const flatNodes = treeToArray(newNode);
+        patches.push({
+          type: Replace,
+          nodes: flatNodes
+        });
+        // After replace, we're at the new element (same position)
+        continue;
+      }
+      // Check if we need to recurse into children
+      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+      // Only navigate to this element if we need to do something
+      if (nodePatches.length > 0 || hasChildrenToCompare) {
+        // Navigate to this child if not already there
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Apply node patches (these apply to the current element, not children)
+        if (nodePatches.length > 0) {
+          patches.push(...nodePatches);
+        }
+        // Compare children recursively
+        if (hasChildrenToCompare) {
+          diffChildren(oldNode.children, newNode.children, patches);
+        }
+      }
+    } else {
+      // Remove old node - collect the index for later removal
+      indicesToRemove.push(i);
+    }
+  }
+  // Navigate back to parent if we ended at a child
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+    currentChildIndex = -1;
+  }
+  // Add remove patches in reverse order (highest index first)
+  // This ensures indices remain valid as we remove
+  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
+    patches.push({
+      type: RemoveChild,
+      index: indicesToRemove[j]
+    });
+  }
+};
+const diffTrees = (oldTree, newTree, patches, path) => {
+  // At the root level (path.length === 0), we're already AT the element
+  // So we compare the root node directly, then compare its children
+  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
+    const oldNode = oldTree[0];
+    const newNode = newTree[0];
+    // Compare root nodes
+    const nodePatches = compareNodes(oldNode.node, newNode.node);
+    // If nodePatches is null, the root node types are incompatible - need to replace
+    if (nodePatches === null) {
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Replace,
+        nodes: flatNodes
+      });
+      return;
+    }
+    if (nodePatches.length > 0) {
+      patches.push(...nodePatches);
+    }
+    // Compare children
+    if (oldNode.children.length > 0 || newNode.children.length > 0) {
+      diffChildren(oldNode.children, newNode.children, patches);
+    }
+  } else {
+    // Non-root level or multiple root elements - use the regular comparison
+    diffChildren(oldTree, newTree, patches);
+  }
+};
+
+const removeTrailingNavigationPatches = patches => {
+  // Find the last non-navigation patch
+  let lastNonNavigationIndex = -1;
+  for (let i = patches.length - 1; i >= 0; i--) {
+    const patch = patches[i];
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+      lastNonNavigationIndex = i;
+      break;
+    }
+  }
+  // Return patches up to and including the last non-navigation patch
+  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+};
+
+const diffTree = (oldNodes, newNodes) => {
+  // Step 1: Convert flat arrays to tree structures
+  const oldTree = arrayToTree(oldNodes);
+  const newTree = arrayToTree(newNodes);
+  // Step 3: Compare the trees
+  const patches = [];
+  diffTrees(oldTree, newTree, patches, []);
+  // Remove trailing navigation patches since they serve no purpose
+  return removeTrailingNavigationPatches(patches);
+};
+
+const ChatDebugView = 'ChatDebugView';
+const ChatDebugViewDevtools = 'ChatDebugView--devtools';
+const ChatDebugViewDetails = 'ChatDebugViewDetails';
+const ChatDebugViewDetailsBottom = 'ChatDebugViewDetailsBottom';
+const ChatDebugViewDetailsClose = 'ChatDebugViewDetailsClose';
+const EditorContainer = 'EditorContainer';
+const PanelTab = 'PanelTab';
+const PanelTabSelected = 'PanelTabSelected';
+const ChatDebugViewDetailsTabs = 'ChatDebugViewDetailsTabs';
+const ChatDebugViewDetailsTop = 'ChatDebugViewDetailsTop';
+const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
+const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
+const ChatDebugViewError = 'ChatDebugViewError';
+const EditorContent = 'EditorContent';
+const EditorInput = 'EditorInput';
+const EditorLayers = 'EditorLayers';
+const EditorRow = 'EditorRow';
+const EditorRows = 'EditorRows';
+const EditorSelection = 'EditorSelection';
+const EditorSelections = 'Selections';
+const EditorViewlet = 'Viewlet Editor';
+const ChatDebugViewEventLineNumber = 'ChatDebugViewEventLineNumber';
+const Gutter = 'Gutter';
+const TableRowSelected = 'TableRowSelected';
+const ChatDebugViewEvents = 'ChatDebugViewEvents';
+const ChatDebugViewEventsFullWidth = 'ChatDebugViewEventsFullWidth';
+const ChatDebugViewFilterInput = 'ChatDebugViewFilterInput';
+const ChatDebugViewFilterInputDevtools = 'ChatDebugViewFilterInput--devtools';
+const ChatDebugViewHeaderCell = 'TableCell';
+const ChatDebugViewImagePreview = 'ChatDebugViewImagePreview';
+const ChatDebugViewImagePreviewImageWrapper = 'ChatDebugViewImagePreviewImageWrapper';
+const ChatDebugViewImagePreviewImage = 'ChatDebugViewImagePreviewImage';
+const ChatDebugViewImagePreviewLabel = 'ChatDebugViewImagePreviewLabel';
+const ChatDebugViewRefreshButton = 'ChatDebugViewRefreshButton';
+const ChatDebugViewQuickFilterPill = 'ChatDebugViewQuickFilterPill';
+const ChatDebugViewQuickFilterPillSelected = 'ChatDebugViewQuickFilterPillSelected';
+const ChatDebugViewQuickFilters = 'ChatDebugViewQuickFilters';
+const Sash = 'Sash';
+const Table = 'Table';
+const TableBody = 'TableBody';
+const TableSummary = 'TableSummary';
+const TableScrollBar = 'TableScrollBar';
+const TableScrollBarThumb = 'TableScrollBarThumb';
+const TableWrapper = 'TableWrapper';
+const TableWrapperWrapper = 'TableWrapperWrapper';
+const FocusOutline = 'FocusOutline';
+const Resizer = 'Resizer';
+const ResizerInner = 'ResizerInner';
+const ResizerOne = 'ResizerOne';
+const ResizerTwo = 'ResizerTwo';
+const TableHead = 'TableHead';
+const Resizers = 'Resizers';
+const TableCol = 'TableCol';
+const TableRow = 'TableRow';
+const TableRowOdd = 'TableRowOdd';
+const TableRowEven = 'TableRowEven';
+const ChatDebugViewTimeline = 'ChatDebugViewTimeline';
+const ChatDebugViewTimelineBadge = 'ChatDebugViewTimelineBadge';
+const ChatDebugViewTimelineBadges = 'ChatDebugViewTimelineBadges';
+const ChatDebugViewTimelineBucket = 'ChatDebugViewTimelineBucket';
+const ChatDebugViewTimelineBucketBar = 'ChatDebugViewTimelineBucketBar';
+const ChatDebugViewTimelineBucketBarSelected = 'ChatDebugViewTimelineBucketBarSelected';
+const ChatDebugViewTimelineBucketSelected = 'ChatDebugViewTimelineBucketSelected';
+const ChatDebugViewTimelineBucketUnit = 'ChatDebugViewTimelineBucketUnit';
+const ChatDebugViewTimelineBucketUnitEmpty = 'ChatDebugViewTimelineBucketUnitEmpty';
+const ChatDebugViewTimelineBuckets = 'ChatDebugViewTimelineBuckets';
+const ChatDebugViewTimelineCursorGuide = 'ChatDebugViewTimelineCursorGuide';
+const ChatDebugViewTimelineCursorGuideVisible = 'ChatDebugViewTimelineCursorGuideVisible';
+const ChatDebugViewTimelineInteractive = 'ChatDebugViewTimelineInteractive';
+const ChatDebugViewTimelineSelectionHandle = 'ChatDebugViewTimelineSelectionHandle';
+const ChatDebugViewTimelineSelectionHandleEnd = 'ChatDebugViewTimelineSelectionHandleEnd';
+const ChatDebugViewTimelineSelectionHandleStart = 'ChatDebugViewTimelineSelectionHandleStart';
+const ChatDebugViewTimelineSelectionMarker = 'ChatDebugViewTimelineSelectionMarker';
+const ChatDebugViewTimelineSelectionMarkerEnd = 'ChatDebugViewTimelineSelectionMarkerEnd';
+const ChatDebugViewTimelineSelectionMarkerStart = 'ChatDebugViewTimelineSelectionMarkerStart';
+const ChatDebugViewTimelineSelectionOverlay = 'ChatDebugViewTimelineSelectionOverlay';
+const ChatDebugViewTimelineSelectionRange = 'ChatDebugViewTimelineSelectionRange';
+const ChatDebugViewTiming = 'ChatDebugViewTiming';
+const ChatDebugViewTimingLabel = 'ChatDebugViewTimingLabel';
+const ChatDebugViewTimingPreview = 'ChatDebugViewTimingPreview';
+const ChatDebugViewTimingPreviewMarker = 'ChatDebugViewTimingPreviewMarker';
+const ChatDebugViewTimingPreviewMarkerEnd = 'ChatDebugViewTimingPreviewMarkerEnd';
+const ChatDebugViewTimingPreviewMarkerStart = 'ChatDebugViewTimingPreviewMarkerStart';
+const ChatDebugViewTimingPreviewRail = 'ChatDebugViewTimingPreviewRail';
+const ChatDebugViewTimingPreviewSegment = 'ChatDebugViewTimingPreviewSegment';
+const ChatDebugViewTimingPreviewTrack = 'ChatDebugViewTimingPreviewTrack';
+const ChatDebugViewTimingPreviewTrackOverlay = 'ChatDebugViewTimingPreviewTrackOverlay';
+const ChatDebugViewTimingRow = 'ChatDebugViewTimingRow';
+const ChatDebugViewTimingValue = 'ChatDebugViewTimingValue';
+const ChatDebugViewTop = 'ChatDebugViewTop';
+const ChatDebugViewTopDevtools = 'ChatDebugViewTop--devtools';
+const TableCell = 'TableCell';
+const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
+const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
+const InputBox = 'InputBox';
+const TokenBoolean = 'Token TokenBoolean';
+const TokenKey = 'Token TokenKey';
+const TokenNumeric = 'Token TokenNumeric';
+const TokenString = 'Token TokenString';
+const TokenText = 'Token TokenText';
+
+const debugErrorRootNode = {
+  childCount: 1,
+  className: ChatDebugView,
+  type: Div
+};
+const debugErrorMessageNode = {
+  childCount: 1,
+  className: ChatDebugViewError,
+  type: Div
+};
+const getDebugErrorDom = errorMessage => {
+  return [debugErrorRootNode, debugErrorMessageNode, text(errorMessage)];
+};
+
+const HandleEventCategoryFilter = 4;
+const HandleFilterInput = 5;
+const SelectDetailTab = 6;
+const HandleEventRowClickAt = 7;
+const HandleHeaderContextMenu = 8;
+const HandleSashPointerDown = 9;
+const HandleSashPointerMove = 10;
+const HandleSashPointerUp = 11;
+const HandleTableResizerPointerDown = 12;
+const HandleTableResizerPointerMove = 13;
+const HandleTableResizerPointerUp = 14;
+const HandleTableBodyContextMenu = 15;
+const HandleDetailsContextMenu = 16;
+const HandleTimelinePointerDown = 17;
+const HandleTimelinePointerMove = 18;
+const HandleTimelinePointerUp = 19;
+const HandleTimelineDoubleClick = 20;
+const HandleTableHeaderClick = 21;
+const HandleTimelineRangePreset = 22;
+const HandleCloseDetails = 23;
+const HandleClickRefresh = 24;
+const HandleDetailsTopContextMenu = 25;
+const HandleTimelineContextMenu = 26;
+const HandleTimelinePointerLeave = 27;
+const HandleEventRowClick = 28;
+const HandleTableFocus = 29;
+const HandleDetailTabsFocus = 30;
+const HandlePreviewTextPointerDown = 31;
+const HandleTableScrollBarPointerDown = 32;
+const HandleTableScrollBarPointerMove = 33;
+const HandleTableScrollBarPointerUp = 34;
+const HandleTableWheel = 35;
+
+const getFilterInputDom = (filterValue, useDevtoolsLayout) => {
+  return {
+    autocomplete: 'off',
+    childCount: 0,
+    className: useDevtoolsLayout ? mergeClassNames(InputBox, ChatDebugViewFilterInput, ChatDebugViewFilterInputDevtools) : mergeClassNames(InputBox, ChatDebugViewFilterInput),
+    inputType: 'search',
+    name: Filter,
+    onInput: HandleFilterInput,
+    placeholder: filterEvents(),
+    type: Input,
+    value: filterValue
+  };
+};
+
+const getQuickFilterDom = categoryFilter => {
+  const {
+    isSelected,
+    label,
+    name
+  } = categoryFilter;
+  return [{
+    ariaSelected: isSelected,
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewQuickFilterPill, isSelected ? ChatDebugViewQuickFilterPillSelected : ''),
+    name,
+    onClick: HandleEventCategoryFilter,
+    role: Option,
+    type: Button$1
+  }, text(label)];
 };
 
-const getPreviewName = event => {
-  if (typeof event.name === 'string' && event.name) {
-    return event.name;
-  }
-  if (typeof event.toolName === 'string' && event.toolName) {
-    return event.toolName;
-  }
-  return undefined;
+// cspell:ignore multiselectable
+const getQuickFilterNodes = categoryFilters => {
+  return [{
+    'aria-multiselectable': true,
+    childCount: categoryFilters.length,
+    className: ChatDebugViewQuickFilters,
+    onClick: HandleEventCategoryFilter,
+    role: ListBox,
+    type: Div
+  }, ...categoryFilters.flatMap(getQuickFilterDom)];
 };
 
-const hasOwn = (event, key) => {
-  return Object.hasOwn(event, key);
+const refreshButtonDom = [{
+  'aria-label': refreshEvents$1(),
+  childCount: 1,
+  className: ChatDebugViewRefreshButton,
+  name: Refresh,
+  onClick: HandleClickRefresh,
+  type: Button$1,
+  value: Refresh
+}, text(refresh$1())];
+const getRefreshButtonDom = () => {
+  return refreshButtonDom;
 };
 
-const shouldIncludeArguments = (event, name) => {
-  if (!hasOwn(event, 'arguments')) {
-    return false;
-  }
-  if (name === 'getWorkspaceUri') {
-    return false;
+const getDebugViewTopDom = (filterValue, useDevtoolsLayout, categoryFilters) => {
+  const refreshButtonDom = getRefreshButtonDom();
+  if (useDevtoolsLayout) {
+    const quickFilterNodes = getQuickFilterNodes(categoryFilters);
+    return [{
+      childCount: 2 + (quickFilterNodes.length > 0 ? 1 : 0),
+      className: mergeClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
+      onContextMenu: HandleHeaderContextMenu,
+      type: Search
+    }, getFilterInputDom(filterValue, true), ...quickFilterNodes, ...refreshButtonDom];
   }
-  return true;
+  return [{
+    childCount: 2,
+    className: ChatDebugViewTop,
+    onContextMenu: HandleHeaderContextMenu,
+    type: Search
+  }, getFilterInputDom(filterValue, false), ...refreshButtonDom];
 };
 
-const getPayloadEvent = event => {
-  const name = getPreviewName(event);
-  if (name === 'list_files' && hasOwn(event, 'arguments')) {
-    return event.arguments;
-  }
-  const payloadEvent = {
-    ...(name === undefined ? {} : {
-      name
-    }),
-    ...(shouldIncludeArguments(event, name) ? {
-      arguments: event.arguments
-    } : {}),
-    ...(hasOwn(event, 'result') ? {
-      result: event.result
-    } : {})
-  };
-  if (Object.keys(payloadEvent).length > 0) {
-    return payloadEvent;
-  }
-  return event;
+const detailsCloseButtonDom = [{
+  'aria-label': closeDetails(),
+  childCount: 1,
+  className: ChatDebugViewDetailsClose,
+  name: CloseDetails,
+  onChange: HandleCloseDetails,
+  onClick: HandleCloseDetails,
+  type: Button$1,
+  value: 'close'
+}, {
+  childCount: 0,
+  className: 'MaskIcon MaskIconClose',
+  type: Div
+}];
+const getDetailsCloseButtonDom = () => {
+  return detailsCloseButtonDom;
 };
 
-const getListFilesPreviewEvent = (event, name) => {
-  if (name !== 'list_files') {
-    return undefined;
-  }
-  const {
-    result
-  } = event;
-  if (typeof result !== 'object' || result === null) {
-    return undefined;
-  }
-  const {
-    entries,
-    error
-  } = result;
-  if (entries !== undefined) {
-    return entries;
-  }
-  return error;
+const defaultEditorCursor = {
+  columnIndex: 0,
+  rowIndex: 1
 };
-
-const isChatMessageAddedEvent = event => {
-  return event.type === 'chat-message-added';
+const getEditorSelectionDom = (cursor = defaultEditorCursor) => {
+  const hasCursor = cursor !== null;
+  return [{
+    childCount: hasCursor ? 1 : 0,
+    className: EditorSelections,
+    type: Div
+  }, ...(hasCursor ? [{
+    childCount: 0,
+    className: EditorSelection,
+    style: getPreviewTextCursorStyle(cursor),
+    type: Div
+  }] : [])];
 };
-
-const isChatMessageUpdatedEvent = event => {
-  return event.type === 'chat-message-updated';
+const getGutterDom = (lineData, showLineNumbers) => {
+  const gutterNodes = showLineNumbers ? lineData.flatMap((_, index) => {
+    return [{
+      childCount: 1,
+      className: ChatDebugViewEventLineNumber,
+      type: Span
+    }, text(String(index + 1))];
+  }) : [];
+  return [{
+    childCount: showLineNumbers ? lineData.length : 0,
+    className: Gutter,
+    type: Div
+  }, ...gutterNodes];
 };
-
-const getResponseContentText = content => {
-  if (!content || typeof content !== 'object') {
-    return undefined;
-  }
-  if (Array.isArray(content)) {
-    const [firstContentItem] = content;
-    if (!firstContentItem || typeof firstContentItem !== 'object') {
-      return undefined;
-    }
-    const {
-      text
-    } = firstContentItem;
-    return typeof text === 'string' ? text : undefined;
-  }
-  const {
-    text
-  } = content;
-  return typeof text === 'string' ? text : undefined;
+const getEditorRowDom = line => {
+  return [{
+    childCount: line.childCount,
+    className: EditorRow,
+    type: Div
+  }, ...line.nodes];
 };
-const getSseResponseCompletedPreviewText = event => {
-  if (event.type !== 'sse-response-completed') {
-    return undefined;
-  }
-  const {
-    value
-  } = event;
-  if (!value || typeof value !== 'object') {
-    return undefined;
-  }
-  const {
-    response
-  } = value;
-  if (!response || typeof response !== 'object') {
-    return undefined;
-  }
-  const {
-    output
-  } = response;
-  if (!Array.isArray(output) || output.length === 0) {
-    return undefined;
-  }
-  const [firstOutput] = output;
-  if (!firstOutput || typeof firstOutput !== 'object') {
-    return undefined;
-  }
-  const {
-    content
-  } = firstOutput;
-  return getResponseContentText(content);
+const getEditorRowsDom = lineData => {
+  return [{
+    childCount: lineData.length,
+    className: EditorRows,
+    type: Div
+  }, ...lineData.flatMap(getEditorRowDom)];
 };
-const getPreviewMessageText = event => {
-  if (isChatMessageUpdatedEvent(event) && typeof event.text === 'string') {
-    return event.text;
-  }
-  const sseResponseCompletedPreviewText = getSseResponseCompletedPreviewText(event);
-  if (sseResponseCompletedPreviewText !== undefined) {
-    return sseResponseCompletedPreviewText;
-  }
-  if (!isChatMessageAddedEvent(event)) {
-    return undefined;
-  }
-  const {
-    message
-  } = event;
-  if (!message || typeof message !== 'object') {
-    return undefined;
-  }
-  if (!Object.hasOwn(message, 'text')) {
-    return undefined;
-  }
-  const {
-    text
-  } = message;
-  if (typeof text !== 'string') {
-    return undefined;
-  }
-  return text;
+const getEditorDom = (lineData, showLineNumbers = true, cursor = defaultEditorCursor, onPointerDown) => {
+  return [{
+    childCount: 1,
+    className: EditorContainer,
+    type: Div
+  }, {
+    childCount: 2,
+    className: EditorViewlet,
+    role: 'code',
+    type: Div
+  }, ...getGutterDom(lineData, showLineNumbers), {
+    childCount: 2,
+    className: EditorContent,
+    onPointerDown,
+    type: Div
+  }, {
+    'aria-autocomplete': 'list',
+    'aria-multiline': true,
+    'aria-roledescription': 'editor',
+    autocapitalize: 'off',
+    autocomplete: 'off',
+    autocorrect: 'off',
+    childCount: 0,
+    className: EditorInput,
+    name: 'editor',
+    role: 'textbox',
+    spellcheck: false,
+    type: TextArea,
+    wrap: 'off'
+  }, {
+    childCount: 2,
+    className: EditorLayers,
+    type: Div
+  }, ...getEditorSelectionDom(cursor), ...getEditorRowsDom(lineData)];
 };
 
-const getReadFilePreviewText = (event, name) => {
-  if (name !== 'read_file') {
-    return undefined;
+const isDigit = character => {
+  return character !== undefined && character >= '0' && character <= '9';
+};
+const isWhitespace = character => {
+  return character === ' ' || character === '\n' || character === '\r' || character === '\t';
+};
+const getNumberEnd = (json, start) => {
+  let i = start;
+  if (json[i] === '-') {
+    i++;
   }
-  const {
-    result
-  } = event;
-  if (typeof result !== 'string') {
-    return undefined;
+  if (json[i] === '0') {
+    i++;
+  } else {
+    if (!isDigit(json[i])) {
+      return start;
+    }
+    while (isDigit(json[i])) {
+      i++;
+    }
   }
-  return result;
-};
-
-const getWriteFilePreviewText = (event, name) => {
-  if (name !== 'write_file') {
-    return undefined;
+  if (json[i] === '.') {
+    const decimalStart = i;
+    i++;
+    if (!isDigit(json[i])) {
+      return decimalStart;
+    }
+    while (isDigit(json[i])) {
+      i++;
+    }
   }
-  const {
-    arguments: toolArguments
-  } = event;
-  if (typeof toolArguments !== 'object' || toolArguments === null || !Object.hasOwn(toolArguments, 'content')) {
-    return undefined;
+  if (json[i] === 'e' || json[i] === 'E') {
+    const exponentStart = i;
+    i++;
+    if (json[i] === '+' || json[i] === '-') {
+      i++;
+    }
+    if (!isDigit(json[i])) {
+      return exponentStart;
+    }
+    while (isDigit(json[i])) {
+      i++;
+    }
   }
-  const {
-    content
-  } = toolArguments;
-  if (typeof content !== 'string') {
-    return undefined;
+  return i;
+};
+const forEachTokenSegment = (json, onToken) => {
+  let i = 0;
+  while (i < json.length) {
+    const character = json[i];
+    if (character === '"') {
+      const start = i;
+      i++;
+      while (i < json.length) {
+        const currentCharacter = json[i];
+        if (currentCharacter === '\\') {
+          i += 2;
+          continue;
+        }
+        if (currentCharacter === '"') {
+          i++;
+          break;
+        }
+        i++;
+      }
+      let lookAheadIndex = i;
+      while (lookAheadIndex < json.length && isWhitespace(json[lookAheadIndex])) {
+        lookAheadIndex++;
+      }
+      const className = json[lookAheadIndex] === ':' ? TokenKey : TokenString;
+      onToken(className, json.slice(start, i));
+      continue;
+    }
+    const numberEnd = getNumberEnd(json, i);
+    if (numberEnd > i) {
+      onToken(TokenNumeric, json.slice(i, numberEnd));
+      i = numberEnd;
+      continue;
+    }
+    if (json.startsWith('true', i)) {
+      onToken(TokenBoolean, 'true');
+      i += 4;
+      continue;
+    }
+    if (json.startsWith('false', i)) {
+      onToken(TokenBoolean, 'false');
+      i += 5;
+      continue;
+    }
+    if (json.startsWith('null', i)) {
+      onToken(TokenBoolean, 'null');
+      i += 4;
+      continue;
+    }
+    onToken(TokenText, character);
+    i++;
   }
-  return content;
 };
 
-const getPreviewEvent = event => {
-  const selectedEventPreview = getSelectedEventPreview(event);
-  if (selectedEventPreview !== undefined) {
-    return selectedEventPreview;
-  }
-  const previewMessageText = getPreviewMessageText(event);
-  if (previewMessageText !== undefined) {
-    return previewMessageText;
-  }
-  const name = getPreviewName(event);
-  const writeFilePreviewText = getWriteFilePreviewText(event, name);
-  if (writeFilePreviewText !== undefined) {
-    return writeFilePreviewText;
-  }
-  const readFilePreviewText = getReadFilePreviewText(event, name);
-  if (readFilePreviewText !== undefined) {
-    return readFilePreviewText;
-  }
-  const listFilesPreviewEvent = getListFilesPreviewEvent(event, name);
-  if (listFilesPreviewEvent !== undefined) {
-    return listFilesPreviewEvent;
+const getJsonLines = value => {
+  const json = JSON.stringify(value, null, 2);
+  if (!json) {
+    return [[{
+      className: TokenText,
+      value: String(json)
+    }]];
   }
-  return getPayloadEvent(event);
+  const lines = [];
+  let currentLine = [];
+  const pushLineSegment = (className, lineValue) => {
+    if (!lineValue) {
+      return;
+    }
+    const lastSegment = currentLine.at(-1);
+    if (lastSegment && lastSegment.className === className) {
+      lastSegment.value += lineValue;
+      return;
+    }
+    currentLine.push({
+      className,
+      value: lineValue
+    });
+  };
+  forEachTokenSegment(json, (className, segmentValue) => {
+    let start = 0;
+    for (let i = 0; i < segmentValue.length; i++) {
+      if (segmentValue[i] === '\n') {
+        pushLineSegment(className, segmentValue.slice(start, i));
+        lines.push(currentLine);
+        currentLine = [];
+        start = i + 1;
+      }
+    }
+    pushLineSegment(className, segmentValue.slice(start));
+  });
+  lines.push(currentLine);
+  return lines;
+};
+const getLineContentNodes = line => {
+  return line.flatMap(segment => {
+    return [{
+      childCount: 1,
+      className: segment.className,
+      type: Span
+    }, text(segment.value)];
+  });
+};
+const isChatViewEvent = value => {
+  return typeof value === 'object' && value !== null && typeof value.type === 'string';
+};
+const getEventNode = value => {
+  const renderedValue = isChatViewEvent(value) ? {
+    ...value,
+    type: getEventTypeLabel(value)
+  } : value;
+  const lines = getJsonLines(renderedValue);
+  const lineData = lines.map(line => {
+    const lineContentNodes = getLineContentNodes(line);
+    return {
+      childCount: lineContentNodes.length / 2,
+      nodes: lineContentNodes
+    };
+  });
+  return getEditorDom(lineData);
+};
+
+const getPanelId = detailTab => {
+  return `ChatDebugViewDetailsPanel-${detailTab}`;
 };
 
 const isAttachmentImagePreview = value => {
@@ -4955,11 +5411,11 @@ const getImagePreviewDom = preview => {
   }, ...getImagePreviewLabelDom(preview)];
 };
 
-const getTextNode = (value, showLineNumbers = true) => {
+const getTextNode = (value, showLineNumbers = true, cursor = null) => {
   const lines = value.split('\n');
   const lineData = lines.map(line => {
     return {
-      childCount: 2,
+      childCount: 1,
       nodes: [{
         childCount: 1,
         className: TokenText,
@@ -4967,15 +5423,15 @@ const getTextNode = (value, showLineNumbers = true) => {
       }, text(line)]
     };
   });
-  return getEditorDom(lineData, showLineNumbers);
+  return getEditorDom(lineData, showLineNumbers, cursor, showLineNumbers ? HandlePreviewTextPointerDown : undefined);
 };
 
-const getPreviewEventNodes = (previewEvent, selectedEvent) => {
+const getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor) => {
   if (typeof previewEvent === 'string') {
     const isInvalidImageMessage = previewEvent === ImageCouldNotBeLoaded;
     const isChatMessageUpdatedPreview = !!selectedEvent && isChatMessageUpdatedEvent(selectedEvent);
     const showLineNumbers = !isInvalidImageMessage && !isChatMessageUpdatedPreview;
-    return getTextNode(previewEvent, showLineNumbers);
+    return getTextNode(previewEvent, showLineNumbers, showLineNumbers ? previewTextCursor ?? null : null);
   }
   if (previewEvent === undefined) {
     return [];
@@ -5151,7 +5607,7 @@ const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
   }
   return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
 };
-const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs()) => {
+const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs(), previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null) => {
   if (previewEventNodes.length === 0 && payloadEventNodes.length === 0 && responseEventNodes.length === 0) {
     return [];
   }
@@ -5172,7 +5628,10 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
       if (selectedEvent === null) {
         return [];
       }
-      return getPreviewEventNodes(getPreviewEvent(selectedEvent), selectedEvent);
+      return getPreviewEventNodes(getPreviewEvent(selectedEvent), selectedEvent, previewTextCursorRowIndex === null || previewTextCursorColumnIndex === null ? null : {
+        columnIndex: previewTextCursorColumnIndex,
+        rowIndex: previewTextCursorRowIndex
+      });
     };
     const getDetailContentDomPayload = () => {
       if (payloadEventNodes.length > 0) {
@@ -5218,7 +5677,6 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
 const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
   return orderedVisibleTableColumns.flatMap((column, index) => {
-    const isFixed = index < orderedVisibleTableColumns.length - 1;
     switch (column) {
       case Duration:
         return [{
@@ -5229,7 +5687,7 @@ const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
       case Status$1:
         return [{
           childCount: 1,
-          className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : '', isFixed ? ChatDebugViewColumnFixed : ''),
+          className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
           type: Td
         }, text(getStatusText(event))];
       case Type:
@@ -5244,16 +5702,18 @@ const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
   });
 };
 
-const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defaultVisibleTableColumns) => {
+const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defaultVisibleTableColumns, startIndex = 0) => {
   return events.flatMap((event, i) => {
-    const isEvenRow = i % 2 === 1;
+    const actualIndex = startIndex + i;
+    const isEvenRow = actualIndex % 2 === 1;
     const rowClassName = isEvenRow ? TableRowEven : TableRowOdd;
-    const isSelected = selectedEventIndex === i;
+    const isSelected = selectedEventIndex === actualIndex;
     const isErrorStatus = hasErrorStatus(event);
     const rowCellNodes = getRowCellNodes(event, isErrorStatus, visibleTableColumns);
     return [{
       childCount: visibleTableColumns.length,
       className: mergeClassNames(TableRow, rowClassName, isSelected ? TableRowSelected : ''),
+      'data-index': `${actualIndex}`,
       type: Tr
     }, ...rowCellNodes];
   });
@@ -5273,15 +5733,25 @@ const getEventsClassName = hasSelectedEvent => {
   return widthClassName;
 };
 
+const getResponseEvent = event => {
+  const {
+    responseEvent
+  } = event;
+  if (responseEvent && typeof responseEvent === 'object' && typeof responseEvent.type === 'string') {
+    const mergedResponseEvent = responseEvent;
+    if (mergedResponseEvent.value !== undefined) {
+      return mergedResponseEvent.value;
+    }
+    return responseEvent;
+  }
+  return event;
+};
+
 const sashNodesDom = [{
-  childCount: 1,
+  childCount: 0,
   className: Sash,
   onPointerDown: HandleSashPointerDown,
   type: Button$1
-}, {
-  childCount: 0,
-  className: ChatDebugViewSashLine,
-  type: Div
 }];
 const getSashNodesDom = hasSelectedEvent => {
   if (!hasSelectedEvent) {
@@ -5479,26 +5949,43 @@ const getTableResizersDom = visibleTableColumns => {
   }, ...resizerNodes];
 };
 
-const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '') => {
+const getTableScrollBarDom = visible => {
+  if (!visible) {
+    return [];
+  }
+  return [{
+    childCount: 1,
+    className: TableScrollBar,
+    onPointerDown: HandleTableScrollBarPointerDown,
+    type: Div
+  }, {
+    childCount: 0,
+    className: TableScrollBarThumb,
+    type: Div
+  }];
+};
+
+const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '', showScrollBar = false) => {
   const tableWrapperClassName = mergeClassNames(TableWrapper, focus === FocusChatDebugTable ? FocusOutline : '', className);
   const tableWrapperNode = {
-    childCount: 2,
+    childCount: showScrollBar ? 3 : 2,
     className: tableWrapperClassName,
+    onWheel: HandleTableWheel,
     type: Div,
     ...(role ? {
       role
     } : {})
   };
-  return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus), ...getTableResizersDom(visibleTableColumns)];
+  return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus), ...getTableResizersDom(visibleTableColumns), ...getTableScrollBarDom(showScrollBar)];
 };
 
-const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '') => {
+const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '', showScrollBar = false) => {
   const tableSummaryNodes = getTableSummaryDom(summary);
   return [{
     childCount: tableSummaryNodes.length === 0 ? 1 : 2,
     className: TableWrapperWrapper,
     type: Div
-  }, ...getTableWrapperDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus, className, role), ...tableSummaryNodes];
+  }, ...getTableWrapperDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus, className, role, showScrollBar), ...tableSummaryNodes];
 };
 
 const getBucketUnitDom = (unitCount, presetValue) => {
@@ -5624,36 +6111,31 @@ const getTimelineBadgeNodes = timelineInfo => {
 };
 
 const getTimelineSummary = timelineInfo => {
+  if (timelineInfo.durationSeconds === 0) {
+    return '';
+  }
   if (timelineInfo.hasSelection && timelineInfo.startSeconds !== null && timelineInfo.endSeconds !== null) {
     return windowSummary(formatTimelineSeconds(timelineInfo.startSeconds), formatTimelineSeconds(timelineInfo.endSeconds), formatTimelineSeconds(timelineInfo.durationSeconds));
   }
   return windowSummary('0s', formatTimelineSeconds(timelineInfo.durationSeconds), formatTimelineSeconds(timelineInfo.durationSeconds));
 };
 
-const getTimelineTopDom = timelineInfo => {
-  return [{
-    childCount: 1,
-    className: ChatDebugViewTimelineTop,
-    type: Div
-  }, text(getTimelineSummary(timelineInfo))];
-};
-
 // cspell:ignore gettimelinedom
 const getTimelineDom = (timelineInfo, hoverPercent = null) => {
   if (timelineInfo.buckets.length === 0) {
     return [];
   }
+  const summary = getTimelineSummary(timelineInfo);
   const badgeNodes = getTimelineBadgeNodes(timelineInfo);
   const bucketNodes = getBucketsDom(timelineInfo.buckets);
   const selectionNodes = getSelectionNodesDom(timelineInfo.hasSelection, timelineInfo.selectionStartPercent, timelineInfo.selectionEndPercent);
   const cursorGuideNodes = getCursorGuideNodes(hoverPercent);
-  const timelineTopDom = getTimelineTopDom(timelineInfo);
   return [{
-    childCount: 2,
+    childCount: summary ? 2 : 1,
     className: ChatDebugViewTimeline,
     onContextMenu: HandleTimelineContextMenu,
     type: Section
-  }, ...timelineTopDom, {
+  }, ...(summary ? [text(summary)] : []), {
     childCount: 3,
     className: ChatDebugViewTimelineInteractive,
     onDblClick: HandleTimelineDoubleClick,
@@ -5674,20 +6156,25 @@ const getTimelineDom = (timelineInfo, hoverPercent = null) => {
   }, ...selectionNodes];
 };
 
-const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', detailTabs = createDetailTabs(), visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0) => {
-  const rowNodes = getDevtoolsRows(events, selectedEventIndex, visibleTableColumns);
+const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', detailTabs = createDetailTabs(), visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, minLineY = 0, maxLineY = events.length) => {
+  const visibleEvents = events.slice(minLineY, maxLineY);
+  const rowNodes = getDevtoolsRows(visibleEvents, selectedEventIndex, visibleTableColumns, minLineY);
   const effectiveRange = getEffectiveTimelineRange(timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
   const resolvedTimelineInfo = timelineInfo || getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
   const timelineNodes = getTimelineDom(resolvedTimelineInfo, timelineHoverPercent);
   const previewEvent = selectedEvent ? getPreviewEvent(selectedEvent) : undefined;
-  const previewEventNodes = getPreviewEventNodes(previewEvent, selectedEvent);
+  const previewEventNodes = getPreviewEventNodes(previewEvent, selectedEvent, previewTextCursorRowIndex === null || previewTextCursorColumnIndex === null ? null : {
+    columnIndex: previewTextCursorColumnIndex,
+    rowIndex: previewTextCursorRowIndex
+  });
   const payloadEventNodes = selectedEvent ? getEventNode(getPayloadEvent(selectedEvent)) : [];
-  const responseEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
+  const responseEventNodes = selectedEvent ? getEventNode(getResponseEvent(selectedEvent)) : [];
   const hasSelectedEvent = responseEventNodes.length > 0;
   const eventsClassName = getEventsClassName(hasSelectedEvent);
   const summary = getTableSummary(events);
-  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableWrapperWrapperDom(rowNodes, events.length, visibleTableColumns, tableColumns, summary, focus);
-  const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs);
+  const showScrollBar = visibleEvents.length < events.length;
+  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableWrapperWrapperDom(rowNodes, visibleEvents.length, visibleTableColumns, tableColumns, summary, focus, '', '', showScrollBar);
+  const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs, previewTextCursorRowIndex, previewTextCursorColumnIndex);
   const sashNodes = getSashNodesDom(hasSelectedEvent);
   const splitChildCount = hasSelectedEvent ? 3 : 1;
   const rootChildCount = 3;
@@ -5741,7 +6228,7 @@ const getEventCategoryFilterDescription = eventCategoryFilters => {
   }
   return eventCategoryFilters.map(eventCategoryFilter => getEventCategoryFilterLabel(eventCategoryFilter).toLowerCase()).join(', ');
 };
-const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, categoryFilters, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineFilterDescription, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0) => {
+const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, categoryFilters, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineFilterDescription, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, minLineY = 0, maxLineY = events.length) => {
   if (errorMessage) {
     return getDebugErrorDom(errorMessage);
   }
@@ -5765,7 +6252,7 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   const emptyMessage = getEmptyMessage(events.length, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage);
   const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
   if (useDevtoolsLayout) {
-    const devtoolsDom = getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, detailTabs, visibleTableColumns, tableColumns, timelineInfo, timelineHoverPercent, focus);
+    const devtoolsDom = getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, detailTabs, visibleTableColumns, tableColumns, timelineInfo, timelineHoverPercent, focus, previewTextCursorRowIndex, previewTextCursorColumnIndex, minLineY, maxLineY);
     const devtoolsContentNodes = devtoolsDom.slice(1);
     const topLevelNodes = [...getDebugViewTopDom(filterValue, useDevtoolsLayout, categoryFilters), ...devtoolsContentNodes];
     const rootChildCount = getTopLevelChildCount(topLevelNodes);
@@ -5797,8 +6284,8 @@ const renderItems = (oldState, newState) => {
   if (newState.initial) {
     return [SetDom2, newState.uid, []];
   }
-  const filteredEvents = filterEventsByTimelineRange(newState.timelineEvents, newState.timelineStartSeconds, newState.timelineEndSeconds);
-  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, getSelectedEventCategoryFilters(newState.categoryFilters), newState.categoryFilters, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, newState.timelineFilterDescription, withSessionEventIds(newState.timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, getVisibleTableColumns(newState.tableColumns), newState.detailTabs, newState.tableColumns, newState.timelineInfo, newState.timelineHoverPercent, newState.focus);
+  const filteredEvents = getCurrentEvents$2(newState);
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, getSelectedEventCategoryFilters(newState.categoryFilters), newState.categoryFilters, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, newState.timelineFilterDescription, withSessionEventIds(newState.timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, getVisibleTableColumns(newState.tableColumns), newState.detailTabs, newState.tableColumns, newState.timelineInfo, newState.timelineHoverPercent, newState.focus, newState.previewTextCursorRowIndex, newState.previewTextCursorColumnIndex, newState.tableMinLineY, newState.tableMaxLineY);
   return [SetDom2, newState.uid, dom];
 };
 
@@ -5942,6 +6429,20 @@ const renderEventListeners = () => {
   }, {
     name: HandleTableResizerPointerUp,
     params: ['handleTableResizerPointerUp']
+  }, {
+    name: HandleTableScrollBarPointerDown,
+    params: ['handleTableScrollBarPointerDown', ClientY],
+    trackPointerEvents: [HandleTableScrollBarPointerMove, HandleTableScrollBarPointerUp]
+  }, {
+    name: HandleTableScrollBarPointerMove,
+    params: ['handleTableScrollBarPointerMove', ClientY]
+  }, {
+    name: HandleTableScrollBarPointerUp,
+    params: ['handleTableScrollBarPointerUp']
+  }, {
+    name: HandleTableWheel,
+    params: ['handleTableWheel', 'event.deltaY'],
+    preventDefault: true
   }, {
     name: HandleTimelinePointerDown,
     params: ['handleTimelinePointerDown', TargetName, ClientX],
@@ -5958,6 +6459,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleTimelineDoubleClick,
     params: ['handleTimelineDoubleClick']
+  }, {
+    name: HandlePreviewTextPointerDown,
+    params: ['handlePreviewTextPointerDown', 'event.clientX - event.currentTarget.getBoundingClientRect().left', 'event.clientY - event.currentTarget.getBoundingClientRect().top']
   }];
 };
 
@@ -5981,10 +6485,10 @@ const handleResize = (state, dimensions) => {
     ...state,
     ...dimensions
   };
-  return {
+  return applyVirtualTableState({
     ...nextState,
     tableWidth: clampTableWidth(nextState.width, state.tableWidth)
-  };
+  });
 };
 
 const isResizeDimensions = value => {
@@ -6033,19 +6537,22 @@ const selectCurrent = async state => {
 };
 
 const setEvents = (state, events) => {
-  return getStateWithTimelineInfo({
+  return applyVirtualTableState(getStateWithTimelineInfo({
     ...state,
     errorMessage: '',
     events,
     initial: false,
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null
-  });
+  }));
 };
 
 const setSessionIdDependencies = {
-  listChatViewEvents: listChatViewEvents
+  listChatViewEvents: listChatViewEvents,
+  registerUpdateListener: registerUpdateListener
 };
 const setSessionId = async (state, sessionId) => {
   const {
@@ -6055,12 +6562,15 @@ const setSessionId = async (state, sessionId) => {
     sessionIdIndexName
   } = state;
   const result = await setSessionIdDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
+  await setSessionIdDependencies.registerUpdateListener(sessionId, rpcId, state.uid);
   if (result.type === 'error') {
     return {
       ...state,
       errorMessage: getFailedToLoadMessage(sessionId, result.error),
       events: [],
       initial: false,
+      previewTextCursorColumnIndex: null,
+      previewTextCursorRowIndex: null,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null,
@@ -6075,6 +6585,8 @@ const setSessionId = async (state, sessionId) => {
     errorMessage: '',
     events,
     initial: false,
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null,
@@ -6124,6 +6636,7 @@ const commandMap = {
   'ChatDebug.handleEventRowClickAt': wrapCommand(handleEventRowClickAt),
   'ChatDebug.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
   'ChatDebug.handleInput': wrapCommand(handleInput),
+  'ChatDebug.handlePreviewTextPointerDown': wrapCommand(handlePreviewTextPointerDown),
   'ChatDebug.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'ChatDebug.handleSashPointerMove': wrapCommand(handleSashPointerMove),
   'ChatDebug.handleSashPointerUp': wrapCommand(handleSashPointerUp),
@@ -6137,6 +6650,10 @@ const commandMap = {
   'ChatDebug.handleTableResizerPointerMove': wrapCommand(handleTableResizerPointerMove),
   'ChatDebug.handleTableResizerPointerUp': wrapCommand(handleTableResizerPointerUp),
   'ChatDebug.handleTableRowCopy': wrapCommand(handleTableRowCopy),
+  'ChatDebug.handleTableScrollBarPointerDown': wrapCommand(handleTableScrollBarPointerDown),
+  'ChatDebug.handleTableScrollBarPointerMove': wrapCommand(handleTableScrollBarPointerMove),
+  'ChatDebug.handleTableScrollBarPointerUp': wrapCommand(handleTableScrollBarPointerUp),
+  'ChatDebug.handleTableWheel': wrapCommand(handleTableWheel),
   'ChatDebug.handleTimelineContextMenu': wrapCommand(handleTimelineContextMenu),
   'ChatDebug.handleTimelineDoubleClick': wrapCommand(handleTimelineDoubleClick),
   'ChatDebug.handleTimelineEndSeconds': wrapCommand(handleTimelineEndSeconds),
@@ -6169,7 +6686,9 @@ const sendMessagePortToChatStorageWorker = async port => {
 };
 const initializeChatStorageWorker = async () => {
   const rpc = await create$4({
-    commandMap: {},
+    commandMap: {
+      [rpcId]: handleStorageWorkerUpdate
+    },
     send: sendMessagePortToChatStorageWorker
   });
   set$2(rpc);