@lvce-editor/chat-debug-view 10.21.0 → 10.22.0

package/dist/chatDebugViewWorkerMain.js

@@ -1481,11 +1481,11 @@ const General$1 = 'General';
 const Headers = 'Headers';
 const ImageCouldNotBeLoaded = 'image could not be loaded';
 const InputTokens = 'Input Tokens';
-const InvalidSessionId = 'Invalid session id';
-const InvalidUriEncoding = 'Invalid URI encoding';
-const InvalidUriFormat = 'Invalid URI format';
+const InvalidSessionId$1 = 'Invalid session id';
+const InvalidUriEncoding$1 = 'Invalid URI encoding';
+const InvalidUriFormat$1 = 'Invalid URI format';
 const Method$1 = 'Method';
-const MissingUri = 'Missing URI';
+const MissingUri$1 = 'Missing URI';
 const Network = 'Network';
 const NoChatSessionFound = 'No chat session found for sessionId "{PH1}".';
 const NoEventsFound = 'No events have been found';
@@ -1503,14 +1503,16 @@ const RequestMethod = 'Request Method';
 const RequestUrl = 'Request URL';
 const Response = 'Response';
 const ResponseHeaders$1 = 'Response Headers';
+const ResponseHeadersInfo = 'Some headers may not be displayed due to Access-Control-Expose-Headers header.';
 const SecondsRange = '{PH1}s-{PH2}s';
 const Size$1 = 'Size';
 const Started = 'Started';
 const Status$2 = 'Status';
 const StatusCode = 'Status Code';
 const Stream = 'Stream';
-const TableSummaryPlural = '{PH1} events, {PH2} from start to finish';
-const TableSummarySingular = '{PH1} event, {PH2} from start to finish';
+const TableSummaryRequestPlural = '{PH1} requests';
+const TableSummaryRequestSingular = '{PH1} request';
+const TableSummaryFinish = 'Finish {PH1}';
 const Timing = 'Timing';
 const Tokens = 'Tokens';
 const ToSeconds = 'to {PH1}s';
@@ -1574,7 +1576,7 @@ const headers = () => {
   return i18nString(Headers);
 };
 const invalidSessionId = () => {
-  return i18nString(InvalidSessionId);
+  return i18nString(InvalidSessionId$1);
 };
 const imageCouldNotBeLoaded = () => {
   return i18nString(ImageCouldNotBeLoaded);
@@ -1583,13 +1585,13 @@ const inputTokens = () => {
   return i18nString(InputTokens);
 };
 const invalidUriEncoding = () => {
-  return i18nString(InvalidUriEncoding);
+  return i18nString(InvalidUriEncoding$1);
 };
 const invalidUriFormat = () => {
-  return i18nString(InvalidUriFormat);
+  return i18nString(InvalidUriFormat$1);
 };
 const missingUri = () => {
-  return i18nString(MissingUri);
+  return i18nString(MissingUri$1);
 };
 const method = () => {
   return i18nString(Method$1);
@@ -1640,6 +1642,9 @@ const requestUrl = () => {
 const responseHeaders = () => {
   return i18nString(ResponseHeaders$1);
 };
+const responseHeadersInfo = () => {
+  return i18nString(ResponseHeadersInfo);
+};
 const resetColumns = () => {
   return i18nString(ResetColumns);
 };
@@ -1670,10 +1675,14 @@ const timing = () => {
 const tokens = () => {
   return i18nString(Tokens);
 };
-const tableSummary = (eventCount, duration) => {
-  return i18nString(eventCount === 1 ? TableSummarySingular : TableSummaryPlural, {
-    PH1: String(eventCount),
-    PH2: duration
+const tableSummaryRequests = eventCount => {
+  return i18nString(eventCount === 1 ? TableSummaryRequestSingular : TableSummaryRequestPlural, {
+    PH1: String(eventCount)
+  });
+};
+const tableSummaryFinish = duration => {
+  return i18nString(TableSummaryFinish, {
+    PH1: duration
   });
 };
 const toSeconds = seconds => {
@@ -1811,25 +1820,6 @@ const isDetailTab = value => {
   return value === Response$1 || value === Preview$1 || value === Payload$1 || value === Headers$1 || value === Tokens$1 || value === Headers$1 || value === Timing$1;
 };
 
-const RE_SPACE = /\s+/;
-const tokenToEventCategoryFilter = new Map([['@tools', Tools$1], ['@network', Network$1], ['@ui', Ui$1], ['@stream', Stream$1]]);
-const parseFilterValue = filterValue => {
-  const normalizedFilter = filterValue.trim().toLowerCase();
-  if (!normalizedFilter) {
-    return {
-      eventCategoryFilter: All$1,
-      filterText: ''
-    };
-  }
-  const parts = normalizedFilter.split(RE_SPACE);
-  const eventCategoryFilter = parts.map(part => tokenToEventCategoryFilter.get(part)).find(Boolean) || All$1;
-  const filterText = parts.filter(part => !tokenToEventCategoryFilter.has(part)).join(' ');
-  return {
-    eventCategoryFilter,
-    filterText
-  };
-};
-
 const hasDetailTab = (detailTabs, value) => {
   return detailTabs.some(detailTab => detailTab.name === value);
 };
@@ -1852,28 +1842,45 @@ const Duration = 'duration';
 const Status$1 = 'status';
 const Size = 'size';
 const tableColumnNames = [Type, Method, Status$1, Size, Duration];
-const createTableColumns = () => {
-  return [{
-    isVisible: true,
-    label: type(),
-    name: Type
-  }, {
-    isVisible: true,
+const tableColumnDefinitions = {
+  [Duration]: {
+    defaultWidth: 110,
+    label: duration(),
+    minimumWidth: 80
+  },
+  [Method]: {
+    defaultWidth: 90,
     label: method(),
-    name: Method
-  }, {
-    isVisible: true,
-    label: status(),
-    name: Status$1
-  }, {
-    isVisible: true,
+    minimumWidth: 56
+  },
+  [Size]: {
+    defaultWidth: 100,
     label: size(),
-    name: Size
-  }, {
-    isVisible: true,
-    label: duration(),
-    name: Duration
-  }];
+    minimumWidth: 80
+  },
+  [Status$1]: {
+    defaultWidth: 110,
+    label: status(),
+    minimumWidth: 56
+  },
+  [Type]: {
+    defaultWidth: 260,
+    label: type(),
+    minimumWidth: 80
+  }
+};
+const createTableColumns = () => {
+  return tableColumnNames.map(name => {
+    const definition = tableColumnDefinitions[name];
+    return {
+      defaultWidth: definition.defaultWidth,
+      isVisible: true,
+      label: definition.label,
+      minimumWidth: definition.minimumWidth,
+      name,
+      width: definition.defaultWidth
+    };
+  });
 };
 const defaultVisibleTableColumns = tableColumnNames;
 const isTableColumn = value => {
@@ -1889,13 +1896,45 @@ const getTableColumnsWithVisibility = (tableColumns, visibleTableColumns) => {
     isVisible: visibleColumns.has(column.name)
   }));
 };
+const getTableColumnByName = (tableColumns, name) => {
+  return tableColumns.find(column => column.name === name);
+};
+const getTableColumnWidth = (tableColumns, name) => {
+  return getTableColumnByName(tableColumns, name)?.width ?? 0;
+};
+const getTableColumnMinimumWidth = (tableColumns, name) => {
+  return getTableColumnByName(tableColumns, name)?.minimumWidth ?? 0;
+};
+const getTableColumnWidths = tableColumns => {
+  return {
+    duration: getTableColumnWidth(tableColumns, Duration),
+    method: getTableColumnWidth(tableColumns, Method),
+    size: getTableColumnWidth(tableColumns, Size),
+    status: getTableColumnWidth(tableColumns, Status$1),
+    type: getTableColumnWidth(tableColumns, Type)
+  };
+};
+const setTableColumnWidths = (tableColumns, tableColumnWidths) => {
+  return tableColumns.map(column => ({
+    ...column,
+    width: tableColumnWidths[column.name]
+  }));
+};
+const setTableColumnWidth = (tableColumns, columnName, width) => {
+  return tableColumns.map(column => {
+    if (column.name !== columnName) {
+      return column;
+    }
+    return {
+      ...column,
+      width
+    };
+  });
+};
 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 = (tableColumns, column) => {
-  return tableColumns.some(tableColumn => tableColumn.name === column && tableColumn.isVisible);
-};
 const getTableColumnLabel = (tableColumns, name) => {
   const match = tableColumns.find(column => column.name === name);
   if (match) {
@@ -1917,17 +1956,15 @@ const getTableColumnLabel = (tableColumns, name) => {
   }
 };
 
-const defaultTableColumnWidths = {
-  duration: 110,
-  method: 90,
-  size: 100,
-  status: 110,
-  type: 260
-};
-
 const getMainWidth = state => {
   return Math.max(0, state.width - state.horizontalPadding);
 };
+const getNarrowMainWidthBreakpoint = state => {
+  return Math.max(0, state.mediumBreakpoint - state.horizontalPadding);
+};
+const isNarrowSplitLayout = state => {
+  return getMainWidth(state) <= getNarrowMainWidthBreakpoint(state);
+};
 const clampTableWidth = (state, tableWidth) => {
   const mainWidth = getMainWidth(state);
   const maxTableWidth = Math.max(0, mainWidth - state.minDetailsWidth - state.sashWidth);
@@ -1939,24 +1976,21 @@ const getDetailsWidth = (state, tableWidth) => {
   const clampedTableWidth = clampTableWidth(state, tableWidth);
   return Math.max(0, mainWidth - clampedTableWidth - state.sashWidth);
 };
+const getBalancedSplitTableWidth = state => {
+  const mainWidth = getMainWidth(state);
+  const balancedTableWidth = Math.floor(Math.max(0, mainWidth - state.sashWidth) / 2);
+  return clampTableWidth(state, balancedTableWidth);
+};
+const shouldUseBalancedSplitTableWidth = state => {
+  return !!state.selectedEvent && state.useDevtoolsLayout && !state.tableWidthManuallyResized && isNarrowSplitLayout(state);
+};
 const getTableWidthFromClientX = (state, clientX) => {
   const nextTableWidth = clientX - state.x - state.leftPadding;
   return clampTableWidth(state, nextTableWidth);
 };
 
-const minimumTableColumnWidths = {
-  [Duration]: 80,
-  [Method]: 56,
-  [Size]: 80,
-  [Status$1]: 56,
-  [Type]: 80
-};
-const getMinimumTableColumnWidth = column => {
-  return minimumTableColumnWidths[column];
-};
-
-const getTableColumnLayout = (tableWidth, visibleTableColumns, tableColumnWidths) => {
-  const visibleColumns = getOrderedVisibleTableColumns(visibleTableColumns);
+const getTableColumnLayout = (tableWidth, visibleTableColumns, tableColumns) => {
+  const visibleColumns = getOrderedVisibleTableColumns(visibleTableColumns, tableColumns);
   if (visibleColumns.length === 0) {
     return {
       fixedColumns: [],
@@ -1973,10 +2007,10 @@ const getTableColumnLayout = (tableWidth, visibleTableColumns, tableColumnWidths
       visibleColumnWidths.push(Math.max(0, remainingWidth));
       continue;
     }
-    const minimumWidth = getMinimumTableColumnWidth(column);
-    const minimumRemainingWidth = visibleColumns.slice(index + 1).reduce((total, remainingColumn) => total + getMinimumTableColumnWidth(remainingColumn), 0);
+    const minimumWidth = getTableColumnMinimumWidth(tableColumns, column);
+    const minimumRemainingWidth = visibleColumns.slice(index + 1).reduce((total, remainingColumn) => total + getTableColumnMinimumWidth(tableColumns, remainingColumn), 0);
     const maxWidth = Math.max(minimumWidth, remainingWidth - minimumRemainingWidth);
-    const preferredWidth = tableColumnWidths[column];
+    const preferredWidth = getTableColumnWidth(tableColumns, column);
     const clampedWidth = Math.max(minimumWidth, Math.min(preferredWidth, maxWidth));
     visibleColumnWidths.push(clampedWidth);
     remainingWidth -= clampedWidth;
@@ -1995,24 +2029,21 @@ const getTableColumnLayout = (tableWidth, visibleTableColumns, tableColumnWidths
   };
 };
 
-const getResizedTableColumnWidths = (state, visibleTableColumns, tableColumnWidths, clientX, resizerDownId) => {
+const getResizedTableColumnWidths = (state, visibleTableColumns, tableColumns, clientX, resizerDownId) => {
   const clampedTableWidth = clampTableWidth(state, state.tableWidth);
-  const layout = getTableColumnLayout(clampedTableWidth, visibleTableColumns, tableColumnWidths);
+  const layout = getTableColumnLayout(clampedTableWidth, visibleTableColumns, tableColumns);
   if (resizerDownId < 1 || resizerDownId >= layout.visibleColumns.length) {
-    return tableColumnWidths;
+    return tableColumns;
   }
   const boundaryIndex = resizerDownId - 1;
   const precedingWidth = layout.visibleColumnWidths.slice(0, boundaryIndex).reduce((total, current) => total + current, 0);
   const resizedColumn = layout.visibleColumns[boundaryIndex];
-  const minimumWidth = getMinimumTableColumnWidth(resizedColumn);
-  const minimumRemainingWidth = layout.visibleColumns.slice(boundaryIndex + 1).reduce((total, column) => total + getMinimumTableColumnWidth(column), 0);
+  const minimumWidth = getTableColumnMinimumWidth(tableColumns, resizedColumn);
+  const minimumRemainingWidth = layout.visibleColumns.slice(boundaryIndex + 1).reduce((total, column) => total + getTableColumnMinimumWidth(tableColumns, column), 0);
   const maxWidth = Math.max(minimumWidth, clampedTableWidth - precedingWidth - minimumRemainingWidth);
   const nextWidth = clientX - state.x - state.leftPadding - precedingWidth;
   const clampedWidth = Math.max(minimumWidth, Math.min(nextWidth, maxWidth));
-  return {
-    ...tableColumnWidths,
-    [resizedColumn]: clampedWidth
-  };
+  return setTableColumnWidth(tableColumns, resizedColumn, clampedWidth);
 };
 
 const isSameTableColumnWidths = (first, second) => {
@@ -2049,9 +2080,6 @@ const restoreCategoryFilters = (savedState, currentCategoryFilters) => {
   if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
     return selectCategoryFilter(currentCategoryFilters, savedState.eventCategoryFilter);
   }
-  if (typeof savedState.filterValue === 'string') {
-    return selectCategoryFilter(currentCategoryFilters, parseFilterValue(savedState.filterValue).eventCategoryFilter);
-  }
   return currentCategoryFilters;
 };
 const restoreFilterValue = (savedState, currentFilterValue) => {
@@ -2081,24 +2109,26 @@ const restoreVisibleTableColumns = (savedState, currentTableColumns) => {
   }
   return getTableColumnsWithVisibility(currentTableColumns, visibleTableColumns);
 };
-const restoreTableColumnWidths = (savedState, currentTableColumnWidths) => {
+const restoreTableColumns = (savedState, currentTableColumns) => {
+  const tableColumnsWithVisibility = restoreVisibleTableColumns(savedState, currentTableColumns);
   const {
     tableColumnWidths: savedTableColumnWidths
   } = savedState;
   if (isTableColumnWidths(savedTableColumnWidths)) {
-    return savedTableColumnWidths;
+    return setTableColumnWidths(tableColumnsWithVisibility, savedTableColumnWidths);
   }
   if (isLegacyTableColumnWidths(savedTableColumnWidths)) {
     const legacyTableColumnWidths = savedTableColumnWidths;
-    return {
+    const currentTableColumnWidths = getTableColumnWidths(currentTableColumns);
+    return setTableColumnWidths(tableColumnsWithVisibility, {
       duration: legacyTableColumnWidths.duration,
       method: legacyTableColumnWidths.method,
       size: currentTableColumnWidths.size,
       status: legacyTableColumnWidths.status,
       type: legacyTableColumnWidths.type
-    };
+    });
   }
-  return currentTableColumnWidths;
+  return tableColumnsWithVisibility;
 };
 const restoreSavedState = (state, savedState) => {
   if (!isSavedState(savedState)) {
@@ -2110,8 +2140,7 @@ 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),
+    tableColumns: restoreTableColumns(savedState, state.tableColumns),
     timelineEndSeconds: restoreTimelineEndSeconds(savedState, state.timelineEndSeconds),
     timelineStartSeconds: restoreTimelineStartSeconds(savedState, state.timelineStartSeconds)
   };
@@ -2322,7 +2351,7 @@ const getEventsWithTime = events => {
   });
 };
 
-const clamp$1 = (value, minimum, maximum) => {
+const clamp = (value, minimum, maximum) => {
   return Math.max(minimum, Math.min(value, maximum));
 };
 
@@ -2356,8 +2385,8 @@ const getNormalizedRange = (durationSeconds, startValue, endValue) => {
   const rawEnd = parsedEnd ?? durationSeconds;
   const rangeStart = Math.min(rawStart, rawEnd);
   const rangeEnd = Math.max(rawStart, rawEnd);
-  const normalizedStart = clamp$1(rangeStart, 0, durationSeconds);
-  const normalizedEnd = clamp$1(rangeEnd, 0, durationSeconds);
+  const normalizedStart = clamp(rangeStart, 0, durationSeconds);
+  const normalizedEnd = clamp(rangeEnd, 0, durationSeconds);
   return {
     endSeconds: roundSeconds(normalizedEnd),
     hasSelection: true,
@@ -2481,8 +2510,8 @@ const createDefaultState = () => {
     showResponsePartEvents: false,
     sortColumn: '',
     sortDescending: false,
+    summaries: [],
     tableColumns: createTableColumns(),
-    tableColumnWidths: defaultTableColumnWidths,
     tableDeltaY: 0,
     tableMaxLineY: 0,
     tableMinLineY: 0,
@@ -2490,6 +2519,7 @@ const createDefaultState = () => {
     tableScrollBarHandleOffset: 0,
     tableScrollBarPointerActive: false,
     tableWidth: defaultTableWidth,
+    tableWidthManuallyResized: false,
     timelineEndSeconds: '',
     timelineEvents: [],
     timelineFilterDescription: '',
@@ -2542,7 +2572,7 @@ const RenderFocusContext = 4;
 const RenderFocus = 5;
 
 const diff = (oldState, newState) => {
-  if (oldState.categoryFilters !== newState.categoryFilters || oldState.collapsedHeaderSections !== newState.collapsedHeaderSections || oldState.detailTabs !== newState.detailTabs || oldState.errorMessage !== newState.errorMessage || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.previewTextCursorColumnIndex !== newState.previewTextCursorColumnIndex || oldState.previewTextCursorRowIndex !== newState.previewTextCursorRowIndex || oldState.previewTextDeltaY !== newState.previewTextDeltaY || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.sortColumn !== newState.sortColumn || oldState.sortDescending !== newState.sortDescending || oldState.tableColumnWidths !== newState.tableColumnWidths || oldState.tableDeltaY !== newState.tableDeltaY || oldState.tableMaxLineY !== newState.tableMaxLineY || oldState.tableMinLineY !== newState.tableMinLineY || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineHeight !== newState.timelineHeight || oldState.timelineHoverPercent !== newState.timelineHoverPercent || oldState.timelineHoverSeconds !== newState.timelineHoverSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.tableColumns !== newState.tableColumns || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.focus !== newState.focus || oldState.width !== newState.width || oldState.uid !== newState.uid) {
+  if (oldState.categoryFilters !== newState.categoryFilters || oldState.collapsedHeaderSections !== newState.collapsedHeaderSections || oldState.detailTabs !== newState.detailTabs || oldState.errorMessage !== newState.errorMessage || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.previewTextCursorColumnIndex !== newState.previewTextCursorColumnIndex || oldState.previewTextCursorRowIndex !== newState.previewTextCursorRowIndex || oldState.previewTextDeltaY !== newState.previewTextDeltaY || oldState.summaries !== newState.summaries || 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.tableDeltaY !== newState.tableDeltaY || oldState.tableMaxLineY !== newState.tableMaxLineY || oldState.tableMinLineY !== newState.tableMinLineY || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineHeight !== newState.timelineHeight || oldState.timelineHoverPercent !== newState.timelineHoverPercent || oldState.timelineHoverSeconds !== newState.timelineHoverSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.tableColumns !== newState.tableColumns || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.focus !== newState.focus || oldState.width !== newState.width || oldState.uid !== newState.uid) {
     return [RenderIncremental, RenderCss];
   }
   return [];
@@ -2579,6 +2609,45 @@ const mergedEventType = 'tool-execution';
 const handleSubmitEventType = 'handle-submit';
 const sseResponseCompletedEventType = 'sse-response-completed';
 
+const encoder = new TextEncoder();
+const getEndValuePayload = event => {
+  const {
+    endValue
+  } = event;
+  return endValue?.value;
+};
+const getResponsePayload = event => {
+  const endValuePayload = getEndValuePayload(event);
+  if (endValuePayload !== undefined) {
+    return endValuePayload;
+  }
+  if ('value' in event && event.value !== undefined) {
+    return event.value;
+  }
+  if ('response' in event && event.response !== undefined) {
+    return event.response;
+  }
+  return undefined;
+};
+const getPayloadText = payload => {
+  if (typeof payload === 'string') {
+    return payload;
+  }
+  const serialized = JSON.stringify(payload);
+  return serialized ?? '';
+};
+const getResponsePayloadSize = event => {
+  const payload = getResponsePayload(event);
+  if (payload === undefined) {
+    return 0;
+  }
+  try {
+    return encoder.encode(getPayloadText(payload)).length;
+  } catch {
+    return 0;
+  }
+};
+
 const hasMatchingToolName = (startedEvent, finishedEvent) => {
   if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
     return startedEvent.toolName === finishedEvent.toolName;
@@ -2684,7 +2753,8 @@ const mergeRequestResponseEvents = (startedEvent, finishedEvent) => {
   return {
     ...mergeToolExecutionEvents(startedEvent, finishedEvent, startedEvent.type),
     requestEvent: startedEvent,
-    responseEvent: finishedEvent
+    responseEvent: finishedEvent,
+    size: getResponsePayloadSize(finishedEvent)
   };
 };
 const isMatchingRequestResponsePair = (startedEvent, finishedEvent) => {
@@ -2790,12 +2860,8 @@ const matchesEventCategoryFilter = (event, eventCategoryFilters) => {
 const getFilteredEvents = (events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
   const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
   const collapsedEvents = collapseToolExecutionEvents(visibleEvents);
-  const parsedFilter = parseFilterValue(filterValue);
-  const activeEventCategoryFilters = parsedFilter.eventCategoryFilter === All$1 ? eventCategoryFilters : [parsedFilter.eventCategoryFilter];
-  const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilters));
-  const {
-    filterText
-  } = parsedFilter;
+  const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, eventCategoryFilters));
+  const filterText = filterValue.trim().toLowerCase();
   if (!filterText) {
     return filteredByCategory;
   }
@@ -2983,10 +3049,22 @@ const sortEventsByTableColumn = (events, sortColumn, sortDescending) => {
 };
 
 const getCurrentEvents$1 = 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 {
+    categoryFilters,
+    events,
+    filterValue,
+    showEventStreamFinishedEvents,
+    showInputEvents,
+    showResponsePartEvents,
+    sortColumn,
+    sortDescending,
+    timelineEndSeconds,
+    timelineStartSeconds
+  } = state;
+  const eventCategoryFilters = getSelectedEventCategoryFilters(categoryFilters);
+  const filteredEvents = getFilteredEvents(events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+  const timelineEvents = filterEventsByTimelineRange(filteredEvents, timelineStartSeconds, timelineEndSeconds);
+  return sortEventsByTableColumn(timelineEvents, sortColumn, sortDescending);
 };
 
 const getCurrentEvents = state => getCurrentEvents$1(state);
@@ -3009,6 +3087,8 @@ const loadSelectedEvent = async ({
   sessionId,
   type
 }) => {
+  // TODO load them in parallel
+  // or adjust worker function to load both start and end event
   const raw = await loadSelectedEvent$1(sessionId, eventId, type);
   if (endEventId && endEventId !== -1) {
     const end = await loadSelectedEvent$1(sessionId, endEventId, type);
@@ -3323,7 +3403,7 @@ const selectEventAtIndex = async (state, selectedEventIndex) => {
     type: selectedEvent.type
   });
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
-  return withSelectedEventVisible({
+  const nextState = {
     ...state,
     detailTabs: createDetailTabs(selectedDetailTab, resolvedSelectedEvent),
     previewTextCursorColumnIndex: null,
@@ -3334,6 +3414,10 @@ const selectEventAtIndex = async (state, selectedEventIndex) => {
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
+  };
+  return withSelectedEventVisible({
+    ...nextState,
+    tableWidth: shouldUseBalancedSplitTableWidth(nextState) ? getBalancedSplitTableWidth(nextState) : state.tableWidth
   });
 };
 
@@ -3394,36 +3478,17 @@ const getMenuEntriesTableBody = props => {
   }];
 };
 
-const getColumnVisibilityFlags = (tableColumns, column) => {
-  return isVisibleTableColumn(tableColumns, column) ? Checked : Unchecked;
+const getColumnMenuEntry = (columnName, label, isVisible) => {
+  return {
+    args: [columnName],
+    command: 'ChatDebug.toggleTableColumnVisibility',
+    flags: isVisible ? Checked : Unchecked,
+    id: columnName,
+    label
+  };
 };
-
 const getMenuEntriesTableHeader = state => {
-  return [{
-    args: [Type],
-    command: 'ChatDebug.toggleTableColumnVisibility',
-    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: [Size],
-    command: 'ChatDebug.toggleTableColumnVisibility',
-    flags: getColumnVisibilityFlags(state.tableColumns, Size),
-    id: 'size',
-    label: size()
-  }, {
-    args: [Duration],
-    command: 'ChatDebug.toggleTableColumnVisibility',
-    flags: getColumnVisibilityFlags(state.tableColumns, Duration),
-    id: 'duration',
-    label: duration()
-  }, {
+  return [...state.tableColumns.map(column => getColumnMenuEntry(column.name, column.label, column.isVisible)), {
     args: [],
     command: 'ChatDebug.resetTableColumns',
     flags: None$1,
@@ -3502,12 +3567,10 @@ const getMenuIds = () => {
   return [MenuChatDebugTableHeader, MenuChatDebugTableBody, 556, 557];
 };
 
-const ParseChatDebugUriErrorCode = {
-  InvalidSessionId: 1,
-  InvalidUriEncoding: 2,
-  InvalidUriFormat: 3,
-  MissingUri: 4
-};
+const InvalidSessionId = 1;
+const InvalidUriEncoding = 2;
+const InvalidUriFormat = 3;
+const MissingUri = 4;
 
 const ParseChatDebugUriResultType = {
   Error: 2,
@@ -3519,7 +3582,7 @@ const invalidSessionIdPattern = /[/?#]/;
 const parseChatDebugUri = uri => {
   if (!uri) {
     return {
-      code: ParseChatDebugUriErrorCode.MissingUri,
+      code: MissingUri,
       message: missingUri(),
       type: ParseChatDebugUriResultType.Error
     };
@@ -3527,7 +3590,7 @@ const parseChatDebugUri = uri => {
   const match = uri.match(chatDebugUriPattern);
   if (!match) {
     return {
-      code: ParseChatDebugUriErrorCode.InvalidUriFormat,
+      code: InvalidUriFormat,
       message: invalidUriFormat(),
       type: ParseChatDebugUriResultType.Error
     };
@@ -3538,14 +3601,14 @@ const parseChatDebugUri = uri => {
     sessionId = decodeURIComponent(encodedSessionId);
   } catch {
     return {
-      code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
+      code: InvalidUriEncoding,
       message: invalidUriEncoding(),
       type: ParseChatDebugUriResultType.Error
     };
   }
   if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
     return {
-      code: ParseChatDebugUriErrorCode.InvalidSessionId,
+      code: InvalidSessionId,
       message: invalidSessionId(),
       type: ParseChatDebugUriResultType.Error
     };
@@ -3565,7 +3628,7 @@ const getSessionIdFromUri = state => {
 };
 
 const getInvalidUriMessage = (uri, code) => {
-  if (code === ParseChatDebugUriErrorCode.MissingUri) {
+  if (code === MissingUri) {
     return unableToLoadDebugSessionMissingUri();
   }
   return unableToLoadDebugSessionInvalidUri(uri);
@@ -3584,6 +3647,49 @@ const getEffectiveTimelineRange = (timelineStartSeconds, timelineEndSeconds, tim
   };
 };
 
+const formatTimelineMilliseconds = value => {
+  return `${Math.round(value * 1000)}ms`;
+};
+
+const formatTimelineSeconds = value => {
+  if (Number.isInteger(value)) {
+    return `${value}s`;
+  }
+  return `${Number(value.toFixed(1))}s`;
+};
+
+const getEndTime = event => {
+  return event.ended ?? event.endTime ?? event.timestamp;
+};
+
+const getStartTime = event => {
+  return event.started ?? event.startTime ?? event.timestamp;
+};
+
+const formatTableSummaryDuration = durationMs => {
+  if (durationMs < 1000) {
+    return formatTimelineMilliseconds(durationMs / 1000);
+  }
+  return formatTimelineSeconds(durationMs / 1000);
+};
+const getTableSummaries = events => {
+  let minStart = Number.POSITIVE_INFINITY;
+  let maxEnd = Number.NEGATIVE_INFINITY;
+  for (const event of events) {
+    const startTime = toTimeNumber(getStartTime(event));
+    const endTime = toTimeNumber(getEndTime(event));
+    if (typeof startTime === 'number' && Number.isFinite(startTime)) {
+      minStart = Math.min(minStart, startTime);
+    }
+    if (typeof endTime === 'number' && Number.isFinite(endTime)) {
+      maxEnd = Math.max(maxEnd, endTime);
+    }
+  }
+  const durationMs = Number.isFinite(minStart) && Number.isFinite(maxEnd) ? Math.max(0, maxEnd - minStart) : 0;
+  const duration = formatTableSummaryDuration(durationMs);
+  return [tableSummaryRequests(events.length), tableSummaryFinish(duration)];
+};
+
 const getTimelineEvents = state => {
   const {
     events,
@@ -3616,12 +3722,16 @@ const getStateWithTimelineInfo = 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 {
+  const nextState = {
     ...state,
     timelineEvents,
     timelineFilterDescription,
     timelineInfo
   };
+  return {
+    ...nextState,
+    summaries: getTableSummaries(getCurrentEvents$1(nextState))
+  };
 };
 
 const getStateWithInvalidUri = state => {
@@ -3691,7 +3801,7 @@ const getMergedRequestResponseEvent = (item, response) => {
       eventEndId: response.eventId,
       eventId: item.eventId,
       method: 'POST',
-      size: 0,
+      size: getResponsePayloadSize(response),
       ...(started === undefined ? {} : {
         started
       }),
@@ -3708,7 +3818,7 @@ const getMergedRequestResponseEvent = (item, response) => {
     eventEndId: response.eventId,
     eventId: item.eventId,
     method: 'POST',
-    size: 0,
+    size: getResponsePayloadSize(response),
     ...(started === undefined ? {} : {
       started
     }),
@@ -3759,7 +3869,10 @@ const listChatViewEvents = async (sessionId, _databaseName, _dataBaseVersion, _e
 };
 
 const restoreSelectedEvent = async state => {
-  if (state.selectedEventId === null) {
+  const {
+    selectedEventId
+  } = state;
+  if (selectedEventId === null) {
     return {
       ...state,
       previewTextCursorColumnIndex: null,
@@ -3860,11 +3973,14 @@ const loadEventsForSessionId = async (state, sessionId) => {
 };
 
 const refreshEvents = async state => {
-  const sessionId = state.sessionId || getSessionIdFromUri(state);
-  if (!sessionId) {
+  const {
+    sessionId
+  } = state;
+  const actual = sessionId || getSessionIdFromUri(state);
+  if (!actual) {
     return getStateWithInvalidUri(state);
   }
-  return loadEventsForSessionId(state, sessionId);
+  return loadEventsForSessionId(state, actual);
 };
 
 const refresh = async state => {
@@ -3919,6 +4035,9 @@ const handleEscape = state => {
 };
 
 const getEventIndexByStableId$1 = (events, event) => {
+  if (typeof event.eventId !== 'number') {
+    return -1;
+  }
   return events.findIndex(candidate => candidate.eventId === event.eventId);
 };
 
@@ -4013,7 +4132,7 @@ const getBoolean = value => {
 const General = 'general';
 const RequestHeaders = 'requestHeaders';
 const ResponseHeaders = 'responseHeaders';
-const headerSectionKeys = [General, RequestHeaders, ResponseHeaders];
+const headerSectionKeys = [General, ResponseHeaders, RequestHeaders];
 const isHeaderSectionKey = value => {
   return headerSectionKeys.includes(value);
 };
@@ -4046,6 +4165,9 @@ const parseTimelineRangePreset$1 = value => {
   };
 };
 const getEventIndexByStableId = (events, event) => {
+  if (typeof event.eventId !== 'number') {
+    return -1;
+  }
   return events.findIndex(candidate => candidate.eventId === event.eventId);
 };
 const getSelectedEventIndex = state => {
@@ -4143,7 +4265,7 @@ const handleUseDevtoolsLayout = (state, _value, checked) => {
   const useDevtoolsLayout = getBoolean(checked);
   const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex(state) : null;
   const hasSelectedEvent = useDevtoolsLayout && selectedEventIndex !== null;
-  return applyVirtualTableState({
+  const nextState = {
     ...state,
     previewTextCursorColumnIndex: hasSelectedEvent ? state.previewTextCursorColumnIndex : null,
     previewTextCursorRowIndex: hasSelectedEvent ? state.previewTextCursorRowIndex : null,
@@ -4151,6 +4273,10 @@ const handleUseDevtoolsLayout = (state, _value, checked) => {
     selectedEventId: hasSelectedEvent ? state.selectedEventId : null,
     selectedEventIndex,
     useDevtoolsLayout
+  };
+  return applyVirtualTableState({
+    ...nextState,
+    tableWidth: shouldUseBalancedSplitTableWidth(nextState) ? getBalancedSplitTableWidth(nextState) : state.tableWidth
   });
 };
 const handleSelectedEventIndex = (state, value) => {
@@ -4574,9 +4700,6 @@ const getPreviewEvent = event => {
 
 const previewTextRowHeight = 20;
 const defaultPreviewTextColumnWidth = 9;
-const clamp = (value, min, max) => {
-  return Math.min(Math.max(value, min), max);
-};
 const getPreviewTextCursorFromPoint = (value, x, y) => {
   const lines = value.split('\n');
   const rowIndex = clamp(Math.floor(Math.max(y, 0) / previewTextRowHeight), 0, Math.max(lines.length - 1, 0));
@@ -4797,7 +4920,8 @@ const handleSashPointerMove = (state, eventX, eventY) => {
   }
   return {
     ...state,
-    tableWidth: getTableWidthFromClientX(state, eventX)
+    tableWidth: getTableWidthFromClientX(state, eventX),
+    tableWidthManuallyResized: true
   };
 };
 
@@ -4864,7 +4988,7 @@ const handleTableResizerPointerMove = (state, clientX) => {
   }
   return {
     ...state,
-    tableColumnWidths: getResizedTableColumnWidths(state, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths, clientX, state.tableResizerDownId)
+    tableColumns: getResizedTableColumnWidths(state, getVisibleTableColumns(state.tableColumns), state.tableColumns, clientX, state.tableResizerDownId)
   };
 };
 
@@ -5203,17 +5327,22 @@ const handleTimelinePointerUp = (state, eventX) => {
 const setUseDevtoolsLayout = (state, checked) => {
   const useDevtoolsLayout = getBoolean(checked);
   const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex$1(state) : null;
-  return applyVirtualTableState({
+  const hasSelectedEvent = useDevtoolsLayout && selectedEventIndex !== null;
+  const nextState = {
     ...state,
-    previewTextCursorColumnIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorColumnIndex : null,
-    previewTextCursorRowIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorRowIndex : null,
-    previewTextDeltaY: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextDeltaY : 0,
+    previewTextCursorColumnIndex: hasSelectedEvent ? state.previewTextCursorColumnIndex : null,
+    previewTextCursorRowIndex: hasSelectedEvent ? state.previewTextCursorRowIndex : null,
+    previewTextDeltaY: hasSelectedEvent ? state.previewTextDeltaY : 0,
     previewTextScrollBarHandleOffset: 0,
     previewTextScrollBarPointerActive: false,
-    selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
-    selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
+    selectedEvent: hasSelectedEvent ? state.selectedEvent : null,
+    selectedEventId: hasSelectedEvent ? state.selectedEventId : null,
     selectedEventIndex,
     useDevtoolsLayout
+  };
+  return applyVirtualTableState({
+    ...nextState,
+    tableWidth: shouldUseBalancedSplitTableWidth(nextState) ? getBalancedSplitTableWidth(nextState) : state.tableWidth
   });
 };
 
@@ -5254,7 +5383,8 @@ const loadEventsFromUri = async state => {
 
 const loadContent = async (state, savedState) => {
   await getPreference('chatDebug.autoRefresh');
-  const nextState = await loadEventsFromUri(restoreSavedState(state, savedState));
+  const restoredState = restoreSavedState(state, savedState);
+  const nextState = await loadEventsFromUri(restoredState);
   if (nextState.sessionId) {
     try {
       await registerUpdateListener(nextState.sessionId, rpcId, nextState.uid);
@@ -5359,7 +5489,7 @@ const getCss = state => {
   if (state.width >= state.largeBreakpoint) {
     topSize = 30;
   }
-  const tableColumnLayout = getTableColumnLayout(tableContentWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths);
+  const tableColumnLayout = getTableColumnLayout(tableContentWidth, getVisibleTableColumns(state.tableColumns), state.tableColumns);
   const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0, tableColThreeWidth = 0, tableColFourWidth = 0] = tableColumnLayout.visibleColumnWidths;
   const resizerOneLeft = tableColumnLayout.resizerLefts[0] ?? 0;
   const resizerTwoLeft = tableColumnLayout.resizerLefts[1] ?? 0;
@@ -5384,7 +5514,7 @@ const getCss = state => {
   --ChatDebugViewPreviewScrollBarWidth: ${previewVirtualization.showScrollBar ? devtoolsTableScrollBarWidth : 0}px;
   --ChatDebugViewPreviewViewportHeight: ${previewVirtualization.viewportHeight}px;
   --ChatDebugViewDetailsWidth: ${detailsWidth}px;
-  --ChatDebugViewDurationColumnWidth: ${state.tableColumnWidths.duration}px;
+  --ChatDebugViewDurationColumnWidth: ${getTableColumnWidth(state.tableColumns, Duration)}px;
   --ChatDebugViewTableRowHeight: ${devtoolsTableRowHeight}px;
   --ChatDebugViewTableScrollBarHeight: ${scrollBarHeight}px;
   --ChatDebugViewTableScrollBarOffset: ${scrollBarOffset}px;
@@ -5400,7 +5530,7 @@ const getCss = state => {
   --ChatDebugViewTimelineSelectionEndLeft: ${selectionEndPercent ?? 0}%;
   --ChatDebugViewTimelineSelectionStartLeft: ${selectionStartPercent ?? 0}%;
   --ChatDebugViewTopSize: ${topSize}px;
-  --ChatDebugViewTypeColumnWidth: ${state.tableColumnWidths.type}px;
+  --ChatDebugViewTypeColumnWidth: ${getTableColumnWidth(state.tableColumns, Type)}px;
   padding: ${state.viewPadding}px;
   padding-right: 0;
 }
@@ -5565,6 +5695,14 @@ const getCss = state => {
 .ChatDebugViewHeadersCellName {
   font-weight: 500;
 }
+
+.ChatDebugViewHeadersSectionInfo {
+  color: var(--vscode-descriptionForeground, rgba(255, 255, 255, 0.7));
+  font-size: 11px;
+  line-height: 1.4;
+  margin-top: 8px;
+}
+
 .PreviewVirtualizedEditor {
   height: var(--ChatDebugViewPreviewViewportHeight);
   overflow: hidden;
@@ -5972,6 +6110,7 @@ const ChatDebugViewHeadersRowEven = 'ChatDebugViewHeadersRowEven';
 const ChatDebugViewHeadersRowOdd = 'ChatDebugViewHeadersRowOdd';
 const ChatDebugViewHeadersSection = 'ChatDebugViewHeadersSection';
 const ChatDebugViewHeadersSectionHeading = 'ChatDebugViewHeadersSectionHeading';
+const ChatDebugViewHeadersSectionInfo = 'ChatDebugViewHeadersSectionInfo';
 const ChatDebugViewHeadersTable = 'ChatDebugViewHeadersTable';
 const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
 const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
@@ -6408,9 +6547,7 @@ const formatHttpStatusCode = value => {
 const isHeadersRecord = value => {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 };
-const isNonEmptyString = value => {
-  return typeof value === 'string' && value.length > 0;
-};
+
 const getStatusCodeValue = selectedEvent => {
   if (!selectedEvent) {
     return undefined;
@@ -6427,6 +6564,36 @@ const getStatusCodeValue = selectedEvent => {
   }
   return undefined;
 };
+
+const isNonEmptyString = value => {
+  return typeof value === 'string' && value.length > 0;
+};
+
+const getGeneralEntries = selectedEvent => {
+  if (!selectedEvent) {
+    return [];
+  }
+  const entries = [];
+  if (isNonEmptyString(selectedEvent.url)) {
+    entries.push([requestUrl(), selectedEvent.url]);
+  }
+  if (isNonEmptyString(selectedEvent.method)) {
+    entries.push([requestMethod(), selectedEvent.method]);
+  }
+  const statusCode$1 = getStatusCodeValue(selectedEvent);
+  if (statusCode$1 !== undefined && statusCode$1 !== '') {
+    entries.push([statusCode(), formatHttpStatusCode(statusCode$1)]);
+  }
+  return entries;
+};
+
+const getHeaders = value => {
+  if (!isHeadersRecord(value)) {
+    return [];
+  }
+  return Object.entries(value);
+};
+
 const stringifyHeaderValue = value => {
   try {
     return JSON.stringify(value, (_key, nestedValue) => {
@@ -6439,6 +6606,7 @@ const stringifyHeaderValue = value => {
     return '[unserializable]';
   }
 };
+
 const getHeaderValueText = value => {
   if (typeof value === 'string') {
     return value;
@@ -6460,29 +6628,7 @@ const getHeaderValueText = value => {
   }
   return stringifyHeaderValue(value);
 };
-const getHeaders = value => {
-  if (!isHeadersRecord(value)) {
-    return [];
-  }
-  return Object.entries(value);
-};
-const getGeneralEntries = selectedEvent => {
-  if (!selectedEvent) {
-    return [];
-  }
-  const entries = [];
-  if (isNonEmptyString(selectedEvent.url)) {
-    entries.push([requestUrl(), selectedEvent.url]);
-  }
-  if (isNonEmptyString(selectedEvent.method)) {
-    entries.push([requestMethod(), selectedEvent.method]);
-  }
-  const statusCode$1 = getStatusCodeValue(selectedEvent);
-  if (statusCode$1 !== undefined && statusCode$1 !== '') {
-    entries.push([statusCode(), formatHttpStatusCode(statusCode$1)]);
-  }
-  return entries;
-};
+
 const getHeaderRowNodes = (headerName, headerValue, index) => {
   return [{
     childCount: 2,
@@ -6498,6 +6644,7 @@ const getHeaderRowNodes = (headerName, headerValue, index) => {
     type: Div
   }, text(getHeaderValueText(headerValue))];
 };
+
 const getHeadersTableNodes = headers => {
   const headerRows = [];
   for (const [index, [headerName, headerValue]] of headers.entries()) {
@@ -6509,13 +6656,17 @@ const getHeadersTableNodes = headers => {
     type: Ul
   }, ...headerRows];
 };
-const getHeaderSectionNodes = (section, label, headers, collapsedHeaderSections) => {
+
+const getHeaderSectionNodes = (section, label, headers, collapsedHeaderSections, infoMessage = '') => {
   const isCollapsed = collapsedHeaderSections.includes(section);
+  const hasInfoMessage = !isCollapsed && infoMessage !== '';
+  const childCount = isCollapsed ? 1 : 2 + Number(hasInfoMessage);
   return [{
-    childCount: isCollapsed ? 1 : 2,
+    childCount,
     className: ChatDebugViewHeadersSection,
     type: Div
   }, {
+    ariaExpanded: !isCollapsed,
     childCount: 1,
     className: ChatDebugViewHeadersSectionHeading,
     name: ToggleHeadersSection,
@@ -6523,8 +6674,13 @@ const getHeaderSectionNodes = (section, label, headers, collapsedHeaderSections)
     onClick: HandleFilterInput,
     type: Button$1,
     value: section
-  }, text(label), ...(isCollapsed ? [] : getHeadersTableNodes(headers))];
+  }, text(label), ...(isCollapsed ? [] : getHeadersTableNodes(headers)), ...(hasInfoMessage ? [{
+    childCount: 1,
+    className: ChatDebugViewHeadersSectionInfo,
+    type: Div
+  }, text(infoMessage)] : [])];
 };
+
 const getHeadersContentNodes = (responseEventNodes, selectedEvent, collapsedHeaderSections = []) => {
   const generalEntries = getGeneralEntries(selectedEvent);
   const requestHeaders$1 = getHeaders(selectedEvent?.headers);
@@ -6536,12 +6692,12 @@ const getHeadersContentNodes = (responseEventNodes, selectedEvent, collapsedHead
   if (generalEntries.length > 0) {
     nodes.push(...getHeaderSectionNodes(General, general(), generalEntries, collapsedHeaderSections));
   }
+  if (responseHeaders$1.length > 0) {
+    nodes.push(...getHeaderSectionNodes(ResponseHeaders, responseHeaders(), responseHeaders$1, collapsedHeaderSections, responseHeadersInfo()));
+  }
   if (requestHeaders$1.length > 0) {
     nodes.push(...getHeaderSectionNodes(RequestHeaders, requestHeaders(), requestHeaders$1, collapsedHeaderSections));
   }
-  if (responseHeaders$1.length > 0) {
-    nodes.push(...getHeaderSectionNodes(ResponseHeaders, responseHeaders(), responseHeaders$1, collapsedHeaderSections));
-  }
   return nodes;
 };
 
@@ -7841,59 +7997,42 @@ const getSplitViewDom = (splitChildCount, eventsClassName, tableNodes, sashNodes
   }, ...tableNodes, ...sashNodes, ...detailsNodes];
 };
 
-const formatTimelineMilliseconds = value => {
-  return `${Math.round(value * 1000)}ms`;
-};
-
-const formatTimelineSeconds = value => {
-  if (Number.isInteger(value)) {
-    return `${value}s`;
-  }
-  return `${Number(value.toFixed(1))}s`;
-};
-
-const getEndTime = event => {
-  return event.ended ?? event.endTime ?? event.timestamp;
-};
-
-const getStartTime = event => {
-  return event.started ?? event.startTime ?? event.timestamp;
-};
-
-const formatTableSummaryDuration = durationMs => {
-  if (durationMs < 1000) {
-    return formatTimelineMilliseconds(durationMs / 1000);
-  }
-  return formatTimelineSeconds(durationMs / 1000);
-};
-const getTableSummary = events => {
-  let minStart = Number.POSITIVE_INFINITY;
-  let maxEnd = Number.NEGATIVE_INFINITY;
-  for (const event of events) {
-    const startTime = toTimeNumber(getStartTime(event));
-    const endTime = toTimeNumber(getEndTime(event));
-    if (typeof startTime === 'number' && Number.isFinite(startTime)) {
-      minStart = Math.min(minStart, startTime);
-    }
-    if (typeof endTime === 'number' && Number.isFinite(endTime)) {
-      maxEnd = Math.max(maxEnd, endTime);
-    }
-  }
-  const durationMs = Number.isFinite(minStart) && Number.isFinite(maxEnd) ? Math.max(0, maxEnd - minStart) : 0;
-  return tableSummary(events.length, formatTableSummaryDuration(durationMs));
-};
-
 const tableSummaryNode = {
-  childCount: 1,
+  childCount: 0,
   className: TableSummary,
   role: Status,
   type: Div
 };
-const getTableSummaryDom = summary => {
-  if (!summary) {
+const tableSummaryItemNode = {
+  childCount: 1,
+  type: Span
+};
+const tableSummaryNodes = new Map();
+const getTableSummaryNode = childCount => {
+  const existing = tableSummaryNodes.get(childCount);
+  if (existing) {
+    return existing;
+  }
+  const node = {
+    ...tableSummaryNode,
+    childCount
+  };
+  tableSummaryNodes.set(childCount, node);
+  return node;
+};
+const getTableSummaryDom = summaries => {
+  const nonEmptySummaries = summaries.filter(Boolean);
+  if (nonEmptySummaries.length === 0) {
     return [];
   }
-  return [tableSummaryNode, text(summary)];
+  const nodes = [getTableSummaryNode(nonEmptySummaries.length * 2 - 1)];
+  for (let i = 0; i < nonEmptySummaries.length; i++) {
+    nodes.push(tableSummaryItemNode, text(nonEmptySummaries[i]));
+    if (i < nonEmptySummaries.length - 1) {
+      nodes.push(text(' | '));
+    }
+  }
+  return nodes;
 };
 
 const getTableBodyDom = (rowNodes, eventCount) => {
@@ -7952,7 +8091,7 @@ const getTableHeaderDom = (visibleTableColumns = defaultVisibleTableColumns, tab
   }, ...getHeaderCellNodes(visibleTableColumns, tableColumns)];
 };
 
-const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0) => {
+const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summaries = [], focus = 0) => {
   return [{
     childCount: 3,
     className: Table,
@@ -8009,7 +8148,7 @@ const getTableScrollBarDom = visible => {
   }];
 };
 
-const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = 'none', showScrollBar = false) => {
+const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summaries = [], focus = 0, className = '', role = 'none', showScrollBar = false) => {
   const tableWrapperClassName = mergeClassNames(TableWrapper, focus === FocusChatDebugTable ? FocusOutline : '', className);
   const tableWrapperNode = {
     childCount: showScrollBar ? 3 : 2,
@@ -8020,16 +8159,16 @@ const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultV
       role
     } : {})
   };
-  return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus), ...getTableResizersDom(visibleTableColumns), ...getTableScrollBarDom(showScrollBar)];
+  return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summaries, focus), ...getTableResizersDom(visibleTableColumns), ...getTableScrollBarDom(showScrollBar)];
 };
 
-const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = 'none', showScrollBar = false) => {
-  const tableSummaryNodes = getTableSummaryDom(summary);
+const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summaries = [], focus = 0, className = '', role = 'none', showScrollBar = false) => {
+  const tableSummaryNodes = getTableSummaryDom(summaries);
   return [{
     childCount: tableSummaryNodes.length === 0 ? 1 : 2,
     className: TableWrapperWrapper,
     type: Div
-  }, ...getTableWrapperDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus, className, role, showScrollBar), ...tableSummaryNodes];
+  }, ...getTableWrapperDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summaries, focus, className, role, showScrollBar), ...tableSummaryNodes];
 };
 
 const getBucketUnitDom = (unitCount, presetValue) => {
@@ -8202,7 +8341,7 @@ const getTimelineDom = (timelineInfo, hoverPercent = null) => {
   }, ...selectionNodes];
 };
 
-const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', detailTabs = createDetailTabs(), visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, previewTextDeltaY = 0, previewTextViewportHeight = 0, minLineY = 0, maxLineY = events.length, collapsedHeaderSections = []) => {
+const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', detailTabs = createDetailTabs(), visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, previewTextDeltaY = 0, previewTextViewportHeight = 0, minLineY = 0, maxLineY = events.length, collapsedHeaderSections = [], summaries = getTableSummaries(events)) => {
   const visibleEvents = events.slice(minLineY, maxLineY);
   const rows = createDevtoolsRows(visibleEvents, selectedEventIndex, minLineY);
   const rowNodes = getDevtoolsRows(rows, visibleTableColumns);
@@ -8224,9 +8363,8 @@ const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvent
   const responseEventNodes = selectedEvent ? getEventNode(getResponseEvent(selectedEvent)) : [];
   const hasSelectedEvent = !!selectedEvent;
   const eventsClassName = getEventsClassName(hasSelectedEvent);
-  const summary = getTableSummary(events);
   const showScrollBar = visibleEvents.length < events.length;
-  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableWrapperWrapperDom(rowNodes, visibleEvents.length, visibleTableColumns, tableColumns, summary, focus, '', '', showScrollBar);
+  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableWrapperWrapperDom(rowNodes, visibleEvents.length, visibleTableColumns, tableColumns, summaries, focus, '', '', showScrollBar);
   const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualizationOptions, collapsedHeaderSections);
   const sashNodes = getSashNodesDom(hasSelectedEvent);
   const splitChildCount = hasSelectedEvent ? 3 : 1;
@@ -8281,7 +8419,7 @@ const getEventCategoryFilterDescription = eventCategoryFilters => {
   }
   return eventCategoryFilters.map(eventCategoryFilter => getEventCategoryFilterLabel(eventCategoryFilter).toLowerCase()).join(', ');
 };
-const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, categoryFilters, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineFilterDescription, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, minLineY = 0, maxLineY = events.length, previewTextDeltaY = 0, previewTextViewportHeight = 0, collapsedHeaderSections = []) => {
+const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, categoryFilters, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineFilterDescription, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, minLineY = 0, maxLineY = events.length, previewTextDeltaY = 0, previewTextViewportHeight = 0, collapsedHeaderSections = [], summaries = getTableSummaries(events)) => {
   if (errorMessage) {
     return getDebugErrorDom(errorMessage);
   }
@@ -8305,7 +8443,7 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   const emptyMessage = getEmptyMessage(events.length, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage);
   const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
   if (useDevtoolsLayout) {
-    const devtoolsDom = getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, detailTabs, visibleTableColumns, tableColumns, timelineInfo, timelineHoverPercent, focus, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewTextDeltaY, previewTextViewportHeight, minLineY, maxLineY, collapsedHeaderSections);
+    const devtoolsDom = getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, detailTabs, visibleTableColumns, tableColumns, timelineInfo, timelineHoverPercent, focus, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewTextDeltaY, previewTextViewportHeight, minLineY, maxLineY, collapsedHeaderSections, summaries);
     const devtoolsContentNodes = devtoolsDom.slice(1);
     const topLevelNodes = [...getDebugViewTopDom(filterValue, useDevtoolsLayout, categoryFilters), ...devtoolsContentNodes];
     const rootChildCount = getTopLevelChildCount(topLevelNodes);
@@ -8341,7 +8479,7 @@ const renderItems = (oldState, newState) => {
   }
   const filteredEvents = getCurrentEvents$1(newState);
   const previewTextViewportHeight = getPreviewTextViewportHeight(newState);
-  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, getSelectedEventCategoryFilters(newState.categoryFilters), newState.categoryFilters, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, newState.timelineFilterDescription, withSessionEventIds(newState.timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, getVisibleTableColumns(newState.tableColumns), newState.detailTabs, newState.tableColumns, newState.timelineInfo, newState.timelineHoverPercent, newState.focus, newState.previewTextCursorRowIndex, newState.previewTextCursorColumnIndex, newState.tableMinLineY, newState.tableMaxLineY, newState.previewTextDeltaY, previewTextViewportHeight, newState.collapsedHeaderSections);
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, getSelectedEventCategoryFilters(newState.categoryFilters), newState.categoryFilters, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, newState.timelineFilterDescription, withSessionEventIds(newState.timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, getVisibleTableColumns(newState.tableColumns), newState.detailTabs, newState.tableColumns, newState.timelineInfo, newState.timelineHoverPercent, newState.focus, newState.previewTextCursorRowIndex, newState.previewTextCursorColumnIndex, newState.tableMinLineY, newState.tableMaxLineY, newState.previewTextDeltaY, previewTextViewportHeight, newState.collapsedHeaderSections, newState.summaries);
   return [SetDom2, newState.uid, dom];
 };
 
@@ -8547,15 +8685,20 @@ const rerender = state => {
 };
 
 const resetTableColumns = state => {
-  if (getVisibleTableColumns(state.tableColumns).join(',') === defaultVisibleTableColumns.join(',') && isSameTableColumnWidths(state.tableColumnWidths, defaultTableColumnWidths) && state.sortColumn === '' && state.sortDescending === false) {
+  const {
+    sortColumn,
+    sortDescending,
+    tableColumns
+  } = state;
+  const defaultTableColumns = createTableColumns();
+  if (getVisibleTableColumns(tableColumns).join(',') === defaultVisibleTableColumns.join(',') && isSameTableColumnWidths(getTableColumnWidths(tableColumns), getTableColumnWidths(defaultTableColumns)) && sortColumn === '' && sortDescending === false) {
     return state;
   }
   return {
     ...state,
     sortColumn: '',
     sortDescending: false,
-    tableColumns: createTableColumns(),
-    tableColumnWidths: defaultTableColumnWidths
+    tableColumns: defaultTableColumns
   };
 };
 
@@ -8564,9 +8707,10 @@ const handleResize = (state, dimensions) => {
     ...state,
     ...dimensions
   };
+  const tableWidth = shouldUseBalancedSplitTableWidth(nextState) ? getBalancedSplitTableWidth(nextState) : clampTableWidth(nextState, state.tableWidth);
   return applyVirtualTableState({
     ...nextState,
-    tableWidth: clampTableWidth(nextState, state.tableWidth)
+    tableWidth
   });
 };
 
@@ -8588,7 +8732,6 @@ const saveState = state => {
     selectedEventId,
     sessionId,
     tableColumns,
-    tableColumnWidths,
     timelineEndSeconds,
     timelineStartSeconds
   } = state;
@@ -8599,7 +8742,7 @@ const saveState = state => {
     selectedDetailTab: getSelectedDetailTab(detailTabs),
     selectedEventId,
     sessionId,
-    tableColumnWidths,
+    tableColumnWidths: getTableColumnWidths(tableColumns),
     timelineEndSeconds,
     timelineStartSeconds,
     visibleTableColumns: getVisibleTableColumns(tableColumns)
@@ -8673,12 +8816,15 @@ const setSessionId = async (state, sessionId) => {
 };
 
 const toggleTableColumnVisibility = (state, column) => {
+  const {
+    tableColumns
+  } = state;
   if (!isTableColumn(column)) {
     return state;
   }
   return {
     ...state,
-    tableColumns: state.tableColumns.map(tableColumn => {
+    tableColumns: tableColumns.map(tableColumn => {
       if (tableColumn.name !== column) {
         return tableColumn;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/chat-debug-view",
-  "version": "10.21.0",
+  "version": "10.22.0",
   "description": "Chat Debug View Worker",
   "repository": {
     "type": "git",