@lvce-editor/chat-debug-view 10.16.0 → 10.18.0

package/dist/chatDebugViewWorkerMain.js

@@ -1471,6 +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 General = 'General';
 const Headers = 'Headers';
 const ImageCouldNotBeLoaded = 'image could not be loaded';
 const InputTokens = 'Input Tokens';
@@ -1492,10 +1493,15 @@ const Preview = 'Preview';
 const Refresh = 'Refresh';
 const RefreshEvents = 'Refresh events';
 const ResetColumns = 'Reset columns';
+const RequestHeaders = 'Request Headers';
+const RequestMethod = 'Request Method';
+const RequestUrl = 'Request URL';
 const Response = 'Response';
+const ResponseHeaders = 'Response Headers';
 const SecondsRange = '{PH1}s-{PH2}s';
 const Started = 'Started';
 const Status$2 = 'Status';
+const StatusCode = 'Status Code';
 const Stream = 'Stream';
 const TableSummaryPlural = '{PH1} events, {PH2} from start to finish';
 const TableSummarySingular = '{PH1} event, {PH2} from start to finish';
@@ -1556,6 +1562,9 @@ const fromSeconds = seconds => {
     PH1: seconds
   });
 };
+const general = () => {
+  return i18nString(General);
+};
 const headers = () => {
   return i18nString(Headers);
 };
@@ -1617,6 +1626,18 @@ const refresh$1 = () => {
 const refreshEvents$1 = () => {
   return i18nString(RefreshEvents);
 };
+const requestHeaders = () => {
+  return i18nString(RequestHeaders);
+};
+const requestMethod = () => {
+  return i18nString(RequestMethod);
+};
+const requestUrl = () => {
+  return i18nString(RequestUrl);
+};
+const responseHeaders = () => {
+  return i18nString(ResponseHeaders);
+};
 const resetColumns = () => {
   return i18nString(ResetColumns);
 };
@@ -1635,6 +1656,9 @@ const started = () => {
 const stream = () => {
   return i18nString(Stream);
 };
+const statusCode = () => {
+  return i18nString(StatusCode);
+};
 const timing = () => {
   return i18nString(Timing);
 };
@@ -2071,7 +2095,13 @@ 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);
+  if (event.type !== 'ai-request') {
+    return false;
+  }
+  if (isHeadersRecord$1(event.headers)) {
+    return true;
+  }
+  return isHeadersRecord$1(event.endValue) && isHeadersRecord$1(event.endValue.headers);
 };
 
 const hasTimingDetails = event => {
@@ -2082,6 +2112,11 @@ const hasTimingDetails = event => {
 };
 
 const getResponseEvent = event => {
+  // @ts-ignore
+  if (event && event.endValue && event.endValue.value) {
+    // @ts-ignore
+    return event.endValue.value;
+  }
   const {
     responseEvent
   } = event;
@@ -2713,6 +2748,9 @@ const getFilteredEvents = (events, filterValue, eventCategoryFilters, showInputE
 };
 
 const getDurationText = event => {
+  if (event.time) {
+    return event.time;
+  }
   const explicitDuration = event.durationMs ?? event.duration;
   if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
     return `${explicitDuration}ms`;
@@ -2888,7 +2926,12 @@ const getSelectedDetailTab = detailTabs => {
   return detailTabs[0]?.name ?? Response$1;
 };
 
-const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreName, sessionId, _sessionIdIndexName, eventId, type, endEventId) => {
+const loadSelectedEvent = async ({
+  endEventId,
+  eventId,
+  sessionId,
+  type
+}) => {
   const raw = await loadSelectedEvent$1(sessionId, eventId, type);
   if (endEventId && endEventId !== -1) {
     const end = await loadSelectedEvent$1(sessionId, endEventId, type);
@@ -3158,12 +3201,8 @@ const withPreparedSelectedEventPreview = async event => {
 
 const selectEventAtIndex = async (state, selectedEventIndex) => {
   const {
-    databaseName,
-    dataBaseVersion,
     detailTabs,
-    eventStoreName,
-    sessionId,
-    sessionIdIndexName
+    sessionId
   } = state;
   const selectedDetailTab = getSelectedDetailTab(detailTabs);
   const currentEvents = getCurrentEvents$1(state);
@@ -3184,9 +3223,13 @@ const selectEventAtIndex = async (state, selectedEventIndex) => {
       selectedEventIndex
     };
   }
-  const selectedEventDetails = await loadSelectedEvent(databaseName, dataBaseVersion, eventStoreName, sessionId, sessionIdIndexName, selectedEvent.eventId, selectedEvent.type,
-  // @ts-ignore
-  selectedEvent['eventEndId'] || 0);
+  const selectedEventDetails = await loadSelectedEvent({
+    // @ts-ignore
+    endEventId: selectedEvent['eventEndId'] || 0,
+    eventId: selectedEvent.eventId,
+    sessionId,
+    type: selectedEvent.type
+  });
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return withSelectedEventVisible({
     ...state,
@@ -3371,6 +3414,47 @@ const getResponseMap = events => {
   return seen;
 };
 
+const getMergedRequestResponseEvent = (item, response) => {
+  const parsedStart = new Date(item.timestamp || '');
+  const parsedEnd = new Date(response.timestamp || '');
+  const durationMs = parsedEnd.getTime() - parsedStart.getTime();
+  const started = getStartedTimestamp(item);
+  const ended = getEndedTimestamp(response);
+  const timestamp = item.timestamp ?? started;
+  if (Number.isFinite(durationMs) && durationMs >= 0) {
+    return {
+      durationMs,
+      ...(ended === undefined ? {} : {
+        ended
+      }),
+      eventEndId: response.eventId,
+      eventId: item.eventId,
+      method: 'POST',
+      ...(started === undefined ? {} : {
+        started
+      }),
+      ...(timestamp === undefined ? {} : {
+        timestamp
+      }),
+      type: 'ai-request-response'
+    };
+  }
+  return {
+    ...(ended === undefined ? {} : {
+      ended
+    }),
+    eventEndId: response.eventId,
+    eventId: item.eventId,
+    method: 'POST',
+    ...(started === undefined ? {} : {
+      started
+    }),
+    ...(timestamp === undefined ? {} : {
+      timestamp
+    }),
+    type: 'ai-request-response'
+  };
+};
 const toPrettyEvents = rawEvents => {
   if (rawEvents.type === 'error') {
     return [];
@@ -3381,11 +3465,7 @@ const toPrettyEvents = rawEvents => {
     if (item.type === 'ai-request' && 'requestId' in item && typeof item.requestId === 'string') {
       const response = map[item.requestId];
       if (response) {
-        pretty.push({
-          eventEndId: response.eventId,
-          eventId: item.eventId,
-          type: 'ai-request-response'
-        });
+        pretty.push(getMergedRequestResponseEvent(item, response));
       } else {
         pretty.push(item);
       }
@@ -3625,7 +3705,11 @@ const restoreSelectedEvent = async state => {
       selectedEventIndex: null
     };
   }
-  const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent({
+    eventId: selectedEvent.eventId,
+    sessionId: state.sessionId,
+    type: selectedEvent.type
+  });
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return {
     ...state,
@@ -5212,6 +5296,24 @@ const getCss = state => {
   width: 100%;
 }
 
+.ChatDebugViewHeadersSection {
+  display: flex;
+  flex-direction: column;
+}
+
+.ChatDebugViewHeadersSection + .ChatDebugViewHeadersSection {
+  margin-top: 16px;
+}
+
+.ChatDebugViewHeadersSectionHeading {
+  color: var(--vscode-descriptionForeground, rgba(255, 255, 255, 0.7));
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+}
+
 .ChatDebugViewHeadersCell {
   border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.12));
   color: var(--vscode-editor-foreground);
@@ -5647,6 +5749,8 @@ const ChatDebugViewHeadersHead = 'ChatDebugViewHeadersHead';
 const ChatDebugViewHeadersRow = 'ChatDebugViewHeadersRow';
 const ChatDebugViewHeadersRowEven = 'ChatDebugViewHeadersRowEven';
 const ChatDebugViewHeadersRowOdd = 'ChatDebugViewHeadersRowOdd';
+const ChatDebugViewHeadersSection = 'ChatDebugViewHeadersSection';
+const ChatDebugViewHeadersSectionHeading = 'ChatDebugViewHeadersSectionHeading';
 const ChatDebugViewHeadersTable = 'ChatDebugViewHeadersTable';
 const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
 const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
@@ -5923,22 +6027,22 @@ const getDetailContentDom = (selectedDetailTab, safeSelectedDetailTab, contentNo
   }, ...contentNodes];
 };
 
-const detailsCloseButtonDom = [{
-  'aria-label': closeDetails(),
-  childCount: 1,
-  className: ChatDebugViewDetailsClose,
-  name: CloseDetails$1,
-  onChange: HandleCloseDetails,
-  onClick: HandleCloseDetails,
-  type: Button$1,
-  value: 'close'
-}, {
+const icon = {
   childCount: 0,
   className: 'MaskIcon MaskIconClose',
   type: Div
-}];
+};
 const getDetailsCloseButtonDom = () => {
-  return detailsCloseButtonDom;
+  return [{
+    'aria-label': closeDetails(),
+    childCount: 1,
+    className: ChatDebugViewDetailsClose,
+    name: CloseDetails$1,
+    onChange: HandleCloseDetails,
+    onClick: HandleCloseDetails,
+    type: Button$1,
+    value: 'close'
+  }, icon];
 };
 
 const getDetailTabDom = detailTab => {
@@ -5970,13 +6074,14 @@ const getTabNodes = detailTabs => {
   }, ...detailTabs.flatMap(getDetailTabDom)];
 };
 
+const parentNode = {
+  childCount: 2,
+  className: ChatDebugViewDetailsTop,
+  onContextMenu: HandleDetailsTopContextMenu,
+  type: Div
+};
 const getDetailsTopVirtualDom = detailTabs => {
-  return [{
-    childCount: 2,
-    className: ChatDebugViewDetailsTop,
-    onContextMenu: HandleDetailsTopContextMenu,
-    type: Div
-  }, ...getDetailsCloseButtonDom(), ...getTabNodes(detailTabs)];
+  return [parentNode, ...getDetailsCloseButtonDom(), ...getTabNodes(detailTabs)];
 };
 
 const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
@@ -5989,6 +6094,25 @@ const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
 const isHeadersRecord = value => {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 };
+const isNonEmptyString = value => {
+  return typeof value === 'string' && value.length > 0;
+};
+const getStatusCodeValue = selectedEvent => {
+  if (!selectedEvent) {
+    return undefined;
+  }
+  const endValue = isHeadersRecord(selectedEvent.endValue) ? selectedEvent.endValue : undefined;
+  if (endValue?.statusCode !== undefined) {
+    return endValue.statusCode;
+  }
+  if (selectedEvent.statusCode !== undefined) {
+    return selectedEvent.statusCode;
+  }
+  if (selectedEvent.type === 'ai-request' || selectedEvent.type === 'ai-response') {
+    return getStatusText(selectedEvent);
+  }
+  return undefined;
+};
 const stringifyHeaderValue = value => {
   try {
     return JSON.stringify(value, (_key, nestedValue) => {
@@ -6022,11 +6146,28 @@ const getHeaderValueText = value => {
   }
   return stringifyHeaderValue(value);
 };
-const getHeaders = selectedEvent => {
-  if (selectedEvent === null || !isHeadersRecord(selectedEvent.headers)) {
+const getHeaders = value => {
+  if (!isHeadersRecord(value)) {
     return [];
   }
-  return Object.entries(selectedEvent.headers);
+  return Object.entries(value);
+};
+const getGeneralEntries = selectedEvent => {
+  if (!selectedEvent) {
+    return [];
+  }
+  const entries = [];
+  if (isNonEmptyString(selectedEvent.url)) {
+    entries.push([requestUrl(), selectedEvent.url]);
+  }
+  if (isNonEmptyString(selectedEvent.method)) {
+    entries.push([requestMethod(), selectedEvent.method]);
+  }
+  const statusCode$1 = getStatusCodeValue(selectedEvent);
+  if (statusCode$1 !== undefined && statusCode$1 !== '') {
+    entries.push([statusCode(), statusCode$1]);
+  }
+  return entries;
 };
 const getHeaderRowNodes = (headerName, headerValue, index) => {
   return [{
@@ -6043,11 +6184,7 @@ const getHeaderRowNodes = (headerName, headerValue, index) => {
     type: Td
   }, text(getHeaderValueText(headerValue))];
 };
-const getHeadersContentNodes = (responseEventNodes, selectedEvent) => {
-  const headers = getHeaders(selectedEvent);
-  if (headers.length === 0) {
-    return responseEventNodes;
-  }
+const getHeadersTableNodes = headers => {
   const headerRows = [];
   for (const [index, [headerName, headerValue]] of headers.entries()) {
     headerRows.push(...getHeaderRowNodes(headerName, headerValue, index));
@@ -6078,6 +6215,36 @@ const getHeadersContentNodes = (responseEventNodes, selectedEvent) => {
     type: TBody
   }, ...headerRows];
 };
+const getHeaderSectionNodes = (label, headers) => {
+  return [{
+    childCount: 2,
+    className: ChatDebugViewHeadersSection,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ChatDebugViewHeadersSectionHeading,
+    type: Div
+  }, text(label), ...getHeadersTableNodes(headers)];
+};
+const getHeadersContentNodes = (responseEventNodes, selectedEvent) => {
+  const generalEntries = getGeneralEntries(selectedEvent);
+  const requestHeaders$1 = getHeaders(selectedEvent?.headers);
+  const responseHeaders$1 = getHeaders(isHeadersRecord(selectedEvent?.endValue) ? selectedEvent.endValue.headers : undefined);
+  if (generalEntries.length === 0 && requestHeaders$1.length === 0 && responseHeaders$1.length === 0) {
+    return responseEventNodes;
+  }
+  const nodes = [];
+  if (generalEntries.length > 0) {
+    nodes.push(...getHeaderSectionNodes(general(), generalEntries));
+  }
+  if (requestHeaders$1.length > 0) {
+    nodes.push(...getHeaderSectionNodes(requestHeaders(), requestHeaders$1));
+  }
+  if (responseHeaders$1.length > 0) {
+    nodes.push(...getHeaderSectionNodes(responseHeaders(), responseHeaders$1));
+  }
+  return nodes;
+};
 
 const getEditorRowDom = line => {
   return [{
@@ -6963,7 +7130,13 @@ const getTextEvent = (previewEvent, selectedEvent, previewTextCursor, virtualiza
   const showLineNumbers = !isInvalidImageMessage && !isChatMessageUpdatedPreview;
   return getTextNode(previewEvent, showLineNumbers, showLineNumbers ? previewTextCursor ?? null : null, undefined, virtualization);
 };
+const isOpenAiRequestPreviewEvent = previewEvent => {
+  return isRecord(previewEvent) && previewEvent.type === 'ai-request' && isRecord(previewEvent.endValue) && isRecord(previewEvent.endValue.value) && typeof previewEvent.endValue.value.output_text === 'string';
+};
 const getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor, virtualization) => {
+  if (isOpenAiRequestPreviewEvent(previewEvent)) {
+    return getTextEvent(previewEvent.endValue.value.output_text);
+  }
   if (typeof previewEvent === 'string') {
     return getTextEvent(previewEvent, selectedEvent, previewTextCursor, virtualization);
   }
@@ -7196,10 +7369,22 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
   }, ...getDetailsTopVirtualDom(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
 };
 
+const td$1 = {
+  childCount: 1,
+  className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
+  type: Td
+};
+const getCellDurationDom = event => {
+  return [td$1, text(getEventTableDurationText(event))];
+};
+
 const getMethods = new Set(['list_dir', 'list_files', 'read_file']);
 const postMethods = new Set(['create_directory', 'create_file', 'mkdir', 'write_file']);
 const deleteMethods = new Set(['delete_directory', 'delete_file', 'delete_folder', 'remove_directory', 'remove_file', 'remove_folder']);
 const getEventTableMethodLabel = event => {
+  if (event.method) {
+    return event.method;
+  }
   const toolName = getToolName(event);
   if (!toolName) {
     return '';
@@ -7216,36 +7401,46 @@ const getEventTableMethodLabel = event => {
   return '';
 };
 
+const td = {
+  childCount: 1,
+  className: TableCell,
+  type: Td
+};
+const getCellMethodDom = event => {
+  return [td, text(getEventTableMethodLabel(event))];
+};
+
+const getCellStatusDom = (event, isErrorStatus) => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
+    type: Td
+  }, text(getStatusText(event))];
+};
+
+const getCellTypeDom = event => {
+  return [{
+    childCount: 1,
+    className: TableCell,
+    type: Td
+  }, text(getEventTableTypeLabel(event))];
+};
+
 const getTableCellDom = (column, event, isErrorStatus) => {
   switch (column) {
     case Duration:
-      return [{
-        childCount: 1,
-        className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
-        type: Td
-      }, text(getEventTableDurationText(event))];
+      return getCellDurationDom(event);
     case Method:
-      return [{
-        childCount: 1,
-        className: TableCell,
-        type: Td
-      }, text(getEventTableMethodLabel(event))];
+      return getCellMethodDom(event);
     case Status$1:
-      return [{
-        childCount: 1,
-        className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
-        type: Td
-      }, text(getStatusText(event))];
+      return getCellStatusDom(event, isErrorStatus);
     case Type:
-      return [{
-        childCount: 1,
-        className: TableCell,
-        type: Td
-      }, text(getEventTableTypeLabel(event))];
+      return getCellTypeDom(event);
     default:
       return [];
   }
 };
+
 const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
   return orderedVisibleTableColumns.flatMap(column => {
@@ -8026,7 +8221,7 @@ const renderEventListeners = () => {
     params: ['handleTimelineDoubleClick']
   }, {
     name: HandlePreviewTextPointerDown,
-    params: ['handlePreviewTextPointerDown', 'event.clientX - event.currentTarget.getBoundingClientRect().left', 'event.clientY - event.currentTarget.getBoundingClientRect().top']
+    params: ['handlePreviewTextPointerDown']
   }];
 };
 

package/package.json

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