@lvce-editor/static-server 0.80.18 → 0.81.0

package/static/{0e2b358 → 3101f6f}/packages/chat-debug-view/dist/chatDebugViewWorkerMain.js

@@ -1137,6 +1137,8 @@ const Tr = 15;
 const Img = 17;
 const Section = 41;
 const Search = 42;
+const Li = 48;
+const Ul = 60;
 const TextArea = 62;
 const Reference = 100;
 
@@ -1185,6 +1187,9 @@ const writeClipBoardText = async text => {
 const getPreference = async key => {
   return await invoke('Preferences.get', key);
 };
+const openUri = async (uri, focus, options) => {
+  await invoke('Main.openUri', uri, focus, options);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1372,14 +1377,6 @@ const appendStoredImageAttachmentForTest = async (state, sessionId, eventId, mim
   return state;
 };
 
-const decodeBase64 = 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 = async mimeType => {
   const canvas = new OffscreenCanvas(2, 2);
   const context = canvas.getContext('2d');
@@ -1392,6 +1389,16 @@ const createCanvasBlob = async mimeType => {
     type: mimeType
   });
 };
+
+const decodeBase64 = 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 createBlob = async (mimeType, contentKind, content) => {
   if (contentKind === 'canvas') {
     return createCanvasBlob(mimeType);
@@ -1405,6 +1412,7 @@ const createBlob = async (mimeType, contentKind, content) => {
     type: mimeType
   });
 };
+
 const appendStoredRemovedImageAttachmentForTest = async (state, sessionId, eventId, mimeType, name, contentKind, content, timestamp) => {
   const blob = await createBlob(mimeType, contentKind, content);
   await appendEvent({
@@ -1420,6 +1428,32 @@ const appendStoredRemovedImageAttachmentForTest = async (state, sessionId, event
   return state;
 };
 
+const Filter = 'filter';
+const EventCategoryFilter = 'eventCategoryFilter';
+const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
+const ShowInputEvents = 'showInputEvents';
+const ShowResponsePartEvents = 'showResponsePartEvents';
+const UseDevtoolsLayout = 'useDevtoolsLayout';
+const SelectedEventIndex = 'selectedEventIndex';
+const CloseDetails$1 = 'closeDetails';
+const DetailTab = 'detailTab';
+const TimelineStartSeconds = 'timelineStartSeconds';
+const TimelineEndSeconds = 'timelineEndSeconds';
+const TimelineRangePreset = 'timelineRangePreset';
+const Refresh$1 = 'refresh';
+const ToggleHeadersSection = 'toggleHeadersSection';
+const All$1 = 'all';
+const Tools$1 = 'tools';
+const Network$1 = 'network';
+const Ui$1 = 'ui';
+const Stream$1 = 'stream';
+const Response$1 = 'response';
+const Preview$1 = 'preview';
+const Payload$1 = 'payload';
+const Headers$1 = 'headers';
+const Tokens$1 = 'tokens';
+const Timing$1 = 'timing';
+
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1432,9 +1466,10 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const All$1 = 'All';
-const CloseDetails$1 = 'Close details';
+const All = 'All';
+const CloseDetails = 'Close details';
 const Copy = 'Copy';
+const CachedTokens = 'Cached Tokens';
 const DetailSections = 'Detail sections';
 const Duration$1 = 'Time';
 const Ended = 'Ended';
@@ -1442,34 +1477,48 @@ const FailedToLoadChatDebugSession = 'Failed to load chat debug session "{PH1}".
 const FailedToLoadChatDebugSessionWithError = 'Failed to load chat debug session "{PH1}": {PH2}';
 const FilterEvents = 'Filter events';
 const FromSeconds = 'from {PH1}s';
+const General$1 = 'General';
+const Headers = 'Headers';
 const ImageCouldNotBeLoaded = 'image could not be loaded';
-const InvalidSessionId = 'Invalid session id';
-const InvalidUriEncoding = 'Invalid URI encoding';
-const InvalidUriFormat = 'Invalid URI format';
+const InputTokens = 'Input Tokens';
+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 Network$1 = 'Network';
+const MissingUri$1 = 'Missing URI';
+const Network = 'Network';
 const NoChatSessionFound = 'No chat session found for sessionId "{PH1}".';
 const NoEventsFound = 'No events have been found';
 const NoEventsFoundMatching = 'No events found matching {PH1}';
 const NoToolCallEvents = 'No tool call events.';
-const Payload$1 = 'Payload';
-const Preview$1 = 'Preview';
-const Refresh$1 = 'Refresh';
+const OpenInNewTab = 'Open in New Tab';
+const OutputTokens = 'Output Tokens';
+const Payload = 'Payload';
+const Preview = 'Preview';
+const Refresh = 'Refresh';
 const RefreshEvents = 'Refresh events';
 const ResetColumns = 'Reset columns';
-const Response$1 = 'Response';
+const RequestHeaders$1 = 'Request Headers';
+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 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 StatusCode = 'Status Code';
+const Stream = 'Stream';
+const TableSummaryRequestPlural = '{PH1} requests';
+const TableSummaryRequestSingular = '{PH1} request';
+const TableSummaryFinish = 'Finish {PH1}';
+const Timing = 'Timing';
+const Tokens = 'Tokens';
 const ToSeconds = 'to {PH1}s';
-const Tools$1 = 'Tools';
+const Tools = 'Tools';
 const Type$1 = 'Type';
-const Ui$1 = 'UI';
+const Ui = 'UI';
 const UnableToLoadDebugSessionInvalidUri = 'Unable to load debug session: invalid URI "{PH1}". Expected format: chat-debug://<sessionId>.';
 const UnableToLoadDebugSessionMissingUri = 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
 const WindowSummary = 'Window {PH1}-{PH2} of {PH3}';
@@ -1477,14 +1526,20 @@ const WindowSummary = 'Window {PH1}-{PH2} of {PH3}';
 const copy = () => {
   return i18nString(Copy);
 };
+const openInNewTab = () => {
+  return i18nString(OpenInNewTab);
+};
+const cachedTokens = () => {
+  return i18nString(CachedTokens);
+};
 const status = () => {
   return i18nString(Status$2);
 };
 const all = () => {
-  return i18nString(All$1);
+  return i18nString(All);
 };
 const closeDetails = () => {
-  return i18nString(CloseDetails$1);
+  return i18nString(CloseDetails);
 };
 const detailSections = () => {
   return i18nString(DetailSections);
@@ -1514,26 +1569,35 @@ const fromSeconds = seconds => {
     PH1: seconds
   });
 };
+const general = () => {
+  return i18nString(General$1);
+};
+const headers = () => {
+  return i18nString(Headers);
+};
 const invalidSessionId = () => {
-  return i18nString(InvalidSessionId);
+  return i18nString(InvalidSessionId$1);
 };
 const imageCouldNotBeLoaded = () => {
   return i18nString(ImageCouldNotBeLoaded);
 };
+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);
 };
 const network = () => {
-  return i18nString(Network$1);
+  return i18nString(Network);
 };
 const noChatSessionFound = sessionId => {
   return i18nString(NoChatSessionFound, {
@@ -1552,22 +1616,43 @@ const noToolCallEvents = () => {
   return i18nString(NoToolCallEvents);
 };
 const preview = () => {
-  return i18nString(Preview$1);
+  return i18nString(Preview);
 };
 const payload = () => {
-  return i18nString(Payload$1);
+  return i18nString(Payload);
+};
+const outputTokens = () => {
+  return i18nString(OutputTokens);
 };
 const refresh$1 = () => {
-  return i18nString(Refresh$1);
+  return i18nString(Refresh);
 };
 const refreshEvents$1 = () => {
   return i18nString(RefreshEvents);
 };
+const requestHeaders = () => {
+  return i18nString(RequestHeaders$1);
+};
+const requestMethod = () => {
+  return i18nString(RequestMethod);
+};
+const requestUrl = () => {
+  return i18nString(RequestUrl);
+};
+const responseHeaders = () => {
+  return i18nString(ResponseHeaders$1);
+};
+const responseHeadersInfo = () => {
+  return i18nString(ResponseHeadersInfo);
+};
 const resetColumns = () => {
   return i18nString(ResetColumns);
 };
 const response = () => {
-  return i18nString(Response$1);
+  return i18nString(Response);
+};
+const size = () => {
+  return i18nString(Size$1);
 };
 const secondsRange = (start, end) => {
   return i18nString(SecondsRange, {
@@ -1579,15 +1664,25 @@ const started = () => {
   return i18nString(Started);
 };
 const stream = () => {
-  return i18nString(Stream$1);
+  return i18nString(Stream);
+};
+const statusCode = () => {
+  return i18nString(StatusCode);
 };
 const timing = () => {
-  return i18nString(Timing$1);
+  return i18nString(Timing);
+};
+const tokens = () => {
+  return i18nString(Tokens);
+};
+const tableSummaryRequests = eventCount => {
+  return i18nString(eventCount === 1 ? TableSummaryRequestSingular : TableSummaryRequestPlural, {
+    PH1: String(eventCount)
+  });
 };
-const tableSummary = (eventCount, duration) => {
-  return i18nString(eventCount === 1 ? TableSummarySingular : TableSummaryPlural, {
-    PH1: String(eventCount),
-    PH2: duration
+const tableSummaryFinish = duration => {
+  return i18nString(TableSummaryFinish, {
+    PH1: duration
   });
 };
 const toSeconds = seconds => {
@@ -1596,13 +1691,13 @@ const toSeconds = seconds => {
   });
 };
 const tools = () => {
-  return i18nString(Tools$1);
+  return i18nString(Tools);
 };
 const type = () => {
   return i18nString(Type$1);
 };
 const ui = () => {
-  return i18nString(Ui$1);
+  return i18nString(Ui);
 };
 const unableToLoadDebugSessionInvalidUri = uri => {
   return i18nString(UnableToLoadDebugSessionInvalidUri, {
@@ -1620,159 +1715,66 @@ const windowSummary = (start, end, duration) => {
   });
 };
 
-const Filter = 'filter';
-const EventCategoryFilter = 'eventCategoryFilter';
-const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
-const ShowInputEvents = 'showInputEvents';
-const ShowResponsePartEvents = 'showResponsePartEvents';
-const UseDevtoolsLayout = 'useDevtoolsLayout';
-const SelectedEventIndex = 'selectedEventIndex';
-const CloseDetails = 'closeDetails';
-const DetailTab = 'detailTab';
-const TimelineStartSeconds = 'timelineStartSeconds';
-const TimelineEndSeconds = 'timelineEndSeconds';
-const TimelineRangePreset = 'timelineRangePreset';
-const Refresh = 'refresh';
-const All = 'all';
-const Tools = 'tools';
-const Network = 'network';
-const Ui = 'ui';
-const Stream = 'stream';
-const Response = 'response';
-const Preview = 'preview';
-const Payload = 'payload';
-const Timing = 'timing';
-
-const isDetailTab = value => {
-  return value === Response || value === Preview || value === Payload || value === Timing;
-};
-
-const getSafeSelectedDetailTab = selectedDetailTab => {
-  return isDetailTab(selectedDetailTab) ? selectedDetailTab : Response;
-};
-
-const hasTimingDetails = event => {
-  const hasDuration = typeof event.duration === 'number' || typeof event.durationMs === 'number';
-  const hasStart = event.started !== undefined || event.startTime !== undefined || event.startTimestamp !== undefined;
-  const hasEnd = event.ended !== undefined || event.endTime !== undefined || event.endTimestamp !== undefined;
-  return hasDuration || hasStart && hasEnd;
-};
-
-const createDetailTabs = (selectedDetailTab = Response, event) => {
-  const hasTimingTab = event ? hasTimingDetails(event) : true;
-  const safeSelectedDetailTab = getSafeSelectedDetailTab(selectedDetailTab);
-  const normalizedSelectedDetailTab = hasTimingTab || safeSelectedDetailTab !== Timing ? safeSelectedDetailTab : Response;
-  const detailTabs = [{
-    isSelected: normalizedSelectedDetailTab === Preview,
-    label: preview(),
-    name: Preview
-  }, {
-    isSelected: normalizedSelectedDetailTab === Payload,
-    label: payload(),
-    name: Payload
-  }, {
-    isSelected: normalizedSelectedDetailTab === Response,
-    label: response(),
-    name: Response
-  }];
-  if (hasTimingTab) {
-    detailTabs.push({
-      isSelected: normalizedSelectedDetailTab === Timing,
-      label: timing(),
-      name: Timing
-    });
-  }
-  return detailTabs;
-};
-
-const getSelectedDetailTab = detailTabs => {
-  const selectedDetailTab = detailTabs.find(detailTab => detailTab.isSelected);
-  if (selectedDetailTab) {
-    return selectedDetailTab.name;
-  }
-  const responseTab = detailTabs.find(detailTab => detailTab.name === Response);
-  if (responseTab) {
-    return responseTab.name;
-  }
-  return detailTabs[0]?.name ?? Response;
-};
-
-const hasDetailTab = (detailTabs, value) => {
-  return detailTabs.some(detailTab => detailTab.name === value);
-};
-
-const selectDetailTab$1 = (detailTabs, selectedDetailTab) => {
-  if (!hasDetailTab(detailTabs, selectedDetailTab)) {
-    return detailTabs;
-  }
-  return detailTabs.map(detailTab => {
-    return {
-      ...detailTab,
-      isSelected: detailTab.name === selectedDetailTab
-    };
-  });
-};
-
 const getEventCategoryFilterLabel = eventCategoryFilter => {
   switch (eventCategoryFilter) {
-    case Network:
+    case Network$1:
       return network();
-    case Stream:
+    case Stream$1:
       return stream();
-    case Tools:
+    case Tools$1:
       return tools();
-    case Ui:
+    case Ui$1:
       return ui();
     default:
       return all();
   }
 };
 
-const eventCategoryFilters = [All, Tools, Network, Ui, Stream];
-const normalizeSelectedEventCategoryFilters = (selectedEventCategoryFilter = All) => {
+const eventCategoryFilters = [All$1, Tools$1, Network$1, Ui$1, Stream$1];
+const normalizeSelectedEventCategoryFilters = (selectedEventCategoryFilter = All$1) => {
   const selectedEventCategoryFilters = Array.isArray(selectedEventCategoryFilter) ? selectedEventCategoryFilter : [selectedEventCategoryFilter];
   const uniqueSelectedEventCategoryFilters = [...new Set(selectedEventCategoryFilters)];
   const validSelectedEventCategoryFilters = uniqueSelectedEventCategoryFilters.filter(value => {
     return eventCategoryFilters.includes(value);
   });
   if (validSelectedEventCategoryFilters.length === 0) {
-    return [All];
+    return [All$1];
   }
-  if (validSelectedEventCategoryFilters.includes(All)) {
-    return [All];
+  if (validSelectedEventCategoryFilters.includes(All$1)) {
+    return [All$1];
   }
   return validSelectedEventCategoryFilters;
 };
-const createCategoryFilters$1 = (selectedEventCategoryFilter = All) => {
+const createCategoryFilters$1 = (selectedEventCategoryFilter = All$1) => {
   const selectedEventCategoryFilters = normalizeSelectedEventCategoryFilters(selectedEventCategoryFilter);
   return [{
-    isSelected: selectedEventCategoryFilters.includes(All),
+    isSelected: selectedEventCategoryFilters.includes(All$1),
     label: all(),
-    name: All
+    name: All$1
   }, {
-    isSelected: selectedEventCategoryFilters.includes(Tools),
+    isSelected: selectedEventCategoryFilters.includes(Tools$1),
     label: tools(),
-    name: Tools
+    name: Tools$1
   }, {
-    isSelected: selectedEventCategoryFilters.includes(Network),
+    isSelected: selectedEventCategoryFilters.includes(Network$1),
     label: network(),
-    name: Network
+    name: Network$1
   }, {
-    isSelected: selectedEventCategoryFilters.includes(Ui),
+    isSelected: selectedEventCategoryFilters.includes(Ui$1),
     label: ui(),
-    name: Ui
+    name: Ui$1
   }, {
-    isSelected: selectedEventCategoryFilters.includes(Stream),
+    isSelected: selectedEventCategoryFilters.includes(Stream$1),
     label: stream(),
-    name: Stream
+    name: Stream$1
   }];
 };
 
-const createCategoryFilters = (selectedEventCategoryFilter = All) => {
+const createCategoryFilters = (selectedEventCategoryFilter = All$1) => {
   return createCategoryFilters$1(selectedEventCategoryFilter);
 };
 const isEventCategoryFilter = value => {
-  return value === All || value === Tools || value === Network || value === Ui || value === Stream;
+  return value === All$1 || value === Tools$1 || value === Network$1 || value === Ui$1 || value === Stream$1;
 };
 const getSelectedEventCategoryFilters = categoryFilters => {
   const selectedCategoryFilters = categoryFilters.filter(categoryFilter => categoryFilter.isSelected);
@@ -1784,7 +1786,7 @@ const getSelectedEventCategoryFilter = categoryFilters => {
   if (selectedEventCategoryFilters.length === 1) {
     return selectedEventCategoryFilters[0];
   }
-  return All;
+  return All$1;
 };
 const selectCategoryFilters = (categoryFilters, selectedEventCategoryFilters) => {
   const normalizedSelectedEventCategoryFilters = normalizeSelectedEventCategoryFilters(selectedEventCategoryFilters.filter(value => isEventCategoryFilter(value)));
@@ -1803,59 +1805,82 @@ const selectCategoryFilter = (categoryFilters, selectedEventCategoryFilter, addi
   if (!isEventCategoryFilter(selectedEventCategoryFilter)) {
     return categoryFilters;
   }
-  if (!additive || selectedEventCategoryFilter === All) {
+  if (!additive || selectedEventCategoryFilter === All$1) {
     return selectCategoryFilters(categoryFilters, [selectedEventCategoryFilter]);
   }
-  const selectedEventCategoryFilters = getSelectedEventCategoryFilters(categoryFilters).filter(value => value !== All);
+  const selectedEventCategoryFilters = getSelectedEventCategoryFilters(categoryFilters).filter(value => value !== All$1);
   const nextSelectedEventCategoryFilters = selectedEventCategoryFilters.includes(selectedEventCategoryFilter) ? selectedEventCategoryFilters.filter(value => value !== selectedEventCategoryFilter) : [...selectedEventCategoryFilters, selectedEventCategoryFilter];
   if (nextSelectedEventCategoryFilters.length === 0) {
-    return selectCategoryFilters(categoryFilters, [All]);
+    return selectCategoryFilters(categoryFilters, [All$1]);
   }
   return selectCategoryFilters(categoryFilters, nextSelectedEventCategoryFilters);
 };
 
-const RE_SPACE = /\s+/;
-const tokenToEventCategoryFilter = new Map([['@tools', Tools], ['@network', Network], ['@ui', Ui], ['@stream', Stream]]);
-const parseFilterValue = filterValue => {
-  const normalizedFilter = filterValue.trim().toLowerCase();
-  if (!normalizedFilter) {
+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 hasDetailTab = (detailTabs, value) => {
+  return detailTabs.some(detailTab => detailTab.name === value);
+};
+
+const selectDetailTab$1 = (detailTabs, selectedDetailTab) => {
+  if (!hasDetailTab(detailTabs, selectedDetailTab)) {
+    return detailTabs;
+  }
+  return detailTabs.map(detailTab => {
     return {
-      eventCategoryFilter: All,
-      filterText: ''
+      ...detailTab,
+      isSelected: detailTab.name === selectedDetailTab
     };
-  }
-  const parts = normalizedFilter.split(RE_SPACE);
-  const eventCategoryFilter = parts.map(part => tokenToEventCategoryFilter.get(part)).find(Boolean) || All;
-  const filterText = parts.filter(part => !tokenToEventCategoryFilter.has(part)).join(' ');
-  return {
-    eventCategoryFilter,
-    filterText
-  };
+  });
 };
 
 const Type = 'type';
 const Method = 'method';
 const Duration = 'duration';
 const Status$1 = 'status';
-const tableColumnNames = [Type, Method, Status$1, Duration];
-const createTableColumns = () => {
-  return [{
-    isVisible: true,
-    label: type(),
-    name: Type
-  }, {
-    isVisible: true,
+const Size = 'size';
+const tableColumnNames = [Type, Method, Status$1, Size, Duration];
+const tableColumnDefinitions = {
+  [Duration]: {
+    defaultWidth: 110,
+    label: duration(),
+    minimumWidth: 80
+  },
+  [Method]: {
+    defaultWidth: 90,
     label: method(),
-    name: Method
-  }, {
-    isVisible: true,
+    minimumWidth: 56
+  },
+  [Size]: {
+    defaultWidth: 100,
+    label: size(),
+    minimumWidth: 80
+  },
+  [Status$1]: {
+    defaultWidth: 110,
     label: status(),
-    name: Status$1
-  }, {
-    isVisible: true,
-    label: duration(),
-    name: Duration
-  }];
+    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 => {
@@ -1871,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) {
@@ -1888,6 +1945,8 @@ const getTableColumnLabel = (tableColumns, name) => {
       return duration();
     case Method:
       return method();
+    case Size:
+      return size();
     case Status$1:
       return status();
     case Type:
@@ -1897,52 +1956,41 @@ const getTableColumnLabel = (tableColumns, name) => {
   }
 };
 
-const defaultTableColumnWidths = {
-  duration: 110,
-  method: 90,
-  status: 110,
-  type: 260
+const getMainWidth = state => {
+  return Math.max(0, state.width - state.horizontalPadding);
 };
-
-const defaultTableWidth = 480;
-const minTableWidth = 240;
-const minDetailsWidth = 280;
-const sashWidth = 8;
-const viewPadding = 8;
-const timelineHorizontalPadding = 10;
-const horizontalPadding = viewPadding * 2;
-const leftPadding = viewPadding;
-const getMainWidth = width => {
-  return Math.max(0, width - horizontalPadding);
+const getNarrowMainWidthBreakpoint = state => {
+  return Math.max(0, state.mediumBreakpoint - state.horizontalPadding);
 };
-const clampTableWidth = (width, tableWidth) => {
-  const mainWidth = getMainWidth(width);
-  const maxTableWidth = Math.max(0, mainWidth - minDetailsWidth - sashWidth);
-  const minClampedTableWidth = Math.min(minTableWidth, maxTableWidth);
+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);
+  const minClampedTableWidth = Math.min(state.minTableWidth, maxTableWidth);
   return Math.max(minClampedTableWidth, Math.min(tableWidth, maxTableWidth));
 };
-const getDetailsWidth = (width, tableWidth) => {
-  const mainWidth = getMainWidth(width);
-  const clampedTableWidth = clampTableWidth(width, tableWidth);
-  return Math.max(0, mainWidth - clampedTableWidth - sashWidth);
+const getDetailsWidth = (state, tableWidth) => {
+  const mainWidth = getMainWidth(state);
+  const clampedTableWidth = clampTableWidth(state, tableWidth);
+  return Math.max(0, mainWidth - clampedTableWidth - state.sashWidth);
 };
-const getTableWidthFromClientX = (viewX, width, clientX) => {
-  const nextTableWidth = clientX - viewX - leftPadding;
-  return clampTableWidth(width, nextTableWidth);
+const getBalancedSplitTableWidth = state => {
+  const mainWidth = getMainWidth(state);
+  const balancedTableWidth = Math.floor(Math.max(0, mainWidth - state.sashWidth) / 2);
+  return clampTableWidth(state, balancedTableWidth);
 };
-
-const minimumTableColumnWidths = {
-  [Duration]: 80,
-  [Method]: 56,
-  [Status$1]: 56,
-  [Type]: 80
+const shouldUseBalancedSplitTableWidth = state => {
+  return !!state.selectedEvent && state.useDevtoolsLayout && !state.tableWidthManuallyResized && isNarrowSplitLayout(state);
 };
-const getMinimumTableColumnWidth = column => {
-  return minimumTableColumnWidths[column];
+const getTableWidthFromClientX = (state, clientX) => {
+  const nextTableWidth = clientX - state.x - state.leftPadding;
+  return clampTableWidth(state, nextTableWidth);
 };
 
-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: [],
@@ -1959,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;
@@ -1981,28 +2029,25 @@ const getTableColumnLayout = (tableWidth, visibleTableColumns, tableColumnWidths
   };
 };
 
-const getResizedTableColumnWidths = (width, tableWidth, visibleTableColumns, tableColumnWidths, viewX, clientX, resizerDownId) => {
-  const clampedTableWidth = clampTableWidth(width, tableWidth);
-  const layout = getTableColumnLayout(clampedTableWidth, visibleTableColumns, tableColumnWidths);
+const getResizedTableColumnWidths = (state, visibleTableColumns, tableColumns, clientX, resizerDownId) => {
+  const clampedTableWidth = clampTableWidth(state, state.tableWidth);
+  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 - viewX - leftPadding - precedingWidth;
+  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) => {
-  return first.type === second.type && first.method === second.method && first.duration === second.duration && first.status === second.status;
+  return first.type === second.type && first.method === second.method && first.duration === second.duration && first.size === second.size && first.status === second.status;
 };
 
 const isFiniteNumber = value => {
@@ -2014,13 +2059,20 @@ const isTableColumnWidths = value => {
     return false;
   }
   const record = value;
-  return isFiniteNumber(record.type) && isFiniteNumber(record.method) && isFiniteNumber(record.duration) && isFiniteNumber(record.status);
+  return isFiniteNumber(record.type) && isFiniteNumber(record.method) && isFiniteNumber(record.duration) && isFiniteNumber(record.size) && isFiniteNumber(record.status);
 };
 
-const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
+const validEventCategoryFilters = new Set([All$1, Network$1, Stream$1, Tools$1, Ui$1]);
 const isSavedState = value => {
   return typeof value === 'object' && value !== null;
 };
+const isLegacyTableColumnWidths = value => {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+  const record = value;
+  return typeof record.duration === 'number' && Number.isFinite(record.duration) && typeof record.method === 'number' && Number.isFinite(record.method) && typeof record.status === 'number' && Number.isFinite(record.status) && typeof record.type === 'number' && Number.isFinite(record.type) && !('size' in record);
+};
 const restoreCategoryFilters = (savedState, currentCategoryFilters) => {
   if (Array.isArray(savedState.eventCategoryFilters)) {
     return selectCategoryFilters(currentCategoryFilters, savedState.eventCategoryFilters.filter(value => typeof value === 'string'));
@@ -2028,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) => {
@@ -2053,10 +2102,33 @@ const restoreVisibleTableColumns = (savedState, currentTableColumns) => {
     return currentTableColumns;
   }
   const visibleTableColumns = savedState.visibleTableColumns.filter(value => typeof value === 'string');
+  if (isLegacyTableColumnWidths(savedState.tableColumnWidths)) {
+    const savedVisibleColumns = new Set(visibleTableColumns);
+    const visibleColumnsWithDefaults = currentTableColumns.filter(column => savedVisibleColumns.has(column.name) || column.name === 'size').map(column => column.name);
+    return getTableColumnsWithVisibility(currentTableColumns, visibleColumnsWithDefaults);
+  }
   return getTableColumnsWithVisibility(currentTableColumns, visibleTableColumns);
 };
-const restoreTableColumnWidths = (savedState, currentTableColumnWidths) => {
-  return isTableColumnWidths(savedState.tableColumnWidths) ? savedState.tableColumnWidths : currentTableColumnWidths;
+const restoreTableColumns = (savedState, currentTableColumns) => {
+  const tableColumnsWithVisibility = restoreVisibleTableColumns(savedState, currentTableColumns);
+  const {
+    tableColumnWidths: savedTableColumnWidths
+  } = savedState;
+  if (isTableColumnWidths(savedTableColumnWidths)) {
+    return setTableColumnWidths(tableColumnsWithVisibility, savedTableColumnWidths);
+  }
+  if (isLegacyTableColumnWidths(savedTableColumnWidths)) {
+    const legacyTableColumnWidths = savedTableColumnWidths;
+    const currentTableColumnWidths = getTableColumnWidths(currentTableColumns);
+    return setTableColumnWidths(tableColumnsWithVisibility, {
+      duration: legacyTableColumnWidths.duration,
+      method: legacyTableColumnWidths.method,
+      size: currentTableColumnWidths.size,
+      status: legacyTableColumnWidths.status,
+      type: legacyTableColumnWidths.type
+    });
+  }
+  return tableColumnsWithVisibility;
 };
 const restoreSavedState = (state, savedState) => {
   if (!isSavedState(savedState)) {
@@ -2068,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)
   };
@@ -2084,6 +2155,172 @@ const {
   wrapGetter
 } = create$1();
 
+const getSafeSelectedDetailTab = selectedDetailTab => {
+  return isDetailTab(selectedDetailTab) ? selectedDetailTab : Response$1;
+};
+
+const isHeadersRecord$1 = value => {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const hasHeadersDetails = event => {
+  if (event.type !== 'ai-request') {
+    return false;
+  }
+  if (isHeadersRecord$1(event.headers)) {
+    return true;
+  }
+  return isHeadersRecord$1(event.endValue) && isHeadersRecord$1(event.endValue.headers);
+};
+
+const hasTimingDetails = event => {
+  const hasDuration = typeof event.duration === 'number' || typeof event.durationMs === 'number';
+  const hasStart = event.started !== undefined || event.startTime !== undefined || event.startTimestamp !== undefined;
+  const hasEnd = event.ended !== undefined || event.endTime !== undefined || event.endTimestamp !== undefined;
+  return hasDuration || hasStart && hasEnd;
+};
+
+const getEndValueResponseData = event => {
+  const endValue = event.endValue;
+  if (!endValue || endValue.value === undefined) {
+    return undefined;
+  }
+  return endValue.value;
+};
+const getMergedResponseData = event => {
+  const {
+    responseEvent
+  } = event;
+  if (!responseEvent || typeof responseEvent !== 'object' || typeof responseEvent.type !== 'string') {
+    return undefined;
+  }
+  const mergedResponseEvent = responseEvent;
+  if (mergedResponseEvent.value !== undefined) {
+    return mergedResponseEvent.value;
+  }
+  return responseEvent;
+};
+const getResponseData = event => {
+  const endValueResponseData = getEndValueResponseData(event);
+  if (endValueResponseData !== undefined) {
+    return endValueResponseData;
+  }
+  return getMergedResponseData(event);
+};
+const getResponseEvent = event => {
+  const responseData = getResponseData(event);
+  if (responseData !== undefined) {
+    return responseData;
+  }
+  return event;
+};
+
+const isObject = value => {
+  return typeof value === 'object' && value !== null;
+};
+const getNumber = (value, ...keys) => {
+  for (const key of keys) {
+    if (typeof value[key] === 'number') {
+      return value[key];
+    }
+  }
+  return undefined;
+};
+const getUsage = event => {
+  const responseEvent = getResponseEvent(event);
+  if (isObject(responseEvent) && isObject(responseEvent.usage)) {
+    return responseEvent.usage;
+  }
+  if (isObject(responseEvent) && isObject(responseEvent.value) && isObject(responseEvent.value.usage)) {
+    return responseEvent.value.usage;
+  }
+  return undefined;
+};
+const getTokenUsageDetails = event => {
+  const usage = getUsage(event);
+  if (!usage) {
+    return undefined;
+  }
+  const inputTokens = getNumber(usage, 'input_tokens', 'inputTokens');
+  const outputTokens = getNumber(usage, 'output_tokens', 'outputTokens');
+  let inputTokenDetails;
+  if (isObject(usage.input_tokens_details)) {
+    inputTokenDetails = usage.input_tokens_details;
+  } else if (isObject(usage.inputTokensDetails)) {
+    inputTokenDetails = usage.inputTokensDetails;
+  }
+  const cachedTokens = inputTokenDetails ? getNumber(inputTokenDetails, 'cached_tokens', 'cachedTokens') : getNumber(usage, 'cached_tokens', 'cachedTokens');
+  if (inputTokens === undefined && outputTokens === undefined && cachedTokens === undefined) {
+    return undefined;
+  }
+  return {
+    ...(cachedTokens === undefined ? undefined : {
+      cachedTokens
+    }),
+    ...(inputTokens === undefined ? undefined : {
+      inputTokens
+    }),
+    ...(outputTokens === undefined ? undefined : {
+      outputTokens
+    })
+  };
+};
+
+const hasTokenUsageDetails = event => {
+  return getTokenUsageDetails(event) !== undefined;
+};
+
+const createDetailTabs = (selectedDetailTab = Response$1, event) => {
+  const hasHeadersTab = event ? hasHeadersDetails(event) : false;
+  const hasTokensTab = event ? hasTokenUsageDetails(event) : false;
+  const hasTimingTab = event ? hasTimingDetails(event) : true;
+  const safeSelectedDetailTab = getSafeSelectedDetailTab(selectedDetailTab);
+  let normalizedSelectedDetailTab = safeSelectedDetailTab;
+  if (!hasHeadersTab && normalizedSelectedDetailTab === Headers$1) {
+    normalizedSelectedDetailTab = Response$1;
+  }
+  if (!hasTokensTab && normalizedSelectedDetailTab === Tokens$1) {
+    normalizedSelectedDetailTab = Response$1;
+  }
+  if (!hasTimingTab && normalizedSelectedDetailTab === Timing$1) {
+    normalizedSelectedDetailTab = Response$1;
+  }
+  const detailTabs = [{
+    isSelected: normalizedSelectedDetailTab === Preview$1,
+    label: preview(),
+    name: Preview$1
+  }, {
+    isSelected: normalizedSelectedDetailTab === Payload$1,
+    label: payload(),
+    name: Payload$1
+  }, {
+    isSelected: normalizedSelectedDetailTab === Response$1,
+    label: response(),
+    name: Response$1
+  }];
+  if (hasHeadersTab) {
+    detailTabs.push({
+      isSelected: normalizedSelectedDetailTab === Headers$1,
+      label: headers(),
+      name: Headers$1
+    });
+  }
+  if (hasTokensTab) {
+    detailTabs.push({
+      isSelected: normalizedSelectedDetailTab === Tokens$1,
+      label: tokens(),
+      name: Tokens$1
+    });
+  }
+  if (hasTimingTab) {
+    detailTabs.push({
+      isSelected: normalizedSelectedDetailTab === Timing$1,
+      label: timing(),
+      name: Timing$1
+    });
+  }
+  return detailTabs;
+};
+
 const toTimeNumber = value => {
   if (typeof value === 'number' && Number.isFinite(value)) {
     return value;
@@ -2114,6 +2351,10 @@ const getEventsWithTime = events => {
   });
 };
 
+const clamp = (value, minimum, maximum) => {
+  return Math.max(minimum, Math.min(value, maximum));
+};
+
 const parseTimelineSeconds = value => {
   const trimmed = value.trim();
   if (!trimmed) {
@@ -2142,8 +2383,10 @@ const getNormalizedRange = (durationSeconds, startValue, endValue) => {
   }
   const rawStart = parsedStart ?? 0;
   const rawEnd = parsedEnd ?? durationSeconds;
-  const normalizedStart = Math.max(0, Math.min(durationSeconds, Math.min(rawStart, rawEnd)));
-  const normalizedEnd = Math.max(0, Math.min(durationSeconds, Math.max(rawStart, rawEnd)));
+  const rangeStart = Math.min(rawStart, rawEnd);
+  const rangeEnd = Math.max(rawStart, rawEnd);
+  const normalizedStart = clamp(rangeStart, 0, durationSeconds);
+  const normalizedEnd = clamp(rangeEnd, 0, durationSeconds);
   return {
     endSeconds: roundSeconds(normalizedEnd),
     hasSelection: true,
@@ -2217,11 +2460,21 @@ const getTimelineInfo = (events, startValue, endValue) => {
 };
 
 const createDefaultState = () => {
+  const defaultTableWidth = 480;
+  const minTableWidth = 240;
+  const minDetailsWidth = 280;
+  const sashWidth = 4;
+  const viewPadding = 8;
+  const timelineHorizontalPadding = 10;
+  const horizontalPadding = viewPadding * 2;
+  const leftPadding = viewPadding;
   return {
     assetDir: '',
     categoryFilters: createCategoryFilters(),
+    collapsedHeaderSections: [],
     databaseName: 'lvce-chat-view-sessions',
     dataBaseVersion: 2,
+    defaultTableWidth,
     detailTabs: createDetailTabs(),
     devtoolsRootGap: 4,
     devtoolsTimelineHeight: 88,
@@ -2232,9 +2485,13 @@ const createDefaultState = () => {
     filterValue: '',
     focus: 0,
     height: 0,
+    horizontalPadding,
     initial: false,
     largeBreakpoint: 900,
+    leftPadding,
     mediumBreakpoint: 600,
+    minDetailsWidth,
+    minTableWidth,
     platform: 0,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
@@ -2242,6 +2499,7 @@ const createDefaultState = () => {
     previewTextScrollBarHandleOffset: 0,
     previewTextScrollBarPointerActive: false,
     sashPointerActive: false,
+    sashWidth,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null,
@@ -2252,8 +2510,8 @@ const createDefaultState = () => {
     showResponsePartEvents: false,
     sortColumn: '',
     sortDescending: false,
+    summaries: [],
     tableColumns: createTableColumns(),
-    tableColumnWidths: defaultTableColumnWidths,
     tableDeltaY: 0,
     tableMaxLineY: 0,
     tableMinLineY: 0,
@@ -2261,10 +2519,12 @@ const createDefaultState = () => {
     tableScrollBarHandleOffset: 0,
     tableScrollBarPointerActive: false,
     tableWidth: defaultTableWidth,
+    tableWidthManuallyResized: false,
     timelineEndSeconds: '',
     timelineEvents: [],
     timelineFilterDescription: '',
     timelineHeight: 81,
+    timelineHorizontalPadding,
     timelineHoverPercent: null,
     timelineHoverSeconds: '',
     timelineInfo: emptyTimelineInfo,
@@ -2275,6 +2535,7 @@ const createDefaultState = () => {
     uid: 0,
     uri: '',
     useDevtoolsLayout: true,
+    viewPadding,
     width: 0,
     x: 0,
     y: 0
@@ -2295,7 +2556,6 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '
     platform,
     sessionId,
     sessionIdIndexName,
-    tableColumns: [],
     uid,
     uri,
     width,
@@ -2312,7 +2572,7 @@ const RenderFocusContext = 4;
 const RenderFocus = 5;
 
 const diff = (oldState, newState) => {
-  if (oldState.categoryFilters !== newState.categoryFilters || oldState.detailTabs !== newState.detailTabs || oldState.errorMessage !== newState.errorMessage || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.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 [];
@@ -2349,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;
@@ -2454,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) => {
@@ -2538,20 +2838,20 @@ const isUiEvent = event => {
 
 const matchesSingleEventCategoryFilter = (event, eventCategoryFilter) => {
   switch (eventCategoryFilter) {
-    case Network:
+    case Network$1:
       return isNetworkEvent(event);
-    case Stream:
+    case Stream$1:
       return isStreamEvent(event);
-    case Tools:
+    case Tools$1:
       return isToolEvent(event);
-    case Ui:
+    case Ui$1:
       return isUiEvent(event);
     default:
       return true;
   }
 };
 const matchesEventCategoryFilter = (event, eventCategoryFilters) => {
-  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All)) {
+  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All$1)) {
     return true;
   }
   return eventCategoryFilters.some(eventCategoryFilter => matchesSingleEventCategoryFilter(event, eventCategoryFilter));
@@ -2560,34 +2860,46 @@ 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 ? 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;
   }
   return filteredByCategory.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
 };
 
+const formatDurationSeconds = value => {
+  return `${value.toFixed(1)}s`;
+};
+
+const formatDurationText = durationMs => {
+  if (durationMs >= 1000) {
+    return formatDurationSeconds(durationMs / 1000);
+  }
+  return `${durationMs}ms`;
+};
 const getDurationText = event => {
+  if (event.time) {
+    return event.time;
+  }
   const explicitDuration = event.durationMs ?? event.duration;
   if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
-    return `${explicitDuration}ms`;
+    return formatDurationText(explicitDuration);
   }
   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`;
+  return formatDurationText(end - start);
 };
 
 const getEventTableDurationText = event => {
   const durationText = getDurationText(event);
   if (!durationText.endsWith('ms')) {
+    if (durationText.endsWith('s')) {
+      return `${durationText.slice(0, -1)} s`;
+    }
     return durationText;
   }
   return `${durationText.slice(0, -2)} ms`;
@@ -2686,10 +2998,19 @@ const getStatusText = event => {
   return hasErrorStatus(event) ? '400' : '200';
 };
 
+const getSizeSortValue = event => {
+  const rawSize = event.size;
+  if (typeof rawSize !== 'number' || !Number.isFinite(rawSize)) {
+    return '0000000000000000';
+  }
+  return String(Math.max(0, Math.trunc(rawSize))).padStart(16, '0');
+};
 const getEventTableColumnValue = (event, column) => {
   switch (column) {
     case Duration:
       return getEventTableDurationText(event);
+    case Size:
+      return getSizeSortValue(event);
     case Status$1:
       return getStatusText(event);
     case Type:
@@ -2727,15 +3048,57 @@ const sortEventsByTableColumn = (events, sortColumn, 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 getCurrentEvents$1 = state => {
+  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);
+
+const getSelectedDetailTab = detailTabs => {
+  const selectedDetailTab = detailTabs.find(detailTab => detailTab.isSelected);
+  if (selectedDetailTab) {
+    return selectedDetailTab.name;
+  }
+  const responseTab = detailTabs.find(detailTab => detailTab.name === Response$1);
+  if (responseTab) {
+    return responseTab.name;
+  }
+  return detailTabs[0]?.name ?? Response$1;
 };
 
-const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreName, sessionId, _sessionIdIndexName, eventId, type) => {
-  return loadSelectedEvent$1(sessionId, eventId, type);
+const loadSelectedEvent = async ({
+  endEventId,
+  eventId,
+  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);
+    // @ts-ignore
+    return {
+      ...raw,
+      endValue: end
+    };
+  }
+  return raw;
 };
 
 const mergeSelectedEventDetails = (selectedEvent, selectedEventDetails) => {
@@ -2747,7 +3110,10 @@ const mergeSelectedEventDetails = (selectedEvent, selectedEventDetails) => {
     responseEvent
   } = selectedEvent;
   if (!requestEvent || !responseEvent || typeof requestEvent !== 'object' || typeof responseEvent !== 'object') {
-    return selectedEventDetails;
+    return {
+      ...selectedEvent,
+      ...selectedEventDetails
+    };
   }
   const selectedEventDetailsType = selectedEventDetails.type;
   const resolvedResponseEvent = selectedEventDetailsType === 'response' || selectedEventDetailsType === 'ai-response-success' ? selectedEventDetails : responseEvent;
@@ -2773,6 +3139,7 @@ const getTableBodyY = (state, hasTimeline) => {
     devtoolsRootGap,
     devtoolsTimelineHeight,
     devtoolsTopHeight,
+    viewPadding,
     y
   } = state;
   return y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
@@ -2783,7 +3150,7 @@ const getTableBodyHeight = (state, eventCount) => {
     return 0;
   }
   const tableBodyY = getTableBodyY(state, true);
-  return Math.max(0, state.height - (tableBodyY - state.y) - viewPadding - devtoolsTableSummaryHeight);
+  return Math.max(0, state.height - (tableBodyY - state.y) - state.viewPadding - devtoolsTableSummaryHeight);
 };
 const getVisibleRowCount = tableBodyHeight => {
   if (tableBodyHeight <= 0) {
@@ -2821,7 +3188,7 @@ const getScrollBarOffset = (deltaY, maxDeltaY, tableBodyHeight, scrollBarHeight)
   return Math.round(deltaY / maxDeltaY * (tableBodyHeight - scrollBarHeight));
 };
 const applyVirtualTableState = state => {
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const deltaY = clampTableDeltaY(state.tableDeltaY, currentEvents.length, tableBodyHeight);
   const minLineY = Math.floor(deltaY / devtoolsTableRowHeight);
@@ -2844,7 +3211,7 @@ const withSelectedEventVisible = state => {
   if (state.selectedEventIndex === null || state.selectedEventIndex < 0) {
     return applyVirtualTableState(state);
   }
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const visibleRowCount = getVisibleRowCount(tableBodyHeight);
   if (visibleRowCount === 0) {
@@ -2861,10 +3228,11 @@ const withSelectedEventVisible = state => {
   return applyVirtualTableState(state);
 };
 
-const svgWidthRegex = /\bwidth=["']([\d.]+)(?:px)?["']/i;
-const svgHeightRegex = /\bheight=["']([\d.]+)(?:px)?["']/i;
-const svgViewBoxRegex = /\bviewBox=["'][^"']*?([\d.]+)\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)["']/i;
-const getBlob = event => {
+const getAttachmentImagePreviewAltText = event => {
+  return typeof event.name === 'string' && event.name ? event.name : 'image preview';
+};
+
+const getAttachmentImagePreviewBlob = event => {
   const {
     blob
   } = event;
@@ -2873,24 +3241,52 @@ const getBlob = event => {
   }
   return undefined;
 };
-const getMimeType = event => {
+
+const getAttachmentImagePreviewMimeType = event => {
   return typeof event.mimeType === 'string' ? event.mimeType : undefined;
 };
-const getAltText = event => {
-  return typeof event.name === 'string' && event.name ? event.name : 'image preview';
-};
-const isImageMimeType = mimeType => {
-  return typeof mimeType === 'string' && mimeType.startsWith('image/');
+
+const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
+const formatBytes = size => {
+  if (!Number.isFinite(size) || size <= 0) {
+    return '0 B';
+  }
+  let value = size;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
+  }
+  if (unitIndex === 0) {
+    return `${Math.trunc(value)} ${units[unitIndex]}`;
+  }
+  const formatted = value >= 10 ? value.toFixed(0) : value.toFixed(1);
+  return `${formatted} ${units[unitIndex]}`;
 };
+
 const formatImageSize = size => {
-  if (size < 1024) {
-    return `${size} B`;
-  }
-  return `${(size / 1024).toFixed(1)} kB`;
+  return formatBytes(size);
 };
+
 const formatImageStats = (width, height, size) => {
   return `${width} × ${height} px · ${formatImageSize(size)}`;
 };
+
+const getRasterImageStats = async blob => {
+  if (typeof createImageBitmap !== 'function') {
+    throw new TypeError('image bitmap decoder is not available');
+  }
+  const bitmap = await createImageBitmap(blob);
+  try {
+    return formatImageStats(bitmap.width, bitmap.height, blob.size);
+  } finally {
+    bitmap.close?.();
+  }
+};
+
+const svgWidthRegex = /\bwidth=["']([\d.]+)(?:px)?["']/i;
+const svgHeightRegex = /\bheight=["']([\d.]+)(?:px)?["']/i;
+const svgViewBoxRegex = /\bviewBox=["'][^"']*?([\d.]+)\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)["']/i;
 const getSvgImageStats = async blob => {
   const text = await blob.text();
   const widthMatch = text.match(svgWidthRegex);
@@ -2898,33 +3294,13 @@ const getSvgImageStats = async blob => {
   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') {
-    const reader = new FileReaderSync();
-    return reader.readAsDataURL(blob);
-  }
-  if (typeof URL.createObjectURL === 'function') {
-    return URL.createObjectURL(blob);
-  }
-  throw new Error('image preview reader is not available');
-};
-const getRasterImageStats = async blob => {
-  if (typeof createImageBitmap !== 'function') {
-    throw new TypeError('image bitmap decoder is not available');
-  }
-  const bitmap = await createImageBitmap(blob);
-  try {
-    return formatImageStats(bitmap.width, bitmap.height, blob.size);
-  } finally {
-    bitmap.close?.();
+  const viewBoxMatch = text.match(svgViewBoxRegex);
+  if (viewBoxMatch) {
+    return formatImageStats(Number(viewBoxMatch[3]), Number(viewBoxMatch[4]), blob.size);
   }
+  return undefined;
 };
+
 const getImageStats = async (blob, mimeType) => {
   if (mimeType === 'image/svg+xml') {
     const svgStats = await getSvgImageStats(blob);
@@ -2935,19 +3311,35 @@ const getImageStats = async (blob, mimeType) => {
   }
   return getRasterImageStats(blob);
 };
+
+const isImageMimeType = mimeType => {
+  return typeof mimeType === 'string' && mimeType.startsWith('image/');
+};
+
+const readBlobAsPreviewUrl = blob => {
+  if (typeof FileReaderSync === 'function') {
+    const reader = new FileReaderSync();
+    return reader.readAsDataURL(blob);
+  }
+  if (typeof URL.createObjectURL === 'function') {
+    return URL.createObjectURL(blob);
+  }
+  throw new Error('image preview reader is not available');
+};
+
 const getAttachmentImagePreview = async event => {
   if (event.type !== 'chat-attachment-added' && event.type !== 'chat-attachment-removed') {
     return undefined;
   }
-  const blob = getBlob(event);
-  const mimeType = getMimeType(event);
+  const blob = getAttachmentImagePreviewBlob(event);
+  const mimeType = getAttachmentImagePreviewMimeType(event);
   if (!blob || !isImageMimeType(mimeType)) {
     return undefined;
   }
   try {
     const stats = await getImageStats(blob, mimeType);
     return {
-      alt: getAltText(event),
+      alt: getAttachmentImagePreviewAltText(event),
       previewType: 'image',
       src: readBlobAsPreviewUrl(blob),
       stats
@@ -2979,12 +3371,12 @@ const withPreparedSelectedEventPreview = async event => {
   return setSelectedEventPreview(event, preview);
 };
 
-const selectEventAtIndexDependencies = {
-  loadSelectedEvent: loadSelectedEvent
-};
-const getCurrentEvents$1 = state => getCurrentEvents$2(state);
-const selectEventAtIndex = async (state, selectedEventIndex, dependencies = selectEventAtIndexDependencies) => {
-  const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
+const selectEventAtIndex = async (state, selectedEventIndex) => {
+  const {
+    detailTabs,
+    sessionId
+  } = state;
+  const selectedDetailTab = getSelectedDetailTab(detailTabs);
   const currentEvents = getCurrentEvents$1(state);
   const selectedEvent = currentEvents[selectedEventIndex];
   if (!selectedEvent) {
@@ -3003,9 +3395,15 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
       selectedEventIndex
     };
   }
-  const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  const selectedEventDetails = await loadSelectedEvent({
+    // @ts-ignore
+    endEventId: selectedEvent['eventEndId'] || 0,
+    eventId: selectedEvent.eventId,
+    sessionId,
+    type: selectedEvent.type
+  });
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
-  return withSelectedEventVisible({
+  const nextState = {
     ...state,
     detailTabs: createDetailTabs(selectedDetailTab, resolvedSelectedEvent),
     previewTextCursorColumnIndex: null,
@@ -3016,11 +3414,15 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
+  };
+  return withSelectedEventVisible({
+    ...nextState,
+    tableWidth: shouldUseBalancedSplitTableWidth(nextState) ? getBalancedSplitTableWidth(nextState) : state.tableWidth
   });
 };
 
 const focusIndex = async (state, index) => {
-  const currentEvents = getCurrentEvents$1(state);
+  const currentEvents = getCurrentEvents(state);
   if (currentEvents.length === 0 || state.selectedEventIndex === index) {
     return state;
   }
@@ -3067,33 +3469,26 @@ const getMenuEntriesTableBody = props => {
     flags: None$1,
     id: 'copy',
     label: copy()
+  }, {
+    args: [props.eventIndex],
+    command: 'ChatDebug.handleTableRowOpenInNewTab',
+    flags: None$1,
+    id: 'open-in-new-tab',
+    label: openInNewTab()
   }];
 };
 
-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: [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,
@@ -3104,7 +3499,10 @@ const getMenuEntriesTableHeader = state => {
 
 const MenuChatDebugTableHeader = 2189;
 const handleHeaderContextMenu = async (state, eventX, eventY) => {
-  await showContextMenu2(state.uid, MenuChatDebugTableHeader, eventX, eventY, {
+  const {
+    uid
+  } = state;
+  await showContextMenu2(uid, MenuChatDebugTableHeader, eventX, eventY, {
     menuId: MenuChatDebugTableHeader
   });
   return state;
@@ -3120,7 +3518,6 @@ const getTableBodyEventIndex = (state, eventX, eventY) => {
     tableMinLineY,
     tableWidth,
     useDevtoolsLayout,
-    width,
     x
   } = state;
   if (!useDevtoolsLayout) {
@@ -3130,8 +3527,8 @@ const getTableBodyEventIndex = (state, eventX, eventY) => {
   if (currentEvents.length === 0) {
     return -1;
   }
-  const tableX = x + leftPadding;
-  const tableWidthNew = clampTableWidth(width, tableWidth);
+  const tableX = x + state.leftPadding;
+  const tableWidthNew = clampTableWidth(state, tableWidth);
   const hasTimeline = currentEvents.length > 0;
   const tableBodyY = getTableBodyY(state, hasTimeline);
   const relativeX = eventX - tableX;
@@ -3170,28 +3567,10 @@ const getMenuIds = () => {
   return [MenuChatDebugTableHeader, MenuChatDebugTableBody, 556, 557];
 };
 
-const listChatViewEvents = async (sessionId, _databaseName, _dataBaseVersion, _eventStoreName, _sessionIdIndexName) => {
-  try {
-    return await listChatViewEvents$1(sessionId);
-  } catch (error) {
-    return {
-      error,
-      type: 'error'
-    };
-  }
-};
-
-const loadEventsDependencies = {
-  listChatViewEvents: listChatViewEvents,
-  loadSelectedEvent: loadSelectedEvent
-};
-
-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,
@@ -3203,7 +3582,7 @@ const invalidSessionIdPattern = /[/?#]/;
 const parseChatDebugUri = uri => {
   if (!uri) {
     return {
-      code: ParseChatDebugUriErrorCode.MissingUri,
+      code: MissingUri,
       message: missingUri(),
       type: ParseChatDebugUriResultType.Error
     };
@@ -3211,7 +3590,7 @@ const parseChatDebugUri = uri => {
   const match = uri.match(chatDebugUriPattern);
   if (!match) {
     return {
-      code: ParseChatDebugUriErrorCode.InvalidUriFormat,
+      code: InvalidUriFormat,
       message: invalidUriFormat(),
       type: ParseChatDebugUriResultType.Error
     };
@@ -3222,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
     };
@@ -3249,7 +3628,7 @@ const getSessionIdFromUri = state => {
 };
 
 const getInvalidUriMessage = (uri, code) => {
-  if (code === ParseChatDebugUriErrorCode.MissingUri) {
+  if (code === MissingUri) {
     return unableToLoadDebugSessionMissingUri();
   }
   return unableToLoadDebugSessionInvalidUri(uri);
@@ -3268,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,
@@ -3300,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 => {
@@ -3349,8 +3775,104 @@ const getSessionNotFoundMessage = sessionId => {
   return noChatSessionFound(sessionId);
 };
 
+const getResponseMap = events => {
+  const seen = Object.create(null);
+  for (const event of events) {
+    if (event.type === 'ai-response' && 'requestId' in event && typeof event.requestId === 'string') {
+      seen[event.requestId] = event;
+    }
+  }
+  return seen;
+};
+
+const getMergedRequestResponseEvent = (item, response) => {
+  const parsedStart = new Date(item.timestamp || '');
+  const parsedEnd = new Date(response.timestamp || '');
+  const durationMs = parsedEnd.getTime() - parsedStart.getTime();
+  const started = getStartedTimestamp(item);
+  const ended = getEndedTimestamp(response);
+  const timestamp = item.timestamp ?? started;
+  if (Number.isFinite(durationMs) && durationMs >= 0) {
+    return {
+      durationMs,
+      ...(ended === undefined ? {} : {
+        ended
+      }),
+      eventEndId: response.eventId,
+      eventId: item.eventId,
+      method: 'POST',
+      size: getResponsePayloadSize(response),
+      ...(started === undefined ? {} : {
+        started
+      }),
+      ...(timestamp === undefined ? {} : {
+        timestamp
+      }),
+      type: 'ai-request-response'
+    };
+  }
+  return {
+    ...(ended === undefined ? {} : {
+      ended
+    }),
+    eventEndId: response.eventId,
+    eventId: item.eventId,
+    method: 'POST',
+    size: getResponsePayloadSize(response),
+    ...(started === undefined ? {} : {
+      started
+    }),
+    ...(timestamp === undefined ? {} : {
+      timestamp
+    }),
+    type: 'ai-request-response'
+  };
+};
+const toPrettyEvents = rawEvents => {
+  if (rawEvents.type === 'error') {
+    return [];
+  }
+  const pretty = [];
+  const map = getResponseMap(rawEvents.events);
+  for (const item of rawEvents.events) {
+    if (item.type === 'ai-request' && 'requestId' in item && typeof item.requestId === 'string') {
+      const response = map[item.requestId];
+      if (response) {
+        pretty.push(getMergedRequestResponseEvent(item, response));
+      } else {
+        pretty.push(item);
+      }
+    } else if (item.type === 'ai-response' && 'requestId' in item && typeof item.requestId === 'string') ; else {
+      pretty.push(item);
+    }
+  }
+  return pretty;
+};
+
+const listChatViewEvents = async (sessionId, _databaseName, _dataBaseVersion, _eventStoreName, _sessionIdIndexName) => {
+  try {
+    const rawEvents = await listChatViewEvents$1(sessionId);
+    if (rawEvents.type === 'error') {
+      return rawEvents;
+    }
+    const prettyEvents = toPrettyEvents(rawEvents);
+    return {
+      events: prettyEvents,
+      type: 'success'
+    };
+  } catch (error) {
+    return {
+      error,
+      type: 'error'
+    };
+  }
+};
+
 const restoreSelectedEvent = async state => {
-  if (state.selectedEventId === null) {
+  const {
+    selectedEventId
+  } = state;
+  if (selectedEventId === null) {
     return {
       ...state,
       previewTextCursorColumnIndex: null,
@@ -3362,7 +3884,7 @@ const restoreSelectedEvent = async state => {
       selectedEventIndex: null
     };
   }
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const selectedEventIndex = currentEvents.findIndex(event => event.eventId === state.selectedEventId);
   if (selectedEventIndex === -1) {
     return {
@@ -3391,7 +3913,11 @@ const restoreSelectedEvent = async state => {
       selectedEventIndex: null
     };
   }
-  const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  const selectedEventDetails = await loadSelectedEvent({
+    eventId: selectedEvent.eventId,
+    sessionId: state.sessionId,
+    type: selectedEvent.type
+  });
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return {
     ...state,
@@ -3407,13 +3933,7 @@ const restoreSelectedEvent = async state => {
 };
 
 const loadEventsForSessionId = async (state, sessionId) => {
-  const {
-    databaseName,
-    dataBaseVersion,
-    eventStoreName,
-    sessionIdIndexName
-  } = state;
-  const result = await loadEventsDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
+  const result = await listChatViewEvents(sessionId);
   if (result.type === 'error') {
     return applyVirtualTableState(getStateWithTimelineInfo({
       ...state,
@@ -3452,31 +3972,23 @@ const loadEventsForSessionId = async (state, sessionId) => {
   return withSelectedEventVisible(restoredState);
 };
 
-const loadEventsFromUri = async state => {
-  const sessionId = getSessionIdFromUri(state);
-  if (!sessionId) {
-    return getStateWithInvalidUri(state);
-  }
-  return loadEventsForSessionId(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 => {
   return refreshEvents(state);
 };
 
-const handleClickRefreshDependencies = {
-  refresh: refresh
-};
 const handleClickRefresh = async state => {
-  return handleClickRefreshDependencies.refresh(state);
+  return refresh(state);
 };
 
 const handleCloseDetails$1 = state => {
@@ -3522,9 +4034,10 @@ const handleEscape = state => {
   return state;
 };
 
-const getCurrentEvents = state => getCurrentEvents$2(state);
-
 const getEventIndexByStableId$1 = (events, event) => {
+  if (typeof event.eventId !== 'number') {
+    return -1;
+  }
   return events.findIndex(candidate => candidate.eventId === event.eventId);
 };
 
@@ -3582,7 +4095,7 @@ const handleEventCategoryFilter$1 = (state, value, ctrlKey = false, metaKey = fa
   const {
     categoryFilters
   } = state;
-  const newCategoryFilters = selectCategoryFilter(categoryFilters, value || All, ctrlKey || metaKey);
+  const newCategoryFilters = selectCategoryFilter(categoryFilters, value || All$1, ctrlKey || metaKey);
   if (newCategoryFilters === categoryFilters) {
     return state;
   }
@@ -3593,9 +4106,6 @@ const handleEventCategoryFilter$1 = (state, value, ctrlKey = false, metaKey = fa
   return withPreservedSelection$1(state, nextState);
 };
 
-const handleEventRowClickDependencies = {
-  loadSelectedEvent: loadSelectedEvent
-};
 const isPrimaryButton = button => {
   return button === 0;
 };
@@ -3607,7 +4117,7 @@ const handleEventRowClick = async (state, index, button = 0) => {
   if (actual === -1) {
     return state;
   }
-  return selectEventAtIndex(state, actual, handleEventRowClickDependencies);
+  return selectEventAtIndex(state, actual);
 };
 
 const handleEventRowClickAt = async (state, eventX, eventY, button = 0) => {
@@ -3619,6 +4129,28 @@ const getBoolean = value => {
   return value === true || value === 'true' || value === 'on' || value === '1';
 };
 
+const General = 'general';
+const RequestHeaders = 'requestHeaders';
+const ResponseHeaders = 'responseHeaders';
+const headerSectionKeys = [General, ResponseHeaders, RequestHeaders];
+const isHeaderSectionKey = value => {
+  return headerSectionKeys.includes(value);
+};
+
+const removeSection = (collapsedHeaderSections, section) => {
+  return collapsedHeaderSections.filter(value => value !== section);
+};
+const toggleHeadersSection = (state, value) => {
+  if (!isHeaderSectionKey(value)) {
+    return state;
+  }
+  const isCollapsed = state.collapsedHeaderSections.includes(value);
+  return {
+    ...state,
+    collapsedHeaderSections: isCollapsed ? removeSection(state.collapsedHeaderSections, value) : [...state.collapsedHeaderSections, value]
+  };
+};
+
 const parseTimelineRangePreset$1 = value => {
   if (!value) {
     return {
@@ -3633,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 => {
@@ -3642,7 +4177,7 @@ const getSelectedEventIndex = state => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const filteredEvents = getCurrentEvents$2(state);
+  const filteredEvents = getCurrentEvents$1(state);
   const selectedEvent = filteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
@@ -3660,12 +4195,12 @@ const getPreservedSelectedEventIndex = (oldState, newState) => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const oldFilteredEvents = getCurrentEvents$2(oldState);
+  const oldFilteredEvents = getCurrentEvents$1(oldState);
   const selectedEvent = oldFilteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
   }
-  const newFilteredEvents = getCurrentEvents$2(newState);
+  const newFilteredEvents = getCurrentEvents$1(newState);
   const newIndex = getEventIndexByStableId(newFilteredEvents, selectedEvent);
   if (newIndex === -1) {
     return null;
@@ -3703,7 +4238,7 @@ const handleFilter = (state, value) => {
   });
 };
 const handleEventCategoryFilter = (state, value) => {
-  const categoryFilters = selectCategoryFilter(state.categoryFilters, value || All);
+  const categoryFilters = selectCategoryFilter(state.categoryFilters, value || All$1);
   if (categoryFilters === state.categoryFilters) {
     return state;
   }
@@ -3730,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,
@@ -3738,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) => {
@@ -3788,8 +4327,11 @@ const handleDetailTab = (state, value) => {
     detailTabs
   };
 };
+const handleToggleHeadersSection = (state, value) => {
+  return toggleHeadersSection(state, value);
+};
 const inputHandlers = {
-  [CloseDetails]: handleCloseDetails,
+  [CloseDetails$1]: handleCloseDetails,
   [DetailTab]: handleDetailTab,
   [EventCategoryFilter]: handleEventCategoryFilter,
   [Filter]: handleFilter,
@@ -3800,6 +4342,7 @@ const inputHandlers = {
   [TimelineEndSeconds]: handleTimelineEndSeconds$1,
   [TimelineRangePreset]: handleTimelineRangePreset$1,
   [TimelineStartSeconds]: handleTimelineStartSeconds$1,
+  [ToggleHeadersSection]: handleToggleHeadersSection,
   [UseDevtoolsLayout]: handleUseDevtoolsLayout
 };
 const handleInput = (state, name, value, checked) => {
@@ -3853,28 +4396,43 @@ const shouldIncludeArguments = (event, name) => {
   return true;
 };
 
-const getPayloadEvent = event => {
-  const {
-    requestEvent
-  } = event;
-  if (requestEvent && typeof requestEvent === 'object' && typeof requestEvent.type === 'string') {
-    const mergedRequestEvent = requestEvent;
-    if (mergedRequestEvent.body !== undefined) {
-      return mergedRequestEvent.body;
-    }
-    if (mergedRequestEvent.value !== undefined) {
-      return mergedRequestEvent.value;
-    }
-    if (hasOwn(mergedRequestEvent, 'arguments')) {
-      return mergedRequestEvent.arguments;
-    }
-    return requestEvent;
+const getMergedRequestPayloadEvent = requestEvent => {
+  if (!requestEvent || typeof requestEvent !== 'object') {
+    return {
+      found: false
+    };
   }
-  const name = getPreviewName(event);
-  if (name === 'list_files' && hasOwn(event, 'arguments')) {
-    return event.arguments;
+  const mergedRequestEvent = requestEvent;
+  if (typeof mergedRequestEvent.type !== 'string') {
+    return {
+      found: false
+    };
+  }
+  if (mergedRequestEvent.body !== undefined) {
+    return {
+      found: true,
+      value: mergedRequestEvent.body
+    };
+  }
+  if (mergedRequestEvent.value !== undefined) {
+    return {
+      found: true,
+      value: mergedRequestEvent.value
+    };
   }
-  const payloadEvent = {
+  if (hasOwn(mergedRequestEvent, 'arguments')) {
+    return {
+      found: true,
+      value: mergedRequestEvent.arguments
+    };
+  }
+  return {
+    found: true,
+    value: requestEvent
+  };
+};
+const getPayloadObject = (event, name) => {
+  return {
     ...(name === undefined ? {} : {
       name
     }),
@@ -3885,6 +4443,23 @@ const getPayloadEvent = event => {
       result: event.result
     } : {})
   };
+};
+const getPayloadEvent = event => {
+  const {
+    requestEvent
+  } = event;
+  const mergedRequestPayloadEvent = getMergedRequestPayloadEvent(requestEvent);
+  if (mergedRequestPayloadEvent.found) {
+    return mergedRequestPayloadEvent.value;
+  }
+  if (event && event.type === 'ai-request') {
+    return event.body;
+  }
+  const name = getPreviewName(event);
+  if (name === 'list_files' && hasOwn(event, 'arguments')) {
+    return event.arguments;
+  }
+  const payloadEvent = getPayloadObject(event, name);
   if (Object.keys(payloadEvent).length > 0) {
     return payloadEvent;
   }
@@ -3899,57 +4474,75 @@ const isChatMessageUpdatedEvent = event => {
   return event.type === 'chat-message-updated';
 };
 
+const getObjectValue = value => {
+  if (!value || typeof value !== 'object') {
+    return undefined;
+  }
+  return value;
+};
 const getResponseContentText = content => {
-  if (!content || typeof content !== 'object') {
+  const contentObject = getObjectValue(content);
+  if (!contentObject) {
     return undefined;
   }
   if (Array.isArray(content)) {
     const [firstContentItem] = content;
-    if (!firstContentItem || typeof firstContentItem !== 'object') {
+    const firstContentItemObject = getObjectValue(firstContentItem);
+    if (!firstContentItemObject) {
       return undefined;
     }
     const {
       text
-    } = firstContentItem;
+    } = firstContentItemObject;
     return typeof text === 'string' ? text : undefined;
   }
   const {
     text
-  } = content;
+  } = contentObject;
   return typeof text === 'string' ? text : undefined;
 };
+const getOutput = value => {
+  const valueObject = getObjectValue(value);
+  if (!valueObject) {
+    return undefined;
+  }
+  const {
+    output
+  } = valueObject;
+  return Array.isArray(output) ? output : undefined;
+};
+const getAiRequestResponseOutput = event => {
+  const {
+    endValue
+  } = event;
+  const endValueObject = getObjectValue(endValue);
+  if (!endValueObject) {
+    return undefined;
+  }
+  return getOutput(endValueObject.value);
+};
+const getCompletedResponseOutput = event => {
+  const valueObject = getObjectValue(event.value);
+  if (!valueObject) {
+    return undefined;
+  }
+  const responseObject = getObjectValue(valueObject.response);
+  if (!responseObject) {
+    return undefined;
+  }
+  return getOutput(responseObject);
+};
 const getResponseOutput = event => {
-  if (event.type === 'sse-response-completed') {
-    const {
-      value
-    } = event;
-    if (!value || typeof value !== 'object') {
-      return undefined;
-    }
-    const {
-      response
-    } = value;
-    if (!response || typeof response !== 'object') {
-      return undefined;
-    }
-    const {
-      output
-    } = response;
-    return Array.isArray(output) ? output : undefined;
-  }
-  if (event.type === 'ai-response') {
-    const {
-      value
-    } = event;
-    if (!value || typeof value !== 'object') {
+  switch (event.type) {
+    case 'ai-request':
+      return getAiRequestResponseOutput(event);
+    case 'ai-response':
+      return getOutput(event.value);
+    case 'sse-response-completed':
+      return getCompletedResponseOutput(event);
+    default:
       return undefined;
-    }
-    const {
-      output
-    } = value;
-    return Array.isArray(output) ? output : undefined;
   }
-  return undefined;
 };
 const getResponsePreviewText = event => {
   const output = getResponseOutput(event);
@@ -3957,12 +4550,13 @@ const getResponsePreviewText = event => {
     return undefined;
   }
   const [firstOutput] = output;
-  if (!firstOutput || typeof firstOutput !== 'object') {
+  const firstOutputObject = getObjectValue(firstOutput);
+  if (!firstOutputObject) {
     return undefined;
   }
   const {
     content
-  } = firstOutput;
+  } = firstOutputObject;
   return getResponseContentText(content);
 };
 const getPreviewMessageText = event => {
@@ -4106,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));
@@ -4267,16 +4858,22 @@ const handlePreviewTextScrollBarPointerDown = (state, eventY) => {
 };
 
 const handlePreviewTextScrollBarPointerMove = (state, eventY) => {
-  if (!state.previewTextScrollBarPointerActive) {
+  const {
+    previewTextDeltaY,
+    previewTextScrollBarHandleOffset,
+    previewTextScrollBarPointerActive,
+    selectedEvent
+  } = state;
+  if (!previewTextScrollBarPointerActive) {
     return state;
   }
   const viewportHeight = getPreviewTextViewportHeight(state);
-  const virtualization = getPreviewVirtualizationState(state.selectedEvent, viewportHeight, state.previewTextDeltaY);
+  const virtualization = getPreviewVirtualizationState(selectedEvent, viewportHeight, previewTextDeltaY);
   if (viewportHeight === 0 || virtualization.scrollBarHeight === 0) {
     return state;
   }
   const relativeY = eventY - getPreviewTextBodyY(state);
-  const nextHandleTop = Math.max(0, Math.min(viewportHeight - virtualization.scrollBarHeight, relativeY - state.previewTextScrollBarHandleOffset));
+  const nextHandleTop = Math.max(0, Math.min(viewportHeight - virtualization.scrollBarHeight, relativeY - previewTextScrollBarHandleOffset));
   const percent = nextHandleTop / Math.max(1, viewportHeight - virtualization.scrollBarHeight);
   const nextState = setPreviewTextDeltaY(state, percent * virtualization.maxDeltaY);
   return {
@@ -4297,7 +4894,10 @@ const handlePreviewTextScrollBarPointerUp = state => {
 };
 
 const handlePreviewTextWheel = (state, deltaY) => {
-  return setPreviewTextDeltaY(state, state.previewTextDeltaY + deltaY);
+  const {
+    previewTextDeltaY
+  } = state;
+  return setPreviewTextDeltaY(state, previewTextDeltaY + deltaY);
 };
 
 const handleRootContextMenu = state => {
@@ -4320,7 +4920,8 @@ const handleSashPointerMove = (state, eventX, eventY) => {
   }
   return {
     ...state,
-    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
+    tableWidth: getTableWidthFromClientX(state, eventX),
+    tableWidthManuallyResized: true
   };
 };
 
@@ -4362,6 +4963,8 @@ const handleTableHeaderClick = (state, value) => {
 
 const getTableResizerId = name => {
   switch (name) {
+    case 'ResizerFour':
+      return 4;
     case 'ResizerOne':
       return 1;
     case 'ResizerThree':
@@ -4385,7 +4988,7 @@ const handleTableResizerPointerMove = (state, clientX) => {
   }
   return {
     ...state,
-    tableColumnWidths: getResizedTableColumnWidths(state.width, state.tableWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths, state.x, clientX, state.tableResizerDownId)
+    tableColumns: getResizedTableColumnWidths(state, getVisibleTableColumns(state.tableColumns), state.tableColumns, clientX, state.tableResizerDownId)
   };
 };
 
@@ -4410,6 +5013,44 @@ const handleTableRowCopy = async (state, eventIndex) => {
   return state;
 };
 
+const toDataUri$1 = text => {
+  return `data:application/json,${encodeURIComponent(text)}`;
+};
+const handleTableRowDoubleClick = async (state, eventX, eventY) => {
+  const eventIndex = getTableBodyEventIndex(state, eventX, eventY);
+  if (eventIndex === -1) {
+    return state;
+  }
+  const event = getCurrentEvents$1(state)[eventIndex];
+  if (!event) {
+    return state;
+  }
+  const responseData = getResponseData(event);
+  if (responseData === undefined) {
+    return state;
+  }
+  const text = JSON.stringify(responseData, null, 2);
+  if (!text) {
+    return state;
+  }
+  await openUri(toDataUri$1(text));
+  return state;
+};
+
+const toDataUri = text => {
+  return `data:application/json,${encodeURIComponent(text)}`;
+};
+const handleTableRowOpenInNewTab = async (state, eventIndex) => {
+  const currentEvents = getCurrentEvents$1(state);
+  const event = currentEvents[eventIndex];
+  if (!event) {
+    return state;
+  }
+  const text = JSON.stringify(event, null, 2);
+  await openUri(toDataUri(text));
+  return state;
+};
+
 const getHandleOffsetAndPercent = (tableBodyHeight, scrollBarHeight, relativeY) => {
   const halfScrollBarHeight = scrollBarHeight / 2;
   if (relativeY <= halfScrollBarHeight) {
@@ -4430,7 +5071,7 @@ const getHandleOffsetAndPercent = (tableBodyHeight, scrollBarHeight, relativeY)
   };
 };
 const handleTableScrollBarPointerDown = (state, eventY) => {
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
   if (tableBodyHeight === 0 || scrollBarHeight === 0) {
@@ -4454,7 +5095,7 @@ const handleTableScrollBarPointerMove = (state, eventY) => {
   if (!state.tableScrollBarPointerActive) {
     return state;
   }
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
   if (tableBodyHeight === 0 || scrollBarHeight === 0) {
@@ -4550,10 +5191,10 @@ const getTimelineEventX = eventX => {
 };
 
 const getTimelineLeft = state => {
-  return state.x + viewPadding + timelineHorizontalPadding;
+  return state.x + state.viewPadding + state.timelineHorizontalPadding;
 };
 const getTimelineWidth = state => {
-  return Math.max(0, getMainWidth(state.width) - timelineHorizontalPadding * 2);
+  return Math.max(0, getMainWidth(state) - state.timelineHorizontalPadding * 2);
 };
 
 const getTimelineDurationSeconds = events => {
@@ -4686,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
   });
 };
 
@@ -4727,14 +5373,21 @@ const handleStorageWorkerUpdate = async uid => {
   await invoke('Viewlet.executeViewletCommand', uid, 'ChatDebug.handleClickRefresh');
 };
 
-const loadContentDependencies = loadEventsDependencies;
-loadContentDependencies.registerUpdateListener = registerUpdateListener;
+const loadEventsFromUri = async state => {
+  const sessionId = getSessionIdFromUri(state);
+  if (!sessionId) {
+    return getStateWithInvalidUri(state);
+  }
+  return loadEventsForSessionId(state, sessionId);
+};
+
 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 loadContentDependencies.registerUpdateListener(nextState.sessionId, rpcId, nextState.uid);
+      await registerUpdateListener(nextState.sessionId, rpcId, nextState.uid);
     } catch {
       // ignore
     }
@@ -4742,8 +5395,7 @@ const loadContent = async (state, savedState) => {
   return applyVirtualTableState({
     ...nextState,
     categoryFilters: createCategoryFilters(getSelectedEventCategoryFilters(nextState.categoryFilters)),
-    detailTabs: createDetailTabs(getSelectedDetailTab(nextState.detailTabs), nextState.selectedEvent),
-    tableColumns: createTableColumns()
+    detailTabs: createDetailTabs(getSelectedDetailTab(nextState.detailTabs), nextState.selectedEvent)
   });
 };
 
@@ -4751,20 +5403,8 @@ const isAttachmentImagePreview = value => {
   return typeof value === 'object' && value !== null && value.previewType === 'image';
 };
 
-const getResponseEvent = event => {
-  const {
-    responseEvent
-  } = event;
-  if (responseEvent && typeof responseEvent === 'object' && typeof responseEvent.type === 'string') {
-    const mergedResponseEvent = responseEvent;
-    if (mergedResponseEvent.value !== undefined) {
-      return mergedResponseEvent.value;
-    }
-    return responseEvent;
-  }
-  return event;
-};
-
+const detailsLineNumberDigitWidth = 8;
+const detailsLineNumberHorizontalPadding = 8;
 const getStringLineCount = value => {
   return value.split('\n').length;
 };
@@ -4809,13 +5449,13 @@ const getLineCount = state => {
     return 0;
   }
   const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
-  if (selectedDetailTab === Timing) {
+  if (selectedDetailTab === Timing$1 || selectedDetailTab === Tokens$1) {
     return 0;
   }
-  if (selectedDetailTab === Preview) {
+  if (selectedDetailTab === Preview$1) {
     return getPreviewLineCount(selectedEvent);
   }
-  if (selectedDetailTab === Payload) {
+  if (selectedDetailTab === Payload$1) {
     return getJsonLineCount(getPayloadEvent(selectedEvent));
   }
   return getJsonLineCount(getResponseEvent(selectedEvent));
@@ -4825,22 +5465,23 @@ const getDetailsLineNumberWidth = state => {
   if (lineCount === 0) {
     return 0;
   }
-  return String(lineCount).length * defaultPreviewTextColumnWidth;
+  const digitCount = String(lineCount).length;
+  return digitCount * detailsLineNumberDigitWidth + detailsLineNumberHorizontalPadding;
 };
 
 // cspell:ignore liga calt
 
 const getCss = state => {
   const hasSelectedEvent = !!state.selectedEvent;
-  const tableWidth = hasSelectedEvent ? clampTableWidth(state.width, state.tableWidth) : getMainWidth(state.width);
-  const currentEvents = getCurrentEvents$2(state);
+  const tableWidth = hasSelectedEvent ? clampTableWidth(state, state.tableWidth) : getMainWidth(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
   const maxDeltaY = getMaxDeltaY(currentEvents.length, tableBodyHeight);
   const showScrollBar = scrollBarHeight > 0;
   const scrollBarOffset = getScrollBarOffset(state.tableDeltaY, maxDeltaY, tableBodyHeight, scrollBarHeight);
   const tableContentWidth = Math.max(0, tableWidth - (showScrollBar ? devtoolsTableScrollBarWidth : 0));
-  const detailsWidth = hasSelectedEvent ? getDetailsWidth(state.width, state.tableWidth) : 0;
+  const detailsWidth = hasSelectedEvent ? getDetailsWidth(state, state.tableWidth) : 0;
   const detailsLineNumberWidth = getDetailsLineNumberWidth(state);
   const previewTextViewportHeight = getPreviewTextViewportHeight(state);
   const previewVirtualization = getPreviewVirtualizationState(state.selectedEvent, previewTextViewportHeight, state.previewTextDeltaY);
@@ -4848,11 +5489,12 @@ const getCss = state => {
   if (state.width >= state.largeBreakpoint) {
     topSize = 30;
   }
-  const tableColumnLayout = getTableColumnLayout(tableContentWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths);
-  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0, tableColThreeWidth = 0] = tableColumnLayout.visibleColumnWidths;
+  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;
   const resizerThreeLeft = tableColumnLayout.resizerLefts[2] ?? 0;
+  const resizerFourLeft = tableColumnLayout.resizerLefts[3] ?? 0;
   const {
     selectionEndPercent,
     selectionStartPercent
@@ -4865,13 +5507,14 @@ const getCss = state => {
   --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
   --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
   --ChatDebugViewTableColThreeWidth: ${tableColThreeWidth}px;
+  --ChatDebugViewTableColFourWidth: ${tableColFourWidth}px;
   --ChatDebugViewDetailsLineNumberWidth: ${detailsLineNumberWidth}px;
   --ChatDebugViewPreviewScrollBarHeight: ${previewVirtualization.scrollBarHeight}px;
   --ChatDebugViewPreviewScrollBarOffset: ${previewVirtualization.scrollBarOffset}px;
   --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;
@@ -4879,15 +5522,16 @@ const getCss = state => {
   --ResizerOneLeft: ${resizerOneLeft}px;
   --ResizerTwoLeft: ${resizerTwoLeft}px;
   --ResizerThreeLeft: ${resizerThreeLeft}px;
-  --ChatDebugViewSashWidth: ${sashWidth}px;
+  --ResizerFourLeft: ${resizerFourLeft}px;
+  --ChatDebugViewSashWidth: ${state.sashWidth}px;
   --ChatDebugViewTableWidth: ${tableWidth}px;
   --ChatDebugViewTimelineHeight: ${state.timelineHeight}px;
   --ChatDebugViewTimelineCursorGuideLeft: ${state.timelineHoverPercent ?? 0}%;
   --ChatDebugViewTimelineSelectionEndLeft: ${selectionEndPercent ?? 0}%;
   --ChatDebugViewTimelineSelectionStartLeft: ${selectionStartPercent ?? 0}%;
   --ChatDebugViewTopSize: ${topSize}px;
-  --ChatDebugViewTypeColumnWidth: ${state.tableColumnWidths.type}px;
-  padding: ${viewPadding}px;
+  --ChatDebugViewTypeColumnWidth: ${getTableColumnWidth(state.tableColumns, Type)}px;
+  padding: ${state.viewPadding}px;
   padding-right: 0;
 }
 
@@ -4901,6 +5545,75 @@ const getCss = state => {
   width: calc(100% - var(--ChatDebugViewTableScrollBarWidth));
 }
 
+.TableColZero {
+  width: var(--ChatDebugViewTableColZeroWidth);
+}
+
+.TableColOne {
+  width: var(--ChatDebugViewTableColOneWidth);
+}
+
+.TableColTwo {
+  width: var(--ChatDebugViewTableColTwoWidth);
+}
+
+.TableColThree {
+  width: var(--ChatDebugViewTableColThreeWidth);
+}
+
+.TableColFour {
+  width: var(--ChatDebugViewTableColFourWidth);
+}
+
+.Resizers {
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: var(--ChatDebugViewTableScrollBarWidth);
+  top: 0;
+}
+
+.Resizer {
+  background: transparent;
+  border: 0;
+  bottom: 0;
+  cursor: col-resize;
+  margin: 0;
+  padding: 0;
+  pointer-events: auto;
+  position: absolute;
+  top: 0;
+  transform: translateX(calc(-0.5 * var(--ChatDebugViewSashWidth)));
+  width: var(--ChatDebugViewSashWidth);
+}
+
+.ResizerOne {
+  left: var(--ResizerOneLeft);
+}
+
+.ResizerTwo {
+  left: var(--ResizerTwoLeft);
+}
+
+.ResizerThree {
+  left: var(--ResizerThreeLeft);
+}
+
+.ResizerFour {
+  left: var(--ResizerFourLeft);
+}
+
+.ResizerInner {
+  background: var(--vscode-panel-border, rgba(255, 255, 255, 0.12));
+  bottom: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transform: translateX(-0.5px);
+  width: 1px;
+}
+
 .ChatDebugViewTimeline {
   contain: strict;
   display: flex;
@@ -4920,10 +5633,74 @@ const getCss = state => {
   width: var(--ChatDebugViewDetailsLineNumberWidth);
 }
 
-.ChatDebugViewDetailsBottom .ChatDebugViewEventLineNumber {
-  display: inline-block;
-  min-width: var(--ChatDebugViewDetailsLineNumberWidth);
-  width: var(--ChatDebugViewDetailsLineNumberWidth);
+.ChatDebugViewHeadersTable {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.ChatDebugViewHeadersSection {
+  display: flex;
+  flex-direction: column;
+}
+
+.ChatDebugViewHeadersSection + .ChatDebugViewHeadersSection {
+  margin-top: 16px;
+}
+
+.ChatDebugViewHeadersSectionHeading {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--vscode-descriptionForeground, rgba(255, 255, 255, 0.7));
+  cursor: pointer;
+  display: flex;
+  font-size: 11px;
+  font-weight: 600;
+  justify-content: flex-start;
+  letter-spacing: 0.08em;
+  margin-bottom: 6px;
+  padding: 0;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.ChatDebugViewHeadersSectionHeading:hover {
+  color: var(--vscode-editor-foreground);
+}
+
+.ChatDebugViewHeadersRow {
+  display: grid;
+  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
+}
+
+.ChatDebugViewHeadersCell {
+  border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.12));
+  min-width: 0;
+  color: var(--vscode-editor-foreground);
+  padding: 6px 10px;
+  text-align: left;
+  word-break: break-word;
+}
+
+.ChatDebugViewHeadersRowOdd {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.ChatDebugViewHeadersRowEven {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.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 {
@@ -5325,6 +6102,16 @@ const PanelTab = 'PanelTab';
 const PanelTabSelected = 'PanelTabSelected';
 const ChatDebugViewDetailsTabs = 'ChatDebugViewDetailsTabs';
 const ChatDebugViewDetailsTop = 'ChatDebugViewDetailsTop';
+const ChatDebugViewHeadersCell = 'ChatDebugViewHeadersCell';
+const ChatDebugViewHeadersCellName = 'ChatDebugViewHeadersCellName';
+const ChatDebugViewHeadersCellValue = 'ChatDebugViewHeadersCellValue';
+const ChatDebugViewHeadersRow = 'ChatDebugViewHeadersRow';
+const ChatDebugViewHeadersRowEven = 'ChatDebugViewHeadersRowEven';
+const ChatDebugViewHeadersRowOdd = 'ChatDebugViewHeadersRowOdd';
+const ChatDebugViewHeadersSection = 'ChatDebugViewHeadersSection';
+const ChatDebugViewHeadersSectionHeading = 'ChatDebugViewHeadersSectionHeading';
+const ChatDebugViewHeadersSectionInfo = 'ChatDebugViewHeadersSectionInfo';
+const ChatDebugViewHeadersTable = 'ChatDebugViewHeadersTable';
 const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
 const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
 const ChatDebugViewError = 'ChatDebugViewError';
@@ -5369,6 +6156,7 @@ const ResizerInner = 'ResizerInner';
 const ResizerOne = 'ResizerOne';
 const ResizerTwo = 'ResizerTwo';
 const ResizerThree = 'ResizerThree';
+const ResizerFour = 'ResizerFour';
 const TableHead = 'TableHead';
 const Resizers = 'Resizers';
 const TableCol = 'TableCol';
@@ -5412,6 +6200,7 @@ const ChatDebugViewTop = 'ChatDebugViewTop';
 const ChatDebugViewTopDevtools = 'ChatDebugViewTop--devtools';
 const TableCell = 'TableCell';
 const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
+const ChatDebugViewCellSize = 'ChatDebugViewCellSize';
 const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
 const InputBox = 'InputBox';
 const TokenBoolean = 'Token TokenBoolean';
@@ -5463,6 +6252,7 @@ const HandlePreviewTextScrollBarPointerDown = 37;
 const HandlePreviewTextScrollBarPointerMove = 38;
 const HandlePreviewTextScrollBarPointerUp = 39;
 const HandleRootContextMenu = 40;
+const HandleTableRowDoubleClick = 41;
 
 const debugErrorRootNode = {
   childCount: 1,
@@ -5492,6 +6282,7 @@ const getFilterInputDom = (filterValue, useDevtoolsLayout) => {
   };
 };
 
+const selectedClassName = mergeClassNames(ChatDebugViewQuickFilterPill, ChatDebugViewQuickFilterPillSelected);
 const getQuickFilterDom = categoryFilter => {
   const {
     isSelected,
@@ -5501,7 +6292,7 @@ const getQuickFilterDom = categoryFilter => {
   return [{
     ariaSelected: isSelected,
     childCount: 1,
-    className: mergeClassNames(ChatDebugViewQuickFilterPill, isSelected ? ChatDebugViewQuickFilterPillSelected : ''),
+    className: isSelected ? selectedClassName : ChatDebugViewQuickFilterPill,
     name,
     onClick: HandleEventCategoryFilter,
     role: Option,
@@ -5525,10 +6316,10 @@ const refreshButtonDom = [{
   'aria-label': refreshEvents$1(),
   childCount: 1,
   className: ChatDebugViewRefreshButton,
-  name: Refresh,
+  name: Refresh$1,
   onClick: HandleClickRefresh,
   type: Button$1,
-  value: Refresh
+  value: Refresh$1
 }, text(refresh$1())];
 const getRefreshButtonDom = () => {
   return refreshButtonDom;
@@ -5551,64 +6342,363 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, categoryFilters) =>
   }, getFilterInputDom(filterValue, false), ...refreshButtonDom];
 };
 
-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);
+const createDevtoolsRows = (events, selectedEventIndex, startIndex = 0) => {
+  return events.map((event, index) => {
+    const actualIndex = startIndex + index;
+    return {
+      event,
+      index: actualIndex,
+      isErrorStatus: hasErrorStatus(event),
+      isEven: actualIndex % 2 === 1,
+      isSelected: selectedEventIndex === actualIndex
+    };
+  });
+};
+
+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 getPanelId = detailTab => {
+  return `ChatDebugViewDetailsPanel-${detailTab}`;
+};
+
+const getDetailContentDom = (selectedDetailTab, safeSelectedDetailTab, contentNodes) => {
+  return [{
+    'aria-label': selectedDetailTab.label,
+    childCount: getDirectChildCount$1(contentNodes),
+    className: ChatDebugViewDetailsBottom,
+    id: getPanelId(safeSelectedDetailTab),
+    onContextMenu: HandleDetailsContextMenu,
+    role: 'tabpanel',
+    type: Div
+  }, ...contentNodes];
+};
+
+const icon = {
+  childCount: 0,
+  className: 'MaskIcon MaskIconClose',
+  type: Div
+};
+const getDetailsCloseButtonDom = () => {
+  return [{
+    'aria-label': closeDetails(),
+    childCount: 1,
+    className: ChatDebugViewDetailsClose,
+    name: CloseDetails$1,
+    onChange: HandleCloseDetails,
+    onClick: HandleCloseDetails,
+    type: Button$1,
+    value: 'close'
+  }, icon];
+};
+
+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 parentNode = {
+  childCount: 2,
+  className: ChatDebugViewDetailsTop,
+  onContextMenu: HandleDetailsTopContextMenu,
+  type: Div
+};
+const getDetailsTopVirtualDom = detailTabs => {
+  return [parentNode, ...getDetailsCloseButtonDom(), ...getTabNodes(detailTabs)];
+};
+
+const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
+  if (selectedEvent === null) {
+    return detailTabs;
+  }
+  return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
+};
+
+const httpStatusLabels = {
+  100: 'Continue',
+  101: 'Switching Protocols',
+  102: 'Processing',
+  103: 'Early Hints',
+  200: 'OK',
+  201: 'Created',
+  202: 'Accepted',
+  203: 'Non-Authoritative Information',
+  204: 'No Content',
+  205: 'Reset Content',
+  206: 'Partial Content',
+  207: 'Multi-Status',
+  208: 'Already Reported',
+  226: 'IM Used',
+  300: 'Multiple Choices',
+  301: 'Moved Permanently',
+  302: 'Found',
+  303: 'See Other',
+  304: 'Not Modified',
+  305: 'Use Proxy',
+  307: 'Temporary Redirect',
+  308: 'Permanent Redirect',
+  400: 'Bad Request',
+  401: 'Unauthorized',
+  402: 'Payment Required',
+  403: 'Forbidden',
+  404: 'Not Found',
+  405: 'Method Not Allowed',
+  406: 'Not Acceptable',
+  407: 'Proxy Authentication Required',
+  408: 'Request Timeout',
+  409: 'Conflict',
+  410: 'Gone',
+  411: 'Length Required',
+  412: 'Precondition Failed',
+  413: 'Content Too Large',
+  414: 'URI Too Long',
+  415: 'Unsupported Media Type',
+  416: 'Range Not Satisfiable',
+  417: 'Expectation Failed',
+  418: "I'm a Teapot",
+  421: 'Misdirected Request',
+  422: 'Unprocessable Content',
+  423: 'Locked',
+  424: 'Failed Dependency',
+  425: 'Too Early',
+  426: 'Upgrade Required',
+  428: 'Precondition Required',
+  429: 'Too Many Requests',
+  431: 'Request Header Fields Too Large',
+  451: 'Unavailable For Legal Reasons',
+  500: 'Internal Server Error',
+  501: 'Not Implemented',
+  502: 'Bad Gateway',
+  503: 'Service Unavailable',
+  504: 'Gateway Timeout',
+  505: 'HTTP Version Not Supported',
+  506: 'Variant Also Negotiates',
+  507: 'Insufficient Storage',
+  508: 'Loop Detected',
+  510: 'Not Extended',
+  511: 'Network Authentication Required'
+};
+const threeDigitStatusCodeRegex = /^\d{3}$/;
+const parseStatusCode = value => {
+  if (typeof value === 'number' && Number.isInteger(value)) {
+    return value;
+  }
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  const trimmedValue = value.trim();
+  if (!threeDigitStatusCodeRegex.test(trimmedValue)) {
+    return undefined;
+  }
+  return Number(trimmedValue);
+};
+const formatHttpStatusCode = value => {
+  const numericStatusCode = parseStatusCode(value);
+  if (numericStatusCode === undefined) {
+    return String(value);
+  }
+  const label = httpStatusLabels[numericStatusCode];
+  if (!label) {
+    return String(numericStatusCode);
+  }
+  return `${numericStatusCode} ${label}`;
+};
+
+const isHeadersRecord = value => {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+
+const getStatusCodeValue = selectedEvent => {
+  if (!selectedEvent) {
+    return undefined;
+  }
+  const endValue = isHeadersRecord(selectedEvent.endValue) ? selectedEvent.endValue : undefined;
+  if (endValue?.statusCode !== undefined) {
+    return endValue.statusCode;
+  }
+  if (selectedEvent.statusCode !== undefined) {
+    return selectedEvent.statusCode;
+  }
+  if (selectedEvent.type === 'ai-request' || selectedEvent.type === 'ai-response') {
+    return getStatusText(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 nextSiblingIndex;
+  return Object.entries(value);
 };
 
-const getDirectChildCount$1 = nodes => {
-  let count = 0;
-  let index = 0;
-  while (index < nodes.length) {
-    count++;
-    index = getNextSiblingIndex$2(nodes, index);
+const stringifyHeaderValue = value => {
+  try {
+    return JSON.stringify(value, (_key, nestedValue) => {
+      if (typeof nestedValue === 'bigint') {
+        return nestedValue.toString();
+      }
+      return nestedValue;
+    });
+  } catch {
+    return '[unserializable]';
   }
-  return count;
 };
 
-const getPanelId = detailTab => {
-  return `ChatDebugViewDetailsPanel-${detailTab}`;
+const getHeaderValueText = value => {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (value === undefined) {
+    return '';
+  }
+  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+    return String(value);
+  }
+  if (value === null) {
+    return 'null';
+  }
+  if (typeof value === 'symbol') {
+    return value.description ? `Symbol(${value.description})` : 'Symbol()';
+  }
+  if (typeof value === 'function') {
+    return '[function]';
+  }
+  return stringifyHeaderValue(value);
 };
 
-const getDetailContentDom = (selectedDetailTab, safeSelectedDetailTab, contentNodes) => {
+const getHeaderRowNodes = (headerName, headerValue, index) => {
   return [{
-    'aria-label': selectedDetailTab.label,
-    childCount: getDirectChildCount$1(contentNodes),
-    className: ChatDebugViewDetailsBottom,
-    id: getPanelId(safeSelectedDetailTab),
-    onContextMenu: HandleDetailsContextMenu,
-    role: 'tabpanel',
+    childCount: 2,
+    className: mergeClassNames(ChatDebugViewHeadersRow, index % 2 === 0 ? ChatDebugViewHeadersRowOdd : ChatDebugViewHeadersRowEven),
+    type: Li
+  }, {
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellName),
     type: Div
-  }, ...contentNodes];
+  }, text(headerName), {
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellValue),
+    type: Div
+  }, text(getHeaderValueText(headerValue))];
 };
 
-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 getHeadersTableNodes = headers => {
+  const headerRows = [];
+  for (const [index, [headerName, headerValue]] of headers.entries()) {
+    headerRows.push(...getHeaderRowNodes(headerName, headerValue, index));
+  }
+  return [{
+    childCount: headers.length,
+    className: ChatDebugViewHeadersTable,
+    type: Ul
+  }, ...headerRows];
 };
 
-const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
-  if (selectedEvent === null) {
-    return detailTabs;
+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,
+    className: ChatDebugViewHeadersSection,
+    type: Div
+  }, {
+    ariaExpanded: !isCollapsed,
+    childCount: 1,
+    className: ChatDebugViewHeadersSectionHeading,
+    name: ToggleHeadersSection,
+    onChange: HandleFilterInput,
+    onClick: HandleFilterInput,
+    type: Button$1,
+    value: section
+  }, 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);
+  const responseHeaders$1 = getHeaders(isHeadersRecord(selectedEvent?.endValue) ? selectedEvent.endValue.headers : undefined);
+  if (generalEntries.length === 0 && requestHeaders$1.length === 0 && responseHeaders$1.length === 0) {
+    return responseEventNodes;
   }
-  return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
+  const nodes = [];
+  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));
+  }
+  return nodes;
 };
 
 const getEditorRowDom = line => {
@@ -6489,12 +7579,21 @@ const getTextNode = (value, showLineNumbers = true, cursor = null, tokenSegments
   return getEditorDom(lineData, showLineNumbers, cursor, showLineNumbers ? HandlePreviewTextPointerDown : undefined);
 };
 
+const getTextEvent = (previewEvent, selectedEvent, previewTextCursor, virtualization) => {
+  const isInvalidImageMessage = previewEvent === ImageCouldNotBeLoaded;
+  const isChatMessageUpdatedPreview = !!selectedEvent && isChatMessageUpdatedEvent(selectedEvent);
+  const showLineNumbers = !isInvalidImageMessage && !isChatMessageUpdatedPreview;
+  return getTextNode(previewEvent, showLineNumbers, showLineNumbers ? previewTextCursor ?? null : null, undefined, virtualization);
+};
+const isOpenAiRequestPreviewEvent = previewEvent => {
+  return isRecord(previewEvent) && previewEvent.type === 'ai-request' && isRecord(previewEvent.endValue) && isRecord(previewEvent.endValue.value) && typeof previewEvent.endValue.value.output_text === 'string';
+};
 const getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor, virtualization) => {
+  if (isOpenAiRequestPreviewEvent(previewEvent)) {
+    return getTextEvent(previewEvent.endValue.value.output_text);
+  }
   if (typeof previewEvent === 'string') {
-    const isInvalidImageMessage = previewEvent === ImageCouldNotBeLoaded;
-    const isChatMessageUpdatedPreview = !!selectedEvent && isChatMessageUpdatedEvent(selectedEvent);
-    const showLineNumbers = !isInvalidImageMessage && !isChatMessageUpdatedPreview;
-    return getTextNode(previewEvent, showLineNumbers, showLineNumbers ? previewTextCursor ?? null : null, undefined, virtualization);
+    return getTextEvent(previewEvent, selectedEvent, previewTextCursor, virtualization);
   }
   if (isWriteFilePreview(previewEvent)) {
     const language = getLanguageFromFileExtension(previewEvent.uri);
@@ -6570,13 +7669,6 @@ 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,
@@ -6592,6 +7684,15 @@ const getTimingPreviewSegmentNodes = segments => {
     }, text(segment.label)];
   })];
 };
+
+const getTimingPreviewSegments = event => {
+  return [{
+    endPercent: 100,
+    label: getDurationText(event),
+    startPercent: 0
+  }];
+};
+
 const getTimingPreviewDom = event => {
   const segments = getTimingPreviewSegments(event);
   return [{
@@ -6653,72 +7754,92 @@ const getTimingContentNodes = (responseEventNodes, selectedEvent) => {
   return getTimingDetailsDom(selectedEvent);
 };
 
-const getSelectedContentNodes = (safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization) => {
-  if (safeSelectedDetailTab === Timing) {
+const getRowViewModels = event => {
+  const usageDetails = getTokenUsageDetails(event);
+  if (!usageDetails) {
+    return [];
+  }
+  return [{
+    key: inputTokens(),
+    value: usageDetails.inputTokens
+  }, {
+    key: outputTokens(),
+    value: usageDetails.outputTokens
+  }, {
+    key: cachedTokens(),
+    value: usageDetails.cachedTokens
+  }].filter(row => row.value !== undefined);
+};
+const getTokenUsageDetailsDom = event => {
+  const rowViewModels = getRowViewModels(event);
+  if (rowViewModels.length === 0) {
+    return [];
+  }
+  const rows = rowViewModels.flatMap(row => getTimingRowDom(row.key, String(row.value)));
+  return [{
+    childCount: rowViewModels.length,
+    className: ChatDebugViewTiming,
+    type: Div
+  }, ...rows];
+};
+
+const getTokenUsageContentNodes = (responseEventNodes, selectedEvent) => {
+  if (selectedEvent === null) {
+    return responseEventNodes;
+  }
+  return getTokenUsageDetailsDom(selectedEvent);
+};
+
+const getSelectedContentNodes = (safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization, collapsedHeaderSections = []) => {
+  if (safeSelectedDetailTab === Tokens$1) {
+    return getTokenUsageContentNodes(responseEventNodes, selectedEvent);
+  }
+  if (safeSelectedDetailTab === Timing$1) {
     return getTimingContentNodes(responseEventNodes, selectedEvent);
   }
-  if (safeSelectedDetailTab === Preview) {
+  if (safeSelectedDetailTab === Preview$1) {
     return getPreviewContentNodes(previewEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization);
   }
-  if (safeSelectedDetailTab === Payload) {
+  if (safeSelectedDetailTab === Payload$1) {
     return getPayloadContentNodes(payloadEventNodes, selectedEvent);
   }
+  if (safeSelectedDetailTab === Headers$1) {
+    return getHeadersContentNodes(responseEventNodes, selectedEvent, collapsedHeaderSections);
+  }
   return getResponseContentNodes(responseEventNodes, selectedEvent);
 };
 
-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 getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs(), previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, previewVirtualization) => {
+const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs(), previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, previewVirtualization, collapsedHeaderSections = []) => {
   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 contentNodes = getSelectedContentNodes(safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization);
+  const contentNodes = getSelectedContentNodes(safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization, collapsedHeaderSections);
   return [{
     childCount: 2,
     className: ChatDebugViewDetails,
     type: Section
-  }, {
-    childCount: 2,
-    className: ChatDebugViewDetailsTop,
-    onContextMenu: HandleDetailsTopContextMenu,
-    type: Div
-  }, ...getDetailsCloseButtonDom(), ...getTabNodes(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
+  }, ...getDetailsTopVirtualDom(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
+};
+
+const td$2 = {
+  childCount: 1,
+  className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
+  type: Td
+};
+const getCellDurationDom = event => {
+  return [td$2, text(getEventTableDurationText(event))];
 };
 
 const getMethods = new Set(['list_dir', 'list_files', 'read_file']);
 const postMethods = new Set(['create_directory', 'create_file', 'mkdir', 'write_file']);
 const deleteMethods = new Set(['delete_directory', 'delete_file', 'delete_folder', 'remove_directory', 'remove_file', 'remove_folder']);
 const getEventTableMethodLabel = event => {
+  if (event.method) {
+    return event.method;
+  }
   const toolName = getToolName(event);
   if (!toolName) {
     return '';
@@ -6735,52 +7856,72 @@ const getEventTableMethodLabel = event => {
   return '';
 };
 
+const td$1 = {
+  childCount: 1,
+  className: TableCell,
+  type: Td
+};
+const getCellMethodDom = event => {
+  return [td$1, text(getEventTableMethodLabel(event))];
+};
+
+const td = {
+  childCount: 1,
+  className: mergeClassNames(TableCell, ChatDebugViewCellSize),
+  type: Td
+};
+const getCellSizeDom = event => {
+  return [td, text(formatBytes(event.size ?? 0))];
+};
+
+const getCellStatusDom = (event, isErrorStatus) => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
+    type: Td
+  }, text(getStatusText(event))];
+};
+
+const getCellTypeDom = event => {
+  return [{
+    childCount: 1,
+    className: TableCell,
+    type: Td
+  }, text(getEventTableTypeLabel(event))];
+};
+
+const getTableCellDom = (column, event, isErrorStatus) => {
+  switch (column) {
+    case Duration:
+      return getCellDurationDom(event);
+    case Method:
+      return getCellMethodDom(event);
+    case Size:
+      return getCellSizeDom(event);
+    case Status$1:
+      return getCellStatusDom(event, isErrorStatus);
+    case Type:
+      return getCellTypeDom(event);
+    default:
+      return [];
+  }
+};
+
 const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
-  return orderedVisibleTableColumns.flatMap((column, index) => {
-    switch (column) {
-      case Duration:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
-          type: Td
-        }, text(getEventTableDurationText(event))];
-      case Method:
-        return [{
-          childCount: 1,
-          className: TableCell,
-          type: Td
-        }, text(getEventTableMethodLabel(event))];
-      case Status$1:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
-          type: Td
-        }, text(getStatusText(event))];
-      case Type:
-        return [{
-          childCount: 1,
-          className: TableCell,
-          type: Td
-        }, text(getEventTableTypeLabel(event))];
-      default:
-        return [];
-    }
+  return orderedVisibleTableColumns.flatMap(column => {
+    return getTableCellDom(column, event, isErrorStatus);
   });
 };
 
-const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defaultVisibleTableColumns, startIndex = 0) => {
-  return events.flatMap((event, i) => {
-    const actualIndex = startIndex + i;
-    const isEvenRow = actualIndex % 2 === 1;
-    const rowClassName = isEvenRow ? TableRowEven : TableRowOdd;
-    const isSelected = selectedEventIndex === actualIndex;
-    const isErrorStatus = hasErrorStatus(event);
-    const rowCellNodes = getRowCellNodes(event, isErrorStatus, visibleTableColumns);
+const getDevtoolsRows = (rows, visibleTableColumns = defaultVisibleTableColumns) => {
+  return rows.flatMap(row => {
+    const rowClassName = row.isEven ? TableRowEven : TableRowOdd;
+    const rowCellNodes = getRowCellNodes(row.event, row.isErrorStatus, visibleTableColumns);
     return [{
       childCount: visibleTableColumns.length,
-      className: mergeClassNames(TableRow, rowClassName, isSelected ? TableRowSelected : ''),
-      'data-index': `${actualIndex}`,
+      className: mergeClassNames(TableRow, rowClassName, row.isSelected ? TableRowSelected : ''),
+      'data-index': `${row.index}`,
       type: Tr
     }, ...rowCellNodes];
   });
@@ -6856,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) => {
@@ -6916,23 +8040,27 @@ const getTableBodyDom = (rowNodes, eventCount) => {
     childCount: eventCount === 0 ? 1 : eventCount,
     className: TableBody,
     onContextMenu: HandleTableBodyContextMenu,
+    onDblClick: HandleTableRowDoubleClick,
     onPointerDown: HandleEventRowClickAt,
     type: TBody
   }, ...rowNodes];
 };
 
-const tableColClassNames = ['TableColZero', 'TableColOne', 'TableColTwo', 'TableColThree'];
+const tableColClassNames = ['TableColZero', 'TableColOne', 'TableColTwo', 'TableColThree', 'TableColFour'];
 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
-  }))];
+  }, ...orderedVisibleTableColumns.map((_, index) => {
+    const columnClassName = tableColClassNames[index] ?? `TableCol${index}`;
+    return {
+      childCount: 0,
+      className: `${TableCol} ${columnClassName}`,
+      type: Col
+    };
+  })];
 };
 
 const getHeaderCellNode = (column, tableColumns) => {
@@ -6963,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,
@@ -6973,8 +8101,8 @@ const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleT
   }, ...getTableColumnGroupDom(visibleTableColumns), ...getTableHeaderDom(visibleTableColumns, tableColumns), ...getTableBodyDom(rowNodes, eventCount)];
 };
 
-const resizerNames = ['ResizerOne', 'ResizerTwo', 'ResizerThree'];
-const resizerClassNames = [ResizerOne, ResizerTwo, ResizerThree];
+const resizerNames = ['ResizerOne', 'ResizerTwo', 'ResizerThree', 'ResizerFour'];
+const resizerClassNames = [ResizerOne, ResizerTwo, ResizerThree, ResizerFour];
 const getTableResizersDom = visibleTableColumns => {
   const visibleColumnCount = getOrderedVisibleTableColumns(visibleTableColumns).length;
   const resizerCount = Math.max(0, visibleColumnCount - 1);
@@ -7020,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,
@@ -7031,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) => {
@@ -7103,6 +8231,20 @@ const formatPercent = value => {
   return `${Number(value.toFixed(3))}%`;
 };
 
+const startHandle = {
+  childCount: 0,
+  className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleStart, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
+  name: Start,
+  role: None,
+  type: Button$1
+};
+const endHandle = {
+  childCount: 0,
+  className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleEnd, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
+  name: End,
+  role: None,
+  type: Button$1
+};
 const getSelectionNodesDom = (hasSelection, selectionStartPercent, selectionEndPercent) => {
   if (!hasSelection || selectionStartPercent === null || selectionEndPercent === null) {
     return [];
@@ -7112,19 +8254,7 @@ const getSelectionNodesDom = (hasSelection, selectionStartPercent, selectionEndP
     className: ChatDebugViewTimelineSelectionRange,
     style: `left:${formatPercent(selectionStartPercent)};width:${formatPercent(selectionEndPercent - selectionStartPercent)};`,
     type: Div
-  }, {
-    childCount: 0,
-    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleStart, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
-    name: Start,
-    role: None,
-    type: Button$1
-  }, {
-    childCount: 0,
-    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleEnd, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
-    name: End,
-    role: None,
-    type: Button$1
-  }];
+  }, startHandle, endHandle];
 };
 
 const getTimelineBadgeValues = durationSeconds => {
@@ -7211,9 +8341,10 @@ 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) => {
+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 rowNodes = getDevtoolsRows(visibleEvents, selectedEventIndex, visibleTableColumns, minLineY);
+  const rows = createDevtoolsRows(visibleEvents, selectedEventIndex, minLineY);
+  const rowNodes = getDevtoolsRows(rows, visibleTableColumns);
   const effectiveRange = getEffectiveTimelineRange(timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
   const resolvedTimelineInfo = timelineInfo || getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
   const timelineNodes = getTimelineDom(resolvedTimelineInfo, timelineHoverPercent);
@@ -7232,10 +8363,9 @@ 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 detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualizationOptions);
+  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;
   const rootChildCount = 3;
@@ -7284,12 +8414,12 @@ const getTopLevelChildCount = nodes => {
   return count;
 };
 const getEventCategoryFilterDescription = eventCategoryFilters => {
-  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All)) {
+  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All$1)) {
     return '';
   }
   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) => {
+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);
   }
@@ -7309,11 +8439,11 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   const hasFilterValue = filterDescriptionParts.length > 0;
   const filterDescription = filterDescriptionParts.join(' ');
   const noFilteredEventsMessage = noEventsFoundMatching(filterDescription);
-  const useNoToolCallEventsMessage = eventCategoryFilters.length === 1 && eventCategoryFilters[0] === Tools && !trimmedFilterValue && !hasTimelineFilter;
+  const useNoToolCallEventsMessage = eventCategoryFilters.length === 1 && eventCategoryFilters[0] === Tools$1 && !trimmedFilterValue && !hasTimelineFilter;
   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);
+    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);
@@ -7347,9 +8477,9 @@ const renderItems = (oldState, newState) => {
   if (newState.initial) {
     return [SetDom2, newState.uid, []];
   }
-  const filteredEvents = getCurrentEvents$2(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);
+  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];
 };
 
@@ -7434,6 +8564,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleEventRowClickAt,
     params: ['handleEventRowClickAt', ClientX, ClientY, Button]
+  }, {
+    name: HandleTableRowDoubleClick,
+    params: ['handleTableRowDoubleClick', ClientX, ClientY]
   }, {
     name: HandleTableBodyContextMenu,
     params: ['handleTableBodyContextMenu', ClientX, ClientY],
@@ -7510,12 +8643,10 @@ const renderEventListeners = () => {
   }, {
     name: HandleTableWheel,
     params: ['handleTableWheel', 'event.deltaY'],
-    passive: true,
     preventDefault: true
   }, {
     name: HandlePreviewTextWheel,
     params: ['handlePreviewTextWheel', 'event.deltaY'],
-    passive: true,
     preventDefault: true
   }, {
     name: HandlePreviewTextScrollBarPointerDown,
@@ -7545,7 +8676,7 @@ const renderEventListeners = () => {
     params: ['handleTimelineDoubleClick']
   }, {
     name: HandlePreviewTextPointerDown,
-    params: ['handlePreviewTextPointerDown', 'event.clientX - event.currentTarget.getBoundingClientRect().left', 'event.clientY - event.currentTarget.getBoundingClientRect().top']
+    params: ['handlePreviewTextPointerDown']
   }];
 };
 
@@ -7554,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
   };
 };
 
@@ -7571,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.width, state.tableWidth)
+    tableWidth
   });
 };
 
@@ -7595,7 +8732,6 @@ const saveState = state => {
     selectedEventId,
     sessionId,
     tableColumns,
-    tableColumnWidths,
     timelineEndSeconds,
     timelineStartSeconds
   } = state;
@@ -7606,7 +8742,7 @@ const saveState = state => {
     selectedDetailTab: getSelectedDetailTab(detailTabs),
     selectedEventId,
     sessionId,
-    tableColumnWidths,
+    tableColumnWidths: getTableColumnWidths(tableColumns),
     timelineEndSeconds,
     timelineStartSeconds,
     visibleTableColumns: getVisibleTableColumns(tableColumns)
@@ -7639,19 +8775,9 @@ const setEvents = (state, events) => {
   }));
 };
 
-const setSessionIdDependencies = {
-  listChatViewEvents: listChatViewEvents,
-  registerUpdateListener: registerUpdateListener
-};
 const setSessionId = async (state, sessionId) => {
-  const {
-    databaseName,
-    dataBaseVersion,
-    eventStoreName,
-    sessionIdIndexName
-  } = state;
-  const result = await setSessionIdDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
-  await setSessionIdDependencies.registerUpdateListener(sessionId, rpcId, state.uid);
+  const result = await listChatViewEvents(sessionId);
+  await registerUpdateListener(sessionId, rpcId, state.uid);
   if (result.type === 'error') {
     return {
       ...state,
@@ -7690,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;
       }
@@ -7750,6 +8879,8 @@ const commandMap = {
   'ChatDebug.handleTableResizerPointerMove': wrapCommand(handleTableResizerPointerMove),
   'ChatDebug.handleTableResizerPointerUp': wrapCommand(handleTableResizerPointerUp),
   'ChatDebug.handleTableRowCopy': wrapCommand(handleTableRowCopy),
+  'ChatDebug.handleTableRowDoubleClick': wrapCommand(handleTableRowDoubleClick),
+  'ChatDebug.handleTableRowOpenInNewTab': wrapCommand(handleTableRowOpenInNewTab),
   'ChatDebug.handleTableScrollBarPointerDown': wrapCommand(handleTableScrollBarPointerDown),
   'ChatDebug.handleTableScrollBarPointerMove': wrapCommand(handleTableScrollBarPointerMove),
   'ChatDebug.handleTableScrollBarPointerUp': wrapCommand(handleTableScrollBarPointerUp),