@lvce-editor/chat-debug-view 9.0.0 → 10.2.0

package/dist/chatDebugViewWorkerMain.js

@@ -1135,10 +1135,9 @@ const Th = 13;
 const THead = 14;
 const Tr = 15;
 const Img = 17;
-const H2 = 22;
 const Section = 41;
 const Search = 42;
-const P = 50;
+const TextArea = 62;
 const Reference = 100;
 
 const Button = 'event.button';
@@ -1183,6 +1182,9 @@ const sendMessagePortToChatStorageWorker$1 = async port => {
 const writeClipBoardText = async text => {
   await invoke('ClipBoard.writeText', /* text */text);
 };
+const getPreference = async key => {
+  return await invoke('Preferences.get', key);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1313,12 +1315,63 @@ 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);
   return state;
 };
 
+const decodeBase64$1 = value => {
+  const decoded = atob(value);
+  const bytes = new Uint8Array(decoded.length);
+  for (let i = 0; i < decoded.length; i++) {
+    bytes[i] = decoded.codePointAt(i) || 0;
+  }
+  return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+};
+const createCanvasBlob$1 = async mimeType => {
+  const canvas = new OffscreenCanvas(2, 2);
+  const context = canvas.getContext('2d');
+  if (!context) {
+    throw new Error('2d canvas context is not available');
+  }
+  context.fillStyle = '#0b6';
+  context.fillRect(0, 0, 2, 2);
+  return canvas.convertToBlob({
+    type: mimeType
+  });
+};
+const createBlob$1 = async (mimeType, contentKind, content) => {
+  if (contentKind === 'canvas') {
+    return createCanvasBlob$1(mimeType);
+  }
+  if (contentKind === 'base64') {
+    return new Blob([decodeBase64$1(content)], {
+      type: mimeType
+    });
+  }
+  return new Blob([content], {
+    type: mimeType
+  });
+};
+const appendStoredImageAttachmentForTest = async (state, sessionId, eventId, mimeType, name, contentKind, content, timestamp) => {
+  const blob = await createBlob$1(mimeType, contentKind, content);
+  await appendEvent({
+    attachmentId: `attachment-${eventId}`,
+    blob,
+    eventId,
+    mimeType,
+    name,
+    sessionId,
+    timestamp,
+    type: 'chat-attachment-added'
+  });
+  return state;
+};
+
 const decodeBase64 = value => {
   const decoded = atob(value);
   const bytes = new Uint8Array(decoded.length);
@@ -1352,7 +1405,7 @@ const createBlob = async (mimeType, contentKind, content) => {
     type: mimeType
   });
 };
-const appendStoredImageAttachmentForTest = async (state, sessionId, eventId, mimeType, name, contentKind, content, timestamp) => {
+const appendStoredRemovedImageAttachmentForTest = async (state, sessionId, eventId, mimeType, name, contentKind, content, timestamp) => {
   const blob = await createBlob(mimeType, contentKind, content);
   await appendEvent({
     attachmentId: `attachment-${eventId}`,
@@ -1362,7 +1415,7 @@ const appendStoredImageAttachmentForTest = async (state, sessionId, eventId, mim
     name,
     sessionId,
     timestamp,
-    type: 'chat-attachment-added'
+    type: 'chat-attachment-removed'
   });
   return state;
 };
@@ -1782,12 +1835,15 @@ const Status$1 = 'status';
 const tableColumnNames = [Type, Status$1, Duration];
 const createTableColumns = () => {
   return [{
+    isVisible: true,
     label: type(),
     name: Type
   }, {
+    isVisible: true,
     label: status(),
     name: Status$1
   }, {
+    isVisible: true,
     label: duration(),
     name: Duration
   }];
@@ -1796,12 +1852,22 @@ const defaultVisibleTableColumns = tableColumnNames;
 const isTableColumn = value => {
   return tableColumnNames.includes(value);
 };
+const getVisibleTableColumns = tableColumns => {
+  return tableColumns.filter(column => column.isVisible).map(column => column.name);
+};
+const getTableColumnsWithVisibility = (tableColumns, visibleTableColumns) => {
+  const visibleColumns = new Set(visibleTableColumns.filter(isTableColumn));
+  return tableColumns.map(column => ({
+    ...column,
+    isVisible: visibleColumns.has(column.name)
+  }));
+};
 const getOrderedVisibleTableColumns = (values, tableColumns = createTableColumns()) => {
   const visibleColumns = new Set(values.filter(isTableColumn));
   return tableColumns.map(column => column.name).filter(column => visibleColumns.has(column));
 };
-const isVisibleTableColumn = (visibleTableColumns, column) => {
-  return visibleTableColumns.includes(column);
+const isVisibleTableColumn = (tableColumns, column) => {
+  return tableColumns.some(tableColumn => tableColumn.name === column && tableColumn.isVisible);
 };
 const getTableColumnLabel = (tableColumns, name) => {
   const match = tableColumns.find(column => column.name === name);
@@ -1969,12 +2035,12 @@ const restoreTimelineEndSeconds = (savedState, currentTimelineEndSeconds) => {
 const restoreTimelineStartSeconds = (savedState, currentTimelineStartSeconds) => {
   return typeof savedState.timelineStartSeconds === 'string' ? savedState.timelineStartSeconds : currentTimelineStartSeconds;
 };
-const restoreVisibleTableColumns = (savedState, currentVisibleTableColumns) => {
+const restoreVisibleTableColumns = (savedState, currentTableColumns) => {
   if (!Array.isArray(savedState.visibleTableColumns)) {
-    return currentVisibleTableColumns;
+    return currentTableColumns;
   }
   const visibleTableColumns = savedState.visibleTableColumns.filter(value => typeof value === 'string');
-  return getOrderedVisibleTableColumns(visibleTableColumns);
+  return getTableColumnsWithVisibility(currentTableColumns, visibleTableColumns);
 };
 const restoreTableColumnWidths = (savedState, currentTableColumnWidths) => {
   return isTableColumnWidths(savedState.tableColumnWidths) ? savedState.tableColumnWidths : currentTableColumnWidths;
@@ -1989,10 +2055,10 @@ const restoreSavedState = (state, savedState) => {
     detailTabs: restoreDetailTabs(savedState, state.detailTabs),
     filterValue: restoreFilterValue(savedState, state.filterValue),
     selectedEventId: restoreSelectedEventId(savedState, state.selectedEventId),
+    tableColumns: restoreVisibleTableColumns(savedState, state.tableColumns),
     tableColumnWidths: restoreTableColumnWidths(savedState, state.tableColumnWidths),
     timelineEndSeconds: restoreTimelineEndSeconds(savedState, state.timelineEndSeconds),
-    timelineStartSeconds: restoreTimelineStartSeconds(savedState, state.timelineStartSeconds),
-    visibleTableColumns: restoreVisibleTableColumns(savedState, state.visibleTableColumns)
+    timelineStartSeconds: restoreTimelineStartSeconds(savedState, state.timelineStartSeconds)
   };
 };
 
@@ -2154,6 +2220,8 @@ const createDefaultState = () => {
     largeBreakpoint: 900,
     mediumBreakpoint: 600,
     platform: 0,
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     sashPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
@@ -2165,12 +2233,18 @@ const createDefaultState = () => {
     showResponsePartEvents: false,
     sortColumn: '',
     sortDescending: false,
-    tableColumns: [],
+    tableColumns: createTableColumns(),
     tableColumnWidths: defaultTableColumnWidths,
+    tableDeltaY: 0,
+    tableMaxLineY: 0,
+    tableMinLineY: 0,
     tableResizerDownId: 0,
+    tableScrollBarHandleOffset: 0,
+    tableScrollBarPointerActive: false,
     tableWidth: defaultTableWidth,
     timelineEndSeconds: '',
     timelineEvents: [],
+    timelineFilterDescription: '',
     timelineHoverPercent: null,
     timelineHoverSeconds: '',
     timelineInfo: emptyTimelineInfo,
@@ -2181,7 +2255,6 @@ const createDefaultState = () => {
     uid: 0,
     uri: '',
     useDevtoolsLayout: true,
-    visibleTableColumns: defaultVisibleTableColumns,
     width: 0,
     x: 0,
     y: 0
@@ -2219,7 +2292,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.visibleTableColumns !== newState.visibleTableColumns || 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.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 [];
@@ -2492,6 +2565,9 @@ const hasErrorStatus = event => {
   const {
     status
   } = event;
+  if (status === 'error') {
+    return true;
+  }
   if (isErrorStatusCode(status)) {
     return true;
   }
@@ -2568,6 +2644,105 @@ const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreNam
   return loadSelectedEvent$1(sessionId, eventId, type);
 };
 
+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) => {
+  return state.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;
 const getBlob = event => {
   const {
     blob
@@ -2586,8 +2761,27 @@ const getAltText = event => {
 const isImageMimeType = mimeType => {
   return typeof mimeType === 'string' && mimeType.startsWith('image/');
 };
-const shouldValidateImage = mimeType => {
-  return mimeType !== 'image/svg+xml';
+const formatImageSize = size => {
+  if (size < 1024) {
+    return `${size} B`;
+  }
+  return `${(size / 1024).toFixed(1)} kB`;
+};
+const formatImageStats = (width, height, size) => {
+  return `${width} × ${height} px · ${formatImageSize(size)}`;
+};
+const getSvgImageStats = async blob => {
+  const text = await blob.text();
+  const widthMatch = text.match(svgWidthRegex);
+  const heightMatch = text.match(svgHeightRegex);
+  if (widthMatch && heightMatch) {
+    return formatImageStats(Number(widthMatch[1]), Number(heightMatch[1]), blob.size);
+  }
+  const viewBoxMatch = text.match(svgViewBoxRegex);
+  if (viewBoxMatch) {
+    return formatImageStats(Number(viewBoxMatch[3]), Number(viewBoxMatch[4]), blob.size);
+  }
+  return undefined;
 };
 const readBlobAsPreviewUrl = blob => {
   if (typeof FileReaderSync === 'function') {
@@ -2599,15 +2793,29 @@ const readBlobAsPreviewUrl = blob => {
   }
   throw new Error('image preview reader is not available');
 };
-const validateImage = async blob => {
+const getRasterImageStats = async blob => {
   if (typeof createImageBitmap !== 'function') {
-    return;
+    throw new TypeError('image bitmap decoder is not available');
   }
   const bitmap = await createImageBitmap(blob);
-  bitmap.close?.();
+  try {
+    return formatImageStats(bitmap.width, bitmap.height, blob.size);
+  } finally {
+    bitmap.close?.();
+  }
+};
+const getImageStats = async (blob, mimeType) => {
+  if (mimeType === 'image/svg+xml') {
+    const svgStats = await getSvgImageStats(blob);
+    if (svgStats === undefined) {
+      throw new TypeError('image stats are not available');
+    }
+    return svgStats;
+  }
+  return getRasterImageStats(blob);
 };
 const getAttachmentImagePreview = async event => {
-  if (event.type !== 'chat-attachment-added') {
+  if (event.type !== 'chat-attachment-added' && event.type !== 'chat-attachment-removed') {
     return undefined;
   }
   const blob = getBlob(event);
@@ -2616,13 +2824,12 @@ const getAttachmentImagePreview = async event => {
     return undefined;
   }
   try {
-    if (shouldValidateImage(mimeType)) {
-      await validateImage(blob);
-    }
+    const stats = await getImageStats(blob, mimeType);
     return {
       alt: getAltText(event),
       previewType: 'image',
-      src: readBlobAsPreviewUrl(blob)
+      src: readBlobAsPreviewUrl(blob),
+      stats
     };
   } catch {
     return imageCouldNotBeLoaded();
@@ -2677,13 +2884,15 @@ 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 {
+  return withSelectedEventVisible({
     ...state,
     detailTabs: createDetailTabs(selectedDetailTab, resolvedSelectedEvent),
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
-  };
+  });
 };
 
 const focusIndex = async (state, index) => {
@@ -2737,27 +2946,27 @@ const getMenuEntriesTableBody = props => {
   }];
 };
 
-const getColumnVisibilityFlags = (state, column) => {
-  return isVisibleTableColumn(state.visibleTableColumns, column) ? Checked : Unchecked;
+const getColumnVisibilityFlags = (tableColumns, column) => {
+  return isVisibleTableColumn(tableColumns, column) ? Checked : Unchecked;
 };
 
 const getMenuEntriesTableHeader = state => {
   return [{
     args: [Type],
     command: 'ChatDebug.toggleTableColumnVisibility',
-    flags: getColumnVisibilityFlags(state, Type),
+    flags: getColumnVisibilityFlags(state.tableColumns, Type),
     id: 'type',
     label: type()
   }, {
     args: [Status$1],
     command: 'ChatDebug.toggleTableColumnVisibility',
-    flags: getColumnVisibilityFlags(state, Status$1),
+    flags: getColumnVisibilityFlags(state.tableColumns, Status$1),
     id: 'status',
     label: status()
   }, {
     args: [Duration],
     command: 'ChatDebug.toggleTableColumnVisibility',
-    flags: getColumnVisibilityFlags(state, Duration),
+    flags: getColumnVisibilityFlags(state.tableColumns, Duration),
     id: 'duration',
     label: duration()
   }, {
@@ -2781,16 +2990,6 @@ 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) {
     return -1;
@@ -2808,8 +3007,8 @@ const getTableBodyEventIndex = (state, eventX, eventY) => {
   if (relativeX < 0 || relativeX >= tableWidth || relativeY < 0) {
     return -1;
   }
-  const eventIndex = Math.floor(relativeY / devtoolsTableRowHeight);
-  if (eventIndex < 0 || eventIndex >= currentEvents.length) {
+  const eventIndex = state.tableMinLineY + Math.floor(relativeY / devtoolsTableRowHeight);
+  if (eventIndex < state.tableMinLineY || eventIndex >= state.tableMaxLineY || eventIndex >= currentEvents.length) {
     return -1;
   }
   return eventIndex;
@@ -2949,13 +3148,30 @@ const getTimelineEvents = state => {
   return getFilteredEvents(events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
 };
 
+const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds) => {
+  const trimmedStart = timelineStartSeconds.trim();
+  const trimmedEnd = timelineEndSeconds.trim();
+  if (trimmedStart && trimmedEnd) {
+    return secondsRange(trimmedStart, trimmedEnd);
+  }
+  if (trimmedStart) {
+    return fromSeconds(trimmedStart);
+  }
+  if (trimmedEnd) {
+    return toSeconds(trimmedEnd);
+  }
+  return '';
+};
+
 const getStateWithTimelineInfo = state => {
   const timelineEvents = getTimelineEvents(state);
   const effectiveRange = getEffectiveTimelineRange(state.timelineStartSeconds, state.timelineEndSeconds, state.timelineSelectionActive, state.timelineSelectionAnchorSeconds, state.timelineSelectionFocusSeconds);
   const timelineInfo = getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
+  const timelineFilterDescription = getTimelineFilterDescription(state.timelineStartSeconds, state.timelineEndSeconds);
   return {
     ...state,
     timelineEvents,
+    timelineFilterDescription,
     timelineInfo
   };
 };
@@ -3005,6 +3221,8 @@ const restoreSelectedEvent = async state => {
   if (state.selectedEventId === null) {
     return {
       ...state,
+      previewTextCursorColumnIndex: null,
+      previewTextCursorRowIndex: null,
       selectedEvent: null,
       selectedEventIndex: null
     };
@@ -3014,6 +3232,8 @@ const restoreSelectedEvent = async state => {
   if (selectedEventIndex === -1) {
     return {
       ...state,
+      previewTextCursorColumnIndex: null,
+      previewTextCursorRowIndex: null,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null
@@ -3023,6 +3243,8 @@ const restoreSelectedEvent = async state => {
   if (!selectedEvent || typeof selectedEvent.eventId !== 'number') {
     return {
       ...state,
+      previewTextCursorColumnIndex: null,
+      previewTextCursorRowIndex: null,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null
@@ -3032,6 +3254,8 @@ const restoreSelectedEvent = async state => {
   const resolvedSelectedEvent = selectedEventDetails ? await withPreparedSelectedEventPreview(selectedEventDetails) : null;
   return {
     ...state,
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
@@ -3047,7 +3271,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: [],
@@ -3056,13 +3280,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: [],
@@ -3071,7 +3295,7 @@ const loadEventsForSessionId = async (state, sessionId) => {
       selectedEventId: null,
       selectedEventIndex: null,
       sessionId
-    });
+    }));
   }
   const nextState = getStateWithTimelineInfo({
     ...state,
@@ -3080,7 +3304,8 @@ const loadEventsForSessionId = async (state, sessionId) => {
     initial: false,
     sessionId
   });
-  return restoreSelectedEvent(nextState);
+  const restoredState = await restoreSelectedEvent(nextState);
+  return withSelectedEventVisible(restoredState);
 };
 
 const loadEventsFromUri = async state => {
@@ -3113,6 +3338,8 @@ const handleClickRefresh = async state => {
 const handleCloseDetails = state => {
   return {
     ...state,
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null
@@ -3140,6 +3367,9 @@ const selectDetailTab = (state, value) => {
     detailTabs
   };
 };
+const handleDetailTabsFocus = (state, value) => {
+  return selectDetailTab(state, value);
+};
 
 const handleEscape = state => {
   return state;
@@ -3193,12 +3423,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) => {
@@ -3305,12 +3535,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) {
@@ -3355,22 +3587,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 = {
@@ -3394,12 +3630,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)) {
@@ -3417,67 +3655,323 @@ 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 hasOwn = (event, key) => {
+  return Object.hasOwn(event, key);
+};
 
-const handleTableFocus = state => {
-  return {
-    ...state,
-    focus: FocusChatDebugTable
-  };
+const shouldIncludeArguments = (event, name) => {
+  if (!hasOwn(event, 'arguments')) {
+    return false;
+  }
+  if (name === 'getWorkspaceUri') {
+    return false;
+  }
+  return true;
 };
 
-const handleTableHeaderClick = (state, value) => {
-  if (!isTableColumn(value)) {
-    return state;
+const getPayloadEvent = event => {
+  const name = getPreviewName(event);
+  if (name === 'list_files' && hasOwn(event, 'arguments')) {
+    return event.arguments;
   }
-  const sortDescending = state.sortColumn === value ? !state.sortDescending : false;
-  const nextState = {
-    ...state,
-    sortColumn: value,
-    sortDescending
+  const payloadEvent = {
+    ...(name === undefined ? {} : {
+      name
+    }),
+    ...(shouldIncludeArguments(event, name) ? {
+      arguments: event.arguments
+    } : {}),
+    ...(hasOwn(event, 'result') ? {
+      result: event.result
+    } : {})
   };
-  return withPreservedSelection$1(state, nextState);
+  if (Object.keys(payloadEvent).length > 0) {
+    return payloadEvent;
+  }
+  return event;
 };
 
-const getTableResizerId = name => {
-  switch (name) {
-    case 'ResizerOne':
-      return 1;
-    case 'ResizerTwo':
-      return 2;
-    default:
-      return 0;
-  }
+const isChatMessageAddedEvent = event => {
+  return event.type === 'chat-message-added';
+};
+
+const isChatMessageUpdatedEvent = event => {
+  return event.type === 'chat-message-updated';
+};
+
+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 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 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 getReadFilePreviewText = (event, name) => {
+  if (name !== 'read_file') {
+    return undefined;
+  }
+  const {
+    result
+  } = event;
+  if (typeof result !== 'string') {
+    return undefined;
+  }
+  return result;
+};
+
+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 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 previewTextRowHeight = 20;
+const defaultPreviewTextColumnWidth = 9;
+const clamp = (value, min, max) => {
+  return Math.min(Math.max(value, min), max);
+};
+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 getPreviewTextCursorStyle = cursor => {
+  return `height: ${previewTextRowHeight}px; left: ${cursor.columnIndex * defaultPreviewTextColumnWidth}px; top: ${cursor.rowIndex * previewTextRowHeight}px; width: 0px;`;
+};
+
+const hasNumberedTextPreview = (state, previewEvent) => {
+  if (typeof previewEvent !== 'string') {
+    return false;
+  }
+  if (previewEvent === ImageCouldNotBeLoaded) {
+    return false;
+  }
+  return !state.selectedEvent || !isChatMessageUpdatedEvent(state.selectedEvent);
+};
+const handlePreviewTextPointerDown = (state, x, y) => {
+  if (!state.selectedEvent) {
+    return state;
+  }
+  const previewEvent = getPreviewEvent(state.selectedEvent);
+  if (!hasNumberedTextPreview(state, previewEvent)) {
+    return state;
+  }
+  const cursor = getPreviewTextCursorFromPoint(previewEvent, x, y);
+  if (state.previewTextCursorColumnIndex === cursor.columnIndex && state.previewTextCursorRowIndex === cursor.rowIndex) {
+    return state;
+  }
+  return {
+    ...state,
+    previewTextCursorColumnIndex: cursor.columnIndex,
+    previewTextCursorRowIndex: cursor.rowIndex
+  };
+};
+
+const handleSashPointerDown = (state, eventX, eventY) => {
+  if (state.sashPointerActive) {
+    return state;
+  }
+  return {
+    ...state,
+    sashPointerActive: true
+  };
+};
+
+const handleSashPointerMove = (state, eventX, eventY) => {
+  if (!state.sashPointerActive) {
+    return state;
+  }
+  return {
+    ...state,
+    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
+  };
+};
+
+const handleSashPointerUp = (state, eventX, eventY) => {
+  if (!state.sashPointerActive) {
+    return state;
+  }
+  return {
+    ...state,
+    sashPointerActive: false
+  };
+};
+
+const FocusChatDebugTable = 221_139;
+
+const handleTableFocus = state => {
+  return {
+    ...state,
+    focus: FocusChatDebugTable
+  };
+};
+
+const handleTableHeaderClick = (state, value) => {
+  if (!isTableColumn(value)) {
+    return state;
+  }
+  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;
+  }
 };
 const handleTableResizerPointerDown = (state, name, clientX) => {
   return {
@@ -3492,7 +3986,7 @@ const handleTableResizerPointerMove = (state, clientX) => {
   }
   return {
     ...state,
-    tableColumnWidths: getResizedTableColumnWidths(state.width, state.tableWidth, state.visibleTableColumns, state.tableColumnWidths, state.x, clientX, state.tableResizerDownId)
+    tableColumnWidths: getResizedTableColumnWidths(state.width, state.tableWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths, state.x, clientX, state.tableResizerDownId)
   };
 };
 
@@ -3517,6 +4011,82 @@ const handleTableRowCopy = async (state, eventIndex) => {
   return state;
 };
 
+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 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 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 {
+    ...nextState,
+    tableScrollBarPointerActive: true
+  };
+};
+
+const handleTableScrollBarPointerUp = state => {
+  if (!state.tableScrollBarPointerActive && state.tableScrollBarHandleOffset === 0) {
+    return state;
+  }
+  return {
+    ...state,
+    tableScrollBarHandleOffset: 0,
+    tableScrollBarPointerActive: false
+  };
+};
+
+const handleTableWheel = (state, deltaY) => {
+  return setTableDeltaY(state, state.tableDeltaY + deltaY);
+};
+
 const handleTimelineContextMenu = state => {
   return state;
 };
@@ -3576,8 +4146,8 @@ const formatTimelinePresetValue = value => {
   return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
 };
 
-const getTimelineEventX = (state, eventX) => {
-  return state.x + eventX;
+const getTimelineEventX = eventX => {
+  return eventX;
 };
 
 const getTimelineLeft = state => {
@@ -3639,7 +4209,7 @@ const handleTimelinePointerDown = (state, name, eventX) => {
   }
   const timelineLeft = getTimelineLeft(state);
   const timelineWidth = getTimelineWidth(state);
-  const clientX = getTimelineEventX(state, eventX);
+  const clientX = getTimelineEventX(eventX);
   const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
   if (seconds === undefined) {
     return state;
@@ -3669,7 +4239,7 @@ const handleTimelinePointerLeave = state => {
 const handleTimelinePointerMove = (state, eventX) => {
   const timelineLeft = getTimelineLeft(state);
   const timelineWidth = getTimelineWidth(state);
-  const clientX = getTimelineEventX(state, eventX);
+  const clientX = getTimelineEventX(eventX);
   const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
   if (seconds === undefined) {
     return state;
@@ -3696,7 +4266,7 @@ const handleTimelinePointerUp = (state, eventX) => {
   }
   const timelineLeft = getTimelineLeft(state);
   const timelineWidth = getTimelineWidth(state);
-  const clientX = getTimelineEventX(state, eventX);
+  const clientX = getTimelineEventX(eventX);
   const focusSeconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
   if (focusSeconds === undefined) {
     return clearTimelineSelectionState(state);
@@ -3717,13 +4287,15 @@ const handleTimelinePointerUp = (state, eventX) => {
 const setUseDevtoolsLayout = (state, checked) => {
   const useDevtoolsLayout = getBoolean(checked);
   const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex$1(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
-  };
+  });
 };
 
 const handleShowEventStreamFinishedEvents = (state, checked) => {
@@ -3748,22 +4320,46 @@ const handleShowResponsePartEvents = (state, checked) => {
   return withPreservedSelection$1(state, nextState);
 };
 
+const rpcId = 'handleStorageWorkerUpdate';
+const handleStorageWorkerUpdate = async uid => {
+  await invoke('Viewlet.executeViewletCommand', uid, 'ChatDebug.handleClickRefresh');
+};
+
+const loadContentDependencies = loadEventsDependencies;
+loadContentDependencies.registerUpdateListener = registerUpdateListener;
 const loadContent = async (state, savedState) => {
+  await getPreference('chatDebug.autoRefresh');
   const nextState = await loadEventsFromUri(restoreSavedState(state, savedState));
-  return {
+  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()
-  };
+  });
 };
 
+// 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(tableWidth, state.visibleTableColumns, state.tableColumnWidths);
+  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;
@@ -3773,6 +4369,7 @@ const getCss = state => {
   } = state.timelineInfo;
   return `
 .ChatDebugView {
+  --ChatDebugViewTableBodyHeight: ${tableBodyHeight}px;
   --ChatDebugViewTableHeaderHeight: ${devtoolsTableHeaderHeight}px;
   --ChatDebugViewTableColZeroWidth: ${tableColZeroWidth}px;
   --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
@@ -3780,6 +4377,9 @@ const getCss = state => {
   --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;
@@ -3790,546 +4390,38 @@ const getCss = state => {
   --ChatDebugViewTopSize: ${topSize}px;
   --ChatDebugViewTypeColumnWidth: ${state.tableColumnWidths.type}px;
   padding: ${viewPadding}px;
-  display: flex;
-  height: 100%;
-  box-sizing: border-box;
-  gap: 8px;
-  contain: strict;
-  flex: 1;
-  flex-direction: column;
-}
-
-.ChatDebugView--devtools {
-  gap: 4px;
-}
-
-.ChatDebugView--devtools > .ChatDebugViewTimeline {
-  flex: 0 0 auto;
-}
-
-.ChatDebugView--devtools .ChatDebugViewEvents {
-  border-radius: 6px;
-  margin-bottom: 0;
-  overflow: hidden;
-}
-
-.ChatDebugViewTop {
-  display: flex;
-  align-items: center;
-  flex: 0 0 var(--ChatDebugViewTopSize);
-  gap: 8px;
-  height: var(--ChatDebugViewTopSize);
-  min-height: var(--ChatDebugViewTopSize);
-  min-width: 0;
-  contain: strict;
-}
-
-.ChatDebugViewTop--devtools {
-  align-items: stretch;
-}
-
-.ChatDebugViewFilterInput {
-  flex: 1;
-  min-width: 0;
-}
-
-.ChatDebugViewFilterInput--devtools {
-  flex: 1 1 220px;
-  min-width: 180px;
-}
-
-.ChatDebugViewDevtoolsSplit {
-  display: flex;
-  flex: 1;
-  align-items: stretch;
-  gap: 0;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  contain: strict;
 }
 
 .TableWrapper {
-  position: relative;
-  width: min(100%, var(--ChatDebugViewTableWidth));
-  max-width: 100%;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.FocusOutline {
-  outline: 2px solid var(--vscode-focusBorder, rgba(255, 255, 255, 0.45));
-  outline-offset: 1px;
-}
-
-.Table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-
-.TableRow {
-  height: var(--ChatDebugViewTableRowHeight);
-}
-
-.TableSummary {
-  flex: none;
-  min-height: 24px;
-  width: min(100%, var(--ChatDebugViewTableWidth));
-  max-width: 100%;
-  padding: 6px 4px 0;
-  color: var(--vscode-descriptionForeground, inherit);
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.TableCell {
-  box-sizing: border-box;
-  height: var(--ChatDebugViewTableHeaderHeight);
-  max-height: var(--ChatDebugViewTableHeaderHeight);
-  padding: 0 6px;
+  height: calc(var(--ChatDebugViewTableHeaderHeight) + var(--ChatDebugViewTableBodyHeight));
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.TableBody .TableCell {
-  height: var(--ChatDebugViewTableRowHeight);
-  max-height: var(--ChatDebugViewTableRowHeight);
-  line-height: var(--ChatDebugViewTableRowHeight);
-}
-
-.TableCol {
-  width: auto;
-}
-
-.TableColZero {
-  width: var(--ChatDebugViewTableColZeroWidth);
-  max-width: var(--ChatDebugViewTableColZeroWidth);
-}
-
-.TableColOne {
-  width: var(--ChatDebugViewTableColOneWidth);
-  max-width: var(--ChatDebugViewTableColOneWidth);
-}
-
-.TableColTwo {
-  width: var(--ChatDebugViewTableColTwoWidth);
-  max-width: var(--ChatDebugViewTableColTwoWidth);
-}
-
-.Resizers {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.Resizer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 12px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  pointer-events: auto;
-  cursor: col-resize;
-}
-
-.ResizerOne {
-  left: var(--ResizerOneLeft);
-  transform: translateX(-50%);
-}
-
-.ResizerTwo {
-  left: var(--ResizerTwoLeft);
-  transform: translateX(-50%);
-}
-
-.ResizerInner {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  width: 1px;
-  transform: translateX(-50%);
-  background: var(--vscode-widget-border, rgba(255, 255, 255, 0.18));
-}
-
-
-.ChatDebugViewDetails {
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
-  border-radius: 6px;
-  overflow: hidden;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  contain: strict;
-}
-
-.ChatDebugViewDevtoolsSplit > .ChatDebugViewDetails {
-  border-left: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  flex: 1;
-}
-
-.ChatDebugViewDevtoolsSplit > .ChatDebugViewEvents {
-  flex: 0 1 var(--ChatDebugViewTableWidth);
-  min-width: 0;
-}
-
-.ChatDebugViewDevtoolsSplit > .ChatDebugViewEvents.ChatDebugViewEventsFullWidth {
-  flex: 1 1 100%;
-}
-
-.ChatDebugViewDetailsBottom {
-  color: var(--vscode-foreground, inherit);
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-}
-
-.ChatDebugViewEventRawText {
-  margin: 0;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  flex: 1;
-}
-
-.ChatDebugViewEventLineContent {
-  flex: 1;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.ChatDebugViewEventLineNumber {
-  flex: none;
-}
-
-.row {
-  flex-shrink: 0;
-  min-width: 0;
-  width: 100%;
-}
-
-.ChatDebugViewRefreshButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  margin-left: auto;
-  min-height: 28px;
-  padding: 0 10px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 6px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
-  color: inherit;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
-}
-
-.ChatDebugViewRefreshButton:hover {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
-  border-color: rgba(255, 255, 255, 0.24);
-}
-
-.ChatDebugViewRefreshButton:active {
-  transform: translateY(1px);
-}
-
-.ChatDebugViewRefreshButton:focus-visible {
-  outline: 2px solid rgba(255, 255, 255, 0.4);
-  outline-offset: 1px;
-}
-
-.ChatDebugViewDetailsClose {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  margin-left: auto;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--vscode-descriptionForeground, inherit);
-  cursor: pointer;
-}
-
-.ChatDebugViewDetailsClose:hover {
-  background: var(--vscode-toolbar-hoverBackground, rgba(255, 255, 255, 0.08));
-  color: var(--vscode-foreground, inherit);
-}
-
-.ChatDebugViewDetailsClose:focus-visible {
-  outline: 2px solid var(--vscode-focusBorder, rgba(255, 255, 255, 0.45));
-  outline-offset: 1px;
-}
-
-
-.TableRow:hover {
-  background: var(--ListHoverBackground);
-  color: var(--ListHoverForeground);
-}
-
-.ChatDebugViewImagePreview {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  width: 100%;
-  max-width: 100%;
-  min-height: 0;
-}
-
-.ChatDebugViewImagePreviewImage {
-  display: block;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-  max-height: 100%;
-  align-self: center;
-  border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.14));
-  border-radius: 6px;
-  object-fit: contain;
-}
-
-.ChatDebugViewImagePreviewLabel {
-  width: auto;
-  height: auto;
-  max-height: 100%;
-  align-self: center;
-}
-
-.ChatDebugViewTimeline {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.ChatDebugViewTimelineTop {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-}
-
-.ChatDebugViewTimelineSummary {
-  margin: 0;
-  color: var(--vscode-descriptionForeground, inherit);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.ChatDebugViewTimelineInteractive {
   position: relative;
-  height: 54px;
-  overflow: hidden;
-  border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.14));
-  border-radius: 8px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
-  contain: strict;
-  user-select: none;
 }
 
-.ChatDebugViewTimelineBadges {
-  position: absolute;
-  inset: 4px 8px auto 8px;
-  height: 12px;
-  pointer-events: none;
-  z-index: 2;
+.Table {
+  width: calc(100% - var(--ChatDebugViewTableScrollBarWidth));
 }
 
-.ChatDebugViewTimelineBadge {
-  position: absolute;
-  top: 0;
-  display: flex;
-  align-items: center;
-  height: 12px;
-  padding: 0 5px;
-  border: 1px solid color-mix(in srgb, var(--vscode-widget-border, rgba(255, 255, 255, 0.18)) 82%, transparent);
+.TableScrollBar {
+  background: rgba(255, 255, 255, 0.06);
   border-radius: 999px;
-  background: color-mix(in srgb, var(--vscode-editorWidget-background, rgba(30, 30, 30, 0.92)) 90%, transparent);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
-  color: var(--vscode-descriptionForeground, inherit);
-  font-size: 9px;
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.ChatDebugViewTimelineBuckets {
+  height: var(--ChatDebugViewTableBodyHeight);
   position: absolute;
-  inset: 20px 8px 8px;
-  display: flex;
-  align-items: flex-end;
-  gap: 2px;
+  right: 0;
+  top: var(--ChatDebugViewTableHeaderHeight);
+  width: var(--ChatDebugViewTableScrollBarWidth);
 }
 
-.ChatDebugViewTimelineBucket {
-  display: flex;
-  flex: 1;
-  align-items: flex-end;
-  height: 100%;
-  min-width: 0;
-  cursor: pointer;
-}
-
-.ChatDebugViewTimelineBucketBar {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: flex-end;
-  gap: 2px;
-  height: 100%;
-}
-
-.ChatDebugViewTimelineBucketUnit {
-  flex: none;
-  height: 4px;
+.TableScrollBarThumb {
+  background: rgba(255, 255, 255, 0.22);
   border-radius: 999px;
-  background: var(--vscode-charts-blue, rgba(91, 151, 255, 0.9));
-}
-
-.ChatDebugViewTimelineBucketUnitEmpty {
-  opacity: 0.18;
-}
-
-.ChatDebugViewTimelineBucketSelected .ChatDebugViewTimelineBucketUnit,
-.ChatDebugViewTimelineBucketBarSelected .ChatDebugViewTimelineBucketUnit {
-  background: var(--vscode-charts-orange, rgba(255, 174, 0, 0.95));
-}
-
-.ChatDebugViewTimelineSelectionOverlay {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.ChatDebugViewTimelineCursorGuide {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  margin-left: -0.5px;
-  pointer-events: none;
-  background: color-mix(in srgb, var(--vscode-foreground, rgba(255, 255, 255, 0.88)) 58%, transparent);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vscode-editorWidget-background, rgba(30, 30, 30, 0.92)) 70%, transparent);
-}
-
-.ChatDebugViewTimelineCursorGuideVisible {
-  left: var(--ChatDebugViewTimelineCursorGuideLeft);
-}
-
-.ChatDebugViewTimelineSelectionRange {
-  position: absolute;
-  top: 20px;
-  bottom: 8px;
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--vscode-charts-orange, rgba(255, 174, 0, 0.95)) 18%, transparent);
-  outline: 1px solid color-mix(in srgb, var(--vscode-charts-orange, rgba(255, 174, 0, 0.95)) 55%, transparent);
-}
-
-.ChatDebugViewTimelineSelectionMarker {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 14px;
-  margin-left: -7px;
-  padding: 0;
-  border: 0;
-  background: linear-gradient(
-    90deg,
-    transparent calc(50% - 1px),
-    var(--vscode-charts-orange, rgba(255, 174, 0, 0.95)) calc(50% - 1px),
-    var(--vscode-charts-orange, rgba(255, 174, 0, 0.95)) calc(50% + 1px),
-    transparent calc(50% + 1px)
-  );
-}
-
-.ChatDebugViewTimelineSelectionHandle {
-  pointer-events: auto;
-  cursor: ew-resize;
-}
-
-.ChatDebugViewTimelineSelectionHandleStart,
-.ChatDebugViewTimelineSelectionMarkerStart {
-  left: var(--ChatDebugViewTimelineSelectionStartLeft);
-}
-
-.ChatDebugViewTimelineSelectionHandleEnd,
-.ChatDebugViewTimelineSelectionMarkerEnd {
-  left: var(--ChatDebugViewTimelineSelectionEndLeft);
-}
-
-.ChatDebugViewTimelineSelectionHandle::before {
-  content: '';
+  height: var(--ChatDebugViewTableScrollBarHeight);
+  left: 2px;
   position: absolute;
-  top: 0;
-  left: 50%;
-  width: 14px;
-  height: 16px;
-  transform: translateX(-50%);
-  border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.22));
-  border-radius: 4px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  top: var(--ChatDebugViewTableScrollBarOffset);
+  width: calc(100% - 4px);
 }
 
-.ChatDebugViewTimelineSelectionHandle::after {
-  content: '';
-  position: absolute;
-  top: 5px;
-  left: 50%;
-  width: 7px;
-  height: 6px;
-  transform: translateX(-50%);
-  background: linear-gradient(
-    90deg,
-    transparent 0,
-    transparent 1px,
-    var(--vscode-foreground, rgba(255, 255, 255, 0.88)) 1px,
-    var(--vscode-foreground, rgba(255, 255, 255, 0.88)) 2px,
-    transparent 2px,
-    transparent 4px,
-    var(--vscode-foreground, rgba(255, 255, 255, 0.88)) 4px,
-    var(--vscode-foreground, rgba(255, 255, 255, 0.88)) 5px,
-    transparent 5px,
-    transparent 100%
-  );
-  opacity: 0.8;
-}
-
-.ChatDebugViewTimelineSelectionHandle:hover::before {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));
-}
-
-.ChatDebugViewTimelineSelectionHandle:focus-visible {
-  outline: 2px solid var(--vscode-focusBorder, rgba(255, 255, 255, 0.45));
-  outline-offset: 1px;
-}
-
-.TokenString {
-  white-space: nowrap;
-}
 `;
 };
 
@@ -4643,16 +4735,24 @@ const ChatDebugViewDevtools = 'ChatDebugView--devtools';
 const ChatDebugViewDetails = 'ChatDebugViewDetails';
 const ChatDebugViewDetailsBottom = 'ChatDebugViewDetailsBottom';
 const ChatDebugViewDetailsClose = 'ChatDebugViewDetailsClose';
-const ChatDebugViewDetailsTab = 'ChatDebugViewDetailsTab';
-const ChatDebugViewDetailsTabSelected = 'ChatDebugViewDetailsTabSelected';
+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 ChatDebugViewEventRawText = 'ChatDebugViewEventRawText';
-const ChatDebugViewEventLineContent = 'ChatDebugViewEventLineContent';
+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';
@@ -4660,6 +4760,7 @@ 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';
@@ -4667,11 +4768,13 @@ 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 TableScrollBar = 'TableScrollBar';
+const TableScrollBarThumb = 'TableScrollBarThumb';
 const TableWrapper = 'TableWrapper';
+const TableWrapperWrapper = 'TableWrapperWrapper';
 const FocusOutline = 'FocusOutline';
 const Resizer = 'Resizer';
 const ResizerInner = 'ResizerInner';
@@ -4704,19 +4807,24 @@ const ChatDebugViewTimelineSelectionMarkerEnd = 'ChatDebugViewTimelineSelectionM
 const ChatDebugViewTimelineSelectionMarkerStart = 'ChatDebugViewTimelineSelectionMarkerStart';
 const ChatDebugViewTimelineSelectionOverlay = 'ChatDebugViewTimelineSelectionOverlay';
 const ChatDebugViewTimelineSelectionRange = 'ChatDebugViewTimelineSelectionRange';
-const ChatDebugViewTimelineSummary = 'ChatDebugViewTimelineSummary';
-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 Row = 'row';
 const TokenBoolean = 'Token TokenBoolean';
 const TokenKey = 'Token TokenKey';
 const TokenNumeric = 'Token TokenNumeric';
@@ -4763,6 +4871,26 @@ 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 {
@@ -4806,19 +4934,6 @@ const getRefreshButtonDom = () => {
   return refreshButtonDom;
 };
 
-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 getDebugViewTopDom = (filterValue, useDevtoolsLayout, categoryFilters) => {
   const refreshButtonDom = getRefreshButtonDom();
   if (useDevtoolsLayout) {
@@ -4856,23 +4971,85 @@ const getDetailsCloseButtonDom = () => {
   return detailsCloseButtonDom;
 };
 
-const getLineNodeDom = (line, index) => {
+const defaultEditorCursor = {
+  columnIndex: 0,
+  rowIndex: 1
+};
+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 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 getEditorRowDom = line => {
+  return [{
+    childCount: line.childCount,
+    className: EditorRow,
+    type: Div
+  }, ...line.nodes];
+};
+const getEditorRowsDom = lineData => {
+  return [{
+    childCount: lineData.length,
+    className: EditorRows,
+    type: Div
+  }, ...lineData.flatMap(getEditorRowDom)];
+};
+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: Row,
+    className: EditorContent,
+    onPointerDown,
     type: Div
   }, {
-    childCount: 1,
-    className: ChatDebugViewEventLineNumber,
-    type: Span
-  }, text(String(index + 1)), {
-    childCount: line.childCount,
-    className: ChatDebugViewEventLineContent,
-    type: Span
-  }, ...line.nodes];
-};
-const getLineNodes = lines => {
-  return lines.flatMap(getLineNodeDom);
+    '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 isDigit = character => {
@@ -5031,256 +5208,63 @@ const getEventNode = value => {
     type: getEventTypeLabel(value)
   } : value;
   const lines = getJsonLines(renderedValue);
-  const lineNodes = getLineNodes(lines.map(line => {
+  const lineData = lines.map(line => {
     const lineContentNodes = getLineContentNodes(line);
     return {
       childCount: lineContentNodes.length / 2,
       nodes: lineContentNodes
     };
-  }));
-  return lineNodes;
+  });
+  return getEditorDom(lineData);
 };
 
 const getPanelId = detailTab => {
   return `ChatDebugViewDetailsPanel-${detailTab}`;
 };
 
-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;
-};
-
-const hasOwn = (event, key) => {
-  return Object.hasOwn(event, key);
-};
-
-const shouldIncludeArguments = (event, name) => {
-  if (!hasOwn(event, 'arguments')) {
-    return false;
-  }
-  if (name === 'getWorkspaceUri') {
-    return false;
-  }
-  return true;
-};
-
-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 getListFilesPreviewEvent = (event, name) => {
-  if (name !== 'list_files') {
-    return undefined;
-  }
-  const {
-    result
-  } = event;
-  if (typeof result !== 'object' || result === null || !Object.hasOwn(result, 'entries')) {
-    return undefined;
-  }
-  const {
-    entries
-  } = result;
-  return entries;
-};
-
-const isChatMessageAddedEvent = event => {
-  return event.type === 'chat-message-added';
-};
-
-const isChatMessageUpdatedEvent = event => {
-  return event.type === 'chat-message-updated';
-};
-
-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 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 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 getReadFilePreviewText = (event, name) => {
-  if (name !== 'read_file') {
-    return undefined;
-  }
-  const {
-    result
-  } = event;
-  if (typeof result !== 'string') {
-    return undefined;
-  }
-  return result;
-};
-
-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 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 isAttachmentImagePreview = value => {
   return typeof value === 'object' && value !== null && value.previewType === 'image';
 };
 
+const getImagePreviewLabelDom = preview => {
+  if (preview.stats === undefined) {
+    return [{
+      childCount: 1,
+      className: ChatDebugViewImagePreviewLabel,
+      type: Span
+    }, text(preview.alt)];
+  }
+  return [{
+    childCount: 2,
+    className: ChatDebugViewImagePreviewLabel,
+    type: Span
+  }, {
+    childCount: 1,
+    type: Span
+  }, text(preview.stats), {
+    childCount: 1,
+    type: Span
+  }, text(preview.alt)];
+};
 const getImagePreviewDom = preview => {
   return [{
     childCount: 2,
     className: ChatDebugViewImagePreview,
     type: Div
+  }, {
+    childCount: 1,
+    className: ChatDebugViewImagePreviewImageWrapper,
+    type: Div
   }, {
     alt: preview.alt,
     childCount: 0,
     className: ChatDebugViewImagePreviewImage,
     src: preview.src,
     type: Img
-  }, {
-    childCount: 1,
-    className: ChatDebugViewImagePreviewLabel,
-    type: Span
-  }, text(preview.alt)];
+  }, ...getImagePreviewLabelDom(preview)];
 };
 
-const getTextNode = (value, showLineNumbers = true) => {
-  if (!showLineNumbers) {
-    return [{
-      childCount: 1,
-      className: ChatDebugViewEventRawText,
-      type: P
-    }, text(value)];
-  }
+const getTextNode = (value, showLineNumbers = true, cursor = null) => {
   const lines = value.split('\n');
   const lineData = lines.map(line => {
     return {
@@ -5292,16 +5276,15 @@ const getTextNode = (value, showLineNumbers = true) => {
       }, text(line)]
     };
   });
-  const lineNodes = getLineNodes(lineData);
-  return lineNodes;
+  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 [];
@@ -5312,10 +5295,6 @@ const getPreviewEventNodes = (previewEvent, selectedEvent) => {
   return getEventNode(previewEvent);
 };
 
-const getTabId = detailTab => {
-  return `ChatDebugViewDetailsTab-${detailTab}`;
-};
-
 const getDetailTabDom = detailTab => {
   const {
     isSelected
@@ -5324,11 +5303,11 @@ const getDetailTabDom = detailTab => {
     'aria-controls': getPanelId(detailTab.name),
     ariaSelected: isSelected,
     childCount: 1,
-    className: mergeClassNames(ChatDebugViewDetailsTab, isSelected ? ChatDebugViewDetailsTabSelected : ''),
-    id: getTabId(detailTab.name),
+    className: mergeClassNames(PanelTab, isSelected ? PanelTabSelected : ''),
     name: detailTab.name,
     onChange: SelectDetailTab,
     onClick: SelectDetailTab,
+    onFocus: HandleDetailTabsFocus,
     role: Tab,
     tabIndex: isSelected ? 0 : -1,
     type: Button$1
@@ -5377,9 +5356,58 @@ const getTimestampText = value => {
 const getEndText = event => {
   return getTimestampText(event.ended ?? event.endTime ?? event.endTimestamp ?? event.timestamp);
 };
-
-const getStartText = event => {
-  return getTimestampText(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+
+const getStartText = event => {
+  return getTimestampText(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+};
+
+const getTimingPreviewSegments = event => {
+  return [{
+    endPercent: 100,
+    label: getDurationText(event),
+    startPercent: 0
+  }];
+};
+const getTimingPreviewSegmentNodes = segments => {
+  return [{
+    childCount: segments.length,
+    className: ChatDebugViewTimingPreviewTrackOverlay,
+    type: Div
+  }, ...segments.flatMap(segment => {
+    const widthPercent = Math.max(0, segment.endPercent - segment.startPercent);
+    return [{
+      childCount: 1,
+      className: ChatDebugViewTimingPreviewSegment,
+      style: `left:${segment.startPercent}%;width:${widthPercent}%;min-width:2px;`,
+      type: Div
+    }, text(segment.label)];
+  })];
+};
+const getTimingPreviewDom = event => {
+  const segments = getTimingPreviewSegments(event);
+  return [{
+    childCount: 1,
+    className: ChatDebugViewTimingPreview,
+    type: Div
+  }, {
+    childCount: 4,
+    className: ChatDebugViewTimingPreviewTrack,
+    type: Div
+  }, {
+    childCount: 0,
+    className: ChatDebugViewTimingPreviewRail,
+    type: Div
+  }, ...getTimingPreviewSegmentNodes(segments), {
+    childCount: 0,
+    className: `${ChatDebugViewTimingPreviewMarker} ${ChatDebugViewTimingPreviewMarkerStart}`,
+    style: 'left:12px;',
+    type: Div
+  }, {
+    childCount: 0,
+    className: `${ChatDebugViewTimingPreviewMarker} ${ChatDebugViewTimingPreviewMarkerEnd}`,
+    style: 'right:12px;',
+    type: Div
+  }];
 };
 
 const timingRowNode = {
@@ -5403,26 +5431,26 @@ const getTimingRowDom = (label, value) => {
 
 const getTimingDetailsDom = event => {
   return [{
-    childCount: 3,
+    childCount: 4,
     className: ChatDebugViewTiming,
     type: Div
-  }, ...getTimingRowDom(started(), getStartText(event)), ...getTimingRowDom(ended(), getEndText(event)), ...getTimingRowDom(duration(), getDurationText(event))];
+  }, ...getTimingPreviewDom(event), ...getTimingRowDom(started(), getStartText(event)), ...getTimingRowDom(ended(), getEndText(event)), ...getTimingRowDom(duration(), getDurationText(event))];
 };
 
-const getNextSiblingIndex$1 = (nodes, index) => {
+const getNextSiblingIndex$2 = (nodes, index) => {
   let nextSiblingIndex = index + 1;
   const childCount = nodes[index]?.childCount || 0;
   for (let i = 0; i < childCount; i++) {
-    nextSiblingIndex = getNextSiblingIndex$1(nodes, nextSiblingIndex);
+    nextSiblingIndex = getNextSiblingIndex$2(nodes, nextSiblingIndex);
   }
   return nextSiblingIndex;
 };
-const getDirectChildCount = nodes => {
+const getDirectChildCount$1 = nodes => {
   let count = 0;
   let index = 0;
   while (index < nodes.length) {
     count++;
-    index = getNextSiblingIndex$1(nodes, index);
+    index = getNextSiblingIndex$2(nodes, index);
   }
   return count;
 };
@@ -5432,12 +5460,13 @@ 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 [];
   }
   const normalizedDetailTabs = getNormalizedDetailTabs(selectedEvent, detailTabs);
   const safeSelectedDetailTab = getSelectedDetailTab(normalizedDetailTabs);
+  const selectedDetailTab = normalizedDetailTabs.find(detailTab => detailTab.name === safeSelectedDetailTab) ?? normalizedDetailTabs[0];
   const getDetailContentDom = () => {
     const getDetailContentDomTiming = () => {
       if (selectedEvent === null) {
@@ -5452,7 +5481,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) {
@@ -5474,8 +5506,8 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
     };
     const contentNodes = safeSelectedDetailTab === Timing ? getDetailContentDomTiming() : safeSelectedDetailTab === Preview ? getDetailContentDomPreview() : safeSelectedDetailTab === Payload ? getDetailContentDomPayload() : getDetailContentDomResponse();
     return [{
-      'aria-labelledby': getTabId(safeSelectedDetailTab),
-      childCount: getDirectChildCount(contentNodes),
+      'aria-label': selectedDetailTab.label,
+      childCount: getDirectChildCount$1(contentNodes),
       className: ChatDebugViewDetailsBottom,
       id: getPanelId(safeSelectedDetailTab),
       onContextMenu: HandleDetailsContextMenu,
@@ -5498,18 +5530,17 @@ 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 [{
           childCount: 1,
-          className: TableCell,
+          className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
           type: Td
         }, text(getEventTableDurationText(event))];
       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:
@@ -5524,16 +5555,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];
   });
@@ -5554,14 +5587,10 @@ const getEventsClassName = hasSelectedEvent => {
 };
 
 const sashNodesDom = [{
-  childCount: 1,
+  childCount: 0,
   className: Sash,
   onPointerDown: HandleSashPointerDown,
   type: Button$1
-}, {
-  childCount: 0,
-  className: ChatDebugViewSashLine,
-  type: Div
 }];
 const getSashNodesDom = hasSelectedEvent => {
   if (!hasSelectedEvent) {
@@ -5573,7 +5602,33 @@ const getSashNodesDom = hasSelectedEvent => {
 const None = 'none';
 const Status = 'status';
 
-const getSplitViewDom = (splitChildCount, eventsChildCount, eventsClassName, tableNodes, sashNodes, detailsNodes) => {
+const getNextSiblingIndex$1 = (nodes, index) => {
+  let nextSiblingIndex = index + 1;
+  const childCount = nodes[index]?.childCount || 0;
+  for (let i = 0; i < childCount; i++) {
+    nextSiblingIndex = getNextSiblingIndex$1(nodes, nextSiblingIndex);
+  }
+  return nextSiblingIndex;
+};
+const getDirectChildCount = nodes => {
+  let count = 0;
+  let index = 0;
+  while (index < nodes.length) {
+    count++;
+    index = getNextSiblingIndex$1(nodes, index);
+  }
+  return count;
+};
+const getSplitViewDom = (splitChildCount, eventsClassName, tableNodes, sashNodes, detailsNodes) => {
+  const eventsChildCount = getDirectChildCount(tableNodes);
+  if (splitChildCount === 1) {
+    return [{
+      childCount: eventsChildCount,
+      className: eventsClassName,
+      role: 'application',
+      type: Div
+    }, ...tableNodes];
+  }
   return [{
     childCount: splitChildCount,
     className: ChatDebugViewDevtoolsSplit,
@@ -5587,6 +5642,61 @@ const getSplitViewDom = (splitChildCount, eventsChildCount, eventsClassName, tab
   }, ...tableNodes, ...sashNodes, ...detailsNodes];
 };
 
+const formatTimelineMilliseconds = value => {
+  return `${Math.round(value * 1000)}ms`;
+};
+
+const formatTimelineSeconds = value => {
+  if (Number.isInteger(value)) {
+    return `${value}s`;
+  }
+  return `${Number(value.toFixed(1))}s`;
+};
+
+const getEndTime = event => {
+  return event.ended ?? event.endTime ?? event.timestamp;
+};
+
+const getStartTime = event => {
+  return event.started ?? event.startTime ?? event.timestamp;
+};
+
+const formatTableSummaryDuration = durationMs => {
+  if (durationMs < 1000) {
+    return formatTimelineMilliseconds(durationMs / 1000);
+  }
+  return formatTimelineSeconds(durationMs / 1000);
+};
+const getTableSummary = events => {
+  let minStart = Number.POSITIVE_INFINITY;
+  let maxEnd = Number.NEGATIVE_INFINITY;
+  for (const event of events) {
+    const startTime = toTimeNumber(getStartTime(event));
+    const endTime = toTimeNumber(getEndTime(event));
+    if (typeof startTime === 'number' && Number.isFinite(startTime)) {
+      minStart = Math.min(minStart, startTime);
+    }
+    if (typeof endTime === 'number' && Number.isFinite(endTime)) {
+      maxEnd = Math.max(maxEnd, endTime);
+    }
+  }
+  const durationMs = Number.isFinite(minStart) && Number.isFinite(maxEnd) ? Math.max(0, maxEnd - minStart) : 0;
+  return tableSummary(events.length, formatTableSummaryDuration(durationMs));
+};
+
+const tableSummaryNode = {
+  childCount: 1,
+  className: TableSummary,
+  role: Status,
+  type: Div
+};
+const getTableSummaryDom = summary => {
+  if (!summary) {
+    return [];
+  }
+  return [tableSummaryNode, text(summary)];
+};
+
 const getTableBodyDom = (rowNodes, eventCount) => {
   return [{
     childCount: eventCount === 0 ? 1 : eventCount,
@@ -5611,42 +5721,21 @@ const getTableColumnGroupDom = visibleTableColumns => {
   }))];
 };
 
+const getHeaderCellNode = (column, tableColumns) => {
+  return [{
+    childCount: 1,
+    className: ChatDebugViewHeaderCell,
+    name: column,
+    onClick: HandleTableHeaderClick,
+    type: Th
+  }, text(getTableColumnLabel(tableColumns, column))];
+};
 const getHeaderCellNodes = (visibleTableColumns, tableColumns = createTableColumns()) => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns, tableColumns);
-  return orderedVisibleTableColumns.flatMap(column => {
-    switch (column) {
-      case Duration:
-        return [{
-          childCount: 1,
-          className: ChatDebugViewHeaderCell,
-          name: column,
-          onClick: HandleTableHeaderClick,
-          type: Th
-        }, text(getTableColumnLabel(tableColumns, column))];
-      case Status$1:
-        return [{
-          childCount: 1,
-          className: ChatDebugViewHeaderCell,
-          name: column,
-          onClick: HandleTableHeaderClick,
-          type: Th
-        }, text(getTableColumnLabel(tableColumns, column))];
-      case Type:
-        return [{
-          childCount: 1,
-          className: ChatDebugViewHeaderCell,
-          name: column,
-          onClick: HandleTableHeaderClick,
-          type: Th
-        }, text(getTableColumnLabel(tableColumns, column))];
-      default:
-        return [];
-    }
-  });
+  return orderedVisibleTableColumns.flatMap(column => getHeaderCellNode(column, tableColumns));
 };
 
 const getTableHeaderDom = (visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns()) => {
-  const headerCellNodes = getHeaderCellNodes(visibleTableColumns, tableColumns);
   return [{
     childCount: 1,
     className: TableHead,
@@ -5656,7 +5745,17 @@ const getTableHeaderDom = (visibleTableColumns = defaultVisibleTableColumns, tab
     childCount: visibleTableColumns.length,
     className: TableRow,
     type: Tr
-  }, ...headerCellNodes];
+  }, ...getHeaderCellNodes(visibleTableColumns, tableColumns)];
+};
+
+const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0) => {
+  return [{
+    childCount: 3,
+    className: Table,
+    onFocus: HandleTableFocus,
+    tabIndex: 0,
+    type: Table$1
+  }, ...getTableColumnGroupDom(visibleTableColumns), ...getTableHeaderDom(visibleTableColumns, tableColumns), ...getTableBodyDom(rowNodes, eventCount)];
 };
 
 const resizerNames = ['ResizerOne', 'ResizerTwo'];
@@ -5674,6 +5773,7 @@ const getTableResizersDom = visibleTableColumns => {
     name: resizerNames[index],
     onPointerDown: HandleTableResizerPointerDown,
     role: None,
+    tabIndex: -1,
     type: Button$1
   }, {
     childCount: 0,
@@ -5682,80 +5782,50 @@ const getTableResizersDom = visibleTableColumns => {
     type: Div
   }]);
   return [{
-    childCount: resizerCount + 1,
+    childCount: resizerCount,
     className: Resizers,
     type: Div
   }, ...resizerNodes];
 };
 
-const tableSummaryNode = {
-  childCount: 1,
-  className: TableSummary,
-  role: Status,
-  type: Div
-};
-const getTableSummaryDom = summary => {
-  if (!summary) {
+const getTableScrollBarDom = visible => {
+  if (!visible) {
     return [];
   }
-  return [tableSummaryNode, text(summary)];
-};
-
-const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0) => {
-  const tableWrapperClassName = mergeClassNames(TableWrapper, focus === FocusChatDebugTable ? FocusOutline : '');
   return [{
-    childCount: 2,
-    className: tableWrapperClassName,
+    childCount: 1,
+    className: TableScrollBar,
+    onPointerDown: HandleTableScrollBarPointerDown,
     type: Div
   }, {
-    childCount: 3,
-    className: Table,
-    onFocus: HandleTableFocus,
-    tabIndex: 0,
-    type: Table$1
-  }, ...getTableColumnGroupDom(visibleTableColumns), ...getTableHeaderDom(visibleTableColumns, tableColumns), ...getTableBodyDom(rowNodes, eventCount), ...getTableResizersDom(visibleTableColumns), ...getTableSummaryDom(summary)];
-};
-
-const formatTimelineMilliseconds = value => {
-  return `${Math.round(value * 1000)}ms`;
-};
-
-const formatTimelineSeconds = value => {
-  if (Number.isInteger(value)) {
-    return `${value}s`;
-  }
-  return `${Number(value.toFixed(1))}s`;
-};
-
-const getEndTime = event => {
-  return event.ended ?? event.endTime ?? event.timestamp;
+    childCount: 0,
+    className: TableScrollBarThumb,
+    type: Div
+  }];
 };
 
-const getStartTime = event => {
-  return event.started ?? event.startTime ?? event.timestamp;
+const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '', showScrollBar = false) => {
+  const tableWrapperClassName = mergeClassNames(TableWrapper, focus === FocusChatDebugTable ? FocusOutline : '', className);
+  const scrollBarNodes = getTableScrollBarDom(showScrollBar);
+  const tableWrapperNode = {
+    childCount: showScrollBar ? 3 : 2,
+    className: tableWrapperClassName,
+    onWheel: HandleTableWheel,
+    type: Div,
+    ...(role ? {
+      role
+    } : {})
+  };
+  return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus), ...getTableResizersDom(visibleTableColumns), ...scrollBarNodes];
 };
 
-const formatTableSummaryDuration = durationMs => {
-  if (durationMs < 1000) {
-    return formatTimelineMilliseconds(durationMs / 1000);
-  }
-  return formatTimelineSeconds(durationMs / 1000);
-};
-const getTableSummary = events => {
-  let minStart = Number.POSITIVE_INFINITY;
-  let maxEnd = Number.NEGATIVE_INFINITY;
-  for (const event of events) {
-    const startTime = toTimeNumber(getStartTime(event));
-    const endTime = toTimeNumber(getEndTime(event));
-    if (typeof startTime === 'number' && Number.isFinite(startTime)) {
-      minStart = Math.min(minStart, startTime);
-    }
-    if (typeof endTime === 'number' && Number.isFinite(endTime)) {
-      maxEnd = Math.max(maxEnd, endTime);
-    }
-  }
-  const durationMs = Number.isFinite(minStart) && Number.isFinite(maxEnd) ? Math.max(0, maxEnd - minStart) : 0;
-  return tableSummary(events.length, formatTableSummaryDuration(durationMs));
+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, showScrollBar), ...tableSummaryNodes];
 };
 
 const getBucketUnitDom = (unitCount, presetValue) => {
@@ -5881,40 +5951,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
-  }, {
-    childCount: 1,
-    className: ChatDebugViewTimelineSummary,
-    type: H2
-  }, 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,
@@ -5935,23 +5996,33 @@ const getTimelineDom = (timelineInfo, hoverPercent = null) => {
   }, ...selectionNodes];
 };
 
-const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), 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 hasSelectedEvent = responseEventNodes.length > 0;
-  const eventsChildCount = events.length === 0 ? 1 : 2;
-  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableDom(rowNodes, events.length, visibleTableColumns, tableColumns, getTableSummary(events), focus);
   const eventsClassName = getEventsClassName(hasSelectedEvent);
-  const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs);
+  const summary = getTableSummary(events);
+  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;
-  return [...timelineNodes, ...getSplitViewDom(splitChildCount, eventsChildCount, eventsClassName, tableNodes, sashNodes, detailsNodes)];
+  const rootChildCount = 3;
+  return [{
+    childCount: rootChildCount,
+    className: mergeClassNames(ChatDebugView, ChatDebugViewDevtools),
+    type: Div
+  }, ...timelineNodes, ...getSplitViewDom(splitChildCount, eventsClassName, tableNodes, sashNodes, detailsNodes)];
 };
 
 const getEmptyMessage = (eventCount, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage) => {
@@ -5974,21 +6045,6 @@ const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
   }, text(errorMessage || emptyMessage)] : eventNodes)];
 };
 
-const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds) => {
-  const trimmedStart = timelineStartSeconds.trim();
-  const trimmedEnd = timelineEndSeconds.trim();
-  if (trimmedStart && trimmedEnd) {
-    return secondsRange(trimmedStart, trimmedEnd);
-  }
-  if (trimmedStart) {
-    return fromSeconds(trimmedStart);
-  }
-  if (trimmedEnd) {
-    return toSeconds(trimmedEnd);
-  }
-  return '';
-};
-
 const getNextSiblingIndex = (nodes, index) => {
   let nextSiblingIndex = index + 1;
   const childCount = nodes[index]?.childCount || 0;
@@ -6012,7 +6068,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, 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);
   }
@@ -6025,7 +6081,6 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   if (trimmedFilterValue) {
     filterDescriptionParts.push(trimmedFilterValue);
   }
-  const timelineFilterDescription = getTimelineFilterDescription(timelineStartSeconds, timelineEndSeconds);
   if (timelineFilterDescription) {
     filterDescriptionParts.push(timelineFilterDescription);
   }
@@ -6036,7 +6091,18 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   const useNoToolCallEventsMessage = eventCategoryFilters.length === 1 && eventCategoryFilters[0] === Tools && !trimmedFilterValue && !hasTimelineFilter;
   const emptyMessage = getEmptyMessage(events.length, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage);
   const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
-  const contentNodes = useDevtoolsLayout ? getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, visibleTableColumns, detailTabs, tableColumns, timelineInfo, timelineHoverPercent, focus) : getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
+  if (useDevtoolsLayout) {
+    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);
+    return [{
+      childCount: rootChildCount,
+      className: mergeClassNames(ChatDebugView, ChatDebugViewDevtools),
+      type: Div
+    }, ...topLevelNodes];
+  }
+  const contentNodes = getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
   const debugViewTopDom = getDebugViewTopDom(filterValue, useDevtoolsLayout, categoryFilters);
   const rootChildCount = 1 + getTopLevelChildCount(contentNodes);
   return [{
@@ -6058,8 +6124,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, withSessionEventIds(newState.timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, newState.visibleTableColumns, 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];
 };
 
@@ -6171,6 +6237,9 @@ const renderEventListeners = () => {
   }, {
     name: SelectDetailTab,
     params: ['selectDetailTab', TargetName]
+  }, {
+    name: HandleDetailTabsFocus,
+    params: ['handleDetailTabsFocus', TargetName]
   }, {
     name: HandleTimelineRangePreset,
     params: ['handleTimelineRangePreset', 'event.target.dataset.value']
@@ -6200,6 +6269,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],
@@ -6216,6 +6299,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleTimelineDoubleClick,
     params: ['handleTimelineDoubleClick']
+  }, {
+    name: HandlePreviewTextPointerDown,
+    params: ['handlePreviewTextPointerDown', 'event.clientX - event.currentTarget.getBoundingClientRect().left', 'event.clientY - event.currentTarget.getBoundingClientRect().top']
   }];
 };
 
@@ -6223,18 +6309,14 @@ const rerender = state => {
   return structuredClone(state);
 };
 
-const isSameVisibleTableColumns = (a, b) => {
-  return a.length === b.length && a.every((value, index) => value === b[index]);
-};
-
 const resetTableColumns = state => {
-  if (isSameVisibleTableColumns(state.visibleTableColumns, defaultVisibleTableColumns) && isSameTableColumnWidths(state.tableColumnWidths, defaultTableColumnWidths)) {
+  if (getVisibleTableColumns(state.tableColumns).join(',') === defaultVisibleTableColumns.join(',') && isSameTableColumnWidths(state.tableColumnWidths, defaultTableColumnWidths)) {
     return state;
   }
   return {
     ...state,
-    tableColumnWidths: defaultTableColumnWidths,
-    visibleTableColumns: defaultVisibleTableColumns
+    tableColumns: createTableColumns(),
+    tableColumnWidths: defaultTableColumnWidths
   };
 };
 
@@ -6243,10 +6325,10 @@ const handleResize = (state, dimensions) => {
     ...state,
     ...dimensions
   };
-  return {
+  return applyVirtualTableState({
     ...nextState,
     tableWidth: clampTableWidth(nextState.width, state.tableWidth)
-  };
+  });
 };
 
 const isResizeDimensions = value => {
@@ -6266,10 +6348,10 @@ const saveState = state => {
     filterValue,
     selectedEventId,
     sessionId,
+    tableColumns,
     tableColumnWidths,
     timelineEndSeconds,
-    timelineStartSeconds,
-    visibleTableColumns
+    timelineStartSeconds
   } = state;
   return {
     eventCategoryFilter: getSelectedEventCategoryFilter(categoryFilters),
@@ -6281,7 +6363,7 @@ const saveState = state => {
     tableColumnWidths,
     timelineEndSeconds,
     timelineStartSeconds,
-    visibleTableColumns
+    visibleTableColumns: getVisibleTableColumns(tableColumns)
   };
 };
 
@@ -6295,19 +6377,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 {
@@ -6317,12 +6402,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,
@@ -6337,6 +6425,8 @@ const setSessionId = async (state, sessionId) => {
     errorMessage: '',
     events,
     initial: false,
+    previewTextCursorColumnIndex: null,
+    previewTextCursorRowIndex: null,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null,
@@ -6348,16 +6438,24 @@ const toggleTableColumnVisibility = (state, column) => {
   if (!isTableColumn(column)) {
     return state;
   }
-  const nextVisibleColumns = state.visibleTableColumns.includes(column) ? state.visibleTableColumns.filter(visibleColumn => visibleColumn !== column) : [...state.visibleTableColumns, column];
   return {
     ...state,
-    visibleTableColumns: getOrderedVisibleTableColumns(nextVisibleColumns)
+    tableColumns: state.tableColumns.map(tableColumn => {
+      if (tableColumn.name !== column) {
+        return tableColumn;
+      }
+      return {
+        ...tableColumn,
+        isVisible: !tableColumn.isVisible
+      };
+    })
   };
 };
 
 const commandMap = {
   'ChatDebug.appendStoredEventForTest': wrapCommand(appendStoredEventForTest),
   'ChatDebug.appendStoredImageAttachmentForTest': wrapCommand(appendStoredImageAttachmentForTest),
+  'ChatDebug.appendStoredRemovedImageAttachmentForTest': wrapCommand(appendStoredRemovedImageAttachmentForTest),
   'ChatDebug.create': create,
   'ChatDebug.diff2': diff2,
   'ChatDebug.focusFirst': wrapCommand(focusFirst),
@@ -6371,12 +6469,14 @@ const commandMap = {
   'ChatDebug.handleCloseDetails': wrapCommand(handleCloseDetails),
   'ChatDebug.handleDetailsContextMenu': wrapCommand(handleDetailsContextMenu),
   'ChatDebug.handleDetailsTopContextMenu': wrapCommand(handleDetailsTopContextMenu),
+  'ChatDebug.handleDetailTabsFocus': wrapCommand(handleDetailTabsFocus),
   'ChatDebug.handleEscape': wrapCommand(handleEscape),
   'ChatDebug.handleEventCategoryFilter': wrapCommand(handleEventCategoryFilter),
   'ChatDebug.handleEventRowClick': wrapCommand(handleEventRowClick),
   '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),
@@ -6390,6 +6490,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),
@@ -6422,7 +6526,9 @@ const sendMessagePortToChatStorageWorker = async port => {
 };
 const initializeChatStorageWorker = async () => {
   const rpc = await create$4({
-    commandMap: {},
+    commandMap: {
+      [rpcId]: handleStorageWorkerUpdate
+    },
     send: sendMessagePortToChatStorageWorker
   });
   set$2(rpc);