@lvce-editor/chat-debug-view 4.1.0 → 5.1.0

package/dist/chatDebugViewWorkerMain.js

@@ -955,36 +955,25 @@ const terminate = () => {
   globalThis.close();
 };
 
-const {
-  get,
-  getCommandIds,
-  registerCommands,
-  set,
-  wrapCommand,
-  wrapGetter
-} = create$1();
+const createEventCategoryFilterOptions = () => {
+  return [{
+    label: 'All',
+    value: All
+  }, {
+    label: 'Tools',
+    value: Tools
+  }, {
+    label: 'Network',
+    value: Network
+  }, {
+    label: 'UI',
+    value: Ui
+  }, {
+    label: 'Stream',
+    value: Stream
+  }];
+};
 
-const All = 'all';
-const Tools = 'tools';
-const Network = 'network';
-const Ui = 'ui';
-const Stream = 'stream';
-const options = [{
-  label: 'All',
-  value: All
-}, {
-  label: 'Tools',
-  value: Tools
-}, {
-  label: 'Network',
-  value: Network
-}, {
-  label: 'UI',
-  value: Ui
-}, {
-  label: 'Stream',
-  value: Stream
-}];
 const getEventCategoryFilterLabel = eventCategoryFilter => {
   switch (eventCategoryFilter) {
     case Network:
@@ -1000,6 +989,84 @@ const getEventCategoryFilterLabel = eventCategoryFilter => {
   }
 };
 
+const All = 'all';
+const Tools = 'tools';
+const Network = 'network';
+const Ui = 'ui';
+const Stream = 'stream';
+
+const RE_SPACE = /\s+/;
+const tokenToEventCategoryFilter = new Map([['@tools', Tools], ['@network', Network], ['@ui', Ui], ['@stream', Stream]]);
+const parseFilterValue = filterValue => {
+  const normalizedFilter = filterValue.trim().toLowerCase();
+  if (!normalizedFilter) {
+    return {
+      eventCategoryFilter: All,
+      filterText: ''
+    };
+  }
+  const parts = normalizedFilter.split(RE_SPACE);
+  const eventCategoryFilter = parts.map(part => tokenToEventCategoryFilter.get(part)).find(Boolean) || All;
+  const filterText = parts.filter(part => !tokenToEventCategoryFilter.has(part)).join(' ');
+  return {
+    eventCategoryFilter,
+    filterText
+  };
+};
+
+const {
+  get,
+  getCommandIds,
+  registerCommands,
+  set,
+  wrapCommand,
+  wrapGetter
+} = create$1();
+
+const Response = 'response';
+const Preview = 'preview';
+const Timing = 'timing';
+const detailTabs = [Response, Preview, Timing];
+const isDetailTab = value => {
+  return value === Response || value === Preview || value === Timing;
+};
+const getDetailTabLabel = value => {
+  if (value === Preview) {
+    return 'Preview';
+  }
+  if (value === Timing) {
+    return 'Timing';
+  }
+  return 'Response';
+};
+
+const defaultTableWidth = 480;
+const minTableWidth = 240;
+const minDetailsWidth = 280;
+const sashWidth = 8;
+const viewPadding = 8;
+const timelineHorizontalPadding = 10;
+const horizontalPadding = viewPadding * 2;
+const leftPadding = viewPadding;
+const getMainWidth = width => {
+  return Math.max(0, width - horizontalPadding);
+};
+const clampTableWidth = (width, tableWidth) => {
+  const mainWidth = getMainWidth(width);
+  const maxTableWidth = Math.max(0, mainWidth - minDetailsWidth - sashWidth);
+  const minClampedTableWidth = Math.min(minTableWidth, maxTableWidth);
+  return Math.max(minClampedTableWidth, Math.min(tableWidth, maxTableWidth));
+};
+const getDetailsWidth = (width, tableWidth) => {
+  const mainWidth = getMainWidth(width);
+  const clampedTableWidth = clampTableWidth(width, tableWidth);
+  return Math.max(0, mainWidth - clampedTableWidth - sashWidth);
+};
+const getTableWidthFromClientX = (viewX, width, clientX) => {
+  const nextTableWidth = clientX - viewX - leftPadding;
+  return clampTableWidth(width, nextTableWidth);
+};
+
 const createDefaultState = () => {
   return {
     assetDir: '',
@@ -1007,42 +1074,75 @@ const createDefaultState = () => {
     dataBaseVersion: 2,
     errorMessage: '',
     eventCategoryFilter: All,
+    eventCategoryFilterOptions: createEventCategoryFilterOptions(),
     events: [],
     eventStoreName: 'chat-view-events',
     filterValue: '',
     height: 0,
+    indexedDbSupportOverride: undefined,
     initial: false,
     platform: 0,
+    selectedDetailTab: Response,
+    selectedEvent: null,
+    selectedEventId: null,
     selectedEventIndex: null,
     sessionId: '',
     sessionIdIndexName: 'sessionId',
     showEventStreamFinishedEvents: false,
     showInputEvents: false,
     showResponsePartEvents: false,
+    tableWidth: defaultTableWidth,
     timelineEndSeconds: '',
+    timelineSelectionActive: false,
+    timelineSelectionAnchorSeconds: '',
+    timelineSelectionFocusSeconds: '',
     timelineStartSeconds: '',
     uid: 0,
     uri: '',
-    useDevtoolsLayout: false,
+    useDevtoolsLayout: true,
     width: 0,
     x: 0,
     y: 0
   };
 };
 
+const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
+const getRestoredEventCategoryFilter = savedState => {
+  if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
+    return savedState.eventCategoryFilter;
+  }
+  if (typeof savedState.filterValue === 'string') {
+    return parseFilterValue(savedState.filterValue).eventCategoryFilter;
+  }
+  return All;
+};
 const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '', databaseName = 'lvce-chat-view-sessions', dataBaseVersion = 2, eventStoreName = 'chat-view-events', sessionIdIndexName = 'sessionId', savedState = {}) => {
+  const defaultState = createDefaultState();
+  const {
+    filterValue,
+    selectedEventId,
+    tableWidth,
+    timelineEndSeconds,
+    timelineStartSeconds
+  } = savedState;
+  const restoredEventCategoryFilter = getRestoredEventCategoryFilter(savedState);
   const state = {
-    ...createDefaultState(),
-    ...savedState,
+    ...defaultState,
     assetDir,
     databaseName,
     dataBaseVersion,
+    eventCategoryFilter: restoredEventCategoryFilter,
     eventStoreName,
+    filterValue: filterValue ?? defaultState.filterValue,
     height,
     initial: true,
     platform,
+    selectedEventId: selectedEventId ?? defaultState.selectedEventId,
     sessionId,
     sessionIdIndexName,
+    tableWidth: tableWidth ?? defaultState.tableWidth,
+    timelineEndSeconds: timelineEndSeconds ?? defaultState.timelineEndSeconds,
+    timelineStartSeconds: timelineStartSeconds ?? defaultState.timelineStartSeconds,
     uid,
     uri,
     width,
@@ -1057,7 +1157,7 @@ const RenderCss = 2;
 const RenderIncremental = 3;
 
 const diff = (oldState, newState) => {
-  if (oldState.errorMessage !== newState.errorMessage || oldState.eventCategoryFilter !== newState.eventCategoryFilter || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.uid !== newState.uid) {
+  if (oldState.errorMessage !== newState.errorMessage || oldState.eventCategoryFilter !== newState.eventCategoryFilter || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.selectedDetailTab !== newState.selectedDetailTab || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.width !== newState.width || oldState.uid !== newState.uid) {
     return [RenderIncremental, RenderCss];
   }
   return [];
@@ -1071,77 +1171,89 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
-const parseSelectedEventIndex$1 = value => {
-  const parsed = Number.parseInt(value, 10);
-  if (Number.isNaN(parsed) || parsed < 0) {
-    return null;
+const hasMatchingToolName$1 = (startedEvent, finishedEvent) => {
+  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
+    return startedEvent.toolName === finishedEvent.toolName;
   }
-  return parsed;
+  return true;
 };
-const handleEventRowClick = (state, value) => {
-  const selectedEventIndex = parseSelectedEventIndex$1(value);
-  if (selectedEventIndex === null) {
-    return state;
-  }
-  return {
-    ...state,
-    selectedEventIndex
-  };
+
+const isMatchingToolExecutionPair = (startedEvent, finishedEvent) => {
+  return startedEvent.sessionId === finishedEvent.sessionId && hasMatchingToolName$1(startedEvent, finishedEvent);
 };
 
-const startedEventType = 'tool-execution-started';
-const finishedEventType = 'tool-execution-finished';
+const startedEventType$1 = 'tool-execution-started';
+const finishedEventType$1 = 'tool-execution-finished';
 const mergedEventType = 'tool-execution';
+
+const isToolExecutionFinishedEvent = event => {
+  return event.type === finishedEventType$1;
+};
+
+const isToolExecutionStartedEvent = event => {
+  return event.type === startedEventType$1;
+};
+
+const getTimestamp$1 = value => {
+  return typeof value === 'string' || typeof value === 'number' ? value : undefined;
+};
+
+const getEndedTimestamp = event => {
+  return getTimestamp$1(event.ended) ?? getTimestamp$1(event.endTime) ?? getTimestamp$1(event.endTimestamp) ?? getTimestamp$1(event.timestamp);
+};
+
 const eventStableIds = new WeakMap();
-let nextStableEventId = 1;
+const eventStableIdState = {
+  nextStableEventId: 1
+};
+
 const getOrCreateStableEventId = event => {
   const existingStableEventId = eventStableIds.get(event);
   if (existingStableEventId) {
     return existingStableEventId;
   }
-  const stableEventId = `event-${nextStableEventId++}`;
+  const stableEventId = `event-${eventStableIdState.nextStableEventId++}`;
   eventStableIds.set(event, stableEventId);
   return stableEventId;
 };
-const setStableEventId = (event, stableEventId) => {
-  eventStableIds.set(event, stableEventId);
-};
+
 const getStartedTimestamp = event => {
-  return event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp;
-};
-const getEndedTimestamp = event => {
-  return event.ended ?? event.endTime ?? event.endTimestamp ?? event.timestamp;
-};
-const isToolExecutionStartedEvent = event => {
-  return event.type === startedEventType;
-};
-const isToolExecutionFinishedEvent = event => {
-  return event.type === finishedEventType;
-};
-const hasMatchingToolName = (startedEvent, finishedEvent) => {
-  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
-    return startedEvent.toolName === finishedEvent.toolName;
-  }
-  return true;
+  return getTimestamp$1(event.started) ?? getTimestamp$1(event.startTime) ?? getTimestamp$1(event.startTimestamp) ?? getTimestamp$1(event.timestamp);
 };
-const isMatchingToolExecutionPair = (startedEvent, finishedEvent) => {
-  return startedEvent.sessionId === finishedEvent.sessionId && hasMatchingToolName(startedEvent, finishedEvent);
+
+const setStableEventId = (event, stableEventId) => {
+  eventStableIds.set(event, stableEventId);
 };
-const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
+
+const mergeToolExecutionEvents$1 = (startedEvent, finishedEvent) => {
+  const ended = getEndedTimestamp(finishedEvent);
+  const {
+    eventId
+  } = startedEvent;
+  const started = getStartedTimestamp(startedEvent);
   const mergedEvent = {
     ...startedEvent,
     ...finishedEvent,
-    ended: getEndedTimestamp(finishedEvent),
-    started: getStartedTimestamp(startedEvent),
+    ...(ended === undefined ? {} : {
+      ended
+    }),
+    ...(eventId === undefined ? {} : {
+      eventId
+    }),
+    ...(started === undefined ? {} : {
+      started
+    }),
     type: mergedEventType
   };
   const stableEventId = `${getOrCreateStableEventId(startedEvent)}:${getOrCreateStableEventId(finishedEvent)}`;
   setStableEventId(mergedEvent, stableEventId);
   return mergedEvent;
 };
+
 const getStableEventId = event => {
   return getOrCreateStableEventId(event);
 };
+
 const collapseToolExecutionEvents = events => {
   const collapsedEvents = [];
   for (let i = 0; i < events.length; i++) {
@@ -1149,7 +1261,7 @@ const collapseToolExecutionEvents = events => {
     if (isToolExecutionStartedEvent(event)) {
       const nextEvent = events[i + 1];
       if (nextEvent && isToolExecutionFinishedEvent(nextEvent) && isMatchingToolExecutionPair(event, nextEvent)) {
-        collapsedEvents.push(mergeToolExecutionEvents(event, nextEvent));
+        collapsedEvents.push(mergeToolExecutionEvents$1(event, nextEvent));
         i++;
         continue;
       }
@@ -1159,43 +1271,43 @@ const collapseToolExecutionEvents = events => {
   return collapsedEvents;
 };
 
-const getBoolean = value => {
-  return value === true || value === 'true' || value === 'on' || value === '1';
+const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
+  return events.filter(event => {
+    if (!showInputEvents && event.type === 'handle-input') {
+      return false;
+    }
+    if (!showResponsePartEvents && event.type === 'sse-response-part') {
+      return false;
+    }
+    if (!showEventStreamFinishedEvents && event.type === 'event-stream-finished') {
+      return false;
+    }
+    // hide session creation events by default — not useful in the debug view
+    if (event.type === 'chat-session-created') {
+      return false;
+    }
+    return true;
+  });
 };
 
-const RE_SPACE = /\s+/;
-const tokenToEventCategoryFilter = new Map([['@tools', Tools], ['@network', Network], ['@ui', Ui], ['@stream', Stream]]);
-const parseFilterValue = filterValue => {
-  const normalizedFilter = filterValue.trim().toLowerCase();
-  if (!normalizedFilter) {
-    return {
-      eventCategoryFilter: All,
-      filterText: ''
-    };
-  }
-  const parts = normalizedFilter.split(RE_SPACE);
-  const eventCategoryFilter = parts.map(part => tokenToEventCategoryFilter.get(part)).find(Boolean) || All;
-  const filterText = parts.filter(part => !tokenToEventCategoryFilter.has(part)).join(' ');
-  return {
-    eventCategoryFilter,
-    filterText
-  };
+const isNetworkEvent = event => {
+  const normalizedType = event.type.toLowerCase();
+  return normalizedType === 'request' || normalizedType === 'response' || normalizedType === 'handle-response' || normalizedType.includes('fetch') || normalizedType.includes('xhr');
+};
+
+const isStreamEvent = event => {
+  return event.type === 'sse-response-part' || event.type === 'event-stream-finished';
 };
 
 const toolEventTypePrefix = 'tool-execution';
 const isToolEvent = event => {
   return event.type.startsWith(toolEventTypePrefix);
 };
-const isNetworkEvent = event => {
-  const normalizedType = event.type.toLowerCase();
-  return normalizedType === 'request' || normalizedType === 'response' || normalizedType === 'handle-response' || normalizedType.includes('fetch') || normalizedType.includes('xhr');
-};
+
 const isUiEvent = event => {
   return event.type.startsWith('handle-') && event.type !== 'handle-response';
 };
-const isStreamEvent = event => {
-  return event.type === 'sse-response-part' || event.type === 'event-stream-finished';
-};
+
 const matchesEventCategoryFilter = (event, eventCategoryFilter) => {
   switch (eventCategoryFilter) {
     case Network:
@@ -1210,24 +1322,7 @@ const matchesEventCategoryFilter = (event, eventCategoryFilter) => {
       return true;
   }
 };
-const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
-  return events.filter(event => {
-    if (!showInputEvents && event.type === 'handle-input') {
-      return false;
-    }
-    if (!showResponsePartEvents && event.type === 'sse-response-part') {
-      return false;
-    }
-    if (!showEventStreamFinishedEvents && event.type === 'event-stream-finished') {
-      return false;
-    }
-    // hide session creation events by default — not useful in the debug view
-    if (event.type === 'chat-session-created') {
-      return false;
-    }
-    return true;
-  });
-};
+
 const getFilteredEvents = (events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
   const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
   const collapsedEvents = collapseToolExecutionEvents(visibleEvents);
@@ -1287,6 +1382,21 @@ const getEventsWithTime = events => {
     }];
   });
 };
+const getTimelineDurationSeconds = events => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return 0;
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  return roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
+};
+const getSelectionPercent = (value, durationSeconds) => {
+  if (durationSeconds <= 0) {
+    return 0;
+  }
+  return Number((value / durationSeconds * 100).toFixed(3));
+};
 const getNormalizedRange = (durationSeconds, startValue, endValue) => {
   const parsedStart = parseTimelineSeconds(startValue);
   const parsedEnd = parseTimelineSeconds(endValue);
@@ -1331,6 +1441,8 @@ const getTimelineInfo = (events, startValue, endValue) => {
       durationSeconds: 0,
       endSeconds: null,
       hasSelection: false,
+      selectionEndPercent: null,
+      selectionStartPercent: null,
       startSeconds: null
     };
   }
@@ -1350,6 +1462,8 @@ const getTimelineInfo = (events, startValue, endValue) => {
     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;
@@ -1369,235 +1483,87 @@ const getTimelineInfo = (events, startValue, endValue) => {
     durationSeconds,
     endSeconds: range.endSeconds,
     hasSelection: range.hasSelection,
+    selectionEndPercent,
+    selectionStartPercent,
     startSeconds: range.startSeconds
   };
 };
 
-const Filter = 'filter';
-const EventCategoryFilter = 'eventCategoryFilter';
-const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
-const ShowInputEvents = 'showInputEvents';
-const ShowResponsePartEvents = 'showResponsePartEvents';
-const UseDevtoolsLayout = 'useDevtoolsLayout';
-const SelectedEventIndex = 'selectedEventIndex';
-const CloseDetails = 'closeDetails';
-const TimelineStartSeconds = 'timelineStartSeconds';
-const TimelineEndSeconds = 'timelineEndSeconds';
-const TimelineRangePreset = 'timelineRangePreset';
+// cspell:ignore IDBP
 
-const getCurrentEvents = state => {
-  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
-  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+const startedEventType = 'tool-execution-started';
+const finishedEventType = 'tool-execution-finished';
+const getRawEventBySessionIdAndEventId = async (store, sessionId, sessionIdIndexName, eventId) => {
+  if (eventId < 1) {
+    return undefined;
+  }
+  if (store.indexNames.contains(sessionIdIndexName)) {
+    const index = store.index(sessionIdIndexName);
+    const keys = await index.getAllKeys(sessionId, eventId);
+    if (keys.length < eventId) {
+      return undefined;
+    }
+    const key = keys.at(-1);
+    if (key === undefined) {
+      return undefined;
+    }
+    const event = await store.get(key);
+    return event;
+  }
+  const all = await store.getAll();
+  const events = all.filter(event => event.sessionId === sessionId);
+  return events[eventId - 1];
 };
-const parseTimelineRangePreset = value => {
-  if (!value) {
-    return {
-      timelineEndSeconds: '',
-      timelineStartSeconds: ''
-    };
+const getTimestamp = value => {
+  return typeof value === 'string' || typeof value === 'number' ? value : undefined;
+};
+const hasMatchingToolName = (startedEvent, finishedEvent) => {
+  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
+    return startedEvent.toolName === finishedEvent.toolName;
   }
-  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
+  return true;
+};
+const mergeToolExecutionEvents = (startedEvent, finishedEvent, eventId) => {
+  const ended = getTimestamp(finishedEvent.ended) ?? getTimestamp(finishedEvent.endTime) ?? getTimestamp(finishedEvent.timestamp);
+  const started = getTimestamp(startedEvent.started) ?? getTimestamp(startedEvent.startTime) ?? getTimestamp(startedEvent.timestamp);
   return {
-    timelineEndSeconds,
-    timelineStartSeconds
+    ...startedEvent,
+    ...finishedEvent,
+    ...(ended === undefined ? {} : {
+      ended
+    }),
+    eventId,
+    ...(started === undefined ? {} : {
+      started
+    }),
+    type: 'tool-execution'
   };
 };
-const getEventIndexByStableId = (events, event) => {
-  const stableEventId = getStableEventId(event);
-  return events.findIndex(candidate => getStableEventId(candidate) === stableEventId);
-};
-const getSelectedEventIndex = state => {
-  const {
-    selectedEventIndex
-  } = state;
-  if (selectedEventIndex === null) {
-    return null;
-  }
-  const filteredEvents = getCurrentEvents(state);
-  const selectedEvent = filteredEvents[selectedEventIndex];
-  if (!selectedEvent) {
-    return null;
-  }
-  const newIndex = getEventIndexByStableId(filteredEvents, selectedEvent);
-  if (newIndex === -1) {
-    return null;
-  }
-  return newIndex;
-};
-const getPreservedSelectedEventIndex = (oldState, newState) => {
-  const {
-    selectedEventIndex
-  } = oldState;
-  if (selectedEventIndex === null) {
-    return null;
-  }
-  const oldFilteredEvents = getCurrentEvents(oldState);
-  const selectedEvent = oldFilteredEvents[selectedEventIndex];
-  if (!selectedEvent) {
-    return null;
-  }
-  const newFilteredEvents = getCurrentEvents(newState);
-  const newIndex = getEventIndexByStableId(newFilteredEvents, selectedEvent);
-  if (newIndex === -1) {
-    return null;
-  }
-  return newIndex;
-};
-const parseSelectedEventIndex = value => {
-  const parsed = Number.parseInt(value, 10);
-  if (Number.isNaN(parsed) || parsed < 0) {
-    return null;
-  }
-  return parsed;
-};
-const handleInput = (state, name, value, checked) => {
-  if (name === Filter) {
-    const nextState = {
-      ...state,
-      filterValue: value
-    };
-    return {
-      ...nextState,
-      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
-    };
-  }
-  if (name === EventCategoryFilter) {
-    const nextState = {
-      ...state,
-      eventCategoryFilter: value || All
-    };
-    return {
-      ...nextState,
-      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
-    };
-  }
-  if (name === ShowEventStreamFinishedEvents) {
-    const nextState = {
-      ...state,
-      showEventStreamFinishedEvents: getBoolean(checked)
-    };
-    return {
-      ...nextState,
-      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
-    };
-  }
-  if (name === ShowInputEvents) {
-    const nextState = {
-      ...state,
-      showInputEvents: getBoolean(checked)
-    };
-    return {
-      ...nextState,
-      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
-    };
-  }
-  if (name === ShowResponsePartEvents) {
-    const nextState = {
-      ...state,
-      showResponsePartEvents: getBoolean(checked)
-    };
-    return {
-      ...nextState,
-      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
-    };
-  }
-  if (name === UseDevtoolsLayout) {
-    const useDevtoolsLayout = getBoolean(checked);
-    return {
-      ...state,
-      selectedEventIndex: useDevtoolsLayout ? getSelectedEventIndex(state) : null,
-      useDevtoolsLayout
-    };
-  }
-  if (name === SelectedEventIndex) {
-    return {
-      ...state,
-      selectedEventIndex: parseSelectedEventIndex(value)
-    };
-  }
-  if (name === TimelineStartSeconds) {
-    const nextState = {
-      ...state,
-      timelineStartSeconds: value
-    };
-    return {
-      ...nextState,
-      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
-    };
+const getEventDetailsBySessionIdAndEventId = async (store, sessionId, sessionIdIndexName, eventId, summaryType) => {
+  const event = await getRawEventBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId);
+  if (!event) {
+    return undefined;
   }
-  if (name === TimelineEndSeconds) {
-    const nextState = {
-      ...state,
-      timelineEndSeconds: value
-    };
+  if (summaryType !== 'tool-execution') {
     return {
-      ...nextState,
-      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+      ...event,
+      eventId
     };
   }
-  if (name === TimelineRangePreset) {
-    const nextState = {
-      ...state,
-      ...parseTimelineRangePreset(value)
-    };
+  if (event.type !== startedEventType) {
     return {
-      ...nextState,
-      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+      ...event,
+      eventId
     };
   }
-  if (name === CloseDetails) {
+  const nextEvent = await getRawEventBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId + 1);
+  if (!nextEvent || nextEvent.type !== finishedEventType || nextEvent.sessionId !== sessionId || !hasMatchingToolName(event, nextEvent)) {
     return {
-      ...state,
-      selectedEventIndex: null
+      ...event,
+      eventId
     };
   }
-  return state;
-};
-
-const getFailedToLoadMessage = sessionId => {
-  return `Failed to load chat debug session "${sessionId}". Please try again.`;
-};
-
-const ParseChatDebugUriErrorCode = {
-  InvalidSessionId: 'invalid-session-id',
-  InvalidUriEncoding: 'invalid-uri-encoding',
-  InvalidUriFormat: 'invalid-uri-format',
-  MissingUri: 'missing-uri'
-};
-
-const getInvalidUriMessage = (uri, code) => {
-  if (code === ParseChatDebugUriErrorCode.MissingUri) {
-    return 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
-  }
-  return `Unable to load debug session: invalid URI "${uri}". Expected format: chat-debug://<sessionId>.`;
-};
-
-const getSessionNotFoundMessage = sessionId => {
-  return `No chat session found for sessionId "${sessionId}".`;
-};
-
-const filterEventsBySessionId = (events, sessionId) => {
-  return events.filter(event => event.sessionId === sessionId);
-};
-
-// cspell:ignore IDBP
-
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-const getAllEvents = async store => {
-  const all = await store.getAll();
-  return all;
-};
-
-// cspell:ignore IDBP
-
-const getEventsBySessionId = async (store, sessionId, sessionIdIndexName) => {
-  if (store.indexNames.contains(sessionIdIndexName)) {
-    const index = store.index(sessionIdIndexName);
-    const events = await index.getAll(sessionId);
-    return filterEventsBySessionId(events, sessionId);
-  }
-  const all = await getAllEvents(store);
-  return filterEventsBySessionId(all, sessionId);
+  return mergeToolExecutionEvents(event, nextEvent, eventId);
 };
 
 const instanceOfAny = (object, constructors) => constructors.some(c => object instanceof c);
@@ -1854,137 +1820,733 @@ replaceTraps(oldTraps => ({
   }
 }));
 
+const openDatabaseDependencies = {
+  openDB: openDB
+};
 const openDatabase = async (databaseName, dataBaseVersion) => {
-  return openDB(databaseName, dataBaseVersion);
+  return openDatabaseDependencies.openDB(databaseName, dataBaseVersion);
 };
 
-const listChatViewEvents = async (sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName) => {
-  if (typeof indexedDB === 'undefined') {
-    return [];
-  }
-  const database = await openDatabase(databaseName, dataBaseVersion);
+const loadSelectedEventDependencies = {
+  getEventDetailsBySessionIdAndEventId: getEventDetailsBySessionIdAndEventId,
+  openDatabase: openDatabase
+};
+const loadSelectedEvent = async (databaseName, dataBaseVersion, eventStoreName, sessionId, sessionIdIndexName, eventId, type) => {
+  const database = await loadSelectedEventDependencies.openDatabase(databaseName, dataBaseVersion);
   try {
     if (!database.objectStoreNames.contains(eventStoreName)) {
-      return [];
+      return null;
     }
     const transaction = database.transaction(eventStoreName, 'readonly');
     const store = transaction.objectStore(eventStoreName);
-    if (!sessionId) {
-      return [];
-    }
-    return getEventsBySessionId(store, sessionId, sessionIdIndexName);
+    const event = await loadSelectedEventDependencies.getEventDetailsBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId, type);
+    return event ?? null;
   } finally {
     database.close();
   }
 };
 
-const chatDebugUriPattern = /^chat-debug:\/\/([^/?#]+)$/;
-const invalidSessionIdPattern = /[/?#]/;
-const parseChatDebugUri = uri => {
-  if (!uri) {
-    return {
-      code: ParseChatDebugUriErrorCode.MissingUri,
-      message: 'Missing URI',
-      type: 'error'
-    };
+const handleEventRowClickDependencies = {
+  loadSelectedEvent: loadSelectedEvent
+};
+const getCurrentEvents$2 = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const parseSelectedEventIndex$1 = value => {
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed) || parsed < 0) {
+    return null;
   }
-  const match = uri.match(chatDebugUriPattern);
-  if (!match) {
-    return {
-      code: ParseChatDebugUriErrorCode.InvalidUriFormat,
-      message: 'Invalid URI format',
-      type: 'error'
-    };
+  return parsed;
+};
+const handleEventRowClick = async (state, value) => {
+  const selectedEventIndex = parseSelectedEventIndex$1(value);
+  if (selectedEventIndex === null) {
+    return state;
   }
-  const encodedSessionId = match[1];
-  let sessionId;
-  try {
-    sessionId = decodeURIComponent(encodedSessionId);
-  } catch {
+  const currentEvents = getCurrentEvents$2(state);
+  const selectedEvent = currentEvents[selectedEventIndex];
+  if (!selectedEvent) {
     return {
-      code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
-      message: 'Invalid URI encoding',
-      type: 'error'
+      ...state,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex
     };
   }
-  if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
+  if (typeof selectedEvent.eventId !== 'number') {
     return {
-      code: ParseChatDebugUriErrorCode.InvalidSessionId,
-      message: 'Invalid session id',
-      type: 'error'
+      ...state,
+      selectedEvent,
+      selectedEventId: null,
+      selectedEventIndex
     };
   }
+  const selectedEventDetails = await handleEventRowClickDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
   return {
-    sessionId,
-    type: 'success'
+    ...state,
+    selectedEvent: selectedEventDetails ?? selectedEvent,
+    selectedEventId: selectedEvent.eventId,
+    selectedEventIndex
   };
 };
 
-const loadContent = async state => {
-  const {
-    databaseName,
-    dataBaseVersion,
-    eventStoreName,
-    sessionIdIndexName,
-    uri
-  } = state;
-  const parsed = parseChatDebugUri(uri);
-  if (parsed.type === 'error') {
+const getBoolean = value => {
+  return value === true || value === 'true' || value === 'on' || value === '1';
+};
+
+const Filter = 'filter';
+const EventCategoryFilter = 'eventCategoryFilter';
+const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
+const ShowInputEvents = 'showInputEvents';
+const ShowResponsePartEvents = 'showResponsePartEvents';
+const UseDevtoolsLayout = 'useDevtoolsLayout';
+const SelectedEventIndex = 'selectedEventIndex';
+const CloseDetails = 'closeDetails';
+const DetailTab = 'detailTab';
+const TimelineStartSeconds = 'timelineStartSeconds';
+const TimelineEndSeconds = 'timelineEndSeconds';
+const TimelineRangePreset = 'timelineRangePreset';
+
+const getCurrentEvents$1 = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const parseTimelineRangePreset = value => {
+  if (!value) {
     return {
-      ...state,
-      errorMessage: getInvalidUriMessage(uri, parsed.code),
-      events: [],
-      initial: false,
-      selectedEventIndex: null,
-      sessionId: ''
+      timelineEndSeconds: '',
+      timelineStartSeconds: ''
     };
   }
-  const {
-    sessionId
-  } = parsed;
-  try {
-    const events = await listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
-    if (events.length === 0) {
-      return {
-        ...state,
-        errorMessage: getSessionNotFoundMessage(sessionId),
-        events: [],
-        initial: false,
-        selectedEventIndex: null,
-        sessionId
-      };
+  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
+  return {
+    timelineEndSeconds,
+    timelineStartSeconds
+  };
+};
+const getEventIndexByStableId = (events, event) => {
+  const stableEventId = getStableEventId(event);
+  return events.findIndex(candidate => getStableEventId(candidate) === stableEventId);
+};
+const getSelectedEventIndex = state => {
+  const {
+    selectedEventIndex
+  } = state;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const filteredEvents = getCurrentEvents$1(state);
+  const selectedEvent = filteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newIndex = getEventIndexByStableId(filteredEvents, selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
+};
+const getPreservedSelectedEventIndex = (oldState, newState) => {
+  const {
+    selectedEventIndex
+  } = oldState;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const oldFilteredEvents = getCurrentEvents$1(oldState);
+  const selectedEvent = oldFilteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newFilteredEvents = getCurrentEvents$1(newState);
+  const newIndex = getEventIndexByStableId(newFilteredEvents, selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
+};
+const parseSelectedEventIndex = value => {
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed) || parsed < 0) {
+    return null;
+  }
+  return parsed;
+};
+const withPreservedSelection = (state, nextState) => {
+  const selectedEventIndex = getPreservedSelectedEventIndex(state, nextState);
+  return {
+    ...nextState,
+    selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
+    selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
+    selectedEventIndex
+  };
+};
+const handleInput = (state, name, value, checked) => {
+  if (name === Filter) {
+    const nextState = {
+      ...state,
+      filterValue: value
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === EventCategoryFilter) {
+    const nextState = {
+      ...state,
+      eventCategoryFilter: value || All
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === ShowEventStreamFinishedEvents) {
+    const nextState = {
+      ...state,
+      showEventStreamFinishedEvents: getBoolean(checked)
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === ShowInputEvents) {
+    const nextState = {
+      ...state,
+      showInputEvents: getBoolean(checked)
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === ShowResponsePartEvents) {
+    const nextState = {
+      ...state,
+      showResponsePartEvents: getBoolean(checked)
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === UseDevtoolsLayout) {
+    const useDevtoolsLayout = getBoolean(checked);
+    const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex(state) : null;
+    return {
+      ...state,
+      selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
+      selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
+      selectedEventIndex,
+      useDevtoolsLayout
+    };
+  }
+  if (name === SelectedEventIndex) {
+    const selectedEventIndex = parseSelectedEventIndex(value);
+    return {
+      ...state,
+      selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
+      selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
+      selectedEventIndex
+    };
+  }
+  if (name === TimelineStartSeconds) {
+    const nextState = {
+      ...state,
+      timelineStartSeconds: value
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === TimelineEndSeconds) {
+    const nextState = {
+      ...state,
+      timelineEndSeconds: value
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === TimelineRangePreset) {
+    const nextState = {
+      ...state,
+      ...parseTimelineRangePreset(value)
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === CloseDetails) {
+    return {
+      ...state,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null
+    };
+  }
+  if (name === DetailTab) {
+    if (!isDetailTab(value)) {
+      return state;
+    }
+    return {
+      ...state,
+      selectedDetailTab: value
+    };
+  }
+  return state;
+};
+
+const handleSashPointerDown = (state, eventX, eventY) => {
+  return state;
+};
+
+const handleSashPointerMove = (state, eventX, eventY) => {
+  return {
+    ...state,
+    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
+  };
+};
+
+const handleSashPointerUp = (state, eventX, eventY) => {
+  return state;
+};
+
+const handleTableBodyContextMenu = state => {
+  return state;
+};
+
+const clearTimelineSelectionState = state => {
+  return {
+    ...state,
+    timelineSelectionActive: false,
+    timelineSelectionAnchorSeconds: '',
+    timelineSelectionFocusSeconds: ''
+  };
+};
+
+const handleTimelineDoubleClick = state => {
+  const nextState = handleInput(state, TimelineRangePreset, '', false);
+  return clearTimelineSelectionState(nextState);
+};
+
+const getTimelineEvents = state => {
+  return getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+};
+
+const getTimelineLeft = state => {
+  return state.x + viewPadding + timelineHorizontalPadding;
+};
+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 getTimelineSecondsFromClientX = (events, eventX, timelineLeft, timelineWidth) => {
+  if (timelineWidth <= 0) {
+    return undefined;
+  }
+  const durationSeconds = getTimelineDurationSeconds(events);
+  const relativeX = Math.min(Math.max(eventX - timelineLeft, 0), timelineWidth);
+  const ratio = relativeX / timelineWidth;
+  return formatTimelinePresetValue(durationSeconds * ratio);
+};
+
+const handleTimelinePointerDown = (state, eventX) => {
+  const timelineEvents = getTimelineEvents(state);
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = state.x + eventX;
+  const seconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (seconds === undefined) {
+    return state;
+  }
+  return {
+    ...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);
+  if (seconds === undefined) {
+    return state;
+  }
+  return {
+    ...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);
+  if (focusSeconds === undefined) {
+    return clearTimelineSelectionState(state);
+  }
+  const anchor = Number.parseFloat(state.timelineSelectionAnchorSeconds);
+  const focus = Number.parseFloat(focusSeconds);
+  const startSeconds = formatTimelinePresetValue(Math.min(anchor, focus));
+  const endSeconds = formatTimelinePresetValue(Math.max(anchor, focus));
+  const nextState = handleInput(state, TimelineRangePreset, `${startSeconds}:${endSeconds}`, false);
+  return clearTimelineSelectionState(nextState);
+};
+
+const getFailedToLoadMessage = sessionId => {
+  return `Failed to load chat debug session "${sessionId}". Please try again.`;
+};
+
+const getIndexedDbNotSupportedMessage = () => {
+  return 'Unable to load chat debug session: IndexedDB is not supported in this environment.';
+};
+
+const ParseChatDebugUriErrorCode = {
+  InvalidSessionId: 'invalid-session-id',
+  InvalidUriEncoding: 'invalid-uri-encoding',
+  InvalidUriFormat: 'invalid-uri-format',
+  MissingUri: 'missing-uri'
+};
+
+const getInvalidUriMessage = (uri, code) => {
+  if (code === ParseChatDebugUriErrorCode.MissingUri) {
+    return 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
+  }
+  return `Unable to load debug session: invalid URI "${uri}". Expected format: chat-debug://<sessionId>.`;
+};
+
+const getSessionNotFoundMessage = sessionId => {
+  return `No chat session found for sessionId "${sessionId}".`;
+};
+
+const filterEventsBySessionId = (events, sessionId) => {
+  return events.filter(event => event.sessionId === sessionId);
+};
+
+// cspell:ignore IDBP
+
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+const getAllEvents = async store => {
+  const all = await store.getAll();
+  return all;
+};
+
+const getEndTime = event => {
+  return event.ended ?? event.endTime ?? event.timestamp;
+};
+
+const getStartTime = event => {
+  return event.started ?? event.startTime ?? event.timestamp;
+};
+
+const getDuration = event => {
+  const explicitDuration = event.durationMs ?? event.duration;
+  if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
+    return explicitDuration;
+  }
+  const start = toTimeNumber(getStartTime(event));
+  const end = toTimeNumber(getEndTime(event));
+  if (start === undefined || end === undefined || !Number.isFinite(start) || !Number.isFinite(end)) {
+    return 0;
+  }
+  return Math.max(0, end - start);
+};
+
+const isTimeValue = value => {
+  return typeof value === 'number' || typeof value === 'string';
+};
+
+const getLightweightEvent = (event, fallbackEventId) => {
+  const startTime = getStartTime(event);
+  const endTime = getEndTime(event);
+  return {
+    duration: getDuration(event),
+    ...(isTimeValue(endTime) ? {
+      endTime
+    } : {}),
+    eventId: typeof event.eventId === 'number' ? event.eventId : fallbackEventId,
+    ...(isTimeValue(startTime) ? {
+      startTime
+    } : {}),
+    type: event.type
+  };
+};
+
+// cspell:ignore IDBP
+
+const toLightweightEvents = events => {
+  const eventsWithIds = events.map((event, index) => {
+    return {
+      ...event,
+      eventId: index + 1
+    };
+  });
+  return collapseToolExecutionEvents(eventsWithIds).map((event, index) => getLightweightEvent(event, index + 1));
+};
+const getEventsBySessionId = async (store, sessionId, sessionIdIndexName) => {
+  if (store.indexNames.contains(sessionIdIndexName)) {
+    const index = store.index(sessionIdIndexName);
+    const events = await index.getAll(sessionId);
+    return toLightweightEvents(filterEventsBySessionId(events, sessionId));
+  }
+  const all = await getAllEvents(store);
+  return toLightweightEvents(filterEventsBySessionId(all, sessionId));
+};
+
+let indexedDbSupportOverride;
+const getIndexedDbSupportOverride = () => {
+  return indexedDbSupportOverride;
+};
+const setIndexedDbSupportOverride = supported => {
+  indexedDbSupportOverride = supported;
+};
+
+const isIndexedDbSupported = indexedDbSupportOverride => {
+  if (typeof indexedDbSupportOverride === 'boolean') {
+    return indexedDbSupportOverride;
+  }
+  const override = getIndexedDbSupportOverride();
+  if (typeof override === 'boolean') {
+    return override;
+  }
+  return globalThis.indexedDB !== undefined;
+};
+
+const listChatViewEventsDependencies = {
+  getEventsBySessionId: getEventsBySessionId,
+  openDatabase: openDatabase
+};
+const listChatViewEvents = async (sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName, indexedDbSupportOverride) => {
+  if (!isIndexedDbSupported(indexedDbSupportOverride)) {
+    return {
+      type: 'not-supported'
+    };
+  }
+  try {
+    const database = await listChatViewEventsDependencies.openDatabase(databaseName, dataBaseVersion);
+    try {
+      if (!database.objectStoreNames.contains(eventStoreName)) {
+        return {
+          events: [],
+          type: 'success'
+        };
+      }
+      const transaction = database.transaction(eventStoreName, 'readonly');
+      const store = transaction.objectStore(eventStoreName);
+      if (!sessionId) {
+        return {
+          events: [],
+          type: 'success'
+        };
+      }
+      const events = await listChatViewEventsDependencies.getEventsBySessionId(store, sessionId, sessionIdIndexName);
+      return {
+        events,
+        type: 'success'
+      };
+    } finally {
+      database.close();
     }
+  } catch (error) {
+    return {
+      error,
+      type: 'error'
+    };
+  }
+};
+
+const chatDebugUriPattern = /^chat-debug:\/\/([^/?#]+)$/;
+const invalidSessionIdPattern = /[/?#]/;
+const parseChatDebugUri = uri => {
+  if (!uri) {
+    return {
+      code: ParseChatDebugUriErrorCode.MissingUri,
+      message: 'Missing URI',
+      type: 'error'
+    };
+  }
+  const match = uri.match(chatDebugUriPattern);
+  if (!match) {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriFormat,
+      message: 'Invalid URI format',
+      type: 'error'
+    };
+  }
+  const encodedSessionId = match[1];
+  let sessionId;
+  try {
+    sessionId = decodeURIComponent(encodedSessionId);
+  } catch {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
+      message: 'Invalid URI encoding',
+      type: 'error'
+    };
+  }
+  if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidSessionId,
+      message: 'Invalid session id',
+      type: 'error'
+    };
+  }
+  return {
+    sessionId,
+    type: 'success'
+  };
+};
+
+const loadEventsDependencies = {
+  listChatViewEvents: listChatViewEvents,
+  loadSelectedEvent: loadSelectedEvent
+};
+const getCurrentEvents = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const restoreSelectedEvent = async state => {
+  if (state.selectedEventId === null) {
+    return {
+      ...state,
+      selectedEvent: null,
+      selectedEventIndex: null
+    };
+  }
+  const currentEvents = getCurrentEvents(state);
+  const selectedEventIndex = currentEvents.findIndex(event => event.eventId === state.selectedEventId);
+  if (selectedEventIndex === -1) {
+    return {
+      ...state,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null
+    };
+  }
+  const selectedEvent = currentEvents[selectedEventIndex];
+  if (!selectedEvent || typeof selectedEvent.eventId !== 'number') {
     return {
       ...state,
-      errorMessage: '',
-      events,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null
+    };
+  }
+  const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  return {
+    ...state,
+    selectedEvent: selectedEventDetails,
+    selectedEventId: selectedEvent.eventId,
+    selectedEventIndex
+  };
+};
+const getStateWithInvalidUri = state => {
+  const parsed = parseChatDebugUri(state.uri);
+  if (parsed.type !== 'error') {
+    return state;
+  }
+  return {
+    ...state,
+    errorMessage: getInvalidUriMessage(state.uri, parsed.code),
+    events: [],
+    initial: false,
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null,
+    sessionId: ''
+  };
+};
+const getSessionIdFromUri = state => {
+  const parsed = parseChatDebugUri(state.uri);
+  if (parsed.type === 'error') {
+    return undefined;
+  }
+  return parsed.sessionId;
+};
+const loadEventsForSessionId = async (state, sessionId) => {
+  const {
+    databaseName,
+    dataBaseVersion,
+    eventStoreName,
+    indexedDbSupportOverride,
+    sessionIdIndexName
+  } = state;
+  const result = await loadEventsDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName, indexedDbSupportOverride);
+  if (result.type === 'not-supported') {
+    return {
+      ...state,
+      errorMessage: getIndexedDbNotSupportedMessage(),
+      events: [],
       initial: false,
+      selectedEvent: null,
+      selectedEventId: null,
       selectedEventIndex: null,
       sessionId
     };
-  } catch {
+  }
+  if (result.type === 'error') {
     return {
       ...state,
       errorMessage: getFailedToLoadMessage(sessionId),
       events: [],
       initial: false,
+      selectedEvent: null,
+      selectedEventId: null,
       selectedEventIndex: null,
       sessionId
     };
   }
-};
-
-const refresh = async state => {
-  const events = await listChatViewEvents(state.sessionId, state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionIdIndexName);
-  return {
+  const {
+    events
+  } = result;
+  if (events.length === 0) {
+    return {
+      ...state,
+      errorMessage: getSessionNotFoundMessage(sessionId),
+      events: [],
+      initial: false,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null,
+      sessionId
+    };
+  }
+  const nextState = {
     ...state,
     errorMessage: '',
     events,
     initial: false,
-    selectedEventIndex: null
+    sessionId
   };
+  return restoreSelectedEvent(nextState);
+};
+const loadEventsFromUri = async state => {
+  const sessionId = getSessionIdFromUri(state);
+  if (!sessionId) {
+    return getStateWithInvalidUri(state);
+  }
+  return loadEventsForSessionId(state, sessionId);
+};
+const refreshEvents = async state => {
+  const sessionId = state.sessionId || getSessionIdFromUri(state);
+  if (!sessionId) {
+    return getStateWithInvalidUri(state);
+  }
+  return loadEventsForSessionId(state, sessionId);
+};
+
+const loadContent = async state => {
+  return loadEventsFromUri(state);
+};
+
+const refresh = async state => {
+  return refreshEvents(state);
 };
 
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
 const TargetChecked = 'event.target.checked';
 const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
@@ -1993,15 +2555,21 @@ const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
 const SetPatches = 'Viewlet.setPatches';
 
-const getCss = () => {
+const getCss = state => {
+  const tableWidth = clampTableWidth(state.width, state.tableWidth);
+  const detailsWidth = getDetailsWidth(state.width, state.tableWidth);
   return `
 .ChatDebugView {
-  padding: 8px;
+  --ChatDebugViewDetailsWidth: ${detailsWidth}px;
+  --ChatDebugViewSashWidth: ${sashWidth}px;
+  --ChatDebugViewTableWidth: ${tableWidth}px;
+  padding: ${viewPadding}px;
   display: flex;
   flex-direction: column;
   height: 100%;
   box-sizing: border-box;
   gap: 8px;
+  contain: strict;
 }
 
 .ChatDebugView--devtools {
@@ -2013,44 +2581,61 @@ const getCss = () => {
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
+  contain: content;
 }
 
-.ChatDebugViewTop .InputBox {
-  flex: 1;
+.ChatDebugViewTop--devtools {
+  align-items: stretch;
 }
 
-.ChatDebugViewToggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
+.ChatDebugViewFilterInput {
+  flex: 1;
+  min-width: 0;
+  max-width: 500px;
+  contain: content;
 }
 
-.ChatDebugViewToggleLabel {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
+.ChatDebugViewFilterInput--devtools {
+  flex: 0 1 80px;
+  width: 100%;
+  max-width: 80px;
 }
 
 .ChatDebugViewQuickFilterPill {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  min-height: 22px;
+  padding: 0 10px;
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border-radius: 999px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 120ms ease-out,
+    border-color 120ms ease-out,
+    color 120ms ease-out,
+    transform 120ms ease-out;
+  contain: content;
+}
+
+.ChatDebugViewQuickFilterPill:not(.ChatDebugViewQuickFilterPillSelected):hover {
+  border-color: var(--vscode-focusBorder, #007fd4);
+  background: color-mix(in srgb, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.16)) 82%, transparent 18%);
+  color: var(--vscode-list-hoverForeground, inherit);
+  transform: translateY(-1px);
 }
 
 
 .ChatDebugViewQuickFilters {
   display: flex;
+  align-items: center;
   gap: 8px;
   justify-content: center;
   min-height: 28px;
-  padding: 0 12px;
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
-  border-radius: 999px;
-  background: var(--vscode-editorWidget-background, transparent);
-  cursor: pointer;
   font-size: 12px;
   line-height: 1;
+  contain: content;
 }
 
 .ChatDebugViewQuickFilterPillSelected {
@@ -2063,6 +2648,7 @@ const getCss = () => {
   position: absolute;
   opacity: 0;
   pointer-events: none;
+  contain: content;
 }
 
 .ChatDebugViewEvents {
@@ -2073,14 +2659,10 @@ const getCss = () => {
   min-height: 0;
   scrollbar-width: thin;
   scrollbar-color: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4)) transparent;
-}
-
-.ChatDebugViewEvents--timeline {
-  gap: 0;
+  contain: strict;
 }
 
 .ChatDebugView--devtools .ChatDebugViewEvents {
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
   border-radius: 6px;
   margin-bottom: 0;
   overflow: hidden;
@@ -2092,21 +2674,66 @@ const getCss = () => {
 
 .ChatDebugViewDevtoolsMain {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  flex: 1;
   align-items: stretch;
-  gap: 8px;
+  gap: 0;
+  min-width: 0;
+  min-height: 0;
+  contain: strict;
+}
+
+.ChatDebugViewDevtoolsMain > .ChatDebugViewTimeline {
+  flex: 0 0 auto;
+}
+
+.ChatDebugViewDevtoolsSplit {
+  display: flex;
+  flex: 1;
+  align-items: stretch;
+  gap: 0;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
+  contain: strict;
 }
 
-.ChatDebugViewDevtoolsMain > .ChatDebugViewEvents {
-  flex: 1 1 480px;
+.ChatDebugViewDevtoolsSplit > .ChatDebugViewEvents {
+  flex: 0 1 var(--ChatDebugViewTableWidth);
   min-width: 0;
 }
 
-.ChatDebugViewDevtoolsMain > .ChatDebugViewDetails {
-  flex: 0 0 clamp(320px, 32vw, 420px);
+.ChatDebugViewDevtoolsSplit > .ChatDebugViewEvents.ChatDebugViewEventsFullWidth {
+  flex: 1 1 100%;
+}
+
+.ChatDebugViewDevtoolsSplit > .ChatDebugViewDetails {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  flex: 1;
+}
+
+.ChatDebugViewSash {
+  flex: 0 0 var(--ChatDebugViewSashWidth);
+  position: relative;
+  cursor: col-resize;
+  display: flex;
+  justify-content: center;
+  min-height: 0;
+  contain: strict;
+}
+
+.ChatDebugViewSashLine {
+  width: 1px;
+  height: 100%;
+  background: var(--vscode-editorWidget-border, #454545);
+  pointer-events: none;
+  contain: strict;
+}
+
+.ChatDebugViewSash:hover .ChatDebugViewSashLine {
+  background: var(--vscode-focusBorder, #007fd4);
 }
 
 .ChatDebugViewTable {
@@ -2114,33 +2741,32 @@ const getCss = () => {
   flex-direction: column;
   min-height: 0;
   flex: 1 1 auto;
+  contain: strict;
 }
 
 .ChatDebugViewTimeline {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 10px;
+  gap: 6px;
+  padding: 6px ${timelineHorizontalPadding}px 8px;
   border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
   background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 82%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.12)) 18%);
+  contain: content;
 }
 
 .ChatDebugViewTimelineTop {
   display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.ChatDebugViewTimelineTitle {
-  font-size: 12px;
-  font-weight: 600;
+  align-items: center;
+  contain: content;
 }
 
 .ChatDebugViewTimelineSummary {
+  display: flex;
+  align-items: center;
   font-size: 12px;
+  line-height: 16px;
   opacity: 0.8;
+  contain: content;
 }
 
 .ChatDebugViewTimelineControls {
@@ -2148,61 +2774,93 @@ const getCss = () => {
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
+  contain: content;
 }
 
-.ChatDebugViewTimelineReset {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 28px;
-  padding: 0 12px;
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
-  border-radius: 999px;
-  cursor: pointer;
-  font-size: 12px;
+.ChatDebugViewTimelineBuckets {
+  display: flex;
+  align-items: end;
+  gap: 3px;
+  flex: 1 1 auto;
+  min-height: 52px;
+  pointer-events: none;
+  contain: strict;
 }
 
-.ChatDebugViewTimelineResetSelected {
-  border-color: var(--vscode-focusBorder, #007fd4);
-  background: var(--vscode-list-activeSelectionBackground, rgba(14, 99, 156, 0.35));
-  color: var(--vscode-list-activeSelectionForeground, inherit);
+.ChatDebugViewTimelineInteractive {
+  display: flex;
+  position: relative;
+  min-height: 52px;
+  cursor: crosshair;
+  user-select: none;
+  contain: strict;
+}
+
+.ChatDebugViewTimelineSelectionOverlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  contain: strict;
+}
+
+.ChatDebugViewTimelineSelectionRange {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: color-mix(in srgb, var(--vscode-charts-blue, #75beff) 20%, transparent 80%);
+  border-left: 1px solid color-mix(in srgb, var(--vscode-charts-blue, #75beff) 65%, transparent 35%);
+  border-right: 1px solid color-mix(in srgb, var(--vscode-charts-blue, #75beff) 65%, transparent 35%);
+  contain: strict;
 }
 
-.ChatDebugViewTimelineBuckets {
-  display: flex;
-  align-items: end;
-  gap: 4px;
-  min-height: 60px;
+.ChatDebugViewTimelineSelectionMarker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  margin-left: -0.5px;
+  background: var(--vscode-focusBorder, #007fd4);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vscode-focusBorder, #007fd4) 24%, transparent 76%);
+  contain: strict;
 }
 
 .ChatDebugViewTimelineBucket {
+  --ChatDebugViewTimelineBucketBarBackground: color-mix(in srgb, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.16)) 74%, transparent 26%);
+  --ChatDebugViewTimelineBucketBarBorderColor: transparent;
   display: flex;
   align-items: stretch;
   flex: 1 1 10px;
   min-width: 10px;
-  min-height: 60px;
-  cursor: pointer;
+  min-height: 52px;
+  contain: strict;
+}
+
+.ChatDebugViewTimelineBucketSelected {
+  --ChatDebugViewTimelineBucketBarBackground: color-mix(in srgb, var(--vscode-charts-blue, #75beff) 72%, transparent 28%);
+  --ChatDebugViewTimelineBucketBarBorderColor: var(--vscode-focusBorder, #007fd4);
 }
 
 .ChatDebugViewTimelinePresetInput {
   position: absolute;
   opacity: 0;
   pointer-events: none;
+  contain: content;
 }
 
 .ChatDebugViewTimelineBucketBar {
-  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   gap: 2px;
-  padding: 4px 2px;
+  padding: 6px 1px 2px;
   border: 1px solid transparent;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.18)) 68%, transparent 32%);
+  border-radius: 2px;
+  width: 100%;
+  background: var(--ChatDebugViewTimelineBucketBarBackground);
+  border-color: var(--ChatDebugViewTimelineBucketBarBorderColor);
+  contain: strict;
 }
 
-.ChatDebugViewTimelineBucketSelected .ChatDebugViewTimelineBucketBar,
 .ChatDebugViewTimelineBucketBarSelected {
   background: color-mix(in srgb, var(--vscode-charts-blue, #75beff) 72%, transparent 28%);
   border-color: var(--vscode-focusBorder, #007fd4);
@@ -2213,6 +2871,7 @@ const getCss = () => {
   height: 4px;
   border-radius: 999px;
   background: var(--vscode-charts-blue, #75beff);
+  contain: strict;
 }
 
 .ChatDebugViewTimelineBucketUnitEmpty {
@@ -2220,30 +2879,40 @@ const getCss = () => {
   background: var(--vscode-editorWidget-border, #454545);
 }
 
-.ChatDebugViewTableHeader,
+.ChatDebugViewTableHeaderRow,
 .ChatDebugViewEventRow {
   display: flex;
   align-items: center;
   gap: 8px;
+  contain: content;
 }
 
 .ChatDebugViewTableHeader {
-  padding: 8px;
+  padding: 3px 8px;
   border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
   background: var(--vscode-editorWidget-background, transparent);
   position: sticky;
   top: 0;
   z-index: 1;
+  contain: content;
 }
 
 .ChatDebugViewHeaderCell {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
   font-size: 11px;
-  text-transform: uppercase;
   letter-spacing: 0.04em;
   opacity: 0.8;
+  contain: content;
 }
 
 .ChatDebugViewTableBody {
+  display: flex;
+  flex-direction: column;
   overflow: auto;
   min-height: 0;
   flex: 1 1 auto;
@@ -2252,6 +2921,7 @@ const getCss = () => {
 
 .ChatDebugViewEventRowLabel {
   display: block;
+  contain: content;
 }
 
 .ChatDebugViewEventRowLabelSelected .ChatDebugViewEventRow,
@@ -2264,23 +2934,28 @@ const getCss = () => {
   position: absolute;
   opacity: 0;
   pointer-events: none;
+  contain: content;
 }
 
 .ChatDebugViewEventRow {
-  padding: 8px;
+  padding: 2px 8px;
   border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
   cursor: pointer;
 }
 
 .ChatDebugViewEventRow:hover {
   background: var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.31));
+  color: var(--vscode-list-hoverForeground, inherit);
 }
 
 .ChatDebugViewCell {
+  display: flex;
+  align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
+  contain: content;
 }
 
 .ChatDebugViewCellType {
@@ -2295,14 +2970,20 @@ const getCss = () => {
 
 .ChatDebugViewCellDuration {
   flex: 0 0 90px;
+  justify-content: flex-end;
   text-align: right;
 }
 
 .ChatDebugViewCellStatus {
   flex: 0 0 64px;
+  justify-content: flex-end;
   text-align: right;
 }
 
+.ChatDebugViewCellStatusError {
+  color: var(--vscode-errorForeground, #f14c4c);
+}
+
 .ChatDebugViewDetails {
   border: 1px solid var(--vscode-editorWidget-border, #454545);
   border-radius: 6px;
@@ -2316,25 +2997,32 @@ const getCss = () => {
 
 .ChatDebugViewDetailsTop {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 0 8px;
   border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
-}
-
-.ChatDebugViewDetailsTitle {
-  font-size: 12px;
-  font-weight: 600;
+  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 72%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.18)) 28%);
+  contain: content;
 }
 
 .ChatDebugViewDetailsClose {
   width: 18px;
   height: 18px;
   appearance: none;
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border: none;
   border-radius: 4px;
   cursor: pointer;
   position: relative;
+  color: var(--vscode-foreground, #cccccc);
+  background: transparent;
+  align-self: center;
+  flex: 0 0 auto;
+  contain: strict;
+}
+
+.ChatDebugViewDetailsClose:hover {
+  background: var(--vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.31));
 }
 
 .ChatDebugViewDetailsClose::before,
@@ -2357,10 +3045,60 @@ const getCss = () => {
 }
 
 .ChatDebugViewDetailsBody {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: stretch;
+  contain: strict;
+}
+
+.ChatDebugViewDetailsTabs {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 2px;
+  min-width: 0;
+  padding: 0;
+  overflow-x: auto;
+  contain: content;
+}
+
+.ChatDebugViewDetailsTab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  padding: 0 10px;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  color: var(--vscode-descriptionForeground, var(--vscode-foreground, #cccccc));
+  cursor: pointer;
+  white-space: nowrap;
+  contain: content;
+}
+
+.ChatDebugViewDetailsTab:hover {
+  color: var(--vscode-foreground, #cccccc);
+}
+
+.ChatDebugViewDetailsTabSelected {
+  border-bottom-color: var(--vscode-focusBorder, #007fd4);
+  color: var(--vscode-focusBorder, #007fd4);
+}
+
+.ChatDebugViewDetailsPanel {
+  display: flex;
+  flex-direction: column;
   overflow: auto;
   padding: 8px;
   flex: 1 1 auto;
   min-height: 0;
+  align-items: flex-start;
   contain: strict;
 }
 
@@ -2389,25 +3127,99 @@ const getCss = () => {
 }
 
 .ChatDebugViewEvent {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  min-width: 100%;
   margin: 0;
   padding: 8px;
   border: 1px solid var(--vscode-editorWidget-border, #454545);
   border-radius: 6px;
   margin-bottom: 8px;
-  white-space: pre-wrap;
-  word-break: break-word;
+  white-space: nowrap;
   font-family: var(--vscode-editor-font-family, monospace);
   font-size: 12px;
   user-select: text;
+  contain: content;
+}
+
+.row {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-width: 100%;
+  width: max-content;
+  white-space: nowrap;
+  contain: strict;
+  height: 20px;
+}
+
+.ChatDebugViewEventLineNumber {
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 3ch;
+  opacity: 0.6;
+  user-select: none;
+  contain: content;
+}
+
+.ChatDebugViewEventLineContent {
+  display: flex;
+  white-space: pre;
+  contain: content;
+}
+
+.ChatDebugViewDetailsPanel > .ChatDebugViewEvent {
+  border: 0;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+
+.ChatDebugViewTiming {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  contain: strict;
+  flex: 1;
+}
+
+.ChatDebugViewTimingRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
+  contain: content;
+}
+
+.ChatDebugViewTimingRow:last-child {
+  border-bottom: 0;
+}
+
+.ChatDebugViewTimingLabel {
+  opacity: 0.8;
+  contain: content;
+}
+
+.ChatDebugViewTimingValue {
+  text-align: right;
+  font-family: var(--vscode-editor-font-family, monospace);
+  contain: content;
 }
 
 .ChatDebugViewEmpty {
+  display: flex;
+  align-items: center;
   opacity: 0.8;
+  contain: content;
 }
 
 .ChatDebugViewError {
+  display: flex;
   color: var(--vscode-errorForeground, #f14c4c);
   white-space: normal;
+  contain: content;
 }
 
 .TokenText {
@@ -2431,33 +3243,48 @@ const getCss = () => {
 }
 
 .ChatOrderedList{
+  display:flex;
+  flex-direction:column;
   margin:0;
   padding:0;
   padding-left:10px;
+  contain: content;
 }
 
 .ChatOrderedListItem{
+  display:flex;
   margin:0;
   padding:0;
+  contain: content;
 }
 
 .ChatToolCalls{
+  display:flex;
+  flex-direction:column;
   margin:0;
   padding:0;
+  contain: content;
 }
 `;
 };
 
 const renderCss = (oldState, newState) => {
-  const css = getCss();
+  const css = getCss(newState);
   return [SetCss, newState.uid, css];
 };
 
+const Button = 1;
 const Div = 4;
 const Input = 6;
 const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
 const Text = 12;
-const Pre = 51;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+const Search = 42;
 const Label = 66;
 const Reference = 100;
 
@@ -2757,10 +3584,65 @@ const diffTree = (oldNodes, newNodes) => {
   return removeTrailingNavigationPatches(patches);
 };
 
+const getDebugErrorDom = errorMessage => {
+  return [{
+    childCount: 1,
+    className: 'ChatDebugView',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'ChatDebugViewError',
+    type: Div
+  }, text(errorMessage)];
+};
+
 const HandleInput = 4;
 const HandleFilterInput = 5;
 const HandleSimpleInput = 6;
 const HandleEventRowClick = 7;
+const HandleSashPointerDown = 8;
+const HandleSashPointerMove = 9;
+const HandleSashPointerUp = 10;
+const HandleTableBodyContextMenu = 11;
+const HandleTimelinePointerDown = 12;
+const HandleTimelinePointerMove = 13;
+const HandleTimelinePointerUp = 14;
+const HandleTimelineDoubleClick = 15;
+
+const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) => {
+  if (useDevtoolsLayout) {
+    return [{
+      childCount: 1 + (quickFilterNodes.length > 0 ? 1 : 0),
+      className: 'ChatDebugViewTop ChatDebugViewTop--devtools',
+      type: Search
+    }, {
+      autocomplete: 'off',
+      childCount: 0,
+      className: 'InputBox ChatDebugViewFilterInput ChatDebugViewFilterInput--devtools',
+      inputType: 'search',
+      name: Filter,
+      onInput: HandleFilterInput,
+      placeholder: 'Filter events',
+      type: Input,
+      value: filterValue
+    }, ...quickFilterNodes];
+  }
+  return [{
+    childCount: 1,
+    className: 'ChatDebugViewTop',
+    type: Search
+  }, {
+    autocomplete: 'off',
+    childCount: 0,
+    className: 'InputBox ChatDebugViewFilterInput',
+    inputType: 'search',
+    name: Filter,
+    onInput: HandleFilterInput,
+    placeholder: 'Filter events',
+    type: Input,
+    value: filterValue
+  }];
+};
 
 const getDurationText = event => {
   const explicitDuration = event.durationMs ?? event.duration;
@@ -2812,6 +3694,130 @@ const getStartText = event => {
   return getTimestampText(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
 };
 
+const getTimingRowDom = (label, value) => {
+  return [{
+    childCount: 2,
+    className: 'ChatDebugViewTimingRow',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'ChatDebugViewTimingLabel',
+    type: Span
+  }, text(label), {
+    childCount: 1,
+    className: 'ChatDebugViewTimingValue',
+    type: Span
+  }, text(value)];
+};
+const getTimingDetailsDom = event => {
+  return [{
+    childCount: 3,
+    className: 'ChatDebugViewTiming',
+    type: Div
+  }, ...getTimingRowDom('Started', getStartText(event)), ...getTimingRowDom('Ended', getEndText(event)), ...getTimingRowDom('Duration', getDurationText(event))];
+};
+
+const getTabId = detailTab => {
+  return `ChatDebugViewDetailsTab-${detailTab}`;
+};
+const getPanelId = detailTab => {
+  return `ChatDebugViewDetailsPanel-${detailTab}`;
+};
+const getTabNodes = selectedDetailTab => {
+  return detailTabs.flatMap(detailTab => {
+    const isSelected = detailTab === selectedDetailTab;
+    return [{
+      'aria-controls': getPanelId(detailTab),
+      'aria-selected': isSelected,
+      childCount: 1,
+      className: isSelected ? 'ChatDebugViewDetailsTab ChatDebugViewDetailsTabSelected' : 'ChatDebugViewDetailsTab',
+      id: getTabId(detailTab),
+      name: DetailTab,
+      onChange: HandleSimpleInput,
+      onClick: HandleSimpleInput,
+      role: 'tab',
+      tabIndex: isSelected ? 0 : -1,
+      type: Button,
+      value: detailTab
+    }, text(getDetailTabLabel(detailTab))];
+  });
+};
+const getDetailsDom = (selectedEventNodes, selectedEvent = null, selectedDetailTab = Response) => {
+  if (selectedEventNodes.length === 0) {
+    return [];
+  }
+  const contentNodes = selectedDetailTab === Timing && selectedEvent ? getTimingDetailsDom(selectedEvent) : selectedEventNodes;
+  return [{
+    childCount: 2,
+    className: 'ChatDebugViewDetails',
+    type: Div
+  }, {
+    childCount: 2,
+    className: 'ChatDebugViewDetailsTop',
+    type: Div
+  }, {
+    'aria-label': 'Close details',
+    childCount: 0,
+    className: 'ChatDebugViewDetailsClose',
+    name: CloseDetails,
+    onChange: HandleSimpleInput,
+    onClick: HandleSimpleInput,
+    type: Button,
+    value: 'close'
+  }, {
+    'aria-label': 'Detail sections',
+    childCount: detailTabs.length,
+    className: 'ChatDebugViewDetailsTabs',
+    role: 'tablist',
+    type: Div
+  }, ...getTabNodes(selectedDetailTab), {
+    childCount: 1,
+    className: 'ChatDebugViewDetailsBody',
+    role: 'document',
+    type: Div
+  }, {
+    'aria-labelledby': getTabId(selectedDetailTab),
+    childCount: 1,
+    className: 'ChatDebugViewDetailsPanel',
+    id: getPanelId(selectedDetailTab),
+    role: 'tabpanel',
+    type: Div
+  }, ...contentNodes];
+};
+
+const toolExecutionTypePrefix = 'tool-execution';
+const getToolName = event => {
+  if (typeof event.toolName === 'string' && event.toolName) {
+    return event.toolName;
+  }
+  if (typeof event.name === 'string' && event.name) {
+    return event.name;
+  }
+  const {
+    arguments: toolArguments
+  } = event;
+  if (!toolArguments || typeof toolArguments !== 'object') {
+    return undefined;
+  }
+  const {
+    name
+  } = toolArguments;
+  if (typeof name !== 'string' || !name) {
+    return undefined;
+  }
+  return name;
+};
+const getEventTypeLabel = event => {
+  if (!event.type.startsWith(toolExecutionTypePrefix)) {
+    return event.type;
+  }
+  const toolName = getToolName(event);
+  if (!toolName) {
+    return event.type;
+  }
+  return `${event.type}, ${toolName}`;
+};
+
 const hasErrorStatus = event => {
   if (event.type === 'error') {
     return true;
@@ -2839,75 +3845,64 @@ const getStatusText = event => {
 };
 
 const getDevtoolsRows = (events, selectedEventIndex) => {
-  if (events.length === 0) {
-    return [{
-      childCount: 1,
-      className: 'ChatDebugViewEmpty',
-      type: Div
-    }, text('No events')];
-  }
-  const rows = [];
-  for (let i = 0; i < events.length; i++) {
-    const event = events[i];
+  return events.flatMap((event, i) => {
     const isSelected = selectedEventIndex === i;
+    const isErrorStatus = hasErrorStatus(event);
     const rowIndex = String(i);
-    rows.push({
-      childCount: 5,
+    return [{
+      childCount: 3,
       className: `ChatDebugViewEventRow${isSelected ? ' ChatDebugViewEventRowSelected' : ''}`,
       'data-index': rowIndex,
-      type: Div
+      type: Tr
     }, {
       childCount: 1,
       className: 'ChatDebugViewCell ChatDebugViewCellType',
       'data-index': rowIndex,
-      type: Div
-    }, text(event.type), {
-      childCount: 1,
-      className: 'ChatDebugViewCell ChatDebugViewCellTime',
-      'data-index': rowIndex,
-      type: Div
-    }, text(getStartText(event)), {
-      childCount: 1,
-      className: 'ChatDebugViewCell ChatDebugViewCellTime',
-      'data-index': rowIndex,
-      type: Div
-    }, text(getEndText(event)), {
+      type: Td
+    }, text(getEventTypeLabel(event)), {
       childCount: 1,
       className: 'ChatDebugViewCell ChatDebugViewCellDuration',
       'data-index': rowIndex,
-      type: Div
+      type: Td
     }, text(getDurationText(event)), {
       childCount: 1,
-      className: 'ChatDebugViewCell ChatDebugViewCellStatus',
+      className: `ChatDebugViewCell ChatDebugViewCellStatus${isErrorStatus ? ' ChatDebugViewCellStatusError' : ''}`,
       'data-index': rowIndex,
-      type: Div
-    }, text(getStatusText(event)));
+      type: Td
+    }, text(getStatusText(event))];
+  });
+};
+
+const getEmptyStateDom = emptyMessage => {
+  return [{
+    childCount: 1,
+    className: 'ChatDebugViewEmpty',
+    type: Div
+  }, text(emptyMessage)];
+};
+
+const pushToken = (segments, className, value) => {
+  if (!value) {
+    return segments;
+  }
+  const lastSegment = segments.at(-1);
+  if (lastSegment && lastSegment.className === className) {
+    const merged = {
+      className,
+      value: lastSegment.value + value
+    };
+    return [...segments.slice(0, -1), merged];
   }
-  return rows;
+  return [...segments, {
+    className,
+    value
+  }];
 };
 
 const numberRegex = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?/;
 const whitespaceRegex = /\s/u;
 const getTokenSegments = json => {
-  const segments = [];
-  const pushToken = (className, value) => {
-    if (!value) {
-      return;
-    }
-    const lastSegment = segments.at(-1);
-    if (lastSegment && lastSegment.className === className) {
-      const merged = {
-        className,
-        value: lastSegment.value + value
-      };
-      segments[segments.length - 1] = merged;
-      return;
-    }
-    segments.push({
-      className,
-      value
-    });
-  };
+  let segments = [];
   let i = 0;
   while (i < json.length) {
     const character = json[i];
@@ -2932,46 +3927,68 @@ const getTokenSegments = json => {
         lookAheadIndex++;
       }
       const className = json[lookAheadIndex] === ':' ? 'TokenKey' : 'TokenString';
-      pushToken(className, tokenValue);
+      segments = pushToken(segments, className, tokenValue);
       continue;
     }
     const numberMatch = numberRegex.exec(json.slice(i));
     if (numberMatch) {
-      pushToken('TokenNumeric', numberMatch[0]);
+      segments = pushToken(segments, 'TokenNumeric', numberMatch[0]);
       i += numberMatch[0].length;
       continue;
     }
     if (json.startsWith('true', i)) {
-      pushToken('TokenBoolean', 'true');
+      segments = pushToken(segments, 'TokenBoolean', 'true');
       i += 4;
       continue;
     }
     if (json.startsWith('false', i)) {
-      pushToken('TokenBoolean', 'false');
+      segments = pushToken(segments, 'TokenBoolean', 'false');
       i += 5;
       continue;
     }
     if (json.startsWith('null', i)) {
-      pushToken('TokenBoolean', 'null');
+      segments = pushToken(segments, 'TokenBoolean', 'null');
       i += 4;
       continue;
     }
-    pushToken('TokenText', character);
+    segments = pushToken(segments, 'TokenText', character);
     i++;
   }
   return segments;
 };
-const getJsonTokenNodes = value => {
+
+const getJsonLines = value => {
   const json = JSON.stringify(value, null, 2);
   if (!json) {
-    return [{
-      childCount: 1,
+    return [[{
       className: 'TokenText',
-      type: Span
-    }, text(String(json))];
+      value: String(json)
+    }]];
+  }
+  const segments = getTokenSegments(json);
+  const lines = [];
+  let currentLine = [];
+  for (const segment of segments) {
+    const parts = segment.value.split('\n');
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (part) {
+        currentLine.push({
+          className: segment.className,
+          value: part
+        });
+      }
+      if (i < parts.length - 1) {
+        lines.push(currentLine);
+        currentLine = [];
+      }
+    }
   }
-  const segments = getTokenSegments(json);
-  return segments.flatMap(segment => {
+  lines.push(currentLine);
+  return lines;
+};
+const getLineContentNodes = line => {
+  return line.flatMap(segment => {
     return [{
       childCount: 1,
       className: segment.className,
@@ -2979,20 +3996,141 @@ const getJsonTokenNodes = value => {
     }, text(segment.value)];
   });
 };
-
+const getLineNodes = lines => {
+  return lines.flatMap((line, index) => {
+    const lineContentNodes = getLineContentNodes(line);
+    return [{
+      childCount: 2,
+      className: 'row',
+      type: Div
+    }, {
+      childCount: 1,
+      className: 'ChatDebugViewEventLineNumber',
+      type: Span
+    }, text(String(index + 1)), {
+      childCount: lineContentNodes.length / 2,
+      className: 'ChatDebugViewEventLineContent',
+      type: Span
+    }, ...lineContentNodes];
+  });
+};
 const getEventNode = event => {
-  const tokenNodes = getJsonTokenNodes(event);
+  const renderedEvent = {
+    ...event,
+    type: getEventTypeLabel(event)
+  };
+  const lines = getJsonLines(renderedEvent);
+  const lineNodes = getLineNodes(lines);
   return [{
-    childCount: tokenNodes.length / 2,
+    childCount: lines.length,
     className: 'ChatDebugViewEvent',
-    type: Pre
-  }, ...tokenNodes];
+    type: Div
+  }, ...lineNodes];
 };
 
-const trailingZeroFractionRegex = /\.0+$/;
-const trailingFractionZeroRegex = /(\.\d*?)0+$/;
-const formatTimelinePresetValue = value => {
-  return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
+const getEventsClassName = hasSelectedEvent => {
+  const widthClassName = hasSelectedEvent ? 'ChatDebugViewEvents' : 'ChatDebugViewEvents ChatDebugViewEventsFullWidth';
+  return widthClassName;
+};
+
+const getSashNodesDom = hasSelectedEvent => {
+  if (!hasSelectedEvent) {
+    return [];
+  }
+  return [{
+    childCount: 1,
+    className: 'ChatDebugViewSash',
+    onPointerDown: HandleSashPointerDown,
+    type: Div
+  }, {
+    childCount: 0,
+    className: 'ChatDebugViewSashLine',
+    type: Div
+  }];
+};
+
+const getTableBodyDom = (rowNodes, eventCount) => {
+  return [{
+    childCount: eventCount === 0 ? 1 : eventCount,
+    className: 'ChatDebugViewTableBody',
+    onContextMenu: HandleTableBodyContextMenu,
+    onPointerDown: HandleEventRowClick,
+    type: TBody
+  }, ...rowNodes];
+};
+
+const getTableHeaderDom = () => {
+  return [{
+    childCount: 1,
+    className: 'ChatDebugViewTableHeader',
+    type: THead
+  }, {
+    childCount: 3,
+    className: 'ChatDebugViewTableHeaderRow',
+    type: Tr
+  }, {
+    childCount: 1,
+    className: 'ChatDebugViewHeaderCell ChatDebugViewCellType',
+    scope: 'col',
+    type: Th
+  }, text('Type'), {
+    childCount: 1,
+    className: 'ChatDebugViewHeaderCell ChatDebugViewCellDuration',
+    scope: 'col',
+    type: Th
+  }, text('Duration'), {
+    childCount: 1,
+    className: 'ChatDebugViewHeaderCell ChatDebugViewCellStatus',
+    scope: 'col',
+    type: Th
+  }, text('Status')];
+};
+
+const getTableDom = (rowNodes, eventCount) => {
+  return [{
+    childCount: 2,
+    className: 'ChatDebugViewTable',
+    type: Table
+  }, ...getTableHeaderDom(), ...getTableBodyDom(rowNodes, eventCount)];
+};
+
+const getBucketUnitDom = unitCount => {
+  if (unitCount === 0) {
+    return [{
+      childCount: 0,
+      className: 'ChatDebugViewTimelineBucketUnit ChatDebugViewTimelineBucketUnitEmpty',
+      type: Div
+    }];
+  }
+  return Array.from({
+    length: unitCount
+  }).fill({
+    childCount: 0,
+    className: 'ChatDebugViewTimelineBucketUnit',
+    type: Div
+  });
+};
+
+const getBucketDom = bucket => {
+  const presetValue = `${formatTimelinePresetValue(bucket.startSeconds)}:${formatTimelinePresetValue(bucket.endSeconds)}`;
+  return [{
+    childCount: 2,
+    className: `ChatDebugViewTimelineBucket${bucket.isSelected ? ' ChatDebugViewTimelineBucketSelected' : ''}`,
+    type: Label
+  }, {
+    checked: false,
+    childCount: 0,
+    className: 'ChatDebugViewTimelinePresetInput',
+    inputType: 'radio',
+    name: TimelineRangePreset,
+    onChange: HandleSimpleInput,
+    type: Input,
+    value: presetValue
+  }, {
+    childCount: bucket.unitCount === 0 ? 1 : bucket.unitCount,
+    className: `ChatDebugViewTimelineBucketBar${bucket.isSelected ? ' ChatDebugViewTimelineBucketBarSelected' : ''}`,
+    type: Div
+  }, ...getBucketUnitDom(bucket.unitCount)];
 };
 
 const formatTimelineSeconds = value => {
@@ -3001,6 +4139,7 @@ const formatTimelineSeconds = value => {
   }
   return `${Number(value.toFixed(1))}s`;
 };
+
 const getTimelineSummary = (timelineEvents, timelineStartSeconds, timelineEndSeconds) => {
   const timelineInfo = getTimelineInfo(timelineEvents, timelineStartSeconds, timelineEndSeconds);
   if (timelineInfo.hasSelection && timelineInfo.startSeconds !== null && timelineInfo.endSeconds !== null) {
@@ -3009,156 +4148,96 @@ const getTimelineSummary = (timelineEvents, timelineStartSeconds, timelineEndSec
   return `Window 0s-${formatTimelineSeconds(timelineInfo.durationSeconds)} of ${formatTimelineSeconds(timelineInfo.durationSeconds)}`;
 };
 
-const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSeconds) => {
-  const timelineInfo = getTimelineInfo(timelineEvents, timelineStartSeconds, timelineEndSeconds);
+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))}%`;
+};
+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);
   if (timelineInfo.buckets.length === 0) {
     return [];
   }
-  return [{
-    childCount: 3,
-    className: 'ChatDebugViewTimeline',
+  const selectionNodes = timelineInfo.hasSelection && timelineInfo.selectionStartPercent !== null && timelineInfo.selectionEndPercent !== null ? [{
+    childCount: 0,
+    className: 'ChatDebugViewTimelineSelectionRange',
+    style: `left:${formatPercent(timelineInfo.selectionStartPercent)};width:${formatPercent(timelineInfo.selectionEndPercent - timelineInfo.selectionStartPercent)};`,
+    type: Div
+  }, {
+    childCount: 0,
+    className: 'ChatDebugViewTimelineSelectionMarker ChatDebugViewTimelineSelectionMarkerStart',
+    style: `left:${formatPercent(timelineInfo.selectionStartPercent)};`,
     type: Div
   }, {
+    childCount: 0,
+    className: 'ChatDebugViewTimelineSelectionMarker ChatDebugViewTimelineSelectionMarkerEnd',
+    style: `left:${formatPercent(timelineInfo.selectionEndPercent)};`,
+    type: Div
+  }] : [];
+  return [{
     childCount: 2,
-    className: 'ChatDebugViewTimelineTop',
+    className: 'ChatDebugViewTimeline',
     type: Div
   }, {
     childCount: 1,
-    className: 'ChatDebugViewTimelineTitle',
+    className: 'ChatDebugViewTimelineTop',
     type: Div
-  }, text('Timeline'), {
+  }, {
     childCount: 1,
     className: 'ChatDebugViewTimelineSummary',
     type: Div
-  }, text(getTimelineSummary(timelineEvents, timelineStartSeconds, timelineEndSeconds)), {
-    childCount: 1,
-    className: 'ChatDebugViewTimelineControls',
-    type: Div
-  }, {
+  }, text(getTimelineSummary(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds)), {
     childCount: 2,
-    className: `ChatDebugViewTimelineReset${timelineInfo.hasSelection ? '' : ' ChatDebugViewTimelineResetSelected'}`,
-    type: Label
+    className: 'ChatDebugViewTimelineInteractive',
+    onDoubleClick: HandleTimelineDoubleClick,
+    onPointerDown: HandleTimelinePointerDown,
+    type: Div
   }, {
-    checked: !timelineInfo.hasSelection,
-    childCount: 0,
-    className: 'ChatDebugViewTimelinePresetInput',
-    inputType: 'radio',
-    name: TimelineRangePreset,
-    onChange: HandleSimpleInput,
-    type: Input,
-    value: ''
-  }, text('All'), {
     childCount: timelineInfo.buckets.length,
     className: 'ChatDebugViewTimelineBuckets',
     type: Div
-  }, ...timelineInfo.buckets.flatMap(bucket => {
-    const presetValue = `${formatTimelinePresetValue(bucket.startSeconds)}:${formatTimelinePresetValue(bucket.endSeconds)}`;
-    return [{
-      childCount: 2,
-      className: `ChatDebugViewTimelineBucket${bucket.isSelected ? ' ChatDebugViewTimelineBucketSelected' : ''}`,
-      type: Label
-    }, {
-      checked: false,
-      childCount: 0,
-      className: 'ChatDebugViewTimelinePresetInput',
-      inputType: 'radio',
-      name: TimelineRangePreset,
-      onChange: HandleSimpleInput,
-      type: Input,
-      value: presetValue
-    }, {
-      childCount: bucket.unitCount === 0 ? 1 : bucket.unitCount,
-      className: `ChatDebugViewTimelineBucketBar${bucket.isSelected ? ' ChatDebugViewTimelineBucketBarSelected' : ''}`,
-      type: Div
-    }, ...(bucket.unitCount === 0 ? [{
-      childCount: 0,
-      className: 'ChatDebugViewTimelineBucketUnit ChatDebugViewTimelineBucketUnitEmpty',
-      type: Div
-    }] : Array.from({
-      length: bucket.unitCount
-    }).fill({
-      childCount: 0,
-      className: 'ChatDebugViewTimelineBucketUnit',
-      type: Div
-    }))];
-  })];
+  }, ...timelineInfo.buckets.flatMap(getBucketDom), {
+    childCount: selectionNodes.length,
+    className: 'ChatDebugViewTimelineSelectionOverlay',
+    type: Div
+  }, ...selectionNodes];
 };
 
-const getDevtoolsDom = (events, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds) => {
+const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = 'No events have been found', timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response) => {
   const rowNodes = getDevtoolsRows(events, selectedEventIndex);
-  const timelineNodes = getTimelineNodes(timelineEvents, timelineStartSeconds, timelineEndSeconds);
-  const selectedEvent = selectedEventIndex === null ? undefined : events[selectedEventIndex];
+  const timelineNodes = getTimelineNodes(timelineEvents, timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
   const selectedEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
   const hasSelectedEvent = selectedEventNodes.length > 0;
-  const eventsClassName = `${hasSelectedEvent ? 'ChatDebugViewEvents' : 'ChatDebugViewEvents ChatDebugViewEventsFullWidth'}${timelineNodes.length > 0 ? ' ChatDebugViewEvents--timeline' : ''}`;
-  const eventsChildCount = timelineNodes.length > 0 ? 2 : 1;
-  const detailsNodes = hasSelectedEvent ? [{
-    childCount: 2,
-    className: 'ChatDebugViewDetails',
-    type: Div
-  }, {
-    childCount: 2,
-    className: 'ChatDebugViewDetailsTop',
-    type: Div
-  }, {
-    childCount: 1,
-    className: 'ChatDebugViewDetailsTitle',
-    type: Div
-  }, text('Details'), {
-    childCount: 0,
-    className: 'ChatDebugViewDetailsClose',
-    inputType: 'checkbox',
-    name: CloseDetails,
-    onChange: HandleSimpleInput,
-    type: Input,
-    value: 'close'
-  }, {
-    childCount: selectedEventNodes.length,
-    className: 'ChatDebugViewDetailsBody',
-    type: Div
-  }, ...selectedEventNodes] : [];
+  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableDom(rowNodes, events.length);
+  const eventsClassName = getEventsClassName(hasSelectedEvent);
+  const detailsNodes = getDetailsDom(selectedEventNodes, selectedEvent, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response);
+  const sashNodes = getSashNodesDom(hasSelectedEvent);
+  const splitChildCount = hasSelectedEvent ? 3 : 1;
+  const mainChildCount = 1 + (timelineNodes.length > 0 ? 1 : 0);
   return [{
-    childCount: hasSelectedEvent ? 2 : 1,
+    childCount: mainChildCount,
     className: 'ChatDebugViewDevtoolsMain',
     type: Div
-  }, {
-    childCount: eventsChildCount,
-    className: eventsClassName,
-    type: Div
   }, ...timelineNodes, {
-    childCount: 2,
-    className: 'ChatDebugViewTable',
-    type: Div
-  }, {
-    childCount: 5,
-    className: 'ChatDebugViewTableHeader',
+    childCount: splitChildCount,
+    className: 'ChatDebugViewDevtoolsSplit',
     type: Div
   }, {
     childCount: 1,
-    className: 'ChatDebugViewHeaderCell ChatDebugViewCellType',
-    type: Div
-  }, text('Type'), {
-    childCount: 1,
-    className: 'ChatDebugViewHeaderCell ChatDebugViewCellTime',
-    type: Div
-  }, text('Started'), {
-    childCount: 1,
-    className: 'ChatDebugViewHeaderCell ChatDebugViewCellTime',
-    type: Div
-  }, text('Ended'), {
-    childCount: 1,
-    className: 'ChatDebugViewHeaderCell ChatDebugViewCellDuration',
-    type: Div
-  }, text('Duration'), {
-    childCount: 1,
-    className: 'ChatDebugViewHeaderCell ChatDebugViewCellStatus',
-    type: Div
-  }, text('Status'), {
-    childCount: rowNodes.length === 0 ? 1 : rowNodes.length,
-    className: 'ChatDebugViewTableBody',
-    onClick: HandleEventRowClick,
+    className: eventsClassName,
     type: Div
-  }, ...rowNodes, ...detailsNodes];
+  }, ...tableNodes, ...sashNodes, ...detailsNodes];
 };
 
 const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
@@ -3172,12 +4251,13 @@ const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
     type: Div
   }, text(errorMessage || emptyMessage)] : eventNodes)];
 };
-const getQuickFilterNodes = eventCategoryFilter => {
+
+const getQuickFilterNodes = (eventCategoryFilter, eventCategoryFilterOptions) => {
   return [{
-    childCount: options.length,
+    childCount: eventCategoryFilterOptions.length,
     className: 'ChatDebugViewQuickFilters',
     type: Div
-  }, ...options.flatMap(option => {
+  }, ...eventCategoryFilterOptions.flatMap(option => {
     const isSelected = option.value === eventCategoryFilter;
     return [{
       childCount: 2,
@@ -3195,6 +4275,7 @@ const getQuickFilterNodes = eventCategoryFilter => {
     }, text(option.label)];
   })];
 };
+
 const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds) => {
   const trimmedStart = timelineStartSeconds.trim();
   const trimmedEnd = timelineEndSeconds.trim();
@@ -3209,19 +4290,11 @@ const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds)
   }
   return '';
 };
-const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, showEventStreamFinishedEvents, showInputEvents, showResponsePartEvents, useDevtoolsLayout, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineEvents, events) => {
+
+const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, eventCategoryFilterOptions, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response) => {
   if (errorMessage) {
-    return [{
-      childCount: 1,
-      className: 'ChatDebugView',
-      type: Div
-    }, {
-      childCount: 1,
-      className: 'ChatDebugViewError',
-      type: Div
-    }, text(errorMessage)];
+    return getDebugErrorDom(errorMessage);
   }
-  const eventNodes = events.flatMap(getEventNode);
   const trimmedFilterValue = filterValue.trim();
   const filterDescriptionParts = [];
   if (eventCategoryFilter !== All) {
@@ -3237,90 +4310,24 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, sho
   const hasFilterValue = filterDescriptionParts.length > 0;
   const filterDescription = filterDescriptionParts.join(' ');
   const noFilteredEventsMessage = `no events found matching ${filterDescription}`;
-  const eventCountText = events.length === 0 && hasFilterValue ? noFilteredEventsMessage : `${events.length} event${events.length === 1 ? '' : 's'}`;
-  const emptyMessage = events.length === 0 && hasFilterValue ? noFilteredEventsMessage : 'No events';
+  const emptyMessage = events.length === 0 && hasFilterValue ? noFilteredEventsMessage : 'No events have been found';
   const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
-  const contentNodes = useDevtoolsLayout ? getDevtoolsDom(events, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds) : getLegacyEventsDom(errorMessage, emptyMessage, eventNodes);
-  const quickFilterNodes = useDevtoolsLayout ? getQuickFilterNodes(eventCategoryFilter) : [];
-  const rootChildCount = useDevtoolsLayout ? 4 : 3;
+  const contentNodes = useDevtoolsLayout ? getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response) : getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
+  const quickFilterNodes = useDevtoolsLayout ? getQuickFilterNodes(eventCategoryFilter, eventCategoryFilterOptions) : [];
+  const debugViewTopDom = getDebugViewTopDom(filterValue, useDevtoolsLayout, quickFilterNodes);
+  const rootChildCount = 2;
   return [{
     childCount: rootChildCount,
     className: useDevtoolsLayout ? 'ChatDebugView ChatDebugView--devtools' : 'ChatDebugView',
     type: Div
-  }, {
-    childCount: 2,
-    className: 'ChatDebugViewTop',
-    type: Div
-  }, {
-    autocomplete: 'off',
-    childCount: 0,
-    className: 'InputBox',
-    inputType: 'search',
-    name: Filter,
-    onInput: HandleFilterInput,
-    placeholder: 'Filter events',
-    type: Input,
-    value: filterValue
-  }, {
-    childCount: 4,
-    className: 'ChatDebugViewToggle',
-    type: Div
-  }, {
-    childCount: 2,
-    className: 'ChatDebugViewToggleLabel',
-    type: Label
-  }, {
-    checked: showEventStreamFinishedEvents,
-    childCount: 0,
-    inputType: 'checkbox',
-    name: ShowEventStreamFinishedEvents,
-    onChange: HandleInput,
-    type: Input
-  }, text('Show event stream finished events'), {
-    childCount: 2,
-    className: 'ChatDebugViewToggleLabel',
-    type: Label
-  }, {
-    checked: showInputEvents,
-    childCount: 0,
-    inputType: 'checkbox',
-    name: ShowInputEvents,
-    onChange: HandleInput,
-    type: Input
-  }, text('Show input events'), {
-    childCount: 2,
-    className: 'ChatDebugViewToggleLabel',
-    type: Label
-  }, {
-    checked: showResponsePartEvents,
-    childCount: 0,
-    inputType: 'checkbox',
-    name: ShowResponsePartEvents,
-    onChange: HandleInput,
-    type: Input
-  }, text('Show response part events'), {
-    childCount: 2,
-    className: 'ChatDebugViewToggleLabel',
-    type: Label
-  }, {
-    checked: useDevtoolsLayout,
-    childCount: 0,
-    inputType: 'checkbox',
-    name: UseDevtoolsLayout,
-    onChange: HandleInput,
-    type: Input
-  }, text('Use devtools layout'), ...quickFilterNodes, {
-    childCount: 1,
-    className: 'ChatDebugViewEventCount',
-    type: Div
-  }, text(eventCountText), ...contentNodes];
+  }, ...debugViewTopDom, ...contentNodes];
 };
 
 const withSessionEventIds = events => {
   return events.map((event, index) => {
     return {
       ...event,
-      eventId: index + 1
+      eventId: typeof event.eventId === 'number' ? event.eventId : index + 1
     };
   });
 };
@@ -3328,9 +4335,9 @@ const renderItems = (oldState, newState) => {
   if (newState.initial) {
     return [SetDom2, newState.uid, []];
   }
-  const timelineEvents = getFilteredEvents(newState.events, newState.filterValue, newState.eventCategoryFilter, newState.showInputEvents, newState.showResponsePartEvents, newState.showEventStreamFinishedEvents);
+  const timelineEvents = getTimelineEvents(newState);
   const filteredEvents = filterEventsByTimelineRange(timelineEvents, newState.timelineStartSeconds, newState.timelineEndSeconds);
-  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, newState.eventCategoryFilter, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, withSessionEventIds(timelineEvents), withSessionEventIds(filteredEvents));
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, newState.eventCategoryFilter, newState.eventCategoryFilterOptions, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, withSessionEventIds(timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, newState.selectedDetailTab);
   return [SetDom2, newState.uid, dom];
 };
 
@@ -3379,6 +4386,10 @@ const renderEventListeners = () => {
   return [{
     name: HandleEventRowClick,
     params: ['handleEventRowClick', 'event.target.dataset.index']
+  }, {
+    name: HandleTableBodyContextMenu,
+    params: ['handleTableBodyContextMenu'],
+    preventDefault: true
   }, {
     name: HandleFilterInput,
     params: ['handleInput', TargetName, TargetValue]
@@ -3388,6 +4399,29 @@ const renderEventListeners = () => {
   }, {
     name: HandleSimpleInput,
     params: ['handleInput', TargetName, TargetValue]
+  }, {
+    name: HandleSashPointerDown,
+    params: ['handleSashPointerDown', ClientX, ClientY],
+    trackPointerEvents: [HandleSashPointerMove, HandleSashPointerUp]
+  }, {
+    name: HandleSashPointerMove,
+    params: ['handleSashPointerMove', ClientX, ClientY]
+  }, {
+    name: HandleSashPointerUp,
+    params: ['handleSashPointerUp', ClientX, ClientY]
+  }, {
+    name: HandleTimelinePointerDown,
+    params: ['handleTimelinePointerDown', ClientX],
+    trackPointerEvents: [HandleTimelinePointerMove, HandleTimelinePointerUp]
+  }, {
+    name: HandleTimelinePointerMove,
+    params: ['handleTimelinePointerMove', ClientX]
+  }, {
+    name: HandleTimelinePointerUp,
+    params: ['handleTimelinePointerUp', ClientX]
+  }, {
+    name: HandleTimelineDoubleClick,
+    params: ['handleTimelineDoubleClick']
   }];
 };
 
@@ -3395,11 +4429,25 @@ const rerender = state => {
   return structuredClone(state);
 };
 
-const resize = (state, dimensions) => {
-  return {
+const handleResize = (state, dimensions) => {
+  const nextState = {
     ...state,
     ...dimensions
   };
+  return {
+    ...nextState,
+    tableWidth: clampTableWidth(nextState.width, state.tableWidth)
+  };
+};
+
+const isResizeDimensions = value => {
+  return typeof value === 'object' && value !== null;
+};
+const resize = (state, dimensions) => {
+  if (!isResizeDimensions(dimensions)) {
+    return state;
+  }
+  return handleResize(state, dimensions);
 };
 
 const saveState = state => {
@@ -3407,13 +4455,11 @@ const saveState = state => {
     eventCategoryFilter,
     filterValue,
     height,
+    selectedEventId,
     sessionId,
-    showEventStreamFinishedEvents,
-    showInputEvents,
-    showResponsePartEvents,
+    tableWidth,
     timelineEndSeconds,
     timelineStartSeconds,
-    useDevtoolsLayout,
     width,
     x,
     y
@@ -3422,13 +4468,11 @@ const saveState = state => {
     eventCategoryFilter,
     filterValue,
     height,
+    selectedEventId,
     sessionId,
-    showEventStreamFinishedEvents,
-    showInputEvents,
-    showResponsePartEvents,
+    tableWidth,
     timelineEndSeconds,
     timelineStartSeconds,
-    useDevtoolsLayout,
     width,
     x,
     y
@@ -3441,17 +4485,50 @@ const setEvents = (state, events) => {
     errorMessage: '',
     events,
     initial: false,
+    selectedEvent: null,
+    selectedEventId: null,
     selectedEventIndex: null
   };
 };
 
+const setIndexedDbSupportForTest = supported => {
+  return setIndexedDbSupportOverride(supported);
+};
+
 const setSessionId = async (state, sessionId) => {
-  const events = await listChatViewEvents(sessionId, state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionIdIndexName);
+  const result = await listChatViewEvents(sessionId, state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionIdIndexName);
+  if (result.type === 'not-supported') {
+    return {
+      ...state,
+      errorMessage: getIndexedDbNotSupportedMessage(),
+      events: [],
+      initial: false,
+      selectedEvent: null,
+      selectedEventId: null,
+      sessionId
+    };
+  }
+  if (result.type === 'error') {
+    return {
+      ...state,
+      errorMessage: getFailedToLoadMessage(sessionId),
+      events: [],
+      initial: false,
+      selectedEvent: null,
+      selectedEventId: null,
+      sessionId
+    };
+  }
+  const {
+    events
+  } = result;
   return {
     ...state,
     errorMessage: '',
     events,
     initial: false,
+    selectedEvent: null,
+    selectedEventId: null,
     sessionId
   };
 };
@@ -3462,6 +4539,14 @@ const commandMap = {
   'ChatDebug.getCommandIds': getCommandIds,
   'ChatDebug.handleEventRowClick': wrapCommand(handleEventRowClick),
   'ChatDebug.handleInput': wrapCommand(handleInput),
+  'ChatDebug.handleSashPointerDown': wrapCommand(handleSashPointerDown),
+  'ChatDebug.handleSashPointerMove': wrapCommand(handleSashPointerMove),
+  'ChatDebug.handleSashPointerUp': wrapCommand(handleSashPointerUp),
+  'ChatDebug.handleTableBodyContextMenu': wrapCommand(handleTableBodyContextMenu),
+  'ChatDebug.handleTimelineDoubleClick': wrapCommand(handleTimelineDoubleClick),
+  'ChatDebug.handleTimelinePointerDown': wrapCommand(handleTimelinePointerDown),
+  'ChatDebug.handleTimelinePointerMove': wrapCommand(handleTimelinePointerMove),
+  'ChatDebug.handleTimelinePointerUp': wrapCommand(handleTimelinePointerUp),
   'ChatDebug.loadContent': wrapCommand(loadContent),
   'ChatDebug.loadContent2': wrapCommand(loadContent),
   'ChatDebug.refresh': wrapCommand(refresh),
@@ -3471,6 +4556,7 @@ const commandMap = {
   'ChatDebug.resize': wrapCommand(resize),
   'ChatDebug.saveState': wrapGetter(saveState),
   'ChatDebug.setEvents': wrapCommand(setEvents),
+  'ChatDebug.setIndexedDbSupportForTest': setIndexedDbSupportForTest,
   'ChatDebug.setSessionId': wrapCommand(setSessionId),
   'ChatDebug.terminate': terminate
 };