@lvce-editor/chat-debug-view 10.9.0 → 10.11.0

package/dist/chatDebugViewWorkerMain.js

@@ -1435,6 +1435,7 @@ const i18nString = (key, placeholders = emptyObject) => {
 const All$1 = 'All';
 const CloseDetails$1 = 'Close details';
 const Copy = 'Copy';
+const CachedTokens = 'Cached Tokens';
 const DetailSections = 'Detail sections';
 const Duration$1 = 'Time';
 const Ended = 'Ended';
@@ -1442,17 +1443,21 @@ 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$1 = '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 Name = 'Name';
 const Network$1 = '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 OutputTokens = 'Output Tokens';
 const Payload$1 = 'Payload';
 const Preview$1 = 'Preview';
 const Refresh$1 = 'Refresh';
@@ -1466,17 +1471,22 @@ 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 Tokens$1 = 'Tokens';
 const ToSeconds = 'to {PH1}s';
 const Tools$1 = 'Tools';
 const Type$1 = 'Type';
 const Ui$1 = '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 cachedTokens = () => {
+  return i18nString(CachedTokens);
+};
 const status = () => {
   return i18nString(Status$2);
 };
@@ -1514,12 +1524,18 @@ const fromSeconds = seconds => {
     PH1: seconds
   });
 };
+const headers = () => {
+  return i18nString(Headers$1);
+};
 const invalidSessionId = () => {
   return i18nString(InvalidSessionId);
 };
 const imageCouldNotBeLoaded = () => {
   return i18nString(ImageCouldNotBeLoaded);
 };
+const inputTokens = () => {
+  return i18nString(InputTokens);
+};
 const invalidUriEncoding = () => {
   return i18nString(InvalidUriEncoding);
 };
@@ -1532,6 +1548,9 @@ const missingUri = () => {
 const method = () => {
   return i18nString(Method$1);
 };
+const name = () => {
+  return i18nString(Name);
+};
 const network = () => {
   return i18nString(Network$1);
 };
@@ -1557,6 +1576,9 @@ const preview = () => {
 const payload = () => {
   return i18nString(Payload$1);
 };
+const outputTokens = () => {
+  return i18nString(OutputTokens);
+};
 const refresh$1 = () => {
   return i18nString(Refresh$1);
 };
@@ -1584,6 +1606,9 @@ const stream = () => {
 const timing = () => {
   return i18nString(Timing$1);
 };
+const tokens = () => {
+  return i18nString(Tokens$1);
+};
 const tableSummary = (eventCount, duration) => {
   return i18nString(eventCount === 1 ? TableSummarySingular : TableSummaryPlural, {
     PH1: String(eventCount),
@@ -1601,6 +1626,9 @@ const tools = () => {
 const type = () => {
   return i18nString(Type$1);
 };
+const value = () => {
+  return i18nString(Value);
+};
 const ui = () => {
   return i18nString(Ui$1);
 };
@@ -1641,16 +1669,25 @@ const Stream = 'stream';
 const Response = 'response';
 const Preview = 'preview';
 const Payload = 'payload';
+const Headers = 'headers';
+const Tokens = 'tokens';
 const Timing = 'timing';
 
 const isDetailTab = value => {
-  return value === Response || value === Preview || value === Payload || value === Timing;
+  return value === Response || value === Preview || value === Payload || value === Headers || value === Tokens || value === Headers || value === Timing;
 };
 
 const getSafeSelectedDetailTab = selectedDetailTab => {
   return isDetailTab(selectedDetailTab) ? selectedDetailTab : Response;
 };
 
+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;
@@ -1658,10 +1695,90 @@ const hasTimingDetails = event => {
   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, event) => {
+  const hasHeadersTab = event ? hasHeadersDetails(event) : false;
+  const hasTokensTab = event ? hasTokenUsageDetails(event) : false;
   const hasTimingTab = event ? hasTimingDetails(event) : true;
   const safeSelectedDetailTab = getSafeSelectedDetailTab(selectedDetailTab);
-  const normalizedSelectedDetailTab = hasTimingTab || safeSelectedDetailTab !== Timing ? safeSelectedDetailTab : Response;
+  let normalizedSelectedDetailTab = safeSelectedDetailTab;
+  if (!hasHeadersTab && normalizedSelectedDetailTab === Headers) {
+    normalizedSelectedDetailTab = Response;
+  }
+  if (!hasTokensTab && normalizedSelectedDetailTab === Tokens) {
+    normalizedSelectedDetailTab = Response;
+  }
+  if (!hasTimingTab && normalizedSelectedDetailTab === Timing) {
+    normalizedSelectedDetailTab = Response;
+  }
   const detailTabs = [{
     isSelected: normalizedSelectedDetailTab === Preview,
     label: preview(),
@@ -1675,6 +1792,20 @@ const createDetailTabs = (selectedDetailTab = Response, event) => {
     label: response(),
     name: Response
   }];
+  if (hasHeadersTab) {
+    detailTabs.push({
+      isSelected: normalizedSelectedDetailTab === Headers,
+      label: headers(),
+      name: Headers
+    });
+  }
+  if (hasTokensTab) {
+    detailTabs.push({
+      isSelected: normalizedSelectedDetailTab === Tokens,
+      label: tokens(),
+      name: Tokens
+    });
+  }
   if (hasTimingTab) {
     detailTabs.push({
       isSelected: normalizedSelectedDetailTab === Timing,
@@ -1904,31 +2035,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 +2104,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 +2116,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,
@@ -2217,11 +2340,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 +2364,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 +2378,7 @@ const createDefaultState = () => {
     previewTextScrollBarHandleOffset: 0,
     previewTextScrollBarPointerActive: false,
     sashPointerActive: false,
+    sashWidth,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null,
@@ -2265,6 +2402,7 @@ const createDefaultState = () => {
     timelineEvents: [],
     timelineFilterDescription: '',
     timelineHeight: 81,
+    timelineHorizontalPadding,
     timelineHoverPercent: null,
     timelineHoverSeconds: '',
     timelineInfo: emptyTimelineInfo,
@@ -2275,6 +2413,7 @@ const createDefaultState = () => {
     uid: 0,
     uri: '',
     useDevtoolsLayout: true,
+    viewPadding,
     width: 0,
     x: 0,
     y: 0
@@ -2747,7 +2886,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 +2915,7 @@ const getTableBodyY = (state, hasTimeline) => {
     devtoolsRootGap,
     devtoolsTimelineHeight,
     devtoolsTopHeight,
+    viewPadding,
     y
   } = state;
   return y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
@@ -2783,7 +2926,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) {
@@ -3120,7 +3263,6 @@ const getTableBodyEventIndex = (state, eventX, eventY) => {
     tableMinLineY,
     tableWidth,
     useDevtoolsLayout,
-    width,
     x
   } = state;
   if (!useDevtoolsLayout) {
@@ -3130,8 +3272,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;
@@ -4320,7 +4462,7 @@ const handleSashPointerMove = (state, eventX, eventY) => {
   }
   return {
     ...state,
-    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
+    tableWidth: getTableWidthFromClientX(state, eventX)
   };
 };
 
@@ -4385,7 +4527,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)
   };
 };
 
@@ -4550,10 +4692,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 +4893,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,7 +4939,7 @@ const getLineCount = state => {
     return 0;
   }
   const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
-  if (selectedDetailTab === Timing) {
+  if (selectedDetailTab === Timing || selectedDetailTab === Tokens) {
     return 0;
   }
   if (selectedDetailTab === Preview) {
@@ -4825,14 +4955,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 +4971,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 +5010,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 +5018,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 +5032,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 +5096,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 +5529,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';
@@ -5611,6 +5824,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,7 +6959,43 @@ 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 === Tokens) {
+    return getTokenUsageContentNodes(responseEventNodes, selectedEvent);
+  }
   if (safeSelectedDetailTab === Timing) {
     return getTimingContentNodes(responseEventNodes, selectedEvent);
   }
@@ -6663,6 +7005,9 @@ const getSelectedContentNodes = (safeSelectedDetailTab, previewEventNodes, paylo
   if (safeSelectedDetailTab === Payload) {
     return getPayloadContentNodes(payloadEventNodes, selectedEvent);
   }
+  if (safeSelectedDetailTab === Headers) {
+    return getHeadersContentNodes(responseEventNodes, selectedEvent);
+  }
   return getResponseContentNodes(responseEventNodes, selectedEvent);
 };
 
@@ -7510,12 +7855,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 +7916,7 @@ const handleResize = (state, dimensions) => {
   };
   return applyVirtualTableState({
     ...nextState,
-    tableWidth: clampTableWidth(nextState.width, state.tableWidth)
+    tableWidth: clampTableWidth(nextState, state.tableWidth)
   });
 };
 

package/package.json

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