@lvce-editor/chat-debug-view 7.3.0 → 7.4.0

package/dist/chatDebugViewWorkerMain.js

@@ -1139,6 +1139,10 @@ const ClientY = 'event.clientY';
 const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
 
+const None = 0;
+const Checked = 2;
+const Unchecked = 3;
+
 const ChatStorageWorker = 6003;
 const RendererWorker = 1;
 
@@ -1305,6 +1309,186 @@ const appendStoredEventForTest = async (state, event) => {
   return state;
 };
 
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const All$1 = 'All';
+const CloseDetails$1 = 'Close details';
+const Copy = 'Copy';
+const DetailSections = 'Detail sections';
+const Duration$1 = 'Duration';
+const Ended = 'Ended';
+const FailedToLoadChatDebugSession = 'Failed to load chat debug session "{PH1}". Please try again.';
+const FailedToLoadChatDebugSessionWithError = 'Failed to load chat debug session "{PH1}": {PH2}';
+const FilterEvents = 'Filter events';
+const FromSeconds = 'from {PH1}s';
+const InvalidSessionId = 'Invalid session id';
+const InvalidUriEncoding = 'Invalid URI encoding';
+const InvalidUriFormat = 'Invalid URI format';
+const MissingUri = 'Missing URI';
+const Network$1 = '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 Preview$1 = 'Preview';
+const Refresh$1 = 'Refresh';
+const RefreshEvents = 'Refresh events';
+const ResetColumns = 'Reset columns';
+const Response$1 = 'Response';
+const SecondsRange = '{PH1}s-{PH2}s';
+const Started = 'Started';
+const Status$1 = 'Status';
+const Stream$1 = 'Stream';
+const Timing$1 = 'Timing';
+const ToSeconds = 'to {PH1}s';
+const Tools$1 = 'Tools';
+const Type$1 = 'Type';
+const Ui$1 = '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 WindowSummary = 'Window {PH1}-{PH2} of {PH3}';
+
+const copy = () => {
+  return i18nString(Copy);
+};
+const status = () => {
+  return i18nString(Status$1);
+};
+const all = () => {
+  return i18nString(All$1);
+};
+const closeDetails = () => {
+  return i18nString(CloseDetails$1);
+};
+const detailSections = () => {
+  return i18nString(DetailSections);
+};
+const duration = () => {
+  return i18nString(Duration$1);
+};
+const ended = () => {
+  return i18nString(Ended);
+};
+const failedToLoadChatDebugSession = sessionId => {
+  return i18nString(FailedToLoadChatDebugSession, {
+    PH1: sessionId
+  });
+};
+const failedToLoadChatDebugSessionWithError = (sessionId, errorMessage) => {
+  return i18nString(FailedToLoadChatDebugSessionWithError, {
+    PH1: sessionId,
+    PH2: errorMessage
+  });
+};
+const filterEvents = () => {
+  return i18nString(FilterEvents);
+};
+const fromSeconds = seconds => {
+  return i18nString(FromSeconds, {
+    PH1: seconds
+  });
+};
+const invalidSessionId = () => {
+  return i18nString(InvalidSessionId);
+};
+const invalidUriEncoding = () => {
+  return i18nString(InvalidUriEncoding);
+};
+const invalidUriFormat = () => {
+  return i18nString(InvalidUriFormat);
+};
+const missingUri = () => {
+  return i18nString(MissingUri);
+};
+const network = () => {
+  return i18nString(Network$1);
+};
+const noChatSessionFound = sessionId => {
+  return i18nString(NoChatSessionFound, {
+    PH1: sessionId
+  });
+};
+const noEventsFound = () => {
+  return i18nString(NoEventsFound);
+};
+const noEventsFoundMatching = filterDescription => {
+  return i18nString(NoEventsFoundMatching, {
+    PH1: filterDescription
+  });
+};
+const noToolCallEvents = () => {
+  return i18nString(NoToolCallEvents);
+};
+const preview = () => {
+  return i18nString(Preview$1);
+};
+const refresh$1 = () => {
+  return i18nString(Refresh$1);
+};
+const refreshEvents$1 = () => {
+  return i18nString(RefreshEvents);
+};
+const resetColumns = () => {
+  return i18nString(ResetColumns);
+};
+const response = () => {
+  return i18nString(Response$1);
+};
+const secondsRange = (start, end) => {
+  return i18nString(SecondsRange, {
+    PH1: start,
+    PH2: end
+  });
+};
+const started = () => {
+  return i18nString(Started);
+};
+const stream = () => {
+  return i18nString(Stream$1);
+};
+const timing = () => {
+  return i18nString(Timing$1);
+};
+const toSeconds = seconds => {
+  return i18nString(ToSeconds, {
+    PH1: seconds
+  });
+};
+const tools = () => {
+  return i18nString(Tools$1);
+};
+const type = () => {
+  return i18nString(Type$1);
+};
+const ui = () => {
+  return i18nString(Ui$1);
+};
+const unableToLoadDebugSessionInvalidUri = uri => {
+  return i18nString(UnableToLoadDebugSessionInvalidUri, {
+    PH1: uri
+  });
+};
+const unableToLoadDebugSessionMissingUri = () => {
+  return i18nString(UnableToLoadDebugSessionMissingUri);
+};
+const windowSummary = (start, end, duration) => {
+  return i18nString(WindowSummary, {
+    PH1: start,
+    PH2: end,
+    PH3: duration
+  });
+};
+
 const Response = 'response';
 const Preview = 'preview';
 const Timing = 'timing';
@@ -1314,29 +1498,29 @@ const isDetailTab = value => {
 };
 const getDetailTabLabel = value => {
   if (value === Preview) {
-    return 'Preview';
+    return preview();
   }
   if (value === Timing) {
-    return 'Timing';
+    return timing();
   }
-  return 'Response';
+  return response();
 };
 
 const createEventCategoryFilterOptions = () => {
   return [{
-    label: 'All',
+    label: all(),
     value: All
   }, {
-    label: 'Tools',
+    label: tools(),
     value: Tools
   }, {
-    label: 'Network',
+    label: network(),
     value: Network
   }, {
-    label: 'UI',
+    label: ui(),
     value: Ui
   }, {
-    label: 'Stream',
+    label: stream(),
     value: Stream
   }];
 };
@@ -1344,15 +1528,15 @@ const createEventCategoryFilterOptions = () => {
 const getEventCategoryFilterLabel = eventCategoryFilter => {
   switch (eventCategoryFilter) {
     case Network:
-      return 'Network';
+      return network();
     case Stream:
-      return 'Stream';
+      return stream();
     case Tools:
-      return 'Tools';
+      return tools();
     case Ui:
-      return 'UI';
+      return ui();
     default:
-      return 'All';
+      return all();
   }
 };
 
@@ -1381,6 +1565,22 @@ const parseFilterValue = filterValue => {
   };
 };
 
+const Type = 'type';
+const Duration = 'duration';
+const Status = 'status';
+const tableColumns = [Type, Duration, Status];
+const defaultVisibleTableColumns = tableColumns;
+const isTableColumn = value => {
+  return tableColumns.includes(value);
+};
+const getOrderedVisibleTableColumns = values => {
+  const visibleColumns = new Set(values.filter(isTableColumn));
+  return tableColumns.filter(column => visibleColumns.has(column));
+};
+const isVisibleTableColumn = (visibleTableColumns, column) => {
+  return visibleTableColumns.includes(column);
+};
+
 const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
 const isSavedState = value => {
   return typeof value === 'object' && value !== null;
@@ -1398,6 +1598,7 @@ const restoreSavedState = (state, savedState) => {
   if (!isSavedState(savedState)) {
     return state;
   }
+  const restoredVisibleTableColumns = Array.isArray(savedState.visibleTableColumns) ? getOrderedVisibleTableColumns(savedState.visibleTableColumns.filter(value => typeof value === 'string')) : state.visibleTableColumns;
   return {
     ...state,
     eventCategoryFilter: getRestoredEventCategoryFilter(savedState, state.eventCategoryFilter),
@@ -1405,7 +1606,8 @@ const restoreSavedState = (state, savedState) => {
     selectedDetailTab: typeof savedState.selectedDetailTab === 'string' && isDetailTab(savedState.selectedDetailTab) ? savedState.selectedDetailTab : state.selectedDetailTab,
     selectedEventId: typeof savedState.selectedEventId === 'number' || savedState.selectedEventId === null ? savedState.selectedEventId : state.selectedEventId,
     timelineEndSeconds: typeof savedState.timelineEndSeconds === 'string' ? savedState.timelineEndSeconds : state.timelineEndSeconds,
-    timelineStartSeconds: typeof savedState.timelineStartSeconds === 'string' ? savedState.timelineStartSeconds : state.timelineStartSeconds
+    timelineStartSeconds: typeof savedState.timelineStartSeconds === 'string' ? savedState.timelineStartSeconds : state.timelineStartSeconds,
+    visibleTableColumns: restoredVisibleTableColumns
   };
 };
 
@@ -1477,6 +1679,7 @@ const createDefaultState = () => {
     uid: 0,
     uri: '',
     useDevtoolsLayout: true,
+    visibleTableColumns: defaultVisibleTableColumns,
     width: 0,
     x: 0,
     y: 0
@@ -1510,7 +1713,7 @@ const RenderCss = 2;
 const RenderIncremental = 3;
 
 const diff = (oldState, newState) => {
-  if (oldState.errorMessage !== newState.errorMessage || oldState.eventCategoryFilter !== newState.eventCategoryFilter || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.selectedDetailTab !== newState.selectedDetailTab || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.width !== newState.width || oldState.uid !== newState.uid) {
+  if (oldState.errorMessage !== newState.errorMessage || oldState.eventCategoryFilter !== newState.eventCategoryFilter || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.visibleTableColumns !== newState.visibleTableColumns || oldState.selectedDetailTab !== newState.selectedDetailTab || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.width !== newState.width || oldState.uid !== newState.uid) {
     return [RenderIncremental, RenderCss];
   }
   return [];
@@ -1524,6 +1727,14 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
+const MenuChatDebugTableHeader = 2189;
+const handleHeaderContextMenu = async (state, eventX, eventY) => {
+  await showContextMenu2(state.uid, MenuChatDebugTableHeader, eventX, eventY, {
+    menuId: MenuChatDebugTableHeader
+  });
+  return state;
+};
+
 const hasMatchingToolName = (startedEvent, finishedEvent) => {
   if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
     return startedEvent.toolName === finishedEvent.toolName;
@@ -1891,8 +2102,51 @@ const handleTableBodyContextMenu = async (state, eventX, eventY) => {
   return state;
 };
 
+const getColumnVisibilityFlags = (state, column) => {
+  return isVisibleTableColumn(state.visibleTableColumns, column) ? Checked : Unchecked;
+};
+const getMenuEntries2 = (state, props) => {
+  if (props.menuId === MenuChatDebugTableHeader) {
+    return [{
+      args: [Type],
+      command: 'ChatDebug.toggleTableColumnVisibility',
+      flags: getColumnVisibilityFlags(state, Type),
+      id: 'type',
+      label: type()
+    }, {
+      args: [Duration],
+      command: 'ChatDebug.toggleTableColumnVisibility',
+      flags: getColumnVisibilityFlags(state, Duration),
+      id: 'duration',
+      label: duration()
+    }, {
+      args: [Status],
+      command: 'ChatDebug.toggleTableColumnVisibility',
+      flags: getColumnVisibilityFlags(state, Status),
+      id: 'status',
+      label: status()
+    }, {
+      args: [],
+      command: 'ChatDebug.resetTableColumns',
+      flags: None,
+      id: 'reset-columns',
+      label: resetColumns()
+    }];
+  }
+  if (props.menuId === MenuChatDebugTableBody) {
+    return [{
+      args: [],
+      command: 'ChatDebug.copy',
+      flags: None,
+      id: 'copy',
+      label: copy()
+    }];
+  }
+  return [];
+};
+
 const getMenuIds = () => {
-  return [MenuChatDebugTableBody, 556, 557];
+  return [MenuChatDebugTableHeader, MenuChatDebugTableBody, 556, 557];
 };
 
 const getErrorMessage = error => {
@@ -1910,9 +2164,9 @@ const getErrorMessage = error => {
 const getFailedToLoadMessage = (sessionId, error) => {
   const errorMessage = getErrorMessage(error);
   if (errorMessage) {
-    return `Failed to load chat debug session "${sessionId}": ${errorMessage}`;
+    return failedToLoadChatDebugSessionWithError(sessionId, errorMessage);
   }
-  return `Failed to load chat debug session "${sessionId}". Please try again.`;
+  return failedToLoadChatDebugSession(sessionId);
 };
 
 const ParseChatDebugUriErrorCode = {
@@ -1924,13 +2178,13 @@ const ParseChatDebugUriErrorCode = {
 
 const getInvalidUriMessage = (uri, code) => {
   if (code === ParseChatDebugUriErrorCode.MissingUri) {
-    return 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
+    return unableToLoadDebugSessionMissingUri();
   }
-  return `Unable to load debug session: invalid URI "${uri}". Expected format: chat-debug://<sessionId>.`;
+  return unableToLoadDebugSessionInvalidUri(uri);
 };
 
 const getSessionNotFoundMessage = sessionId => {
-  return `No chat session found for sessionId "${sessionId}".`;
+  return noChatSessionFound(sessionId);
 };
 
 const listChatViewEventsDependencies = {
@@ -1960,7 +2214,7 @@ const parseChatDebugUri = uri => {
   if (!uri) {
     return {
       code: ParseChatDebugUriErrorCode.MissingUri,
-      message: 'Missing URI',
+      message: missingUri(),
       type: 'error'
     };
   }
@@ -1968,7 +2222,7 @@ const parseChatDebugUri = uri => {
   if (!match) {
     return {
       code: ParseChatDebugUriErrorCode.InvalidUriFormat,
-      message: 'Invalid URI format',
+      message: invalidUriFormat(),
       type: 'error'
     };
   }
@@ -1979,14 +2233,14 @@ const parseChatDebugUri = uri => {
   } catch {
     return {
       code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
-      message: 'Invalid URI encoding',
+      message: invalidUriEncoding(),
       type: 'error'
     };
   }
   if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
     return {
       code: ParseChatDebugUriErrorCode.InvalidSessionId,
-      message: 'Invalid session id',
+      message: invalidSessionId(),
       type: 'error'
     };
   }
@@ -2145,6 +2399,10 @@ const handleDetailsContextMenu = state => {
   return state;
 };
 
+const handleDetailsTopContextMenu = state => {
+  return state;
+};
+
 const handleDetailTab = (state, value) => {
   if (!isDetailTab(value)) {
     return state;
@@ -2241,10 +2499,6 @@ const handleEventRowClick = async (state, value, button = 0) => {
   return selectEventAtIndex(state, selectedEventIndex, handleEventRowClickDependencies);
 };
 
-const handleHeaderContextMenu = state => {
-  return state;
-};
-
 const getBoolean = value => {
   return value === true || value === 'true' || value === 'on' || value === '1';
 };
@@ -2448,6 +2702,10 @@ const handleSashPointerUp = (state, eventX, eventY) => {
   return state;
 };
 
+const handleTimelineContextMenu = state => {
+  return state;
+};
+
 const clearTimelineSelectionState = state => {
   return {
     ...state,
@@ -3105,17 +3363,19 @@ const HandleTableKeyDown = 18;
 const HandleTimelineRangePreset = 19;
 const HandleCloseDetails = 20;
 const HandleClickRefresh = 21;
+const HandleDetailsTopContextMenu = 22;
+const HandleTimelineContextMenu = 23;
 
 const getRefreshButtonDom = () => {
   return [{
-    'aria-label': 'Refresh events',
+    'aria-label': refreshEvents$1(),
     childCount: 1,
     className: ChatDebugViewRefreshButton,
     name: Refresh,
     onClick: HandleClickRefresh,
     type: Button$1,
     value: Refresh
-  }, text('Refresh')];
+  }, text(refresh$1())];
 };
 const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) => {
   const refreshButtonDom = getRefreshButtonDom();
@@ -3132,7 +3392,7 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) =>
       inputType: 'search',
       name: Filter,
       onInput: HandleFilterInput,
-      placeholder: 'Filter events',
+      placeholder: filterEvents(),
       type: Input,
       value: filterValue
     }, ...quickFilterNodes, ...refreshButtonDom];
@@ -3149,7 +3409,7 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) =>
     inputType: 'search',
     name: Filter,
     onInput: HandleFilterInput,
-    placeholder: 'Filter events',
+    placeholder: filterEvents(),
     type: Input,
     value: filterValue
   }, ...refreshButtonDom];
@@ -3225,7 +3485,7 @@ const getTimingDetailsDom = event => {
     childCount: 3,
     className: ChatDebugViewTiming,
     type: Div
-  }, ...getTimingRowDom('Started', getStartText(event)), ...getTimingRowDom('Ended', getEndText(event)), ...getTimingRowDom('Duration', getDurationText(event))];
+  }, ...getTimingRowDom(started(), getStartText(event)), ...getTimingRowDom(ended(), getEndText(event)), ...getTimingRowDom(duration(), getDurationText(event))];
 };
 
 const getTabId = detailTab => {
@@ -3265,9 +3525,10 @@ const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes
   }, {
     childCount: 2,
     className: ChatDebugViewDetailsTop,
+    onContextMenu: HandleDetailsTopContextMenu,
     type: Div
   }, {
-    'aria-label': 'Close details',
+    'aria-label': closeDetails(),
     childCount: 0,
     className: ChatDebugViewDetailsClose,
     name: CloseDetails,
@@ -3276,7 +3537,7 @@ const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes
     type: Button$1,
     value: 'close'
   }, {
-    'aria-label': 'Detail sections',
+    'aria-label': detailSections(),
     childCount: detailTabs.length,
     className: ChatDebugViewDetailsTabs,
     role: 'tablist',
@@ -3372,30 +3633,45 @@ const getStatusText = event => {
   return hasErrorStatus(event) ? '400' : '200';
 };
 
-const getDevtoolsRows = (events, selectedEventIndex) => {
+const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
+  return visibleTableColumns.flatMap(column => {
+    switch (column) {
+      case Duration:
+        return [{
+          childCount: 1,
+          className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellDuration),
+          type: Td
+        }, text(getDurationText(event))];
+      case Status:
+        return [{
+          childCount: 1,
+          className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellStatus, isErrorStatus && ChatDebugViewCellStatusError),
+          type: Td
+        }, text(getStatusText(event))];
+      case Type:
+        return [{
+          childCount: 1,
+          className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellType),
+          type: Td
+        }, text(getEventTypeLabel(event))];
+      default:
+        return [];
+    }
+  });
+};
+const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defaultVisibleTableColumns) => {
   return events.flatMap((event, i) => {
     const isEvenRow = i % 2 === 1;
     const isSelected = selectedEventIndex === i;
     const isErrorStatus = hasErrorStatus(event);
     const rowIndex = String(i);
+    const rowCellNodes = getRowCellNodes(event, isErrorStatus, visibleTableColumns);
     return [{
-      childCount: 3,
+      childCount: visibleTableColumns.length,
       className: joinClassNames(ChatDebugViewEventRow, isEvenRow && TableRowEven, isSelected && ChatDebugViewEventRowSelected),
       'data-index': rowIndex,
       type: Tr
-    }, {
-      childCount: 1,
-      className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellType),
-      type: Td
-    }, text(getEventTypeLabel(event)), {
-      childCount: 1,
-      className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellDuration),
-      type: Td
-    }, text(getDurationText(event)), {
-      childCount: 1,
-      className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellStatus, isErrorStatus && ChatDebugViewCellStatusError),
-      type: Td
-    }, text(getStatusText(event))];
+    }, ...rowCellNodes];
   });
 };
 
@@ -3694,39 +3970,55 @@ const getTableBodyDom = (rowNodes, eventCount) => {
   }, ...rowNodes];
 };
 
-const getTableHeaderDom = () => {
+const getHeaderCellNodes = visibleTableColumns => {
+  return visibleTableColumns.flatMap(column => {
+    switch (column) {
+      case Duration:
+        return [{
+          childCount: 1,
+          className: ChatDebugViewHeaderCell,
+          scope: 'col',
+          type: Th
+        }, text(duration())];
+      case Status:
+        return [{
+          childCount: 1,
+          className: ChatDebugViewHeaderCell,
+          scope: 'col',
+          type: Th
+        }, text(status())];
+      case Type:
+        return [{
+          childCount: 1,
+          className: ChatDebugViewHeaderCell,
+          scope: 'col',
+          type: Th
+        }, text(type())];
+      default:
+        return [];
+    }
+  });
+};
+const getTableHeaderDom = (visibleTableColumns = defaultVisibleTableColumns) => {
+  const headerCellNodes = getHeaderCellNodes(visibleTableColumns);
   return [{
     childCount: 1,
     className: ChatDebugViewTableHeader,
+    onContextMenu: HandleHeaderContextMenu,
     type: THead
   }, {
-    childCount: 3,
+    childCount: visibleTableColumns.length,
     className: ChatDebugViewTableHeaderRow,
     type: Tr
-  }, {
-    childCount: 1,
-    className: ChatDebugViewHeaderCell,
-    scope: 'col',
-    type: Th
-  }, text('Type'), {
-    childCount: 1,
-    className: ChatDebugViewHeaderCell,
-    scope: 'col',
-    type: Th
-  }, text('Duration'), {
-    childCount: 1,
-    className: ChatDebugViewHeaderCell,
-    scope: 'col',
-    type: Th
-  }, text('Status')];
+  }, ...headerCellNodes];
 };
 
-const getTableDom = (rowNodes, eventCount) => {
+const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns) => {
   return [{
     childCount: 2,
     className: ChatDebugViewTable,
     type: Table
-  }, ...getTableHeaderDom(), ...getTableBodyDom(rowNodes, eventCount)];
+  }, ...getTableHeaderDom(visibleTableColumns), ...getTableBodyDom(rowNodes, eventCount)];
 };
 
 const formatPercent = value => {
@@ -3795,9 +4087,9 @@ const formatTimelineSeconds = value => {
 const getTimelineSummary = (timelineEvents, timelineStartSeconds, timelineEndSeconds) => {
   const timelineInfo = getTimelineInfo(timelineEvents, timelineStartSeconds, timelineEndSeconds);
   if (timelineInfo.hasSelection && timelineInfo.startSeconds !== null && timelineInfo.endSeconds !== null) {
-    return `Window ${formatTimelineSeconds(timelineInfo.startSeconds)}-${formatTimelineSeconds(timelineInfo.endSeconds)} of ${formatTimelineSeconds(timelineInfo.durationSeconds)}`;
+    return windowSummary(formatTimelineSeconds(timelineInfo.startSeconds), formatTimelineSeconds(timelineInfo.endSeconds), formatTimelineSeconds(timelineInfo.durationSeconds));
   }
-  return `Window 0s-${formatTimelineSeconds(timelineInfo.durationSeconds)} of ${formatTimelineSeconds(timelineInfo.durationSeconds)}`;
+  return windowSummary('0s', formatTimelineSeconds(timelineInfo.durationSeconds), formatTimelineSeconds(timelineInfo.durationSeconds));
 };
 
 const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSeconds, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '') => {
@@ -3825,6 +4117,7 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
   return [{
     childCount: 2,
     className: ChatDebugViewTimeline,
+    onContextMenu: HandleTimelineContextMenu,
     type: Section
   }, {
     childCount: 1,
@@ -3851,13 +4144,13 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
   }, ...selectionNodes];
 };
 
-const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = 'No events have been found', timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response) => {
-  const rowNodes = getDevtoolsRows(events, selectedEventIndex);
+const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response, visibleTableColumns = defaultVisibleTableColumns) => {
+  const rowNodes = getDevtoolsRows(events, selectedEventIndex, visibleTableColumns);
   const timelineNodes = getTimelineNodes(timelineEvents, timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
   const previewEventNodes = selectedEvent ? getEventNode(getPreviewEvent(selectedEvent)) : [];
   const responseEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
   const hasSelectedEvent = responseEventNodes.length > 0;
-  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableDom(rowNodes, events.length);
+  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableDom(rowNodes, events.length, visibleTableColumns);
   const eventsClassName = getEventsClassName(hasSelectedEvent);
   const detailsNodes = getDetailsDom(previewEventNodes, responseEventNodes, selectedEvent, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response);
   const sashNodes = getSashNodesDom(hasSelectedEvent);
@@ -3925,18 +4218,18 @@ const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds)
   const trimmedStart = timelineStartSeconds.trim();
   const trimmedEnd = timelineEndSeconds.trim();
   if (trimmedStart && trimmedEnd) {
-    return `${trimmedStart}s-${trimmedEnd}s`;
+    return secondsRange(trimmedStart, trimmedEnd);
   }
   if (trimmedStart) {
-    return `from ${trimmedStart}s`;
+    return fromSeconds(trimmedStart);
   }
   if (trimmedEnd) {
-    return `to ${trimmedEnd}s`;
+    return toSeconds(trimmedEnd);
   }
   return '';
 };
 
-const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, eventCategoryFilterOptions, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response) => {
+const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, eventCategoryFilterOptions, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response, visibleTableColumns = defaultVisibleTableColumns) => {
   if (errorMessage) {
     return getDebugErrorDom(errorMessage);
   }
@@ -3955,11 +4248,11 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, eve
   const hasTimelineFilter = Boolean(timelineFilterDescription);
   const hasFilterValue = filterDescriptionParts.length > 0;
   const filterDescription = filterDescriptionParts.join(' ');
-  const noFilteredEventsMessage = `no events found matching ${filterDescription}`;
+  const noFilteredEventsMessage = noEventsFoundMatching(filterDescription);
   const useNoToolCallEventsMessage = eventCategoryFilter === Tools && !trimmedFilterValue && !hasTimelineFilter;
-  const emptyMessage = events.length === 0 && hasFilterValue ? useNoToolCallEventsMessage ? 'No tool call events.' : noFilteredEventsMessage : 'No events have been found';
+  const emptyMessage = events.length === 0 && hasFilterValue ? useNoToolCallEventsMessage ? noToolCallEvents() : noFilteredEventsMessage : noEventsFound();
   const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
-  const contentNodes = useDevtoolsLayout ? getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response) : getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
+  const contentNodes = useDevtoolsLayout ? getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response, visibleTableColumns) : getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
   const quickFilterNodes = useDevtoolsLayout ? getQuickFilterNodes(eventCategoryFilter, eventCategoryFilterOptions) : [];
   const debugViewTopDom = getDebugViewTopDom(filterValue, useDevtoolsLayout, quickFilterNodes);
   const rootChildCount = 2;
@@ -3984,7 +4277,7 @@ const renderItems = (oldState, newState) => {
   }
   const timelineEvents = getTimelineEvents(newState);
   const filteredEvents = filterEventsByTimelineRange(timelineEvents, newState.timelineStartSeconds, newState.timelineEndSeconds);
-  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, newState.eventCategoryFilter, newState.eventCategoryFilterOptions, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, withSessionEventIds(timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, newState.selectedDetailTab);
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, newState.eventCategoryFilter, newState.eventCategoryFilterOptions, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, withSessionEventIds(timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, newState.selectedDetailTab, newState.visibleTableColumns);
   return [SetDom2, newState.uid, dom];
 };
 
@@ -4032,7 +4325,7 @@ const render2 = (uid, diffResult) => {
 const renderEventListeners = () => {
   return [{
     name: HandleHeaderContextMenu,
-    params: ['handleHeaderContextMenu'],
+    params: ['handleHeaderContextMenu', ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleEventRowClick,
@@ -4045,6 +4338,14 @@ const renderEventListeners = () => {
     name: HandleDetailsContextMenu,
     params: ['handleDetailsContextMenu'],
     preventDefault: true
+  }, {
+    name: HandleDetailsTopContextMenu,
+    params: ['handleDetailsTopContextMenu'],
+    preventDefault: true
+  }, {
+    name: HandleTimelineContextMenu,
+    params: ['handleTimelineContextMenu'],
+    preventDefault: true
   }, {
     name: HandleFilterInput,
     params: ['handleInput', TargetName, TargetValue]
@@ -4096,6 +4397,19 @@ const rerender = state => {
   return structuredClone(state);
 };
 
+const isSameVisibleTableColumns = (a, b) => {
+  return a.length === b.length && a.every((value, index) => value === b[index]);
+};
+const resetTableColumns = state => {
+  if (isSameVisibleTableColumns(state.visibleTableColumns, defaultVisibleTableColumns)) {
+    return state;
+  }
+  return {
+    ...state,
+    visibleTableColumns: defaultVisibleTableColumns
+  };
+};
+
 const handleResize = (state, dimensions) => {
   const nextState = {
     ...state,
@@ -4125,7 +4439,8 @@ const saveState = state => {
     selectedEventId,
     sessionId,
     timelineEndSeconds,
-    timelineStartSeconds
+    timelineStartSeconds,
+    visibleTableColumns
   } = state;
   return {
     eventCategoryFilter,
@@ -4134,7 +4449,8 @@ const saveState = state => {
     selectedEventId,
     sessionId,
     timelineEndSeconds,
-    timelineStartSeconds
+    timelineStartSeconds,
+    visibleTableColumns
   };
 };
 
@@ -4182,15 +4498,33 @@ const setSessionId = async (state, sessionId) => {
   };
 };
 
+const toggleTableColumnVisibility = (state, column) => {
+  if (!isTableColumn(column)) {
+    return state;
+  }
+  const nextVisibleColumns = new Set(state.visibleTableColumns);
+  if (nextVisibleColumns.has(column)) {
+    nextVisibleColumns.delete(column);
+  } else {
+    nextVisibleColumns.add(column);
+  }
+  return {
+    ...state,
+    visibleTableColumns: getOrderedVisibleTableColumns([...nextVisibleColumns])
+  };
+};
+
 const commandMap = {
   'ChatDebug.appendStoredEventForTest': wrapCommand(appendStoredEventForTest),
   'ChatDebug.create': create,
   'ChatDebug.diff2': diff2,
   'ChatDebug.getCommandIds': getCommandIds,
+  'ChatDebug.getMenuEntries': wrapGetter(getMenuEntries2),
   'ChatDebug.getMenuIds': getMenuIds,
   'ChatDebug.handleClickRefresh': wrapCommand(handleClickRefresh),
   'ChatDebug.handleCloseDetails': wrapCommand(handleCloseDetails),
   'ChatDebug.handleDetailsContextMenu': wrapCommand(handleDetailsContextMenu),
+  'ChatDebug.handleDetailsTopContextMenu': wrapCommand(handleDetailsTopContextMenu),
   'ChatDebug.handleDetailTab': wrapCommand(handleDetailTab),
   'ChatDebug.handleEventCategoryFilter': wrapCommand(handleEventCategoryFilter),
   'ChatDebug.handleEventRowClick': wrapCommand(handleEventRowClick),
@@ -4203,6 +4537,7 @@ const commandMap = {
   'ChatDebug.handleShowInputEvents': wrapCommand(handleShowInputEvents),
   'ChatDebug.handleShowResponsePartEvents': wrapCommand(handleShowResponsePartEvents),
   'ChatDebug.handleTableBodyContextMenu': wrapCommand(handleTableBodyContextMenu),
+  'ChatDebug.handleTimelineContextMenu': wrapCommand(handleTimelineContextMenu),
   'ChatDebug.handleTimelineDoubleClick': wrapCommand(handleTimelineDoubleClick),
   'ChatDebug.handleTimelineEndSeconds': wrapCommand(handleTimelineEndSeconds),
   'ChatDebug.handleTimelinePointerDown': wrapCommand(handleTimelinePointerDown),
@@ -4217,11 +4552,13 @@ const commandMap = {
   'ChatDebug.render2': render2,
   'ChatDebug.renderEventListeners': renderEventListeners,
   'ChatDebug.rerender': wrapCommand(rerender),
+  'ChatDebug.resetTableColumns': wrapCommand(resetTableColumns),
   'ChatDebug.resize': wrapCommand(resize),
   'ChatDebug.saveState': wrapGetter(saveState),
   'ChatDebug.setEvents': wrapCommand(setEvents),
   'ChatDebug.setSessionId': wrapCommand(setSessionId),
-  'ChatDebug.terminate': terminate
+  'ChatDebug.terminate': terminate,
+  'ChatDebug.toggleTableColumnVisibility': wrapCommand(toggleTableColumnVisibility)
 };
 
 const sendMessagePortToChatStorageWorker = async port => {

package/package.json

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