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

package/dist/chatDebugViewWorkerMain.js

@@ -1128,10 +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';
@@ -1310,6 +1310,54 @@ const appendStoredEventForTest = async (state, 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;
+};
+
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1332,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';
@@ -1403,6 +1452,9 @@ const fromSeconds = seconds => {
 const invalidSessionId = () => {
   return i18nString(InvalidSessionId);
 };
+const imageCouldNotBeLoaded = () => {
+  return i18nString(ImageCouldNotBeLoaded);
+};
 const invalidUriEncoding = () => {
   return i18nString(InvalidUriEncoding);
 };
@@ -1517,70 +1569,179 @@ const Preview = 'preview';
 const Payload = 'payload';
 const Timing = 'timing';
 
-const createDetailTabs = () => {
-  return [{
+const isDetailTab = value => {
+  return value === Response || value === Preview || value === Payload || value === Timing;
+};
+
+const getSafeSelectedDetailTab = selectedDetailTab => {
+  return isDetailTab(selectedDetailTab) ? selectedDetailTab : Response;
+};
+
+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
   }, {
+    isSelected: normalizedSelectedDetailTab === Payload,
     label: payload(),
     name: Payload
   }, {
+    isSelected: normalizedSelectedDetailTab === Response,
     label: response(),
     name: Response
-  }, {
-    label: timing(),
-    name: Timing
   }];
+  if (hasTimingTab) {
+    detailTabs.push({
+      isSelected: normalizedSelectedDetailTab === Timing,
+      label: timing(),
+      name: Timing
+    });
+  }
+  return detailTabs;
 };
-const isDetailTab = value => {
-  return value === Response || value === Preview || value === Payload || value === Timing;
+
+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 getSelectedDetailTab = (detailTabs, selectedDetailTab) => {
-  if (hasDetailTab(detailTabs, selectedDetailTab)) {
-    return selectedDetailTab;
+
+const selectDetailTab$1 = (detailTabs, selectedDetailTab) => {
+  if (!hasDetailTab(detailTabs, selectedDetailTab)) {
+    return detailTabs;
   }
-  const responseTab = detailTabs.find(detailTab => detailTab.name === Response);
-  if (responseTab) {
-    return responseTab.name;
+  return detailTabs.map(detailTab => {
+    const isSelectedProperty = detailTab.name === selectedDetailTab;
+    if (detailTab.isSelected === isSelectedProperty) {
+      return detailTab;
+    }
+    return {
+      ...detailTab,
+      isSelected: isSelectedProperty
+    };
+  });
+};
+
+const getEventCategoryFilterLabel = eventCategoryFilter => {
+  switch (eventCategoryFilter) {
+    case Network:
+      return network();
+    case Stream:
+      return stream();
+    case Tools:
+      return tools();
+    case Ui:
+      return ui();
+    default:
+      return all();
   }
-  return detailTabs[0]?.name ?? selectedDetailTab;
 };
 
-const createCategoryFilters = () => {
+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 getEventCategoryFilterLabel = eventCategoryFilter => {
-  switch (eventCategoryFilter) {
-    case Network:
-      return network();
-    case Stream:
-      return stream();
-    case Tools:
-      return tools();
-    case Ui:
-      return ui();
-    default:
-      return all();
+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+/;
@@ -1605,18 +1766,46 @@ 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 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 defaultTableColumnWidths = {
   duration: 110,
@@ -1732,20 +1921,23 @@ const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
 const isSavedState = value => {
   return typeof value === 'object' && value !== null;
 };
-const restoreEventCategoryFilter = (savedState, currentEventCategoryFilter) => {
+const restoreCategoryFilters = (savedState, currentCategoryFilters) => {
+  if (Array.isArray(savedState.eventCategoryFilters)) {
+    return selectCategoryFilters(currentCategoryFilters, savedState.eventCategoryFilters.filter(value => typeof value === 'string'));
+  }
   if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
-    return savedState.eventCategoryFilter;
+    return selectCategoryFilter(currentCategoryFilters, savedState.eventCategoryFilter);
   }
   if (typeof savedState.filterValue === 'string') {
-    return parseFilterValue(savedState.filterValue).eventCategoryFilter;
+    return selectCategoryFilter(currentCategoryFilters, parseFilterValue(savedState.filterValue).eventCategoryFilter);
   }
-  return currentEventCategoryFilter;
+  return currentCategoryFilters;
 };
 const restoreFilterValue = (savedState, currentFilterValue) => {
   return typeof savedState.filterValue === 'string' ? savedState.filterValue : currentFilterValue;
 };
-const restoreSelectedDetailTab = (savedState, currentSelectedDetailTab) => {
-  return typeof savedState.selectedDetailTab === 'string' && isDetailTab(savedState.selectedDetailTab) ? savedState.selectedDetailTab : currentSelectedDetailTab;
+const restoreDetailTabs = (savedState, currentDetailTabs) => {
+  return typeof savedState.selectedDetailTab === 'string' && isDetailTab(savedState.selectedDetailTab) ? selectDetailTab$1(currentDetailTabs, savedState.selectedDetailTab) : currentDetailTabs;
 };
 const restoreSelectedEventId = (savedState, currentSelectedEventId) => {
   return typeof savedState.selectedEventId === 'number' || savedState.selectedEventId === null ? savedState.selectedEventId : currentSelectedEventId;
@@ -1772,9 +1964,9 @@ const restoreSavedState = (state, savedState) => {
   }
   return {
     ...state,
-    eventCategoryFilter: restoreEventCategoryFilter(savedState, state.eventCategoryFilter),
+    categoryFilters: restoreCategoryFilters(savedState, state.categoryFilters),
+    detailTabs: restoreDetailTabs(savedState, state.detailTabs),
     filterValue: restoreFilterValue(savedState, state.filterValue),
-    selectedDetailTab: restoreSelectedDetailTab(savedState, state.selectedDetailTab),
     selectedEventId: restoreSelectedEventId(savedState, state.selectedEventId),
     tableColumnWidths: restoreTableColumnWidths(savedState, state.tableColumnWidths),
     timelineEndSeconds: restoreTimelineEndSeconds(savedState, state.timelineEndSeconds),
@@ -1792,22 +1984,153 @@ const {
   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: [],
+    categoryFilters: createCategoryFilters(),
     databaseName: 'lvce-chat-view-sessions',
     dataBaseVersion: 2,
-    detailTabs: [],
+    detailTabs: createDetailTabs(),
     errorMessage: '',
-    eventCategoryFilter: All,
     events: [],
     eventStoreName: 'chat-view-events',
     filterValue: '',
     height: 0,
     initial: false,
     platform: 0,
-    selectedDetailTab: Response,
+    sashPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null,
@@ -1816,10 +2139,13 @@ const createDefaultState = () => {
     showEventStreamFinishedEvents: false,
     showInputEvents: false,
     showResponsePartEvents: false,
+    tableColumns: [],
     tableColumnWidths: defaultTableColumnWidths,
     tableResizerDownId: 0,
     tableWidth: defaultTableWidth,
     timelineEndSeconds: '',
+    timelineEvents: [],
+    timelineInfo: emptyTimelineInfo,
     timelineSelectionActive: false,
     timelineSelectionAnchorSeconds: '',
     timelineSelectionFocusSeconds: '',
@@ -1847,6 +2173,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '
     platform,
     sessionId,
     sessionIdIndexName,
+    tableColumns: [],
     uid,
     uri,
     width,
@@ -1861,7 +2188,7 @@ const RenderCss = 2;
 const RenderIncremental = 3;
 
 const diff = (oldState, newState) => {
-  if (oldState.categoryFilters !== newState.categoryFilters || oldState.detailTabs !== newState.detailTabs || 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.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.selectedDetailTab !== newState.selectedDetailTab || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.width !== newState.width || oldState.uid !== newState.uid) {
+  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 [];
@@ -1887,71 +2214,12 @@ const handleHeaderContextMenu = async (state, eventX, eventY) => {
   return state;
 };
 
-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 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) => {
@@ -2083,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);
@@ -2097,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;
@@ -2117,14 +2391,108 @@ const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreNam
   return loadSelectedEvent$1(sessionId, eventId, type);
 };
 
+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 undefined;
+};
+const getMimeType = event => {
+  return typeof event.mimeType === 'string' ? event.mimeType : undefined;
+};
+const getAltText = event => {
+  return typeof event.name === 'string' && event.name ? event.name : 'image preview';
+};
+const isImageMimeType = mimeType => {
+  return typeof mimeType === 'string' && mimeType.startsWith('image/');
+};
+const shouldValidateImage = mimeType => {
+  return mimeType !== 'image/svg+xml';
+};
+const readBlobAsPreviewUrl = blob => {
+  if (typeof FileReaderSync === 'function') {
+    const reader = new FileReaderSync();
+    return reader.readAsDataURL(blob);
+  }
+  if (typeof URL.createObjectURL === 'function') {
+    return URL.createObjectURL(blob);
+  }
+  throw new Error('image preview reader is not available');
+};
+const validateImage = async blob => {
+  if (typeof createImageBitmap !== 'function') {
+    return;
+  }
+  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 {
+      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 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 = selectEventAtIndexDependencies) => {
+  const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
   const currentEvents = getCurrentEvents$3(state);
   const selectedEvent = currentEvents[selectedEventIndex];
   if (!selectedEvent) {
@@ -2144,22 +2512,17 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
     };
   }
   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;
@@ -2194,42 +2557,48 @@ const handleTableBodyContextMenu = async (state, eventX, eventY) => {
   return state;
 };
 
+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$1,
-      id: 'reset-columns',
-      label: resetColumns()
-    }];
+    return getMenuEntriesTableHeader(state);
   }
   if (props.menuId === MenuChatDebugTableBody) {
-    return [{
-      args: [props.eventIndex],
-      command: 'ChatDebug.handleTableRowCopy',
-      flags: None$1,
-      id: 'copy',
-      label: copy()
-    }];
+    return getMenuEntriesTableBody(props);
   }
   return [];
 };
@@ -2255,10 +2624,10 @@ const loadEventsDependencies = {
 };
 
 const ParseChatDebugUriErrorCode = {
-  InvalidSessionId: 'invalid-session-id',
-  InvalidUriEncoding: 'invalid-uri-encoding',
-  InvalidUriFormat: 'invalid-uri-format',
-  MissingUri: 'missing-uri'
+  InvalidSessionId: 1,
+  InvalidUriEncoding: 2,
+  InvalidUriFormat: 3,
+  MissingUri: 4
 };
 
 const ParseChatDebugUriResultType = {
@@ -2323,12 +2692,48 @@ const getInvalidUriMessage = (uri, code) => {
   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 {
+  return getStateWithTimelineInfo({
     ...state,
     errorMessage: getInvalidUriMessage(state.uri, parsed.code),
     events: [],
@@ -2337,7 +2742,7 @@ const getStateWithInvalidUri = state => {
     selectedEventId: null,
     selectedEventIndex: null,
     sessionId: ''
-  };
+  });
 };
 
 const getErrorMessage = error => {
@@ -2365,7 +2770,8 @@ const getSessionNotFoundMessage = 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);
 };
 
@@ -2397,9 +2803,10 @@ 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
   };
@@ -2414,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: [],
@@ -2423,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: [],
@@ -2438,15 +2845,15 @@ const loadEventsForSessionId = async (state, sessionId) => {
       selectedEventId: null,
       selectedEventIndex: null,
       sessionId
-    };
+    });
   }
-  const nextState = {
+  const nextState = getStateWithTimelineInfo({
     ...state,
     errorMessage: '',
     events,
     initial: false,
     sessionId
-  };
+  });
   return restoreSelectedEvent(nextState);
 };
 
@@ -2498,14 +2905,19 @@ 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);
 };
 
@@ -2553,19 +2965,24 @@ const getPreservedSelectedEventIndex$1 = (oldState, newState) => {
 };
 
 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);
 };
@@ -2600,7 +3017,8 @@ const getBoolean = value => {
 };
 
 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 => {
@@ -2664,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
@@ -2681,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);
   }
@@ -2761,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)
@@ -2781,7 +3217,13 @@ const handleSashPointerMove = (state, eventX, eventY) => {
 };
 
 const handleSashPointerUp = (state, eventX, eventY) => {
-  return state;
+  if (!state.sashPointerActive) {
+    return state;
+  }
+  return {
+    ...state,
+    sashPointerActive: false
+  };
 };
 
 const getTableResizerId = name => {
@@ -2837,12 +3279,12 @@ const handleTimelineContextMenu = state => {
 };
 
 const clearTimelineSelectionState = state => {
-  return {
+  return getStateWithTimelineInfo({
     ...state,
     timelineSelectionActive: false,
     timelineSelectionAnchorSeconds: '',
     timelineSelectionFocusSeconds: ''
-  };
+  });
 };
 
 const parseTimelineRangePreset = value => {
@@ -2885,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 => {
@@ -2904,12 +3340,6 @@ 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) {
@@ -2930,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);
   }
@@ -3023,14 +3479,16 @@ const loadContent = async (state, savedState) => {
   const nextState = await loadEventsFromUri(restoreSavedState(state, savedState));
   return {
     ...nextState,
-    categoryFilters: createCategoryFilters(),
-    detailTabs: createDetailTabs()
+    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;
@@ -3058,6 +3516,11 @@ const getCss = state => {
   min-width: 0;
 }
 
+.ChatDebugViewFilterInput--devtools {
+  flex: 1 1 220px;
+  min-width: 180px;
+}
+
 .ChatDebugViewTableWrapper {
   position: relative;
   width: min(100%, var(--ChatDebugViewTableWidth));
@@ -3168,50 +3631,227 @@ const getCss = state => {
   flex: none;
 }
 
-.row {
-  flex-shrink: 0;
-  min-width: 0;
+.row {
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+.ChatDebugViewRefreshButton {
+  display: inline-flex;
+  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);
+  border-radius: 6px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+.ChatDebugViewRefreshButton:hover {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
+  border-color: rgba(255, 255, 255, 0.24);
+}
+
+.ChatDebugViewRefreshButton:active {
+  transform: translateY(1px);
+}
+
+.ChatDebugViewRefreshButton:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.4);
+  outline-offset: 1px;
+}
+
+.ChatDebugViewEventRow:hover {
+  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;
 }
 
-.ChatDebugViewRefreshButton {
-  display: inline-flex;
-  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);
-  border-radius: 6px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
-  color: inherit;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+.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);
 }
 
-.ChatDebugViewRefreshButton:hover {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
-  border-color: rgba(255, 255, 255, 0.24);
+.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;
 }
 
-.ChatDebugViewRefreshButton:active {
-  transform: translateY(1px);
+.ChatDebugViewTimelineSelectionHandle:hover::before {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));
 }
 
-.ChatDebugViewRefreshButton:focus-visible {
-  outline: 2px solid rgba(255, 255, 255, 0.4);
+.ChatDebugViewTimelineSelectionHandle:focus-visible {
+  outline: 2px solid var(--vscode-focusBorder, rgba(255, 255, 255, 0.45));
   outline-offset: 1px;
 }
-
-.ChatDebugViewEventRow:hover {
-  background: var(--ListHoverBackground);
-  color: var(--ListHoverForeground);
-}
 `;
 };
 
@@ -3546,8 +4186,10 @@ 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';
@@ -3573,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';
@@ -3600,16 +4243,18 @@ const TokenNumeric = 'Token TokenNumeric';
 const TokenString = 'Token TokenString';
 const TokenText = 'Token TokenText';
 
+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;
@@ -3629,23 +4274,23 @@ const HandleTimelinePointerDown = 17;
 const HandleTimelinePointerMove = 18;
 const HandleTimelinePointerUp = 19;
 const HandleTimelineDoubleClick = 20;
-const HandleTableKeyDown = 21;
 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) => {
@@ -3696,8 +4341,10 @@ const getTabId = detailTab => {
   return `ChatDebugViewDetailsTab-${detailTab}`;
 };
 
-const getDetailTabDom = (detailTab, selectedDetailTab) => {
-  const isSelected = detailTab.name === selectedDetailTab;
+const getDetailTabDom = detailTab => {
+  const {
+    isSelected
+  } = detailTab;
   return [{
     'aria-controls': getPanelId(detailTab.name),
     'aria-selected': isSelected,
@@ -3713,10 +4360,15 @@ const getDetailTabDom = (detailTab, selectedDetailTab) => {
     value: detailTab.name
   }, text(detailTab.label)];
 };
-const getTabNodes = (detailTabs, selectedDetailTab) => {
-  return detailTabs.flatMap(detailTab => {
-    return getDetailTabDom(detailTab, selectedDetailTab);
-  });
+
+const getTabNodes = detailTabs => {
+  return [{
+    'aria-label': detailSections(),
+    childCount: detailTabs.length,
+    className: ChatDebugViewDetailsTabs,
+    role: 'tablist',
+    type: Div
+  }, ...detailTabs.flatMap(getDetailTabDom)];
 };
 
 const getDurationText = event => {
@@ -3769,20 +4421,23 @@ const getStartText = event => {
   return getTimestampText(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
 };
 
+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 [{
-    childCount: 2,
-    className: ChatDebugViewTimingRow,
-    type: Div
-  }, {
-    childCount: 1,
-    className: ChatDebugViewTimingLabel,
-    type: Span
-  }, text(label), {
-    childCount: 1,
-    className: ChatDebugViewTimingValue,
-    type: Span
-  }, text(value)];
+  return [timingRowNode, timingLabelNode, text(label), timingValueNode, text(value)];
 };
 
 const getTimingDetailsDom = event => {
@@ -3793,12 +4448,23 @@ const getTimingDetailsDom = event => {
   }, ...getTimingRowDom(started(), getStartText(event)), ...getTimingRowDom(ended(), getEndText(event)), ...getTimingRowDom(duration(), getDurationText(event))];
 };
 
-const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs(), selectedDetailTab = Response) => {
+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, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs()) => {
   if (previewEventNodes.length === 0 && payloadEventNodes.length === 0 && responseEventNodes.length === 0) {
     return [];
   }
-  const safeSelectedDetailTab = getSelectedDetailTab(detailTabs, selectedDetailTab);
-  const contentNodes = safeSelectedDetailTab === Timing && selectedEvent ? getTimingDetailsDom(selectedEvent) : safeSelectedDetailTab === Preview ? previewEventNodes : safeSelectedDetailTab === Payload ? payloadEventNodes : responseEventNodes;
+  const normalizedDetailTabs = selectedEvent ? createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent) : detailTabs;
+  const {
+    contentNodes,
+    safeSelectedDetailTab
+  } = getContentNode(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, normalizedDetailTabs);
   return [{
     childCount: 2,
     className: ChatDebugViewDetails,
@@ -3817,13 +4483,7 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
     onClick: HandleCloseDetails,
     type: Button$1,
     value: 'close'
-  }, {
-    'aria-label': detailSections(),
-    childCount: detailTabs.length,
-    className: ChatDebugViewDetailsTabs,
-    role: 'tablist',
-    type: Div
-  }, ...getTabNodes(detailTabs, safeSelectedDetailTab), {
+  }, ...getTabNodes(normalizedDetailTabs), {
     'aria-labelledby': getTabId(safeSelectedDetailTab),
     childCount: 1,
     className: ChatDebugViewDetailsBottom,
@@ -3961,12 +4621,13 @@ const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defau
   });
 };
 
+const emptyStateNode = {
+  childCount: 1,
+  className: ChatDebugViewEmpty,
+  type: Div
+};
 const getEmptyStateDom = emptyMessage => {
-  return [{
-    childCount: 1,
-    className: ChatDebugViewEmpty,
-    type: Div
-  }, text(emptyMessage)];
+  return [emptyStateNode, text(emptyMessage)];
 };
 
 const getLineNodeDom = (line, index) => {
@@ -4257,7 +4918,12 @@ const getWriteFilePreviewText = (event, name) => {
   }
   return content;
 };
+
 const getPreviewEvent = event => {
+  const selectedEventPreview = getSelectedEventPreview(event);
+  if (selectedEventPreview !== undefined) {
+    return selectedEventPreview;
+  }
   const previewMessageText = getPreviewMessageText(event);
   if (previewMessageText !== undefined) {
     return previewMessageText;
@@ -4270,20 +4936,75 @@ const getPreviewEvent = 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) => {
@@ -4296,8 +5017,8 @@ const getTableBodyDom = (rowNodes, eventCount) => {
   }, ...rowNodes];
 };
 
-const getHeaderCellNodes = visibleTableColumns => {
-  const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
+const getHeaderCellNodes = (visibleTableColumns, tableColumns = createTableColumns()) => {
+  const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns, tableColumns);
   return orderedVisibleTableColumns.flatMap((column, index) => {
     const isFixed = index < orderedVisibleTableColumns.length - 1;
     switch (column) {
@@ -4307,29 +5028,29 @@ const getHeaderCellNodes = visibleTableColumns => {
           className: mergeClassNames(ChatDebugViewHeaderCell, ChatDebugViewHeaderCellDuration, isFixed ? ChatDebugViewColumnFixed : ''),
           scope: 'col',
           type: Th
-        }, text(duration())];
+        }, text(getTableColumnLabel(tableColumns, column))];
       case Status:
         return [{
           childCount: 1,
           className: mergeClassNames(ChatDebugViewHeaderCell, ChatDebugViewHeaderCellStatus, isFixed ? ChatDebugViewColumnFixed : ''),
           scope: 'col',
           type: Th
-        }, text(status())];
+        }, text(getTableColumnLabel(tableColumns, column))];
       case Type:
         return [{
           childCount: 1,
           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,
@@ -4370,7 +5091,7 @@ const getTableResizersDom = visibleTableColumns => {
   }, ...resizerNodes];
 };
 
-const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns) => {
+const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns()) => {
   const resizerNodes = getTableResizersDom(visibleTableColumns);
   return [{
     childCount: 1 + (resizerNodes.length > 0 ? 1 : 0),
@@ -4380,26 +5101,7 @@ const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleT
     childCount: 2,
     className: ChatDebugViewTable,
     type: Table
-  }, ...getTableHeaderDom(visibleTableColumns), ...getTableBodyDom(rowNodes, eventCount), ...resizerNodes];
-};
-
-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];
+  }, ...getTableHeaderDom(visibleTableColumns, tableColumns), ...getTableBodyDom(rowNodes, eventCount), ...resizerNodes];
 };
 
 const getBucketUnitDom = (unitCount, presetValue) => {
@@ -4441,19 +5143,6 @@ const getBucketDom = bucket => {
   }, ...getBucketUnitDom(bucket.unitCount, presetValue)];
 };
 
-const getEffectiveTimelineRange = (timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds) => {
-  if (!timelineSelectionActive) {
-    return {
-      endSeconds: timelineEndSeconds,
-      startSeconds: timelineStartSeconds
-    };
-  }
-  return {
-    endSeconds: timelineSelectionFocusSeconds,
-    startSeconds: timelineSelectionAnchorSeconds
-  };
-};
-
 const formatPercent = value => {
   return `${Number(value.toFixed(3))}%`;
 };
@@ -4469,81 +5158,21 @@ const getSelectionNodesDom = (hasSelection, selectionStartPercent, selectionEndP
     type: Div
   }, {
     childCount: 0,
-    className: mergeClassNames(ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
+    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
+    name: Start,
+    role: None,
     style: `left:${formatPercent(selectionStartPercent)};`,
-    type: Div
+    type: Button$1
   }, {
     childCount: 0,
-    className: mergeClassNames(ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
+    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
+    name: End,
+    role: None,
     style: `left:${formatPercent(selectionEndPercent)};`,
-    type: Div
+    type: Button$1
   }];
 };
 
-const getSelectionPercent = (value, durationSeconds) => {
-  if (durationSeconds <= 0) {
-    return 0;
-  }
-  return Number((value / durationSeconds * 100).toFixed(3));
-};
-
-const maxBarUnits = 8;
-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 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 formatTimelineSeconds = value => {
   if (Number.isInteger(value)) {
     return `${value}s`;
@@ -4551,17 +5180,14 @@ 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 [];
   }
@@ -4579,7 +5205,7 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
     childCount: 1,
     className: ChatDebugViewTimelineSummary,
     type: H2
-  }, text(getTimelineSummary(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds)), {
+  }, text(getTimelineSummary(timelineInfo)), {
     childCount: 2,
     className: ChatDebugViewTimelineInteractive,
     onDoubleClick: HandleTimelineDoubleClick,
@@ -4596,18 +5222,19 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
   }, ...selectionNodes];
 };
 
-const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response, visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs()) => {
+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 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 = typeof previewEvent === 'string' ? getTextNode(previewEvent) : previewEvent === undefined ? [] : getEventNode(previewEvent);
+  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 safeSelectedDetailTab = getSelectedDetailTab(detailTabs, selectedDetailTab);
-  const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs, safeSelectedDetailTab);
+  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);
@@ -4624,7 +5251,6 @@ const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvent
   }, {
     childCount: 1,
     className: eventsClassName,
-    onKeyDown: HandleTableKeyDown,
     role: 'application',
     tabIndex: 0,
     type: Div
@@ -4652,27 +5278,30 @@ const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
   }, text(errorMessage || emptyMessage)] : eventNodes)];
 };
 
-const getQuickFilterNodes = (eventCategoryFilter, categoryFilters) => {
+// cspell:ignore multiselectable
+const getQuickFilterNodes = categoryFilters => {
   return [{
+    'aria-multiselectable': true,
     childCount: categoryFilters.length,
     className: ChatDebugViewQuickFilters,
+    onClick: HandleEventCategoryFilter,
+    role: 'listbox',
     type: Div
   }, ...categoryFilters.flatMap(categoryFilter => {
-    const isSelected = categoryFilter.name === eventCategoryFilter;
+    const {
+      isSelected,
+      label,
+      name
+    } = categoryFilter;
     return [{
-      childCount: 2,
+      'aria-selected': isSelected,
+      childCount: 1,
       className: mergeClassNames(ChatDebugViewQuickFilterPill, isSelected ? ChatDebugViewQuickFilterPillSelected : ''),
-      type: Label
-    }, {
-      checked: isSelected,
-      childCount: 0,
-      className: ChatDebugViewQuickFilterInput,
-      inputType: 'radio',
-      name: EventCategoryFilter,
-      onChange: HandleEventCategoryFilter,
-      type: Input,
-      value: categoryFilter.name
-    }, text(categoryFilter.label)];
+      'data-value': name,
+      onClick: HandleEventCategoryFilter,
+      role: 'option',
+      type: Div
+    }, text(label)];
   })];
 };
 
@@ -4691,14 +5320,21 @@ const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds)
   return '';
 };
 
-const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, categoryFilters, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response, visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs()) => {
+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);
@@ -4711,11 +5347,11 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, cat
   const hasFilterValue = filterDescriptionParts.length > 0;
   const filterDescription = filterDescriptionParts.join(' ');
   const noFilteredEventsMessage = noEventsFoundMatching(filterDescription);
-  const useNoToolCallEventsMessage = eventCategoryFilter === Tools && !trimmedFilterValue && !hasTimelineFilter;
+  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, getSelectedDetailTab(detailTabs, selectedDetailTab), visibleTableColumns, detailTabs) : getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
-  const quickFilterNodes = useDevtoolsLayout ? getQuickFilterNodes(eventCategoryFilter, categoryFilters) : [];
+  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 [{
@@ -4737,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.categoryFilters, 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, newState.detailTabs);
+  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];
 };
 
@@ -4813,7 +5448,7 @@ const renderEventListeners = () => {
     params: ['handleInput', TargetName, TargetValue]
   }, {
     name: HandleEventCategoryFilter,
-    params: ['handleEventCategoryFilter', TargetValue]
+    params: ['handleEventCategoryFilter', 'event.target.dataset.value', 'event.ctrlKey', 'event.metaKey']
   }, {
     name: SelectDetailTab,
     params: ['selectDetailTab', TargetValue]
@@ -4826,9 +5461,6 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickRefresh,
     params: ['handleClickRefresh']
-  }, {
-    name: HandleTableKeyDown,
-    params: ['handleTableKeyDown', 'event.key']
   }, {
     name: HandleSashPointerDown,
     params: ['handleSashPointerDown', ClientX, ClientY],
@@ -4851,7 +5483,7 @@ const renderEventListeners = () => {
     params: ['handleTableResizerPointerUp']
   }, {
     name: HandleTimelinePointerDown,
-    params: ['handleTimelinePointerDown', ClientX],
+    params: ['handleTimelinePointerDown', TargetName, ClientX],
     trackPointerEvents: [HandleTimelinePointerMove, HandleTimelinePointerUp]
   }, {
     name: HandleTimelinePointerMove,
@@ -4907,9 +5539,9 @@ const resize = (state, dimensions) => {
 
 const saveState = state => {
   const {
-    eventCategoryFilter,
+    categoryFilters,
+    detailTabs,
     filterValue,
-    selectedDetailTab,
     selectedEventId,
     sessionId,
     tableColumnWidths,
@@ -4918,9 +5550,10 @@ const saveState = state => {
     visibleTableColumns
   } = state;
   return {
-    eventCategoryFilter,
+    eventCategoryFilter: getSelectedEventCategoryFilter(categoryFilters),
+    eventCategoryFilters: getSelectedEventCategoryFilters(categoryFilters),
     filterValue,
-    selectedDetailTab,
+    selectedDetailTab: getSelectedDetailTab(detailTabs),
     selectedEventId,
     sessionId,
     tableColumnWidths,
@@ -4931,7 +5564,7 @@ const saveState = state => {
 };
 
 const setEvents = (state, events) => {
-  return {
+  return getStateWithTimelineInfo({
     ...state,
     errorMessage: '',
     events,
@@ -4939,7 +5572,7 @@ const setEvents = (state, events) => {
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null
-  };
+  });
 };
 
 const setSessionIdDependencies = {
@@ -4984,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,