@lvce-editor/chat-debug-view 7.2.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,28 +1727,12 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
-const getMenuIds = () => {
-  return [555, 556, 557];
-};
-
-const getErrorMessage = error => {
-  if (error instanceof Error) {
-    return error.message;
-  }
-  if (typeof error === 'string') {
-    return error;
-  }
-  if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
-    return error.message;
-  }
-  return undefined;
-};
-const getFailedToLoadMessage = (sessionId, error) => {
-  const errorMessage = getErrorMessage(error);
-  if (errorMessage) {
-    return `Failed to load chat debug session "${sessionId}": ${errorMessage}`;
-  }
-  return `Failed to load chat debug session "${sessionId}". Please try again.`;
+const MenuChatDebugTableHeader = 2189;
+const handleHeaderContextMenu = async (state, eventX, eventY) => {
+  await showContextMenu2(state.uid, MenuChatDebugTableHeader, eventX, eventY, {
+    menuId: MenuChatDebugTableHeader
+  });
+  return state;
 };
 
 const hasMatchingToolName = (startedEvent, finishedEvent) => {
@@ -1690,24 +1877,6 @@ const getFilteredEvents = (events, filterValue, eventCategoryFilter, showInputEv
   return filteredByCategory.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
 };
 
-const ParseChatDebugUriErrorCode = {
-  InvalidSessionId: 'invalid-session-id',
-  InvalidUriEncoding: 'invalid-uri-encoding',
-  InvalidUriFormat: 'invalid-uri-format',
-  MissingUri: 'missing-uri'
-};
-
-const getInvalidUriMessage = (uri, code) => {
-  if (code === ParseChatDebugUriErrorCode.MissingUri) {
-    return 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
-  }
-  return `Unable to load debug session: invalid URI "${uri}". Expected format: chat-debug://<sessionId>.`;
-};
-
-const getSessionNotFoundMessage = sessionId => {
-  return `No chat session found for sessionId "${sessionId}".`;
-};
-
 const toTimeNumber = value => {
   if (typeof value === 'number' && Number.isFinite(value)) {
     return value;
@@ -1859,6 +2028,165 @@ const getTimelineInfo = (events, startValue, endValue) => {
   };
 };
 
+const getCurrentEvents$3 = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const selectEventAtIndex = async (state, selectedEventIndex, dependencies) => {
+  const currentEvents = getCurrentEvents$3(state);
+  const selectedEvent = currentEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return {
+      ...state,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex
+    };
+  }
+  if (typeof selectedEvent.eventId !== 'number') {
+    return {
+      ...state,
+      selectedEvent,
+      selectedEventId: null,
+      selectedEventIndex
+    };
+  }
+  const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  return {
+    ...state,
+    selectedEvent: selectedEventDetails ?? selectedEvent,
+    selectedEventId: selectedEvent.eventId,
+    selectedEventIndex
+  };
+};
+
+const devtoolsRootGap = 4;
+const devtoolsTopHeight = 28;
+const devtoolsTimelineHeight = 88;
+const devtoolsTableHeaderHeight = 24;
+const devtoolsTableRowHeight = 24;
+const getTableBodyY = (state, hasTimeline) => {
+  return state.y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
+};
+const getTableBodyEventIndex = (state, eventX, eventY) => {
+  if (!state.useDevtoolsLayout) {
+    return -1;
+  }
+  const currentEvents = getCurrentEvents$3(state);
+  if (currentEvents.length === 0) {
+    return -1;
+  }
+  const tableX = state.x + leftPadding;
+  const tableWidth = clampTableWidth(state.width, state.tableWidth);
+  const hasTimeline = currentEvents.length > 0;
+  const tableBodyY = getTableBodyY(state, hasTimeline);
+  const relativeX = eventX - tableX;
+  const relativeY = eventY - tableBodyY;
+  if (relativeX < 0 || relativeX >= tableWidth || relativeY < 0) {
+    return -1;
+  }
+  const eventIndex = Math.floor(relativeY / devtoolsTableRowHeight);
+  if (eventIndex < 0 || eventIndex >= currentEvents.length) {
+    return -1;
+  }
+  return eventIndex;
+};
+
+const MenuChatDebugTableBody = 2190;
+const handleTableBodyContextMenu = async (state, eventX, eventY) => {
+  const eventIndex = getTableBodyEventIndex(state, eventX, eventY);
+  await showContextMenu2(state.uid, MenuChatDebugTableBody, eventX, eventY, {
+    eventIndex,
+    menuId: MenuChatDebugTableBody
+  });
+  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 [MenuChatDebugTableHeader, MenuChatDebugTableBody, 556, 557];
+};
+
+const getErrorMessage = error => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === 'string') {
+    return error;
+  }
+  if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
+    return error.message;
+  }
+  return undefined;
+};
+const getFailedToLoadMessage = (sessionId, error) => {
+  const errorMessage = getErrorMessage(error);
+  if (errorMessage) {
+    return failedToLoadChatDebugSessionWithError(sessionId, errorMessage);
+  }
+  return failedToLoadChatDebugSession(sessionId);
+};
+
+const ParseChatDebugUriErrorCode = {
+  InvalidSessionId: 'invalid-session-id',
+  InvalidUriEncoding: 'invalid-uri-encoding',
+  InvalidUriFormat: 'invalid-uri-format',
+  MissingUri: 'missing-uri'
+};
+
+const getInvalidUriMessage = (uri, code) => {
+  if (code === ParseChatDebugUriErrorCode.MissingUri) {
+    return unableToLoadDebugSessionMissingUri();
+  }
+  return unableToLoadDebugSessionInvalidUri(uri);
+};
+
+const getSessionNotFoundMessage = sessionId => {
+  return noChatSessionFound(sessionId);
+};
+
 const listChatViewEventsDependencies = {
   listChatViewEventsFromWorker: listChatViewEvents$1
 };
@@ -1886,7 +2214,7 @@ const parseChatDebugUri = uri => {
   if (!uri) {
     return {
       code: ParseChatDebugUriErrorCode.MissingUri,
-      message: 'Missing URI',
+      message: missingUri(),
       type: 'error'
     };
   }
@@ -1894,7 +2222,7 @@ const parseChatDebugUri = uri => {
   if (!match) {
     return {
       code: ParseChatDebugUriErrorCode.InvalidUriFormat,
-      message: 'Invalid URI format',
+      message: invalidUriFormat(),
       type: 'error'
     };
   }
@@ -1905,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'
     };
   }
@@ -1926,7 +2254,7 @@ const loadEventsDependencies = {
   listChatViewEvents: listChatViewEvents,
   loadSelectedEvent: loadSelectedEvent
 };
-const getCurrentEvents$3 = state => {
+const getCurrentEvents$2 = state => {
   const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
   return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
 };
@@ -1938,7 +2266,7 @@ const restoreSelectedEvent = async state => {
       selectedEventIndex: null
     };
   }
-  const currentEvents = getCurrentEvents$3(state);
+  const currentEvents = getCurrentEvents$2(state);
   const selectedEventIndex = currentEvents.findIndex(event => event.eventId === state.selectedEventId);
   if (selectedEventIndex === -1) {
     return {
@@ -2071,6 +2399,10 @@ const handleDetailsContextMenu = state => {
   return state;
 };
 
+const handleDetailsTopContextMenu = state => {
+  return state;
+};
+
 const handleDetailTab = (state, value) => {
   if (!isDetailTab(value)) {
     return state;
@@ -2081,7 +2413,7 @@ const handleDetailTab = (state, value) => {
   };
 };
 
-const getCurrentEvents$2 = state => {
+const getCurrentEvents$1 = state => {
   const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
   return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
 };
@@ -2095,7 +2427,7 @@ const getSelectedEventIndex$1 = state => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const filteredEvents = getCurrentEvents$2(state);
+  const filteredEvents = getCurrentEvents$1(state);
   const selectedEvent = filteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
@@ -2113,12 +2445,12 @@ const getPreservedSelectedEventIndex$1 = (oldState, newState) => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const oldFilteredEvents = getCurrentEvents$2(oldState);
+  const oldFilteredEvents = getCurrentEvents$1(oldState);
   const selectedEvent = oldFilteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
   }
-  const newFilteredEvents = getCurrentEvents$2(newState);
+  const newFilteredEvents = getCurrentEvents$1(newState);
   const newIndex = getEventIndexByStableId$1(newFilteredEvents, selectedEvent);
   if (newIndex === -1) {
     return null;
@@ -2143,38 +2475,6 @@ const handleEventCategoryFilter = (state, value) => {
   return withPreservedSelection$1(state, nextState);
 };
 
-const getCurrentEvents$1 = state => {
-  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
-  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
-};
-const selectEventAtIndex = async (state, selectedEventIndex, dependencies) => {
-  const currentEvents = getCurrentEvents$1(state);
-  const selectedEvent = currentEvents[selectedEventIndex];
-  if (!selectedEvent) {
-    return {
-      ...state,
-      selectedEvent: null,
-      selectedEventId: null,
-      selectedEventIndex
-    };
-  }
-  if (typeof selectedEvent.eventId !== 'number') {
-    return {
-      ...state,
-      selectedEvent,
-      selectedEventId: null,
-      selectedEventIndex
-    };
-  }
-  const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
-  return {
-    ...state,
-    selectedEvent: selectedEventDetails ?? selectedEvent,
-    selectedEventId: selectedEvent.eventId,
-    selectedEventIndex
-  };
-};
-
 const handleEventRowClickDependencies = {
   loadSelectedEvent: loadSelectedEvent
 };
@@ -2199,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';
 };
@@ -2406,44 +2702,7 @@ const handleSashPointerUp = (state, eventX, eventY) => {
   return state;
 };
 
-const devtoolsRootGap = 4;
-const devtoolsTopHeight = 28;
-const devtoolsTimelineHeight = 88;
-const devtoolsTableHeaderHeight = 24;
-const devtoolsTableRowHeight = 24;
-const MenuChatDebugTableBody = 2190;
-const getTableBodyY = (state, hasTimeline) => {
-  return state.y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
-};
-const getTableBodyEventIndex = (state, eventX, eventY) => {
-  if (!state.useDevtoolsLayout) {
-    return -1;
-  }
-  const currentEvents = getCurrentEvents$1(state);
-  if (currentEvents.length === 0) {
-    return -1;
-  }
-  const tableX = state.x + leftPadding;
-  const tableWidth = clampTableWidth(state.width, state.tableWidth);
-  const hasTimeline = currentEvents.length > 0;
-  const tableBodyY = getTableBodyY(state, hasTimeline);
-  const relativeX = eventX - tableX;
-  const relativeY = eventY - tableBodyY;
-  if (relativeX < 0 || relativeX >= tableWidth || relativeY < 0) {
-    return -1;
-  }
-  const eventIndex = Math.floor(relativeY / devtoolsTableRowHeight);
-  if (eventIndex < 0 || eventIndex >= currentEvents.length) {
-    return -1;
-  }
-  return eventIndex;
-};
-const handleTableBodyContextMenu = async (state, eventX, eventY) => {
-  const eventIndex = getTableBodyEventIndex(state, eventX, eventY);
-  await showContextMenu2(state.uid, MenuChatDebugTableBody, eventX, eventY, {
-    eventIndex,
-    menuId: MenuChatDebugTableBody
-  });
+const handleTimelineContextMenu = state => {
   return state;
 };
 
@@ -3104,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();
@@ -3131,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];
@@ -3148,7 +3409,7 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) =>
     inputType: 'search',
     name: Filter,
     onInput: HandleFilterInput,
-    placeholder: 'Filter events',
+    placeholder: filterEvents(),
     type: Input,
     value: filterValue
   }, ...refreshButtonDom];
@@ -3224,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 => {
@@ -3264,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,
@@ -3275,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',
@@ -3371,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];
   });
 };
 
@@ -3693,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 => {
@@ -3794,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 = '') => {
@@ -3824,6 +4117,7 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
   return [{
     childCount: 2,
     className: ChatDebugViewTimeline,
+    onContextMenu: HandleTimelineContextMenu,
     type: Section
   }, {
     childCount: 1,
@@ -3850,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);
@@ -3924,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);
   }
@@ -3954,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;
@@ -3983,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];
 };
 
@@ -4031,7 +4325,7 @@ const render2 = (uid, diffResult) => {
 const renderEventListeners = () => {
   return [{
     name: HandleHeaderContextMenu,
-    params: ['handleHeaderContextMenu'],
+    params: ['handleHeaderContextMenu', ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleEventRowClick,
@@ -4044,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]
@@ -4095,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,
@@ -4124,7 +4439,8 @@ const saveState = state => {
     selectedEventId,
     sessionId,
     timelineEndSeconds,
-    timelineStartSeconds
+    timelineStartSeconds,
+    visibleTableColumns
   } = state;
   return {
     eventCategoryFilter,
@@ -4133,7 +4449,8 @@ const saveState = state => {
     selectedEventId,
     sessionId,
     timelineEndSeconds,
-    timelineStartSeconds
+    timelineStartSeconds,
+    visibleTableColumns
   };
 };
 
@@ -4181,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),
@@ -4202,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),
@@ -4216,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.2.0",
+  "version": "7.4.0",
   "description": "Chat Debug View Worker",
   "repository": {
     "type": "git",