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

package/dist/chatDebugViewWorkerMain.js

@@ -1128,9 +1128,10 @@ const Text = 12;
 const Th = 13;
 const THead = 14;
 const Tr = 15;
+const Img = 17;
+const H2 = 22;
 const Section = 41;
 const Search = 42;
-const Label = 66;
 const Reference = 100;
 
 const Button = 'event.button';
@@ -1139,7 +1140,7 @@ const ClientY = 'event.clientY';
 const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
 
-const None = 0;
+const None$1 = 0;
 const Checked = 2;
 const Unchecked = 3;
 
@@ -1170,6 +1171,9 @@ const showContextMenu2 = async (uid, menuId, x, y, args) => {
 const sendMessagePortToChatStorageWorker$1 = async port => {
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToChatStorageWorker', port, 'HandleMessagePort.handleMessagePort');
 };
+const writeClipBoardText = async text => {
+  await invoke('ClipBoard.writeText', /* text */text);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1301,11 +1305,56 @@ const loadSelectedEvent$1 = async (sessionId, eventId, type) => {
   return invoke$1('ChatStorage.loadSelectedEvent', sessionId, eventId, type);
 };
 
-const appendStoredEventForTestDependencies = {
-  appendEvent: appendEvent
-};
 const appendStoredEventForTest = async (state, event) => {
-  await appendStoredEventForTestDependencies.appendEvent(event);
+  await appendEvent(event);
+  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');
+  if (!context) {
+    throw new Error('2d canvas context is not available');
+  }
+  context.fillStyle = '#0b6';
+  context.fillRect(0, 0, 2, 2);
+  return canvas.convertToBlob({
+    type: mimeType
+  });
+};
+const createBlob = async (mimeType, contentKind, content) => {
+  if (contentKind === 'canvas') {
+    return createCanvasBlob(mimeType);
+  }
+  if (contentKind === 'base64') {
+    return new Blob([decodeBase64(content)], {
+      type: mimeType
+    });
+  }
+  return new Blob([content], {
+    type: mimeType
+  });
+};
+const appendStoredImageAttachmentForTest = async (state, sessionId, eventId, mimeType, name, contentKind, content, timestamp) => {
+  const blob = await createBlob(mimeType, contentKind, content);
+  await appendEvent({
+    attachmentId: `attachment-${eventId}`,
+    blob,
+    eventId,
+    mimeType,
+    name,
+    sessionId,
+    timestamp,
+    type: 'chat-attachment-added'
+  });
   return state;
 };
 
@@ -1331,6 +1380,7 @@ const FailedToLoadChatDebugSession = 'Failed to load chat debug session "{PH1}".
 const FailedToLoadChatDebugSessionWithError = 'Failed to load chat debug session "{PH1}": {PH2}';
 const FilterEvents = 'Filter events';
 const FromSeconds = 'from {PH1}s';
+const ImageCouldNotBeLoaded = 'image could not be loaded';
 const InvalidSessionId = 'Invalid session id';
 const InvalidUriEncoding = 'Invalid URI encoding';
 const InvalidUriFormat = 'Invalid URI format';
@@ -1340,6 +1390,7 @@ 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 Payload$1 = 'Payload';
 const Preview$1 = 'Preview';
 const Refresh$1 = 'Refresh';
 const RefreshEvents = 'Refresh events';
@@ -1401,6 +1452,9 @@ const fromSeconds = seconds => {
 const invalidSessionId = () => {
   return i18nString(InvalidSessionId);
 };
+const imageCouldNotBeLoaded = () => {
+  return i18nString(ImageCouldNotBeLoaded);
+};
 const invalidUriEncoding = () => {
   return i18nString(InvalidUriEncoding);
 };
@@ -1432,6 +1486,9 @@ const noToolCallEvents = () => {
 const preview = () => {
   return i18nString(Preview$1);
 };
+const payload = () => {
+  return i18nString(Payload$1);
+};
 const refresh$1 = () => {
   return i18nString(Refresh$1);
 };
@@ -1489,40 +1546,101 @@ const windowSummary = (start, end, duration) => {
   });
 };
 
+const Filter = 'filter';
+const EventCategoryFilter = 'eventCategoryFilter';
+const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
+const ShowInputEvents = 'showInputEvents';
+const ShowResponsePartEvents = 'showResponsePartEvents';
+const UseDevtoolsLayout = 'useDevtoolsLayout';
+const SelectedEventIndex = 'selectedEventIndex';
+const CloseDetails = 'closeDetails';
+const DetailTab = 'detailTab';
+const TimelineStartSeconds = 'timelineStartSeconds';
+const TimelineEndSeconds = 'timelineEndSeconds';
+const TimelineRangePreset = 'timelineRangePreset';
+const Refresh = 'refresh';
+const All = 'all';
+const Tools = 'tools';
+const Network = 'network';
+const Ui = 'ui';
+const Stream = 'stream';
 const Response = 'response';
 const Preview = 'preview';
+const Payload = 'payload';
 const Timing = 'timing';
-const detailTabs = [Preview, Response, Timing];
+
 const isDetailTab = value => {
-  return value === Response || value === Preview || value === Timing;
+  return value === Response || value === Preview || value === Payload || value === Timing;
 };
-const getDetailTabLabel = value => {
-  if (value === Preview) {
-    return preview();
-  }
-  if (value === Timing) {
-    return timing();
-  }
-  return response();
+
+const getSafeSelectedDetailTab = selectedDetailTab => {
+  return isDetailTab(selectedDetailTab) ? selectedDetailTab : Response;
 };
 
-const createEventCategoryFilterOptions = () => {
-  return [{
-    label: all(),
-    value: All
-  }, {
-    label: tools(),
-    value: Tools
-  }, {
-    label: network(),
-    value: Network
+const hasTimingDetails = event => {
+  const hasDuration = typeof event.duration === 'number' || typeof event.durationMs === 'number';
+  const hasStart = event.started !== undefined || event.startTime !== undefined || event.startTimestamp !== undefined;
+  const hasEnd = event.ended !== undefined || event.endTime !== undefined || event.endTimestamp !== undefined;
+  return hasDuration || hasStart && hasEnd;
+};
+
+const createDetailTabs = (selectedDetailTab = Response, event) => {
+  const hasTimingTab = event ? hasTimingDetails(event) : true;
+  const safeSelectedDetailTab = getSafeSelectedDetailTab(selectedDetailTab);
+  const normalizedSelectedDetailTab = hasTimingTab || safeSelectedDetailTab !== Timing ? safeSelectedDetailTab : Response;
+  const detailTabs = [{
+    isSelected: normalizedSelectedDetailTab === Preview,
+    label: preview(),
+    name: Preview
   }, {
-    label: ui(),
-    value: Ui
+    isSelected: normalizedSelectedDetailTab === Payload,
+    label: payload(),
+    name: Payload
   }, {
-    label: stream(),
-    value: Stream
+    isSelected: normalizedSelectedDetailTab === Response,
+    label: response(),
+    name: Response
   }];
+  if (hasTimingTab) {
+    detailTabs.push({
+      isSelected: normalizedSelectedDetailTab === Timing,
+      label: timing(),
+      name: Timing
+    });
+  }
+  return detailTabs;
+};
+
+const getSelectedDetailTab = detailTabs => {
+  const selectedDetailTab = detailTabs.find(detailTab => detailTab.isSelected);
+  if (selectedDetailTab) {
+    return selectedDetailTab.name;
+  }
+  const responseTab = detailTabs.find(detailTab => detailTab.name === Response);
+  if (responseTab) {
+    return responseTab.name;
+  }
+  return detailTabs[0]?.name ?? Response;
+};
+
+const hasDetailTab = (detailTabs, value) => {
+  return detailTabs.some(detailTab => detailTab.name === value);
+};
+
+const selectDetailTab$1 = (detailTabs, selectedDetailTab) => {
+  if (!hasDetailTab(detailTabs, selectedDetailTab)) {
+    return detailTabs;
+  }
+  return detailTabs.map(detailTab => {
+    const isSelectedProperty = detailTab.name === selectedDetailTab;
+    if (detailTab.isSelected === isSelectedProperty) {
+      return detailTab;
+    }
+    return {
+      ...detailTab,
+      isSelected: isSelectedProperty
+    };
+  });
 };
 
 const getEventCategoryFilterLabel = eventCategoryFilter => {
@@ -1540,11 +1658,91 @@ const getEventCategoryFilterLabel = eventCategoryFilter => {
   }
 };
 
-const All = 'all';
-const Tools = 'tools';
-const Network = 'network';
-const Ui = 'ui';
-const Stream = 'stream';
+const eventCategoryFilters = [All, Tools, Network, Ui, Stream];
+const normalizeSelectedEventCategoryFilters = (selectedEventCategoryFilter = All) => {
+  const selectedEventCategoryFilters = Array.isArray(selectedEventCategoryFilter) ? selectedEventCategoryFilter : [selectedEventCategoryFilter];
+  const uniqueSelectedEventCategoryFilters = [...new Set(selectedEventCategoryFilters)];
+  const validSelectedEventCategoryFilters = uniqueSelectedEventCategoryFilters.filter(value => {
+    return eventCategoryFilters.includes(value);
+  });
+  if (validSelectedEventCategoryFilters.length === 0) {
+    return [All];
+  }
+  if (validSelectedEventCategoryFilters.includes(All)) {
+    return [All];
+  }
+  return validSelectedEventCategoryFilters;
+};
+const createCategoryFilters$1 = (selectedEventCategoryFilter = All) => {
+  const selectedEventCategoryFilters = normalizeSelectedEventCategoryFilters(selectedEventCategoryFilter);
+  return [{
+    isSelected: selectedEventCategoryFilters.includes(All),
+    label: all(),
+    name: All
+  }, {
+    isSelected: selectedEventCategoryFilters.includes(Tools),
+    label: tools(),
+    name: Tools
+  }, {
+    isSelected: selectedEventCategoryFilters.includes(Network),
+    label: network(),
+    name: Network
+  }, {
+    isSelected: selectedEventCategoryFilters.includes(Ui),
+    label: ui(),
+    name: Ui
+  }, {
+    isSelected: selectedEventCategoryFilters.includes(Stream),
+    label: stream(),
+    name: Stream
+  }];
+};
+
+const createCategoryFilters = (selectedEventCategoryFilter = All) => {
+  return createCategoryFilters$1(selectedEventCategoryFilter);
+};
+const isEventCategoryFilter = value => {
+  return value === All || value === Tools || value === Network || value === Ui || value === Stream;
+};
+const getSelectedEventCategoryFilters = categoryFilters => {
+  const selectedCategoryFilters = categoryFilters.filter(categoryFilter => categoryFilter.isSelected);
+  const selectedEventCategoryFilters = selectedCategoryFilters.map(categoryFilter => categoryFilter.name).filter(name => isEventCategoryFilter(name));
+  return normalizeSelectedEventCategoryFilters(selectedEventCategoryFilters);
+};
+const getSelectedEventCategoryFilter = categoryFilters => {
+  const selectedEventCategoryFilters = getSelectedEventCategoryFilters(categoryFilters);
+  if (selectedEventCategoryFilters.length === 1) {
+    return selectedEventCategoryFilters[0];
+  }
+  return All;
+};
+const selectCategoryFilters = (categoryFilters, selectedEventCategoryFilters) => {
+  const normalizedSelectedEventCategoryFilters = normalizeSelectedEventCategoryFilters(selectedEventCategoryFilters.filter(value => isEventCategoryFilter(value)));
+  return categoryFilters.map(categoryFilter => {
+    const isSelected = normalizedSelectedEventCategoryFilters.includes(categoryFilter.name);
+    if (categoryFilter.isSelected === isSelected) {
+      return categoryFilter;
+    }
+    return {
+      ...categoryFilter,
+      isSelected
+    };
+  });
+};
+const selectCategoryFilter = (categoryFilters, selectedEventCategoryFilter, additive = false) => {
+  if (!isEventCategoryFilter(selectedEventCategoryFilter)) {
+    return categoryFilters;
+  }
+  if (!additive || selectedEventCategoryFilter === All) {
+    return selectCategoryFilters(categoryFilters, [selectedEventCategoryFilter]);
+  }
+  const selectedEventCategoryFilters = getSelectedEventCategoryFilters(categoryFilters).filter(value => value !== All);
+  const nextSelectedEventCategoryFilters = selectedEventCategoryFilters.includes(selectedEventCategoryFilter) ? selectedEventCategoryFilters.filter(value => value !== selectedEventCategoryFilter) : [...selectedEventCategoryFilters, selectedEventCategoryFilter];
+  if (nextSelectedEventCategoryFilters.length === 0) {
+    return selectCategoryFilters(categoryFilters, [All]);
+  }
+  return selectCategoryFilters(categoryFilters, nextSelectedEventCategoryFilters);
+};
 
 const RE_SPACE = /\s+/;
 const tokenToEventCategoryFilter = new Map([['@tools', Tools], ['@network', Network], ['@ui', Ui], ['@stream', Stream]]);
@@ -1568,57 +1766,52 @@ const parseFilterValue = filterValue => {
 const Type = 'type';
 const Duration = 'duration';
 const Status = 'status';
-const tableColumns = [Type, Duration, Status];
-const defaultVisibleTableColumns = tableColumns;
+const tableColumnNames = [Type, Duration, Status];
+const createTableColumns = () => {
+  return [{
+    label: type(),
+    name: Type
+  }, {
+    label: duration(),
+    name: Duration
+  }, {
+    label: status(),
+    name: Status
+  }];
+};
+const defaultVisibleTableColumns = tableColumnNames;
 const isTableColumn = value => {
-  return tableColumns.includes(value);
+  return tableColumnNames.includes(value);
 };
-const getOrderedVisibleTableColumns = values => {
+const getOrderedVisibleTableColumns = (values, tableColumns = createTableColumns()) => {
   const visibleColumns = new Set(values.filter(isTableColumn));
-  return tableColumns.filter(column => visibleColumns.has(column));
+  return tableColumns.map(column => column.name).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;
-};
-const getRestoredEventCategoryFilter = (savedState, currentEventCategoryFilter) => {
-  if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
-    return savedState.eventCategoryFilter;
-  }
-  if (typeof savedState.filterValue === 'string') {
-    return parseFilterValue(savedState.filterValue).eventCategoryFilter;
-  }
-  return currentEventCategoryFilter;
-};
-const restoreSavedState = (state, savedState) => {
-  if (!isSavedState(savedState)) {
-    return state;
+const getTableColumnLabel = (tableColumns, name) => {
+  const match = tableColumns.find(column => column.name === name);
+  if (match) {
+    return match.label;
+  }
+  switch (name) {
+    case Duration:
+      return duration();
+    case Status:
+      return status();
+    case Type:
+      return type();
+    default:
+      return name;
   }
-  const restoredVisibleTableColumns = Array.isArray(savedState.visibleTableColumns) ? getOrderedVisibleTableColumns(savedState.visibleTableColumns.filter(value => typeof value === 'string')) : state.visibleTableColumns;
-  return {
-    ...state,
-    eventCategoryFilter: getRestoredEventCategoryFilter(savedState, state.eventCategoryFilter),
-    filterValue: typeof savedState.filterValue === 'string' ? savedState.filterValue : state.filterValue,
-    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,
-    visibleTableColumns: restoredVisibleTableColumns
-  };
 };
 
-const {
-  get,
-  getCommandIds,
-  registerCommands,
-  set,
-  wrapCommand,
-  wrapGetter
-} = create$1();
+const defaultTableColumnWidths = {
+  duration: 110,
+  status: 110,
+  type: 260
+};
 
 const defaultTableWidth = 480;
 const minTableWidth = 240;
@@ -1647,134 +1840,445 @@ const getTableWidthFromClientX = (viewX, width, clientX) => {
   return clampTableWidth(width, nextTableWidth);
 };
 
-const createDefaultState = () => {
+const minimumTableColumnWidth = 80;
+
+const getTableColumnLayout = (tableWidth, visibleTableColumns, tableColumnWidths) => {
+  const visibleColumns = getOrderedVisibleTableColumns(visibleTableColumns);
+  if (visibleColumns.length === 0) {
+    return {
+      fixedColumns: [],
+      resizerLefts: [],
+      visibleColumns,
+      visibleColumnWidths: []
+    };
+  }
+  const visibleColumnWidths = [];
+  let remainingWidth = tableWidth;
+  let remainingColumnCount = visibleColumns.length;
+  for (let index = 0; index < visibleColumns.length; index++) {
+    const column = visibleColumns[index];
+    if (index === visibleColumns.length - 1) {
+      visibleColumnWidths.push(Math.max(0, remainingWidth));
+      continue;
+    }
+    const maxWidth = Math.max(minimumTableColumnWidth, remainingWidth - minimumTableColumnWidth * (remainingColumnCount - 1));
+    const preferredWidth = tableColumnWidths[column];
+    const clampedWidth = Math.max(minimumTableColumnWidth, Math.min(preferredWidth, maxWidth));
+    visibleColumnWidths.push(clampedWidth);
+    remainingWidth -= clampedWidth;
+    remainingColumnCount -= 1;
+  }
+  const resizerLefts = [];
+  let cumulativeWidth = 0;
+  for (let index = 0; index < visibleColumnWidths.length - 1; index++) {
+    cumulativeWidth += visibleColumnWidths[index];
+    resizerLefts.push(cumulativeWidth);
+  }
   return {
-    assetDir: '',
-    databaseName: 'lvce-chat-view-sessions',
-    dataBaseVersion: 2,
-    errorMessage: '',
-    eventCategoryFilter: All,
-    eventCategoryFilterOptions: createEventCategoryFilterOptions(),
-    events: [],
-    eventStoreName: 'chat-view-events',
-    filterValue: '',
-    height: 0,
-    initial: false,
-    platform: 0,
-    selectedDetailTab: Response,
-    selectedEvent: null,
-    selectedEventId: null,
-    selectedEventIndex: null,
-    sessionId: '',
-    sessionIdIndexName: 'sessionId',
-    showEventStreamFinishedEvents: false,
-    showInputEvents: false,
-    showResponsePartEvents: false,
-    tableWidth: defaultTableWidth,
-    timelineEndSeconds: '',
-    timelineSelectionActive: false,
-    timelineSelectionAnchorSeconds: '',
-    timelineSelectionFocusSeconds: '',
-    timelineStartSeconds: '',
-    uid: 0,
-    uri: '',
-    useDevtoolsLayout: true,
-    visibleTableColumns: defaultVisibleTableColumns,
-    width: 0,
-    x: 0,
-    y: 0
+    fixedColumns: visibleColumns.slice(0, -1),
+    resizerLefts,
+    visibleColumns,
+    visibleColumnWidths
   };
 };
 
-const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '', databaseName = 'lvce-chat-view-sessions', dataBaseVersion = 2, eventStoreName = 'chat-view-events', sessionIdIndexName = 'sessionId', savedState = {}) => {
-  const defaultState = createDefaultState();
-  const state = {
-    ...restoreSavedState(defaultState, savedState),
-    assetDir,
-    databaseName,
-    dataBaseVersion,
-    eventStoreName,
-    height,
-    initial: true,
-    platform,
-    sessionId,
-    sessionIdIndexName,
-    uid,
-    uri,
-    width,
-    x,
-    y
+const getResizedTableColumnWidths = (width, tableWidth, visibleTableColumns, tableColumnWidths, viewX, clientX, resizerDownId) => {
+  const clampedTableWidth = clampTableWidth(width, tableWidth);
+  const layout = getTableColumnLayout(clampedTableWidth, visibleTableColumns, tableColumnWidths);
+  if (resizerDownId < 1 || resizerDownId >= layout.visibleColumns.length) {
+    return tableColumnWidths;
+  }
+  const boundaryIndex = resizerDownId - 1;
+  const precedingWidth = layout.visibleColumnWidths.slice(0, boundaryIndex).reduce((total, current) => total + current, 0);
+  const remainingVisibleColumnCount = layout.visibleColumns.length - boundaryIndex - 1;
+  const maxWidth = Math.max(minimumTableColumnWidth, clampedTableWidth - precedingWidth - minimumTableColumnWidth * remainingVisibleColumnCount);
+  const nextWidth = clientX - viewX - leftPadding - precedingWidth;
+  const clampedWidth = Math.max(minimumTableColumnWidth, Math.min(nextWidth, maxWidth));
+  const resizedColumn = layout.visibleColumns[boundaryIndex];
+  return {
+    ...tableColumnWidths,
+    [resizedColumn]: clampedWidth
   };
-  set(uid, state, state);
 };
 
-const RenderItems = 1;
-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.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 [];
+const isSameTableColumnWidths = (first, second) => {
+  return first.type === second.type && first.duration === second.duration && first.status === second.status;
 };
 
-const diff2 = uid => {
-  const {
-    newState,
-    oldState
-  } = get(uid);
-  return diff(oldState, newState);
+const isFiniteNumber = value => {
+  return typeof value === 'number' && Number.isFinite(value);
 };
 
-const MenuChatDebugTableHeader = 2189;
-const handleHeaderContextMenu = async (state, eventX, eventY) => {
-  await showContextMenu2(state.uid, MenuChatDebugTableHeader, eventX, eventY, {
-    menuId: MenuChatDebugTableHeader
-  });
-  return state;
+const isTableColumnWidths = value => {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+  const record = value;
+  return isFiniteNumber(record.type) && isFiniteNumber(record.duration) && isFiniteNumber(record.status);
 };
 
-const hasMatchingToolName = (startedEvent, finishedEvent) => {
-  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
-    return startedEvent.toolName === finishedEvent.toolName;
+const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
+const isSavedState = value => {
+  return typeof value === 'object' && value !== null;
+};
+const restoreCategoryFilters = (savedState, currentCategoryFilters) => {
+  if (Array.isArray(savedState.eventCategoryFilters)) {
+    return selectCategoryFilters(currentCategoryFilters, savedState.eventCategoryFilters.filter(value => typeof value === 'string'));
   }
-  return true;
+  if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
+    return selectCategoryFilter(currentCategoryFilters, savedState.eventCategoryFilter);
+  }
+  if (typeof savedState.filterValue === 'string') {
+    return selectCategoryFilter(currentCategoryFilters, parseFilterValue(savedState.filterValue).eventCategoryFilter);
+  }
+  return currentCategoryFilters;
 };
-
-const isMatchingToolExecutionPair = (startedEvent, finishedEvent) => {
-  return startedEvent.sessionId === finishedEvent.sessionId && hasMatchingToolName(startedEvent, finishedEvent);
+const restoreFilterValue = (savedState, currentFilterValue) => {
+  return typeof savedState.filterValue === 'string' ? savedState.filterValue : currentFilterValue;
 };
-
-const startedEventType = 'tool-execution-started';
-const finishedEventType = 'tool-execution-finished';
-const mergedEventType = 'tool-execution';
-
-const isToolExecutionFinishedEvent = event => {
-  return event.type === finishedEventType;
+const restoreDetailTabs = (savedState, currentDetailTabs) => {
+  return typeof savedState.selectedDetailTab === 'string' && isDetailTab(savedState.selectedDetailTab) ? selectDetailTab$1(currentDetailTabs, savedState.selectedDetailTab) : currentDetailTabs;
 };
-
-const isToolExecutionStartedEvent = event => {
-  return event.type === startedEventType;
+const restoreSelectedEventId = (savedState, currentSelectedEventId) => {
+  return typeof savedState.selectedEventId === 'number' || savedState.selectedEventId === null ? savedState.selectedEventId : currentSelectedEventId;
 };
-
-const getTimestamp = value => {
-  return typeof value === 'string' || typeof value === 'number' ? value : undefined;
+const restoreTimelineEndSeconds = (savedState, currentTimelineEndSeconds) => {
+  return typeof savedState.timelineEndSeconds === 'string' ? savedState.timelineEndSeconds : currentTimelineEndSeconds;
 };
-
-const getEndedTimestamp = event => {
-  return getTimestamp(event.ended) ?? getTimestamp(event.endTime) ?? getTimestamp(event.endTimestamp) ?? getTimestamp(event.timestamp);
+const restoreTimelineStartSeconds = (savedState, currentTimelineStartSeconds) => {
+  return typeof savedState.timelineStartSeconds === 'string' ? savedState.timelineStartSeconds : currentTimelineStartSeconds;
 };
-
-const getStartedTimestamp = event => {
-  return getTimestamp(event.started) ?? getTimestamp(event.startTime) ?? getTimestamp(event.startTimestamp) ?? getTimestamp(event.timestamp);
+const restoreVisibleTableColumns = (savedState, currentVisibleTableColumns) => {
+  if (!Array.isArray(savedState.visibleTableColumns)) {
+    return currentVisibleTableColumns;
+  }
+  const visibleTableColumns = savedState.visibleTableColumns.filter(value => typeof value === 'string');
+  return getOrderedVisibleTableColumns(visibleTableColumns);
 };
-
-const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
-  const ended = getEndedTimestamp(finishedEvent);
-  const {
-    eventId
-  } = startedEvent;
+const restoreTableColumnWidths = (savedState, currentTableColumnWidths) => {
+  return isTableColumnWidths(savedState.tableColumnWidths) ? savedState.tableColumnWidths : currentTableColumnWidths;
+};
+const restoreSavedState = (state, savedState) => {
+  if (!isSavedState(savedState)) {
+    return state;
+  }
+  return {
+    ...state,
+    categoryFilters: restoreCategoryFilters(savedState, state.categoryFilters),
+    detailTabs: restoreDetailTabs(savedState, state.detailTabs),
+    filterValue: restoreFilterValue(savedState, state.filterValue),
+    selectedEventId: restoreSelectedEventId(savedState, state.selectedEventId),
+    tableColumnWidths: restoreTableColumnWidths(savedState, state.tableColumnWidths),
+    timelineEndSeconds: restoreTimelineEndSeconds(savedState, state.timelineEndSeconds),
+    timelineStartSeconds: restoreTimelineStartSeconds(savedState, state.timelineStartSeconds),
+    visibleTableColumns: restoreVisibleTableColumns(savedState, state.visibleTableColumns)
+  };
+};
+
+const {
+  get,
+  getCommandIds,
+  registerCommands,
+  set,
+  wrapCommand,
+  wrapGetter
+} = create$1();
+
+const toTimeNumber = value => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const timestamp = Date.parse(value);
+    if (!Number.isNaN(timestamp)) {
+      return timestamp;
+    }
+  }
+  return undefined;
+};
+
+const getEventTime = event => {
+  return toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+};
+
+const getEventsWithTime = events => {
+  return events.flatMap(event => {
+    const time = getEventTime(event);
+    if (time === undefined) {
+      return [];
+    }
+    return [{
+      event,
+      time
+    }];
+  });
+};
+
+const parseTimelineSeconds = value => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  const parsed = Number.parseFloat(trimmed);
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    return undefined;
+  }
+  return parsed;
+};
+
+const roundSeconds = value => {
+  return Number(value.toFixed(3));
+};
+
+const getNormalizedRange = (durationSeconds, startValue, endValue) => {
+  const parsedStart = parseTimelineSeconds(startValue);
+  const parsedEnd = parseTimelineSeconds(endValue);
+  if (parsedStart === undefined && parsedEnd === undefined) {
+    return {
+      endSeconds: null,
+      hasSelection: false,
+      startSeconds: null
+    };
+  }
+  const rawStart = parsedStart ?? 0;
+  const rawEnd = parsedEnd ?? durationSeconds;
+  const normalizedStart = Math.max(0, Math.min(durationSeconds, Math.min(rawStart, rawEnd)));
+  const normalizedEnd = Math.max(0, Math.min(durationSeconds, Math.max(rawStart, rawEnd)));
+  return {
+    endSeconds: roundSeconds(normalizedEnd),
+    hasSelection: true,
+    startSeconds: roundSeconds(normalizedStart)
+  };
+};
+
+const getSelectionPercent = (value, durationSeconds) => {
+  if (durationSeconds <= 0) {
+    return 0;
+  }
+  return Number((value / durationSeconds * 100).toFixed(3));
+};
+
+const maxBarUnits = 8;
+const emptyTimelineInfo = {
+  buckets: [],
+  durationSeconds: 0,
+  endSeconds: null,
+  hasSelection: false,
+  selectionEndPercent: null,
+  selectionStartPercent: null,
+  startSeconds: null
+};
+const getTimelineInfo = (events, startValue, endValue) => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return emptyTimelineInfo;
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  const durationMs = Math.max(0, lastTime - baseTime);
+  const durationSeconds = roundSeconds(durationMs / 1000);
+  const range = getNormalizedRange(durationSeconds, startValue, endValue);
+  const bucketCount = durationSeconds === 0 ? 1 : Math.max(12, Math.min(48, Math.ceil(durationSeconds)));
+  const bucketDurationMs = durationMs === 0 ? 1000 : durationMs / bucketCount;
+  const counts = Array.from({
+    length: bucketCount
+  }).fill(0);
+  for (const item of eventsWithTime) {
+    const offsetMs = item.time - baseTime;
+    const index = durationMs === 0 ? 0 : Math.min(bucketCount - 1, Math.floor(offsetMs / durationMs * bucketCount));
+    counts[index] += 1;
+  }
+  const maxCount = Math.max(...counts);
+  const selectionStartPercent = range.hasSelection && range.startSeconds !== null ? getSelectionPercent(range.startSeconds, durationSeconds) : null;
+  const selectionEndPercent = range.hasSelection && range.endSeconds !== null ? getSelectionPercent(range.endSeconds, durationSeconds) : null;
+  const buckets = counts.map((count, index) => {
+    const bucketStartMs = index * bucketDurationMs;
+    const bucketEndMs = index === bucketCount - 1 ? durationMs : (index + 1) * bucketDurationMs;
+    const hasSelection = range.hasSelection && range.startSeconds !== null && range.endSeconds !== null;
+    const selectionStartMs = hasSelection ? range.startSeconds * 1000 : 0;
+    const selectionEndMs = hasSelection ? range.endSeconds * 1000 : 0;
+    return {
+      count,
+      endSeconds: roundSeconds(bucketEndMs / 1000),
+      isSelected: hasSelection && bucketEndMs >= selectionStartMs && bucketStartMs <= selectionEndMs,
+      startSeconds: roundSeconds(bucketStartMs / 1000),
+      unitCount: count === 0 ? 0 : Math.max(1, Math.round(count / maxCount * maxBarUnits))
+    };
+  });
+  return {
+    buckets,
+    durationSeconds,
+    endSeconds: range.endSeconds,
+    hasSelection: range.hasSelection,
+    selectionEndPercent,
+    selectionStartPercent,
+    startSeconds: range.startSeconds
+  };
+};
+
+const createDefaultState = () => {
+  return {
+    assetDir: '',
+    categoryFilters: createCategoryFilters(),
+    databaseName: 'lvce-chat-view-sessions',
+    dataBaseVersion: 2,
+    detailTabs: createDetailTabs(),
+    errorMessage: '',
+    events: [],
+    eventStoreName: 'chat-view-events',
+    filterValue: '',
+    height: 0,
+    initial: false,
+    platform: 0,
+    sashPointerActive: false,
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null,
+    sessionId: '',
+    sessionIdIndexName: 'sessionId',
+    showEventStreamFinishedEvents: false,
+    showInputEvents: false,
+    showResponsePartEvents: false,
+    tableColumns: [],
+    tableColumnWidths: defaultTableColumnWidths,
+    tableResizerDownId: 0,
+    tableWidth: defaultTableWidth,
+    timelineEndSeconds: '',
+    timelineEvents: [],
+    timelineInfo: emptyTimelineInfo,
+    timelineSelectionActive: false,
+    timelineSelectionAnchorSeconds: '',
+    timelineSelectionFocusSeconds: '',
+    timelineStartSeconds: '',
+    uid: 0,
+    uri: '',
+    useDevtoolsLayout: true,
+    visibleTableColumns: defaultVisibleTableColumns,
+    width: 0,
+    x: 0,
+    y: 0
+  };
+};
+
+const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '', databaseName = 'lvce-chat-view-sessions', dataBaseVersion = 2, eventStoreName = 'chat-view-events', sessionIdIndexName = 'sessionId', savedState = {}) => {
+  const defaultState = createDefaultState();
+  const state = {
+    ...restoreSavedState(defaultState, savedState),
+    assetDir,
+    databaseName,
+    dataBaseVersion,
+    eventStoreName,
+    height,
+    initial: true,
+    platform,
+    sessionId,
+    sessionIdIndexName,
+    tableColumns: [],
+    uid,
+    uri,
+    width,
+    x,
+    y
+  };
+  set(uid, state, state);
+};
+
+const RenderItems = 1;
+const RenderCss = 2;
+const RenderIncremental = 3;
+
+const diff = (oldState, newState) => {
+  if (oldState.categoryFilters !== newState.categoryFilters || oldState.detailTabs !== newState.detailTabs || oldState.errorMessage !== newState.errorMessage || 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.tableColumnWidths !== newState.tableColumnWidths || 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.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.width !== newState.width || oldState.uid !== newState.uid) {
+    return [RenderIncremental, RenderCss];
+  }
+  return [];
+};
+
+const diff2 = uid => {
+  const {
+    newState,
+    oldState
+  } = get(uid);
+  return diff(oldState, newState);
+};
+
+const getColumnVisibilityFlags = (state, column) => {
+  return isVisibleTableColumn(state.visibleTableColumns, column) ? Checked : Unchecked;
+};
+
+const MenuChatDebugTableHeader = 2189;
+const handleHeaderContextMenu = async (state, eventX, eventY) => {
+  await showContextMenu2(state.uid, MenuChatDebugTableHeader, eventX, eventY, {
+    menuId: MenuChatDebugTableHeader
+  });
+  return state;
+};
+
+const devtoolsRootGap = 4;
+const devtoolsTopHeight = 28;
+const devtoolsTimelineHeight = 88;
+const devtoolsTableHeaderHeight = 24;
+const getTableBodyY = (state, hasTimeline) => {
+  return state.y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
+};
+
+const filterEventsByTimelineRange = (events, startValue, endValue) => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return events;
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  const durationSeconds = roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
+  const range = getNormalizedRange(durationSeconds, startValue, endValue);
+  if (!range.hasSelection || range.startSeconds === null || range.endSeconds === null) {
+    return events;
+  }
+  const startTime = baseTime + range.startSeconds * 1000;
+  const endTime = baseTime + range.endSeconds * 1000;
+  return eventsWithTime.filter(item => item.time >= startTime && item.time <= endTime).map(item => item.event);
+};
+
+const hasMatchingToolName = (startedEvent, finishedEvent) => {
+  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
+    return startedEvent.toolName === finishedEvent.toolName;
+  }
+  return true;
+};
+
+const isMatchingToolExecutionPair = (startedEvent, finishedEvent) => {
+  return startedEvent.sessionId === finishedEvent.sessionId && hasMatchingToolName(startedEvent, finishedEvent);
+};
+
+const startedEventType = 'tool-execution-started';
+const finishedEventType = 'tool-execution-finished';
+const mergedEventType = 'tool-execution';
+
+const isToolExecutionFinishedEvent = event => {
+  return event.type === finishedEventType;
+};
+
+const isToolExecutionStartedEvent = event => {
+  return event.type === startedEventType;
+};
+
+const getTimestamp = value => {
+  return typeof value === 'string' || typeof value === 'number' ? value : undefined;
+};
+
+const getEndedTimestamp = event => {
+  return getTimestamp(event.ended) ?? getTimestamp(event.endTime) ?? getTimestamp(event.endTimestamp) ?? getTimestamp(event.timestamp);
+};
+
+const getStartedTimestamp = event => {
+  return getTimestamp(event.started) ?? getTimestamp(event.startTime) ?? getTimestamp(event.startTimestamp) ?? getTimestamp(event.timestamp);
+};
+
+const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
+  const ended = getEndedTimestamp(finishedEvent);
+  const {
+    eventId
+  } = startedEvent;
   const started = getStartedTimestamp(startedEvent);
   const mergedEvent = {
     ...startedEvent,
@@ -1847,7 +2351,7 @@ const isUiEvent = event => {
   return event.type.startsWith('handle-') && event.type !== 'handle-response';
 };
 
-const matchesEventCategoryFilter = (event, eventCategoryFilter) => {
+const matchesSingleEventCategoryFilter = (event, eventCategoryFilter) => {
   switch (eventCategoryFilter) {
     case Network:
       return isNetworkEvent(event);
@@ -1861,13 +2365,19 @@ const matchesEventCategoryFilter = (event, eventCategoryFilter) => {
       return true;
   }
 };
+const matchesEventCategoryFilter = (event, eventCategoryFilters) => {
+  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All)) {
+    return true;
+  }
+  return eventCategoryFilters.some(eventCategoryFilter => matchesSingleEventCategoryFilter(event, eventCategoryFilter));
+};
 
-const getFilteredEvents = (events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
+const getFilteredEvents = (events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
   const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
   const collapsedEvents = collapseToolExecutionEvents(visibleEvents);
   const parsedFilter = parseFilterValue(filterValue);
-  const activeEventCategoryFilter = parsedFilter.eventCategoryFilter === All ? eventCategoryFilter : parsedFilter.eventCategoryFilter;
-  const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilter));
+  const activeEventCategoryFilters = parsedFilter.eventCategoryFilter === All ? eventCategoryFilters : [parsedFilter.eventCategoryFilter];
+  const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilters));
   const {
     filterText
   } = parsedFilter;
@@ -1877,162 +2387,112 @@ const getFilteredEvents = (events, filterValue, eventCategoryFilter, showInputEv
   return filteredByCategory.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
 };
 
-const toTimeNumber = value => {
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return value;
-  }
-  if (typeof value === 'string') {
-    const timestamp = Date.parse(value);
-    if (!Number.isNaN(timestamp)) {
-      return timestamp;
-    }
-  }
-  return undefined;
-};
-
-const getEventTime = event => {
-  return toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreName, sessionId, _sessionIdIndexName, eventId, type) => {
+  return loadSelectedEvent$1(sessionId, eventId, type);
 };
 
-const maxBarUnits = 8;
-const parseTimelineSeconds = value => {
-  const trimmed = value.trim();
-  if (!trimmed) {
-    return undefined;
-  }
-  const parsed = Number.parseFloat(trimmed);
-  if (!Number.isFinite(parsed) || parsed < 0) {
-    return undefined;
+const getBlob = event => {
+  const {
+    blob
+  } = event;
+  if (typeof blob === 'object' && blob !== null && typeof blob.arrayBuffer === 'function' && typeof blob.slice === 'function' && typeof blob.type === 'string') {
+    return blob;
   }
-  return parsed;
+  return undefined;
 };
-const roundSeconds = value => {
-  return Number(value.toFixed(3));
+const getMimeType = event => {
+  return typeof event.mimeType === 'string' ? event.mimeType : undefined;
 };
-const getEventsWithTime = events => {
-  return events.flatMap(event => {
-    const time = getEventTime(event);
-    if (time === undefined) {
-      return [];
-    }
-    return [{
-      event,
-      time
-    }];
-  });
+const getAltText = event => {
+  return typeof event.name === 'string' && event.name ? event.name : 'image preview';
 };
-const getTimelineDurationSeconds = events => {
-  const eventsWithTime = getEventsWithTime(events);
-  if (eventsWithTime.length === 0) {
-    return 0;
-  }
-  const baseTime = eventsWithTime[0].time;
-  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
-  return roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
-};
-const getSelectionPercent = (value, durationSeconds) => {
-  if (durationSeconds <= 0) {
-    return 0;
-  }
-  return Number((value / durationSeconds * 100).toFixed(3));
+const isImageMimeType = mimeType => {
+  return typeof mimeType === 'string' && mimeType.startsWith('image/');
 };
-const getNormalizedRange = (durationSeconds, startValue, endValue) => {
-  const parsedStart = parseTimelineSeconds(startValue);
-  const parsedEnd = parseTimelineSeconds(endValue);
-  if (parsedStart === undefined && parsedEnd === undefined) {
-    return {
-      endSeconds: null,
-      hasSelection: false,
-      startSeconds: null
-    };
-  }
-  const rawStart = parsedStart ?? 0;
-  const rawEnd = parsedEnd ?? durationSeconds;
-  const normalizedStart = Math.max(0, Math.min(durationSeconds, Math.min(rawStart, rawEnd)));
-  const normalizedEnd = Math.max(0, Math.min(durationSeconds, Math.max(rawStart, rawEnd)));
-  return {
-    endSeconds: roundSeconds(normalizedEnd),
-    hasSelection: true,
-    startSeconds: roundSeconds(normalizedStart)
-  };
+const shouldValidateImage = mimeType => {
+  return mimeType !== 'image/svg+xml';
 };
-const filterEventsByTimelineRange = (events, startValue, endValue) => {
-  const eventsWithTime = getEventsWithTime(events);
-  if (eventsWithTime.length === 0) {
-    return events;
+const readBlobAsPreviewUrl = blob => {
+  if (typeof FileReaderSync === 'function') {
+    const reader = new FileReaderSync();
+    return reader.readAsDataURL(blob);
   }
-  const baseTime = eventsWithTime[0].time;
-  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
-  const durationSeconds = roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
-  const range = getNormalizedRange(durationSeconds, startValue, endValue);
-  if (!range.hasSelection || range.startSeconds === null || range.endSeconds === null) {
-    return events;
+  if (typeof URL.createObjectURL === 'function') {
+    return URL.createObjectURL(blob);
   }
-  const startTime = baseTime + range.startSeconds * 1000;
-  const endTime = baseTime + range.endSeconds * 1000;
-  return eventsWithTime.filter(item => item.time >= startTime && item.time <= endTime).map(item => item.event);
+  throw new Error('image preview reader is not available');
 };
-const getTimelineInfo = (events, startValue, endValue) => {
-  const eventsWithTime = getEventsWithTime(events);
-  if (eventsWithTime.length === 0) {
-    return {
-      buckets: [],
-      durationSeconds: 0,
-      endSeconds: null,
-      hasSelection: false,
-      selectionEndPercent: null,
-      selectionStartPercent: null,
-      startSeconds: null
-    };
-  }
-  const baseTime = eventsWithTime[0].time;
-  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
-  const durationMs = Math.max(0, lastTime - baseTime);
-  const durationSeconds = roundSeconds(durationMs / 1000);
-  const range = getNormalizedRange(durationSeconds, startValue, endValue);
-  const bucketCount = durationSeconds === 0 ? 1 : Math.max(12, Math.min(48, Math.ceil(durationSeconds)));
-  const bucketDurationMs = durationMs === 0 ? 1000 : durationMs / bucketCount;
-  const counts = Array.from({
-    length: bucketCount
-  }).fill(0);
-  for (const item of eventsWithTime) {
-    const offsetMs = item.time - baseTime;
-    const index = durationMs === 0 ? 0 : Math.min(bucketCount - 1, Math.floor(offsetMs / durationMs * bucketCount));
-    counts[index] += 1;
+const validateImage = async blob => {
+  if (typeof createImageBitmap !== 'function') {
+    return;
   }
-  const maxCount = Math.max(...counts);
-  const selectionStartPercent = range.hasSelection && range.startSeconds !== null ? getSelectionPercent(range.startSeconds, durationSeconds) : null;
-  const selectionEndPercent = range.hasSelection && range.endSeconds !== null ? getSelectionPercent(range.endSeconds, durationSeconds) : null;
-  const buckets = counts.map((count, index) => {
-    const bucketStartMs = index * bucketDurationMs;
-    const bucketEndMs = index === bucketCount - 1 ? durationMs : (index + 1) * bucketDurationMs;
-    const hasSelection = range.hasSelection && range.startSeconds !== null && range.endSeconds !== null;
-    const selectionStartMs = hasSelection ? range.startSeconds * 1000 : 0;
-    const selectionEndMs = hasSelection ? range.endSeconds * 1000 : 0;
+  const bitmap = await createImageBitmap(blob);
+  bitmap.close?.();
+};
+const getAttachmentImagePreview = async event => {
+  if (event.type !== 'chat-attachment-added') {
+    return undefined;
+  }
+  const blob = getBlob(event);
+  const mimeType = getMimeType(event);
+  if (!blob || !isImageMimeType(mimeType)) {
+    return undefined;
+  }
+  try {
+    if (shouldValidateImage(mimeType)) {
+      await validateImage(blob);
+    }
     return {
-      count,
-      endSeconds: roundSeconds(bucketEndMs / 1000),
-      isSelected: hasSelection && bucketEndMs >= selectionStartMs && bucketStartMs <= selectionEndMs,
-      startSeconds: roundSeconds(bucketStartMs / 1000),
-      unitCount: count === 0 ? 0 : Math.max(1, Math.round(count / maxCount * maxBarUnits))
+      alt: getAltText(event),
+      previewType: 'image',
+      src: readBlobAsPreviewUrl(blob)
     };
+  } catch {
+    return imageCouldNotBeLoaded();
+  }
+};
+
+const selectedEventPreviewSymbol = Symbol('selectedEventPreview');
+const getSelectedEventPreview = event => {
+  return event[selectedEventPreviewSymbol];
+};
+const setSelectedEventPreview = (event, preview) => {
+  if (preview === undefined) {
+    return event;
+  }
+  Object.defineProperty(event, selectedEventPreviewSymbol, {
+    configurable: true,
+    enumerable: false,
+    value: preview,
+    writable: true
   });
-  return {
-    buckets,
-    durationSeconds,
-    endSeconds: range.endSeconds,
-    hasSelection: range.hasSelection,
-    selectionEndPercent,
-    selectionStartPercent,
-    startSeconds: range.startSeconds
-  };
+  return event;
+};
+
+const withPreparedSelectedEventPreview = async event => {
+  const preview = await getAttachmentImagePreview(event);
+  return setSelectedEventPreview(event, preview);
 };
 
+const selectEventAtIndexDependencies = {
+  loadSelectedEvent: loadSelectedEvent
+};
 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 {
+    events,
+    filterValue,
+    showEventStreamFinishedEvents,
+    showInputEvents,
+    showResponsePartEvents,
+    timelineEndSeconds,
+    timelineStartSeconds
+  } = state;
+  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
+  const filteredEvents = getFilteredEvents(events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, timelineStartSeconds, timelineEndSeconds);
 };
-const selectEventAtIndex = async (state, selectedEventIndex, dependencies) => {
+const selectEventAtIndex = async (state, selectedEventIndex, dependencies = selectEventAtIndexDependencies) => {
+  const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
   const currentEvents = getCurrentEvents$3(state);
   const selectedEvent = currentEvents[selectedEventIndex];
   if (!selectedEvent) {
@@ -2052,22 +2512,17 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies) => {
     };
   }
   const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  const resolvedSelectedEvent = await withPreparedSelectedEventPreview(selectedEventDetails ?? selectedEvent);
   return {
     ...state,
-    selectedEvent: selectedEventDetails ?? selectedEvent,
+    detailTabs: createDetailTabs(selectedDetailTab, resolvedSelectedEvent),
+    selectedEvent: resolvedSelectedEvent,
     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;
@@ -2102,45 +2557,48 @@ const handleTableBodyContextMenu = async (state, eventX, eventY) => {
   return state;
 };
 
-const getColumnVisibilityFlags = (state, column) => {
-  return isVisibleTableColumn(state.visibleTableColumns, column) ? Checked : Unchecked;
+const getMenuEntriesTableHeader = state => {
+  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$1,
+    id: 'reset-columns',
+    label: resetColumns()
+  }];
+};
+const getMenuEntriesTableBody = props => {
+  return [{
+    args: [props.eventIndex],
+    command: 'ChatDebug.handleTableRowCopy',
+    flags: None$1,
+    id: 'copy',
+    label: copy()
+  }];
 };
 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()
-    }];
+    return getMenuEntriesTableHeader(state);
   }
   if (props.menuId === MenuChatDebugTableBody) {
-    return [{
-      args: [],
-      command: 'ChatDebug.copy',
-      flags: None,
-      id: 'copy',
-      label: copy()
-    }];
+    return getMenuEntriesTableBody(props);
   }
   return [];
 };
@@ -2149,50 +2607,9 @@ 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
-};
 const listChatViewEvents = async (sessionId, _databaseName, _dataBaseVersion, _eventStoreName, _sessionIdIndexName) => {
   try {
-    return await listChatViewEventsDependencies.listChatViewEventsFromWorker(sessionId);
+    return await listChatViewEvents$1(sessionId);
   } catch (error) {
     return {
       error,
@@ -2201,11 +2618,21 @@ const listChatViewEvents = async (sessionId, _databaseName, _dataBaseVersion, _e
   }
 };
 
-const loadSelectedEventDependencies = {
-  loadSelectedEventFromWorker: loadSelectedEvent$1
+const loadEventsDependencies = {
+  listChatViewEvents: listChatViewEvents,
+  loadSelectedEvent: loadSelectedEvent
+};
+
+const ParseChatDebugUriErrorCode = {
+  InvalidSessionId: 1,
+  InvalidUriEncoding: 2,
+  InvalidUriFormat: 3,
+  MissingUri: 4
 };
-const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreName, sessionId, _sessionIdIndexName, eventId, type) => {
-  return loadSelectedEventDependencies.loadSelectedEventFromWorker(sessionId, eventId, type);
+
+const ParseChatDebugUriResultType = {
+  Error: 2,
+  Success: 1
 };
 
 const chatDebugUriPattern = /^chat-debug:\/\/([^/?#]+)$/;
@@ -2215,7 +2642,7 @@ const parseChatDebugUri = uri => {
     return {
       code: ParseChatDebugUriErrorCode.MissingUri,
       message: missingUri(),
-      type: 'error'
+      type: ParseChatDebugUriResultType.Error
     };
   }
   const match = uri.match(chatDebugUriPattern);
@@ -2223,7 +2650,7 @@ const parseChatDebugUri = uri => {
     return {
       code: ParseChatDebugUriErrorCode.InvalidUriFormat,
       message: invalidUriFormat(),
-      type: 'error'
+      type: ParseChatDebugUriResultType.Error
     };
   }
   const encodedSessionId = match[1];
@@ -2234,30 +2661,120 @@ const parseChatDebugUri = uri => {
     return {
       code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
       message: invalidUriEncoding(),
-      type: 'error'
+      type: ParseChatDebugUriResultType.Error
     };
   }
   if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
     return {
       code: ParseChatDebugUriErrorCode.InvalidSessionId,
       message: invalidSessionId(),
-      type: 'error'
+      type: ParseChatDebugUriResultType.Error
     };
   }
   return {
     sessionId,
-    type: 'success'
+    type: ParseChatDebugUriResultType.Success
   };
 };
 
-const loadEventsDependencies = {
-  listChatViewEvents: listChatViewEvents,
-  loadSelectedEvent: loadSelectedEvent
+const getSessionIdFromUri = state => {
+  const parsed = parseChatDebugUri(state.uri);
+  if (parsed.type === ParseChatDebugUriResultType.Error) {
+    return undefined;
+  }
+  return parsed.sessionId;
+};
+
+const getInvalidUriMessage = (uri, code) => {
+  if (code === ParseChatDebugUriErrorCode.MissingUri) {
+    return unableToLoadDebugSessionMissingUri();
+  }
+  return unableToLoadDebugSessionInvalidUri(uri);
+};
+
+const getEffectiveTimelineRange = (timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds) => {
+  if (!timelineSelectionActive) {
+    return {
+      endSeconds: timelineEndSeconds,
+      startSeconds: timelineStartSeconds
+    };
+  }
+  return {
+    endSeconds: timelineSelectionFocusSeconds,
+    startSeconds: timelineSelectionAnchorSeconds
+  };
+};
+
+const getTimelineEvents = state => {
+  const {
+    events,
+    filterValue,
+    showEventStreamFinishedEvents,
+    showInputEvents,
+    showResponsePartEvents
+  } = state;
+  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
+  return getFilteredEvents(events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+};
+
+const getStateWithTimelineInfo = state => {
+  const timelineEvents = getTimelineEvents(state);
+  const effectiveRange = getEffectiveTimelineRange(state.timelineStartSeconds, state.timelineEndSeconds, state.timelineSelectionActive, state.timelineSelectionAnchorSeconds, state.timelineSelectionFocusSeconds);
+  const timelineInfo = getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
+  return {
+    ...state,
+    timelineEvents,
+    timelineInfo
+  };
+};
+
+const getStateWithInvalidUri = state => {
+  const parsed = parseChatDebugUri(state.uri);
+  if (parsed.type !== ParseChatDebugUriResultType.Error) {
+    return state;
+  }
+  return getStateWithTimelineInfo({
+    ...state,
+    errorMessage: getInvalidUriMessage(state.uri, parsed.code),
+    events: [],
+    initial: false,
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null,
+    sessionId: ''
+  });
+};
+
+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 getSessionNotFoundMessage = sessionId => {
+  return noChatSessionFound(sessionId);
 };
+
 const getCurrentEvents$2 = state => {
-  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, eventCategoryFilters, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
   return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
 };
+
 const restoreSelectedEvent = async state => {
   if (state.selectedEventId === null) {
     return {
@@ -2286,36 +2803,15 @@ const restoreSelectedEvent = async state => {
     };
   }
   const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  const resolvedSelectedEvent = selectedEventDetails ? await withPreparedSelectedEventPreview(selectedEventDetails) : null;
   return {
     ...state,
-    selectedEvent: selectedEventDetails,
+    selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
   };
 };
-const getStateWithInvalidUri = state => {
-  const parsed = parseChatDebugUri(state.uri);
-  if (parsed.type !== 'error') {
-    return state;
-  }
-  return {
-    ...state,
-    errorMessage: getInvalidUriMessage(state.uri, parsed.code),
-    events: [],
-    initial: false,
-    selectedEvent: null,
-    selectedEventId: null,
-    selectedEventIndex: null,
-    sessionId: ''
-  };
-};
-const getSessionIdFromUri = state => {
-  const parsed = parseChatDebugUri(state.uri);
-  if (parsed.type === 'error') {
-    return undefined;
-  }
-  return parsed.sessionId;
-};
+
 const loadEventsForSessionId = async (state, sessionId) => {
   const {
     databaseName,
@@ -2325,7 +2821,7 @@ const loadEventsForSessionId = async (state, sessionId) => {
   } = state;
   const result = await loadEventsDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
   if (result.type === 'error') {
-    return {
+    return getStateWithTimelineInfo({
       ...state,
       errorMessage: getFailedToLoadMessage(sessionId, result.error),
       events: [],
@@ -2334,13 +2830,13 @@ const loadEventsForSessionId = async (state, sessionId) => {
       selectedEventId: null,
       selectedEventIndex: null,
       sessionId
-    };
+    });
   }
   const {
     events
   } = result;
   if (events.length === 0) {
-    return {
+    return getStateWithTimelineInfo({
       ...state,
       errorMessage: getSessionNotFoundMessage(sessionId),
       events: [],
@@ -2349,17 +2845,18 @@ const loadEventsForSessionId = async (state, sessionId) => {
       selectedEventId: null,
       selectedEventIndex: null,
       sessionId
-    };
+    });
   }
-  const nextState = {
+  const nextState = getStateWithTimelineInfo({
     ...state,
     errorMessage: '',
     events,
     initial: false,
     sessionId
-  };
+  });
   return restoreSelectedEvent(nextState);
 };
+
 const loadEventsFromUri = async state => {
   const sessionId = getSessionIdFromUri(state);
   if (!sessionId) {
@@ -2367,6 +2864,7 @@ const loadEventsFromUri = async state => {
   }
   return loadEventsForSessionId(state, sessionId);
 };
+
 const refreshEvents = async state => {
   const sessionId = state.sessionId || getSessionIdFromUri(state);
   if (!sessionId) {
@@ -2403,23 +2901,30 @@ const handleDetailsTopContextMenu = state => {
   return state;
 };
 
-const handleDetailTab = (state, value) => {
+const selectDetailTab = (state, value) => {
   if (!isDetailTab(value)) {
     return state;
   }
+  const detailTabs = selectDetailTab$1(state.detailTabs, value);
+  if (detailTabs === state.detailTabs) {
+    return state;
+  }
   return {
     ...state,
-    selectedDetailTab: value
+    detailTabs
   };
 };
 
 const getCurrentEvents$1 = state => {
-  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, eventCategoryFilters, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
   return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
 };
+
 const getEventIndexByStableId$1 = (events, event) => {
   return events.findIndex(candidate => candidate.eventId === event.eventId);
 };
+
 const getSelectedEventIndex$1 = state => {
   const {
     selectedEventIndex
@@ -2438,6 +2943,7 @@ const getSelectedEventIndex$1 = state => {
   }
   return newIndex;
 };
+
 const getPreservedSelectedEventIndex$1 = (oldState, newState) => {
   const {
     selectedEventIndex
@@ -2457,30 +2963,30 @@ const getPreservedSelectedEventIndex$1 = (oldState, newState) => {
   }
   return newIndex;
 };
+
 const withPreservedSelection$1 = (state, nextState) => {
-  const selectedEventIndex = getPreservedSelectedEventIndex$1(state, nextState);
+  const nextStateWithTimelineInfo = getStateWithTimelineInfo(nextState);
+  const selectedEventIndex = getPreservedSelectedEventIndex$1(state, nextStateWithTimelineInfo);
   return {
-    ...nextState,
+    ...nextStateWithTimelineInfo,
     selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
     selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
     selectedEventIndex
   };
 };
 
-const handleEventCategoryFilter = (state, value) => {
+const handleEventCategoryFilter = (state, value, ctrlKey = false, metaKey = false) => {
+  const categoryFilters = selectCategoryFilter(state.categoryFilters, value || All, ctrlKey || metaKey);
+  if (categoryFilters === state.categoryFilters) {
+    return state;
+  }
   const nextState = {
     ...state,
-    eventCategoryFilter: value || All
+    categoryFilters
   };
   return withPreservedSelection$1(state, nextState);
 };
 
-const handleEventRowClickDependencies = {
-  loadSelectedEvent: loadSelectedEvent
-};
-const isPrimaryButton = button => {
-  return button === 0;
-};
 const parseSelectedEventIndex$1 = value => {
   const parsed = Number.parseInt(value, 10);
   if (Number.isNaN(parsed) || parsed < 0) {
@@ -2488,6 +2994,13 @@ const parseSelectedEventIndex$1 = value => {
   }
   return parsed;
 };
+
+const handleEventRowClickDependencies = {
+  loadSelectedEvent: loadSelectedEvent
+};
+const isPrimaryButton = button => {
+  return button === 0;
+};
 const handleEventRowClick = async (state, value, button = 0) => {
   if (!isPrimaryButton(button)) {
     return state;
@@ -2503,22 +3016,9 @@ const getBoolean = value => {
   return value === true || value === 'true' || value === 'on' || value === '1';
 };
 
-const Filter = 'filter';
-const EventCategoryFilter = 'eventCategoryFilter';
-const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
-const ShowInputEvents = 'showInputEvents';
-const ShowResponsePartEvents = 'showResponsePartEvents';
-const UseDevtoolsLayout = 'useDevtoolsLayout';
-const SelectedEventIndex = 'selectedEventIndex';
-const CloseDetails = 'closeDetails';
-const DetailTab = 'detailTab';
-const TimelineStartSeconds = 'timelineStartSeconds';
-const TimelineEndSeconds = 'timelineEndSeconds';
-const TimelineRangePreset = 'timelineRangePreset';
-const Refresh = 'refresh';
-
 const getCurrentEvents = state => {
-  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, eventCategoryFilters, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
   return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
 };
 const parseTimelineRangePreset$1 = value => {
@@ -2582,9 +3082,10 @@ const parseSelectedEventIndex = value => {
   return parsed;
 };
 const withPreservedSelection = (state, nextState) => {
-  const selectedEventIndex = getPreservedSelectedEventIndex(state, nextState);
+  const nextStateWithTimelineInfo = getStateWithTimelineInfo(nextState);
+  const selectedEventIndex = getPreservedSelectedEventIndex(state, nextStateWithTimelineInfo);
   return {
-    ...nextState,
+    ...nextStateWithTimelineInfo,
     selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
     selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
     selectedEventIndex
@@ -2599,9 +3100,13 @@ const handleInput = (state, name, value, checked) => {
     return withPreservedSelection(state, nextState);
   }
   if (name === EventCategoryFilter) {
+    const categoryFilters = selectCategoryFilter(state.categoryFilters, value || All);
+    if (categoryFilters === state.categoryFilters) {
+      return state;
+    }
     const nextState = {
       ...state,
-      eventCategoryFilter: value || All
+      categoryFilters
     };
     return withPreservedSelection(state, nextState);
   }
@@ -2679,19 +3184,32 @@ const handleInput = (state, name, value, checked) => {
     if (!isDetailTab(value)) {
       return state;
     }
+    const detailTabs = selectDetailTab$1(state.detailTabs, value);
+    if (detailTabs === state.detailTabs) {
+      return state;
+    }
     return {
       ...state,
-      selectedDetailTab: value
+      detailTabs
     };
   }
   return state;
 };
 
 const handleSashPointerDown = (state, eventX, eventY) => {
-  return state;
+  if (state.sashPointerActive) {
+    return state;
+  }
+  return {
+    ...state,
+    sashPointerActive: true
+  };
 };
 
 const handleSashPointerMove = (state, eventX, eventY) => {
+  if (!state.sashPointerActive) {
+    return state;
+  }
   return {
     ...state,
     tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
@@ -2699,6 +3217,60 @@ const handleSashPointerMove = (state, eventX, eventY) => {
 };
 
 const handleSashPointerUp = (state, eventX, eventY) => {
+  if (!state.sashPointerActive) {
+    return state;
+  }
+  return {
+    ...state,
+    sashPointerActive: false
+  };
+};
+
+const getTableResizerId = name => {
+  switch (name) {
+    case 'ResizerOne':
+      return 1;
+    case 'ResizerTwo':
+      return 2;
+    default:
+      return 0;
+  }
+};
+const handleTableResizerPointerDown = (state, name, clientX) => {
+  return {
+    ...state,
+    tableResizerDownId: getTableResizerId(name)
+  };
+};
+
+const handleTableResizerPointerMove = (state, clientX) => {
+  if (!state.tableResizerDownId) {
+    return state;
+  }
+  return {
+    ...state,
+    tableColumnWidths: getResizedTableColumnWidths(state.width, state.tableWidth, state.visibleTableColumns, state.tableColumnWidths, state.x, clientX, state.tableResizerDownId)
+  };
+};
+
+const handleTableResizerPointerUp = state => {
+  if (!state.tableResizerDownId) {
+    return state;
+  }
+  return {
+    ...state,
+    tableResizerDownId: 0
+  };
+};
+
+const handleTableRowCopy = async (state, eventIndex) => {
+  const currentEvents = getCurrentEvents$3(state);
+  const event = currentEvents[eventIndex];
+  if (!event) {
+    return state;
+  }
+  const text = JSON.stringify(event, null, 2);
+  await writeClipBoardText(text);
   return state;
 };
 
@@ -2707,12 +3279,12 @@ const handleTimelineContextMenu = state => {
 };
 
 const clearTimelineSelectionState = state => {
-  return {
+  return getStateWithTimelineInfo({
     ...state,
     timelineSelectionActive: false,
     timelineSelectionAnchorSeconds: '',
     timelineSelectionFocusSeconds: ''
-  };
+  });
 };
 
 const parseTimelineRangePreset = value => {
@@ -2755,16 +3327,10 @@ const handleTimelineDoubleClick = state => {
   return clearTimelineSelectionState(nextState);
 };
 
-const getTimelineEvents = state => {
-  const {
-    eventCategoryFilter,
-    events,
-    filterValue,
-    showEventStreamFinishedEvents,
-    showInputEvents,
-    showResponsePartEvents
-  } = state;
-  return getFilteredEvents(events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+const trailingZeroFractionRegex = /\.0+$/;
+const trailingFractionZeroRegex = /(\.\d*?)0+$/;
+const formatTimelinePresetValue = value => {
+  return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
 };
 
 const getTimelineLeft = state => {
@@ -2774,10 +3340,14 @@ const getTimelineWidth = state => {
   return Math.max(0, getMainWidth(state.width) - timelineHorizontalPadding * 2);
 };
 
-const trailingZeroFractionRegex = /\.0+$/;
-const trailingFractionZeroRegex = /(\.\d*?)0+$/;
-const formatTimelinePresetValue = value => {
-  return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
+const getTimelineDurationSeconds = events => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return 0;
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  return roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
 };
 
 const getTimelineSecondsFromClientX = (events, eventX, timelineLeft, timelineWidth) => {
@@ -2790,50 +3360,76 @@ const getTimelineSecondsFromClientX = (events, eventX, timelineLeft, timelineWid
   return formatTimelinePresetValue(durationSeconds * ratio);
 };
 
-const handleTimelinePointerDown = (state, eventX) => {
-  const timelineEvents = getTimelineEvents(state);
+const Start = 'TimelineSelectionStartHandle';
+const End = 'TimelineSelectionEndHandle';
+
+const getResizeState = (state, name) => {
+  if (state.timelineInfo.startSeconds === null || state.timelineInfo.endSeconds === null) {
+    return undefined;
+  }
+  if (name === Start) {
+    return getStateWithTimelineInfo({
+      ...state,
+      timelineSelectionActive: true,
+      timelineSelectionAnchorSeconds: formatTimelinePresetValue(state.timelineInfo.endSeconds),
+      timelineSelectionFocusSeconds: formatTimelinePresetValue(state.timelineInfo.startSeconds)
+    });
+  }
+  if (name === End) {
+    return getStateWithTimelineInfo({
+      ...state,
+      timelineSelectionActive: true,
+      timelineSelectionAnchorSeconds: formatTimelinePresetValue(state.timelineInfo.startSeconds),
+      timelineSelectionFocusSeconds: formatTimelinePresetValue(state.timelineInfo.endSeconds)
+    });
+  }
+  return undefined;
+};
+const handleTimelinePointerDown = (state, name, eventX) => {
+  const resizeState = getResizeState(state, name);
+  if (resizeState) {
+    return resizeState;
+  }
   const timelineLeft = getTimelineLeft(state);
   const timelineWidth = getTimelineWidth(state);
   const clientX = state.x + eventX;
-  const seconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
   if (seconds === undefined) {
     return state;
   }
-  return {
+  return getStateWithTimelineInfo({
     ...state,
     timelineSelectionActive: true,
     timelineSelectionAnchorSeconds: seconds,
     timelineSelectionFocusSeconds: seconds
-  };
+  });
 };
 
 const handleTimelinePointerMove = (state, eventX) => {
   if (!state.timelineSelectionActive) {
     return state;
   }
-  const timelineEvents = getTimelineEvents(state);
   const timelineLeft = getTimelineLeft(state);
   const timelineWidth = getTimelineWidth(state);
   const clientX = state.x + eventX;
-  const seconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  const seconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
   if (seconds === undefined) {
     return state;
   }
-  return {
+  return getStateWithTimelineInfo({
     ...state,
     timelineSelectionFocusSeconds: seconds
-  };
+  });
 };
 
 const handleTimelinePointerUp = (state, eventX) => {
   if (!state.timelineSelectionActive) {
     return state;
   }
-  const timelineEvents = getTimelineEvents(state);
   const timelineLeft = getTimelineLeft(state);
   const timelineWidth = getTimelineWidth(state);
   const clientX = state.x + eventX;
-  const focusSeconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  const focusSeconds = getTimelineSecondsFromClientX(state.timelineEvents, clientX, timelineLeft, timelineWidth);
   if (focusSeconds === undefined) {
     return clearTimelineSelectionState(state);
   }
@@ -2845,7 +3441,7 @@ const handleTimelinePointerUp = (state, eventX) => {
   return clearTimelineSelectionState(nextState);
 };
 
-const handleUseDevtoolsLayout = (state, checked) => {
+const setUseDevtoolsLayout = (state, checked) => {
   const useDevtoolsLayout = getBoolean(checked);
   const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex$1(state) : null;
   return {
@@ -2880,42 +3476,164 @@ const handleShowResponsePartEvents = (state, checked) => {
 };
 
 const loadContent = async (state, savedState) => {
-  return loadEventsFromUri(restoreSavedState(state, savedState));
+  const nextState = await loadEventsFromUri(restoreSavedState(state, savedState));
+  return {
+    ...nextState,
+    categoryFilters: createCategoryFilters(getSelectedEventCategoryFilters(nextState.categoryFilters)),
+    detailTabs: createDetailTabs(getSelectedDetailTab(nextState.detailTabs), nextState.selectedEvent),
+    tableColumns: createTableColumns()
+  };
 };
 
 const getCss = state => {
-  const tableWidth = clampTableWidth(state.width, state.tableWidth);
-  const detailsWidth = getDetailsWidth(state.width, state.tableWidth);
+  const hasSelectedEvent = !!state.selectedEvent;
+  const tableWidth = hasSelectedEvent ? clampTableWidth(state.width, state.tableWidth) : getMainWidth(state.width);
+  const detailsWidth = hasSelectedEvent ? getDetailsWidth(state.width, state.tableWidth) : 0;
+  const tableColumnLayout = getTableColumnLayout(tableWidth, state.visibleTableColumns, state.tableColumnWidths);
+  const resizerOneLeft = tableColumnLayout.resizerLefts[0] || 0;
+  const resizerTwoLeft = tableColumnLayout.resizerLefts[1] || 0;
   return `
 .ChatDebugView {
   --ChatDebugViewDetailsWidth: ${detailsWidth}px;
+  --ChatDebugViewDurationColumnWidth: ${state.tableColumnWidths.duration}px;
+  --ChatDebugViewResizerOneLeft: ${resizerOneLeft}px;
+  --ChatDebugViewResizerTwoLeft: ${resizerTwoLeft}px;
   --ChatDebugViewSashWidth: ${sashWidth}px;
   --ChatDebugViewTableWidth: ${tableWidth}px;
+  --ChatDebugViewTypeColumnWidth: ${state.tableColumnWidths.type}px;
   padding: ${viewPadding}px;
 }
 
+.ChatDebugViewTop {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ChatDebugViewFilterInput {
+  flex: 1;
+  min-width: 0;
+}
 
-.ChatDebugViewDetails  {
-  contain: strict;
+.ChatDebugViewFilterInput--devtools {
+  flex: 1 1 220px;
+  min-width: 180px;
 }
 
-.ChatDebugViewDetailsTop {
-  height: 33px;
-  contain: strict;
+.ChatDebugViewTableWrapper {
+  position: relative;
+  width: min(100%, var(--ChatDebugViewTableWidth));
+  max-width: 100%;
+  flex:1;
+  display:flex
+}
+
+.ChatDebugViewTable {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  flex: 1;
 }
 
-.ChatDebugViewDetailsBottom {
+.ChatDebugViewHeaderCell,
+.ChatDebugViewCell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ChatDebugViewHeaderCellType.ChatDebugViewColumnFixed,
+.ChatDebugViewCellType.ChatDebugViewColumnFixed {
+  width: var(--ChatDebugViewTypeColumnWidth);
+  max-width: var(--ChatDebugViewTypeColumnWidth);
+}
+
+.ChatDebugViewHeaderCellDuration.ChatDebugViewColumnFixed,
+.ChatDebugViewCellDuration.ChatDebugViewColumnFixed {
+  width: var(--ChatDebugViewDurationColumnWidth);
+  max-width: var(--ChatDebugViewDurationColumnWidth);
+}
+
+.ChatDebugViewResizers {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.ChatDebugViewResizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 12px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  pointer-events: auto;
+  cursor: col-resize;
+}
+
+.ChatDebugViewResizerOne {
+  left: var(--ChatDebugViewResizerOneLeft);
+  transform: translateX(-50%);
+}
+
+.ChatDebugViewResizerTwo {
+  left: var(--ChatDebugViewResizerTwoLeft);
+  transform: translateX(-50%);
+}
+
+.ChatDebugViewResizerInner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+  background: var(--vscode-widget-border, rgba(255, 255, 255, 0.18));
+}
+
+
+.ChatDebugViewDetails  {
+  margin-left: auto;
+  min-height: 26px;
+}
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, inherit);
+}
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
   display: flex;
   contain: strict;
-  flex:1
+  flex:1;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
 
 }
 .ChatDebugViewEvent {
-  contain: content
+  border-color: var(--vscode-widget-border, rgba(255, 255, 255, 0.14));
+  background: var(--vscode-toolbar-hoverBackground, rgba(255, 255, 255, 0.06));
+  color: var(--vscode-foreground, inherit);
+
+.ChatDebugViewEventLineContent {
+  flex: 1;
+  background: var(--vscode-toolbar-activeBackground, rgba(255, 255, 255, 0.1));
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  word-break: break-word;
+  outline: 1px solid var(--vscode-focusBorder, rgba(255, 255, 255, 0.4));
+
+.ChatDebugViewEventLineNumber {
+  flex: none;
 }
 
 .row {
   flex-shrink: 0;
+  min-width: 0;
 }
 
 .ChatDebugViewRefreshButton {
@@ -2923,6 +3641,7 @@ const getCss = state => {
   align-items: center;
   justify-content: center;
   flex: none;
+  margin-left: auto;
   min-height: 28px;
   padding: 0 10px;
   border: 1px solid rgba(255, 255, 255, 0.16);
@@ -2956,6 +3675,183 @@ const getCss = state => {
   background: var(--ListHoverBackground);
   color: var(--ListHoverForeground);
 }
+
+.ChatDebugViewImagePreview {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 100%;
+}
+
+.ChatDebugViewImagePreviewImage {
+  display: block;
+  max-width: 100%;
+  max-height: 320px;
+  border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.14));
+  border-radius: 6px;
+  object-fit: contain;
+}
+
+.ChatDebugViewImagePreviewLabel {
+  color: var(--vscode-descriptionForeground, inherit);
+}
+
+.ChatDebugViewTimeline {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ChatDebugViewTimelineTop {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.ChatDebugViewTimelineSummary {
+  margin: 0;
+  color: var(--vscode-descriptionForeground, inherit);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.ChatDebugViewTimelineInteractive {
+  position: relative;
+  height: 54px;
+  overflow: hidden;
+  border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.14));
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
+  contain: strict;
+  user-select: none;
+}
+
+.ChatDebugViewTimelineBuckets {
+  position: absolute;
+  inset: 18px 8px 8px;
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.ChatDebugViewTimelineBucket {
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+  height: 100%;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.ChatDebugViewTimelineBucketBar {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 2px;
+  height: 100%;
+}
+
+.ChatDebugViewTimelineBucketUnit {
+  flex: none;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--vscode-charts-blue, rgba(91, 151, 255, 0.9));
+}
+
+.ChatDebugViewTimelineBucketUnitEmpty {
+  opacity: 0.18;
+}
+
+.ChatDebugViewTimelineBucketSelected .ChatDebugViewTimelineBucketUnit,
+.ChatDebugViewTimelineBucketBarSelected .ChatDebugViewTimelineBucketUnit {
+  background: var(--vscode-charts-orange, rgba(255, 174, 0, 0.95));
+}
+
+.ChatDebugViewTimelineSelectionOverlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.ChatDebugViewTimelineSelectionRange {
+  position: absolute;
+  top: 18px;
+  bottom: 8px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--vscode-charts-orange, rgba(255, 174, 0, 0.95)) 18%, transparent);
+  outline: 1px solid color-mix(in srgb, var(--vscode-charts-orange, rgba(255, 174, 0, 0.95)) 55%, transparent);
+}
+
+.ChatDebugViewTimelineSelectionMarker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 14px;
+  margin-left: -7px;
+  padding: 0;
+  border: 0;
+  background: linear-gradient(
+    90deg,
+    transparent calc(50% - 1px),
+    var(--vscode-charts-orange, rgba(255, 174, 0, 0.95)) calc(50% - 1px),
+    var(--vscode-charts-orange, rgba(255, 174, 0, 0.95)) calc(50% + 1px),
+    transparent calc(50% + 1px)
+  );
+}
+
+.ChatDebugViewTimelineSelectionHandle {
+  pointer-events: auto;
+  cursor: ew-resize;
+}
+
+.ChatDebugViewTimelineSelectionHandle::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 14px;
+  height: 16px;
+  transform: translateX(-50%);
+  border: 1px solid var(--vscode-widget-border, rgba(255, 255, 255, 0.22));
+  border-radius: 4px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.ChatDebugViewTimelineSelectionHandle::after {
+  content: '';
+  position: absolute;
+  top: 5px;
+  left: 50%;
+  width: 7px;
+  height: 6px;
+  transform: translateX(-50%);
+  background: linear-gradient(
+    90deg,
+    transparent 0,
+    transparent 1px,
+    var(--vscode-foreground, rgba(255, 255, 255, 0.88)) 1px,
+    var(--vscode-foreground, rgba(255, 255, 255, 0.88)) 2px,
+    transparent 2px,
+    transparent 4px,
+    var(--vscode-foreground, rgba(255, 255, 255, 0.88)) 4px,
+    var(--vscode-foreground, rgba(255, 255, 255, 0.88)) 5px,
+    transparent 5px,
+    transparent 100%
+  );
+  opacity: 0.8;
+}
+
+.ChatDebugViewTimelineSelectionHandle:hover::before {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));
+}
+
+.ChatDebugViewTimelineSelectionHandle:focus-visible {
+  outline: 2px solid var(--vscode-focusBorder, rgba(255, 255, 255, 0.45));
+  outline-offset: 1px;
+}
 `;
 };
 
@@ -2964,6 +3860,10 @@ const renderCss = (oldState, newState) => {
   return [SetCss, newState.uid, css];
 };
 
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
 const text = data => {
   return {
     childCount: 0,
@@ -3283,8 +4183,13 @@ const ChatDebugViewEventsFullWidth = 'ChatDebugViewEventsFullWidth';
 const ChatDebugViewFilterInput = 'ChatDebugViewFilterInput';
 const ChatDebugViewFilterInputDevtools = 'ChatDebugViewFilterInput--devtools';
 const ChatDebugViewHeaderCell = 'ChatDebugViewHeaderCell';
+const ChatDebugViewHeaderCellDuration = 'ChatDebugViewHeaderCellDuration';
+const ChatDebugViewHeaderCellStatus = 'ChatDebugViewHeaderCellStatus';
+const ChatDebugViewHeaderCellType = 'ChatDebugViewHeaderCellType';
+const ChatDebugViewImagePreview = 'ChatDebugViewImagePreview';
+const ChatDebugViewImagePreviewImage = 'ChatDebugViewImagePreviewImage';
+const ChatDebugViewImagePreviewLabel = 'ChatDebugViewImagePreviewLabel';
 const ChatDebugViewRefreshButton = 'ChatDebugViewRefreshButton';
-const ChatDebugViewQuickFilterInput = 'ChatDebugViewQuickFilterInput';
 const ChatDebugViewQuickFilterPill = 'ChatDebugViewQuickFilterPill';
 const ChatDebugViewQuickFilterPillSelected = 'ChatDebugViewQuickFilterPillSelected';
 const ChatDebugViewQuickFilters = 'ChatDebugViewQuickFilters';
@@ -3294,6 +4199,12 @@ const ChatDebugViewTable = 'ChatDebugViewTable';
 const ChatDebugViewTableBody = 'ChatDebugViewTableBody';
 const ChatDebugViewTableHeader = 'ChatDebugViewTableHeader';
 const ChatDebugViewTableHeaderRow = 'ChatDebugViewTableHeaderRow';
+const ChatDebugViewTableWrapper = 'ChatDebugViewTableWrapper';
+const ChatDebugViewResizer = 'ChatDebugViewResizer';
+const ChatDebugViewResizerInner = 'ChatDebugViewResizerInner';
+const ChatDebugViewResizerOne = 'ChatDebugViewResizerOne';
+const ChatDebugViewResizerTwo = 'ChatDebugViewResizerTwo';
+const ChatDebugViewResizers = 'ChatDebugViewResizers';
 const TableRowEven = 'TableRowEven';
 const ChatDebugViewTimeline = 'ChatDebugViewTimeline';
 const ChatDebugViewTimelineBucket = 'ChatDebugViewTimelineBucket';
@@ -3304,6 +4215,7 @@ const ChatDebugViewTimelineBucketUnit = 'ChatDebugViewTimelineBucketUnit';
 const ChatDebugViewTimelineBucketUnitEmpty = 'ChatDebugViewTimelineBucketUnitEmpty';
 const ChatDebugViewTimelineBuckets = 'ChatDebugViewTimelineBuckets';
 const ChatDebugViewTimelineInteractive = 'ChatDebugViewTimelineInteractive';
+const ChatDebugViewTimelineSelectionHandle = 'ChatDebugViewTimelineSelectionHandle';
 const ChatDebugViewTimelineSelectionMarker = 'ChatDebugViewTimelineSelectionMarker';
 const ChatDebugViewTimelineSelectionMarkerEnd = 'ChatDebugViewTimelineSelectionMarkerEnd';
 const ChatDebugViewTimelineSelectionMarkerStart = 'ChatDebugViewTimelineSelectionMarkerStart';
@@ -3318,6 +4230,7 @@ const ChatDebugViewTimingValue = 'ChatDebugViewTimingValue';
 const ChatDebugViewTop = 'ChatDebugViewTop';
 const ChatDebugViewTopDevtools = 'ChatDebugViewTop--devtools';
 const ChatDebugViewCell = 'ChatDebugViewCell';
+const ChatDebugViewColumnFixed = 'ChatDebugViewColumnFixed';
 const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
 const ChatDebugViewCellStatus = 'ChatDebugViewCellStatus';
 const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
@@ -3329,66 +4242,69 @@ const TokenKey = 'Token TokenKey';
 const TokenNumeric = 'Token TokenNumeric';
 const TokenString = 'Token TokenString';
 const TokenText = 'Token TokenText';
-const joinClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
 
+const debugErrorRootNode = {
+  childCount: 1,
+  className: ChatDebugView,
+  type: Div
+};
+const debugErrorMessageNode = {
+  childCount: 1,
+  className: ChatDebugViewError,
+  type: Div
+};
 const getDebugErrorDom = errorMessage => {
-  return [{
-    childCount: 1,
-    className: ChatDebugView,
-    type: Div
-  }, {
-    childCount: 1,
-    className: ChatDebugViewError,
-    type: Div
-  }, text(errorMessage)];
+  return [debugErrorRootNode, debugErrorMessageNode, text(errorMessage)];
 };
 
 const HandleEventCategoryFilter = 4;
 const HandleFilterInput = 5;
-const HandleDetailTab = 6;
+const SelectDetailTab = 6;
 const HandleEventRowClick = 7;
 const HandleHeaderContextMenu = 8;
 const HandleSashPointerDown = 9;
 const HandleSashPointerMove = 10;
 const HandleSashPointerUp = 11;
-const HandleTableBodyContextMenu = 12;
-const HandleDetailsContextMenu = 13;
-const HandleTimelinePointerDown = 14;
-const HandleTimelinePointerMove = 15;
-const HandleTimelinePointerUp = 16;
-const HandleTimelineDoubleClick = 17;
-const HandleTableKeyDown = 18;
-const HandleTimelineRangePreset = 19;
-const HandleCloseDetails = 20;
-const HandleClickRefresh = 21;
-const HandleDetailsTopContextMenu = 22;
-const HandleTimelineContextMenu = 23;
-
+const HandleTableResizerPointerDown = 12;
+const HandleTableResizerPointerMove = 13;
+const HandleTableResizerPointerUp = 14;
+const HandleTableBodyContextMenu = 15;
+const HandleDetailsContextMenu = 16;
+const HandleTimelinePointerDown = 17;
+const HandleTimelinePointerMove = 18;
+const HandleTimelinePointerUp = 19;
+const HandleTimelineDoubleClick = 20;
+const HandleTimelineRangePreset = 22;
+const HandleCloseDetails = 23;
+const HandleClickRefresh = 24;
+const HandleDetailsTopContextMenu = 25;
+const HandleTimelineContextMenu = 26;
+
+const refreshButtonDom = [{
+  'aria-label': refreshEvents$1(),
+  childCount: 1,
+  className: ChatDebugViewRefreshButton,
+  name: Refresh,
+  onClick: HandleClickRefresh,
+  type: Button$1,
+  value: Refresh
+}, text(refresh$1())];
 const getRefreshButtonDom = () => {
-  return [{
-    'aria-label': refreshEvents$1(),
-    childCount: 1,
-    className: ChatDebugViewRefreshButton,
-    name: Refresh,
-    onClick: HandleClickRefresh,
-    type: Button$1,
-    value: Refresh
-  }, text(refresh$1())];
+  return refreshButtonDom;
 };
+
 const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) => {
   const refreshButtonDom = getRefreshButtonDom();
   if (useDevtoolsLayout) {
     return [{
       childCount: 2 + (quickFilterNodes.length > 0 ? 1 : 0),
-      className: joinClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
+      className: mergeClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
       onContextMenu: HandleHeaderContextMenu,
       type: Search
     }, {
       autocomplete: 'off',
       childCount: 0,
-      className: joinClassNames(InputBox, ChatDebugViewFilterInput, ChatDebugViewFilterInputDevtools),
+      className: mergeClassNames(InputBox, ChatDebugViewFilterInput, ChatDebugViewFilterInputDevtools),
       inputType: 'search',
       name: Filter,
       onInput: HandleFilterInput,
@@ -3405,7 +4321,7 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) =>
   }, {
     autocomplete: 'off',
     childCount: 0,
-    className: joinClassNames(InputBox, ChatDebugViewFilterInput),
+    className: mergeClassNames(InputBox, ChatDebugViewFilterInput),
     inputType: 'search',
     name: Filter,
     onInput: HandleFilterInput,
@@ -3415,6 +4331,46 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) =>
   }, ...refreshButtonDom];
 };
 
+const None = 'none';
+
+const getPanelId = detailTab => {
+  return `ChatDebugViewDetailsPanel-${detailTab}`;
+};
+
+const getTabId = detailTab => {
+  return `ChatDebugViewDetailsTab-${detailTab}`;
+};
+
+const getDetailTabDom = detailTab => {
+  const {
+    isSelected
+  } = detailTab;
+  return [{
+    'aria-controls': getPanelId(detailTab.name),
+    'aria-selected': isSelected,
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewDetailsTab, isSelected ? ChatDebugViewDetailsTabSelected : ''),
+    id: getTabId(detailTab.name),
+    name: DetailTab,
+    onChange: SelectDetailTab,
+    onClick: SelectDetailTab,
+    role: 'tab',
+    tabIndex: isSelected ? 0 : -1,
+    type: Button$1,
+    value: detailTab.name
+  }, text(detailTab.label)];
+};
+
+const getTabNodes = detailTabs => {
+  return [{
+    'aria-label': detailSections(),
+    childCount: detailTabs.length,
+    className: ChatDebugViewDetailsTabs,
+    role: 'tablist',
+    type: Div
+  }, ...detailTabs.flatMap(getDetailTabDom)];
+};
+
 const getDurationText = event => {
   const explicitDuration = event.durationMs ?? event.duration;
   if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
@@ -3464,22 +4420,26 @@ const getEndText = event => {
 const getStartText = event => {
   return getTimestampText(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
 };
-
-const getTimingRowDom = (label, value) => {
-  return [{
-    childCount: 2,
-    className: ChatDebugViewTimingRow,
-    type: Div
-  }, {
-    childCount: 1,
-    className: ChatDebugViewTimingLabel,
-    type: Span
-  }, text(label), {
-    childCount: 1,
-    className: ChatDebugViewTimingValue,
-    type: Span
-  }, text(value)];
+
+const timingRowNode = {
+  childCount: 2,
+  className: ChatDebugViewTimingRow,
+  type: Div
+};
+const timingLabelNode = {
+  childCount: 1,
+  className: ChatDebugViewTimingLabel,
+  type: Span
+};
+const timingValueNode = {
+  childCount: 1,
+  className: ChatDebugViewTimingValue,
+  type: Span
+};
+const getTimingRowDom = (label, value) => {
+  return [timingRowNode, timingLabelNode, text(label), timingValueNode, text(value)];
 };
+
 const getTimingDetailsDom = event => {
   return [{
     childCount: 3,
@@ -3488,36 +4448,23 @@ const getTimingDetailsDom = event => {
   }, ...getTimingRowDom(started(), getStartText(event)), ...getTimingRowDom(ended(), getEndText(event)), ...getTimingRowDom(duration(), getDurationText(event))];
 };
 
-const getTabId = detailTab => {
-  return `ChatDebugViewDetailsTab-${detailTab}`;
-};
-const getPanelId = detailTab => {
-  return `ChatDebugViewDetailsPanel-${detailTab}`;
-};
-const getTabNodes = selectedDetailTab => {
-  return detailTabs.flatMap(detailTab => {
-    const isSelected = detailTab === selectedDetailTab;
-    return [{
-      'aria-controls': getPanelId(detailTab),
-      'aria-selected': isSelected,
-      childCount: 1,
-      className: joinClassNames(ChatDebugViewDetailsTab, isSelected && ChatDebugViewDetailsTabSelected),
-      id: getTabId(detailTab),
-      name: DetailTab,
-      onChange: HandleDetailTab,
-      onClick: HandleDetailTab,
-      role: 'tab',
-      tabIndex: isSelected ? 0 : -1,
-      type: Button$1,
-      value: detailTab
-    }, text(getDetailTabLabel(detailTab))];
-  });
+const getContentNode = (previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs) => {
+  const safeSelectedDetailTab = getSelectedDetailTab(detailTabs);
+  const contentNodes = safeSelectedDetailTab === Timing && selectedEvent ? getTimingDetailsDom(selectedEvent) : safeSelectedDetailTab === Preview ? previewEventNodes : safeSelectedDetailTab === Payload ? payloadEventNodes : responseEventNodes;
+  return {
+    contentNodes,
+    safeSelectedDetailTab
+  };
 };
-const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes, selectedEvent = null, selectedDetailTab = Response) => {
-  if (previewEventNodes.length === 0 && responseEventNodes.length === 0) {
+const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs()) => {
+  if (previewEventNodes.length === 0 && payloadEventNodes.length === 0 && responseEventNodes.length === 0) {
     return [];
   }
-  const contentNodes = selectedDetailTab === Timing && selectedEvent ? getTimingDetailsDom(selectedEvent) : selectedDetailTab === Preview ? previewEventNodes : responseEventNodes;
+  const normalizedDetailTabs = selectedEvent ? createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent) : detailTabs;
+  const {
+    contentNodes,
+    safeSelectedDetailTab
+  } = getContentNode(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, normalizedDetailTabs);
   return [{
     childCount: 2,
     className: ChatDebugViewDetails,
@@ -3536,17 +4483,11 @@ const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes
     onClick: HandleCloseDetails,
     type: Button$1,
     value: 'close'
-  }, {
-    'aria-label': detailSections(),
-    childCount: detailTabs.length,
-    className: ChatDebugViewDetailsTabs,
-    role: 'tablist',
-    type: Div
-  }, ...getTabNodes(selectedDetailTab), {
-    'aria-labelledby': getTabId(selectedDetailTab),
+  }, ...getTabNodes(normalizedDetailTabs), {
+    'aria-labelledby': getTabId(safeSelectedDetailTab),
     childCount: 1,
     className: ChatDebugViewDetailsBottom,
-    id: getPanelId(selectedDetailTab),
+    id: getPanelId(safeSelectedDetailTab),
     onContextMenu: HandleDetailsContextMenu,
     role: 'tabpanel',
     type: Div
@@ -3586,9 +4527,6 @@ const getEventTypeLabel = event => {
   return `${event.type}, ${toolName}`;
 };
 
-const isRecord = value => {
-  return typeof value === 'object' && value !== null;
-};
 const isErrorStatusCode = value => {
   if (typeof value === 'number') {
     return value >= 400;
@@ -3599,6 +4537,11 @@ const isErrorStatusCode = value => {
   }
   return false;
 };
+
+const isRecord = value => {
+  return typeof value === 'object' && value !== null;
+};
+
 const hasErrorStatus = event => {
   if (event.type === 'error') {
     return true;
@@ -3634,24 +4577,26 @@ const getStatusText = event => {
 };
 
 const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
-  return visibleTableColumns.flatMap(column => {
+  const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
+  return orderedVisibleTableColumns.flatMap((column, index) => {
+    const isFixed = index < orderedVisibleTableColumns.length - 1;
     switch (column) {
       case Duration:
         return [{
           childCount: 1,
-          className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellDuration),
+          className: mergeClassNames(ChatDebugViewCell, ChatDebugViewCellDuration, isFixed ? ChatDebugViewColumnFixed : ''),
           type: Td
         }, text(getDurationText(event))];
       case Status:
         return [{
           childCount: 1,
-          className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellStatus, isErrorStatus && ChatDebugViewCellStatusError),
+          className: mergeClassNames(ChatDebugViewCell, ChatDebugViewCellStatus, isErrorStatus ? ChatDebugViewCellStatusError : '', isFixed ? ChatDebugViewColumnFixed : ''),
           type: Td
         }, text(getStatusText(event))];
       case Type:
         return [{
           childCount: 1,
-          className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellType),
+          className: mergeClassNames(ChatDebugViewCell, ChatDebugViewCellType, isFixed ? ChatDebugViewColumnFixed : ''),
           type: Td
         }, text(getEventTypeLabel(event))];
       default:
@@ -3659,6 +4604,7 @@ const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
     }
   });
 };
+
 const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defaultVisibleTableColumns) => {
   return events.flatMap((event, i) => {
     const isEvenRow = i % 2 === 1;
@@ -3668,19 +4614,39 @@ const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defau
     const rowCellNodes = getRowCellNodes(event, isErrorStatus, visibleTableColumns);
     return [{
       childCount: visibleTableColumns.length,
-      className: joinClassNames(ChatDebugViewEventRow, isEvenRow && TableRowEven, isSelected && ChatDebugViewEventRowSelected),
+      className: mergeClassNames(ChatDebugViewEventRow, isEvenRow ? TableRowEven : '', isSelected ? ChatDebugViewEventRowSelected : ''),
       'data-index': rowIndex,
       type: Tr
     }, ...rowCellNodes];
   });
 };
 
+const emptyStateNode = {
+  childCount: 1,
+  className: ChatDebugViewEmpty,
+  type: Div
+};
 const getEmptyStateDom = emptyMessage => {
+  return [emptyStateNode, text(emptyMessage)];
+};
+
+const getLineNodeDom = (line, index) => {
   return [{
-    childCount: 1,
-    className: ChatDebugViewEmpty,
+    childCount: 2,
+    className: Row,
     type: Div
-  }, text(emptyMessage)];
+  }, {
+    childCount: 1,
+    className: ChatDebugViewEventLineNumber,
+    type: Span
+  }, text(String(index + 1)), {
+    childCount: line.childCount,
+    className: ChatDebugViewEventLineContent,
+    type: Span
+  }, ...line.nodes];
+};
+const getLineNodes = lines => {
+  return lines.flatMap(getLineNodeDom);
 };
 
 const isDigit = character => {
@@ -3830,24 +4796,6 @@ const getLineContentNodes = line => {
     }, text(segment.value)];
   });
 };
-const getLineNodes = lines => {
-  return lines.flatMap((line, index) => {
-    const lineContentNodes = getLineContentNodes(line);
-    return [{
-      childCount: 2,
-      className: Row,
-      type: Div
-    }, {
-      childCount: 1,
-      className: ChatDebugViewEventLineNumber,
-      type: Span
-    }, text(String(index + 1)), {
-      childCount: lineContentNodes.length / 2,
-      className: ChatDebugViewEventLineContent,
-      type: Span
-    }, ...lineContentNodes];
-  });
-};
 const isChatViewEvent = value => {
   return typeof value === 'object' && value !== null && typeof value.type === 'string';
 };
@@ -3857,7 +4805,13 @@ const getEventNode = value => {
     type: getEventTypeLabel(value)
   } : value;
   const lines = getJsonLines(renderedValue);
-  const lineNodes = getLineNodes(lines);
+  const lineNodes = getLineNodes(lines.map(line => {
+    const lineContentNodes = getLineContentNodes(line);
+    return {
+      childCount: lineContentNodes.length / 2,
+      nodes: lineContentNodes
+    };
+  }));
   return [{
     childCount: lines.length,
     className: ChatDebugViewEvent,
@@ -3866,19 +4820,61 @@ const getEventNode = value => {
 };
 
 const getEventsClassName = hasSelectedEvent => {
-  const widthClassName = joinClassNames(ChatDebugViewEvents, !hasSelectedEvent && ChatDebugViewEventsFullWidth);
+  const widthClassName = mergeClassNames(ChatDebugViewEvents, hasSelectedEvent ? '' : ChatDebugViewEventsFullWidth);
   return widthClassName;
 };
 
+const getPreviewName = event => {
+  if (typeof event.name === 'string' && event.name) {
+    return event.name;
+  }
+  if (typeof event.toolName === 'string' && event.toolName) {
+    return event.toolName;
+  }
+  return undefined;
+};
+
 const hasOwn = (event, key) => {
   return Object.hasOwn(event, key);
 };
-const isChatMessageUpdatedEvent = event => {
-  return event.type === 'chat-message-updated';
+
+const shouldIncludeArguments = (event, name) => {
+  if (!hasOwn(event, 'arguments')) {
+    return false;
+  }
+  if (name === 'getWorkspaceUri') {
+    return false;
+  }
+  return true;
+};
+
+const getPayloadEvent = event => {
+  const name = getPreviewName(event);
+  const payloadEvent = {
+    ...(name === undefined ? {} : {
+      name
+    }),
+    ...(shouldIncludeArguments(event, name) ? {
+      arguments: event.arguments
+    } : {}),
+    ...(hasOwn(event, 'result') ? {
+      result: event.result
+    } : {})
+  };
+  if (Object.keys(payloadEvent).length > 0) {
+    return payloadEvent;
+  }
+  return event;
 };
+
 const isChatMessageAddedEvent = event => {
   return event.type === 'chat-message-added';
 };
+
+const isChatMessageUpdatedEvent = event => {
+  return event.type === 'chat-message-updated';
+};
+
 const getPreviewMessageText = event => {
   if (isChatMessageUpdatedEvent(event) && typeof event.text === 'string') {
     return event.text;
@@ -3903,61 +4899,112 @@ const getPreviewMessageText = event => {
   }
   return text;
 };
-const getPreviewName = event => {
-  if (typeof event.name === 'string' && event.name) {
-    return event.name;
-  }
-  if (typeof event.toolName === 'string' && event.toolName) {
-    return event.toolName;
+
+const getWriteFilePreviewText = (event, name) => {
+  if (name !== 'write_file') {
+    return undefined;
   }
-  return undefined;
-};
-const shouldIncludeArguments = (event, name) => {
-  if (!hasOwn(event, 'arguments')) {
-    return false;
+  const {
+    arguments: toolArguments
+  } = event;
+  if (typeof toolArguments !== 'object' || toolArguments === null || !Object.hasOwn(toolArguments, 'content')) {
+    return undefined;
   }
-  if (name === 'getWorkspaceUri') {
-    return false;
+  const {
+    content
+  } = toolArguments;
+  if (typeof content !== 'string') {
+    return undefined;
   }
-  return true;
+  return content;
 };
+
 const getPreviewEvent = event => {
+  const selectedEventPreview = getSelectedEventPreview(event);
+  if (selectedEventPreview !== undefined) {
+    return selectedEventPreview;
+  }
   const previewMessageText = getPreviewMessageText(event);
   if (previewMessageText !== undefined) {
     return previewMessageText;
   }
   const name = getPreviewName(event);
-  const previewEvent = {
-    ...(name === undefined ? {} : {
-      name
-    }),
-    ...(shouldIncludeArguments(event, name) ? {
-      arguments: event.arguments
-    } : {}),
-    ...(hasOwn(event, 'result') ? {
-      result: event.result
-    } : {})
-  };
-  if (Object.keys(previewEvent).length > 0) {
-    return previewEvent;
+  const writeFilePreviewText = getWriteFilePreviewText(event, name);
+  if (writeFilePreviewText !== undefined) {
+    return writeFilePreviewText;
   }
-  return event;
+  return getPayloadEvent(event);
 };
 
-const getSashNodesDom = hasSelectedEvent => {
-  if (!hasSelectedEvent) {
-    return [];
-  }
+const isAttachmentImagePreview = value => {
+  return typeof value === 'object' && value !== null && value.previewType === 'image';
+};
+
+const getImagePreviewDom = preview => {
   return [{
-    childCount: 1,
-    className: ChatDebugViewSash,
-    onPointerDown: HandleSashPointerDown,
+    childCount: 2,
+    className: ChatDebugViewImagePreview,
     type: Div
   }, {
+    alt: preview.alt,
     childCount: 0,
-    className: ChatDebugViewSashLine,
+    className: ChatDebugViewImagePreviewImage,
+    src: preview.src,
+    type: Img
+  }, {
+    childCount: 1,
+    className: ChatDebugViewImagePreviewLabel,
+    type: Span
+  }, text(preview.alt)];
+};
+
+const getTextNode = value => {
+  const lines = value.split('\n');
+  const lineNodes = getLineNodes(lines.map(line => {
+    return {
+      childCount: 1,
+      nodes: [{
+        childCount: 1,
+        className: TokenText,
+        type: Span
+      }, text(line)]
+    };
+  }));
+  return [{
+    childCount: lines.length,
+    className: ChatDebugViewEvent,
     type: Div
-  }];
+  }, ...lineNodes];
+};
+
+const getPreviewEventNodes = previewEvent => {
+  if (typeof previewEvent === 'string') {
+    return getTextNode(previewEvent);
+  }
+  if (previewEvent === undefined) {
+    return [];
+  }
+  if (isAttachmentImagePreview(previewEvent)) {
+    return getImagePreviewDom(previewEvent);
+  }
+  return getEventNode(previewEvent);
+};
+
+const sashNodesDom = [{
+  childCount: 1,
+  className: ChatDebugViewSash,
+  onPointerDown: HandleSashPointerDown,
+  type: Div
+}, {
+  childCount: 0,
+  className: ChatDebugViewSashLine,
+  type: Div
+}];
+const getSashNodesDom = hasSelectedEvent => {
+  if (!hasSelectedEvent) {
+    return [];
+  }
+  return sashNodesDom;
 };
 
 const getTableBodyDom = (rowNodes, eventCount) => {
@@ -3970,37 +5017,40 @@ const getTableBodyDom = (rowNodes, eventCount) => {
   }, ...rowNodes];
 };
 
-const getHeaderCellNodes = visibleTableColumns => {
-  return visibleTableColumns.flatMap(column => {
+const getHeaderCellNodes = (visibleTableColumns, tableColumns = createTableColumns()) => {
+  const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns, tableColumns);
+  return orderedVisibleTableColumns.flatMap((column, index) => {
+    const isFixed = index < orderedVisibleTableColumns.length - 1;
     switch (column) {
       case Duration:
         return [{
           childCount: 1,
-          className: ChatDebugViewHeaderCell,
+          className: mergeClassNames(ChatDebugViewHeaderCell, ChatDebugViewHeaderCellDuration, isFixed ? ChatDebugViewColumnFixed : ''),
           scope: 'col',
           type: Th
-        }, text(duration())];
+        }, text(getTableColumnLabel(tableColumns, column))];
       case Status:
         return [{
           childCount: 1,
-          className: ChatDebugViewHeaderCell,
+          className: mergeClassNames(ChatDebugViewHeaderCell, ChatDebugViewHeaderCellStatus, isFixed ? ChatDebugViewColumnFixed : ''),
           scope: 'col',
           type: Th
-        }, text(status())];
+        }, text(getTableColumnLabel(tableColumns, column))];
       case Type:
         return [{
           childCount: 1,
-          className: ChatDebugViewHeaderCell,
+          className: mergeClassNames(ChatDebugViewHeaderCell, ChatDebugViewHeaderCellType, isFixed ? ChatDebugViewColumnFixed : ''),
           scope: 'col',
           type: Th
-        }, text(type())];
+        }, text(getTableColumnLabel(tableColumns, column))];
       default:
         return [];
     }
   });
 };
-const getTableHeaderDom = (visibleTableColumns = defaultVisibleTableColumns) => {
-  const headerCellNodes = getHeaderCellNodes(visibleTableColumns);
+
+const getTableHeaderDom = (visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns()) => {
+  const headerCellNodes = getHeaderCellNodes(visibleTableColumns, tableColumns);
   return [{
     childCount: 1,
     className: ChatDebugViewTableHeader,
@@ -4013,16 +5063,45 @@ const getTableHeaderDom = (visibleTableColumns = defaultVisibleTableColumns) =>
   }, ...headerCellNodes];
 };
 
-const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns) => {
+const resizerNames = ['ResizerOne', 'ResizerTwo'];
+const resizerClassNames = [ChatDebugViewResizerOne, ChatDebugViewResizerTwo];
+const getTableResizersDom = visibleTableColumns => {
+  const visibleColumnCount = getOrderedVisibleTableColumns(visibleTableColumns).length;
+  const resizerCount = Math.max(0, visibleColumnCount - 1);
+  if (resizerCount === 0) {
+    return [];
+  }
+  const visibleResizerClassNames = resizerClassNames.slice(0, resizerCount);
+  const resizerNodes = visibleResizerClassNames.flatMap((resizerClassName, index) => [{
+    childCount: 1,
+    className: `${ChatDebugViewResizer} ${resizerClassName}`,
+    name: resizerNames[index],
+    onPointerDown: HandleTableResizerPointerDown,
+    role: None,
+    type: Button$1
+  }, {
+    childCount: 0,
+    className: ChatDebugViewResizerInner,
+    type: Div
+  }]);
+  return [{
+    childCount: resizerCount,
+    className: ChatDebugViewResizers,
+    type: Div
+  }, ...resizerNodes];
+};
+
+const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns()) => {
+  const resizerNodes = getTableResizersDom(visibleTableColumns);
   return [{
+    childCount: 1 + (resizerNodes.length > 0 ? 1 : 0),
+    className: ChatDebugViewTableWrapper,
+    type: Div
+  }, {
     childCount: 2,
     className: ChatDebugViewTable,
     type: Table
-  }, ...getTableHeaderDom(visibleTableColumns), ...getTableBodyDom(rowNodes, eventCount)];
-};
-
-const formatPercent = value => {
-  return `${Number(value.toFixed(3))}%`;
+  }, ...getTableHeaderDom(visibleTableColumns, tableColumns), ...getTableBodyDom(rowNodes, eventCount), ...resizerNodes];
 };
 
 const getBucketUnitDom = (unitCount, presetValue) => {
@@ -4032,7 +5111,7 @@ const getBucketUnitDom = (unitCount, presetValue) => {
         'data-value': presetValue
       } : {}),
       childCount: 0,
-      className: joinClassNames(ChatDebugViewTimelineBucketUnit, ChatDebugViewTimelineBucketUnitEmpty),
+      className: mergeClassNames(ChatDebugViewTimelineBucketUnit, ChatDebugViewTimelineBucketUnitEmpty),
       type: Div
     }];
   }
@@ -4052,29 +5131,46 @@ const getBucketDom = bucket => {
   const presetValue = `${formatTimelinePresetValue(bucket.startSeconds)}:${formatTimelinePresetValue(bucket.endSeconds)}`;
   return [{
     childCount: 1,
-    className: joinClassNames(ChatDebugViewTimelineBucket, bucket.isSelected && ChatDebugViewTimelineBucketSelected),
+    className: mergeClassNames(ChatDebugViewTimelineBucket, bucket.isSelected ? ChatDebugViewTimelineBucketSelected : ''),
     'data-value': presetValue,
     onClick: HandleTimelineRangePreset,
     type: Div
   }, {
     childCount: bucket.unitCount === 0 ? 1 : bucket.unitCount,
-    className: joinClassNames(ChatDebugViewTimelineBucketBar, bucket.isSelected && ChatDebugViewTimelineBucketBarSelected),
+    className: mergeClassNames(ChatDebugViewTimelineBucketBar, bucket.isSelected ? ChatDebugViewTimelineBucketBarSelected : ''),
     'data-value': presetValue,
     type: Div
   }, ...getBucketUnitDom(bucket.unitCount, presetValue)];
 };
 
-const getEffectiveTimelineRange = (timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds) => {
-  if (!timelineSelectionActive) {
-    return {
-      endSeconds: timelineEndSeconds,
-      startSeconds: timelineStartSeconds
-    };
+const formatPercent = value => {
+  return `${Number(value.toFixed(3))}%`;
+};
+
+const getSelectionNodesDom = (hasSelection, selectionStartPercent, selectionEndPercent) => {
+  if (!hasSelection || selectionStartPercent === null || selectionEndPercent === null) {
+    return [];
   }
-  return {
-    endSeconds: timelineSelectionFocusSeconds,
-    startSeconds: timelineSelectionAnchorSeconds
-  };
+  return [{
+    childCount: 0,
+    className: ChatDebugViewTimelineSelectionRange,
+    style: `left:${formatPercent(selectionStartPercent)};width:${formatPercent(selectionEndPercent - selectionStartPercent)};`,
+    type: Div
+  }, {
+    childCount: 0,
+    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
+    name: Start,
+    role: None,
+    style: `left:${formatPercent(selectionStartPercent)};`,
+    type: Button$1
+  }, {
+    childCount: 0,
+    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
+    name: End,
+    role: None,
+    style: `left:${formatPercent(selectionEndPercent)};`,
+    type: Button$1
+  }];
 };
 
 const formatTimelineSeconds = value => {
@@ -4084,36 +5180,18 @@ const formatTimelineSeconds = value => {
   return `${Number(value.toFixed(1))}s`;
 };
 
-const getTimelineSummary = (timelineEvents, timelineStartSeconds, timelineEndSeconds) => {
-  const timelineInfo = getTimelineInfo(timelineEvents, timelineStartSeconds, timelineEndSeconds);
+const getTimelineSummary = timelineInfo => {
   if (timelineInfo.hasSelection && timelineInfo.startSeconds !== null && timelineInfo.endSeconds !== null) {
     return windowSummary(formatTimelineSeconds(timelineInfo.startSeconds), formatTimelineSeconds(timelineInfo.endSeconds), formatTimelineSeconds(timelineInfo.durationSeconds));
   }
   return windowSummary('0s', formatTimelineSeconds(timelineInfo.durationSeconds), formatTimelineSeconds(timelineInfo.durationSeconds));
 };
 
-const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSeconds, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '') => {
-  const effectiveRange = getEffectiveTimelineRange(timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
-  const timelineInfo = getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
+const getTimelineNodes = timelineInfo => {
   if (timelineInfo.buckets.length === 0) {
     return [];
   }
-  const selectionNodes = timelineInfo.hasSelection && timelineInfo.selectionStartPercent !== null && timelineInfo.selectionEndPercent !== null ? [{
-    childCount: 0,
-    className: ChatDebugViewTimelineSelectionRange,
-    style: `left:${formatPercent(timelineInfo.selectionStartPercent)};width:${formatPercent(timelineInfo.selectionEndPercent - timelineInfo.selectionStartPercent)};`,
-    type: Div
-  }, {
-    childCount: 0,
-    className: joinClassNames(ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
-    style: `left:${formatPercent(timelineInfo.selectionStartPercent)};`,
-    type: Div
-  }, {
-    childCount: 0,
-    className: joinClassNames(ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
-    style: `left:${formatPercent(timelineInfo.selectionEndPercent)};`,
-    type: Div
-  }] : [];
+  const selectionNodes = getSelectionNodesDom(timelineInfo.hasSelection, timelineInfo.selectionStartPercent, timelineInfo.selectionEndPercent);
   return [{
     childCount: 2,
     className: ChatDebugViewTimeline,
@@ -4126,8 +5204,8 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
   }, {
     childCount: 1,
     className: ChatDebugViewTimelineSummary,
-    type: Div
-  }, text(getTimelineSummary(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds)), {
+    type: H2
+  }, text(getTimelineSummary(timelineInfo)), {
     childCount: 2,
     className: ChatDebugViewTimelineInteractive,
     onDoubleClick: HandleTimelineDoubleClick,
@@ -4144,38 +5222,48 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
   }, ...selectionNodes];
 };
 
-const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response, visibleTableColumns = defaultVisibleTableColumns) => {
+const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), tableColumns = createTableColumns(), timelineInfo) => {
   const rowNodes = getDevtoolsRows(events, selectedEventIndex, visibleTableColumns);
-  const timelineNodes = getTimelineNodes(timelineEvents, timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
-  const previewEventNodes = selectedEvent ? getEventNode(getPreviewEvent(selectedEvent)) : [];
+  const effectiveRange = getEffectiveTimelineRange(timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
+  const resolvedTimelineInfo = timelineInfo || getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
+  const timelineNodes = getTimelineNodes(resolvedTimelineInfo);
+  const previewEvent = selectedEvent ? getPreviewEvent(selectedEvent) : undefined;
+  const previewEventNodes = getPreviewEventNodes(previewEvent);
+  const payloadEventNodes = selectedEvent ? getEventNode(getPayloadEvent(selectedEvent)) : [];
   const responseEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
   const hasSelectedEvent = responseEventNodes.length > 0;
-  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableDom(rowNodes, events.length, visibleTableColumns);
+  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableDom(rowNodes, events.length, visibleTableColumns, tableColumns);
   const eventsClassName = getEventsClassName(hasSelectedEvent);
-  const detailsNodes = getDetailsDom(previewEventNodes, responseEventNodes, selectedEvent, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response);
+  const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs);
   const sashNodes = getSashNodesDom(hasSelectedEvent);
   const splitChildCount = hasSelectedEvent ? 3 : 1;
   const mainChildCount = 1 + (timelineNodes.length > 0 ? 1 : 0);
   return [{
     childCount: mainChildCount,
     className: ChatDebugViewDevtoolsMain,
-    role: 'none',
+    role: None,
     type: Div
   }, ...timelineNodes, {
     childCount: splitChildCount,
     className: ChatDebugViewDevtoolsSplit,
-    role: 'none',
+    role: None,
     type: Div
   }, {
     childCount: 1,
     className: eventsClassName,
-    onKeyDown: HandleTableKeyDown,
     role: 'application',
     tabIndex: 0,
     type: Div
   }, ...tableNodes, ...sashNodes, ...detailsNodes];
 };
 
+const getEmptyMessage = (eventCount, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage) => {
+  if (eventCount === 0 && hasFilterValue) {
+    return useNoToolCallEventsMessage ? noToolCallEvents() : noFilteredEventsMessage;
+  }
+  return noEventsFound();
+};
+
 const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
   return [{
     childCount: eventNodes.length === 0 ? 1 : eventNodes.length,
@@ -4190,27 +5278,30 @@ const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
   }, text(errorMessage || emptyMessage)] : eventNodes)];
 };
 
-const getQuickFilterNodes = (eventCategoryFilter, eventCategoryFilterOptions) => {
+// cspell:ignore multiselectable
+const getQuickFilterNodes = categoryFilters => {
   return [{
-    childCount: eventCategoryFilterOptions.length,
+    'aria-multiselectable': true,
+    childCount: categoryFilters.length,
     className: ChatDebugViewQuickFilters,
+    onClick: HandleEventCategoryFilter,
+    role: 'listbox',
     type: Div
-  }, ...eventCategoryFilterOptions.flatMap(option => {
-    const isSelected = option.value === eventCategoryFilter;
+  }, ...categoryFilters.flatMap(categoryFilter => {
+    const {
+      isSelected,
+      label,
+      name
+    } = categoryFilter;
     return [{
-      childCount: 2,
-      className: joinClassNames(ChatDebugViewQuickFilterPill, isSelected && ChatDebugViewQuickFilterPillSelected),
-      type: Label
-    }, {
-      checked: isSelected,
-      childCount: 0,
-      className: ChatDebugViewQuickFilterInput,
-      inputType: 'radio',
-      name: EventCategoryFilter,
-      onChange: HandleEventCategoryFilter,
-      type: Input,
-      value: option.value
-    }, text(option.label)];
+      'aria-selected': isSelected,
+      childCount: 1,
+      className: mergeClassNames(ChatDebugViewQuickFilterPill, isSelected ? ChatDebugViewQuickFilterPillSelected : ''),
+      'data-value': name,
+      onClick: HandleEventCategoryFilter,
+      role: 'option',
+      type: Div
+    }, text(label)];
   })];
 };
 
@@ -4229,14 +5320,21 @@ const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds)
   return '';
 };
 
-const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, eventCategoryFilterOptions, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response, visibleTableColumns = defaultVisibleTableColumns) => {
+const getEventCategoryFilterDescription = eventCategoryFilters => {
+  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All)) {
+    return '';
+  }
+  return eventCategoryFilters.map(eventCategoryFilter => getEventCategoryFilterLabel(eventCategoryFilter).toLowerCase()).join(', ');
+};
+const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, categoryFilters, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), tableColumns = createTableColumns(), timelineInfo) => {
   if (errorMessage) {
     return getDebugErrorDom(errorMessage);
   }
   const trimmedFilterValue = filterValue.trim();
   const filterDescriptionParts = [];
-  if (eventCategoryFilter !== All) {
-    filterDescriptionParts.push(getEventCategoryFilterLabel(eventCategoryFilter).toLowerCase());
+  const eventCategoryFilterDescription = getEventCategoryFilterDescription(eventCategoryFilters);
+  if (eventCategoryFilterDescription) {
+    filterDescriptionParts.push(eventCategoryFilterDescription);
   }
   if (trimmedFilterValue) {
     filterDescriptionParts.push(trimmedFilterValue);
@@ -4249,16 +5347,16 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, eve
   const hasFilterValue = filterDescriptionParts.length > 0;
   const filterDescription = filterDescriptionParts.join(' ');
   const noFilteredEventsMessage = noEventsFoundMatching(filterDescription);
-  const useNoToolCallEventsMessage = eventCategoryFilter === Tools && !trimmedFilterValue && !hasTimelineFilter;
-  const emptyMessage = events.length === 0 && hasFilterValue ? useNoToolCallEventsMessage ? noToolCallEvents() : noFilteredEventsMessage : noEventsFound();
+  const useNoToolCallEventsMessage = eventCategoryFilters.length === 1 && eventCategoryFilters[0] === Tools && !trimmedFilterValue && !hasTimelineFilter;
+  const emptyMessage = getEmptyMessage(events.length, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage);
   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, visibleTableColumns) : getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
-  const quickFilterNodes = useDevtoolsLayout ? getQuickFilterNodes(eventCategoryFilter, eventCategoryFilterOptions) : [];
+  const contentNodes = useDevtoolsLayout ? getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, visibleTableColumns, detailTabs, tableColumns, timelineInfo) : getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
+  const quickFilterNodes = useDevtoolsLayout ? getQuickFilterNodes(categoryFilters) : [];
   const debugViewTopDom = getDebugViewTopDom(filterValue, useDevtoolsLayout, quickFilterNodes);
   const rootChildCount = 2;
   return [{
     childCount: rootChildCount,
-    className: joinClassNames(ChatDebugView, useDevtoolsLayout && ChatDebugViewDevtools),
+    className: mergeClassNames(ChatDebugView, useDevtoolsLayout ? ChatDebugViewDevtools : ''),
     type: Div
   }, ...debugViewTopDom, ...contentNodes];
 };
@@ -4275,9 +5373,8 @@ const renderItems = (oldState, newState) => {
   if (newState.initial) {
     return [SetDom2, newState.uid, []];
   }
-  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, newState.visibleTableColumns);
+  const filteredEvents = filterEventsByTimelineRange(newState.timelineEvents, newState.timelineStartSeconds, newState.timelineEndSeconds);
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, getSelectedEventCategoryFilters(newState.categoryFilters), newState.categoryFilters, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, withSessionEventIds(newState.timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, newState.visibleTableColumns, newState.detailTabs, newState.tableColumns, newState.timelineInfo);
   return [SetDom2, newState.uid, dom];
 };
 
@@ -4351,10 +5448,10 @@ const renderEventListeners = () => {
     params: ['handleInput', TargetName, TargetValue]
   }, {
     name: HandleEventCategoryFilter,
-    params: ['handleEventCategoryFilter', TargetValue]
+    params: ['handleEventCategoryFilter', 'event.target.dataset.value', 'event.ctrlKey', 'event.metaKey']
   }, {
-    name: HandleDetailTab,
-    params: ['handleDetailTab', TargetValue]
+    name: SelectDetailTab,
+    params: ['selectDetailTab', TargetValue]
   }, {
     name: HandleTimelineRangePreset,
     params: ['handleTimelineRangePreset', 'event.target.dataset.value']
@@ -4364,9 +5461,6 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickRefresh,
     params: ['handleClickRefresh']
-  }, {
-    name: HandleTableKeyDown,
-    params: ['handleTableKeyDown', 'event.key']
   }, {
     name: HandleSashPointerDown,
     params: ['handleSashPointerDown', ClientX, ClientY],
@@ -4377,9 +5471,19 @@ const renderEventListeners = () => {
   }, {
     name: HandleSashPointerUp,
     params: ['handleSashPointerUp', ClientX, ClientY]
+  }, {
+    name: HandleTableResizerPointerDown,
+    params: ['handleTableResizerPointerDown', TargetName, ClientX],
+    trackPointerEvents: [HandleTableResizerPointerMove, HandleTableResizerPointerUp]
+  }, {
+    name: HandleTableResizerPointerMove,
+    params: ['handleTableResizerPointerMove', ClientX]
+  }, {
+    name: HandleTableResizerPointerUp,
+    params: ['handleTableResizerPointerUp']
   }, {
     name: HandleTimelinePointerDown,
-    params: ['handleTimelinePointerDown', ClientX],
+    params: ['handleTimelinePointerDown', TargetName, ClientX],
     trackPointerEvents: [HandleTimelinePointerMove, HandleTimelinePointerUp]
   }, {
     name: HandleTimelinePointerMove,
@@ -4400,12 +5504,14 @@ const rerender = 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)) {
+  if (isSameVisibleTableColumns(state.visibleTableColumns, defaultVisibleTableColumns) && isSameTableColumnWidths(state.tableColumnWidths, defaultTableColumnWidths)) {
     return state;
   }
   return {
     ...state,
+    tableColumnWidths: defaultTableColumnWidths,
     visibleTableColumns: defaultVisibleTableColumns
   };
 };
@@ -4433,21 +5539,24 @@ const resize = (state, dimensions) => {
 
 const saveState = state => {
   const {
-    eventCategoryFilter,
+    categoryFilters,
+    detailTabs,
     filterValue,
-    selectedDetailTab,
     selectedEventId,
     sessionId,
+    tableColumnWidths,
     timelineEndSeconds,
     timelineStartSeconds,
     visibleTableColumns
   } = state;
   return {
-    eventCategoryFilter,
+    eventCategoryFilter: getSelectedEventCategoryFilter(categoryFilters),
+    eventCategoryFilters: getSelectedEventCategoryFilters(categoryFilters),
     filterValue,
-    selectedDetailTab,
+    selectedDetailTab: getSelectedDetailTab(detailTabs),
     selectedEventId,
     sessionId,
+    tableColumnWidths,
     timelineEndSeconds,
     timelineStartSeconds,
     visibleTableColumns
@@ -4455,7 +5564,7 @@ const saveState = state => {
 };
 
 const setEvents = (state, events) => {
-  return {
+  return getStateWithTimelineInfo({
     ...state,
     errorMessage: '',
     events,
@@ -4463,14 +5572,20 @@ const setEvents = (state, events) => {
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null
-  };
+  });
 };
 
 const setSessionIdDependencies = {
   listChatViewEvents: listChatViewEvents
 };
 const setSessionId = async (state, sessionId) => {
-  const result = await setSessionIdDependencies.listChatViewEvents(sessionId, state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionIdIndexName);
+  const {
+    databaseName,
+    dataBaseVersion,
+    eventStoreName,
+    sessionIdIndexName
+  } = state;
+  const result = await setSessionIdDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
   if (result.type === 'error') {
     return {
       ...state,
@@ -4502,20 +5617,16 @@ 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);
-  }
+  const nextVisibleColumns = state.visibleTableColumns.includes(column) ? state.visibleTableColumns.filter(visibleColumn => visibleColumn !== column) : [...state.visibleTableColumns, column];
   return {
     ...state,
-    visibleTableColumns: getOrderedVisibleTableColumns([...nextVisibleColumns])
+    visibleTableColumns: getOrderedVisibleTableColumns(nextVisibleColumns)
   };
 };
 
 const commandMap = {
   'ChatDebug.appendStoredEventForTest': wrapCommand(appendStoredEventForTest),
+  'ChatDebug.appendStoredImageAttachmentForTest': wrapCommand(appendStoredImageAttachmentForTest),
   'ChatDebug.create': create,
   'ChatDebug.diff2': diff2,
   'ChatDebug.getCommandIds': getCommandIds,
@@ -4525,7 +5636,6 @@ const commandMap = {
   'ChatDebug.handleCloseDetails': wrapCommand(handleCloseDetails),
   'ChatDebug.handleDetailsContextMenu': wrapCommand(handleDetailsContextMenu),
   'ChatDebug.handleDetailsTopContextMenu': wrapCommand(handleDetailsTopContextMenu),
-  'ChatDebug.handleDetailTab': wrapCommand(handleDetailTab),
   'ChatDebug.handleEventCategoryFilter': wrapCommand(handleEventCategoryFilter),
   'ChatDebug.handleEventRowClick': wrapCommand(handleEventRowClick),
   'ChatDebug.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
@@ -4537,6 +5647,10 @@ const commandMap = {
   'ChatDebug.handleShowInputEvents': wrapCommand(handleShowInputEvents),
   'ChatDebug.handleShowResponsePartEvents': wrapCommand(handleShowResponsePartEvents),
   'ChatDebug.handleTableBodyContextMenu': wrapCommand(handleTableBodyContextMenu),
+  'ChatDebug.handleTableResizerPointerDown': wrapCommand(handleTableResizerPointerDown),
+  'ChatDebug.handleTableResizerPointerMove': wrapCommand(handleTableResizerPointerMove),
+  'ChatDebug.handleTableResizerPointerUp': wrapCommand(handleTableResizerPointerUp),
+  'ChatDebug.handleTableRowCopy': wrapCommand(handleTableRowCopy),
   'ChatDebug.handleTimelineContextMenu': wrapCommand(handleTimelineContextMenu),
   'ChatDebug.handleTimelineDoubleClick': wrapCommand(handleTimelineDoubleClick),
   'ChatDebug.handleTimelineEndSeconds': wrapCommand(handleTimelineEndSeconds),
@@ -4545,7 +5659,7 @@ const commandMap = {
   'ChatDebug.handleTimelinePointerUp': wrapCommand(handleTimelinePointerUp),
   'ChatDebug.handleTimelineRangePreset': wrapCommand(handleTimelineRangePreset),
   'ChatDebug.handleTimelineStartSeconds': wrapCommand(handleTimelineStartSeconds),
-  'ChatDebug.handleUseDevtoolsLayout': wrapCommand(handleUseDevtoolsLayout),
+  'ChatDebug.handleUseDevtoolsLayout': wrapCommand(setUseDevtoolsLayout),
   'ChatDebug.loadContent': wrapCommand(loadContent),
   'ChatDebug.loadContent2': wrapCommand(loadContent),
   'ChatDebug.refresh': wrapCommand(refresh),
@@ -4555,6 +5669,7 @@ const commandMap = {
   'ChatDebug.resetTableColumns': wrapCommand(resetTableColumns),
   'ChatDebug.resize': wrapCommand(resize),
   'ChatDebug.saveState': wrapGetter(saveState),
+  'ChatDebug.selectDetailTab': wrapCommand(selectDetailTab),
   'ChatDebug.setEvents': wrapCommand(setEvents),
   'ChatDebug.setSessionId': wrapCommand(setSessionId),
   'ChatDebug.terminate': terminate,