@lvce-editor/static-server 0.80.17 → 0.80.19

package/static/{a3a3cca → 26e5d0f}/packages/chat-debug-view/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,48 +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);
@@ -1513,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);
 };
@@ -1528,8 +1577,14 @@ const invalidUriFormat = () => {
 const missingUri = () => {
   return i18nString(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, {
@@ -1548,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);
@@ -1563,7 +1621,7 @@ const resetColumns = () => {
   return i18nString(ResetColumns);
 };
 const response = () => {
-  return i18nString(Response$1);
+  return i18nString(Response);
 };
 const secondsRange = (start, end) => {
   return i18nString(SecondsRange, {
@@ -1575,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, {
@@ -1592,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, {
@@ -1616,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);
@@ -1780,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)));
@@ -1799,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,
@@ -1829,15 +1804,36 @@ 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';
 const Status$1 = 'status';
-const tableColumnNames = [Type, Status$1, Duration];
+const tableColumnNames = [Type, Method, Status$1, Duration];
 const createTableColumns = () => {
   return [{
     isVisible: true,
     label: type(),
     name: Type
+  }, {
+    isVisible: true,
+    label: method(),
+    name: Method
   }, {
     isVisible: true,
     label: status(),
@@ -1877,6 +1873,8 @@ const getTableColumnLabel = (tableColumns, name) => {
   switch (name) {
     case Duration:
       return duration();
+    case Method:
+      return method();
     case Status$1:
       return status();
     case Type:
@@ -1888,39 +1886,33 @@ const getTableColumnLabel = (tableColumns, name) => {
 
 const defaultTableColumnWidths = {
   duration: 110,
+  method: 90,
   status: 110,
   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 = {
   [Duration]: 80,
+  [Method]: 56,
   [Status$1]: 56,
   [Type]: 80
 };
@@ -1968,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;
@@ -1980,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,
@@ -1989,7 +1981,7 @@ const getResizedTableColumnWidths = (width, tableWidth, visibleTableColumns, tab
 };
 
 const isSameTableColumnWidths = (first, second) => {
-  return first.type === second.type && first.duration === second.duration && first.status === second.status;
+  return first.type === second.type && first.method === second.method && first.duration === second.duration && first.status === second.status;
 };
 
 const isFiniteNumber = value => {
@@ -2001,10 +1993,10 @@ const isTableColumnWidths = value => {
     return false;
   }
   const record = value;
-  return isFiniteNumber(record.type) && isFiniteNumber(record.duration) && isFiniteNumber(record.status);
+  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;
 };
@@ -2071,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;
@@ -2101,6 +2232,10 @@ const getEventsWithTime = events => {
   });
 };
 
+const clamp$1 = (value, minimum, maximum) => {
+  return Math.max(minimum, Math.min(value, maximum));
+};
+
 const parseTimelineSeconds = value => {
   const trimmed = value.trim();
   if (!trimmed) {
@@ -2129,8 +2264,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$1(rangeStart, 0, durationSeconds);
+  const normalizedEnd = clamp$1(rangeEnd, 0, durationSeconds);
   return {
     endSeconds: roundSeconds(normalizedEnd),
     hasSelection: true,
@@ -2204,25 +2341,45 @@ 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,
+    devtoolsTopHeight: 28,
     errorMessage: '',
     events: [],
     eventStoreName: 'chat-view-events',
     filterValue: '',
     focus: 0,
     height: 0,
+    horizontalPadding,
     initial: false,
     largeBreakpoint: 900,
+    leftPadding,
     mediumBreakpoint: 600,
+    minDetailsWidth,
+    minTableWidth,
     platform: 0,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     sashPointerActive: false,
+    sashWidth,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null,
@@ -2246,6 +2403,7 @@ const createDefaultState = () => {
     timelineEvents: [],
     timelineFilterDescription: '',
     timelineHeight: 81,
+    timelineHorizontalPadding,
     timelineHoverPercent: null,
     timelineHoverSeconds: '',
     timelineInfo: emptyTimelineInfo,
@@ -2256,6 +2414,7 @@ const createDefaultState = () => {
     uid: 0,
     uri: '',
     useDevtoolsLayout: true,
+    viewPadding,
     width: 0,
     x: 0,
     y: 0
@@ -2293,7 +2452,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.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.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) {
     return [RenderIncremental, RenderCss];
   }
   return [];
@@ -2307,6 +2466,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) {
@@ -2501,7 +2672,7 @@ const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showE
 
 const isNetworkEvent = event => {
   const normalizedType = event.type.toLowerCase();
-  return normalizedType === 'request' || normalizedType === 'response' || normalizedType === 'handle-response' || normalizedType.includes('fetch') || normalizedType.includes('xhr');
+  return normalizedType === 'request' || normalizedType === 'ai-request' || normalizedType === 'response' || normalizedType === 'ai-response-success' || normalizedType === 'handle-response' || normalizedType.includes('fetch') || normalizedType.includes('xhr');
 };
 
 const isStreamEvent = event => {
@@ -2519,20 +2690,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));
@@ -2542,7 +2713,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
@@ -2574,7 +2745,6 @@ const getEventTableDurationText = event => {
   return `${durationText.slice(0, -2)} ms`;
 };
 
-const toolExecutionTypePrefix = 'tool-execution';
 const getToolName = event => {
   if (typeof event.toolName === 'string' && event.toolName) {
     return event.toolName;
@@ -2596,6 +2766,8 @@ const getToolName = event => {
   }
   return name;
 };
+
+const toolExecutionTypePrefix = 'tool-execution';
 const getEventTypeLabel = event => {
   if (!event.type.startsWith(toolExecutionTypePrefix)) {
     return event.type;
@@ -2727,7 +2899,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;
@@ -2748,11 +2923,12 @@ const devtoolsTableScrollBarWidth = 12;
 const devtoolsTableSummaryHeight = 24;
 const minimumDevtoolsTableScrollBarHeight = 20;
 
-const devtoolsRootGap = 4;
-const devtoolsTopHeight = 28;
-const devtoolsTimelineHeight = 88;
 const getTableBodyY = (state, hasTimeline) => {
   const {
+    devtoolsRootGap,
+    devtoolsTimelineHeight,
+    devtoolsTopHeight,
+    viewPadding,
     y
   } = state;
   return y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
@@ -2763,7 +2939,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) {
@@ -2959,12 +3135,17 @@ 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, loadSelectedEvent$1 = loadSelectedEvent) => {
+  const {
+    databaseName,
+    dataBaseVersion,
+    detailTabs,
+    eventStoreName,
+    sessionId,
+    sessionIdIndexName
+  } = state;
+  const selectedDetailTab = getSelectedDetailTab(detailTabs);
   const currentEvents = getCurrentEvents$1(state);
   const selectedEvent = currentEvents[selectedEventIndex];
   if (!selectedEvent) {
@@ -2983,13 +3164,16 @@ 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$1(databaseName, dataBaseVersion, eventStoreName, sessionId, sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return withSelectedEventVisible({
     ...state,
     detailTabs: createDetailTabs(selectedDetailTab, resolvedSelectedEvent),
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
@@ -3044,6 +3228,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()
   }];
 };
 
@@ -3081,7 +3271,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;
@@ -3097,7 +3290,6 @@ const getTableBodyEventIndex = (state, eventX, eventY) => {
     tableMinLineY,
     tableWidth,
     useDevtoolsLayout,
-    width,
     x
   } = state;
   if (!useDevtoolsLayout) {
@@ -3107,8 +3299,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;
@@ -3147,9 +3339,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,
@@ -3332,6 +3566,9 @@ const restoreSelectedEvent = async state => {
       ...state,
       previewTextCursorColumnIndex: null,
       previewTextCursorRowIndex: null,
+      previewTextDeltaY: 0,
+      previewTextScrollBarHandleOffset: 0,
+      previewTextScrollBarPointerActive: false,
       selectedEvent: null,
       selectedEventIndex: null
     };
@@ -3343,6 +3580,9 @@ const restoreSelectedEvent = async state => {
       ...state,
       previewTextCursorColumnIndex: null,
       previewTextCursorRowIndex: null,
+      previewTextDeltaY: 0,
+      previewTextScrollBarHandleOffset: 0,
+      previewTextScrollBarPointerActive: false,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null
@@ -3354,6 +3594,9 @@ const restoreSelectedEvent = async state => {
       ...state,
       previewTextCursorColumnIndex: null,
       previewTextCursorRowIndex: null,
+      previewTextDeltaY: 0,
+      previewTextScrollBarHandleOffset: 0,
+      previewTextScrollBarPointerActive: false,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null
@@ -3365,6 +3608,9 @@ const restoreSelectedEvent = async state => {
     ...state,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
@@ -3449,6 +3695,9 @@ const handleCloseDetails$1 = state => {
     ...state,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null
@@ -3544,7 +3793,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;
   }
@@ -3555,13 +3804,10 @@ const handleEventCategoryFilter$1 = (state, value, ctrlKey = false, metaKey = fa
   return withPreservedSelection$1(state, nextState);
 };
 
-const handleEventRowClickDependencies = {
-  loadSelectedEvent: loadSelectedEvent
-};
 const isPrimaryButton = button => {
   return button === 0;
 };
-const handleEventRowClick = async (state, index, button = 0) => {
+const handleEventRowClick = async (state, index, button = 0, loadSelectedEvent) => {
   const actual = typeof index === 'string' ? Number.parseInt(index, 10) : index;
   if (!isPrimaryButton(button)) {
     return state;
@@ -3569,12 +3815,12 @@ const handleEventRowClick = async (state, index, button = 0) => {
   if (actual === -1) {
     return state;
   }
-  return selectEventAtIndex(state, actual, handleEventRowClickDependencies);
+  return selectEventAtIndex(state, actual, loadSelectedEvent);
 };
 
-const handleEventRowClickAt = async (state, eventX, eventY, button = 0) => {
+const handleEventRowClickAt = async (state, eventX, eventY, button = 0, loadSelectedEvent) => {
   const selectedEventIndex = getTableBodyEventIndex(state, eventX, eventY);
-  return handleEventRowClick(state, selectedEventIndex, button);
+  return handleEventRowClick(state, selectedEventIndex, button, loadSelectedEvent);
 };
 
 const getBoolean = value => {
@@ -3665,7 +3911,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;
   }
@@ -3751,7 +3997,7 @@ const handleDetailTab = (state, value) => {
   };
 };
 const inputHandlers = {
-  [CloseDetails]: handleCloseDetails,
+  [CloseDetails$1]: handleCloseDetails,
   [DetailTab]: handleDetailTab,
   [EventCategoryFilter]: handleEventCategoryFilter,
   [Filter]: handleFilter,
@@ -3880,26 +4126,42 @@ const getResponseContentText = content => {
   } = content;
   return typeof text === 'string' ? text : undefined;
 };
-const getSseResponseCompletedPreviewText = event => {
-  if (event.type !== 'sse-response-completed') {
-    return undefined;
+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;
   }
-  const {
-    value
-  } = event;
-  if (!value || typeof value !== 'object') {
-    return undefined;
-  }
-  const {
-    response
-  } = value;
-  if (!response || typeof response !== 'object') {
-    return undefined;
+  if (event.type === 'ai-response') {
+    const {
+      value
+    } = event;
+    if (!value || typeof value !== 'object') {
+      return undefined;
+    }
+    const {
+      output
+    } = value;
+    return Array.isArray(output) ? output : undefined;
   }
-  const {
-    output
-  } = response;
-  if (!Array.isArray(output) || output.length === 0) {
+  return undefined;
+};
+const getResponsePreviewText = event => {
+  const output = getResponseOutput(event);
+  if (!output || output.length === 0) {
     return undefined;
   }
   const [firstOutput] = output;
@@ -3915,9 +4177,9 @@ const getPreviewMessageText = event => {
   if (isChatMessageUpdatedEvent(event) && typeof event.text === 'string') {
     return event.text;
   }
-  const sseResponseCompletedPreviewText = getSseResponseCompletedPreviewText(event);
-  if (sseResponseCompletedPreviewText !== undefined) {
-    return sseResponseCompletedPreviewText;
+  const responsePreviewText = getResponsePreviewText(event);
+  if (responsePreviewText !== undefined) {
+    return responsePreviewText;
   }
   if (!isChatMessageAddedEvent(event)) {
     return undefined;
@@ -4004,16 +4266,21 @@ const getWriteFilePreviewText = (event, name) => {
   const {
     arguments: toolArguments
   } = event;
-  if (typeof toolArguments !== 'object' || toolArguments === null || !Object.hasOwn(toolArguments, 'content')) {
+  if (typeof toolArguments !== 'object' || toolArguments === null || !Object.hasOwn(toolArguments, 'content') || !Object.hasOwn(toolArguments, 'uri')) {
     return undefined;
   }
   const {
-    content
+    content,
+    uri
   } = toolArguments;
-  if (typeof content !== 'string') {
+  if (typeof content !== 'string' || typeof uri !== 'string') {
     return undefined;
   }
-  return content;
+  return {
+    content,
+    previewType: 'write-file',
+    uri
+  };
 };
 
 const getPreviewEvent = event => {
@@ -4064,6 +4331,77 @@ const getPreviewTextCursorStyle = cursor => {
   return `height: ${previewTextRowHeight}px; left: ${cursor.columnIndex * defaultPreviewTextColumnWidth}px; top: ${cursor.rowIndex * previewTextRowHeight}px; width: 0px;`;
 };
 
+const isWriteFilePreview = value => {
+  return typeof value === 'object' && value !== null && value.previewType === 'write-file' && typeof value.content === 'string' && typeof value.uri === 'string';
+};
+
+const getPreviewTextValue = selectedEvent => {
+  if (!selectedEvent) {
+    return undefined;
+  }
+  const previewEvent = getPreviewEvent(selectedEvent);
+  if (typeof previewEvent === 'string') {
+    return previewEvent;
+  }
+  if (isWriteFilePreview(previewEvent)) {
+    return previewEvent.content;
+  }
+  return undefined;
+};
+const getPreviewTextLineCount = selectedEvent => {
+  const value = getPreviewTextValue(selectedEvent);
+  if (value === undefined) {
+    return 0;
+  }
+  return value.split('\n').length;
+};
+const getPreviewTextViewportHeight = state => {
+  if (!state.selectedEvent) {
+    return 0;
+  }
+  return getTableBodyHeight(state, 1);
+};
+const getPreviewTextMaxDeltaY = (lineCount, viewportHeight) => {
+  return Math.max(lineCount * previewTextRowHeight - viewportHeight, 0);
+};
+const clampPreviewTextDeltaY = (deltaY, lineCount, viewportHeight) => {
+  const maxDeltaY = getPreviewTextMaxDeltaY(lineCount, viewportHeight);
+  if (deltaY < 0) {
+    return 0;
+  }
+  if (deltaY > maxDeltaY) {
+    return maxDeltaY;
+  }
+  return deltaY;
+};
+const getPreviewVirtualizationState = (selectedEvent, viewportHeight, deltaY) => {
+  const totalLineCount = getPreviewTextLineCount(selectedEvent);
+  const clampedDeltaY = clampPreviewTextDeltaY(deltaY, totalLineCount, viewportHeight);
+  const startLineY = Math.floor(clampedDeltaY / previewTextRowHeight);
+  const visibleLineCount = viewportHeight <= 0 ? 0 : Math.max(1, Math.ceil(viewportHeight / previewTextRowHeight));
+  const endLineY = Math.min(totalLineCount, startLineY + visibleLineCount);
+  const maxDeltaY = getPreviewTextMaxDeltaY(totalLineCount, viewportHeight);
+  const scrollBarHeight = getScrollBarHeight(totalLineCount, viewportHeight);
+  const scrollBarOffset = getScrollBarOffset(clampedDeltaY, maxDeltaY, viewportHeight, scrollBarHeight);
+  return {
+    deltaY: clampedDeltaY,
+    endLineY,
+    maxDeltaY,
+    scrollBarHeight,
+    scrollBarOffset,
+    showScrollBar: scrollBarHeight > 0,
+    startLineY,
+    totalLineCount,
+    viewportHeight
+  };
+};
+const setPreviewTextDeltaY = (state, deltaY) => {
+  return {
+    ...state,
+    previewTextDeltaY: clampPreviewTextDeltaY(deltaY, getPreviewTextLineCount(state.selectedEvent), getPreviewTextViewportHeight(state))
+  };
+};
+
 const hasNumberedTextPreview = (state, previewEvent) => {
   if (typeof previewEvent !== 'string') {
     return false;
@@ -4081,7 +4419,8 @@ const handlePreviewTextPointerDown = (state, x, y) => {
   if (!hasNumberedTextPreview(state, previewEvent)) {
     return state;
   }
-  const cursor = getPreviewTextCursorFromPoint(previewEvent, x, y);
+  const deltaY = clampPreviewTextDeltaY(state.previewTextDeltaY, getPreviewTextLineCount(state.selectedEvent), getPreviewTextViewportHeight(state));
+  const cursor = getPreviewTextCursorFromPoint(previewEvent, x, y + deltaY);
   if (state.previewTextCursorColumnIndex === cursor.columnIndex && state.previewTextCursorRowIndex === cursor.rowIndex) {
     return state;
   }
@@ -4092,6 +4431,96 @@ const handlePreviewTextPointerDown = (state, x, y) => {
   };
 };
 
+const getPreviewTextBodyY = state => {
+  return getTableBodyY(state, true);
+};
+
+const getHandleOffsetAndPercent$1 = (viewportHeight, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    return {
+      handleOffset: relativeY,
+      percent: 0
+    };
+  }
+  if (relativeY <= viewportHeight - halfScrollBarHeight) {
+    return {
+      handleOffset: halfScrollBarHeight,
+      percent: (relativeY - halfScrollBarHeight) / Math.max(1, viewportHeight - scrollBarHeight)
+    };
+  }
+  return {
+    handleOffset: scrollBarHeight - viewportHeight + relativeY,
+    percent: 1
+  };
+};
+const handlePreviewTextScrollBarPointerDown = (state, eventY) => {
+  const viewportHeight = getPreviewTextViewportHeight(state);
+  const virtualization = getPreviewVirtualizationState(state.selectedEvent, viewportHeight, state.previewTextDeltaY);
+  const bodyY = getPreviewTextBodyY(state);
+  const relativeY = eventY - bodyY;
+  if (virtualization.viewportHeight === 0 || virtualization.scrollBarHeight === 0) {
+    return state;
+  }
+  const {
+    handleOffset,
+    percent
+  } = getHandleOffsetAndPercent$1(virtualization.viewportHeight, virtualization.scrollBarHeight, relativeY);
+  const nextState = setPreviewTextDeltaY(state, percent * virtualization.maxDeltaY);
+  return {
+    ...nextState,
+    previewTextScrollBarHandleOffset: handleOffset,
+    previewTextScrollBarPointerActive: true
+  };
+};
+
+const handlePreviewTextScrollBarPointerMove = (state, eventY) => {
+  const {
+    previewTextDeltaY,
+    previewTextScrollBarHandleOffset,
+    previewTextScrollBarPointerActive,
+    selectedEvent
+  } = state;
+  if (!previewTextScrollBarPointerActive) {
+    return state;
+  }
+  const viewportHeight = getPreviewTextViewportHeight(state);
+  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 - previewTextScrollBarHandleOffset));
+  const percent = nextHandleTop / Math.max(1, viewportHeight - virtualization.scrollBarHeight);
+  const nextState = setPreviewTextDeltaY(state, percent * virtualization.maxDeltaY);
+  return {
+    ...nextState,
+    previewTextScrollBarPointerActive: true
+  };
+};
+
+const handlePreviewTextScrollBarPointerUp = state => {
+  if (!state.previewTextScrollBarPointerActive && state.previewTextScrollBarHandleOffset === 0) {
+    return state;
+  }
+  return {
+    ...state,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false
+  };
+};
+
+const handlePreviewTextWheel = (state, deltaY) => {
+  const {
+    previewTextDeltaY
+  } = state;
+  return setPreviewTextDeltaY(state, previewTextDeltaY + deltaY);
+};
+
+const handleRootContextMenu = state => {
+  return state;
+};
+
 const handleSashPointerDown = (state, eventX, eventY) => {
   if (state.sashPointerActive) {
     return state;
@@ -4108,7 +4537,7 @@ const handleSashPointerMove = (state, eventX, eventY) => {
   }
   return {
     ...state,
-    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
+    tableWidth: getTableWidthFromClientX(state, eventX)
   };
 };
 
@@ -4152,6 +4581,8 @@ const getTableResizerId = name => {
   switch (name) {
     case 'ResizerOne':
       return 1;
+    case 'ResizerThree':
+      return 3;
     case 'ResizerTwo':
       return 2;
     default:
@@ -4171,7 +4602,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)
   };
 };
 
@@ -4196,6 +4627,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) {
@@ -4336,10 +4781,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 => {
@@ -4476,6 +4921,9 @@ const setUseDevtoolsLayout = (state, checked) => {
     ...state,
     previewTextCursorColumnIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorColumnIndex : null,
     previewTextCursorRowIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorRowIndex : null,
+    previewTextDeltaY: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextDeltaY : 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
     selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
     selectedEventIndex,
@@ -4534,20 +4982,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;
 };
@@ -4592,13 +5028,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));
@@ -4608,14 +5044,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);
@@ -4623,16 +5060,19 @@ 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);
   let topSize = 60;
   if (state.width >= state.largeBreakpoint) {
     topSize = 30;
   }
   const tableColumnLayout = getTableColumnLayout(tableContentWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths);
-  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0] = tableColumnLayout.visibleColumnWidths;
+  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0, tableColThreeWidth = 0] = tableColumnLayout.visibleColumnWidths;
   const resizerOneLeft = tableColumnLayout.resizerLefts[0] ?? 0;
   const resizerTwoLeft = tableColumnLayout.resizerLefts[1] ?? 0;
+  const resizerThreeLeft = tableColumnLayout.resizerLefts[2] ?? 0;
   const {
     selectionEndPercent,
     selectionStartPercent
@@ -4644,7 +5084,12 @@ const getCss = state => {
   --ChatDebugViewTableColZeroWidth: ${tableColZeroWidth}px;
   --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
   --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
+  --ChatDebugViewTableColThreeWidth: ${tableColThreeWidth}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;
   --ChatDebugViewTableRowHeight: ${devtoolsTableRowHeight}px;
@@ -4653,7 +5098,8 @@ const getCss = state => {
   --ChatDebugViewTableScrollBarWidth: ${showScrollBar ? devtoolsTableScrollBarWidth : 0}px;
   --ResizerOneLeft: ${resizerOneLeft}px;
   --ResizerTwoLeft: ${resizerTwoLeft}px;
-  --ChatDebugViewSashWidth: ${sashWidth}px;
+  --ResizerThreeLeft: ${resizerThreeLeft}px;
+  --ChatDebugViewSashWidth: ${state.sashWidth}px;
   --ChatDebugViewTableWidth: ${tableWidth}px;
   --ChatDebugViewTimelineHeight: ${state.timelineHeight}px;
   --ChatDebugViewTimelineCursorGuideLeft: ${state.timelineHoverPercent ?? 0}%;
@@ -4661,7 +5107,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;
 }
 
@@ -4675,6 +5121,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;
@@ -4694,10 +5185,68 @@ 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;
+  position: relative;
+}
+
+.PreviewVirtualizedEditor .Editor {
+  width: calc(100% - var(--ChatDebugViewPreviewScrollBarWidth));
+}
+
+.PreviewTextScrollBar {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 999px;
+  height: var(--ChatDebugViewPreviewViewportHeight);
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: var(--ChatDebugViewPreviewScrollBarWidth);
+}
+
+.PreviewTextScrollBarThumb {
+  background: rgba(255, 255, 255, 0.22);
+  border-radius: 999px;
+  height: var(--ChatDebugViewPreviewScrollBarHeight);
+  left: 2px;
+  position: absolute;
+  top: var(--ChatDebugViewPreviewScrollBarOffset);
+  width: calc(100% - 4px);
 }
 
 .TableScrollBar {
@@ -4720,6 +5269,38 @@ const getCss = state => {
   width: calc(100% - 4px);
 }
 
+.TokenText {
+  color: var(--vscode-editor-foreground);
+}
+
+.TokenString {
+  color: var(--vscode-debugTokenExpression-string, #ce9178);
+}
+
+.TokenNumeric {
+  color: var(--vscode-debugTokenExpression-number, #b5cea8);
+}
+
+.TokenBoolean {
+  color: var(--vscode-debugTokenExpression-boolean, #569cd6);
+}
+
+.TokenKey,
+.TokenAttributeName,
+.TokenPropertyName {
+  color: var(--vscode-symbolIcon-propertyForeground, #9cdcfe);
+}
+
+.TokenKeyword,
+.TokenTag,
+.TokenSelector {
+  color: var(--vscode-symbolIcon-keywordForeground, #569cd6);
+}
+
+.TokenComment {
+  color: var(--vscode-editorLineNumber-foreground, #6a9955);
+}
+
 `;
 };
 
@@ -5037,6 +5618,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';
@@ -5048,6 +5638,9 @@ const EditorRows = 'EditorRows';
 const EditorSelection = 'EditorSelection';
 const EditorSelections = 'Selections';
 const EditorViewlet = 'Viewlet Editor';
+const PreviewTextScrollBar = 'PreviewTextScrollBar';
+const PreviewTextScrollBarThumb = 'PreviewTextScrollBarThumb';
+const PreviewVirtualizedEditor = 'PreviewVirtualizedEditor';
 const ChatDebugViewEventLineNumber = 'ChatDebugViewEventLineNumber';
 const Gutter = 'Gutter';
 const TableRowSelected = 'TableRowSelected';
@@ -5077,6 +5670,7 @@ const Resizer = 'Resizer';
 const ResizerInner = 'ResizerInner';
 const ResizerOne = 'ResizerOne';
 const ResizerTwo = 'ResizerTwo';
+const ResizerThree = 'ResizerThree';
 const TableHead = 'TableHead';
 const Resizers = 'Resizers';
 const TableCol = 'TableCol';
@@ -5123,25 +5717,17 @@ const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
 const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
 const InputBox = 'InputBox';
 const TokenBoolean = 'Token TokenBoolean';
+const TokenComment = 'Token TokenComment';
 const TokenKey = 'Token TokenKey';
+const TokenKeyword = 'Token TokenKeyword';
 const TokenNumeric = 'Token TokenNumeric';
+const TokenAttributeName = 'Token TokenAttributeName';
+const TokenPropertyName = 'Token TokenPropertyName';
+const TokenSelector = 'Token TokenSelector';
 const TokenString = 'Token TokenString';
+const TokenTag = 'Token TokenTag';
 const TokenText = 'Token TokenText';
 
-const debugErrorRootNode = {
-  childCount: 1,
-  className: ChatDebugView,
-  type: Div
-};
-const debugErrorMessageNode = {
-  childCount: 1,
-  className: ChatDebugViewError,
-  type: Div
-};
-const getDebugErrorDom = errorMessage => {
-  return [debugErrorRootNode, debugErrorMessageNode, text(errorMessage)];
-};
-
 const HandleEventCategoryFilter = 4;
 const HandleFilterInput = 5;
 const SelectDetailTab = 6;
@@ -5174,6 +5760,25 @@ const HandleTableScrollBarPointerDown = 32;
 const HandleTableScrollBarPointerMove = 33;
 const HandleTableScrollBarPointerUp = 34;
 const HandleTableWheel = 35;
+const HandlePreviewTextWheel = 36;
+const HandlePreviewTextScrollBarPointerDown = 37;
+const HandlePreviewTextScrollBarPointerMove = 38;
+const HandlePreviewTextScrollBarPointerUp = 39;
+const HandleRootContextMenu = 40;
+
+const debugErrorRootNode = {
+  childCount: 1,
+  className: ChatDebugView,
+  type: Div
+};
+const debugErrorMessageNode = {
+  childCount: 1,
+  className: ChatDebugViewError,
+  type: Div
+};
+const getDebugErrorDom = errorMessage => {
+  return [debugErrorRootNode, debugErrorMessageNode, text(errorMessage)];
+};
 
 const getFilterInputDom = (filterValue, useDevtoolsLayout) => {
   return {
@@ -5189,6 +5794,7 @@ const getFilterInputDom = (filterValue, useDevtoolsLayout) => {
   };
 };
 
+const selectedClassName = mergeClassNames(ChatDebugViewQuickFilterPill, ChatDebugViewQuickFilterPillSelected);
 const getQuickFilterDom = categoryFilter => {
   const {
     isSelected,
@@ -5198,7 +5804,7 @@ const getQuickFilterDom = categoryFilter => {
   return [{
     ariaSelected: isSelected,
     childCount: 1,
-    className: mergeClassNames(ChatDebugViewQuickFilterPill, isSelected ? ChatDebugViewQuickFilterPillSelected : ''),
+    className: isSelected ? selectedClassName : ChatDebugViewQuickFilterPill,
     name,
     onClick: HandleEventCategoryFilter,
     role: Option,
@@ -5222,10 +5828,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;
@@ -5238,23 +5844,69 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, categoryFilters) =>
     return [{
       childCount: 2 + (quickFilterNodes.length > 0 ? 1 : 0),
       className: mergeClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
-      onContextMenu: HandleHeaderContextMenu,
       type: Search
     }, getFilterInputDom(filterValue, true), ...quickFilterNodes, ...refreshButtonDom];
   }
   return [{
     childCount: 2,
     className: ChatDebugViewTop,
-    onContextMenu: HandleHeaderContextMenu,
     type: Search
   }, getFilterInputDom(filterValue, false), ...refreshButtonDom];
 };
 
+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 detailsCloseButtonDom = [{
   'aria-label': closeDetails(),
   childCount: 1,
   className: ChatDebugViewDetailsClose,
-  name: CloseDetails,
+  name: CloseDetails$1,
   onChange: HandleCloseDetails,
   onClick: HandleCloseDetails,
   type: Button$1,
@@ -5268,7 +5920,161 @@ const getDetailsCloseButtonDom = () => {
   return detailsCloseButtonDom;
 };
 
-const defaultEditorCursor = {
+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;
+  }
+  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,
+    className: EditorRow,
+    type: Div
+  }, ...line.nodes];
+};
+
+const getEditorRowsDom = lineData => {
+  return [{
+    childCount: lineData.length,
+    className: EditorRows,
+    type: Div
+  }, ...lineData.flatMap(getEditorRowDom)];
+};
+
+const defaultEditorCursor = {
   columnIndex: 0,
   rowIndex: 1
 };
@@ -5285,13 +6091,14 @@ const getEditorSelectionDom = (cursor = defaultEditorCursor) => {
     type: Div
   }] : [])];
 };
-const getGutterDom = (lineData, showLineNumbers) => {
+
+const getGutterDom = (lineData, showLineNumbers, lineNumberStart = 0) => {
   const gutterNodes = showLineNumbers ? lineData.flatMap((_, index) => {
     return [{
       childCount: 1,
       className: ChatDebugViewEventLineNumber,
       type: Span
-    }, text(String(index + 1))];
+    }, text(String(lineNumberStart + index + 1))];
   }) : [];
   return [{
     childCount: showLineNumbers ? lineData.length : 0,
@@ -5299,21 +6106,55 @@ const getGutterDom = (lineData, showLineNumbers) => {
     type: Div
   }, ...gutterNodes];
 };
-const getEditorRowDom = line => {
-  return [{
-    childCount: line.childCount,
-    className: EditorRow,
+
+const getVirtualizedEditorDom = (lineData, showLineNumbers = true, cursor = null, onPointerDown, options) => {
+  const editorChildren = [{
+    childCount: 2,
+    className: EditorViewlet,
+    role: 'code',
     type: Div
-  }, ...line.nodes];
-};
-const getEditorRowsDom = lineData => {
+  }, ...getGutterDom(lineData, showLineNumbers, options.lineNumberStart), {
+    childCount: 2,
+    className: EditorContent,
+    onPointerDown,
+    type: Div
+  }, {
+    'aria-autocomplete': 'list',
+    'aria-multiline': true,
+    'aria-roledescription': 'editor',
+    autocapitalize: 'off',
+    autocomplete: 'off',
+    autocorrect: 'off',
+    childCount: 0,
+    className: EditorInput,
+    name: 'editor',
+    role: 'textbox',
+    spellcheck: false,
+    type: TextArea,
+    wrap: 'off'
+  }, {
+    childCount: 2,
+    className: EditorLayers,
+    type: Div
+  }, ...getEditorSelectionDom(cursor), ...getEditorRowsDom(lineData)];
   return [{
-    childCount: lineData.length,
-    className: EditorRows,
+    childCount: options.showScrollBar ? 2 : 1,
+    className: mergeClassNames(EditorContainer, PreviewVirtualizedEditor),
+    onWheel: options.onWheel,
     type: Div
-  }, ...lineData.flatMap(getEditorRowDom)];
+  }, ...editorChildren, ...(options.showScrollBar ? [{
+    childCount: 1,
+    className: PreviewTextScrollBar,
+    onPointerDown: options.onScrollBarPointerDown,
+    type: Div
+  }, {
+    childCount: 0,
+    className: PreviewTextScrollBarThumb,
+    type: Div
+  }] : [])];
 };
-const getEditorDom = (lineData, showLineNumbers = true, cursor = defaultEditorCursor, onPointerDown) => {
+
+const getEditorDom = (lineData, showLineNumbers = true, cursor, onPointerDown) => {
   return [{
     childCount: 1,
     className: EditorContainer,
@@ -5349,7 +6190,7 @@ const getEditorDom = (lineData, showLineNumbers = true, cursor = defaultEditorCu
   }, ...getEditorSelectionDom(cursor), ...getEditorRowsDom(lineData)];
 };
 
-const isDigit = character => {
+const isDigit$1 = character => {
   return character !== undefined && character >= '0' && character <= '9';
 };
 const isWhitespace = character => {
@@ -5363,10 +6204,10 @@ const getIntegerEnd = (json, start) => {
   if (json[i] === '0') {
     return i + 1;
   }
-  if (!isDigit(json[i])) {
+  if (!isDigit$1(json[i])) {
     return start;
   }
-  while (isDigit(json[i])) {
+  while (isDigit$1(json[i])) {
     i++;
   }
   return i;
@@ -5377,10 +6218,10 @@ const getFractionEnd = (json, start) => {
   }
   const decimalStart = start;
   let i = start + 1;
-  if (!isDigit(json[i])) {
+  if (!isDigit$1(json[i])) {
     return decimalStart;
   }
-  while (isDigit(json[i])) {
+  while (isDigit$1(json[i])) {
     i++;
   }
   return i;
@@ -5394,10 +6235,10 @@ const getExponentEnd = (json, start) => {
   if (json[i] === '+' || json[i] === '-') {
     i++;
   }
-  if (!isDigit(json[i])) {
+  if (!isDigit$1(json[i])) {
     return exponentStart;
   }
-  while (isDigit(json[i])) {
+  while (isDigit$1(json[i])) {
     i++;
   }
   return i;
@@ -5409,7 +6250,7 @@ const getWhitespaceEnd = (json, start) => {
   }
   return i;
 };
-const getStringEnd = (json, start) => {
+const getStringEnd$1 = (json, start) => {
   let i = start + 1;
   while (i < json.length) {
     const currentCharacter = json[i];
@@ -5425,7 +6266,7 @@ const getStringEnd = (json, start) => {
   return i;
 };
 const emitStringToken = (json, start, onToken) => {
-  const end = getStringEnd(json, start);
+  const end = getStringEnd$1(json, start);
   const lookAheadIndex = getWhitespaceEnd(json, end);
   const className = json[lookAheadIndex] === ':' ? TokenKey : TokenString;
   onToken(className, json.slice(start, end));
@@ -5452,7 +6293,7 @@ const getLiteralToken = (json, start) => {
   }
   return undefined;
 };
-const getNumberEnd = (json, start) => {
+const getNumberEnd$1 = (json, start) => {
   let i = getIntegerEnd(json, start);
   if (i === start) {
     return start;
@@ -5469,7 +6310,7 @@ const forEachTokenSegment = (json, onToken) => {
       i = emitStringToken(json, i, onToken);
       continue;
     }
-    const numberEnd = getNumberEnd(json, i);
+    const numberEnd = getNumberEnd$1(json, i);
     if (numberEnd > i) {
       onToken(TokenNumeric, json.slice(i, numberEnd));
       i = numberEnd;
@@ -5485,6 +6326,24 @@ const forEachTokenSegment = (json, onToken) => {
     i++;
   }
 };
+const getTokenSegments = json => {
+  const segments = [];
+  forEachTokenSegment(json, (className, value) => {
+    if (!value) {
+      return;
+    }
+    const lastSegment = segments.at(-1);
+    if (lastSegment && lastSegment.className === className) {
+      lastSegment.value += value;
+      return;
+    }
+    segments.push({
+      className,
+      value
+    });
+  });
+  return segments;
+};
 
 const getJsonLines = value => {
   const json = JSON.stringify(value, null, 2);
@@ -5553,8 +6412,14 @@ const getEventNode = value => {
   return getEditorDom(lineData);
 };
 
-const getPanelId = detailTab => {
-  return `ChatDebugViewDetailsPanel-${detailTab}`;
+const getPayloadContentNodes = (payloadEventNodes, selectedEvent) => {
+  if (payloadEventNodes.length > 0) {
+    return payloadEventNodes;
+  }
+  if (selectedEvent === null) {
+    return [];
+  }
+  return getEventNode(getPayloadEvent(selectedEvent));
 };
 
 const getImagePreviewLabelDom = preview => {
@@ -5595,9 +6460,411 @@ const getImagePreviewDom = preview => {
   }, ...getImagePreviewLabelDom(preview)];
 };
 
-const getTextNode = (value, showLineNumbers = true, cursor = null) => {
+const extensionToLanguage = {
+  css: 'css',
+  html: 'html',
+  js: 'javascript',
+  json: 'json',
+  py: 'python',
+  ts: 'typescript'
+};
+const getLanguageFromFileExtension = uri => {
+  try {
+    const url = new URL(uri);
+    const path = url.pathname.toLowerCase();
+    const lastDotIndex = path.lastIndexOf('.');
+    if (lastDotIndex === -1) {
+      return undefined;
+    }
+    const extension = path.slice(lastDotIndex + 1);
+    return extensionToLanguage[extension];
+  } catch {
+    return undefined;
+  }
+};
+
+const pushToken = (segments, className, value) => {
+  if (!value) {
+    return segments;
+  }
+  const lastSegment = segments.at(-1);
+  if (lastSegment && lastSegment.className === className) {
+    const merged = {
+      className,
+      value: lastSegment.value + value
+    };
+    return [...segments.slice(0, -1), merged];
+  }
+  return [...segments, {
+    className,
+    value
+  }];
+};
+
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+
+const jsIdentifierStartRegex = /[A-Za-z_$]/;
+const jsIdentifierPartRegex = /[\w$]/;
+const pythonIdentifierStartRegex = /[A-Za-z_]/;
+const pythonIdentifierPartRegex = /\w/;
+const cssIdentifierRegex = /[A-Za-z-]/;
+const htmlTagNameRegex = /[A-Za-z0-9:-]/;
+const htmlAttributeStartRegex = /[A-Za-z:_-]/;
+const htmlAttributePartRegex = /[\w:-]/;
+const leadingWhitespaceRegex = /^\s*/;
+const trailingWhitespaceRegex = /\s*$/;
+const jsKeywords = new Set(['async', 'await', 'class', 'const', 'else', 'export', 'extends', 'for', 'from', 'function', 'if', 'import', 'let', 'new', 'return', 'switch', 'try', 'while']);
+const tsKeywords = new Set([...jsKeywords, 'interface', 'implements', 'number', 'readonly', 'string', 'type']);
+const pythonKeywords = new Set(['as', 'class', 'def', 'elif', 'else', 'except', 'False', 'for', 'from', 'if', 'import', 'None', 'return', 'True', 'try', 'while', 'with']);
+const isIdentifierStart = character => {
+  return !!character && jsIdentifierStartRegex.test(character);
+};
+const isIdentifierPart = character => {
+  return !!character && jsIdentifierPartRegex.test(character);
+};
+const isPythonIdentifierStart = character => {
+  return !!character && pythonIdentifierStartRegex.test(character);
+};
+const isPythonIdentifierPart = character => {
+  return !!character && pythonIdentifierPartRegex.test(character);
+};
+const isDigit = character => {
+  return !!character && character >= '0' && character <= '9';
+};
+const getStringEnd = (value, start, quote) => {
+  let i = start + 1;
+  while (i < value.length) {
+    if (value[i] === '\\') {
+      i += 2;
+      continue;
+    }
+    if (value[i] === quote) {
+      return i + 1;
+    }
+    i++;
+  }
+  return value.length;
+};
+const getBlockCommentEnd = (value, start, terminator) => {
+  const endIndex = value.indexOf(terminator, start);
+  if (endIndex === -1) {
+    return value.length;
+  }
+  return endIndex + terminator.length;
+};
+const getLineCommentEnd = (value, start) => {
+  const endIndex = value.indexOf('\n', start);
+  if (endIndex === -1) {
+    return value.length;
+  }
+  return endIndex;
+};
+const getNumberEnd = (value, start) => {
+  let i = start;
+  while (isDigit(value[i])) {
+    i++;
+  }
+  if (value[i] === '.') {
+    i++;
+    while (isDigit(value[i])) {
+      i++;
+    }
+  }
+  return i;
+};
+const appendLineComment = (value, state) => {
+  if (!value.startsWith('//', state.i) && !value.startsWith('#', state.i)) {
+    return false;
+  }
+  const end = getLineCommentEnd(value, state.i);
+  state.segments = pushToken(state.segments, TokenComment, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendBlockComment = (value, state) => {
+  if (!value.startsWith('/*', state.i)) {
+    return false;
+  }
+  const end = getBlockCommentEnd(value, state.i, '*/');
+  state.segments = pushToken(state.segments, TokenComment, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendStringToken = (value, state) => {
+  const quote = value[state.i];
+  if (quote !== '"' && quote !== "'" && quote !== '`') {
+    return false;
+  }
+  const end = getStringEnd(value, state.i, quote);
+  state.segments = pushToken(state.segments, TokenString, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendNumericToken = (value, state) => {
+  if (!isDigit(value[state.i])) {
+    return false;
+  }
+  const end = getNumberEnd(value, state.i);
+  state.segments = pushToken(state.segments, TokenNumeric, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendIdentifierToken = (value, state, keywords, isIdentifierStartCharacter, isIdentifierPartCharacter) => {
+  if (!isIdentifierStartCharacter(value[state.i])) {
+    return false;
+  }
+  let end = state.i + 1;
+  while (isIdentifierPartCharacter(value[end])) {
+    end++;
+  }
+  const identifier = value.slice(state.i, end);
+  const className = keywords.has(identifier) ? TokenKeyword : TokenText;
+  state.segments = pushToken(state.segments, className, identifier);
+  state.i = end;
+  return true;
+};
+const appendTextCharacter = (value, state) => {
+  state.segments = pushToken(state.segments, TokenText, value[state.i]);
+  state.i++;
+};
+const tokenizeCode = (value, keywords, isIdentifierStartCharacter, isIdentifierPartCharacter, supportsBlockComments) => {
+  const state = {
+    i: 0,
+    segments: []
+  };
+  while (state.i < value.length) {
+    if (appendLineComment(value, state)) {
+      continue;
+    }
+    if (supportsBlockComments && appendBlockComment(value, state)) {
+      continue;
+    }
+    if (appendStringToken(value, state)) {
+      continue;
+    }
+    if (appendNumericToken(value, state)) {
+      continue;
+    }
+    if (appendIdentifierToken(value, state, keywords, isIdentifierStartCharacter, isIdentifierPartCharacter)) {
+      continue;
+    }
+    appendTextCharacter(value, state);
+  }
+  return state.segments;
+};
+const pushTrimmedSelector = (segments, value) => {
+  const leadingWhitespace = value.match(leadingWhitespaceRegex)?.[0] ?? '';
+  const trailingWhitespace = value.match(trailingWhitespaceRegex)?.[0] ?? '';
+  const trimmed = value.slice(leadingWhitespace.length, value.length - trailingWhitespace.length);
+  let result = segments;
+  result = pushToken(result, TokenText, leadingWhitespace);
+  result = pushToken(result, TokenSelector, trimmed);
+  result = pushToken(result, TokenText, trailingWhitespace);
+  return result;
+};
+const getCssIdentifierEnd = (value, start) => {
+  let end = start + 1;
+  while (cssIdentifierRegex.test(value[end] ?? '')) {
+    end++;
+  }
+  return end;
+};
+const getCssIdentifierClassName = (value, end) => {
+  let lookAhead = end;
+  while (value[lookAhead] === ' ' || value[lookAhead] === '\t') {
+    lookAhead++;
+  }
+  return value[lookAhead] === ':' ? TokenPropertyName : TokenText;
+};
+const appendCssIdentifier = (value, state) => {
+  if (!cssIdentifierRegex.test(value[state.i] ?? '')) {
+    return false;
+  }
+  const end = getCssIdentifierEnd(value, state.i);
+  const identifier = value.slice(state.i, end);
+  state.segments = pushToken(state.segments, getCssIdentifierClassName(value, end), identifier);
+  state.i = end;
+  return true;
+};
+const appendCssOutsideDeclaration = (value, state) => {
+  const nextBrace = value.indexOf('{', state.i);
+  if (nextBrace === -1) {
+    state.segments = pushToken(state.segments, TokenText, value.slice(state.i));
+    state.i = value.length;
+    return true;
+  }
+  state.segments = pushTrimmedSelector(state.segments, value.slice(state.i, nextBrace));
+  state.segments = pushToken(state.segments, TokenText, '{');
+  state.i = nextBrace + 1;
+  return false;
+};
+const handleCssDeclarationToken = (value, state) => {
+  if (value[state.i] === '}') {
+    state.segments = pushToken(state.segments, TokenText, '}');
+    state.i++;
+    return false;
+  }
+  if (appendNumericToken(value, state)) {
+    return true;
+  }
+  if (appendCssIdentifier(value, state)) {
+    return true;
+  }
+  appendTextCharacter(value, state);
+  return true;
+};
+const tokenizeCss = value => {
+  const state = {
+    i: 0,
+    segments: []
+  };
+  let inDeclarationBlock = false;
+  while (state.i < value.length) {
+    if (appendBlockComment(value, state)) {
+      continue;
+    }
+    if (appendStringToken(value, state)) {
+      continue;
+    }
+    if (!inDeclarationBlock) {
+      if (appendCssOutsideDeclaration(value, state)) {
+        break;
+      }
+      inDeclarationBlock = true;
+      continue;
+    }
+    inDeclarationBlock = handleCssDeclarationToken(value, state);
+  }
+  return state.segments;
+};
+const getHtmlTagNameEnd = (value, start) => {
+  let i = start + 1;
+  while (htmlTagNameRegex.test(value[i] ?? '')) {
+    i++;
+  }
+  return i;
+};
+const getHtmlAttributeEnd = (value, start) => {
+  let end = start + 1;
+  while (htmlAttributePartRegex.test(value[end] ?? '')) {
+    end++;
+  }
+  return end;
+};
+const appendHtmlAttribute = (value, state) => {
+  if (!htmlAttributeStartRegex.test(value[state.i] ?? '')) {
+    return false;
+  }
+  const end = getHtmlAttributeEnd(value, state.i);
+  state.segments = pushToken(state.segments, TokenAttributeName, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendHtmlString = (value, state) => {
+  const quote = value[state.i];
+  if (quote !== '"' && quote !== "'") {
+    return false;
+  }
+  const end = getStringEnd(value, state.i, quote);
+  state.segments = pushToken(state.segments, TokenString, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const tokenizeHtmlTag = (value, start) => {
+  let segments = [];
+  if (value.startsWith('</', start)) {
+    const end = value.indexOf('>', start);
+    const tagEnd = end === -1 ? value.length : end + 1;
+    segments = pushToken(segments, TokenTag, value.slice(start, tagEnd));
+    return {
+      end: tagEnd,
+      segments
+    };
+  }
+  let i = getHtmlTagNameEnd(value, start);
+  segments = pushToken(segments, TokenTag, value.slice(start, i));
+  while (i < value.length) {
+    if (value[i] === '>') {
+      segments = pushToken(segments, TokenText, '>');
+      return {
+        end: i + 1,
+        segments
+      };
+    }
+    const state = {
+      i,
+      segments
+    };
+    if (appendHtmlString(value, state)) {
+      ({
+        i,
+        segments
+      } = state);
+      continue;
+    }
+    if (appendHtmlAttribute(value, state)) {
+      ({
+        i,
+        segments
+      } = state);
+      continue;
+    }
+    segments = pushToken(segments, TokenText, value[i]);
+    i++;
+  }
+  return {
+    end: value.length,
+    segments
+  };
+};
+const tokenizeHtml = value => {
+  let segments = [];
+  let i = 0;
+  while (i < value.length) {
+    if (value.startsWith('<!--', i)) {
+      const end = getBlockCommentEnd(value, i, '-->');
+      segments = pushToken(segments, TokenComment, value.slice(i, end));
+      i = end;
+      continue;
+    }
+    if (value[i] === '<') {
+      const {
+        end,
+        segments: tagSegments
+      } = tokenizeHtmlTag(value, i);
+      for (const segment of tagSegments) {
+        segments = pushToken(segments, segment.className, segment.value);
+      }
+      i = end;
+      continue;
+    }
+    const nextTag = value.indexOf('<', i);
+    const end = nextTag === -1 ? value.length : nextTag;
+    segments = pushToken(segments, TokenText, value.slice(i, end));
+    i = end;
+  }
+  return segments;
+};
+const getSyntaxHighlightTokens = (value, language) => {
+  switch (language) {
+    case 'css':
+      return tokenizeCss(value);
+    case 'html':
+      return tokenizeHtml(value);
+    case 'javascript':
+      return tokenizeCode(value, jsKeywords, isIdentifierStart, isIdentifierPart, true);
+    case 'json':
+      return getTokenSegments(value);
+    case 'python':
+      return tokenizeCode(value, pythonKeywords, isPythonIdentifierStart, isPythonIdentifierPart, false);
+    case 'typescript':
+      return tokenizeCode(value, tsKeywords, isIdentifierStart, isIdentifierPart, true);
+  }
+};
+
+const getTextLineData = value => {
   const lines = value.split('\n');
-  const lineData = lines.map(line => {
+  return lines.map(line => {
     return {
       childCount: 1,
       nodes: [{
@@ -5607,15 +6874,82 @@ const getTextNode = (value, showLineNumbers = true, cursor = null) => {
       }, text(line)]
     };
   });
+};
+const getTokenLineData = tokenSegments => {
+  const lineData = [];
+  let currentNodes = [];
+  let childCount = 0;
+  const pushLine = () => {
+    lineData.push({
+      childCount,
+      nodes: currentNodes
+    });
+    currentNodes = [];
+    childCount = 0;
+  };
+  const pushSegment = (className, segmentValue) => {
+    if (!segmentValue) {
+      return;
+    }
+    currentNodes.push({
+      childCount: 1,
+      className,
+      type: Span
+    }, text(segmentValue));
+    childCount++;
+  };
+  for (const segment of tokenSegments) {
+    let start = 0;
+    for (let i = 0; i < segment.value.length; i++) {
+      if (segment.value[i] !== '\n') {
+        continue;
+      }
+      pushSegment(segment.className, segment.value.slice(start, i));
+      pushLine();
+      start = i + 1;
+    }
+    pushSegment(segment.className, segment.value.slice(start));
+  }
+  if (lineData.length === 0 || currentNodes.length > 0) {
+    pushLine();
+  }
+  return lineData;
+};
+const getLineData = (value, tokenSegments) => {
+  return tokenSegments ? getTokenLineData(tokenSegments) : getTextLineData(value);
+};
+const getTextNode = (value, showLineNumbers = true, cursor = null, tokenSegments, virtualization) => {
+  const lineData = getLineData(value, tokenSegments);
+  if (virtualization) {
+    const slicedLineData = lineData.slice(virtualization.startLineY, virtualization.endLineY);
+    const visibleCursor = cursor && cursor.rowIndex >= virtualization.startLineY && cursor.rowIndex < virtualization.endLineY ? {
+      ...cursor,
+      rowIndex: cursor.rowIndex - virtualization.startLineY
+    } : null;
+    return getVirtualizedEditorDom(slicedLineData, showLineNumbers, visibleCursor, showLineNumbers ? HandlePreviewTextPointerDown : undefined, {
+      lineNumberStart: virtualization.startLineY,
+      onScrollBarPointerDown: HandlePreviewTextScrollBarPointerDown,
+      onWheel: HandlePreviewTextWheel,
+      showScrollBar: virtualization.showScrollBar
+    });
+  }
   return getEditorDom(lineData, showLineNumbers, cursor, showLineNumbers ? HandlePreviewTextPointerDown : undefined);
 };
 
-const getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor) => {
+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 getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor, virtualization) => {
   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);
+    return getTextEvent(previewEvent, selectedEvent, previewTextCursor, virtualization);
+  }
+  if (isWriteFilePreview(previewEvent)) {
+    const language = getLanguageFromFileExtension(previewEvent.uri);
+    const tokenSegments = language ? getSyntaxHighlightTokens(previewEvent.content, language) : undefined;
+    return getTextNode(previewEvent.content, true, previewTextCursor ?? null, tokenSegments, virtualization);
   }
   if (previewEvent === undefined) {
     return [];
@@ -5626,33 +6960,27 @@ const getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor) =>
   return getEventNode(previewEvent);
 };
 
-const getDetailTabDom = detailTab => {
-  const {
-    isSelected
-  } = detailTab;
-  return [{
-    'aria-controls': getPanelId(detailTab.name),
-    ariaSelected: isSelected,
-    childCount: 1,
-    className: mergeClassNames(PanelTab, isSelected ? PanelTabSelected : ''),
-    name: detailTab.name,
-    onChange: SelectDetailTab,
-    onClick: SelectDetailTab,
-    onFocus: HandleDetailTabsFocus,
-    role: Tab,
-    tabIndex: isSelected ? 0 : -1,
-    type: Button$1
-  }, text(detailTab.label)];
+const getPreviewContentNodes = (previewEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, virtualization) => {
+  if (previewEventNodes.length > 0) {
+    return previewEventNodes;
+  }
+  if (selectedEvent === null) {
+    return [];
+  }
+  return getPreviewEventNodes(getPreviewEvent(selectedEvent), selectedEvent, previewTextCursorRowIndex === null || previewTextCursorColumnIndex === null ? null : {
+    columnIndex: previewTextCursorColumnIndex,
+    rowIndex: previewTextCursorRowIndex
+  }, virtualization);
 };
 
-const getTabNodes = detailTabs => {
-  return [{
-    'aria-label': detailSections(),
-    childCount: detailTabs.length,
-    className: ChatDebugViewDetailsTabs,
-    role: 'tablist',
-    type: Div
-  }, ...detailTabs.flatMap(getDetailTabDom)];
+const getResponseContentNodes = (responseEventNodes, selectedEvent) => {
+  if (responseEventNodes.length > 0) {
+    return responseEventNodes;
+  }
+  if (selectedEvent === null) {
+    return [];
+  }
+  return getEventNode(selectedEvent);
 };
 
 const timestampFormatter = new Intl.DateTimeFormat('en-US', {
@@ -5768,148 +7096,145 @@ const getTimingDetailsDom = event => {
   }, ...getTimingPreviewDom(event), ...getTimingRowDom(started(), getStartText(event)), ...getTimingRowDom(ended(), getEndText(event)), ...getTimingRowDom(duration(), getDurationText(event))];
 };
 
-const getNextSiblingIndex$2 = (nodes, index) => {
-  let nextSiblingIndex = index + 1;
-  const childCount = nodes[index]?.childCount || 0;
-  for (let i = 0; i < childCount; i++) {
-    nextSiblingIndex = getNextSiblingIndex$2(nodes, nextSiblingIndex);
-  }
-  return nextSiblingIndex;
-};
-const getDirectChildCount$1 = nodes => {
-  let count = 0;
-  let index = 0;
-  while (index < nodes.length) {
-    count++;
-    index = getNextSiblingIndex$2(nodes, index);
-  }
-  return count;
-};
-const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
-  if (selectedEvent === null) {
-    return detailTabs;
-  }
-  return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
-};
 const getTimingContentNodes = (responseEventNodes, selectedEvent) => {
   if (selectedEvent === null) {
     return responseEventNodes;
   }
   return getTimingDetailsDom(selectedEvent);
 };
-const getPreviewContentNodes = (previewEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex) => {
-  if (previewEventNodes.length > 0) {
-    return previewEventNodes;
-  }
-  if (selectedEvent === null) {
+
+const getTokenUsageDetailsDom = event => {
+  const usageDetails = getTokenUsageDetails(event);
+  if (!usageDetails) {
     return [];
   }
-  return getPreviewEventNodes(getPreviewEvent(selectedEvent), selectedEvent, previewTextCursorRowIndex === null || previewTextCursorColumnIndex === null ? null : {
-    columnIndex: previewTextCursorColumnIndex,
-    rowIndex: previewTextCursorRowIndex
-  });
-};
-const getPayloadContentNodes = (payloadEventNodes, selectedEvent) => {
-  if (payloadEventNodes.length > 0) {
-    return payloadEventNodes;
+  const rows = [];
+  let rowCount = 0;
+  if (usageDetails.inputTokens !== undefined) {
+    rows.push(...getTimingRowDom(inputTokens(), String(usageDetails.inputTokens)));
+    rowCount++;
   }
-  if (selectedEvent === null) {
-    return [];
+  if (usageDetails.outputTokens !== undefined) {
+    rows.push(...getTimingRowDom(outputTokens(), String(usageDetails.outputTokens)));
+    rowCount++;
   }
-  return getEventNode(getPayloadEvent(selectedEvent));
-};
-const getResponseContentNodes = (responseEventNodes, selectedEvent) => {
-  if (responseEventNodes.length > 0) {
-    return responseEventNodes;
+  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 [];
+    return responseEventNodes;
   }
-  return getEventNode(selectedEvent);
+  return getTokenUsageDetailsDom(selectedEvent);
 };
-const getSelectedContentNodes = (safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex) => {
-  if (safeSelectedDetailTab === Timing) {
+
+const getSelectedContentNodes = (safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization) => {
+  if (safeSelectedDetailTab === Tokens$1) {
+    return getTokenUsageContentNodes(responseEventNodes, selectedEvent);
+  }
+  if (safeSelectedDetailTab === Timing$1) {
     return getTimingContentNodes(responseEventNodes, selectedEvent);
   }
-  if (safeSelectedDetailTab === Preview) {
-    return getPreviewContentNodes(previewEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex);
+  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 getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs(), previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null) => {
+
+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 [];
   }
   const normalizedDetailTabs = getNormalizedDetailTabs(selectedEvent, detailTabs);
   const safeSelectedDetailTab = getSelectedDetailTab(normalizedDetailTabs);
   const selectedDetailTab = normalizedDetailTabs.find(detailTab => detailTab.name === safeSelectedDetailTab) ?? normalizedDetailTabs[0];
-  const getDetailContentDom = () => {
-    const contentNodes = getSelectedContentNodes(safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex);
-    return [{
-      'aria-label': selectedDetailTab.label,
-      childCount: getDirectChildCount$1(contentNodes),
-      className: ChatDebugViewDetailsBottom,
-      id: getPanelId(safeSelectedDetailTab),
-      onContextMenu: HandleDetailsContextMenu,
-      role: 'tabpanel',
-      type: Div
-    }, ...contentNodes];
-  };
+  const contentNodes = getSelectedContentNodes(safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization);
   return [{
     childCount: 2,
     className: ChatDebugViewDetails,
     type: Section
-  }, {
-    childCount: 2,
-    className: ChatDebugViewDetailsTop,
-    onContextMenu: HandleDetailsTopContextMenu,
-    type: Div
-  }, ...getDetailsCloseButtonDom(), ...getTabNodes(normalizedDetailTabs), ...getDetailContentDom()];
+  }, ...getDetailsTopVirtualDom(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
 };
 
+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 => {
+  const toolName = getToolName(event);
+  if (!toolName) {
+    return '';
+  }
+  if (getMethods.has(toolName)) {
+    return 'GET';
+  }
+  if (postMethods.has(toolName)) {
+    return 'POST';
+  }
+  if (deleteMethods.has(toolName)) {
+    return 'DELETE';
+  }
+  return '';
+};
+
+const getTableCellDom = (column, event, isErrorStatus) => {
+  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 [];
+  }
+};
 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 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];
   });
@@ -6050,7 +7375,7 @@ const getTableBodyDom = (rowNodes, eventCount) => {
   }, ...rowNodes];
 };
 
-const tableColClassNames = ['TableColZero', 'TableColOne', 'TableColTwo'];
+const tableColClassNames = ['TableColZero', 'TableColOne', 'TableColTwo', 'TableColThree'];
 const getTableColumnGroupDom = visibleTableColumns => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
   return [{
@@ -6073,6 +7398,7 @@ const getHeaderCellNode = (column, tableColumns) => {
     type: Th
   }, text(getTableColumnLabel(tableColumns, column))];
 };
+
 const getHeaderCellNodes = (visibleTableColumns, tableColumns = createTableColumns()) => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns, tableColumns);
   return orderedVisibleTableColumns.flatMap(column => getHeaderCellNode(column, tableColumns));
@@ -6101,8 +7427,8 @@ const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleT
   }, ...getTableColumnGroupDom(visibleTableColumns), ...getTableHeaderDom(visibleTableColumns, tableColumns), ...getTableBodyDom(rowNodes, eventCount)];
 };
 
-const resizerNames = ['ResizerOne', 'ResizerTwo'];
-const resizerClassNames = [ResizerOne, ResizerTwo];
+const resizerNames = ['ResizerOne', 'ResizerTwo', 'ResizerThree'];
+const resizerClassNames = [ResizerOne, ResizerTwo, ResizerThree];
 const getTableResizersDom = visibleTableColumns => {
   const visibleColumnCount = getOrderedVisibleTableColumns(visibleTableColumns).length;
   const resizerCount = Math.max(0, visibleColumnCount - 1);
@@ -6127,6 +7453,7 @@ const getTableResizersDom = visibleTableColumns => {
   return [{
     childCount: resizerCount,
     className: Resizers,
+    role: None,
     type: Div
   }, ...resizerNodes];
 };
@@ -6147,7 +7474,7 @@ const getTableScrollBarDom = visible => {
   }];
 };
 
-const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '', showScrollBar = false) => {
+const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = 'none', showScrollBar = false) => {
   const tableWrapperClassName = mergeClassNames(TableWrapper, focus === FocusChatDebugTable ? FocusOutline : '', className);
   const tableWrapperNode = {
     childCount: showScrollBar ? 3 : 2,
@@ -6161,7 +7488,7 @@ const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultV
   return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus), ...getTableResizersDom(visibleTableColumns), ...getTableScrollBarDom(showScrollBar)];
 };
 
-const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '', showScrollBar = false) => {
+const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = 'none', showScrollBar = false) => {
   const tableSummaryNodes = getTableSummaryDom(summary);
   return [{
     childCount: tableSummaryNodes.length === 0 ? 1 : 2,
@@ -6230,6 +7557,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 [];
@@ -6239,19 +7580,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 => {
@@ -6338,25 +7667,32 @@ 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, 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) => {
   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);
   const previewEvent = selectedEvent ? getPreviewEvent(selectedEvent) : undefined;
+  const previewVirtualization = getPreviewVirtualizationState(selectedEvent, previewTextViewportHeight, previewTextDeltaY);
+  const previewVirtualizationOptions = previewTextViewportHeight <= 0 || previewVirtualization.totalLineCount === 0 ? undefined : {
+    endLineY: previewVirtualization.endLineY,
+    showScrollBar: previewVirtualization.showScrollBar,
+    startLineY: previewVirtualization.startLineY
+  };
   const previewEventNodes = getPreviewEventNodes(previewEvent, selectedEvent, previewTextCursorRowIndex === null || previewTextCursorColumnIndex === null ? null : {
     columnIndex: previewTextCursorColumnIndex,
     rowIndex: previewTextCursorRowIndex
-  });
+  }, previewVirtualizationOptions);
   const payloadEventNodes = selectedEvent ? getEventNode(getPayloadEvent(selectedEvent)) : [];
   const responseEventNodes = selectedEvent ? getEventNode(getResponseEvent(selectedEvent)) : [];
-  const hasSelectedEvent = responseEventNodes.length > 0;
+  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);
+  const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualizationOptions);
   const sashNodes = getSashNodesDom(hasSelectedEvent);
   const splitChildCount = hasSelectedEvent ? 3 : 1;
   const rootChildCount = 3;
@@ -6405,12 +7741,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) => {
+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) => {
   if (errorMessage) {
     return getDebugErrorDom(errorMessage);
   }
@@ -6430,17 +7766,18 @@ 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, 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);
     const devtoolsContentNodes = devtoolsDom.slice(1);
     const topLevelNodes = [...getDebugViewTopDom(filterValue, useDevtoolsLayout, categoryFilters), ...devtoolsContentNodes];
     const rootChildCount = getTopLevelChildCount(topLevelNodes);
     return [{
       childCount: rootChildCount,
       className: mergeClassNames(ChatDebugView, ChatDebugViewDevtools),
+      onContextMenu: HandleRootContextMenu,
       type: Div
     }, ...topLevelNodes];
   }
@@ -6450,6 +7787,7 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   return [{
     childCount: rootChildCount,
     className: mergeClassNames(ChatDebugView, useDevtoolsLayout ? ChatDebugViewDevtools : ''),
+    onContextMenu: HandleRootContextMenu,
     type: Div
   }, ...debugViewTopDom, ...contentNodes];
 };
@@ -6467,7 +7805,8 @@ const renderItems = (oldState, newState) => {
     return [SetDom2, newState.uid, []];
   }
   const filteredEvents = getCurrentEvents$2(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);
+  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);
   return [SetDom2, newState.uid, dom];
 };
 
@@ -6539,6 +7878,10 @@ const render2 = (uid, diffResult) => {
 
 const renderEventListeners = () => {
   return [{
+    name: HandleRootContextMenu,
+    params: ['handleRootContextMenu'],
+    preventDefault: true
+  }, {
     name: HandleHeaderContextMenu,
     params: ['handleHeaderContextMenu', ClientX, ClientY],
     preventDefault: true
@@ -6624,8 +7967,21 @@ const renderEventListeners = () => {
   }, {
     name: HandleTableWheel,
     params: ['handleTableWheel', 'event.deltaY'],
-    passive: true,
     preventDefault: true
+  }, {
+    name: HandlePreviewTextWheel,
+    params: ['handlePreviewTextWheel', 'event.deltaY'],
+    preventDefault: true
+  }, {
+    name: HandlePreviewTextScrollBarPointerDown,
+    params: ['handlePreviewTextScrollBarPointerDown', ClientY],
+    trackPointerEvents: [HandlePreviewTextScrollBarPointerMove, HandlePreviewTextScrollBarPointerUp]
+  }, {
+    name: HandlePreviewTextScrollBarPointerMove,
+    params: ['handlePreviewTextScrollBarPointerMove', ClientY]
+  }, {
+    name: HandlePreviewTextScrollBarPointerUp,
+    params: ['handlePreviewTextScrollBarPointerUp']
   }, {
     name: HandleTimelinePointerDown,
     params: ['handleTimelinePointerDown', TargetName, ClientX],
@@ -6653,11 +8009,13 @@ const rerender = state => {
 };
 
 const resetTableColumns = state => {
-  if (getVisibleTableColumns(state.tableColumns).join(',') === defaultVisibleTableColumns.join(',') && isSameTableColumnWidths(state.tableColumnWidths, defaultTableColumnWidths)) {
+  if (getVisibleTableColumns(state.tableColumns).join(',') === defaultVisibleTableColumns.join(',') && isSameTableColumnWidths(state.tableColumnWidths, defaultTableColumnWidths) && state.sortColumn === '' && state.sortDescending === false) {
     return state;
   }
   return {
     ...state,
+    sortColumn: '',
+    sortDescending: false,
     tableColumns: createTableColumns(),
     tableColumnWidths: defaultTableColumnWidths
   };
@@ -6670,7 +8028,7 @@ const handleResize = (state, dimensions) => {
   };
   return applyVirtualTableState({
     ...nextState,
-    tableWidth: clampTableWidth(nextState.width, state.tableWidth)
+    tableWidth: clampTableWidth(nextState, state.tableWidth)
   });
 };
 
@@ -6727,6 +8085,9 @@ const setEvents = (state, events) => {
     initial: false,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null
@@ -6754,6 +8115,9 @@ const setSessionId = async (state, sessionId) => {
       initial: false,
       previewTextCursorColumnIndex: null,
       previewTextCursorRowIndex: null,
+      previewTextDeltaY: 0,
+      previewTextScrollBarHandleOffset: 0,
+      previewTextScrollBarPointerActive: false,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null,
@@ -6770,6 +8134,9 @@ const setSessionId = async (state, sessionId) => {
     initial: false,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null,
@@ -6820,6 +8187,11 @@ const commandMap = {
   'ChatDebug.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
   'ChatDebug.handleInput': wrapCommand(handleInput),
   'ChatDebug.handlePreviewTextPointerDown': wrapCommand(handlePreviewTextPointerDown),
+  'ChatDebug.handlePreviewTextScrollBarPointerDown': wrapCommand(handlePreviewTextScrollBarPointerDown),
+  'ChatDebug.handlePreviewTextScrollBarPointerMove': wrapCommand(handlePreviewTextScrollBarPointerMove),
+  'ChatDebug.handlePreviewTextScrollBarPointerUp': wrapCommand(handlePreviewTextScrollBarPointerUp),
+  'ChatDebug.handlePreviewTextWheel': wrapCommand(handlePreviewTextWheel),
+  'ChatDebug.handleRootContextMenu': wrapCommand(handleRootContextMenu),
   'ChatDebug.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'ChatDebug.handleSashPointerMove': wrapCommand(handleSashPointerMove),
   'ChatDebug.handleSashPointerUp': wrapCommand(handleSashPointerUp),
@@ -6833,6 +8205,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),