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

package/dist/chatDebugViewWorkerMain.js

@@ -1137,6 +1137,8 @@ const Tr = 15;
 const Img = 17;
 const Section = 41;
 const Search = 42;
+const Li = 48;
+const Ul = 60;
 const TextArea = 62;
 const Reference = 100;
 
@@ -1375,14 +1377,6 @@ const appendStoredImageAttachmentForTest = async (state, sessionId, eventId, mim
   return state;
 };
 
-const decodeBase64 = value => {
-  const decoded = atob(value);
-  const bytes = new Uint8Array(decoded.length);
-  for (let i = 0; i < decoded.length; i++) {
-    bytes[i] = decoded.codePointAt(i) || 0;
-  }
-  return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
-};
 const createCanvasBlob = async mimeType => {
   const canvas = new OffscreenCanvas(2, 2);
   const context = canvas.getContext('2d');
@@ -1395,6 +1389,16 @@ const createCanvasBlob = async mimeType => {
     type: mimeType
   });
 };
+
+const decodeBase64 = value => {
+  const decoded = atob(value);
+  const bytes = new Uint8Array(decoded.length);
+  for (let i = 0; i < decoded.length; i++) {
+    bytes[i] = decoded.codePointAt(i) || 0;
+  }
+  return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+};
+
 const createBlob = async (mimeType, contentKind, content) => {
   if (contentKind === 'canvas') {
     return createCanvasBlob(mimeType);
@@ -1408,6 +1412,7 @@ const createBlob = async (mimeType, contentKind, content) => {
     type: mimeType
   });
 };
+
 const appendStoredRemovedImageAttachmentForTest = async (state, sessionId, eventId, mimeType, name, contentKind, content, timestamp) => {
   const blob = await createBlob(mimeType, contentKind, content);
   await appendEvent({
@@ -1480,7 +1485,6 @@ const InvalidUriEncoding = 'Invalid URI encoding';
 const InvalidUriFormat = 'Invalid URI format';
 const Method$1 = 'Method';
 const MissingUri = 'Missing URI';
-const Name = 'Name';
 const Network = 'Network';
 const NoChatSessionFound = 'No chat session found for sessionId "{PH1}".';
 const NoEventsFound = 'No events have been found';
@@ -1499,6 +1503,7 @@ const RequestUrl = 'Request URL';
 const Response = 'Response';
 const ResponseHeaders = 'Response Headers';
 const SecondsRange = '{PH1}s-{PH2}s';
+const Size$1 = 'Size';
 const Started = 'Started';
 const Status$2 = 'Status';
 const StatusCode = 'Status Code';
@@ -1513,7 +1518,6 @@ const Type$1 = 'Type';
 const Ui = 'UI';
 const UnableToLoadDebugSessionInvalidUri = 'Unable to load debug session: invalid URI "{PH1}". Expected format: chat-debug://<sessionId>.';
 const UnableToLoadDebugSessionMissingUri = 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
-const Value = 'Value';
 const WindowSummary = 'Window {PH1}-{PH2} of {PH3}';
 
 const copy = () => {
@@ -1589,9 +1593,6 @@ const missingUri = () => {
 const method = () => {
   return i18nString(Method$1);
 };
-const name = () => {
-  return i18nString(Name);
-};
 const network = () => {
   return i18nString(Network);
 };
@@ -1644,6 +1645,9 @@ const resetColumns = () => {
 const response = () => {
   return i18nString(Response);
 };
+const size = () => {
+  return i18nString(Size$1);
+};
 const secondsRange = (start, end) => {
   return i18nString(SecondsRange, {
     PH1: start,
@@ -1682,9 +1686,6 @@ const tools = () => {
 const type = () => {
   return i18nString(Type$1);
 };
-const value = () => {
-  return i18nString(Value);
-};
 const ui = () => {
   return i18nString(Ui);
 };
@@ -1848,7 +1849,8 @@ const Type = 'type';
 const Method = 'method';
 const Duration = 'duration';
 const Status$1 = 'status';
-const tableColumnNames = [Type, Method, Status$1, Duration];
+const Size = 'size';
+const tableColumnNames = [Type, Method, Status$1, Size, Duration];
 const createTableColumns = () => {
   return [{
     isVisible: true,
@@ -1862,6 +1864,10 @@ const createTableColumns = () => {
     isVisible: true,
     label: status(),
     name: Status$1
+  }, {
+    isVisible: true,
+    label: size(),
+    name: Size
   }, {
     isVisible: true,
     label: duration(),
@@ -1899,6 +1905,8 @@ const getTableColumnLabel = (tableColumns, name) => {
       return duration();
     case Method:
       return method();
+    case Size:
+      return size();
     case Status$1:
       return status();
     case Type:
@@ -1911,6 +1919,7 @@ const getTableColumnLabel = (tableColumns, name) => {
 const defaultTableColumnWidths = {
   duration: 110,
   method: 90,
+  size: 100,
   status: 110,
   type: 260
 };
@@ -1937,6 +1946,7 @@ const getTableWidthFromClientX = (state, clientX) => {
 const minimumTableColumnWidths = {
   [Duration]: 80,
   [Method]: 56,
+  [Size]: 80,
   [Status$1]: 56,
   [Type]: 80
 };
@@ -2005,7 +2015,7 @@ const getResizedTableColumnWidths = (state, visibleTableColumns, tableColumnWidt
 };
 
 const isSameTableColumnWidths = (first, second) => {
-  return first.type === second.type && first.method === second.method && first.duration === second.duration && first.status === second.status;
+  return first.type === second.type && first.method === second.method && first.duration === second.duration && first.size === second.size && first.status === second.status;
 };
 
 const isFiniteNumber = value => {
@@ -2017,13 +2027,20 @@ const isTableColumnWidths = value => {
     return false;
   }
   const record = value;
-  return isFiniteNumber(record.type) && isFiniteNumber(record.method) && isFiniteNumber(record.duration) && isFiniteNumber(record.status);
+  return isFiniteNumber(record.type) && isFiniteNumber(record.method) && isFiniteNumber(record.duration) && isFiniteNumber(record.size) && isFiniteNumber(record.status);
 };
 
 const validEventCategoryFilters = new Set([All$1, Network$1, Stream$1, Tools$1, Ui$1]);
 const isSavedState = value => {
   return typeof value === 'object' && value !== null;
 };
+const isLegacyTableColumnWidths = value => {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+  const record = value;
+  return typeof record.duration === 'number' && Number.isFinite(record.duration) && typeof record.method === 'number' && Number.isFinite(record.method) && typeof record.status === 'number' && Number.isFinite(record.status) && typeof record.type === 'number' && Number.isFinite(record.type) && !('size' in record);
+};
 const restoreCategoryFilters = (savedState, currentCategoryFilters) => {
   if (Array.isArray(savedState.eventCategoryFilters)) {
     return selectCategoryFilters(currentCategoryFilters, savedState.eventCategoryFilters.filter(value => typeof value === 'string'));
@@ -2056,10 +2073,31 @@ const restoreVisibleTableColumns = (savedState, currentTableColumns) => {
     return currentTableColumns;
   }
   const visibleTableColumns = savedState.visibleTableColumns.filter(value => typeof value === 'string');
+  if (isLegacyTableColumnWidths(savedState.tableColumnWidths)) {
+    const savedVisibleColumns = new Set(visibleTableColumns);
+    const visibleColumnsWithDefaults = currentTableColumns.filter(column => savedVisibleColumns.has(column.name) || column.name === 'size').map(column => column.name);
+    return getTableColumnsWithVisibility(currentTableColumns, visibleColumnsWithDefaults);
+  }
   return getTableColumnsWithVisibility(currentTableColumns, visibleTableColumns);
 };
 const restoreTableColumnWidths = (savedState, currentTableColumnWidths) => {
-  return isTableColumnWidths(savedState.tableColumnWidths) ? savedState.tableColumnWidths : currentTableColumnWidths;
+  const {
+    tableColumnWidths: savedTableColumnWidths
+  } = savedState;
+  if (isTableColumnWidths(savedTableColumnWidths)) {
+    return savedTableColumnWidths;
+  }
+  if (isLegacyTableColumnWidths(savedTableColumnWidths)) {
+    const legacyTableColumnWidths = savedTableColumnWidths;
+    return {
+      duration: legacyTableColumnWidths.duration,
+      method: legacyTableColumnWidths.method,
+      size: currentTableColumnWidths.size,
+      status: legacyTableColumnWidths.status,
+      type: legacyTableColumnWidths.type
+    };
+  }
+  return currentTableColumnWidths;
 };
 const restoreSavedState = (state, savedState) => {
   if (!isSavedState(savedState)) {
@@ -2111,21 +2149,37 @@ const hasTimingDetails = event => {
   return hasDuration || hasStart && hasEnd;
 };
 
-const getResponseEvent = event => {
-  // @ts-ignore
-  if (event && event.endValue && event.endValue.value) {
-    // @ts-ignore
-    return event.endValue.value;
+const getEndValueResponseData = event => {
+  const endValue = event.endValue;
+  if (!endValue || endValue.value === undefined) {
+    return undefined;
   }
+  return endValue.value;
+};
+const getMergedResponseData = 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;
+  if (!responseEvent || typeof responseEvent !== 'object' || typeof responseEvent.type !== 'string') {
+    return undefined;
+  }
+  const mergedResponseEvent = responseEvent;
+  if (mergedResponseEvent.value !== undefined) {
+    return mergedResponseEvent.value;
+  }
+  return responseEvent;
+};
+const getResponseData = event => {
+  const endValueResponseData = getEndValueResponseData(event);
+  if (endValueResponseData !== undefined) {
+    return endValueResponseData;
+  }
+  return getMergedResponseData(event);
+};
+const getResponseEvent = event => {
+  const responseData = getResponseData(event);
+  if (responseData !== undefined) {
+    return responseData;
   }
   return event;
 };
@@ -2470,7 +2524,6 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '
     platform,
     sessionId,
     sessionIdIndexName,
-    tableColumns: [],
     uid,
     uri,
     width,
@@ -2864,10 +2917,19 @@ const getStatusText = event => {
   return hasErrorStatus(event) ? '400' : '200';
 };
 
+const getSizeSortValue = event => {
+  const rawSize = event.size;
+  if (typeof rawSize !== 'number' || !Number.isFinite(rawSize)) {
+    return '0000000000000000';
+  }
+  return String(Math.max(0, Math.trunc(rawSize))).padStart(16, '0');
+};
 const getEventTableColumnValue = (event, column) => {
   switch (column) {
     case Duration:
       return getEventTableDurationText(event);
+    case Size:
+      return getSizeSortValue(event);
     case Status$1:
       return getStatusText(event);
     case Type:
@@ -3089,11 +3151,26 @@ const getAttachmentImagePreviewMimeType = event => {
   return typeof event.mimeType === 'string' ? event.mimeType : undefined;
 };
 
-const formatImageSize = size => {
-  if (size < 1024) {
-    return `${size} B`;
+const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
+const formatBytes = size => {
+  if (!Number.isFinite(size) || size <= 0) {
+    return '0 B';
+  }
+  let value = size;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
   }
-  return `${(size / 1024).toFixed(1)} kB`;
+  if (unitIndex === 0) {
+    return `${Math.trunc(value)} ${units[unitIndex]}`;
+  }
+  const formatted = value >= 10 ? value.toFixed(0) : value.toFixed(1);
+  return `${formatted} ${units[unitIndex]}`;
+};
+
+const formatImageSize = size => {
+  return formatBytes(size);
 };
 
 const formatImageStats = (width, height, size) => {
@@ -3319,6 +3396,12 @@ const getMenuEntriesTableHeader = state => {
     flags: getColumnVisibilityFlags(state.tableColumns, Status$1),
     id: 'status',
     label: status()
+  }, {
+    args: [Size],
+    command: 'ChatDebug.toggleTableColumnVisibility',
+    flags: getColumnVisibilityFlags(state.tableColumns, Size),
+    id: 'size',
+    label: size()
   }, {
     args: [Duration],
     command: 'ChatDebug.toggleTableColumnVisibility',
@@ -3404,102 +3487,6 @@ 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 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 [];
-  }
-  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(getMergedRequestResponseEvent(item, 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 {
-    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,
-      type: 'error'
-    };
-  }
-};
-
-const loadEventsDependencies = {
-  listChatViewEvents: listChatViewEvents,
-  loadSelectedEvent: loadSelectedEvent
-};
-
 const ParseChatDebugUriErrorCode = {
   InvalidSessionId: 1,
   InvalidUriEncoding: 2,
@@ -3663,6 +3650,99 @@ const getSessionNotFoundMessage = sessionId => {
   return noChatSessionFound(sessionId);
 };
 
+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 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',
+      size: 0,
+      ...(started === undefined ? {} : {
+        started
+      }),
+      ...(timestamp === undefined ? {} : {
+        timestamp
+      }),
+      type: 'ai-request-response'
+    };
+  }
+  return {
+    ...(ended === undefined ? {} : {
+      ended
+    }),
+    eventEndId: response.eventId,
+    eventId: item.eventId,
+    method: 'POST',
+    size: 0,
+    ...(started === undefined ? {} : {
+      started
+    }),
+    ...(timestamp === undefined ? {} : {
+      timestamp
+    }),
+    type: 'ai-request-response'
+  };
+};
+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(getMergedRequestResponseEvent(item, 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 {
+    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,
+      type: 'error'
+    };
+  }
+};
+
 const restoreSelectedEvent = async state => {
   if (state.selectedEventId === null) {
     return {
@@ -3705,7 +3785,7 @@ const restoreSelectedEvent = async state => {
       selectedEventIndex: null
     };
   }
-  const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent({
+  const selectedEventDetails = await loadSelectedEvent({
     eventId: selectedEvent.eventId,
     sessionId: state.sessionId,
     type: selectedEvent.type
@@ -3725,13 +3805,7 @@ const restoreSelectedEvent = async state => {
 };
 
 const loadEventsForSessionId = async (state, sessionId) => {
-  const {
-    databaseName,
-    dataBaseVersion,
-    eventStoreName,
-    sessionIdIndexName
-  } = state;
-  const result = await loadEventsDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
+  const result = await listChatViewEvents(sessionId);
   if (result.type === 'error') {
     return applyVirtualTableState(getStateWithTimelineInfo({
       ...state,
@@ -3770,14 +3844,6 @@ const loadEventsForSessionId = async (state, sessionId) => {
   return withSelectedEventVisible(restoredState);
 };
 
-const loadEventsFromUri = async state => {
-  const sessionId = getSessionIdFromUri(state);
-  if (!sessionId) {
-    return getStateWithInvalidUri(state);
-  }
-  return loadEventsForSessionId(state, sessionId);
-};
-
 const refreshEvents = async state => {
   const sessionId = state.sessionId || getSessionIdFromUri(state);
   if (!sessionId) {
@@ -3790,11 +3856,8 @@ const refresh = async state => {
   return refreshEvents(state);
 };
 
-const handleClickRefreshDependencies = {
-  refresh: refresh
-};
 const handleClickRefresh = async state => {
-  return handleClickRefreshDependencies.refresh(state);
+  return refresh(state);
 };
 
 const handleCloseDetails$1 = state => {
@@ -4166,28 +4229,43 @@ const shouldIncludeArguments = (event, name) => {
   return true;
 };
 
-const getPayloadEvent = event => {
-  const {
-    requestEvent
-  } = event;
-  if (requestEvent && typeof requestEvent === 'object' && typeof requestEvent.type === 'string') {
-    const mergedRequestEvent = requestEvent;
-    if (mergedRequestEvent.body !== undefined) {
-      return mergedRequestEvent.body;
-    }
-    if (mergedRequestEvent.value !== undefined) {
-      return mergedRequestEvent.value;
-    }
-    if (hasOwn(mergedRequestEvent, 'arguments')) {
-      return mergedRequestEvent.arguments;
-    }
-    return requestEvent;
+const getMergedRequestPayloadEvent = requestEvent => {
+  if (!requestEvent || typeof requestEvent !== 'object') {
+    return {
+      found: false
+    };
   }
-  const name = getPreviewName(event);
-  if (name === 'list_files' && hasOwn(event, 'arguments')) {
-    return event.arguments;
+  const mergedRequestEvent = requestEvent;
+  if (typeof mergedRequestEvent.type !== 'string') {
+    return {
+      found: false
+    };
   }
-  const payloadEvent = {
+  if (mergedRequestEvent.body !== undefined) {
+    return {
+      found: true,
+      value: mergedRequestEvent.body
+    };
+  }
+  if (mergedRequestEvent.value !== undefined) {
+    return {
+      found: true,
+      value: mergedRequestEvent.value
+    };
+  }
+  if (hasOwn(mergedRequestEvent, 'arguments')) {
+    return {
+      found: true,
+      value: mergedRequestEvent.arguments
+    };
+  }
+  return {
+    found: true,
+    value: requestEvent
+  };
+};
+const getPayloadObject = (event, name) => {
+  return {
     ...(name === undefined ? {} : {
       name
     }),
@@ -4198,6 +4276,23 @@ const getPayloadEvent = event => {
       result: event.result
     } : {})
   };
+};
+const getPayloadEvent = event => {
+  if (event && event.type === 'ai-request') {
+    return event.body;
+  }
+  const {
+    requestEvent
+  } = event;
+  const mergedRequestPayloadEvent = getMergedRequestPayloadEvent(requestEvent);
+  if (mergedRequestPayloadEvent.found) {
+    return mergedRequestPayloadEvent.value;
+  }
+  const name = getPreviewName(event);
+  if (name === 'list_files' && hasOwn(event, 'arguments')) {
+    return event.arguments;
+  }
+  const payloadEvent = getPayloadObject(event, name);
   if (Object.keys(payloadEvent).length > 0) {
     return payloadEvent;
   }
@@ -4684,6 +4779,8 @@ const handleTableHeaderClick = (state, value) => {
 
 const getTableResizerId = name => {
   switch (name) {
+    case 'ResizerFour':
+      return 4;
     case 'ResizerOne':
       return 1;
     case 'ResizerThree':
@@ -4732,6 +4829,30 @@ const handleTableRowCopy = async (state, eventIndex) => {
   return state;
 };
 
+const toDataUri$1 = text => {
+  return `data:application/json,${encodeURIComponent(text)}`;
+};
+const handleTableRowDoubleClick = async (state, eventX, eventY) => {
+  const eventIndex = getTableBodyEventIndex(state, eventX, eventY);
+  if (eventIndex === -1) {
+    return state;
+  }
+  const event = getCurrentEvents$1(state)[eventIndex];
+  if (!event) {
+    return state;
+  }
+  const responseData = getResponseData(event);
+  if (responseData === undefined) {
+    return state;
+  }
+  const text = JSON.stringify(responseData, null, 2);
+  if (!text) {
+    return state;
+  }
+  await openUri(toDataUri$1(text));
+  return state;
+};
+
 const toDataUri = text => {
   return `data:application/json,${encodeURIComponent(text)}`;
 };
@@ -5063,14 +5184,20 @@ const handleStorageWorkerUpdate = async uid => {
   await invoke('Viewlet.executeViewletCommand', uid, 'ChatDebug.handleClickRefresh');
 };
 
-const loadContentDependencies = loadEventsDependencies;
-loadContentDependencies.registerUpdateListener = registerUpdateListener;
+const loadEventsFromUri = async state => {
+  const sessionId = getSessionIdFromUri(state);
+  if (!sessionId) {
+    return getStateWithInvalidUri(state);
+  }
+  return loadEventsForSessionId(state, sessionId);
+};
+
 const loadContent = async (state, savedState) => {
   await getPreference('chatDebug.autoRefresh');
   const nextState = await loadEventsFromUri(restoreSavedState(state, savedState));
   if (nextState.sessionId) {
     try {
-      await loadContentDependencies.registerUpdateListener(nextState.sessionId, rpcId, nextState.uid);
+      await registerUpdateListener(nextState.sessionId, rpcId, nextState.uid);
     } catch {
       // ignore
     }
@@ -5078,8 +5205,7 @@ const loadContent = async (state, savedState) => {
   return applyVirtualTableState({
     ...nextState,
     categoryFilters: createCategoryFilters(getSelectedEventCategoryFilters(nextState.categoryFilters)),
-    detailTabs: createDetailTabs(getSelectedDetailTab(nextState.detailTabs), nextState.selectedEvent),
-    tableColumns: createTableColumns()
+    detailTabs: createDetailTabs(getSelectedDetailTab(nextState.detailTabs), nextState.selectedEvent)
   });
 };
 
@@ -5174,10 +5300,11 @@ const getCss = state => {
     topSize = 30;
   }
   const tableColumnLayout = getTableColumnLayout(tableContentWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths);
-  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0, tableColThreeWidth = 0] = tableColumnLayout.visibleColumnWidths;
+  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0, tableColThreeWidth = 0, tableColFourWidth = 0] = tableColumnLayout.visibleColumnWidths;
   const resizerOneLeft = tableColumnLayout.resizerLefts[0] ?? 0;
   const resizerTwoLeft = tableColumnLayout.resizerLefts[1] ?? 0;
   const resizerThreeLeft = tableColumnLayout.resizerLefts[2] ?? 0;
+  const resizerFourLeft = tableColumnLayout.resizerLefts[3] ?? 0;
   const {
     selectionEndPercent,
     selectionStartPercent
@@ -5190,6 +5317,7 @@ const getCss = state => {
   --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
   --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
   --ChatDebugViewTableColThreeWidth: ${tableColThreeWidth}px;
+  --ChatDebugViewTableColFourWidth: ${tableColFourWidth}px;
   --ChatDebugViewDetailsLineNumberWidth: ${detailsLineNumberWidth}px;
   --ChatDebugViewPreviewScrollBarHeight: ${previewVirtualization.scrollBarHeight}px;
   --ChatDebugViewPreviewScrollBarOffset: ${previewVirtualization.scrollBarOffset}px;
@@ -5204,6 +5332,7 @@ const getCss = state => {
   --ResizerOneLeft: ${resizerOneLeft}px;
   --ResizerTwoLeft: ${resizerTwoLeft}px;
   --ResizerThreeLeft: ${resizerThreeLeft}px;
+  --ResizerFourLeft: ${resizerFourLeft}px;
   --ChatDebugViewSashWidth: ${state.sashWidth}px;
   --ChatDebugViewTableWidth: ${tableWidth}px;
   --ChatDebugViewTimelineHeight: ${state.timelineHeight}px;
@@ -5226,6 +5355,26 @@ const getCss = state => {
   width: calc(100% - var(--ChatDebugViewTableScrollBarWidth));
 }
 
+.TableColZero {
+  width: var(--ChatDebugViewTableColZeroWidth);
+}
+
+.TableColOne {
+  width: var(--ChatDebugViewTableColOneWidth);
+}
+
+.TableColTwo {
+  width: var(--ChatDebugViewTableColTwoWidth);
+}
+
+.TableColThree {
+  width: var(--ChatDebugViewTableColThreeWidth);
+}
+
+.TableColFour {
+  width: var(--ChatDebugViewTableColFourWidth);
+}
+
 .Resizers {
   bottom: 0;
   left: 0;
@@ -5261,6 +5410,10 @@ const getCss = state => {
   left: var(--ResizerThreeLeft);
 }
 
+.ResizerFour {
+  left: var(--ResizerFourLeft);
+}
+
 .ResizerInner {
   background: var(--vscode-panel-border, rgba(255, 255, 255, 0.12));
   bottom: 0;
@@ -5291,8 +5444,9 @@ const getCss = state => {
 }
 
 .ChatDebugViewHeadersTable {
-  border-collapse: collapse;
-  table-layout: fixed;
+  list-style: none;
+  margin: 0;
+  padding: 0;
   width: 100%;
 }
 
@@ -5314,22 +5468,20 @@ const getCss = state => {
   text-transform: uppercase;
 }
 
+.ChatDebugViewHeadersRow {
+  display: grid;
+  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
+}
+
 .ChatDebugViewHeadersCell {
   border-bottom: 1px solid var(--vscode-panel-border, rgba(255, 255, 255, 0.12));
+  min-width: 0;
   color: var(--vscode-editor-foreground);
   padding: 6px 10px;
   text-align: left;
-  vertical-align: top;
   word-break: break-word;
 }
 
-.ChatDebugViewHeadersHead .ChatDebugViewHeadersCell {
-  color: var(--vscode-descriptionForeground, rgba(255, 255, 255, 0.7));
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
 .ChatDebugViewHeadersRowOdd {
   background: rgba(255, 255, 255, 0.02);
 }
@@ -5340,7 +5492,6 @@ const getCss = state => {
 
 .ChatDebugViewHeadersCellName {
   font-weight: 500;
-  width: 38%;
 }
 .PreviewVirtualizedEditor {
   height: var(--ChatDebugViewPreviewViewportHeight);
@@ -5741,11 +5892,9 @@ const PanelTab = 'PanelTab';
 const PanelTabSelected = 'PanelTabSelected';
 const ChatDebugViewDetailsTabs = 'ChatDebugViewDetailsTabs';
 const ChatDebugViewDetailsTop = 'ChatDebugViewDetailsTop';
-const ChatDebugViewHeadersBody = 'ChatDebugViewHeadersBody';
 const ChatDebugViewHeadersCell = 'ChatDebugViewHeadersCell';
 const ChatDebugViewHeadersCellName = 'ChatDebugViewHeadersCellName';
 const ChatDebugViewHeadersCellValue = 'ChatDebugViewHeadersCellValue';
-const ChatDebugViewHeadersHead = 'ChatDebugViewHeadersHead';
 const ChatDebugViewHeadersRow = 'ChatDebugViewHeadersRow';
 const ChatDebugViewHeadersRowEven = 'ChatDebugViewHeadersRowEven';
 const ChatDebugViewHeadersRowOdd = 'ChatDebugViewHeadersRowOdd';
@@ -5796,6 +5945,7 @@ const ResizerInner = 'ResizerInner';
 const ResizerOne = 'ResizerOne';
 const ResizerTwo = 'ResizerTwo';
 const ResizerThree = 'ResizerThree';
+const ResizerFour = 'ResizerFour';
 const TableHead = 'TableHead';
 const Resizers = 'Resizers';
 const TableCol = 'TableCol';
@@ -5839,6 +5989,7 @@ const ChatDebugViewTop = 'ChatDebugViewTop';
 const ChatDebugViewTopDevtools = 'ChatDebugViewTop--devtools';
 const TableCell = 'TableCell';
 const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
+const ChatDebugViewCellSize = 'ChatDebugViewCellSize';
 const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
 const InputBox = 'InputBox';
 const TokenBoolean = 'Token TokenBoolean';
@@ -5890,6 +6041,7 @@ const HandlePreviewTextScrollBarPointerDown = 37;
 const HandlePreviewTextScrollBarPointerMove = 38;
 const HandlePreviewTextScrollBarPointerUp = 39;
 const HandleRootContextMenu = 40;
+const HandleTableRowDoubleClick = 41;
 
 const debugErrorRootNode = {
   childCount: 1,
@@ -6091,6 +6243,96 @@ const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
   return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
 };
 
+const httpStatusLabels = {
+  100: 'Continue',
+  101: 'Switching Protocols',
+  102: 'Processing',
+  103: 'Early Hints',
+  200: 'OK',
+  201: 'Created',
+  202: 'Accepted',
+  203: 'Non-Authoritative Information',
+  204: 'No Content',
+  205: 'Reset Content',
+  206: 'Partial Content',
+  207: 'Multi-Status',
+  208: 'Already Reported',
+  226: 'IM Used',
+  300: 'Multiple Choices',
+  301: 'Moved Permanently',
+  302: 'Found',
+  303: 'See Other',
+  304: 'Not Modified',
+  305: 'Use Proxy',
+  307: 'Temporary Redirect',
+  308: 'Permanent Redirect',
+  400: 'Bad Request',
+  401: 'Unauthorized',
+  402: 'Payment Required',
+  403: 'Forbidden',
+  404: 'Not Found',
+  405: 'Method Not Allowed',
+  406: 'Not Acceptable',
+  407: 'Proxy Authentication Required',
+  408: 'Request Timeout',
+  409: 'Conflict',
+  410: 'Gone',
+  411: 'Length Required',
+  412: 'Precondition Failed',
+  413: 'Content Too Large',
+  414: 'URI Too Long',
+  415: 'Unsupported Media Type',
+  416: 'Range Not Satisfiable',
+  417: 'Expectation Failed',
+  418: "I'm a Teapot",
+  421: 'Misdirected Request',
+  422: 'Unprocessable Content',
+  423: 'Locked',
+  424: 'Failed Dependency',
+  425: 'Too Early',
+  426: 'Upgrade Required',
+  428: 'Precondition Required',
+  429: 'Too Many Requests',
+  431: 'Request Header Fields Too Large',
+  451: 'Unavailable For Legal Reasons',
+  500: 'Internal Server Error',
+  501: 'Not Implemented',
+  502: 'Bad Gateway',
+  503: 'Service Unavailable',
+  504: 'Gateway Timeout',
+  505: 'HTTP Version Not Supported',
+  506: 'Variant Also Negotiates',
+  507: 'Insufficient Storage',
+  508: 'Loop Detected',
+  510: 'Not Extended',
+  511: 'Network Authentication Required'
+};
+const threeDigitStatusCodeRegex = /^\d{3}$/;
+const parseStatusCode = value => {
+  if (typeof value === 'number' && Number.isInteger(value)) {
+    return value;
+  }
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  const trimmedValue = value.trim();
+  if (!threeDigitStatusCodeRegex.test(trimmedValue)) {
+    return undefined;
+  }
+  return Number(trimmedValue);
+};
+const formatHttpStatusCode = value => {
+  const numericStatusCode = parseStatusCode(value);
+  if (numericStatusCode === undefined) {
+    return String(value);
+  }
+  const label = httpStatusLabels[numericStatusCode];
+  if (!label) {
+    return String(numericStatusCode);
+  }
+  return `${numericStatusCode} ${label}`;
+};
+
 const isHeadersRecord = value => {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 };
@@ -6165,7 +6407,7 @@ const getGeneralEntries = selectedEvent => {
   }
   const statusCode$1 = getStatusCodeValue(selectedEvent);
   if (statusCode$1 !== undefined && statusCode$1 !== '') {
-    entries.push([statusCode(), statusCode$1]);
+    entries.push([statusCode(), formatHttpStatusCode(statusCode$1)]);
   }
   return entries;
 };
@@ -6173,15 +6415,15 @@ const getHeaderRowNodes = (headerName, headerValue, index) => {
   return [{
     childCount: 2,
     className: mergeClassNames(ChatDebugViewHeadersRow, index % 2 === 0 ? ChatDebugViewHeadersRowOdd : ChatDebugViewHeadersRowEven),
-    type: Tr
+    type: Li
   }, {
     childCount: 1,
     className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellName),
-    type: Td
+    type: Div
   }, text(headerName), {
     childCount: 1,
     className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellValue),
-    type: Td
+    type: Div
   }, text(getHeaderValueText(headerValue))];
 };
 const getHeadersTableNodes = headers => {
@@ -6190,29 +6432,9 @@ const getHeadersTableNodes = headers => {
     headerRows.push(...getHeaderRowNodes(headerName, headerValue, index));
   }
   return [{
-    childCount: 2,
-    className: ChatDebugViewHeadersTable,
-    type: Table$1
-  }, {
-    childCount: 1,
-    className: ChatDebugViewHeadersHead,
-    type: THead
-  }, {
-    childCount: 2,
-    className: ChatDebugViewHeadersRow,
-    type: Tr
-  }, {
-    childCount: 1,
-    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellName),
-    type: Th
-  }, text(name()), {
-    childCount: 1,
-    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellValue),
-    type: Th
-  }, text(value()), {
     childCount: headers.length,
-    className: ChatDebugViewHeadersBody,
-    type: TBody
+    className: ChatDebugViewHeadersTable,
+    type: Ul
   }, ...headerRows];
 };
 const getHeaderSectionNodes = (label, headers) => {
@@ -7369,13 +7591,13 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
   }, ...getDetailsTopVirtualDom(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
 };
 
-const td$1 = {
+const td$2 = {
   childCount: 1,
   className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
   type: Td
 };
 const getCellDurationDom = event => {
-  return [td$1, text(getEventTableDurationText(event))];
+  return [td$2, text(getEventTableDurationText(event))];
 };
 
 const getMethods = new Set(['list_dir', 'list_files', 'read_file']);
@@ -7401,13 +7623,22 @@ const getEventTableMethodLabel = event => {
   return '';
 };
 
-const td = {
+const td$1 = {
   childCount: 1,
   className: TableCell,
   type: Td
 };
 const getCellMethodDom = event => {
-  return [td, text(getEventTableMethodLabel(event))];
+  return [td$1, text(getEventTableMethodLabel(event))];
+};
+
+const td = {
+  childCount: 1,
+  className: mergeClassNames(TableCell, ChatDebugViewCellSize),
+  type: Td
+};
+const getCellSizeDom = event => {
+  return [td, text(formatBytes(event.size ?? 0))];
 };
 
 const getCellStatusDom = (event, isErrorStatus) => {
@@ -7432,6 +7663,8 @@ const getTableCellDom = (column, event, isErrorStatus) => {
       return getCellDurationDom(event);
     case Method:
       return getCellMethodDom(event);
+    case Size:
+      return getCellSizeDom(event);
     case Status$1:
       return getCellStatusDom(event, isErrorStatus);
     case Type:
@@ -7591,23 +7824,27 @@ const getTableBodyDom = (rowNodes, eventCount) => {
     childCount: eventCount === 0 ? 1 : eventCount,
     className: TableBody,
     onContextMenu: HandleTableBodyContextMenu,
+    onDblClick: HandleTableRowDoubleClick,
     onPointerDown: HandleEventRowClickAt,
     type: TBody
   }, ...rowNodes];
 };
 
-const tableColClassNames = ['TableColZero', 'TableColOne', 'TableColTwo', 'TableColThree'];
+const tableColClassNames = ['TableColZero', 'TableColOne', 'TableColTwo', 'TableColThree', 'TableColFour'];
 const getTableColumnGroupDom = visibleTableColumns => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
   return [{
     childCount: orderedVisibleTableColumns.length,
     className: 'ColGroup',
     type: ColGroup
-  }, ...orderedVisibleTableColumns.map((_, index) => ({
-    childCount: 0,
-    className: `${TableCol} ${tableColClassNames[index]}`,
-    type: Col
-  }))];
+  }, ...orderedVisibleTableColumns.map((_, index) => {
+    const columnClassName = tableColClassNames[index] ?? `TableCol${index}`;
+    return {
+      childCount: 0,
+      className: `${TableCol} ${columnClassName}`,
+      type: Col
+    };
+  })];
 };
 
 const getHeaderCellNode = (column, tableColumns) => {
@@ -7648,8 +7885,8 @@ const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleT
   }, ...getTableColumnGroupDom(visibleTableColumns), ...getTableHeaderDom(visibleTableColumns, tableColumns), ...getTableBodyDom(rowNodes, eventCount)];
 };
 
-const resizerNames = ['ResizerOne', 'ResizerTwo', 'ResizerThree'];
-const resizerClassNames = [ResizerOne, ResizerTwo, ResizerThree];
+const resizerNames = ['ResizerOne', 'ResizerTwo', 'ResizerThree', 'ResizerFour'];
+const resizerClassNames = [ResizerOne, ResizerTwo, ResizerThree, ResizerFour];
 const getTableResizersDom = visibleTableColumns => {
   const visibleColumnCount = getOrderedVisibleTableColumns(visibleTableColumns).length;
   const resizerCount = Math.max(0, visibleColumnCount - 1);
@@ -8112,6 +8349,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleEventRowClickAt,
     params: ['handleEventRowClickAt', ClientX, ClientY, Button]
+  }, {
+    name: HandleTableRowDoubleClick,
+    params: ['handleTableRowDoubleClick', ClientX, ClientY]
   }, {
     name: HandleTableBodyContextMenu,
     params: ['handleTableBodyContextMenu', ClientX, ClientY],
@@ -8315,19 +8555,9 @@ const setEvents = (state, events) => {
   }));
 };
 
-const setSessionIdDependencies = {
-  listChatViewEvents: listChatViewEvents,
-  registerUpdateListener: registerUpdateListener
-};
 const setSessionId = async (state, sessionId) => {
-  const {
-    databaseName,
-    dataBaseVersion,
-    eventStoreName,
-    sessionIdIndexName
-  } = state;
-  const result = await setSessionIdDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
-  await setSessionIdDependencies.registerUpdateListener(sessionId, rpcId, state.uid);
+  const result = await listChatViewEvents(sessionId);
+  await registerUpdateListener(sessionId, rpcId, state.uid);
   if (result.type === 'error') {
     return {
       ...state,
@@ -8426,6 +8656,7 @@ const commandMap = {
   'ChatDebug.handleTableResizerPointerMove': wrapCommand(handleTableResizerPointerMove),
   'ChatDebug.handleTableResizerPointerUp': wrapCommand(handleTableResizerPointerUp),
   'ChatDebug.handleTableRowCopy': wrapCommand(handleTableRowCopy),
+  'ChatDebug.handleTableRowDoubleClick': wrapCommand(handleTableRowDoubleClick),
   'ChatDebug.handleTableRowOpenInNewTab': wrapCommand(handleTableRowOpenInNewTab),
   'ChatDebug.handleTableScrollBarPointerDown': wrapCommand(handleTableScrollBarPointerDown),
   'ChatDebug.handleTableScrollBarPointerMove': wrapCommand(handleTableScrollBarPointerMove),

package/package.json

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