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

package/dist/chatDebugViewWorkerMain.js

@@ -1185,6 +1185,9 @@ const writeClipBoardText = async text => {
 const getPreference = async key => {
   return await invoke('Preferences.get', key);
 };
+const openUri = async (uri, focus, options) => {
+  await invoke('Main.openUri', uri, focus, options);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1420,6 +1423,31 @@ const appendStoredRemovedImageAttachmentForTest = async (state, sessionId, event
   return state;
 };
 
+const Filter = 'filter';
+const EventCategoryFilter = 'eventCategoryFilter';
+const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
+const ShowInputEvents = 'showInputEvents';
+const ShowResponsePartEvents = 'showResponsePartEvents';
+const UseDevtoolsLayout = 'useDevtoolsLayout';
+const SelectedEventIndex = 'selectedEventIndex';
+const CloseDetails$1 = 'closeDetails';
+const DetailTab = 'detailTab';
+const TimelineStartSeconds = 'timelineStartSeconds';
+const TimelineEndSeconds = 'timelineEndSeconds';
+const TimelineRangePreset = 'timelineRangePreset';
+const Refresh$1 = 'refresh';
+const All$1 = 'all';
+const Tools$1 = 'tools';
+const Network$1 = 'network';
+const Ui$1 = 'ui';
+const Stream$1 = 'stream';
+const Response$1 = 'response';
+const Preview$1 = 'preview';
+const Payload$1 = 'payload';
+const Headers$1 = 'headers';
+const Tokens$1 = 'tokens';
+const Timing$1 = 'timing';
+
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1432,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;
@@ -2465,6 +2460,18 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
+const getSelectedDetailTab = detailTabs => {
+  const selectedDetailTab = detailTabs.find(detailTab => detailTab.isSelected);
+  if (selectedDetailTab) {
+    return selectedDetailTab.name;
+  }
+  const responseTab = detailTabs.find(detailTab => detailTab.name === Response$1);
+  if (responseTab) {
+    return responseTab.name;
+  }
+  return detailTabs[0]?.name ?? Response$1;
+};
+
 const filterEventsByTimelineRange = (events, startValue, endValue) => {
   const eventsWithTime = getEventsWithTime(events);
   if (eventsWithTime.length === 0) {
@@ -2677,20 +2684,20 @@ const isUiEvent = event => {
 
 const matchesSingleEventCategoryFilter = (event, eventCategoryFilter) => {
   switch (eventCategoryFilter) {
-    case Network:
+    case Network$1:
       return isNetworkEvent(event);
-    case Stream:
+    case Stream$1:
       return isStreamEvent(event);
-    case Tools:
+    case Tools$1:
       return isToolEvent(event);
-    case Ui:
+    case Ui$1:
       return isUiEvent(event);
     default:
       return true;
   }
 };
 const matchesEventCategoryFilter = (event, eventCategoryFilters) => {
-  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All)) {
+  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All$1)) {
     return true;
   }
   return eventCategoryFilters.some(eventCategoryFilter => matchesSingleEventCategoryFilter(event, eventCategoryFilter));
@@ -2700,7 +2707,7 @@ const getFilteredEvents = (events, filterValue, eventCategoryFilters, showInputE
   const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
   const collapsedEvents = collapseToolExecutionEvents(visibleEvents);
   const parsedFilter = parseFilterValue(filterValue);
-  const activeEventCategoryFilters = parsedFilter.eventCategoryFilter === All ? eventCategoryFilters : [parsedFilter.eventCategoryFilter];
+  const activeEventCategoryFilters = parsedFilter.eventCategoryFilter === All$1 ? eventCategoryFilters : [parsedFilter.eventCategoryFilter];
   const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilters));
   const {
     filterText
@@ -3127,7 +3134,15 @@ const selectEventAtIndexDependencies = {
 };
 const getCurrentEvents$1 = state => getCurrentEvents$2(state);
 const selectEventAtIndex = async (state, selectedEventIndex, dependencies = selectEventAtIndexDependencies) => {
-  const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
+  const {
+    databaseName,
+    dataBaseVersion,
+    detailTabs,
+    eventStoreName,
+    sessionId,
+    sessionIdIndexName
+  } = state;
+  const selectedDetailTab = getSelectedDetailTab(detailTabs);
   const currentEvents = getCurrentEvents$1(state);
   const selectedEvent = currentEvents[selectedEventIndex];
   if (!selectedEvent) {
@@ -3146,7 +3161,7 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
       selectedEventIndex
     };
   }
-  const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  const selectedEventDetails = await dependencies.loadSelectedEvent(databaseName, dataBaseVersion, eventStoreName, sessionId, sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return withSelectedEventVisible({
     ...state,
@@ -3210,6 +3225,12 @@ const getMenuEntriesTableBody = props => {
     flags: None$1,
     id: 'copy',
     label: copy()
+  }, {
+    args: [props.eventIndex],
+    command: 'ChatDebug.handleTableRowOpenInNewTab',
+    flags: None$1,
+    id: 'open-in-new-tab',
+    label: openInNewTab()
   }];
 };
 
@@ -3312,9 +3333,51 @@ const getMenuIds = () => {
   return [MenuChatDebugTableHeader, MenuChatDebugTableBody, 556, 557];
 };
 
+const getResponseMap = events => {
+  const seen = Object.create(null);
+  for (const event of events) {
+    if (event.type === 'ai-response' && 'requestId' in event && typeof event.requestId === 'string') {
+      seen[event.requestId] = event;
+    }
+  }
+  return seen;
+};
+
+const toPrettyEvents = rawEvents => {
+  if (rawEvents.type === 'error') {
+    return [];
+  }
+  const pretty = [];
+  const map = getResponseMap(rawEvents.events);
+  for (const item of rawEvents.events) {
+    if (item.type === 'ai-request' && 'requestId' in item && typeof item.requestId === 'string') {
+      const response = map[item.requestId];
+      if (response) {
+        pretty.push({
+          eventId: item.eventId,
+          type: 'ai-request-response'
+        });
+      } else {
+        pretty.push(item);
+      }
+    } else if (item.type === 'ai-response' && 'requestId' in item && typeof item.requestId === 'string') ; else {
+      pretty.push(item);
+    }
+  }
+  return pretty;
+};
+
 const listChatViewEvents = async (sessionId, _databaseName, _dataBaseVersion, _eventStoreName, _sessionIdIndexName) => {
   try {
-    return await listChatViewEvents$1(sessionId);
+    const rawEvents = await listChatViewEvents$1(sessionId);
+    if (rawEvents.type === 'error') {
+      return rawEvents;
+    }
+    const prettyEvents = toPrettyEvents(rawEvents);
+    return {
+      events: prettyEvents,
+      type: 'success'
+    };
   } catch (error) {
     return {
       error,
@@ -3724,7 +3787,7 @@ const handleEventCategoryFilter$1 = (state, value, ctrlKey = false, metaKey = fa
   const {
     categoryFilters
   } = state;
-  const newCategoryFilters = selectCategoryFilter(categoryFilters, value || All, ctrlKey || metaKey);
+  const newCategoryFilters = selectCategoryFilter(categoryFilters, value || All$1, ctrlKey || metaKey);
   if (newCategoryFilters === categoryFilters) {
     return state;
   }
@@ -3845,7 +3908,7 @@ const handleFilter = (state, value) => {
   });
 };
 const handleEventCategoryFilter = (state, value) => {
-  const categoryFilters = selectCategoryFilter(state.categoryFilters, value || All);
+  const categoryFilters = selectCategoryFilter(state.categoryFilters, value || All$1);
   if (categoryFilters === state.categoryFilters) {
     return state;
   }
@@ -3931,7 +3994,7 @@ const handleDetailTab = (state, value) => {
   };
 };
 const inputHandlers = {
-  [CloseDetails]: handleCloseDetails,
+  [CloseDetails$1]: handleCloseDetails,
   [DetailTab]: handleDetailTab,
   [EventCategoryFilter]: handleEventCategoryFilter,
   [Filter]: handleFilter,
@@ -4552,6 +4615,20 @@ const handleTableRowCopy = async (state, eventIndex) => {
   return state;
 };
 
+const toDataUri = text => {
+  return `data:application/json,${encodeURIComponent(text)}`;
+};
+const handleTableRowOpenInNewTab = async (state, eventIndex) => {
+  const currentEvents = getCurrentEvents$1(state);
+  const event = currentEvents[eventIndex];
+  if (!event) {
+    return state;
+  }
+  const text = JSON.stringify(event, null, 2);
+  await openUri(toDataUri(text));
+  return state;
+};
+
 const getHandleOffsetAndPercent = (tableBodyHeight, scrollBarHeight, relativeY) => {
   const halfScrollBarHeight = scrollBarHeight / 2;
   if (relativeY <= halfScrollBarHeight) {
@@ -4939,13 +5016,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));
@@ -5738,10 +5815,10 @@ const refreshButtonDom = [{
   'aria-label': refreshEvents$1(),
   childCount: 1,
   className: ChatDebugViewRefreshButton,
-  name: Refresh,
+  name: Refresh$1,
   onClick: HandleClickRefresh,
   type: Button$1,
-  value: Refresh
+  value: Refresh$1
 }, text(refresh$1())];
 const getRefreshButtonDom = () => {
   return refreshButtonDom;
@@ -5803,7 +5880,7 @@ const detailsCloseButtonDom = [{
   'aria-label': closeDetails(),
   childCount: 1,
   className: ChatDebugViewDetailsClose,
-  name: CloseDetails,
+  name: CloseDetails$1,
   onChange: HandleCloseDetails,
   onClick: HandleCloseDetails,
   type: Button$1,
@@ -5817,6 +5894,44 @@ const getDetailsCloseButtonDom = () => {
   return detailsCloseButtonDom;
 };
 
+const getDetailTabDom = detailTab => {
+  const {
+    isSelected
+  } = detailTab;
+  return [{
+    'aria-controls': getPanelId(detailTab.name),
+    ariaSelected: isSelected,
+    childCount: 1,
+    className: mergeClassNames(PanelTab, isSelected ? PanelTabSelected : ''),
+    name: detailTab.name,
+    onChange: SelectDetailTab,
+    onClick: SelectDetailTab,
+    onFocus: HandleDetailTabsFocus,
+    role: Tab,
+    tabIndex: isSelected ? 0 : -1,
+    type: Button$1
+  }, text(detailTab.label)];
+};
+
+const getTabNodes = detailTabs => {
+  return [{
+    'aria-label': detailSections(),
+    childCount: detailTabs.length,
+    className: ChatDebugViewDetailsTabs,
+    role: 'tablist',
+    type: Div
+  }, ...detailTabs.flatMap(getDetailTabDom)];
+};
+
+const getDetailsTopVirtualDom = detailTabs => {
+  return [{
+    childCount: 2,
+    className: ChatDebugViewDetailsTop,
+    onContextMenu: HandleDetailsTopContextMenu,
+    type: Div
+  }, ...getDetailsCloseButtonDom(), ...getTabNodes(detailTabs)];
+};
+
 const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
   if (selectedEvent === null) {
     return detailTabs;
@@ -6993,53 +7108,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 +7138,7 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
     childCount: 2,
     className: ChatDebugViewDetails,
     type: Section
-  }, {
-    childCount: 2,
-    className: ChatDebugViewDetailsTop,
-    onContextMenu: HandleDetailsTopContextMenu,
-    type: Div
-  }, ...getDetailsCloseButtonDom(), ...getTabNodes(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
+  }, ...getDetailsTopVirtualDom(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
 };
 
 const getMethods = new Set(['list_dir', 'list_files', 'read_file']);
@@ -7629,7 +7710,7 @@ const getTopLevelChildCount = nodes => {
   return count;
 };
 const getEventCategoryFilterDescription = eventCategoryFilters => {
-  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All)) {
+  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All$1)) {
     return '';
   }
   return eventCategoryFilters.map(eventCategoryFilter => getEventCategoryFilterLabel(eventCategoryFilter).toLowerCase()).join(', ');
@@ -7654,7 +7735,7 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   const hasFilterValue = filterDescriptionParts.length > 0;
   const filterDescription = filterDescriptionParts.join(' ');
   const noFilteredEventsMessage = noEventsFoundMatching(filterDescription);
-  const useNoToolCallEventsMessage = eventCategoryFilters.length === 1 && eventCategoryFilters[0] === Tools && !trimmedFilterValue && !hasTimelineFilter;
+  const useNoToolCallEventsMessage = eventCategoryFilters.length === 1 && eventCategoryFilters[0] === Tools$1 && !trimmedFilterValue && !hasTimelineFilter;
   const emptyMessage = getEmptyMessage(events.length, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage);
   const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
   if (useDevtoolsLayout) {
@@ -8093,6 +8174,7 @@ const commandMap = {
   'ChatDebug.handleTableResizerPointerMove': wrapCommand(handleTableResizerPointerMove),
   'ChatDebug.handleTableResizerPointerUp': wrapCommand(handleTableResizerPointerUp),
   'ChatDebug.handleTableRowCopy': wrapCommand(handleTableRowCopy),
+  'ChatDebug.handleTableRowOpenInNewTab': wrapCommand(handleTableRowOpenInNewTab),
   'ChatDebug.handleTableScrollBarPointerDown': wrapCommand(handleTableScrollBarPointerDown),
   'ChatDebug.handleTableScrollBarPointerMove': wrapCommand(handleTableScrollBarPointerMove),
   'ChatDebug.handleTableScrollBarPointerUp': wrapCommand(handleTableScrollBarPointerUp),

package/package.json

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