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

package/dist/chatDebugViewWorkerMain.js

@@ -1185,6 +1185,9 @@ const writeClipBoardText = async text => {
 const getPreference = async key => {
   return await invoke('Preferences.get', key);
 };
+const openUri = async (uri, focus, options) => {
+  await invoke('Main.openUri', uri, focus, options);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1420,6 +1423,31 @@ const appendStoredRemovedImageAttachmentForTest = async (state, sessionId, event
   return state;
 };
 
+const Filter = 'filter';
+const EventCategoryFilter = 'eventCategoryFilter';
+const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
+const ShowInputEvents = 'showInputEvents';
+const ShowResponsePartEvents = 'showResponsePartEvents';
+const UseDevtoolsLayout = 'useDevtoolsLayout';
+const SelectedEventIndex = 'selectedEventIndex';
+const CloseDetails$1 = 'closeDetails';
+const DetailTab = 'detailTab';
+const TimelineStartSeconds = 'timelineStartSeconds';
+const TimelineEndSeconds = 'timelineEndSeconds';
+const TimelineRangePreset = 'timelineRangePreset';
+const Refresh$1 = 'refresh';
+const All$1 = 'all';
+const Tools$1 = 'tools';
+const Network$1 = 'network';
+const Ui$1 = 'ui';
+const Stream$1 = 'stream';
+const Response$1 = 'response';
+const Preview$1 = 'preview';
+const Payload$1 = 'payload';
+const Headers$1 = 'headers';
+const Tokens$1 = 'tokens';
+const Timing$1 = 'timing';
+
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1432,8 +1460,8 @@ 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';
@@ -1443,7 +1471,7 @@ const FailedToLoadChatDebugSession = 'Failed to load chat debug session "{PH1}".
 const FailedToLoadChatDebugSessionWithError = 'Failed to load chat debug session "{PH1}": {PH2}';
 const FilterEvents = 'Filter events';
 const FromSeconds = 'from {PH1}s';
-const Headers$1 = 'Headers';
+const Headers = 'Headers';
 const ImageCouldNotBeLoaded = 'image could not be loaded';
 const InputTokens = 'Input Tokens';
 const InvalidSessionId = 'Invalid session id';
@@ -1452,30 +1480,31 @@ const InvalidUriFormat = 'Invalid URI format';
 const Method$1 = 'Method';
 const MissingUri = 'Missing URI';
 const Name = 'Name';
-const Network$1 = 'Network';
+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 OpenInNewTab = 'Open in New Tab';
 const OutputTokens = 'Output Tokens';
-const Payload$1 = 'Payload';
-const Preview$1 = 'Preview';
-const Refresh$1 = 'Refresh';
+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 Tokens$1 = 'Tokens';
+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';
@@ -1484,6 +1513,9 @@ const WindowSummary = 'Window {PH1}-{PH2} of {PH3}';
 const copy = () => {
   return i18nString(Copy);
 };
+const openInNewTab = () => {
+  return i18nString(OpenInNewTab);
+};
 const cachedTokens = () => {
   return i18nString(CachedTokens);
 };
@@ -1491,10 +1523,10 @@ 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);
@@ -1525,7 +1557,7 @@ const fromSeconds = seconds => {
   });
 };
 const headers = () => {
-  return i18nString(Headers$1);
+  return i18nString(Headers);
 };
 const invalidSessionId = () => {
   return i18nString(InvalidSessionId);
@@ -1552,7 +1584,7 @@ const name = () => {
   return i18nString(Name);
 };
 const network = () => {
-  return i18nString(Network$1);
+  return i18nString(Network);
 };
 const noChatSessionFound = sessionId => {
   return i18nString(NoChatSessionFound, {
@@ -1571,16 +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);
@@ -1589,7 +1621,7 @@ const resetColumns = () => {
   return i18nString(ResetColumns);
 };
 const response = () => {
-  return i18nString(Response$1);
+  return i18nString(Response);
 };
 const secondsRange = (start, end) => {
   return i18nString(SecondsRange, {
@@ -1601,13 +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$1);
+  return i18nString(Tokens);
 };
 const tableSummary = (eventCount, duration) => {
   return i18nString(eventCount === 1 ? TableSummarySingular : TableSummaryPlural, {
@@ -1621,7 +1653,7 @@ const toSeconds = seconds => {
   });
 };
 const tools = () => {
-  return i18nString(Tools$1);
+  return i18nString(Tools);
 };
 const type = () => {
   return i18nString(Type$1);
@@ -1630,7 +1662,7 @@ const value = () => {
   return i18nString(Value);
 };
 const ui = () => {
-  return i18nString(Ui$1);
+  return i18nString(Ui);
 };
 const unableToLoadDebugSessionInvalidUri = uri => {
   return i18nString(UnableToLoadDebugSessionInvalidUri, {
@@ -1648,262 +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 Headers = 'headers';
-const Tokens = 'tokens';
-const Timing = 'timing';
-
-const isDetailTab = value => {
-  return value === Response || value === Preview || value === Payload || value === Headers || value === Tokens || value === Headers || value === Timing;
-};
-
-const getSafeSelectedDetailTab = selectedDetailTab => {
-  return isDetailTab(selectedDetailTab) ? selectedDetailTab : Response;
-};
-
-const isHeadersRecord$1 = value => {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-};
-const hasHeadersDetails = event => {
-  return event.type === 'ai-request' && isHeadersRecord$1(event.headers);
-};
-
-const hasTimingDetails = event => {
-  const hasDuration = typeof event.duration === 'number' || typeof event.durationMs === 'number';
-  const hasStart = event.started !== undefined || event.startTime !== undefined || event.startTimestamp !== undefined;
-  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, 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) {
-    normalizedSelectedDetailTab = Response;
-  }
-  if (!hasTokensTab && normalizedSelectedDetailTab === Tokens) {
-    normalizedSelectedDetailTab = Response;
-  }
-  if (!hasTimingTab && normalizedSelectedDetailTab === Timing) {
-    normalizedSelectedDetailTab = 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 (hasHeadersTab) {
-    detailTabs.push({
-      isSelected: normalizedSelectedDetailTab === Headers,
-      label: headers(),
-      name: Headers
-    });
-  }
-  if (hasTokensTab) {
-    detailTabs.push({
-      isSelected: normalizedSelectedDetailTab === Tokens,
-      label: tokens(),
-      name: Tokens
-    });
-  }
-  if (hasTimingTab) {
-    detailTabs.push({
-      isSelected: normalizedSelectedDetailTab === Timing,
-      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);
@@ -1915,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)));
@@ -1934,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,
@@ -1964,6 +1804,22 @@ const parseFilterValue = filterValue => {
   };
 };
 
+const hasDetailTab = (detailTabs, value) => {
+  return detailTabs.some(detailTab => detailTab.name === value);
+};
+
+const selectDetailTab$1 = (detailTabs, selectedDetailTab) => {
+  if (!hasDetailTab(detailTabs, selectedDetailTab)) {
+    return detailTabs;
+  }
+  return detailTabs.map(detailTab => {
+    return {
+      ...detailTab,
+      isSelected: detailTab.name === selectedDetailTab
+    };
+  });
+};
+
 const Type = 'type';
 const Method = 'method';
 const Duration = 'duration';
@@ -2140,7 +1996,7 @@ const isTableColumnWidths = value => {
   return isFiniteNumber(record.type) && isFiniteNumber(record.method) && isFiniteNumber(record.duration) && isFiniteNumber(record.status);
 };
 
-const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
+const validEventCategoryFilters = new Set([All$1, Network$1, Stream$1, Tools$1, Ui$1]);
 const isSavedState = value => {
   return typeof value === 'object' && value !== null;
 };
@@ -2207,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;
@@ -2237,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) {
@@ -2265,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,
@@ -2465,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) {
@@ -2677,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));
@@ -2700,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
@@ -3122,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) {
@@ -3146,7 +3164,7 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
       selectedEventIndex
     };
   }
-  const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  const selectedEventDetails = await loadSelectedEvent$1(databaseName, dataBaseVersion, eventStoreName, sessionId, sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return withSelectedEventVisible({
     ...state,
@@ -3210,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()
   }];
 };
 
@@ -3247,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;
@@ -3312,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,
@@ -3724,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;
   }
@@ -3735,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;
@@ -3749,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 => {
@@ -3845,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;
   }
@@ -3931,7 +3997,7 @@ const handleDetailTab = (state, value) => {
   };
 };
 const inputHandlers = {
-  [CloseDetails]: handleCloseDetails,
+  [CloseDetails$1]: handleCloseDetails,
   [DetailTab]: handleDetailTab,
   [EventCategoryFilter]: handleEventCategoryFilter,
   [Filter]: handleFilter,
@@ -4409,16 +4475,22 @@ const handlePreviewTextScrollBarPointerDown = (state, eventY) => {
 };
 
 const handlePreviewTextScrollBarPointerMove = (state, eventY) => {
-  if (!state.previewTextScrollBarPointerActive) {
+  const {
+    previewTextDeltaY,
+    previewTextScrollBarHandleOffset,
+    previewTextScrollBarPointerActive,
+    selectedEvent
+  } = state;
+  if (!previewTextScrollBarPointerActive) {
     return state;
   }
   const viewportHeight = getPreviewTextViewportHeight(state);
-  const virtualization = getPreviewVirtualizationState(state.selectedEvent, viewportHeight, state.previewTextDeltaY);
+  const virtualization = getPreviewVirtualizationState(selectedEvent, viewportHeight, previewTextDeltaY);
   if (viewportHeight === 0 || virtualization.scrollBarHeight === 0) {
     return state;
   }
   const relativeY = eventY - getPreviewTextBodyY(state);
-  const nextHandleTop = Math.max(0, Math.min(viewportHeight - virtualization.scrollBarHeight, relativeY - state.previewTextScrollBarHandleOffset));
+  const nextHandleTop = Math.max(0, Math.min(viewportHeight - virtualization.scrollBarHeight, relativeY - previewTextScrollBarHandleOffset));
   const percent = nextHandleTop / Math.max(1, viewportHeight - virtualization.scrollBarHeight);
   const nextState = setPreviewTextDeltaY(state, percent * virtualization.maxDeltaY);
   return {
@@ -4439,7 +4511,10 @@ const handlePreviewTextScrollBarPointerUp = state => {
 };
 
 const handlePreviewTextWheel = (state, deltaY) => {
-  return setPreviewTextDeltaY(state, state.previewTextDeltaY + deltaY);
+  const {
+    previewTextDeltaY
+  } = state;
+  return setPreviewTextDeltaY(state, previewTextDeltaY + deltaY);
 };
 
 const handleRootContextMenu = state => {
@@ -4552,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) {
@@ -4939,13 +5028,13 @@ const getLineCount = state => {
     return 0;
   }
   const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
-  if (selectedDetailTab === Timing || selectedDetailTab === Tokens) {
+  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));
@@ -5705,6 +5794,7 @@ const getFilterInputDom = (filterValue, useDevtoolsLayout) => {
   };
 };
 
+const selectedClassName = mergeClassNames(ChatDebugViewQuickFilterPill, ChatDebugViewQuickFilterPillSelected);
 const getQuickFilterDom = categoryFilter => {
   const {
     isSelected,
@@ -5714,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,
@@ -5738,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;
@@ -5764,6 +5854,19 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, categoryFilters) =>
   }, 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;
@@ -5803,7 +5906,7 @@ const detailsCloseButtonDom = [{
   'aria-label': closeDetails(),
   childCount: 1,
   className: ChatDebugViewDetailsClose,
-  name: CloseDetails,
+  name: CloseDetails$1,
   onChange: HandleCloseDetails,
   onClick: HandleCloseDetails,
   type: Button$1,
@@ -5817,6 +5920,44 @@ const getDetailsCloseButtonDom = () => {
   return detailsCloseButtonDom;
 };
 
+const getDetailTabDom = detailTab => {
+  const {
+    isSelected
+  } = detailTab;
+  return [{
+    'aria-controls': getPanelId(detailTab.name),
+    ariaSelected: isSelected,
+    childCount: 1,
+    className: mergeClassNames(PanelTab, isSelected ? PanelTabSelected : ''),
+    name: detailTab.name,
+    onChange: SelectDetailTab,
+    onClick: SelectDetailTab,
+    onFocus: HandleDetailTabsFocus,
+    role: Tab,
+    tabIndex: isSelected ? 0 : -1,
+    type: Button$1
+  }, text(detailTab.label)];
+};
+
+const getTabNodes = detailTabs => {
+  return [{
+    'aria-label': detailSections(),
+    childCount: detailTabs.length,
+    className: ChatDebugViewDetailsTabs,
+    role: 'tablist',
+    type: Div
+  }, ...detailTabs.flatMap(getDetailTabDom)];
+};
+
+const getDetailsTopVirtualDom = detailTabs => {
+  return [{
+    childCount: 2,
+    className: ChatDebugViewDetailsTop,
+    onContextMenu: HandleDetailsTopContextMenu,
+    type: Div
+  }, ...getDetailsCloseButtonDom(), ...getTabNodes(detailTabs)];
+};
+
 const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
   if (selectedEvent === null) {
     return detailTabs;
@@ -6795,12 +6936,15 @@ const getTextNode = (value, showLineNumbers = true, cursor = null, tokenSegments
   return getEditorDom(lineData, showLineNumbers, cursor, showLineNumbers ? HandlePreviewTextPointerDown : undefined);
 };
 
+const getTextEvent = (previewEvent, selectedEvent, previewTextCursor, virtualization) => {
+  const isInvalidImageMessage = previewEvent === ImageCouldNotBeLoaded;
+  const isChatMessageUpdatedPreview = !!selectedEvent && isChatMessageUpdatedEvent(selectedEvent);
+  const showLineNumbers = !isInvalidImageMessage && !isChatMessageUpdatedPreview;
+  return getTextNode(previewEvent, showLineNumbers, showLineNumbers ? previewTextCursor ?? null : null, undefined, virtualization);
+};
 const 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, undefined, virtualization);
+    return getTextEvent(previewEvent, selectedEvent, previewTextCursor, virtualization);
   }
   if (isWriteFilePreview(previewEvent)) {
     const language = getLanguageFromFileExtension(previewEvent.uri);
@@ -6993,53 +7137,24 @@ const getTokenUsageContentNodes = (responseEventNodes, selectedEvent) => {
 };
 
 const getSelectedContentNodes = (safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization) => {
-  if (safeSelectedDetailTab === Tokens) {
+  if (safeSelectedDetailTab === Tokens$1) {
     return getTokenUsageContentNodes(responseEventNodes, selectedEvent);
   }
-  if (safeSelectedDetailTab === Timing) {
+  if (safeSelectedDetailTab === Timing$1) {
     return getTimingContentNodes(responseEventNodes, selectedEvent);
   }
-  if (safeSelectedDetailTab === Preview) {
+  if (safeSelectedDetailTab === Preview$1) {
     return getPreviewContentNodes(previewEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization);
   }
-  if (safeSelectedDetailTab === Payload) {
+  if (safeSelectedDetailTab === Payload$1) {
     return getPayloadContentNodes(payloadEventNodes, selectedEvent);
   }
-  if (safeSelectedDetailTab === Headers) {
+  if (safeSelectedDetailTab === Headers$1) {
     return getHeadersContentNodes(responseEventNodes, selectedEvent);
   }
   return getResponseContentNodes(responseEventNodes, selectedEvent);
 };
 
-const getDetailTabDom = detailTab => {
-  const {
-    isSelected
-  } = detailTab;
-  return [{
-    'aria-controls': getPanelId(detailTab.name),
-    ariaSelected: isSelected,
-    childCount: 1,
-    className: mergeClassNames(PanelTab, isSelected ? PanelTabSelected : ''),
-    name: detailTab.name,
-    onChange: SelectDetailTab,
-    onClick: SelectDetailTab,
-    onFocus: HandleDetailTabsFocus,
-    role: Tab,
-    tabIndex: isSelected ? 0 : -1,
-    type: Button$1
-  }, text(detailTab.label)];
-};
-
-const getTabNodes = detailTabs => {
-  return [{
-    'aria-label': detailSections(),
-    childCount: detailTabs.length,
-    className: ChatDebugViewDetailsTabs,
-    role: 'tablist',
-    type: Div
-  }, ...detailTabs.flatMap(getDetailTabDom)];
-};
-
 const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs(), previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, previewVirtualization) => {
   if (previewEventNodes.length === 0 && payloadEventNodes.length === 0 && responseEventNodes.length === 0) {
     return [];
@@ -7052,12 +7167,7 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
     childCount: 2,
     className: ChatDebugViewDetails,
     type: Section
-  }, {
-    childCount: 2,
-    className: ChatDebugViewDetailsTop,
-    onContextMenu: HandleDetailsTopContextMenu,
-    type: Div
-  }, ...getDetailsCloseButtonDom(), ...getTabNodes(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
+  }, ...getDetailsTopVirtualDom(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
 };
 
 const getMethods = new Set(['list_dir', 'list_files', 'read_file']);
@@ -7080,52 +7190,51 @@ const getEventTableMethodLabel = event => {
   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 Method:
-        return [{
-          childCount: 1,
-          className: TableCell,
-          type: Td
-        }, text(getEventTableMethodLabel(event))];
-      case Status$1:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
-          type: Td
-        }, text(getStatusText(event))];
-      case Type:
-        return [{
-          childCount: 1,
-          className: TableCell,
-          type: Td
-        }, text(getEventTableTypeLabel(event))];
-      default:
-        return [];
-    }
+  return orderedVisibleTableColumns.flatMap(column => {
+    return getTableCellDom(column, event, isErrorStatus);
   });
 };
 
-const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defaultVisibleTableColumns, startIndex = 0) => {
-  return events.flatMap((event, i) => {
-    const actualIndex = startIndex + i;
-    const isEvenRow = actualIndex % 2 === 1;
-    const rowClassName = isEvenRow ? TableRowEven : TableRowOdd;
-    const isSelected = selectedEventIndex === actualIndex;
-    const isErrorStatus = hasErrorStatus(event);
-    const rowCellNodes = getRowCellNodes(event, isErrorStatus, visibleTableColumns);
+const getDevtoolsRows = (rows, visibleTableColumns = defaultVisibleTableColumns) => {
+  return rows.flatMap(row => {
+    const rowClassName = row.isEven ? TableRowEven : TableRowOdd;
+    const rowCellNodes = getRowCellNodes(row.event, row.isErrorStatus, visibleTableColumns);
     return [{
       childCount: visibleTableColumns.length,
-      className: mergeClassNames(TableRow, rowClassName, isSelected ? TableRowSelected : ''),
-      'data-index': `${actualIndex}`,
+      className: mergeClassNames(TableRow, rowClassName, row.isSelected ? TableRowSelected : ''),
+      'data-index': `${row.index}`,
       type: Tr
     }, ...rowCellNodes];
   });
@@ -7448,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 [];
@@ -7457,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 => {
@@ -7558,7 +7669,8 @@ const getTimelineDom = (timelineInfo, hoverPercent = null) => {
 
 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);
@@ -7629,7 +7741,7 @@ const getTopLevelChildCount = nodes => {
   return count;
 };
 const getEventCategoryFilterDescription = eventCategoryFilters => {
-  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All)) {
+  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All$1)) {
     return '';
   }
   return eventCategoryFilters.map(eventCategoryFilter => getEventCategoryFilterLabel(eventCategoryFilter).toLowerCase()).join(', ');
@@ -7654,7 +7766,7 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   const hasFilterValue = filterDescriptionParts.length > 0;
   const filterDescription = filterDescriptionParts.join(' ');
   const noFilteredEventsMessage = noEventsFoundMatching(filterDescription);
-  const useNoToolCallEventsMessage = eventCategoryFilters.length === 1 && eventCategoryFilters[0] === Tools && !trimmedFilterValue && !hasTimelineFilter;
+  const useNoToolCallEventsMessage = eventCategoryFilters.length === 1 && eventCategoryFilters[0] === Tools$1 && !trimmedFilterValue && !hasTimelineFilter;
   const emptyMessage = getEmptyMessage(events.length, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage);
   const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
   if (useDevtoolsLayout) {
@@ -8093,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),