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

package/dist/chatDebugViewWorkerMain.js

@@ -1117,11 +1117,17 @@ const create$2 = rpcId => {
   };
 };
 
+const ListBox = 'listbox';
+const Option = 'option';
+const Tab = 'tab';
+
 const Button$1 = 1;
+const Col = 2;
+const ColGroup = 3;
 const Div = 4;
 const Input = 6;
 const Span = 8;
-const Table = 9;
+const Table$1 = 9;
 const TBody = 10;
 const Td = 11;
 const Text = 12;
@@ -1129,9 +1135,9 @@ const Th = 13;
 const THead = 14;
 const Tr = 15;
 const Img = 17;
-const H2 = 22;
 const Section = 41;
 const Search = 42;
+const TextArea = 62;
 const Reference = 100;
 
 const Button = 'event.button';
@@ -1147,8 +1153,10 @@ const Unchecked = 3;
 const ChatStorageWorker = 6003;
 const RendererWorker = 1;
 
+const FocusSelector = 'Viewlet.focusSelector';
 const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
+const SetFocusContext = 'Viewlet.setFocusContext';
 const SetPatches = 'Viewlet.setPatches';
 
 const {
@@ -1174,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('.');
@@ -1310,6 +1321,54 @@ const appendStoredEventForTest = async (state, 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);
@@ -1343,7 +1402,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}`,
@@ -1353,7 +1412,7 @@ const appendStoredImageAttachmentForTest = async (state, sessionId, eventId, mim
     name,
     sessionId,
     timestamp,
-    type: 'chat-attachment-added'
+    type: 'chat-attachment-removed'
   });
   return state;
 };
@@ -1374,7 +1433,7 @@ const All$1 = 'All';
 const CloseDetails$1 = 'Close details';
 const Copy = 'Copy';
 const DetailSections = 'Detail sections';
-const Duration$1 = 'Duration';
+const Duration$1 = 'Time';
 const Ended = 'Ended';
 const FailedToLoadChatDebugSession = 'Failed to load chat debug session "{PH1}". Please try again.';
 const FailedToLoadChatDebugSessionWithError = 'Failed to load chat debug session "{PH1}": {PH2}';
@@ -1398,8 +1457,10 @@ const ResetColumns = 'Reset columns';
 const Response$1 = 'Response';
 const SecondsRange = '{PH1}s-{PH2}s';
 const Started = 'Started';
-const Status$1 = 'Status';
+const Status$2 = 'Status';
 const Stream$1 = 'Stream';
+const TableSummaryPlural = '{PH1} events, {PH2} from start to finish';
+const TableSummarySingular = '{PH1} event, {PH2} from start to finish';
 const Timing$1 = 'Timing';
 const ToSeconds = 'to {PH1}s';
 const Tools$1 = 'Tools';
@@ -1413,7 +1474,7 @@ const copy = () => {
   return i18nString(Copy);
 };
 const status = () => {
-  return i18nString(Status$1);
+  return i18nString(Status$2);
 };
 const all = () => {
   return i18nString(All$1);
@@ -1516,6 +1577,12 @@ const stream = () => {
 const timing = () => {
   return i18nString(Timing$1);
 };
+const tableSummary = (eventCount, duration) => {
+  return i18nString(eventCount === 1 ? TableSummarySingular : TableSummaryPlural, {
+    PH1: String(eventCount),
+    PH2: duration
+  });
+};
 const toSeconds = seconds => {
   return i18nString(ToSeconds, {
     PH1: seconds
@@ -1632,13 +1699,9 @@ const selectDetailTab$1 = (detailTabs, selectedDetailTab) => {
     return detailTabs;
   }
   return detailTabs.map(detailTab => {
-    const isSelectedProperty = detailTab.name === selectedDetailTab;
-    if (detailTab.isSelected === isSelectedProperty) {
-      return detailTab;
-    }
     return {
       ...detailTab,
-      isSelected: isSelectedProperty
+      isSelected: detailTab.name === selectedDetailTab
     };
   });
 };
@@ -1765,30 +1828,43 @@ const parseFilterValue = filterValue => {
 
 const Type = 'type';
 const Duration = 'duration';
-const Status = 'status';
-const tableColumnNames = [Type, Duration, Status];
+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
-  }, {
-    label: status(),
-    name: Status
   }];
 };
 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);
@@ -1798,7 +1874,7 @@ const getTableColumnLabel = (tableColumns, name) => {
   switch (name) {
     case Duration:
       return duration();
-    case Status:
+    case Status$1:
       return status();
     case Type:
       return type();
@@ -1840,7 +1916,14 @@ const getTableWidthFromClientX = (viewX, width, clientX) => {
   return clampTableWidth(width, nextTableWidth);
 };
 
-const minimumTableColumnWidth = 80;
+const minimumTableColumnWidths = {
+  [Duration]: 80,
+  [Status$1]: 56,
+  [Type]: 80
+};
+const getMinimumTableColumnWidth = column => {
+  return minimumTableColumnWidths[column];
+};
 
 const getTableColumnLayout = (tableWidth, visibleTableColumns, tableColumnWidths) => {
   const visibleColumns = getOrderedVisibleTableColumns(visibleTableColumns);
@@ -1854,19 +1937,19 @@ const getTableColumnLayout = (tableWidth, visibleTableColumns, tableColumnWidths
   }
   const visibleColumnWidths = [];
   let remainingWidth = tableWidth;
-  let remainingColumnCount = visibleColumns.length;
   for (let index = 0; index < visibleColumns.length; index++) {
     const column = visibleColumns[index];
     if (index === visibleColumns.length - 1) {
       visibleColumnWidths.push(Math.max(0, remainingWidth));
       continue;
     }
-    const maxWidth = Math.max(minimumTableColumnWidth, remainingWidth - minimumTableColumnWidth * (remainingColumnCount - 1));
+    const minimumWidth = getMinimumTableColumnWidth(column);
+    const minimumRemainingWidth = visibleColumns.slice(index + 1).reduce((total, remainingColumn) => total + getMinimumTableColumnWidth(remainingColumn), 0);
+    const maxWidth = Math.max(minimumWidth, remainingWidth - minimumRemainingWidth);
     const preferredWidth = tableColumnWidths[column];
-    const clampedWidth = Math.max(minimumTableColumnWidth, Math.min(preferredWidth, maxWidth));
+    const clampedWidth = Math.max(minimumWidth, Math.min(preferredWidth, maxWidth));
     visibleColumnWidths.push(clampedWidth);
     remainingWidth -= clampedWidth;
-    remainingColumnCount -= 1;
   }
   const resizerLefts = [];
   let cumulativeWidth = 0;
@@ -1890,11 +1973,12 @@ const getResizedTableColumnWidths = (width, tableWidth, visibleTableColumns, tab
   }
   const boundaryIndex = resizerDownId - 1;
   const precedingWidth = layout.visibleColumnWidths.slice(0, boundaryIndex).reduce((total, current) => total + current, 0);
-  const remainingVisibleColumnCount = layout.visibleColumns.length - boundaryIndex - 1;
-  const maxWidth = Math.max(minimumTableColumnWidth, clampedTableWidth - precedingWidth - minimumTableColumnWidth * remainingVisibleColumnCount);
-  const nextWidth = clientX - viewX - leftPadding - precedingWidth;
-  const clampedWidth = Math.max(minimumTableColumnWidth, Math.min(nextWidth, maxWidth));
   const resizedColumn = layout.visibleColumns[boundaryIndex];
+  const minimumWidth = getMinimumTableColumnWidth(resizedColumn);
+  const minimumRemainingWidth = layout.visibleColumns.slice(boundaryIndex + 1).reduce((total, column) => total + getMinimumTableColumnWidth(column), 0);
+  const maxWidth = Math.max(minimumWidth, clampedTableWidth - precedingWidth - minimumRemainingWidth);
+  const nextWidth = clientX - viewX - leftPadding - precedingWidth;
+  const clampedWidth = Math.max(minimumWidth, Math.min(nextWidth, maxWidth));
   return {
     ...tableColumnWidths,
     [resizedColumn]: clampedWidth
@@ -1948,12 +2032,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;
@@ -1968,10 +2052,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)
   };
 };
 
@@ -2127,8 +2211,11 @@ const createDefaultState = () => {
     events: [],
     eventStoreName: 'chat-view-events',
     filterValue: '',
+    focus: 0,
     height: 0,
     initial: false,
+    largeBreakpoint: 900,
+    mediumBreakpoint: 600,
     platform: 0,
     sashPointerActive: false,
     selectedEvent: null,
@@ -2139,12 +2226,17 @@ const createDefaultState = () => {
     showEventStreamFinishedEvents: false,
     showInputEvents: false,
     showResponsePartEvents: false,
-    tableColumns: [],
+    sortColumn: '',
+    sortDescending: false,
+    tableColumns: createTableColumns(),
     tableColumnWidths: defaultTableColumnWidths,
     tableResizerDownId: 0,
     tableWidth: defaultTableWidth,
     timelineEndSeconds: '',
     timelineEvents: [],
+    timelineFilterDescription: '',
+    timelineHoverPercent: null,
+    timelineHoverSeconds: '',
     timelineInfo: emptyTimelineInfo,
     timelineSelectionActive: false,
     timelineSelectionAnchorSeconds: '',
@@ -2153,7 +2245,6 @@ const createDefaultState = () => {
     uid: 0,
     uri: '',
     useDevtoolsLayout: true,
-    visibleTableColumns: defaultVisibleTableColumns,
     width: 0,
     x: 0,
     y: 0
@@ -2168,6 +2259,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '
     databaseName,
     dataBaseVersion,
     eventStoreName,
+    focus: 0,
     height,
     initial: true,
     platform,
@@ -2186,9 +2278,11 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '
 const RenderItems = 1;
 const RenderCss = 2;
 const RenderIncremental = 3;
+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.tableColumnWidths !== newState.tableColumnWidths || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || 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.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.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.sortColumn !== newState.sortColumn || oldState.sortDescending !== newState.sortDescending || oldState.tableColumnWidths !== newState.tableColumnWidths || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineHoverPercent !== newState.timelineHoverPercent || oldState.timelineHoverSeconds !== newState.timelineHoverSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.tableColumns !== newState.tableColumns || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.focus !== newState.focus || oldState.width !== newState.width || oldState.uid !== newState.uid) {
     return [RenderIncremental, RenderCss];
   }
   return [];
@@ -2202,26 +2296,6 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
-const getColumnVisibilityFlags = (state, column) => {
-  return isVisibleTableColumn(state.visibleTableColumns, column) ? Checked : Unchecked;
-};
-
-const MenuChatDebugTableHeader = 2189;
-const handleHeaderContextMenu = async (state, eventX, eventY) => {
-  await showContextMenu2(state.uid, MenuChatDebugTableHeader, eventX, eventY, {
-    menuId: MenuChatDebugTableHeader
-  });
-  return state;
-};
-
-const devtoolsRootGap = 4;
-const devtoolsTopHeight = 28;
-const devtoolsTimelineHeight = 88;
-const devtoolsTableHeaderHeight = 24;
-const getTableBodyY = (state, hasTimeline) => {
-  return state.y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
-};
-
 const filterEventsByTimelineRange = (events, startValue, endValue) => {
   const eventsWithTime = getEventsWithTime(events);
   if (eventsWithTime.length === 0) {
@@ -2239,6 +2313,12 @@ const filterEventsByTimelineRange = (events, startValue, endValue) => {
   return eventsWithTime.filter(item => item.time >= startTime && item.time <= endTime).map(item => item.event);
 };
 
+const startedEventType = 'tool-execution-started';
+const finishedEventType = 'tool-execution-finished';
+const mergedEventType = 'tool-execution';
+const handleSubmitEventType = 'handle-submit';
+const sseResponseCompletedEventType = 'sse-response-completed';
+
 const hasMatchingToolName = (startedEvent, finishedEvent) => {
   if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
     return startedEvent.toolName === finishedEvent.toolName;
@@ -2250,10 +2330,6 @@ const isMatchingToolExecutionPair = (startedEvent, finishedEvent) => {
   return startedEvent.sessionId === finishedEvent.sessionId && hasMatchingToolName(startedEvent, finishedEvent);
 };
 
-const startedEventType = 'tool-execution-started';
-const finishedEventType = 'tool-execution-finished';
-const mergedEventType = 'tool-execution';
-
 const isToolExecutionFinishedEvent = event => {
   return event.type === finishedEventType;
 };
@@ -2274,7 +2350,7 @@ const getStartedTimestamp = event => {
   return getTimestamp(event.started) ?? getTimestamp(event.startTime) ?? getTimestamp(event.startTimestamp) ?? getTimestamp(event.timestamp);
 };
 
-const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
+const mergeToolExecutionEvents = (startedEvent, finishedEvent, type = mergedEventType) => {
   const ended = getEndedTimestamp(finishedEvent);
   const {
     eventId
@@ -2292,22 +2368,28 @@ const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
     ...(started === undefined ? {} : {
       started
     }),
-    type: mergedEventType
+    type
   };
   return mergedEvent;
 };
 
+const isMatchingHandleSubmitPair = (startedEvent, finishedEvent) => {
+  return startedEvent.type === handleSubmitEventType && finishedEvent.type === sseResponseCompletedEventType && startedEvent.sessionId === finishedEvent.sessionId;
+};
 const collapseToolExecutionEvents = events => {
   const collapsedEvents = [];
   for (let i = 0; i < events.length; i++) {
     const event = events[i];
-    if (isToolExecutionStartedEvent(event)) {
-      const nextEvent = events[i + 1];
-      if (nextEvent && isToolExecutionFinishedEvent(nextEvent) && isMatchingToolExecutionPair(event, nextEvent)) {
-        collapsedEvents.push(mergeToolExecutionEvents(event, nextEvent));
-        i++;
-        continue;
-      }
+    const nextEvent = events[i + 1];
+    if (nextEvent && isToolExecutionStartedEvent(event) && isToolExecutionFinishedEvent(nextEvent) && isMatchingToolExecutionPair(event, nextEvent)) {
+      collapsedEvents.push(mergeToolExecutionEvents(event, nextEvent));
+      i++;
+      continue;
+    }
+    if (nextEvent && isMatchingHandleSubmitPair(event, nextEvent)) {
+      collapsedEvents.push(mergeToolExecutionEvents(event, nextEvent, handleSubmitEventType));
+      i++;
+      continue;
     }
     collapsedEvents.push(event);
   }
@@ -2387,10 +2469,171 @@ const getFilteredEvents = (events, filterValue, eventCategoryFilters, showInputE
   return filteredByCategory.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
 };
 
+const getDurationText = event => {
+  const explicitDuration = event.durationMs ?? event.duration;
+  if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
+    return `${explicitDuration}ms`;
+  }
+  const start = toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+  const end = toTimeNumber(event.ended ?? event.endTime ?? event.endTimestamp ?? event.timestamp);
+  if (start === undefined || end === undefined || end < start) {
+    return '-';
+  }
+  return `${end - start}ms`;
+};
+
+const getEventTableDurationText = event => {
+  const durationText = getDurationText(event);
+  if (!durationText.endsWith('ms')) {
+    return durationText;
+  }
+  return `${durationText.slice(0, -2)} ms`;
+};
+
+const toolExecutionTypePrefix = 'tool-execution';
+const getToolName = event => {
+  if (typeof event.toolName === 'string' && event.toolName) {
+    return event.toolName;
+  }
+  if (typeof event.name === 'string' && event.name) {
+    return event.name;
+  }
+  const {
+    arguments: toolArguments
+  } = event;
+  if (!toolArguments || typeof toolArguments !== 'object') {
+    return undefined;
+  }
+  const {
+    name
+  } = toolArguments;
+  if (typeof name !== 'string' || !name) {
+    return undefined;
+  }
+  return name;
+};
+const getEventTypeLabel = event => {
+  if (!event.type.startsWith(toolExecutionTypePrefix)) {
+    return event.type;
+  }
+  const toolName = getToolName(event);
+  if (!toolName) {
+    return event.type;
+  }
+  return `${event.type}, ${toolName}`;
+};
+
+const getEventTableTypeLabel = event => {
+  if (event.name === 'list_files') {
+    return event.name;
+  }
+  return getEventTypeLabel(event);
+};
+
+const isErrorStatusCode = value => {
+  if (typeof value === 'number') {
+    return value >= 400;
+  }
+  if (typeof value === 'string') {
+    const parsedStatus = Number(value);
+    return Number.isFinite(parsedStatus) && parsedStatus >= 400;
+  }
+  return false;
+};
+
+const isRecord = value => {
+  return typeof value === 'object' && value !== null;
+};
+
+const hasErrorStatus = event => {
+  if (event.type === 'error') {
+    return true;
+  }
+  if (event.success === false || event.ok === false) {
+    return true;
+  }
+  const {
+    status
+  } = event;
+  if (isErrorStatusCode(status)) {
+    return true;
+  }
+  const {
+    result
+  } = event;
+  if (isRecord(result)) {
+    if (isErrorStatusCode(result.status)) {
+      return true;
+    }
+    if (isToolEvent(event) && 'error' in result && result.error !== undefined) {
+      return true;
+    }
+    if (typeof result.error === 'string' || typeof result.errorMessage === 'string' || typeof result.exception === 'string') {
+      return true;
+    }
+  }
+  return typeof event.error === 'string' || typeof event.errorMessage === 'string' || typeof event.exception === 'string';
+};
+
+const getStatusText = event => {
+  return hasErrorStatus(event) ? '400' : '200';
+};
+
+const getEventTableColumnValue = (event, column) => {
+  switch (column) {
+    case Duration:
+      return getEventTableDurationText(event);
+    case Status$1:
+      return getStatusText(event);
+    case Type:
+      return getEventTableTypeLabel(event);
+    default:
+      return '';
+  }
+};
+
+const compareValues = (a, b, descending) => {
+  const result = a.localeCompare(b, undefined, {
+    sensitivity: 'base'
+  });
+  return descending ? -result : result;
+};
+const compareSortableEventEntries = (a, b, sortDescending) => {
+  const compared = compareValues(a.value, b.value, sortDescending);
+  if (compared !== 0) {
+    return compared;
+  }
+  return a.index - b.index;
+};
+const sortEventsByTableColumn = (events, sortColumn, sortDescending) => {
+  if (!sortColumn || !isTableColumn(sortColumn)) {
+    return events;
+  }
+  const sortableEvents = events.map((event, index) => ({
+    event,
+    index,
+    value: getEventTableColumnValue(event, sortColumn)
+  }));
+  const compareEntries = (a, b) => {
+    return compareSortableEventEntries(a, b, sortDescending);
+  };
+  return sortableEvents.toSorted(compareEntries).map(item => item.event);
+};
+
+const getCurrentEvents$2 = state => {
+  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, eventCategoryFilters, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  const timelineEvents = filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+  return sortEventsByTableColumn(timelineEvents, state.sortColumn, state.sortDescending);
+};
+
 const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreName, sessionId, _sessionIdIndexName, eventId, type) => {
   return loadSelectedEvent$1(sessionId, eventId, type);
 };
 
+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
@@ -2409,8 +2652,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') {
@@ -2422,15 +2684,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);
@@ -2439,13 +2715,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();
@@ -2477,23 +2752,10 @@ const withPreparedSelectedEventPreview = async event => {
 const selectEventAtIndexDependencies = {
   loadSelectedEvent: loadSelectedEvent
 };
-const getCurrentEvents$3 = state => {
-  const {
-    events,
-    filterValue,
-    showEventStreamFinishedEvents,
-    showInputEvents,
-    showResponsePartEvents,
-    timelineEndSeconds,
-    timelineStartSeconds
-  } = state;
-  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
-  const filteredEvents = getFilteredEvents(events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
-  return filterEventsByTimelineRange(filteredEvents, timelineStartSeconds, timelineEndSeconds);
-};
+const getCurrentEvents$1 = state => getCurrentEvents$2(state);
 const selectEventAtIndex = async (state, selectedEventIndex, dependencies = selectEventAtIndexDependencies) => {
   const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
-  const currentEvents = getCurrentEvents$3(state);
+  const currentEvents = getCurrentEvents$1(state);
   const selectedEvent = currentEvents[selectedEventIndex];
   if (!selectedEvent) {
     return {
@@ -2522,60 +2784,80 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
   };
 };
 
-const devtoolsTableRowHeight = 24;
-const getTableBodyEventIndex = (state, eventX, eventY) => {
-  if (!state.useDevtoolsLayout) {
-    return -1;
+const focusIndex = async (state, index) => {
+  const currentEvents = getCurrentEvents$1(state);
+  if (currentEvents.length === 0 || state.selectedEventIndex === index) {
+    return state;
   }
-  const currentEvents = getCurrentEvents$3(state);
+  return selectEventAtIndex(state, index);
+};
+
+const focusFirst = async state => {
+  return focusIndex(state, 0);
+};
+
+const focusLast = async state => {
+  const currentEvents = getCurrentEvents$1(state);
   if (currentEvents.length === 0) {
-    return -1;
+    return state;
   }
-  const tableX = state.x + leftPadding;
-  const tableWidth = clampTableWidth(state.width, state.tableWidth);
-  const hasTimeline = currentEvents.length > 0;
-  const tableBodyY = getTableBodyY(state, hasTimeline);
-  const relativeX = eventX - tableX;
-  const relativeY = eventY - tableBodyY;
-  if (relativeX < 0 || relativeX >= tableWidth || relativeY < 0) {
-    return -1;
+  const lastIndex = currentEvents.length - 1;
+  return focusIndex(state, lastIndex);
+};
+
+const focusNext = async state => {
+  const currentEvents = getCurrentEvents$1(state);
+  if (currentEvents.length === 0) {
+    return state;
   }
-  const eventIndex = Math.floor(relativeY / devtoolsTableRowHeight);
-  if (eventIndex < 0 || eventIndex >= currentEvents.length) {
-    return -1;
+  const currentIndex = state.selectedEventIndex === null || state.selectedEventIndex < 0 ? -1 : state.selectedEventIndex;
+  const nextIndex = Math.min(currentEvents.length - 1, currentIndex + 1);
+  return focusIndex(state, nextIndex);
+};
+
+const focusPrevious = async state => {
+  const currentEvents = getCurrentEvents$1(state);
+  if (currentEvents.length === 0) {
+    return state;
   }
-  return eventIndex;
+  const currentIndex = state.selectedEventIndex === null || state.selectedEventIndex >= currentEvents.length ? currentEvents.length : state.selectedEventIndex;
+  const nextIndex = Math.max(0, currentIndex - 1);
+  return focusIndex(state, nextIndex);
 };
 
-const MenuChatDebugTableBody = 2190;
-const handleTableBodyContextMenu = async (state, eventX, eventY) => {
-  const eventIndex = getTableBodyEventIndex(state, eventX, eventY);
-  await showContextMenu2(state.uid, MenuChatDebugTableBody, eventX, eventY, {
-    eventIndex,
-    menuId: MenuChatDebugTableBody
-  });
-  return state;
+const getMenuEntriesTableBody = props => {
+  return [{
+    args: [props.eventIndex],
+    command: 'ChatDebug.handleTableRowCopy',
+    flags: None$1,
+    id: 'copy',
+    label: copy()
+  }];
+};
+
+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.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()
-  }, {
-    args: [Status],
-    command: 'ChatDebug.toggleTableColumnVisibility',
-    flags: getColumnVisibilityFlags(state, Status),
-    id: 'status',
-    label: status()
   }, {
     args: [],
     command: 'ChatDebug.resetTableColumns',
@@ -2584,15 +2866,63 @@ const getMenuEntriesTableHeader = state => {
     label: resetColumns()
   }];
 };
-const getMenuEntriesTableBody = props => {
-  return [{
-    args: [props.eventIndex],
-    command: 'ChatDebug.handleTableRowCopy',
-    flags: None$1,
-    id: 'copy',
-    label: copy()
-  }];
+
+const MenuChatDebugTableHeader = 2189;
+const handleHeaderContextMenu = async (state, eventX, eventY) => {
+  await showContextMenu2(state.uid, MenuChatDebugTableHeader, eventX, eventY, {
+    menuId: MenuChatDebugTableHeader
+  });
+  return state;
+};
+
+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;
+  }
+  const currentEvents = getCurrentEvents$1(state);
+  if (currentEvents.length === 0) {
+    return -1;
+  }
+  const tableX = state.x + leftPadding;
+  const tableWidth = clampTableWidth(state.width, state.tableWidth);
+  const hasTimeline = currentEvents.length > 0;
+  const tableBodyY = getTableBodyY(state, hasTimeline);
+  const relativeX = eventX - tableX;
+  const relativeY = eventY - tableBodyY;
+  if (relativeX < 0 || relativeX >= tableWidth || relativeY < 0) {
+    return -1;
+  }
+  const eventIndex = Math.floor(relativeY / devtoolsTableRowHeight);
+  if (eventIndex < 0 || eventIndex >= currentEvents.length) {
+    return -1;
+  }
+  return eventIndex;
+};
+
+const MenuChatDebugTableBody = 2190;
+const handleTableBodyContextMenu = async (state, eventX, eventY) => {
+  const eventIndex = getTableBodyEventIndex(state, eventX, eventY);
+  await show2(state.uid, MenuChatDebugTableBody, eventX, eventY, {
+    eventIndex,
+    menuId: MenuChatDebugTableBody
+  });
+  return state;
 };
+
 const getMenuEntries2 = (state, props) => {
   if (props.menuId === MenuChatDebugTableHeader) {
     return getMenuEntriesTableHeader(state);
@@ -2717,13 +3047,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
   };
 };
@@ -2769,12 +3116,6 @@ const getSessionNotFoundMessage = sessionId => {
   return noChatSessionFound(sessionId);
 };
 
-const getCurrentEvents$2 = state => {
-  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
-  const filteredEvents = getFilteredEvents(state.events, state.filterValue, eventCategoryFilters, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
-  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
-};
-
 const restoreSelectedEvent = async state => {
   if (state.selectedEventId === null) {
     return {
@@ -2914,13 +3255,16 @@ const selectDetailTab = (state, value) => {
     detailTabs
   };
 };
+const handleDetailTabsFocus = (state, value) => {
+  return selectDetailTab(state, value);
+};
 
-const getCurrentEvents$1 = state => {
-  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
-  const filteredEvents = getFilteredEvents(state.events, state.filterValue, eventCategoryFilters, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
-  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+const handleEscape = state => {
+  return state;
 };
 
+const getCurrentEvents = state => getCurrentEvents$2(state);
+
 const getEventIndexByStableId$1 = (events, event) => {
   return events.findIndex(candidate => candidate.eventId === event.eventId);
 };
@@ -2932,7 +3276,7 @@ const getSelectedEventIndex$1 = state => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const filteredEvents = getCurrentEvents$1(state);
+  const filteredEvents = getCurrentEvents(state);
   const selectedEvent = filteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
@@ -2951,12 +3295,12 @@ const getPreservedSelectedEventIndex$1 = (oldState, newState) => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const oldFilteredEvents = getCurrentEvents$1(oldState);
+  const oldFilteredEvents = getCurrentEvents(oldState);
   const selectedEvent = oldFilteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
   }
-  const newFilteredEvents = getCurrentEvents$1(newState);
+  const newFilteredEvents = getCurrentEvents(newState);
   const newIndex = getEventIndexByStableId$1(newFilteredEvents, selectedEvent);
   if (newIndex === -1) {
     return null;
@@ -2976,51 +3320,46 @@ const withPreservedSelection$1 = (state, nextState) => {
 };
 
 const handleEventCategoryFilter = (state, value, ctrlKey = false, metaKey = false) => {
-  const categoryFilters = selectCategoryFilter(state.categoryFilters, value || All, ctrlKey || metaKey);
-  if (categoryFilters === state.categoryFilters) {
+  const {
+    categoryFilters
+  } = state;
+  const newCategoryFilters = selectCategoryFilter(categoryFilters, value || All, ctrlKey || metaKey);
+  if (newCategoryFilters === categoryFilters) {
     return state;
   }
   const nextState = {
     ...state,
-    categoryFilters
+    categoryFilters: newCategoryFilters
   };
   return withPreservedSelection$1(state, nextState);
 };
 
-const parseSelectedEventIndex$1 = value => {
-  const parsed = Number.parseInt(value, 10);
-  if (Number.isNaN(parsed) || parsed < 0) {
-    return null;
-  }
-  return parsed;
-};
-
 const handleEventRowClickDependencies = {
   loadSelectedEvent: loadSelectedEvent
 };
 const isPrimaryButton = button => {
   return button === 0;
 };
-const handleEventRowClick = async (state, value, button = 0) => {
+const handleEventRowClick = async (state, index, button = 0) => {
+  const actual = typeof index === 'string' ? Number.parseInt(index, 10) : index;
   if (!isPrimaryButton(button)) {
     return state;
   }
-  const selectedEventIndex = parseSelectedEventIndex$1(value);
-  if (selectedEventIndex === null) {
+  if (actual === -1) {
     return state;
   }
-  return selectEventAtIndex(state, selectedEventIndex, handleEventRowClickDependencies);
+  return selectEventAtIndex(state, actual, handleEventRowClickDependencies);
+};
+
+const handleEventRowClickAt = async (state, eventX, eventY, button = 0) => {
+  const selectedEventIndex = getTableBodyEventIndex(state, eventX, eventY);
+  return handleEventRowClick(state, selectedEventIndex, button);
 };
 
 const getBoolean = value => {
   return value === true || value === 'true' || value === 'on' || value === '1';
 };
 
-const getCurrentEvents = state => {
-  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
-  const filteredEvents = getFilteredEvents(state.events, state.filterValue, eventCategoryFilters, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
-  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
-};
 const parseTimelineRangePreset$1 = value => {
   if (!value) {
     return {
@@ -3044,7 +3383,7 @@ const getSelectedEventIndex = state => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const filteredEvents = getCurrentEvents(state);
+  const filteredEvents = getCurrentEvents$2(state);
   const selectedEvent = filteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
@@ -3062,12 +3401,12 @@ const getPreservedSelectedEventIndex = (oldState, newState) => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const oldFilteredEvents = getCurrentEvents(oldState);
+  const oldFilteredEvents = getCurrentEvents$2(oldState);
   const selectedEvent = oldFilteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
   }
-  const newFilteredEvents = getCurrentEvents(newState);
+  const newFilteredEvents = getCurrentEvents$2(newState);
   const newIndex = getEventIndexByStableId(newFilteredEvents, selectedEvent);
   if (newIndex === -1) {
     return null;
@@ -3226,6 +3565,28 @@ const handleSashPointerUp = (state, eventX, eventY) => {
   };
 };
 
+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':
@@ -3249,7 +3610,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)
   };
 };
 
@@ -3264,7 +3625,7 @@ const handleTableResizerPointerUp = state => {
 };
 
 const handleTableRowCopy = async (state, eventIndex) => {
-  const currentEvents = getCurrentEvents$3(state);
+  const currentEvents = getCurrentEvents$1(state);
   const event = currentEvents[eventIndex];
   if (!event) {
     return state;
@@ -3333,6 +3694,10 @@ const formatTimelinePresetValue = value => {
   return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
 };
 
+const getTimelineEventX = (state, eventX) => {
+  return state.x + eventX;
+};
+
 const getTimelineLeft = state => {
   return state.x + viewPadding + timelineHorizontalPadding;
 };
@@ -3392,32 +3757,53 @@ const handleTimelinePointerDown = (state, name, eventX) => {
   }
   const timelineLeft = getTimelineLeft(state);
   const timelineWidth = getTimelineWidth(state);
-  const clientX = state.x + eventX;
+  const clientX = getTimelineEventX(state, eventX);
   const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
   if (seconds === undefined) {
     return state;
   }
+  const timelineHoverPercent = getSelectionPercent(Number.parseFloat(seconds), state.timelineInfo.durationSeconds);
   return getStateWithTimelineInfo({
     ...state,
+    timelineHoverPercent,
+    timelineHoverSeconds: seconds,
     timelineSelectionActive: true,
     timelineSelectionAnchorSeconds: seconds,
     timelineSelectionFocusSeconds: seconds
   });
 };
 
-const handleTimelinePointerMove = (state, eventX) => {
-  if (!state.timelineSelectionActive) {
+const handleTimelinePointerLeave = state => {
+  if (state.timelineHoverPercent === null && state.timelineHoverSeconds === '') {
     return state;
   }
+  return {
+    ...state,
+    timelineHoverPercent: null,
+    timelineHoverSeconds: ''
+  };
+};
+
+const handleTimelinePointerMove = (state, eventX) => {
   const timelineLeft = getTimelineLeft(state);
   const timelineWidth = getTimelineWidth(state);
-  const clientX = state.x + eventX;
+  const clientX = getTimelineEventX(state, eventX);
   const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
   if (seconds === undefined) {
     return state;
   }
+  const timelineHoverPercent = getSelectionPercent(Number.parseFloat(seconds), state.timelineInfo.durationSeconds);
+  if (!state.timelineSelectionActive) {
+    return {
+      ...state,
+      timelineHoverPercent,
+      timelineHoverSeconds: seconds
+    };
+  }
   return getStateWithTimelineInfo({
     ...state,
+    timelineHoverPercent,
+    timelineHoverSeconds: seconds,
     timelineSelectionFocusSeconds: seconds
   });
 };
@@ -3428,17 +3814,22 @@ const handleTimelinePointerUp = (state, eventX) => {
   }
   const timelineLeft = getTimelineLeft(state);
   const timelineWidth = getTimelineWidth(state);
-  const clientX = state.x + eventX;
+  const clientX = getTimelineEventX(state, eventX);
   const focusSeconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
   if (focusSeconds === undefined) {
     return clearTimelineSelectionState(state);
   }
+  const timelineHoverPercent = getSelectionPercent(Number.parseFloat(focusSeconds), state.timelineInfo.durationSeconds);
   const anchor = Number.parseFloat(state.timelineSelectionAnchorSeconds);
   const focus = Number.parseFloat(focusSeconds);
   const startSeconds = formatTimelinePresetValue(Math.min(anchor, focus));
   const endSeconds = formatTimelinePresetValue(Math.max(anchor, focus));
   const nextState = handleTimelineRangePreset(state, `${startSeconds}:${endSeconds}`);
-  return clearTimelineSelectionState(nextState);
+  return clearTimelineSelectionState({
+    ...nextState,
+    timelineHoverPercent,
+    timelineHoverSeconds: focusSeconds
+  });
 };
 
 const setUseDevtoolsLayout = (state, checked) => {
@@ -3476,6 +3867,7 @@ const handleShowResponsePartEvents = (state, checked) => {
 };
 
 const loadContent = async (state, savedState) => {
+  await getPreference('chatDebug.autoRefresh');
   const nextState = await loadEventsFromUri(restoreSavedState(state, savedState));
   return {
     ...nextState,
@@ -3485,412 +3877,81 @@ const loadContent = async (state, savedState) => {
   };
 };
 
+// cspell:ignore liga calt
+
 const getCss = state => {
   const hasSelectedEvent = !!state.selectedEvent;
   const tableWidth = hasSelectedEvent ? clampTableWidth(state.width, state.tableWidth) : getMainWidth(state.width);
   const detailsWidth = hasSelectedEvent ? getDetailsWidth(state.width, state.tableWidth) : 0;
-  const tableColumnLayout = getTableColumnLayout(tableWidth, state.visibleTableColumns, state.tableColumnWidths);
-  const resizerOneLeft = tableColumnLayout.resizerLefts[0] || 0;
-  const resizerTwoLeft = tableColumnLayout.resizerLefts[1] || 0;
+  const topSize = state.width >= state.largeBreakpoint ? 30 : state.width >= state.mediumBreakpoint ? 60 : 60;
+  const tableColumnLayout = getTableColumnLayout(tableWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths);
+  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0] = tableColumnLayout.visibleColumnWidths;
+  const resizerOneLeft = tableColumnLayout.resizerLefts[0] ?? 0;
+  const resizerTwoLeft = tableColumnLayout.resizerLefts[1] ?? 0;
+  const {
+    selectionEndPercent,
+    selectionStartPercent
+  } = state.timelineInfo;
   return `
 .ChatDebugView {
+  --ChatDebugViewTableHeaderHeight: ${devtoolsTableHeaderHeight}px;
+  --ChatDebugViewTableColZeroWidth: ${tableColZeroWidth}px;
+  --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
+  --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
   --ChatDebugViewDetailsWidth: ${detailsWidth}px;
   --ChatDebugViewDurationColumnWidth: ${state.tableColumnWidths.duration}px;
-  --ChatDebugViewResizerOneLeft: ${resizerOneLeft}px;
-  --ChatDebugViewResizerTwoLeft: ${resizerTwoLeft}px;
+  --ChatDebugViewTableRowHeight: ${devtoolsTableRowHeight}px;
+  --ResizerOneLeft: ${resizerOneLeft}px;
+  --ResizerTwoLeft: ${resizerTwoLeft}px;
   --ChatDebugViewSashWidth: ${sashWidth}px;
   --ChatDebugViewTableWidth: ${tableWidth}px;
+  --ChatDebugViewTimelineCursorGuideLeft: ${state.timelineHoverPercent ?? 0}%;
+  --ChatDebugViewTimelineSelectionEndLeft: ${selectionEndPercent ?? 0}%;
+  --ChatDebugViewTimelineSelectionStartLeft: ${selectionStartPercent ?? 0}%;
+  --ChatDebugViewTopSize: ${topSize}px;
   --ChatDebugViewTypeColumnWidth: ${state.tableColumnWidths.type}px;
   padding: ${viewPadding}px;
 }
 
-.ChatDebugViewTop {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.ChatDebugViewFilterInput {
-  flex: 1;
-  min-width: 0;
-}
-
-.ChatDebugViewFilterInput--devtools {
-  flex: 1 1 220px;
-  min-width: 180px;
-}
-
-.ChatDebugViewTableWrapper {
-  position: relative;
-  width: min(100%, var(--ChatDebugViewTableWidth));
-  max-width: 100%;
-  flex:1;
-  display:flex
-}
-
-.ChatDebugViewTable {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  flex: 1;
-}
-
-.ChatDebugViewHeaderCell,
-.ChatDebugViewCell {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ChatDebugViewHeaderCellType.ChatDebugViewColumnFixed,
-.ChatDebugViewCellType.ChatDebugViewColumnFixed {
-  width: var(--ChatDebugViewTypeColumnWidth);
-  max-width: var(--ChatDebugViewTypeColumnWidth);
-}
-
-.ChatDebugViewHeaderCellDuration.ChatDebugViewColumnFixed,
-.ChatDebugViewCellDuration.ChatDebugViewColumnFixed {
-  width: var(--ChatDebugViewDurationColumnWidth);
-  max-width: var(--ChatDebugViewDurationColumnWidth);
-}
-
-.ChatDebugViewResizers {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.ChatDebugViewResizer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 12px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  pointer-events: auto;
-  cursor: col-resize;
-}
-
-.ChatDebugViewResizerOne {
-  left: var(--ChatDebugViewResizerOneLeft);
-  transform: translateX(-50%);
-}
-
-.ChatDebugViewResizerTwo {
-  left: var(--ChatDebugViewResizerTwoLeft);
-  transform: translateX(-50%);
-}
-
-.ChatDebugViewResizerInner {
-  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  {
-  margin-left: auto;
-  min-height: 26px;
-}
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--vscode-descriptionForeground, inherit);
-}
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  display: flex;
-  contain: strict;
-  flex:1;
-  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
+const renderCss = (oldState, newState) => {
+  const css = getCss(newState);
+  return [SetCss, newState.uid, css];
+};
 
-}
-.ChatDebugViewEvent {
-  border-color: var(--vscode-widget-border, rgba(255, 255, 255, 0.14));
-  background: var(--vscode-toolbar-hoverBackground, rgba(255, 255, 255, 0.06));
-  color: var(--vscode-foreground, inherit);
-
-.ChatDebugViewEventLineContent {
-  flex: 1;
-  background: var(--vscode-toolbar-activeBackground, rgba(255, 255, 255, 0.1));
-  min-width: 0;
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-  word-break: break-word;
-  outline: 1px solid var(--vscode-focusBorder, rgba(255, 255, 255, 0.4));
-
-.ChatDebugViewEventLineNumber {
-  flex: none;
-}
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
 
-.row {
-  flex-shrink: 0;
-  min-width: 0;
-}
+const text = data => {
+  return {
+    childCount: 0,
+    text: data,
+    type: Text
+  };
+};
 
-.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;
-}
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const SetReferenceNodeUid = 11;
 
-.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);
-}
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
+};
 
-.ChatDebugViewRefreshButton:active {
-  transform: translateY(1px);
-}
-
-.ChatDebugViewRefreshButton:focus-visible {
-  outline: 2px solid rgba(255, 255, 255, 0.4);
-  outline-offset: 1px;
-}
-
-.ChatDebugViewEventRow:hover {
-  background: var(--ListHoverBackground);
-  color: var(--ListHoverForeground);
-}
-
-.ChatDebugViewImagePreview {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  max-width: 100%;
-}
-
-.ChatDebugViewImagePreviewImage {
-  display: block;
-  max-width: 100%;
-  max-height: 320px;
-  border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.14));
-  border-radius: 6px;
-  object-fit: contain;
-}
-
-.ChatDebugViewImagePreviewLabel {
-  color: var(--vscode-descriptionForeground, inherit);
-}
-
-.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;
-}
-
-.ChatDebugViewTimelineBuckets {
-  position: absolute;
-  inset: 18px 8px 8px;
-  display: flex;
-  align-items: flex-end;
-  gap: 2px;
-}
-
-.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;
-  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;
-}
-
-.ChatDebugViewTimelineSelectionRange {
-  position: absolute;
-  top: 18px;
-  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;
-}
-
-.ChatDebugViewTimelineSelectionHandle::before {
-  content: '';
-  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);
-}
-
-.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;
-}
-`;
-};
-
-const renderCss = (oldState, newState) => {
-  const css = getCss(newState);
-  return [SetCss, newState.uid, css];
-};
-
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-
-const text = data => {
-  return {
-    childCount: 0,
-    text: data,
-    type: Text
-  };
-};
-
-const SetText = 1;
-const Replace = 2;
-const SetAttribute = 3;
-const RemoveAttribute = 4;
-const Add = 6;
-const NavigateChild = 7;
-const NavigateParent = 8;
-const RemoveChild = 9;
-const NavigateSibling = 10;
-const SetReferenceNodeUid = 11;
-
-const isKey = key => {
-  return key !== 'type' && key !== 'childCount';
-};
-
-const getKeys = node => {
-  const keys = Object.keys(node).filter(isKey);
-  return keys;
-};
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
 
 const arrayToTree = nodes => {
   const result = [];
@@ -4165,48 +4226,59 @@ 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 ChatDebugViewDevtoolsMain = 'ChatDebugViewDevtoolsMain';
 const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
 const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
 const ChatDebugViewError = 'ChatDebugViewError';
-const ChatDebugViewEvent = 'ChatDebugViewEvent';
-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 ChatDebugViewEventRow = 'ChatDebugViewEventRow';
-const ChatDebugViewEventRowSelected = 'ChatDebugViewEventRowSelected';
+const Gutter = 'Gutter';
+const TableRowSelected = 'TableRowSelected';
 const ChatDebugViewEvents = 'ChatDebugViewEvents';
 const ChatDebugViewEventsFullWidth = 'ChatDebugViewEventsFullWidth';
 const ChatDebugViewFilterInput = 'ChatDebugViewFilterInput';
 const ChatDebugViewFilterInputDevtools = 'ChatDebugViewFilterInput--devtools';
-const ChatDebugViewHeaderCell = 'ChatDebugViewHeaderCell';
-const ChatDebugViewHeaderCellDuration = 'ChatDebugViewHeaderCellDuration';
-const ChatDebugViewHeaderCellStatus = 'ChatDebugViewHeaderCellStatus';
-const ChatDebugViewHeaderCellType = 'ChatDebugViewHeaderCellType';
+const ChatDebugViewHeaderCell = 'TableCell';
 const ChatDebugViewImagePreview = 'ChatDebugViewImagePreview';
+const ChatDebugViewImagePreviewImageWrapper = 'ChatDebugViewImagePreviewImageWrapper';
 const ChatDebugViewImagePreviewImage = 'ChatDebugViewImagePreviewImage';
 const ChatDebugViewImagePreviewLabel = 'ChatDebugViewImagePreviewLabel';
 const ChatDebugViewRefreshButton = 'ChatDebugViewRefreshButton';
 const ChatDebugViewQuickFilterPill = 'ChatDebugViewQuickFilterPill';
 const ChatDebugViewQuickFilterPillSelected = 'ChatDebugViewQuickFilterPillSelected';
 const ChatDebugViewQuickFilters = 'ChatDebugViewQuickFilters';
-const ChatDebugViewSash = 'ChatDebugViewSash';
+const Sash = 'Sash';
 const ChatDebugViewSashLine = 'ChatDebugViewSashLine';
-const ChatDebugViewTable = 'ChatDebugViewTable';
-const ChatDebugViewTableBody = 'ChatDebugViewTableBody';
-const ChatDebugViewTableHeader = 'ChatDebugViewTableHeader';
-const ChatDebugViewTableHeaderRow = 'ChatDebugViewTableHeaderRow';
-const ChatDebugViewTableWrapper = 'ChatDebugViewTableWrapper';
-const ChatDebugViewResizer = 'ChatDebugViewResizer';
-const ChatDebugViewResizerInner = 'ChatDebugViewResizerInner';
-const ChatDebugViewResizerOne = 'ChatDebugViewResizerOne';
-const ChatDebugViewResizerTwo = 'ChatDebugViewResizerTwo';
-const ChatDebugViewResizers = 'ChatDebugViewResizers';
+const Table = 'Table';
+const TableBody = 'TableBody';
+const TableSummary = 'TableSummary';
+const TableWrapper = 'TableWrapper';
+const TableWrapperWrapper = 'TableWrapperWrapper';
+const FocusOutline = 'FocusOutline';
+const Resizer = 'Resizer';
+const ResizerInner = 'ResizerInner';
+const ResizerOne = 'ResizerOne';
+const ResizerTwo = 'ResizerTwo';
+const TableHead = 'TableHead';
+const Resizers = 'Resizers';
+const TableCol = 'TableCol';
+const TableRow = 'TableRow';
+const TableRowOdd = 'TableRowOdd';
 const TableRowEven = 'TableRowEven';
 const ChatDebugViewTimeline = 'ChatDebugViewTimeline';
+const ChatDebugViewTimelineBadge = 'ChatDebugViewTimelineBadge';
+const ChatDebugViewTimelineBadges = 'ChatDebugViewTimelineBadges';
 const ChatDebugViewTimelineBucket = 'ChatDebugViewTimelineBucket';
 const ChatDebugViewTimelineBucketBar = 'ChatDebugViewTimelineBucketBar';
 const ChatDebugViewTimelineBucketBarSelected = 'ChatDebugViewTimelineBucketBarSelected';
@@ -4214,29 +4286,37 @@ const ChatDebugViewTimelineBucketSelected = 'ChatDebugViewTimelineBucketSelected
 const ChatDebugViewTimelineBucketUnit = 'ChatDebugViewTimelineBucketUnit';
 const ChatDebugViewTimelineBucketUnitEmpty = 'ChatDebugViewTimelineBucketUnitEmpty';
 const ChatDebugViewTimelineBuckets = 'ChatDebugViewTimelineBuckets';
+const ChatDebugViewTimelineCursorGuide = 'ChatDebugViewTimelineCursorGuide';
+const ChatDebugViewTimelineCursorGuideVisible = 'ChatDebugViewTimelineCursorGuideVisible';
 const ChatDebugViewTimelineInteractive = 'ChatDebugViewTimelineInteractive';
 const ChatDebugViewTimelineSelectionHandle = 'ChatDebugViewTimelineSelectionHandle';
+const ChatDebugViewTimelineSelectionHandleEnd = 'ChatDebugViewTimelineSelectionHandleEnd';
+const ChatDebugViewTimelineSelectionHandleStart = 'ChatDebugViewTimelineSelectionHandleStart';
 const ChatDebugViewTimelineSelectionMarker = 'ChatDebugViewTimelineSelectionMarker';
 const ChatDebugViewTimelineSelectionMarkerEnd = 'ChatDebugViewTimelineSelectionMarkerEnd';
 const ChatDebugViewTimelineSelectionMarkerStart = 'ChatDebugViewTimelineSelectionMarkerStart';
 const ChatDebugViewTimelineSelectionOverlay = 'ChatDebugViewTimelineSelectionOverlay';
 const ChatDebugViewTimelineSelectionRange = 'ChatDebugViewTimelineSelectionRange';
-const 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 ChatDebugViewCell = 'ChatDebugViewCell';
+const TableCell = 'TableCell';
 const ChatDebugViewColumnFixed = 'ChatDebugViewColumnFixed';
 const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
-const ChatDebugViewCellStatus = 'ChatDebugViewCellStatus';
 const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
-const ChatDebugViewCellType = 'ChatDebugViewCellType';
 const InputBox = 'InputBox';
-const Row = 'row';
 const TokenBoolean = 'Token TokenBoolean';
 const TokenKey = 'Token TokenKey';
 const TokenNumeric = 'Token TokenNumeric';
@@ -4260,7 +4340,7 @@ const getDebugErrorDom = errorMessage => {
 const HandleEventCategoryFilter = 4;
 const HandleFilterInput = 5;
 const SelectDetailTab = 6;
-const HandleEventRowClick = 7;
+const HandleEventRowClickAt = 7;
 const HandleHeaderContextMenu = 8;
 const HandleSashPointerDown = 9;
 const HandleSashPointerMove = 10;
@@ -4274,11 +4354,59 @@ const HandleTimelinePointerDown = 17;
 const HandleTimelinePointerMove = 18;
 const HandleTimelinePointerUp = 19;
 const HandleTimelineDoubleClick = 20;
+const HandleTableHeaderClick = 21;
 const HandleTimelineRangePreset = 22;
 const HandleCloseDetails = 23;
 const HandleClickRefresh = 24;
 const HandleDetailsTopContextMenu = 25;
 const HandleTimelineContextMenu = 26;
+const HandleTimelinePointerLeave = 27;
+const HandleEventRowClick = 28;
+const HandleTableFocus = 29;
+const HandleDetailTabsFocus = 30;
+
+const getFilterInputDom = (filterValue, useDevtoolsLayout) => {
+  return {
+    autocomplete: 'off',
+    childCount: 0,
+    className: useDevtoolsLayout ? mergeClassNames(InputBox, ChatDebugViewFilterInput, ChatDebugViewFilterInputDevtools) : mergeClassNames(InputBox, ChatDebugViewFilterInput),
+    inputType: 'search',
+    name: Filter,
+    onInput: HandleFilterInput,
+    placeholder: filterEvents(),
+    type: Input,
+    value: filterValue
+  };
+};
+
+const getQuickFilterDom = categoryFilter => {
+  const {
+    isSelected,
+    label,
+    name
+  } = categoryFilter;
+  return [{
+    ariaSelected: isSelected,
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewQuickFilterPill, isSelected ? ChatDebugViewQuickFilterPillSelected : ''),
+    name,
+    onClick: HandleEventCategoryFilter,
+    role: Option,
+    type: Button$1
+  }, text(label)];
+};
+
+// cspell:ignore multiselectable
+const getQuickFilterNodes = categoryFilters => {
+  return [{
+    'aria-multiselectable': true,
+    childCount: categoryFilters.length,
+    className: ChatDebugViewQuickFilters,
+    onClick: HandleEventCategoryFilter,
+    role: ListBox,
+    type: Div
+  }, ...categoryFilters.flatMap(getQuickFilterDom)];
+};
 
 const refreshButtonDom = [{
   'aria-label': refreshEvents$1(),
@@ -4293,360 +4421,116 @@ const getRefreshButtonDom = () => {
   return refreshButtonDom;
 };
 
-const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) => {
+const getDebugViewTopDom = (filterValue, useDevtoolsLayout, categoryFilters) => {
   const refreshButtonDom = getRefreshButtonDom();
   if (useDevtoolsLayout) {
+    const quickFilterNodes = getQuickFilterNodes(categoryFilters);
     return [{
       childCount: 2 + (quickFilterNodes.length > 0 ? 1 : 0),
       className: mergeClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
       onContextMenu: HandleHeaderContextMenu,
       type: Search
-    }, {
-      autocomplete: 'off',
-      childCount: 0,
-      className: mergeClassNames(InputBox, ChatDebugViewFilterInput, ChatDebugViewFilterInputDevtools),
-      inputType: 'search',
-      name: Filter,
-      onInput: HandleFilterInput,
-      placeholder: filterEvents(),
-      type: Input,
-      value: filterValue
-    }, ...quickFilterNodes, ...refreshButtonDom];
+    }, getFilterInputDom(filterValue, true), ...quickFilterNodes, ...refreshButtonDom];
   }
   return [{
     childCount: 2,
     className: ChatDebugViewTop,
     onContextMenu: HandleHeaderContextMenu,
     type: Search
-  }, {
-    autocomplete: 'off',
-    childCount: 0,
-    className: mergeClassNames(InputBox, ChatDebugViewFilterInput),
-    inputType: 'search',
-    name: Filter,
-    onInput: HandleFilterInput,
-    placeholder: filterEvents(),
-    type: Input,
-    value: filterValue
-  }, ...refreshButtonDom];
-};
-
-const None = 'none';
-
-const getPanelId = detailTab => {
-  return `ChatDebugViewDetailsPanel-${detailTab}`;
+  }, getFilterInputDom(filterValue, false), ...refreshButtonDom];
 };
 
-const getTabId = detailTab => {
-  return `ChatDebugViewDetailsTab-${detailTab}`;
+const detailsCloseButtonDom = [{
+  'aria-label': closeDetails(),
+  childCount: 1,
+  className: ChatDebugViewDetailsClose,
+  name: CloseDetails,
+  onChange: HandleCloseDetails,
+  onClick: HandleCloseDetails,
+  type: Button$1,
+  value: 'close'
+}, {
+  childCount: 0,
+  className: 'MaskIcon MaskIconClose',
+  type: Div
+}];
+const getDetailsCloseButtonDom = () => {
+  return detailsCloseButtonDom;
 };
 
-const getDetailTabDom = detailTab => {
-  const {
-    isSelected
-  } = detailTab;
+const getEditorSelectionDom = () => {
   return [{
-    'aria-controls': getPanelId(detailTab.name),
-    'aria-selected': isSelected,
     childCount: 1,
-    className: mergeClassNames(ChatDebugViewDetailsTab, isSelected ? ChatDebugViewDetailsTabSelected : ''),
-    id: getTabId(detailTab.name),
-    name: DetailTab,
-    onChange: SelectDetailTab,
-    onClick: SelectDetailTab,
-    role: 'tab',
-    tabIndex: isSelected ? 0 : -1,
-    type: Button$1,
-    value: detailTab.name
-  }, text(detailTab.label)];
+    className: EditorSelections,
+    type: Div
+  }, {
+    childCount: 0,
+    className: EditorSelection,
+    style: 'height: 20px; left: 0px; top: 20px; width: 0px;',
+    type: Div
+  }];
 };
-
-const getTabNodes = detailTabs => {
+const getGutterDom = (lineData, showLineNumbers) => {
+  const gutterNodes = showLineNumbers ? lineData.flatMap((_, index) => {
+    return [{
+      childCount: 1,
+      className: ChatDebugViewEventLineNumber,
+      type: Span
+    }, text(String(index + 1))];
+  }) : [];
   return [{
-    'aria-label': detailSections(),
-    childCount: detailTabs.length,
-    className: ChatDebugViewDetailsTabs,
-    role: 'tablist',
+    childCount: showLineNumbers ? lineData.length : 0,
+    className: Gutter,
     type: Div
-  }, ...detailTabs.flatMap(getDetailTabDom)];
-};
-
-const getDurationText = event => {
-  const explicitDuration = event.durationMs ?? event.duration;
-  if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
-    return `${explicitDuration}ms`;
-  }
-  const start = toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
-  const end = toTimeNumber(event.ended ?? event.endTime ?? event.endTimestamp ?? event.timestamp);
-  if (start === undefined || end === undefined || end < start) {
-    return '-';
-  }
-  return `${end - start}ms`;
-};
-
-const timestampFormatter = new Intl.DateTimeFormat('en-US', {
-  day: '2-digit',
-  fractionalSecondDigits: 3,
-  hour: '2-digit',
-  hourCycle: 'h23',
-  minute: '2-digit',
-  month: 'short',
-  second: '2-digit',
-  timeZone: 'UTC',
-  year: 'numeric'
-});
-const formatTimestamp = date => {
-  return `${timestampFormatter.format(date)} UTC`;
-};
-
-const getTimestampText = value => {
-  if (typeof value === 'string') {
-    const timestamp = Date.parse(value);
-    if (!Number.isNaN(timestamp)) {
-      return formatTimestamp(new Date(timestamp));
-    }
-    return value;
-  }
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return formatTimestamp(new Date(value));
-  }
-  return '-';
-};
-
-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 timingRowNode = {
-  childCount: 2,
-  className: ChatDebugViewTimingRow,
-  type: Div
-};
-const timingLabelNode = {
-  childCount: 1,
-  className: ChatDebugViewTimingLabel,
-  type: Span
-};
-const timingValueNode = {
-  childCount: 1,
-  className: ChatDebugViewTimingValue,
-  type: Span
-};
-const getTimingRowDom = (label, value) => {
-  return [timingRowNode, timingLabelNode, text(label), timingValueNode, text(value)];
+  }, ...gutterNodes];
 };
-
-const getTimingDetailsDom = event => {
+const getEditorRowDom = line => {
   return [{
-    childCount: 3,
-    className: ChatDebugViewTiming,
+    childCount: line.childCount,
+    className: EditorRow,
     type: Div
-  }, ...getTimingRowDom(started(), getStartText(event)), ...getTimingRowDom(ended(), getEndText(event)), ...getTimingRowDom(duration(), getDurationText(event))];
+  }, ...line.nodes];
 };
-
-const getContentNode = (previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs) => {
-  const safeSelectedDetailTab = getSelectedDetailTab(detailTabs);
-  const contentNodes = safeSelectedDetailTab === Timing && selectedEvent ? getTimingDetailsDom(selectedEvent) : safeSelectedDetailTab === Preview ? previewEventNodes : safeSelectedDetailTab === Payload ? payloadEventNodes : responseEventNodes;
-  return {
-    contentNodes,
-    safeSelectedDetailTab
-  };
+const getEditorRowsDom = lineData => {
+  return [{
+    childCount: lineData.length,
+    className: EditorRows,
+    type: Div
+  }, ...lineData.flatMap(getEditorRowDom)];
 };
-const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs()) => {
-  if (previewEventNodes.length === 0 && payloadEventNodes.length === 0 && responseEventNodes.length === 0) {
-    return [];
-  }
-  const normalizedDetailTabs = selectedEvent ? createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent) : detailTabs;
-  const {
-    contentNodes,
-    safeSelectedDetailTab
-  } = getContentNode(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, normalizedDetailTabs);
+const getEditorDom = (lineData, showLineNumbers = true) => {
   return [{
-    childCount: 2,
-    className: ChatDebugViewDetails,
-    type: Section
+    childCount: 1,
+    className: EditorContainer,
+    type: Div
   }, {
     childCount: 2,
-    className: ChatDebugViewDetailsTop,
-    onContextMenu: HandleDetailsTopContextMenu,
+    className: EditorViewlet,
+    role: 'code',
+    type: Div
+  }, ...getGutterDom(lineData, showLineNumbers), {
+    childCount: 2,
+    className: EditorContent,
     type: Div
   }, {
-    'aria-label': closeDetails(),
+    'aria-autocomplete': 'list',
+    'aria-multiline': true,
+    'aria-roledescription': 'editor',
+    autocapitalize: 'off',
+    autocomplete: 'off',
+    autocorrect: 'off',
     childCount: 0,
-    className: ChatDebugViewDetailsClose,
-    name: CloseDetails,
-    onChange: HandleCloseDetails,
-    onClick: HandleCloseDetails,
-    type: Button$1,
-    value: 'close'
-  }, ...getTabNodes(normalizedDetailTabs), {
-    'aria-labelledby': getTabId(safeSelectedDetailTab),
-    childCount: 1,
-    className: ChatDebugViewDetailsBottom,
-    id: getPanelId(safeSelectedDetailTab),
-    onContextMenu: HandleDetailsContextMenu,
-    role: 'tabpanel',
-    type: Div
-  }, ...contentNodes];
-};
-
-const toolExecutionTypePrefix = 'tool-execution';
-const getToolName = event => {
-  if (typeof event.toolName === 'string' && event.toolName) {
-    return event.toolName;
-  }
-  if (typeof event.name === 'string' && event.name) {
-    return event.name;
-  }
-  const {
-    arguments: toolArguments
-  } = event;
-  if (!toolArguments || typeof toolArguments !== 'object') {
-    return undefined;
-  }
-  const {
-    name
-  } = toolArguments;
-  if (typeof name !== 'string' || !name) {
-    return undefined;
-  }
-  return name;
-};
-const getEventTypeLabel = event => {
-  if (!event.type.startsWith(toolExecutionTypePrefix)) {
-    return event.type;
-  }
-  const toolName = getToolName(event);
-  if (!toolName) {
-    return event.type;
-  }
-  return `${event.type}, ${toolName}`;
-};
-
-const isErrorStatusCode = value => {
-  if (typeof value === 'number') {
-    return value >= 400;
-  }
-  if (typeof value === 'string') {
-    const parsedStatus = Number(value);
-    return Number.isFinite(parsedStatus) && parsedStatus >= 400;
-  }
-  return false;
-};
-
-const isRecord = value => {
-  return typeof value === 'object' && value !== null;
-};
-
-const hasErrorStatus = event => {
-  if (event.type === 'error') {
-    return true;
-  }
-  if (event.success === false || event.ok === false) {
-    return true;
-  }
-  const {
-    status
-  } = event;
-  if (isErrorStatusCode(status)) {
-    return true;
-  }
-  const {
-    result
-  } = event;
-  if (isRecord(result)) {
-    if (isErrorStatusCode(result.status)) {
-      return true;
-    }
-    if (isToolEvent(event) && 'error' in result && result.error !== undefined) {
-      return true;
-    }
-    if (typeof result.error === 'string' || typeof result.errorMessage === 'string' || typeof result.exception === 'string') {
-      return true;
-    }
-  }
-  return typeof event.error === 'string' || typeof event.errorMessage === 'string' || typeof event.exception === 'string';
-};
-
-const getStatusText = event => {
-  return hasErrorStatus(event) ? '400' : '200';
-};
-
-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: mergeClassNames(ChatDebugViewCell, ChatDebugViewCellDuration, isFixed ? ChatDebugViewColumnFixed : ''),
-          type: Td
-        }, text(getDurationText(event))];
-      case Status:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(ChatDebugViewCell, ChatDebugViewCellStatus, isErrorStatus ? ChatDebugViewCellStatusError : '', isFixed ? ChatDebugViewColumnFixed : ''),
-          type: Td
-        }, text(getStatusText(event))];
-      case Type:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(ChatDebugViewCell, ChatDebugViewCellType, isFixed ? ChatDebugViewColumnFixed : ''),
-          type: Td
-        }, text(getEventTypeLabel(event))];
-      default:
-        return [];
-    }
-  });
-};
-
-const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defaultVisibleTableColumns) => {
-  return events.flatMap((event, i) => {
-    const isEvenRow = i % 2 === 1;
-    const isSelected = selectedEventIndex === i;
-    const isErrorStatus = hasErrorStatus(event);
-    const rowIndex = String(i);
-    const rowCellNodes = getRowCellNodes(event, isErrorStatus, visibleTableColumns);
-    return [{
-      childCount: visibleTableColumns.length,
-      className: mergeClassNames(ChatDebugViewEventRow, isEvenRow ? TableRowEven : '', isSelected ? ChatDebugViewEventRowSelected : ''),
-      'data-index': rowIndex,
-      type: Tr
-    }, ...rowCellNodes];
-  });
-};
-
-const emptyStateNode = {
-  childCount: 1,
-  className: ChatDebugViewEmpty,
-  type: Div
-};
-const getEmptyStateDom = emptyMessage => {
-  return [emptyStateNode, text(emptyMessage)];
-};
-
-const getLineNodeDom = (line, index) => {
-  return [{
+    className: EditorInput,
+    name: 'editor',
+    role: 'textbox',
+    spellcheck: false,
+    type: TextArea,
+    wrap: 'off'
+  }, {
     childCount: 2,
-    className: Row,
+    className: EditorLayers,
     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);
+  }, ...getEditorSelectionDom(), ...getEditorRowsDom(lineData)];
 };
 
 const isDigit = character => {
@@ -4805,23 +4689,18 @@ 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 [{
-    childCount: lines.length,
-    className: ChatDebugViewEvent,
-    type: Div
-  }, ...lineNodes];
+  });
+  return getEditorDom(lineData);
 };
 
-const getEventsClassName = hasSelectedEvent => {
-  const widthClassName = mergeClassNames(ChatDebugViewEvents, hasSelectedEvent ? '' : ChatDebugViewEventsFullWidth);
-  return widthClassName;
+const getPanelId = detailTab => {
+  return `ChatDebugViewDetailsPanel-${detailTab}`;
 };
 
 const getPreviewName = event => {
@@ -4850,6 +4729,9 @@ const shouldIncludeArguments = (event, name) => {
 
 const getPayloadEvent = event => {
   const name = getPreviewName(event);
+  if (name === 'list_files' && hasOwn(event, 'arguments')) {
+    return event.arguments;
+  }
   const payloadEvent = {
     ...(name === undefined ? {} : {
       name
@@ -4867,6 +4749,26 @@ const getPayloadEvent = event => {
   return event;
 };
 
+const getListFilesPreviewEvent = (event, name) => {
+  if (name !== 'list_files') {
+    return undefined;
+  }
+  const {
+    result
+  } = event;
+  if (typeof result !== 'object' || result === null) {
+    return undefined;
+  }
+  const {
+    entries,
+    error
+  } = result;
+  if (entries !== undefined) {
+    return entries;
+  }
+  return error;
+};
+
 const isChatMessageAddedEvent = event => {
   return event.type === 'chat-message-added';
 };
@@ -4875,10 +4777,64 @@ 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;
   }
@@ -4900,6 +4856,19 @@ const getPreviewMessageText = event => {
   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;
@@ -4919,152 +4888,569 @@ const getWriteFilePreviewText = (event, name) => {
   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 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
+  }, ...getImagePreviewLabelDom(preview)];
+};
+
+const getTextNode = (value, showLineNumbers = true) => {
+  const lines = value.split('\n');
+  const lineData = lines.map(line => {
+    return {
+      childCount: 2,
+      nodes: [{
+        childCount: 1,
+        className: TokenText,
+        type: Span
+      }, text(line)]
+    };
+  });
+  return getEditorDom(lineData, showLineNumbers);
+};
+
+const getPreviewEventNodes = (previewEvent, selectedEvent) => {
+  if (typeof previewEvent === 'string') {
+    const isInvalidImageMessage = previewEvent === ImageCouldNotBeLoaded;
+    const isChatMessageUpdatedPreview = !!selectedEvent && isChatMessageUpdatedEvent(selectedEvent);
+    const showLineNumbers = !isInvalidImageMessage && !isChatMessageUpdatedPreview;
+    return getTextNode(previewEvent, showLineNumbers);
+  }
+  if (previewEvent === undefined) {
+    return [];
+  }
+  if (isAttachmentImagePreview(previewEvent)) {
+    return getImagePreviewDom(previewEvent);
+  }
+  return getEventNode(previewEvent);
+};
+
+const getDetailTabDom = detailTab => {
+  const {
+    isSelected
+  } = detailTab;
+  return [{
+    'aria-controls': getPanelId(detailTab.name),
+    ariaSelected: isSelected,
+    childCount: 1,
+    className: mergeClassNames(PanelTab, isSelected ? PanelTabSelected : ''),
+    name: detailTab.name,
+    onChange: SelectDetailTab,
+    onClick: SelectDetailTab,
+    onFocus: HandleDetailTabsFocus,
+    role: Tab,
+    tabIndex: isSelected ? 0 : -1,
+    type: Button$1
+  }, text(detailTab.label)];
+};
+
+const getTabNodes = detailTabs => {
+  return [{
+    'aria-label': detailSections(),
+    childCount: detailTabs.length,
+    className: ChatDebugViewDetailsTabs,
+    role: 'tablist',
+    type: Div
+  }, ...detailTabs.flatMap(getDetailTabDom)];
+};
+
+const timestampFormatter = new Intl.DateTimeFormat('en-US', {
+  day: '2-digit',
+  fractionalSecondDigits: 3,
+  hour: '2-digit',
+  hourCycle: 'h23',
+  minute: '2-digit',
+  month: 'short',
+  second: '2-digit',
+  timeZone: 'UTC',
+  year: 'numeric'
+});
+const formatTimestamp = date => {
+  return `${timestampFormatter.format(date)} UTC`;
+};
+
+const getTimestampText = value => {
+  if (typeof value === 'string') {
+    const timestamp = Date.parse(value);
+    if (!Number.isNaN(timestamp)) {
+      return formatTimestamp(new Date(timestamp));
+    }
+    return value;
+  }
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return formatTimestamp(new Date(value));
+  }
+  return '-';
+};
+
+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 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 = {
+  childCount: 2,
+  className: ChatDebugViewTimingRow,
+  type: Div
+};
+const timingLabelNode = {
+  childCount: 1,
+  className: ChatDebugViewTimingLabel,
+  type: Span
+};
+const timingValueNode = {
+  childCount: 1,
+  className: ChatDebugViewTimingValue,
+  type: Span
+};
+const getTimingRowDom = (label, value) => {
+  return [timingRowNode, timingLabelNode, text(label), timingValueNode, text(value)];
+};
+
+const getTimingDetailsDom = event => {
+  return [{
+    childCount: 4,
+    className: ChatDebugViewTiming,
+    type: Div
+  }, ...getTimingPreviewDom(event), ...getTimingRowDom(started(), getStartText(event)), ...getTimingRowDom(ended(), getEndText(event)), ...getTimingRowDom(duration(), getDurationText(event))];
+};
+
+const getNextSiblingIndex$2 = (nodes, index) => {
+  let nextSiblingIndex = index + 1;
+  const childCount = nodes[index]?.childCount || 0;
+  for (let i = 0; i < childCount; i++) {
+    nextSiblingIndex = getNextSiblingIndex$2(nodes, nextSiblingIndex);
+  }
+  return nextSiblingIndex;
+};
+const getDirectChildCount$1 = nodes => {
+  let count = 0;
+  let index = 0;
+  while (index < nodes.length) {
+    count++;
+    index = getNextSiblingIndex$2(nodes, index);
+  }
+  return count;
+};
+const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
+  if (selectedEvent === null) {
+    return detailTabs;
+  }
+  return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
+};
+const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs()) => {
+  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) {
+        return responseEventNodes;
+      }
+      return getTimingDetailsDom(selectedEvent);
+    };
+    const getDetailContentDomPreview = () => {
+      if (previewEventNodes.length > 0) {
+        return previewEventNodes;
+      }
+      if (selectedEvent === null) {
+        return [];
+      }
+      return getPreviewEventNodes(getPreviewEvent(selectedEvent), selectedEvent);
+    };
+    const getDetailContentDomPayload = () => {
+      if (payloadEventNodes.length > 0) {
+        return payloadEventNodes;
+      }
+      if (selectedEvent === null) {
+        return [];
+      }
+      return getEventNode(getPayloadEvent(selectedEvent));
+    };
+    const getDetailContentDomResponse = () => {
+      if (responseEventNodes.length > 0) {
+        return responseEventNodes;
+      }
+      if (selectedEvent === null) {
+        return [];
+      }
+      return getEventNode(selectedEvent);
+    };
+    const contentNodes = safeSelectedDetailTab === Timing ? getDetailContentDomTiming() : safeSelectedDetailTab === Preview ? getDetailContentDomPreview() : safeSelectedDetailTab === Payload ? getDetailContentDomPayload() : getDetailContentDomResponse();
+    return [{
+      'aria-label': selectedDetailTab.label,
+      childCount: getDirectChildCount$1(contentNodes),
+      className: ChatDebugViewDetailsBottom,
+      id: getPanelId(safeSelectedDetailTab),
+      onContextMenu: HandleDetailsContextMenu,
+      role: 'tabpanel',
+      type: Div
+    }, ...contentNodes];
+  };
+  return [{
+    childCount: 2,
+    className: ChatDebugViewDetails,
+    type: Section
+  }, {
+    childCount: 2,
+    className: ChatDebugViewDetailsTop,
+    onContextMenu: HandleDetailsTopContextMenu,
+    type: Div
+  }, ...getDetailsCloseButtonDom(), ...getTabNodes(normalizedDetailTabs), ...getDetailContentDom()];
+};
+
+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: mergeClassNames(TableCell, ChatDebugViewCellDuration),
+          type: Td
+        }, text(getEventTableDurationText(event))];
+      case Status$1:
+        return [{
+          childCount: 1,
+          className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : '', isFixed ? ChatDebugViewColumnFixed : ''),
+          type: Td
+        }, text(getStatusText(event))];
+      case Type:
+        return [{
+          childCount: 1,
+          className: TableCell,
+          type: Td
+        }, text(getEventTableTypeLabel(event))];
+      default:
+        return [];
+    }
+  });
+};
+
+const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defaultVisibleTableColumns) => {
+  return events.flatMap((event, i) => {
+    const isEvenRow = i % 2 === 1;
+    const rowClassName = isEvenRow ? TableRowEven : TableRowOdd;
+    const isSelected = selectedEventIndex === i;
+    const isErrorStatus = hasErrorStatus(event);
+    const rowCellNodes = getRowCellNodes(event, isErrorStatus, visibleTableColumns);
+    return [{
+      childCount: visibleTableColumns.length,
+      className: mergeClassNames(TableRow, rowClassName, isSelected ? TableRowSelected : ''),
+      type: Tr
+    }, ...rowCellNodes];
+  });
+};
+
+const emptyStateNode = {
+  childCount: 1,
+  className: ChatDebugViewEmpty,
+  type: Div
+};
+const getEmptyStateDom = emptyMessage => {
+  return [emptyStateNode, text(emptyMessage)];
+};
+
+const getEventsClassName = hasSelectedEvent => {
+  const widthClassName = mergeClassNames(ChatDebugViewEvents, hasSelectedEvent ? '' : ChatDebugViewEventsFullWidth);
+  return widthClassName;
+};
+
+const sashNodesDom = [{
+  childCount: 1,
+  className: Sash,
+  onPointerDown: HandleSashPointerDown,
+  type: Button$1
+}, {
+  childCount: 0,
+  className: ChatDebugViewSashLine,
+  type: Div
+}];
+const getSashNodesDom = hasSelectedEvent => {
+  if (!hasSelectedEvent) {
+    return [];
   }
-  return getPayloadEvent(event);
+  return sashNodesDom;
 };
 
-const isAttachmentImagePreview = value => {
-  return typeof value === 'object' && value !== null && value.previewType === 'image';
-};
+const None = 'none';
+const Status = 'status';
 
-const getImagePreviewDom = preview => {
+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: 2,
-    className: ChatDebugViewImagePreview,
+    childCount: splitChildCount,
+    className: ChatDebugViewDevtoolsSplit,
+    role: None,
     type: Div
   }, {
-    alt: preview.alt,
-    childCount: 0,
-    className: ChatDebugViewImagePreviewImage,
-    src: preview.src,
-    type: Img
-  }, {
-    childCount: 1,
-    className: ChatDebugViewImagePreviewLabel,
-    type: Span
-  }, text(preview.alt)];
+    childCount: eventsChildCount,
+    className: eventsClassName,
+    role: 'application',
+    type: Div
+  }, ...tableNodes, ...sashNodes, ...detailsNodes];
 };
 
-const getTextNode = value => {
-  const lines = value.split('\n');
-  const lineNodes = getLineNodes(lines.map(line => {
-    return {
-      childCount: 1,
-      nodes: [{
-        childCount: 1,
-        className: TokenText,
-        type: Span
-      }, text(line)]
-    };
-  }));
-  return [{
-    childCount: lines.length,
-    className: ChatDebugViewEvent,
-    type: Div
-  }, ...lineNodes];
+const formatTimelineMilliseconds = value => {
+  return `${Math.round(value * 1000)}ms`;
 };
 
-const getPreviewEventNodes = previewEvent => {
-  if (typeof previewEvent === 'string') {
-    return getTextNode(previewEvent);
+const formatTimelineSeconds = value => {
+  if (Number.isInteger(value)) {
+    return `${value}s`;
   }
-  if (previewEvent === undefined) {
-    return [];
+  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);
   }
-  if (isAttachmentImagePreview(previewEvent)) {
-    return getImagePreviewDom(previewEvent);
+  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);
+    }
   }
-  return getEventNode(previewEvent);
+  const durationMs = Number.isFinite(minStart) && Number.isFinite(maxEnd) ? Math.max(0, maxEnd - minStart) : 0;
+  return tableSummary(events.length, formatTableSummaryDuration(durationMs));
 };
 
-const sashNodesDom = [{
+const tableSummaryNode = {
   childCount: 1,
-  className: ChatDebugViewSash,
-  onPointerDown: HandleSashPointerDown,
-  type: Div
-}, {
-  childCount: 0,
-  className: ChatDebugViewSashLine,
+  className: TableSummary,
+  role: Status,
   type: Div
-}];
-const getSashNodesDom = hasSelectedEvent => {
-  if (!hasSelectedEvent) {
+};
+const getTableSummaryDom = summary => {
+  if (!summary) {
     return [];
   }
-  return sashNodesDom;
+  return [tableSummaryNode, text(summary)];
 };
 
 const getTableBodyDom = (rowNodes, eventCount) => {
   return [{
     childCount: eventCount === 0 ? 1 : eventCount,
-    className: ChatDebugViewTableBody,
+    className: TableBody,
     onContextMenu: HandleTableBodyContextMenu,
-    onPointerDown: HandleEventRowClick,
+    onPointerDown: HandleEventRowClickAt,
     type: TBody
   }, ...rowNodes];
 };
 
+const tableColClassNames = ['TableColZero', 'TableColOne', 'TableColTwo'];
+const getTableColumnGroupDom = visibleTableColumns => {
+  const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
+  return [{
+    childCount: orderedVisibleTableColumns.length,
+    className: 'ColGroup',
+    type: ColGroup
+  }, ...orderedVisibleTableColumns.map((_, index) => ({
+    childCount: 0,
+    className: `${TableCol} ${tableColClassNames[index]}`,
+    type: Col
+  }))];
+};
+
+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, index) => {
-    const isFixed = index < orderedVisibleTableColumns.length - 1;
-    switch (column) {
-      case Duration:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(ChatDebugViewHeaderCell, ChatDebugViewHeaderCellDuration, isFixed ? ChatDebugViewColumnFixed : ''),
-          scope: 'col',
-          type: Th
-        }, text(getTableColumnLabel(tableColumns, column))];
-      case Status:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(ChatDebugViewHeaderCell, ChatDebugViewHeaderCellStatus, isFixed ? ChatDebugViewColumnFixed : ''),
-          scope: 'col',
-          type: Th
-        }, text(getTableColumnLabel(tableColumns, column))];
-      case Type:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(ChatDebugViewHeaderCell, ChatDebugViewHeaderCellType, isFixed ? ChatDebugViewColumnFixed : ''),
-          scope: 'col',
-          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: ChatDebugViewTableHeader,
+    className: TableHead,
     onContextMenu: HandleHeaderContextMenu,
     type: THead
   }, {
     childCount: visibleTableColumns.length,
-    className: ChatDebugViewTableHeaderRow,
+    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'];
-const resizerClassNames = [ChatDebugViewResizerOne, ChatDebugViewResizerTwo];
+const resizerClassNames = [ResizerOne, ResizerTwo];
 const getTableResizersDom = visibleTableColumns => {
   const visibleColumnCount = getOrderedVisibleTableColumns(visibleTableColumns).length;
   const resizerCount = Math.max(0, visibleColumnCount - 1);
@@ -5074,34 +5460,45 @@ const getTableResizersDom = visibleTableColumns => {
   const visibleResizerClassNames = resizerClassNames.slice(0, resizerCount);
   const resizerNodes = visibleResizerClassNames.flatMap((resizerClassName, index) => [{
     childCount: 1,
-    className: `${ChatDebugViewResizer} ${resizerClassName}`,
+    className: mergeClassNames(Resizer, resizerClassName),
     name: resizerNames[index],
     onPointerDown: HandleTableResizerPointerDown,
     role: None,
+    tabIndex: -1,
     type: Button$1
   }, {
     childCount: 0,
-    className: ChatDebugViewResizerInner,
+    className: ResizerInner,
+    role: None,
     type: Div
   }]);
   return [{
     childCount: resizerCount,
-    className: ChatDebugViewResizers,
+    className: Resizers,
     type: Div
   }, ...resizerNodes];
 };
 
-const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns()) => {
-  const resizerNodes = getTableResizersDom(visibleTableColumns);
+const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '') => {
+  const tableWrapperClassName = mergeClassNames(TableWrapper, focus === FocusChatDebugTable ? FocusOutline : '', className);
+  const tableWrapperNode = {
+    childCount: 2,
+    className: tableWrapperClassName,
+    type: Div,
+    ...(role ? {
+      role
+    } : {})
+  };
+  return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus), ...getTableResizersDom(visibleTableColumns)];
+};
+
+const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '') => {
+  const tableSummaryNodes = getTableSummaryDom(summary);
   return [{
-    childCount: 1 + (resizerNodes.length > 0 ? 1 : 0),
-    className: ChatDebugViewTableWrapper,
+    childCount: tableSummaryNodes.length === 0 ? 1 : 2,
+    className: TableWrapperWrapper,
     type: Div
-  }, {
-    childCount: 2,
-    className: ChatDebugViewTable,
-    type: Table
-  }, ...getTableHeaderDom(visibleTableColumns, tableColumns), ...getTableBodyDom(rowNodes, eventCount), ...resizerNodes];
+  }, ...getTableWrapperDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus, className, role), ...tableSummaryNodes];
 };
 
 const getBucketUnitDom = (unitCount, presetValue) => {
@@ -5143,6 +5540,23 @@ const getBucketDom = bucket => {
   }, ...getBucketUnitDom(bucket.unitCount, presetValue)];
 };
 
+const getBucketsDom = buckets => {
+  return [{
+    childCount: buckets.length,
+    className: ChatDebugViewTimelineBuckets,
+    type: Div
+  }, ...buckets.flatMap(getBucketDom)];
+};
+
+const getCursorGuideNodes = hoverPercent => {
+  return hoverPercent === null ? [] : [{
+    childCount: 0,
+    className: mergeClassNames(ChatDebugViewTimelineCursorGuide, ChatDebugViewTimelineCursorGuideVisible),
+    style: `left:${hoverPercent}%;`,
+    type: Div
+  }];
+};
+
 const formatPercent = value => {
   return `${Number(value.toFixed(3))}%`;
 };
@@ -5158,26 +5572,55 @@ const getSelectionNodesDom = (hasSelection, selectionStartPercent, selectionEndP
     type: Div
   }, {
     childCount: 0,
-    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
+    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleStart, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
     name: Start,
     role: None,
-    style: `left:${formatPercent(selectionStartPercent)};`,
     type: Button$1
   }, {
     childCount: 0,
-    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
+    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleEnd, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
     name: End,
     role: None,
-    style: `left:${formatPercent(selectionEndPercent)};`,
     type: Button$1
   }];
 };
 
-const formatTimelineSeconds = value => {
-  if (Number.isInteger(value)) {
-    return `${value}s`;
+const getTimelineBadgeValues = durationSeconds => {
+  if (durationSeconds <= 0) {
+    return [0];
   }
-  return `${Number(value.toFixed(1))}s`;
+  const segmentCount = durationSeconds < 1 ? 2 : Math.min(5, Math.max(1, Math.ceil(durationSeconds)));
+  return Array.from({
+    length: segmentCount + 1
+  }, (_, index) => {
+    if (index === segmentCount) {
+      return durationSeconds;
+    }
+    return roundSeconds(durationSeconds / segmentCount * index);
+  });
+};
+const getTimelineBadgeStyle = (index, lastIndex) => {
+  if (index === 0 || lastIndex === 0) {
+    return 'left:0;transform:translateX(0);';
+  }
+  if (index === lastIndex) {
+    return 'left:100%;transform:translateX(-100%);';
+  }
+  return `left:${roundSeconds(index / lastIndex * 100)}%;transform:translateX(-50%);`;
+};
+const getTimelineBadgeNodes = timelineInfo => {
+  const badgeValues = getTimelineBadgeValues(timelineInfo.durationSeconds);
+  const lastIndex = badgeValues.length - 1;
+  return [{
+    childCount: badgeValues.length,
+    className: ChatDebugViewTimelineBadges,
+    type: Div
+  }, ...badgeValues.flatMap((value, index) => [{
+    childCount: 1,
+    className: ChatDebugViewTimelineBadge,
+    style: getTimelineBadgeStyle(index, lastIndex),
+    type: Span
+  }, text(formatTimelineMilliseconds(value))])];
 };
 
 const getTimelineSummary = timelineInfo => {
@@ -5187,74 +5630,72 @@ const getTimelineSummary = timelineInfo => {
   return windowSummary('0s', formatTimelineSeconds(timelineInfo.durationSeconds), formatTimelineSeconds(timelineInfo.durationSeconds));
 };
 
-const getTimelineNodes = timelineInfo => {
+const getTimelineTopDom = timelineInfo => {
+  return [{
+    childCount: 1,
+    className: ChatDebugViewTimelineTop,
+    type: Div
+  }, text(getTimelineSummary(timelineInfo))];
+};
+
+// cspell:ignore gettimelinedom
+const getTimelineDom = (timelineInfo, hoverPercent = null) => {
   if (timelineInfo.buckets.length === 0) {
     return [];
   }
+  const 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,
     className: ChatDebugViewTimeline,
     onContextMenu: HandleTimelineContextMenu,
     type: Section
-  }, {
-    childCount: 1,
-    className: ChatDebugViewTimelineTop,
-    type: Div
-  }, {
-    childCount: 1,
-    className: ChatDebugViewTimelineSummary,
-    type: H2
-  }, text(getTimelineSummary(timelineInfo)), {
-    childCount: 2,
+  }, ...timelineTopDom, {
+    childCount: 3,
     className: ChatDebugViewTimelineInteractive,
-    onDoubleClick: HandleTimelineDoubleClick,
+    onDblClick: HandleTimelineDoubleClick,
     onPointerDown: HandleTimelinePointerDown,
+    onPointerLeave: HandleTimelinePointerLeave,
+    onPointerMove: HandleTimelinePointerMove,
+    type: Div
+  }, ...badgeNodes, ...bucketNodes, {
+    childCount: 2,
+    className: ChatDebugViewTimelineSelectionOverlay,
     type: Div
   }, {
-    childCount: timelineInfo.buckets.length,
-    className: ChatDebugViewTimelineBuckets,
+    childCount: cursorGuideNodes.length,
     type: Div
-  }, ...timelineInfo.buckets.flatMap(getBucketDom), {
+  }, ...cursorGuideNodes, {
     childCount: selectionNodes.length,
-    className: ChatDebugViewTimelineSelectionOverlay,
     type: Div
   }, ...selectionNodes];
 };
 
-const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), tableColumns = createTableColumns(), timelineInfo) => {
+const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', detailTabs = createDetailTabs(), visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0) => {
   const rowNodes = getDevtoolsRows(events, selectedEventIndex, visibleTableColumns);
   const effectiveRange = getEffectiveTimelineRange(timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
   const resolvedTimelineInfo = timelineInfo || getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
-  const timelineNodes = getTimelineNodes(resolvedTimelineInfo);
+  const timelineNodes = getTimelineDom(resolvedTimelineInfo, timelineHoverPercent);
   const previewEvent = selectedEvent ? getPreviewEvent(selectedEvent) : undefined;
-  const previewEventNodes = getPreviewEventNodes(previewEvent);
+  const previewEventNodes = getPreviewEventNodes(previewEvent, selectedEvent);
   const payloadEventNodes = selectedEvent ? getEventNode(getPayloadEvent(selectedEvent)) : [];
   const responseEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
   const hasSelectedEvent = responseEventNodes.length > 0;
-  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableDom(rowNodes, events.length, visibleTableColumns, tableColumns);
   const eventsClassName = getEventsClassName(hasSelectedEvent);
+  const summary = getTableSummary(events);
+  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableWrapperWrapperDom(rowNodes, events.length, visibleTableColumns, tableColumns, summary, focus);
   const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs);
   const sashNodes = getSashNodesDom(hasSelectedEvent);
   const splitChildCount = hasSelectedEvent ? 3 : 1;
-  const mainChildCount = 1 + (timelineNodes.length > 0 ? 1 : 0);
+  const rootChildCount = 3;
   return [{
-    childCount: mainChildCount,
-    className: ChatDebugViewDevtoolsMain,
-    role: None,
-    type: Div
-  }, ...timelineNodes, {
-    childCount: splitChildCount,
-    className: ChatDebugViewDevtoolsSplit,
-    role: None,
-    type: Div
-  }, {
-    childCount: 1,
-    className: eventsClassName,
-    role: 'application',
-    tabIndex: 0,
+    childCount: rootChildCount,
+    className: mergeClassNames(ChatDebugView, ChatDebugViewDevtools),
     type: Div
-  }, ...tableNodes, ...sashNodes, ...detailsNodes];
+  }, ...timelineNodes, ...getSplitViewDom(splitChildCount, eventsClassName, tableNodes, sashNodes, detailsNodes)];
 };
 
 const getEmptyMessage = (eventCount, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage) => {
@@ -5269,7 +5710,6 @@ const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
     childCount: eventNodes.length === 0 ? 1 : eventNodes.length,
     className: ChatDebugViewEvents,
     role: 'application',
-    tabIndex: 0,
     type: Div
   }, ...(eventNodes.length === 0 ? [{
     childCount: 1,
@@ -5278,55 +5718,30 @@ const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
   }, text(errorMessage || emptyMessage)] : eventNodes)];
 };
 
-// cspell:ignore multiselectable
-const getQuickFilterNodes = categoryFilters => {
-  return [{
-    'aria-multiselectable': true,
-    childCount: categoryFilters.length,
-    className: ChatDebugViewQuickFilters,
-    onClick: HandleEventCategoryFilter,
-    role: 'listbox',
-    type: Div
-  }, ...categoryFilters.flatMap(categoryFilter => {
-    const {
-      isSelected,
-      label,
-      name
-    } = categoryFilter;
-    return [{
-      'aria-selected': isSelected,
-      childCount: 1,
-      className: mergeClassNames(ChatDebugViewQuickFilterPill, isSelected ? ChatDebugViewQuickFilterPillSelected : ''),
-      'data-value': name,
-      onClick: HandleEventCategoryFilter,
-      role: 'option',
-      type: Div
-    }, text(label)];
-  })];
-};
-
-const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds) => {
-  const trimmedStart = timelineStartSeconds.trim();
-  const trimmedEnd = timelineEndSeconds.trim();
-  if (trimmedStart && trimmedEnd) {
-    return secondsRange(trimmedStart, trimmedEnd);
-  }
-  if (trimmedStart) {
-    return fromSeconds(trimmedStart);
+const getNextSiblingIndex = (nodes, index) => {
+  let nextSiblingIndex = index + 1;
+  const childCount = nodes[index]?.childCount || 0;
+  for (let i = 0; i < childCount; i++) {
+    nextSiblingIndex = getNextSiblingIndex(nodes, nextSiblingIndex);
   }
-  if (trimmedEnd) {
-    return toSeconds(trimmedEnd);
+  return nextSiblingIndex;
+};
+const getTopLevelChildCount = nodes => {
+  let count = 0;
+  let index = 0;
+  while (index < nodes.length) {
+    count++;
+    index = getNextSiblingIndex(nodes, index);
   }
-  return '';
+  return count;
 };
-
 const getEventCategoryFilterDescription = eventCategoryFilters => {
   if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All)) {
     return '';
   }
   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) => {
+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) => {
   if (errorMessage) {
     return getDebugErrorDom(errorMessage);
   }
@@ -5339,7 +5754,6 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   if (trimmedFilterValue) {
     filterDescriptionParts.push(trimmedFilterValue);
   }
-  const timelineFilterDescription = getTimelineFilterDescription(timelineStartSeconds, timelineEndSeconds);
   if (timelineFilterDescription) {
     filterDescriptionParts.push(timelineFilterDescription);
   }
@@ -5350,10 +5764,20 @@ 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) : getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
-  const quickFilterNodes = useDevtoolsLayout ? getQuickFilterNodes(categoryFilters) : [];
-  const debugViewTopDom = getDebugViewTopDom(filterValue, useDevtoolsLayout, quickFilterNodes);
-  const rootChildCount = 2;
+  if (useDevtoolsLayout) {
+    const devtoolsDom = getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, detailTabs, visibleTableColumns, tableColumns, timelineInfo, timelineHoverPercent, focus);
+    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 [{
     childCount: rootChildCount,
     className: mergeClassNames(ChatDebugView, useDevtoolsLayout ? ChatDebugViewDevtools : ''),
@@ -5374,7 +5798,7 @@ const renderItems = (oldState, newState) => {
     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);
+  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);
   return [SetDom2, newState.uid, dom];
 };
 
@@ -5385,10 +5809,35 @@ const renderIncremental = (oldState, newState) => {
   return [SetPatches, newState.uid, patches];
 };
 
+const getSelector = focus => {
+  if (focus === 0) {
+    return '.Table';
+  }
+  return '';
+};
+const renderFocus = (oldState, newState) => {
+  const {
+    uid
+  } = newState;
+  const selector = getSelector(newState.focus);
+  return [FocusSelector, uid, selector];
+};
+
+const renderFocusContext = (oldState, newState) => {
+  const {
+    uid
+  } = newState;
+  return [SetFocusContext, uid, FocusChatDebugTable];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderCss:
       return renderCss;
+    case RenderFocus:
+      return renderFocus;
+    case RenderFocusContext:
+      return renderFocusContext;
     case RenderIncremental:
       return renderIncremental;
     case RenderItems:
@@ -5426,11 +5875,17 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandleEventRowClick,
-    params: ['handleEventRowClick', 'event.target.dataset.index', Button]
+    params: ['handleEventRowClick', '0', Button]
+  }, {
+    name: HandleEventRowClickAt,
+    params: ['handleEventRowClickAt', ClientX, ClientY, Button]
   }, {
     name: HandleTableBodyContextMenu,
     params: ['handleTableBodyContextMenu', ClientX, ClientY],
     preventDefault: true
+  }, {
+    name: HandleTableFocus,
+    params: ['handleTableFocus']
   }, {
     name: HandleDetailsContextMenu,
     params: ['handleDetailsContextMenu'],
@@ -5448,10 +5903,16 @@ const renderEventListeners = () => {
     params: ['handleInput', TargetName, TargetValue]
   }, {
     name: HandleEventCategoryFilter,
-    params: ['handleEventCategoryFilter', 'event.target.dataset.value', 'event.ctrlKey', 'event.metaKey']
+    params: ['handleEventCategoryFilter', TargetName, 'event.ctrlKey']
+  }, {
+    name: HandleTableHeaderClick,
+    params: ['handleTableHeaderClick', TargetName]
   }, {
     name: SelectDetailTab,
-    params: ['selectDetailTab', TargetValue]
+    params: ['selectDetailTab', TargetName]
+  }, {
+    name: HandleDetailTabsFocus,
+    params: ['handleDetailTabsFocus', TargetName]
   }, {
     name: HandleTimelineRangePreset,
     params: ['handleTimelineRangePreset', 'event.target.dataset.value']
@@ -5488,6 +5949,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleTimelinePointerMove,
     params: ['handleTimelinePointerMove', ClientX]
+  }, {
+    name: HandleTimelinePointerLeave,
+    params: ['handleTimelinePointerLeave']
   }, {
     name: HandleTimelinePointerUp,
     params: ['handleTimelinePointerUp', ClientX]
@@ -5501,18 +5965,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
   };
 };
 
@@ -5544,10 +6004,10 @@ const saveState = state => {
     filterValue,
     selectedEventId,
     sessionId,
+    tableColumns,
     tableColumnWidths,
     timelineEndSeconds,
-    timelineStartSeconds,
-    visibleTableColumns
+    timelineStartSeconds
   } = state;
   return {
     eventCategoryFilter: getSelectedEventCategoryFilter(categoryFilters),
@@ -5559,10 +6019,19 @@ const saveState = state => {
     tableColumnWidths,
     timelineEndSeconds,
     timelineStartSeconds,
-    visibleTableColumns
+    visibleTableColumns: getVisibleTableColumns(tableColumns)
   };
 };
 
+const selectCurrent = async state => {
+  const currentEvents = getCurrentEvents$1(state);
+  if (currentEvents.length === 0) {
+    return state;
+  }
+  const selectedEventIndex = state.selectedEventIndex === null ? 0 : state.selectedEventIndex;
+  return focusIndex(state, selectedEventIndex);
+};
+
 const setEvents = (state, events) => {
   return getStateWithTimelineInfo({
     ...state,
@@ -5617,18 +6086,30 @@ 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),
+  'ChatDebug.focusLast': wrapCommand(focusLast),
+  'ChatDebug.focusNext': wrapCommand(focusNext),
+  'ChatDebug.focusPrevious': wrapCommand(focusPrevious),
   'ChatDebug.getCommandIds': getCommandIds,
   'ChatDebug.getMenuEntries': wrapGetter(getMenuEntries2),
   'ChatDebug.getMenuIds': getMenuIds,
@@ -5636,8 +6117,11 @@ 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.handleSashPointerDown': wrapCommand(handleSashPointerDown),
@@ -5647,6 +6131,8 @@ const commandMap = {
   'ChatDebug.handleShowInputEvents': wrapCommand(handleShowInputEvents),
   'ChatDebug.handleShowResponsePartEvents': wrapCommand(handleShowResponsePartEvents),
   'ChatDebug.handleTableBodyContextMenu': wrapCommand(handleTableBodyContextMenu),
+  'ChatDebug.handleTableFocus': wrapCommand(handleTableFocus),
+  'ChatDebug.handleTableHeaderClick': wrapCommand(handleTableHeaderClick),
   'ChatDebug.handleTableResizerPointerDown': wrapCommand(handleTableResizerPointerDown),
   'ChatDebug.handleTableResizerPointerMove': wrapCommand(handleTableResizerPointerMove),
   'ChatDebug.handleTableResizerPointerUp': wrapCommand(handleTableResizerPointerUp),
@@ -5655,6 +6141,7 @@ const commandMap = {
   'ChatDebug.handleTimelineDoubleClick': wrapCommand(handleTimelineDoubleClick),
   'ChatDebug.handleTimelineEndSeconds': wrapCommand(handleTimelineEndSeconds),
   'ChatDebug.handleTimelinePointerDown': wrapCommand(handleTimelinePointerDown),
+  'ChatDebug.handleTimelinePointerLeave': wrapCommand(handleTimelinePointerLeave),
   'ChatDebug.handleTimelinePointerMove': wrapCommand(handleTimelinePointerMove),
   'ChatDebug.handleTimelinePointerUp': wrapCommand(handleTimelinePointerUp),
   'ChatDebug.handleTimelineRangePreset': wrapCommand(handleTimelineRangePreset),
@@ -5669,6 +6156,7 @@ const commandMap = {
   'ChatDebug.resetTableColumns': wrapCommand(resetTableColumns),
   'ChatDebug.resize': wrapCommand(resize),
   'ChatDebug.saveState': wrapGetter(saveState),
+  'ChatDebug.selectCurrent': wrapCommand(selectCurrent),
   'ChatDebug.selectDetailTab': wrapCommand(selectDetailTab),
   'ChatDebug.setEvents': wrapCommand(setEvents),
   'ChatDebug.setSessionId': wrapCommand(setSessionId),
@@ -5701,3 +6189,5 @@ const main = async () => {
 };
 
 main();
+
+// console.log('hi3')