@lvce-editor/chat-debug-view 10.10.0 → 10.13.0

package/dist/chatDebugViewWorkerMain.js

@@ -1185,6 +1185,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('.');
@@ -1420,6 +1423,31 @@ 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 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 +1460,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,49 +1471,62 @@ 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 Headers = 'Headers';
 const ImageCouldNotBeLoaded = 'image could not be loaded';
+const InputTokens = 'Input Tokens';
 const InvalidSessionId = 'Invalid session id';
 const InvalidUriEncoding = 'Invalid URI encoding';
 const InvalidUriFormat = 'Invalid URI format';
 const Method$1 = 'Method';
 const MissingUri = 'Missing URI';
-const Network$1 = 'Network';
+const Name = 'Name';
+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 Response = 'Response';
 const SecondsRange = '{PH1}s-{PH2}s';
 const Started = 'Started';
 const Status$2 = 'Status';
-const Stream$1 = 'Stream';
+const Stream = 'Stream';
 const TableSummaryPlural = '{PH1} events, {PH2} from start to finish';
 const TableSummarySingular = '{PH1} event, {PH2} from start to finish';
-const Timing$1 = 'Timing';
+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 Value = 'Value';
 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,12 +1556,18 @@ const fromSeconds = seconds => {
     PH1: seconds
   });
 };
+const headers = () => {
+  return i18nString(Headers);
+};
 const invalidSessionId = () => {
   return i18nString(InvalidSessionId);
 };
 const imageCouldNotBeLoaded = () => {
   return i18nString(ImageCouldNotBeLoaded);
 };
+const inputTokens = () => {
+  return i18nString(InputTokens);
+};
 const invalidUriEncoding = () => {
   return i18nString(InvalidUriEncoding);
 };
@@ -1532,8 +1580,11 @@ const missingUri = () => {
 const method = () => {
   return i18nString(Method$1);
 };
+const name = () => {
+  return i18nString(Name);
+};
 const network = () => {
-  return i18nString(Network$1);
+  return i18nString(Network);
 };
 const noChatSessionFound = sessionId => {
   return i18nString(NoChatSessionFound, {
@@ -1552,13 +1603,16 @@ 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);
@@ -1567,7 +1621,7 @@ const resetColumns = () => {
   return i18nString(ResetColumns);
 };
 const response = () => {
-  return i18nString(Response$1);
+  return i18nString(Response);
 };
 const secondsRange = (start, end) => {
   return i18nString(SecondsRange, {
@@ -1579,10 +1633,13 @@ const started = () => {
   return i18nString(Started);
 };
 const stream = () => {
-  return i18nString(Stream$1);
+  return i18nString(Stream);
 };
 const timing = () => {
-  return i18nString(Timing$1);
+  return i18nString(Timing);
+};
+const tokens = () => {
+  return i18nString(Tokens);
 };
 const tableSummary = (eventCount, duration) => {
   return i18nString(eventCount === 1 ? TableSummarySingular : TableSummaryPlural, {
@@ -1596,13 +1653,16 @@ const toSeconds = seconds => {
   });
 };
 const tools = () => {
-  return i18nString(Tools$1);
+  return i18nString(Tools);
 };
 const type = () => {
   return i18nString(Type$1);
 };
+const value = () => {
+  return i18nString(Value);
+};
 const ui = () => {
-  return i18nString(Ui$1);
+  return i18nString(Ui);
 };
 const unableToLoadDebugSessionInvalidUri = uri => {
   return i18nString(UnableToLoadDebugSessionInvalidUri, {
@@ -1620,159 +1680,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 +1751,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,29 +1770,33 @@ 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 isDetailTab = value => {
+  return value === Response$1 || value === Preview$1 || value === Payload$1 || value === Headers$1 || value === Tokens$1 || value === Headers$1 || value === Timing$1;
+};
+
 const RE_SPACE = /\s+/;
-const tokenToEventCategoryFilter = new Map([['@tools', Tools], ['@network', Network], ['@ui', Ui], ['@stream', Stream]]);
+const tokenToEventCategoryFilter = new Map([['@tools', Tools$1], ['@network', Network$1], ['@ui', Ui$1], ['@stream', Stream$1]]);
 const parseFilterValue = filterValue => {
   const normalizedFilter = filterValue.trim().toLowerCase();
   if (!normalizedFilter) {
     return {
-      eventCategoryFilter: All,
+      eventCategoryFilter: All$1,
       filterText: ''
     };
   }
   const parts = normalizedFilter.split(RE_SPACE);
-  const eventCategoryFilter = parts.map(part => tokenToEventCategoryFilter.get(part)).find(Boolean) || All;
+  const eventCategoryFilter = parts.map(part => tokenToEventCategoryFilter.get(part)).find(Boolean) || All$1;
   const filterText = parts.filter(part => !tokenToEventCategoryFilter.has(part)).join(' ');
   return {
     eventCategoryFilter,
@@ -1833,6 +1804,22 @@ const parseFilterValue = filterValue => {
   };
 };
 
+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 Type = 'type';
 const Method = 'method';
 const Duration = 'duration';
@@ -1904,31 +1891,23 @@ const defaultTableColumnWidths = {
   type: 260
 };
 
-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 clampTableWidth = (width, tableWidth) => {
-  const mainWidth = getMainWidth(width);
-  const maxTableWidth = Math.max(0, mainWidth - minDetailsWidth - sashWidth);
-  const minClampedTableWidth = Math.min(minTableWidth, maxTableWidth);
+const getMainWidth = state => {
+  return Math.max(0, state.width - state.horizontalPadding);
+};
+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 getTableWidthFromClientX = (state, clientX) => {
+  const nextTableWidth = clientX - state.x - state.leftPadding;
+  return clampTableWidth(state, nextTableWidth);
 };
 
 const minimumTableColumnWidths = {
@@ -1981,8 +1960,8 @@ const getTableColumnLayout = (tableWidth, visibleTableColumns, tableColumnWidths
   };
 };
 
-const getResizedTableColumnWidths = (width, tableWidth, visibleTableColumns, tableColumnWidths, viewX, clientX, resizerDownId) => {
-  const clampedTableWidth = clampTableWidth(width, tableWidth);
+const getResizedTableColumnWidths = (state, visibleTableColumns, tableColumnWidths, clientX, resizerDownId) => {
+  const clampedTableWidth = clampTableWidth(state, state.tableWidth);
   const layout = getTableColumnLayout(clampedTableWidth, visibleTableColumns, tableColumnWidths);
   if (resizerDownId < 1 || resizerDownId >= layout.visibleColumns.length) {
     return tableColumnWidths;
@@ -1993,7 +1972,7 @@ const getResizedTableColumnWidths = (width, tableWidth, visibleTableColumns, tab
   const minimumWidth = getMinimumTableColumnWidth(resizedColumn);
   const minimumRemainingWidth = layout.visibleColumns.slice(boundaryIndex + 1).reduce((total, column) => total + getMinimumTableColumnWidth(column), 0);
   const maxWidth = Math.max(minimumWidth, clampedTableWidth - precedingWidth - minimumRemainingWidth);
-  const nextWidth = clientX - viewX - leftPadding - precedingWidth;
+  const nextWidth = clientX - state.x - state.leftPadding - precedingWidth;
   const clampedWidth = Math.max(minimumWidth, Math.min(nextWidth, maxWidth));
   return {
     ...tableColumnWidths,
@@ -2017,7 +1996,7 @@ const isTableColumnWidths = value => {
   return isFiniteNumber(record.type) && isFiniteNumber(record.method) && isFiniteNumber(record.duration) && 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;
 };
@@ -2084,6 +2063,145 @@ 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 => {
+  return event.type === 'ai-request' && isHeadersRecord$1(event.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 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 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;
@@ -2217,11 +2335,20 @@ 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(),
     databaseName: 'lvce-chat-view-sessions',
     dataBaseVersion: 2,
+    defaultTableWidth,
     detailTabs: createDetailTabs(),
     devtoolsRootGap: 4,
     devtoolsTimelineHeight: 88,
@@ -2232,9 +2359,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 +2373,7 @@ const createDefaultState = () => {
     previewTextScrollBarHandleOffset: 0,
     previewTextScrollBarPointerActive: false,
     sashPointerActive: false,
+    sashWidth,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null,
@@ -2265,6 +2397,7 @@ const createDefaultState = () => {
     timelineEvents: [],
     timelineFilterDescription: '',
     timelineHeight: 81,
+    timelineHorizontalPadding,
     timelineHoverPercent: null,
     timelineHoverSeconds: '',
     timelineInfo: emptyTimelineInfo,
@@ -2275,6 +2408,7 @@ const createDefaultState = () => {
     uid: 0,
     uri: '',
     useDevtoolsLayout: true,
+    viewPadding,
     width: 0,
     x: 0,
     y: 0
@@ -2326,6 +2460,18 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
+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 filterEventsByTimelineRange = (events, startValue, endValue) => {
   const eventsWithTime = getEventsWithTime(events);
   if (eventsWithTime.length === 0) {
@@ -2538,20 +2684,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));
@@ -2561,7 +2707,7 @@ const getFilteredEvents = (events, filterValue, eventCategoryFilters, showInputE
   const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
   const collapsedEvents = collapseToolExecutionEvents(visibleEvents);
   const parsedFilter = parseFilterValue(filterValue);
-  const activeEventCategoryFilters = parsedFilter.eventCategoryFilter === All ? eventCategoryFilters : [parsedFilter.eventCategoryFilter];
+  const activeEventCategoryFilters = parsedFilter.eventCategoryFilter === All$1 ? eventCategoryFilters : [parsedFilter.eventCategoryFilter];
   const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilters));
   const {
     filterText
@@ -2747,7 +2893,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 +2922,7 @@ const getTableBodyY = (state, hasTimeline) => {
     devtoolsRootGap,
     devtoolsTimelineHeight,
     devtoolsTopHeight,
+    viewPadding,
     y
   } = state;
   return y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
@@ -2783,7 +2933,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) {
@@ -2984,7 +3134,15 @@ const selectEventAtIndexDependencies = {
 };
 const getCurrentEvents$1 = state => getCurrentEvents$2(state);
 const selectEventAtIndex = async (state, selectedEventIndex, dependencies = selectEventAtIndexDependencies) => {
-  const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
+  const {
+    databaseName,
+    dataBaseVersion,
+    detailTabs,
+    eventStoreName,
+    sessionId,
+    sessionIdIndexName
+  } = state;
+  const selectedDetailTab = getSelectedDetailTab(detailTabs);
   const currentEvents = getCurrentEvents$1(state);
   const selectedEvent = currentEvents[selectedEventIndex];
   if (!selectedEvent) {
@@ -3003,7 +3161,7 @@ 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 dependencies.loadSelectedEvent(databaseName, dataBaseVersion, eventStoreName, sessionId, sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return withSelectedEventVisible({
     ...state,
@@ -3067,6 +3225,12 @@ 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()
   }];
 };
 
@@ -3120,7 +3284,6 @@ const getTableBodyEventIndex = (state, eventX, eventY) => {
     tableMinLineY,
     tableWidth,
     useDevtoolsLayout,
-    width,
     x
   } = state;
   if (!useDevtoolsLayout) {
@@ -3130,8 +3293,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,9 +3333,51 @@ const getMenuIds = () => {
   return [MenuChatDebugTableHeader, MenuChatDebugTableBody, 556, 557];
 };
 
+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 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({
+          eventId: item.eventId,
+          type: 'ai-request-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 {
-    return await listChatViewEvents$1(sessionId);
+    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,
@@ -3582,7 +3787,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;
   }
@@ -3703,7 +3908,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;
   }
@@ -3789,7 +3994,7 @@ const handleDetailTab = (state, value) => {
   };
 };
 const inputHandlers = {
-  [CloseDetails]: handleCloseDetails,
+  [CloseDetails$1]: handleCloseDetails,
   [DetailTab]: handleDetailTab,
   [EventCategoryFilter]: handleEventCategoryFilter,
   [Filter]: handleFilter,
@@ -4320,7 +4525,7 @@ const handleSashPointerMove = (state, eventX, eventY) => {
   }
   return {
     ...state,
-    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
+    tableWidth: getTableWidthFromClientX(state, eventX)
   };
 };
 
@@ -4385,7 +4590,7 @@ const handleTableResizerPointerMove = (state, clientX) => {
   }
   return {
     ...state,
-    tableColumnWidths: getResizedTableColumnWidths(state.width, state.tableWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths, state.x, clientX, state.tableResizerDownId)
+    tableColumnWidths: getResizedTableColumnWidths(state, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths, clientX, state.tableResizerDownId)
   };
 };
 
@@ -4410,6 +4615,20 @@ const handleTableRowCopy = async (state, eventIndex) => {
   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) {
@@ -4550,10 +4769,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 => {
@@ -4751,20 +4970,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 +5016,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,14 +5032,15 @@ 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 tableWidth = hasSelectedEvent ? clampTableWidth(state, state.tableWidth) : getMainWidth(state);
   const currentEvents = getCurrentEvents$2(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
@@ -4840,7 +5048,7 @@ const getCss = state => {
   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);
@@ -4879,7 +5087,7 @@ const getCss = state => {
   --ResizerOneLeft: ${resizerOneLeft}px;
   --ResizerTwoLeft: ${resizerTwoLeft}px;
   --ResizerThreeLeft: ${resizerThreeLeft}px;
-  --ChatDebugViewSashWidth: ${sashWidth}px;
+  --ChatDebugViewSashWidth: ${state.sashWidth}px;
   --ChatDebugViewTableWidth: ${tableWidth}px;
   --ChatDebugViewTimelineHeight: ${state.timelineHeight}px;
   --ChatDebugViewTimelineCursorGuideLeft: ${state.timelineHoverPercent ?? 0}%;
@@ -4887,7 +5095,7 @@ const getCss = state => {
   --ChatDebugViewTimelineSelectionStartLeft: ${selectionStartPercent ?? 0}%;
   --ChatDebugViewTopSize: ${topSize}px;
   --ChatDebugViewTypeColumnWidth: ${state.tableColumnWidths.type}px;
-  padding: ${viewPadding}px;
+  padding: ${state.viewPadding}px;
   padding-right: 0;
 }
 
@@ -4901,6 +5109,51 @@ const getCss = state => {
   width: calc(100% - var(--ChatDebugViewTableScrollBarWidth));
 }
 
+.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);
+}
+
+.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,12 +5173,40 @@ const getCss = state => {
   width: var(--ChatDebugViewDetailsLineNumberWidth);
 }
 
-.ChatDebugViewDetailsBottom .ChatDebugViewEventLineNumber {
-  display: inline-block;
-  min-width: var(--ChatDebugViewDetailsLineNumberWidth);
-  width: var(--ChatDebugViewDetailsLineNumberWidth);
+.ChatDebugViewHeadersTable {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.ChatDebugViewHeadersCell {
+  border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.12));
+  color: var(--vscode-editor-foreground);
+  padding: 6px 10px;
+  text-align: left;
+  vertical-align: top;
+  word-break: break-word;
+}
+
+.ChatDebugViewHeadersHead .ChatDebugViewHeadersCell {
+  color: var(--vscode-descriptionForeground, rgba(255, 255, 255, 0.7));
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.ChatDebugViewHeadersRowOdd {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.ChatDebugViewHeadersRowEven {
+  background: rgba(255, 255, 255, 0.04);
 }
 
+.ChatDebugViewHeadersCellName {
+  font-weight: 500;
+  width: 38%;
+}
 .PreviewVirtualizedEditor {
   height: var(--ChatDebugViewPreviewViewportHeight);
   overflow: hidden;
@@ -5325,6 +5606,15 @@ const PanelTab = 'PanelTab';
 const PanelTabSelected = 'PanelTabSelected';
 const ChatDebugViewDetailsTabs = 'ChatDebugViewDetailsTabs';
 const ChatDebugViewDetailsTop = 'ChatDebugViewDetailsTop';
+const ChatDebugViewHeadersBody = 'ChatDebugViewHeadersBody';
+const ChatDebugViewHeadersCell = 'ChatDebugViewHeadersCell';
+const ChatDebugViewHeadersCellName = 'ChatDebugViewHeadersCellName';
+const ChatDebugViewHeadersCellValue = 'ChatDebugViewHeadersCellValue';
+const ChatDebugViewHeadersHead = 'ChatDebugViewHeadersHead';
+const ChatDebugViewHeadersRow = 'ChatDebugViewHeadersRow';
+const ChatDebugViewHeadersRowEven = 'ChatDebugViewHeadersRowEven';
+const ChatDebugViewHeadersRowOdd = 'ChatDebugViewHeadersRowOdd';
+const ChatDebugViewHeadersTable = 'ChatDebugViewHeadersTable';
 const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
 const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
 const ChatDebugViewError = 'ChatDebugViewError';
@@ -5525,10 +5815,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;
@@ -5590,7 +5880,7 @@ const detailsCloseButtonDom = [{
   'aria-label': closeDetails(),
   childCount: 1,
   className: ChatDebugViewDetailsClose,
-  name: CloseDetails,
+  name: CloseDetails$1,
   onChange: HandleCloseDetails,
   onClick: HandleCloseDetails,
   type: Button$1,
@@ -5604,6 +5894,44 @@ const getDetailsCloseButtonDom = () => {
   return detailsCloseButtonDom;
 };
 
+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 getDetailsTopVirtualDom = detailTabs => {
+  return [{
+    childCount: 2,
+    className: ChatDebugViewDetailsTop,
+    onContextMenu: HandleDetailsTopContextMenu,
+    type: Div
+  }, ...getDetailsCloseButtonDom(), ...getTabNodes(detailTabs)];
+};
+
 const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
   if (selectedEvent === null) {
     return detailTabs;
@@ -5611,6 +5939,99 @@ const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
   return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
 };
 
+const isHeadersRecord = value => {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const stringifyHeaderValue = value => {
+  try {
+    return JSON.stringify(value, (_key, nestedValue) => {
+      if (typeof nestedValue === 'bigint') {
+        return nestedValue.toString();
+      }
+      return nestedValue;
+    });
+  } catch {
+    return '[unserializable]';
+  }
+};
+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 getHeaders = selectedEvent => {
+  if (selectedEvent === null || !isHeadersRecord(selectedEvent.headers)) {
+    return [];
+  }
+  return Object.entries(selectedEvent.headers);
+};
+const getHeaderRowNodes = (headerName, headerValue, index) => {
+  return [{
+    childCount: 2,
+    className: mergeClassNames(ChatDebugViewHeadersRow, index % 2 === 0 ? ChatDebugViewHeadersRowOdd : ChatDebugViewHeadersRowEven),
+    type: Tr
+  }, {
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellName),
+    type: Td
+  }, text(headerName), {
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellValue),
+    type: Td
+  }, text(getHeaderValueText(headerValue))];
+};
+const getHeadersContentNodes = (responseEventNodes, selectedEvent) => {
+  const headers = getHeaders(selectedEvent);
+  if (headers.length === 0) {
+    return responseEventNodes;
+  }
+  const headerRows = [];
+  for (const [index, [headerName, headerValue]] of headers.entries()) {
+    headerRows.push(...getHeaderRowNodes(headerName, headerValue, index));
+  }
+  return [{
+    childCount: 2,
+    className: ChatDebugViewHeadersTable,
+    type: Table$1
+  }, {
+    childCount: 1,
+    className: ChatDebugViewHeadersHead,
+    type: THead
+  }, {
+    childCount: 2,
+    className: ChatDebugViewHeadersRow,
+    type: Tr
+  }, {
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellName),
+    type: Th
+  }, text(name()), {
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellValue),
+    type: Th
+  }, text(value()), {
+    childCount: headers.length,
+    className: ChatDebugViewHeadersBody,
+    type: TBody
+  }, ...headerRows];
+};
+
 const getEditorRowDom = line => {
   return [{
     childCount: line.childCount,
@@ -6653,48 +7074,58 @@ const getTimingContentNodes = (responseEventNodes, selectedEvent) => {
   return getTimingDetailsDom(selectedEvent);
 };
 
+const getTokenUsageDetailsDom = event => {
+  const usageDetails = getTokenUsageDetails(event);
+  if (!usageDetails) {
+    return [];
+  }
+  const rows = [];
+  let rowCount = 0;
+  if (usageDetails.inputTokens !== undefined) {
+    rows.push(...getTimingRowDom(inputTokens(), String(usageDetails.inputTokens)));
+    rowCount++;
+  }
+  if (usageDetails.outputTokens !== undefined) {
+    rows.push(...getTimingRowDom(outputTokens(), String(usageDetails.outputTokens)));
+    rowCount++;
+  }
+  if (usageDetails.cachedTokens !== undefined) {
+    rows.push(...getTimingRowDom(cachedTokens(), String(usageDetails.cachedTokens)));
+    rowCount++;
+  }
+  return [{
+    childCount: rowCount,
+    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) => {
-  if (safeSelectedDetailTab === Timing) {
+  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);
+  }
   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) => {
   if (previewEventNodes.length === 0 && payloadEventNodes.length === 0 && responseEventNodes.length === 0) {
     return [];
@@ -6707,12 +7138,7 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
     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 getMethods = new Set(['list_dir', 'list_files', 'read_file']);
@@ -7284,7 +7710,7 @@ 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(', ');
@@ -7309,7 +7735,7 @@ 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) {
@@ -7510,12 +7936,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,
@@ -7573,7 +7997,7 @@ const handleResize = (state, dimensions) => {
   };
   return applyVirtualTableState({
     ...nextState,
-    tableWidth: clampTableWidth(nextState.width, state.tableWidth)
+    tableWidth: clampTableWidth(nextState, state.tableWidth)
   });
 };
 
@@ -7750,6 +8174,7 @@ const commandMap = {
   'ChatDebug.handleTableResizerPointerMove': wrapCommand(handleTableResizerPointerMove),
   'ChatDebug.handleTableResizerPointerUp': wrapCommand(handleTableResizerPointerUp),
   'ChatDebug.handleTableRowCopy': wrapCommand(handleTableRowCopy),
+  'ChatDebug.handleTableRowOpenInNewTab': wrapCommand(handleTableRowOpenInNewTab),
   'ChatDebug.handleTableScrollBarPointerDown': wrapCommand(handleTableScrollBarPointerDown),
   'ChatDebug.handleTableScrollBarPointerMove': wrapCommand(handleTableScrollBarPointerMove),
   'ChatDebug.handleTableScrollBarPointerUp': wrapCommand(handleTableScrollBarPointerUp),