@lvce-editor/chat-debug-view 5.0.0 → 5.2.0

package/dist/chatDebugViewWorkerMain.js

@@ -1024,12 +1024,16 @@ const {
 } = create$1();
 
 const Response = 'response';
+const Preview = 'preview';
 const Timing = 'timing';
-const detailTabs = [Response, Timing];
+const detailTabs = [Preview, Response, Timing];
 const isDetailTab = value => {
-  return value === Response || value === Timing;
+  return value === Response || value === Preview || value === Timing;
 };
 const getDetailTabLabel = value => {
+  if (value === Preview) {
+    return 'Preview';
+  }
   if (value === Timing) {
     return 'Timing';
   }
@@ -1161,334 +1165,20 @@ const diff = (oldState, newState) => {
 
 const diff2 = uid => {
   const {
-    newState,
-    oldState
-  } = get(uid);
-  return diff(oldState, newState);
-};
-
-const hasMatchingToolName$1 = (startedEvent, finishedEvent) => {
-  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
-    return startedEvent.toolName === finishedEvent.toolName;
-  }
-  return true;
-};
-
-const isMatchingToolExecutionPair = (startedEvent, finishedEvent) => {
-  return startedEvent.sessionId === finishedEvent.sessionId && hasMatchingToolName$1(startedEvent, finishedEvent);
-};
-
-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();
-const eventStableIdState = {
-  nextStableEventId: 1
-};
-
-const getOrCreateStableEventId = event => {
-  const existingStableEventId = eventStableIds.get(event);
-  if (existingStableEventId) {
-    return existingStableEventId;
-  }
-  const stableEventId = `event-${eventStableIdState.nextStableEventId++}`;
-  eventStableIds.set(event, stableEventId);
-  return stableEventId;
-};
-
-const getStartedTimestamp = event => {
-  return getTimestamp$1(event.started) ?? getTimestamp$1(event.startTime) ?? getTimestamp$1(event.startTimestamp) ?? getTimestamp$1(event.timestamp);
-};
-
-const setStableEventId = (event, stableEventId) => {
-  eventStableIds.set(event, stableEventId);
-};
-
-const mergeToolExecutionEvents$1 = (startedEvent, finishedEvent) => {
-  const ended = getEndedTimestamp(finishedEvent);
-  const {
-    eventId
-  } = startedEvent;
-  const started = getStartedTimestamp(startedEvent);
-  const mergedEvent = {
-    ...startedEvent,
-    ...finishedEvent,
-    ...(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++) {
-    const event = events[i];
-    if (isToolExecutionStartedEvent(event)) {
-      const nextEvent = events[i + 1];
-      if (nextEvent && isToolExecutionFinishedEvent(nextEvent) && isMatchingToolExecutionPair(event, nextEvent)) {
-        collapsedEvents.push(mergeToolExecutionEvents$1(event, nextEvent));
-        i++;
-        continue;
-      }
-    }
-    collapsedEvents.push(event);
-  }
-  return collapsedEvents;
-};
-
-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 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 isUiEvent = event => {
-  return event.type.startsWith('handle-') && event.type !== 'handle-response';
-};
-
-const matchesEventCategoryFilter = (event, eventCategoryFilter) => {
-  switch (eventCategoryFilter) {
-    case Network:
-      return isNetworkEvent(event);
-    case Stream:
-      return isStreamEvent(event);
-    case Tools:
-      return isToolEvent(event);
-    case Ui:
-      return isUiEvent(event);
-    default:
-      return true;
-  }
-};
-
-const getFilteredEvents = (events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
-  const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
-  const collapsedEvents = collapseToolExecutionEvents(visibleEvents);
-  const parsedFilter = parseFilterValue(filterValue);
-  const activeEventCategoryFilter = parsedFilter.eventCategoryFilter === All ? eventCategoryFilter : parsedFilter.eventCategoryFilter;
-  const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilter));
-  const {
-    filterText
-  } = parsedFilter;
-  if (!filterText) {
-    return filteredByCategory;
-  }
-  return filteredByCategory.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
-};
-
-const toTimeNumber = value => {
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return value;
-  }
-  if (typeof value === 'string') {
-    const timestamp = Date.parse(value);
-    if (!Number.isNaN(timestamp)) {
-      return timestamp;
-    }
-  }
-  return undefined;
-};
-
-const getEventTime = event => {
-  return toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
-};
-
-const maxBarUnits = 8;
-const parseTimelineSeconds = value => {
-  const trimmed = value.trim();
-  if (!trimmed) {
-    return undefined;
-  }
-  const parsed = Number.parseFloat(trimmed);
-  if (!Number.isFinite(parsed) || parsed < 0) {
-    return undefined;
-  }
-  return parsed;
-};
-const roundSeconds = value => {
-  return Number(value.toFixed(3));
-};
-const getEventsWithTime = events => {
-  return events.flatMap(event => {
-    const time = getEventTime(event);
-    if (time === undefined) {
-      return [];
-    }
-    return [{
-      event,
-      time
-    }];
-  });
-};
-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);
-  if (parsedStart === undefined && parsedEnd === undefined) {
-    return {
-      endSeconds: null,
-      hasSelection: false,
-      startSeconds: null
-    };
-  }
-  const rawStart = parsedStart ?? 0;
-  const rawEnd = parsedEnd ?? durationSeconds;
-  const normalizedStart = Math.max(0, Math.min(durationSeconds, Math.min(rawStart, rawEnd)));
-  const normalizedEnd = Math.max(0, Math.min(durationSeconds, Math.max(rawStart, rawEnd)));
-  return {
-    endSeconds: roundSeconds(normalizedEnd),
-    hasSelection: true,
-    startSeconds: roundSeconds(normalizedStart)
-  };
-};
-const filterEventsByTimelineRange = (events, startValue, endValue) => {
-  const eventsWithTime = getEventsWithTime(events);
-  if (eventsWithTime.length === 0) {
-    return events;
-  }
-  const baseTime = eventsWithTime[0].time;
-  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
-  const durationSeconds = roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
-  const range = getNormalizedRange(durationSeconds, startValue, endValue);
-  if (!range.hasSelection || range.startSeconds === null || range.endSeconds === null) {
-    return events;
-  }
-  const startTime = baseTime + range.startSeconds * 1000;
-  const endTime = baseTime + range.endSeconds * 1000;
-  return eventsWithTime.filter(item => item.time >= startTime && item.time <= endTime).map(item => item.event);
-};
-const getTimelineInfo = (events, startValue, endValue) => {
-  const eventsWithTime = getEventsWithTime(events);
-  if (eventsWithTime.length === 0) {
-    return {
-      buckets: [],
-      durationSeconds: 0,
-      endSeconds: null,
-      hasSelection: false,
-      selectionEndPercent: null,
-      selectionStartPercent: null,
-      startSeconds: null
-    };
-  }
-  const baseTime = eventsWithTime[0].time;
-  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
-  const durationMs = Math.max(0, lastTime - baseTime);
-  const durationSeconds = roundSeconds(durationMs / 1000);
-  const range = getNormalizedRange(durationSeconds, startValue, endValue);
-  const bucketCount = durationSeconds === 0 ? 1 : Math.max(12, Math.min(48, Math.ceil(durationSeconds)));
-  const bucketDurationMs = durationMs === 0 ? 1000 : durationMs / bucketCount;
-  const counts = Array.from({
-    length: bucketCount
-  }).fill(0);
-  for (const item of eventsWithTime) {
-    const offsetMs = item.time - baseTime;
-    const index = durationMs === 0 ? 0 : Math.min(bucketCount - 1, Math.floor(offsetMs / durationMs * bucketCount));
-    counts[index] += 1;
-  }
-  const maxCount = Math.max(...counts);
-  const selectionStartPercent = range.hasSelection && range.startSeconds !== null ? getSelectionPercent(range.startSeconds, durationSeconds) : null;
-  const selectionEndPercent = range.hasSelection && range.endSeconds !== null ? getSelectionPercent(range.endSeconds, durationSeconds) : null;
-  const buckets = counts.map((count, index) => {
-    const bucketStartMs = index * bucketDurationMs;
-    const bucketEndMs = index === bucketCount - 1 ? durationMs : (index + 1) * bucketDurationMs;
-    const hasSelection = range.hasSelection && range.startSeconds !== null && range.endSeconds !== null;
-    const selectionStartMs = hasSelection ? range.startSeconds * 1000 : 0;
-    const selectionEndMs = hasSelection ? range.endSeconds * 1000 : 0;
-    return {
-      count,
-      endSeconds: roundSeconds(bucketEndMs / 1000),
-      isSelected: hasSelection && bucketEndMs >= selectionStartMs && bucketStartMs <= selectionEndMs,
-      startSeconds: roundSeconds(bucketStartMs / 1000),
-      unitCount: count === 0 ? 0 : Math.max(1, Math.round(count / maxCount * maxBarUnits))
-    };
-  });
-  return {
-    buckets,
-    durationSeconds,
-    endSeconds: range.endSeconds,
-    hasSelection: range.hasSelection,
-    selectionEndPercent,
-    selectionStartPercent,
-    startSeconds: range.startSeconds
-  };
+    newState,
+    oldState
+  } = get(uid);
+  return diff(oldState, newState);
+};
+
+const handleDetailsContextMenu = state => {
+  return state;
 };
 
 // cspell:ignore IDBP
 
-const startedEventType = 'tool-execution-started';
-const finishedEventType = 'tool-execution-finished';
+const startedEventType$1 = 'tool-execution-started';
+const finishedEventType$1 = 'tool-execution-finished';
 const getRawEventBySessionIdAndEventId = async (store, sessionId, sessionIdIndexName, eventId) => {
   if (eventId < 1) {
     return undefined;
@@ -1510,18 +1200,18 @@ const getRawEventBySessionIdAndEventId = async (store, sessionId, sessionIdIndex
   const events = all.filter(event => event.sessionId === sessionId);
   return events[eventId - 1];
 };
-const getTimestamp = value => {
+const getTimestamp$1 = value => {
   return typeof value === 'string' || typeof value === 'number' ? value : undefined;
 };
-const hasMatchingToolName = (startedEvent, finishedEvent) => {
+const hasMatchingToolName$1 = (startedEvent, finishedEvent) => {
   if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
     return startedEvent.toolName === finishedEvent.toolName;
   }
   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);
+const mergeToolExecutionEvents$1 = (startedEvent, finishedEvent, eventId) => {
+  const ended = getTimestamp$1(finishedEvent.ended) ?? getTimestamp$1(finishedEvent.endTime) ?? getTimestamp$1(finishedEvent.timestamp);
+  const started = getTimestamp$1(startedEvent.started) ?? getTimestamp$1(startedEvent.startTime) ?? getTimestamp$1(startedEvent.timestamp);
   return {
     ...startedEvent,
     ...finishedEvent,
@@ -1546,20 +1236,20 @@ const getEventDetailsBySessionIdAndEventId = async (store, sessionId, sessionIdI
       eventId
     };
   }
-  if (event.type !== startedEventType) {
+  if (event.type !== startedEventType$1) {
     return {
       ...event,
       eventId
     };
   }
   const nextEvent = await getRawEventBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId + 1);
-  if (!nextEvent || nextEvent.type !== finishedEventType || nextEvent.sessionId !== sessionId || !hasMatchingToolName(event, nextEvent)) {
+  if (!nextEvent || nextEvent.type !== finishedEventType$1 || nextEvent.sessionId !== sessionId || !hasMatchingToolName$1(event, nextEvent)) {
     return {
       ...event,
       eventId
     };
   }
-  return mergeToolExecutionEvents(event, nextEvent, eventId);
+  return mergeToolExecutionEvents$1(event, nextEvent, eventId);
 };
 
 const instanceOfAny = (object, constructors) => constructors.some(c => object instanceof c);
@@ -1819,48 +1509,352 @@ replaceTraps(oldTraps => ({
 const openDatabaseDependencies = {
   openDB: openDB
 };
-const openDatabase = async (databaseName, dataBaseVersion) => {
-  return openDatabaseDependencies.openDB(databaseName, dataBaseVersion);
+const openDatabase = async (databaseName, dataBaseVersion) => {
+  return openDatabaseDependencies.openDB(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 null;
+    }
+    const transaction = database.transaction(eventStoreName, 'readonly');
+    const store = transaction.objectStore(eventStoreName);
+    const event = await loadSelectedEventDependencies.getEventDetailsBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId, type);
+    return event ?? null;
+  } finally {
+    database.close();
+  }
+};
+
+const hasMatchingToolName = (startedEvent, finishedEvent) => {
+  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
+    return startedEvent.toolName === finishedEvent.toolName;
+  }
+  return true;
+};
+
+const isMatchingToolExecutionPair = (startedEvent, finishedEvent) => {
+  return startedEvent.sessionId === finishedEvent.sessionId && hasMatchingToolName(startedEvent, finishedEvent);
+};
+
+const startedEventType = 'tool-execution-started';
+const finishedEventType = 'tool-execution-finished';
+const mergedEventType = 'tool-execution';
+
+const isToolExecutionFinishedEvent = event => {
+  return event.type === finishedEventType;
+};
+
+const isToolExecutionStartedEvent = event => {
+  return event.type === startedEventType;
+};
+
+const getTimestamp = value => {
+  return typeof value === 'string' || typeof value === 'number' ? value : undefined;
+};
+
+const getEndedTimestamp = event => {
+  return getTimestamp(event.ended) ?? getTimestamp(event.endTime) ?? getTimestamp(event.endTimestamp) ?? getTimestamp(event.timestamp);
+};
+
+const eventStableIds = new WeakMap();
+const eventStableIdState = {
+  nextStableEventId: 1
+};
+
+const getOrCreateStableEventId = event => {
+  const existingStableEventId = eventStableIds.get(event);
+  if (existingStableEventId) {
+    return existingStableEventId;
+  }
+  const stableEventId = `event-${eventStableIdState.nextStableEventId++}`;
+  eventStableIds.set(event, stableEventId);
+  return stableEventId;
+};
+
+const getStartedTimestamp = event => {
+  return getTimestamp(event.started) ?? getTimestamp(event.startTime) ?? getTimestamp(event.startTimestamp) ?? getTimestamp(event.timestamp);
+};
+
+const setStableEventId = (event, stableEventId) => {
+  eventStableIds.set(event, stableEventId);
+};
+
+const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
+  const ended = getEndedTimestamp(finishedEvent);
+  const {
+    eventId
+  } = startedEvent;
+  const started = getStartedTimestamp(startedEvent);
+  const mergedEvent = {
+    ...startedEvent,
+    ...finishedEvent,
+    ...(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++) {
+    const event = events[i];
+    if (isToolExecutionStartedEvent(event)) {
+      const nextEvent = events[i + 1];
+      if (nextEvent && isToolExecutionFinishedEvent(nextEvent) && isMatchingToolExecutionPair(event, nextEvent)) {
+        collapsedEvents.push(mergeToolExecutionEvents(event, nextEvent));
+        i++;
+        continue;
+      }
+    }
+    collapsedEvents.push(event);
+  }
+  return collapsedEvents;
+};
+
+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 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 isUiEvent = event => {
+  return event.type.startsWith('handle-') && event.type !== 'handle-response';
+};
+
+const matchesEventCategoryFilter = (event, eventCategoryFilter) => {
+  switch (eventCategoryFilter) {
+    case Network:
+      return isNetworkEvent(event);
+    case Stream:
+      return isStreamEvent(event);
+    case Tools:
+      return isToolEvent(event);
+    case Ui:
+      return isUiEvent(event);
+    default:
+      return true;
+  }
+};
+
+const getFilteredEvents = (events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
+  const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+  const collapsedEvents = collapseToolExecutionEvents(visibleEvents);
+  const parsedFilter = parseFilterValue(filterValue);
+  const activeEventCategoryFilter = parsedFilter.eventCategoryFilter === All ? eventCategoryFilter : parsedFilter.eventCategoryFilter;
+  const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilter));
+  const {
+    filterText
+  } = parsedFilter;
+  if (!filterText) {
+    return filteredByCategory;
+  }
+  return filteredByCategory.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
+};
+
+const toTimeNumber = value => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const timestamp = Date.parse(value);
+    if (!Number.isNaN(timestamp)) {
+      return timestamp;
+    }
+  }
+  return undefined;
+};
+
+const getEventTime = event => {
+  return toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+};
+
+const maxBarUnits = 8;
+const parseTimelineSeconds = value => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  const parsed = Number.parseFloat(trimmed);
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    return undefined;
+  }
+  return parsed;
+};
+const roundSeconds = value => {
+  return Number(value.toFixed(3));
+};
+const getEventsWithTime = events => {
+  return events.flatMap(event => {
+    const time = getEventTime(event);
+    if (time === undefined) {
+      return [];
+    }
+    return [{
+      event,
+      time
+    }];
+  });
+};
+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);
+  if (parsedStart === undefined && parsedEnd === undefined) {
+    return {
+      endSeconds: null,
+      hasSelection: false,
+      startSeconds: null
+    };
+  }
+  const rawStart = parsedStart ?? 0;
+  const rawEnd = parsedEnd ?? durationSeconds;
+  const normalizedStart = Math.max(0, Math.min(durationSeconds, Math.min(rawStart, rawEnd)));
+  const normalizedEnd = Math.max(0, Math.min(durationSeconds, Math.max(rawStart, rawEnd)));
+  return {
+    endSeconds: roundSeconds(normalizedEnd),
+    hasSelection: true,
+    startSeconds: roundSeconds(normalizedStart)
+  };
 };
-
-const loadSelectedEventDependencies = {
-  getEventDetailsBySessionIdAndEventId: getEventDetailsBySessionIdAndEventId,
-  openDatabase: openDatabase
+const filterEventsByTimelineRange = (events, startValue, endValue) => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return events;
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  const durationSeconds = roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
+  const range = getNormalizedRange(durationSeconds, startValue, endValue);
+  if (!range.hasSelection || range.startSeconds === null || range.endSeconds === null) {
+    return events;
+  }
+  const startTime = baseTime + range.startSeconds * 1000;
+  const endTime = baseTime + range.endSeconds * 1000;
+  return eventsWithTime.filter(item => item.time >= startTime && item.time <= endTime).map(item => item.event);
 };
-const loadSelectedEvent = async (databaseName, dataBaseVersion, eventStoreName, sessionId, sessionIdIndexName, eventId, type) => {
-  const database = await loadSelectedEventDependencies.openDatabase(databaseName, dataBaseVersion);
-  try {
-    if (!database.objectStoreNames.contains(eventStoreName)) {
-      return null;
-    }
-    const transaction = database.transaction(eventStoreName, 'readonly');
-    const store = transaction.objectStore(eventStoreName);
-    const event = await loadSelectedEventDependencies.getEventDetailsBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId, type);
-    return event ?? null;
-  } finally {
-    database.close();
+const getTimelineInfo = (events, startValue, endValue) => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return {
+      buckets: [],
+      durationSeconds: 0,
+      endSeconds: null,
+      hasSelection: false,
+      selectionEndPercent: null,
+      selectionStartPercent: null,
+      startSeconds: null
+    };
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  const durationMs = Math.max(0, lastTime - baseTime);
+  const durationSeconds = roundSeconds(durationMs / 1000);
+  const range = getNormalizedRange(durationSeconds, startValue, endValue);
+  const bucketCount = durationSeconds === 0 ? 1 : Math.max(12, Math.min(48, Math.ceil(durationSeconds)));
+  const bucketDurationMs = durationMs === 0 ? 1000 : durationMs / bucketCount;
+  const counts = Array.from({
+    length: bucketCount
+  }).fill(0);
+  for (const item of eventsWithTime) {
+    const offsetMs = item.time - baseTime;
+    const index = durationMs === 0 ? 0 : Math.min(bucketCount - 1, Math.floor(offsetMs / durationMs * bucketCount));
+    counts[index] += 1;
   }
+  const maxCount = Math.max(...counts);
+  const selectionStartPercent = range.hasSelection && range.startSeconds !== null ? getSelectionPercent(range.startSeconds, durationSeconds) : null;
+  const selectionEndPercent = range.hasSelection && range.endSeconds !== null ? getSelectionPercent(range.endSeconds, durationSeconds) : null;
+  const buckets = counts.map((count, index) => {
+    const bucketStartMs = index * bucketDurationMs;
+    const bucketEndMs = index === bucketCount - 1 ? durationMs : (index + 1) * bucketDurationMs;
+    const hasSelection = range.hasSelection && range.startSeconds !== null && range.endSeconds !== null;
+    const selectionStartMs = hasSelection ? range.startSeconds * 1000 : 0;
+    const selectionEndMs = hasSelection ? range.endSeconds * 1000 : 0;
+    return {
+      count,
+      endSeconds: roundSeconds(bucketEndMs / 1000),
+      isSelected: hasSelection && bucketEndMs >= selectionStartMs && bucketStartMs <= selectionEndMs,
+      startSeconds: roundSeconds(bucketStartMs / 1000),
+      unitCount: count === 0 ? 0 : Math.max(1, Math.round(count / maxCount * maxBarUnits))
+    };
+  });
+  return {
+    buckets,
+    durationSeconds,
+    endSeconds: range.endSeconds,
+    hasSelection: range.hasSelection,
+    selectionEndPercent,
+    selectionStartPercent,
+    startSeconds: range.startSeconds
+  };
 };
 
-const 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;
-  }
-  return parsed;
-};
-const handleEventRowClick = async (state, value) => {
-  const selectedEventIndex = parseSelectedEventIndex$1(value);
-  if (selectedEventIndex === null) {
-    return state;
-  }
+const selectEventAtIndex = async (state, selectedEventIndex, dependencies) => {
   const currentEvents = getCurrentEvents$2(state);
   const selectedEvent = currentEvents[selectedEventIndex];
   if (!selectedEvent) {
@@ -1879,7 +1873,7 @@ const handleEventRowClick = async (state, value) => {
       selectedEventIndex
     };
   }
-  const selectedEventDetails = await handleEventRowClickDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
   return {
     ...state,
     selectedEvent: selectedEventDetails ?? selectedEvent,
@@ -1888,6 +1882,34 @@ const handleEventRowClick = async (state, value) => {
   };
 };
 
+const handleEventRowClickDependencies = {
+  loadSelectedEvent: loadSelectedEvent
+};
+const isPrimaryButton = button => {
+  return button === 0;
+};
+const parseSelectedEventIndex$1 = value => {
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed) || parsed < 0) {
+    return null;
+  }
+  return parsed;
+};
+const handleEventRowClick = async (state, value, button) => {
+  if (!isPrimaryButton(button)) {
+    return state;
+  }
+  const selectedEventIndex = parseSelectedEventIndex$1(value);
+  if (selectedEventIndex === null) {
+    return state;
+  }
+  return selectEventAtIndex(state, selectedEventIndex, handleEventRowClickDependencies);
+};
+
+const handleHeaderContextMenu = state => {
+  return state;
+};
+
 const getBoolean = value => {
   return value === true || value === 'true' || value === 'on' || value === '1';
 };
@@ -2110,7 +2132,15 @@ const handleTimelineDoubleClick = state => {
 };
 
 const getTimelineEvents = state => {
-  return getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  const {
+    eventCategoryFilter,
+    events,
+    filterValue,
+    showEventStreamFinishedEvents,
+    showInputEvents,
+    showResponsePartEvents
+  } = state;
+  return getFilteredEvents(events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
 };
 
 const getTimelineLeft = state => {
@@ -2901,12 +2931,26 @@ const getCss = state => {
   white-space: nowrap;
   min-width: 0;
   font-size: 11px;
-  text-transform: uppercase;
   letter-spacing: 0.04em;
   opacity: 0.8;
   contain: content;
 }
 
+.ChatDebugViewTableHeaderRow > .ChatDebugViewHeaderCell:nth-child(1) {
+  flex: 1 1 140px;
+  min-width: 0;
+}
+
+.ChatDebugViewTableHeaderRow > .ChatDebugViewHeaderCell:nth-child(2) {
+  flex: 0 0 90px;
+  justify-content: flex-end;
+}
+
+.ChatDebugViewTableHeaderRow > .ChatDebugViewHeaderCell:nth-child(3) {
+  flex: 0 0 96px;
+  justify-content: flex-end;
+}
+
 .ChatDebugViewTableBody {
   display: flex;
   flex-direction: column;
@@ -2936,8 +2980,12 @@ const getCss = state => {
 
 .ChatDebugViewEventRow {
   padding: 2px 8px;
-  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
-  cursor: pointer;
+  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 92%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.31)) 8%);
+  cursor: default;
+}
+
+.ChatDebugViewTableBody > .ChatDebugViewEventRow:nth-child(even) {
+  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 84%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.31)) 16%);
 }
 
 .ChatDebugViewEventRow:hover {
@@ -2952,6 +3000,7 @@ const getCss = state => {
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
+  pointer-events: none;
   contain: content;
 }
 
@@ -2977,6 +3026,10 @@ const getCss = state => {
   text-align: right;
 }
 
+.ChatDebugViewCellStatusError {
+  color: var(--vscode-errorForeground, #f14c4c);
+}
+
 .ChatDebugViewDetails {
   border: 1px solid var(--vscode-editorWidget-border, #454545);
   border-radius: 6px;
@@ -2995,6 +3048,7 @@ const getCss = state => {
   gap: 8px;
   padding: 0 8px;
   border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
+  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 72%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.18)) 28%);
   contain: content;
 }
 
@@ -3071,7 +3125,7 @@ const getCss = state => {
   color: var(--vscode-descriptionForeground, var(--vscode-foreground, #cccccc));
   cursor: pointer;
   white-space: nowrap;
-  contain: strict;
+  contain: content;
 }
 
 .ChatDebugViewDetailsTab:hover {
@@ -3080,7 +3134,7 @@ const getCss = state => {
 
 .ChatDebugViewDetailsTabSelected {
   border-bottom-color: var(--vscode-focusBorder, #007fd4);
-  color: var(--vscode-foreground, #cccccc);
+  color: var(--vscode-focusBorder, #007fd4);
 }
 
 .ChatDebugViewDetailsPanel {
@@ -3138,17 +3192,18 @@ const getCss = state => {
 .row {
   display: flex;
   align-items: baseline;
+  gap: 12px;
   min-width: 100%;
   width: max-content;
   white-space: nowrap;
-  contain: content;
+  contain: strict;
+  height: 20px;
 }
 
 .ChatDebugViewEventLineNumber {
   display: flex;
   justify-content: flex-end;
   flex: 0 0 3ch;
-  margin-right: 12px;
   opacity: 0.6;
   user-select: none;
   contain: content;
@@ -3170,9 +3225,6 @@ const getCss = state => {
   display: flex;
   flex-direction: column;
   width: 100%;
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
-  border-radius: 6px;
-  overflow: hidden;
   contain: strict;
   flex: 1;
 }
@@ -3578,14 +3630,87 @@ const diffTree = (oldNodes, newNodes) => {
   return removeTrailingNavigationPatches(patches);
 };
 
+const ChatDebugView = 'ChatDebugView';
+const ChatDebugViewDevtools = 'ChatDebugView--devtools';
+const ChatDebugViewDetails = 'ChatDebugViewDetails';
+const ChatDebugViewDetailsBody = 'ChatDebugViewDetailsBody';
+const ChatDebugViewDetailsClose = 'ChatDebugViewDetailsClose';
+const ChatDebugViewDetailsPanel = 'ChatDebugViewDetailsPanel';
+const ChatDebugViewDetailsTab = 'ChatDebugViewDetailsTab';
+const ChatDebugViewDetailsTabSelected = 'ChatDebugViewDetailsTabSelected';
+const ChatDebugViewDetailsTabs = 'ChatDebugViewDetailsTabs';
+const ChatDebugViewDetailsTop = 'ChatDebugViewDetailsTop';
+const ChatDebugViewDevtoolsMain = 'ChatDebugViewDevtoolsMain';
+const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
+const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
+const ChatDebugViewError = 'ChatDebugViewError';
+const ChatDebugViewEvent = 'ChatDebugViewEvent';
+const ChatDebugViewEventLineContent = 'ChatDebugViewEventLineContent';
+const ChatDebugViewEventLineNumber = 'ChatDebugViewEventLineNumber';
+const ChatDebugViewEventRow = 'ChatDebugViewEventRow';
+const ChatDebugViewEventRowSelected = 'ChatDebugViewEventRowSelected';
+const ChatDebugViewEvents = 'ChatDebugViewEvents';
+const ChatDebugViewEventsFullWidth = 'ChatDebugViewEventsFullWidth';
+const ChatDebugViewFilterInput = 'ChatDebugViewFilterInput';
+const ChatDebugViewFilterInputDevtools = 'ChatDebugViewFilterInput--devtools';
+const ChatDebugViewHeaderCell = 'ChatDebugViewHeaderCell';
+const ChatDebugViewQuickFilterInput = 'ChatDebugViewQuickFilterInput';
+const ChatDebugViewQuickFilterPill = 'ChatDebugViewQuickFilterPill';
+const ChatDebugViewQuickFilterPillSelected = 'ChatDebugViewQuickFilterPillSelected';
+const ChatDebugViewQuickFilters = 'ChatDebugViewQuickFilters';
+const ChatDebugViewSash = 'ChatDebugViewSash';
+const ChatDebugViewSashLine = 'ChatDebugViewSashLine';
+const ChatDebugViewTable = 'ChatDebugViewTable';
+const ChatDebugViewTableBody = 'ChatDebugViewTableBody';
+const ChatDebugViewTableHeader = 'ChatDebugViewTableHeader';
+const ChatDebugViewTableHeaderRow = 'ChatDebugViewTableHeaderRow';
+const ChatDebugViewTimeline = 'ChatDebugViewTimeline';
+const ChatDebugViewTimelineBucket = 'ChatDebugViewTimelineBucket';
+const ChatDebugViewTimelineBucketBar = 'ChatDebugViewTimelineBucketBar';
+const ChatDebugViewTimelineBucketBarSelected = 'ChatDebugViewTimelineBucketBarSelected';
+const ChatDebugViewTimelineBucketSelected = 'ChatDebugViewTimelineBucketSelected';
+const ChatDebugViewTimelineBucketUnit = 'ChatDebugViewTimelineBucketUnit';
+const ChatDebugViewTimelineBucketUnitEmpty = 'ChatDebugViewTimelineBucketUnitEmpty';
+const ChatDebugViewTimelineBuckets = 'ChatDebugViewTimelineBuckets';
+const ChatDebugViewTimelineInteractive = 'ChatDebugViewTimelineInteractive';
+const ChatDebugViewTimelinePresetInput = 'ChatDebugViewTimelinePresetInput';
+const ChatDebugViewTimelineSelectionMarker = 'ChatDebugViewTimelineSelectionMarker';
+const ChatDebugViewTimelineSelectionMarkerEnd = 'ChatDebugViewTimelineSelectionMarkerEnd';
+const ChatDebugViewTimelineSelectionMarkerStart = 'ChatDebugViewTimelineSelectionMarkerStart';
+const ChatDebugViewTimelineSelectionOverlay = 'ChatDebugViewTimelineSelectionOverlay';
+const ChatDebugViewTimelineSelectionRange = 'ChatDebugViewTimelineSelectionRange';
+const ChatDebugViewTimelineSummary = 'ChatDebugViewTimelineSummary';
+const ChatDebugViewTimelineTop = 'ChatDebugViewTimelineTop';
+const ChatDebugViewTiming = 'ChatDebugViewTiming';
+const ChatDebugViewTimingLabel = 'ChatDebugViewTimingLabel';
+const ChatDebugViewTimingRow = 'ChatDebugViewTimingRow';
+const ChatDebugViewTimingValue = 'ChatDebugViewTimingValue';
+const ChatDebugViewTop = 'ChatDebugViewTop';
+const ChatDebugViewTopDevtools = 'ChatDebugViewTop--devtools';
+const ChatDebugViewCell = 'ChatDebugViewCell';
+const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
+const ChatDebugViewCellStatus = 'ChatDebugViewCellStatus';
+const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
+const ChatDebugViewCellType = 'ChatDebugViewCellType';
+const InputBox = 'InputBox';
+const Row = 'row';
+const TokenBoolean = 'TokenBoolean';
+const TokenKey = 'TokenKey';
+const TokenNumeric = 'TokenNumeric';
+const TokenString = 'TokenString';
+const TokenText = 'TokenText';
+const joinClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
 const getDebugErrorDom = errorMessage => {
   return [{
     childCount: 1,
-    className: 'ChatDebugView',
+    className: ChatDebugView,
     type: Div
   }, {
     childCount: 1,
-    className: 'ChatDebugViewError',
+    className: ChatDebugViewError,
     type: Div
   }, text(errorMessage)];
 };
@@ -3594,25 +3719,29 @@ 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 HandleHeaderContextMenu = 8;
+const HandleSashPointerDown = 9;
+const HandleSashPointerMove = 10;
+const HandleSashPointerUp = 11;
+const HandleTableBodyContextMenu = 12;
+const HandleDetailsContextMenu = 13;
+const HandleTimelinePointerDown = 14;
+const HandleTimelinePointerMove = 15;
+const HandleTimelinePointerUp = 16;
+const HandleTimelineDoubleClick = 17;
+const HandleTableKeyDown = 18;
 
 const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) => {
   if (useDevtoolsLayout) {
     return [{
       childCount: 1 + (quickFilterNodes.length > 0 ? 1 : 0),
-      className: 'ChatDebugViewTop ChatDebugViewTop--devtools',
+      className: joinClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
+      onContextMenu: HandleHeaderContextMenu,
       type: Search
     }, {
       autocomplete: 'off',
       childCount: 0,
-      className: 'InputBox ChatDebugViewFilterInput ChatDebugViewFilterInput--devtools',
+      className: joinClassNames(InputBox, ChatDebugViewFilterInput, ChatDebugViewFilterInputDevtools),
       inputType: 'search',
       name: Filter,
       onInput: HandleFilterInput,
@@ -3623,12 +3752,13 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) =>
   }
   return [{
     childCount: 1,
-    className: 'ChatDebugViewTop',
+    className: ChatDebugViewTop,
+    onContextMenu: HandleHeaderContextMenu,
     type: Search
   }, {
     autocomplete: 'off',
     childCount: 0,
-    className: 'InputBox ChatDebugViewFilterInput',
+    className: joinClassNames(InputBox, ChatDebugViewFilterInput),
     inputType: 'search',
     name: Filter,
     onInput: HandleFilterInput,
@@ -3691,22 +3821,22 @@ const getStartText = event => {
 const getTimingRowDom = (label, value) => {
   return [{
     childCount: 2,
-    className: 'ChatDebugViewTimingRow',
+    className: ChatDebugViewTimingRow,
     type: Div
   }, {
     childCount: 1,
-    className: 'ChatDebugViewTimingLabel',
+    className: ChatDebugViewTimingLabel,
     type: Span
   }, text(label), {
     childCount: 1,
-    className: 'ChatDebugViewTimingValue',
+    className: ChatDebugViewTimingValue,
     type: Span
   }, text(value)];
 };
 const getTimingDetailsDom = event => {
   return [{
     childCount: 3,
-    className: 'ChatDebugViewTiming',
+    className: ChatDebugViewTiming,
     type: Div
   }, ...getTimingRowDom('Started', getStartText(event)), ...getTimingRowDom('Ended', getEndText(event)), ...getTimingRowDom('Duration', getDurationText(event))];
 };
@@ -3724,7 +3854,7 @@ const getTabNodes = selectedDetailTab => {
       'aria-controls': getPanelId(detailTab),
       'aria-selected': isSelected,
       childCount: 1,
-      className: isSelected ? 'ChatDebugViewDetailsTab ChatDebugViewDetailsTabSelected' : 'ChatDebugViewDetailsTab',
+      className: joinClassNames(ChatDebugViewDetailsTab, isSelected && ChatDebugViewDetailsTabSelected),
       id: getTabId(detailTab),
       name: DetailTab,
       onChange: HandleSimpleInput,
@@ -3736,43 +3866,45 @@ const getTabNodes = selectedDetailTab => {
     }, text(getDetailTabLabel(detailTab))];
   });
 };
-const getDetailsDom = (selectedEventNodes, selectedEvent = null, selectedDetailTab = Response) => {
-  if (selectedEventNodes.length === 0) {
+const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes, selectedEvent = null, selectedDetailTab = Response) => {
+  if (previewEventNodes.length === 0 && responseEventNodes.length === 0) {
     return [];
   }
-  const contentNodes = selectedDetailTab === Timing && selectedEvent ? getTimingDetailsDom(selectedEvent) : selectedEventNodes;
+  const contentNodes = selectedDetailTab === Timing && selectedEvent ? getTimingDetailsDom(selectedEvent) : selectedDetailTab === Preview ? previewEventNodes : responseEventNodes;
   return [{
     childCount: 2,
-    className: 'ChatDebugViewDetails',
+    className: ChatDebugViewDetails,
     type: Div
   }, {
     childCount: 2,
-    className: 'ChatDebugViewDetailsTop',
+    className: ChatDebugViewDetailsTop,
     type: Div
   }, {
-    'aria-label': 'Detail sections',
-    childCount: detailTabs.length,
-    className: 'ChatDebugViewDetailsTabs',
-    role: 'tablist',
-    type: Div
-  }, ...getTabNodes(selectedDetailTab), {
     'aria-label': 'Close details',
     childCount: 0,
-    className: 'ChatDebugViewDetailsClose',
+    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',
+    className: ChatDebugViewDetailsBody,
+    role: 'document',
     type: Div
   }, {
     'aria-labelledby': getTabId(selectedDetailTab),
     childCount: 1,
-    className: 'ChatDebugViewDetailsPanel',
+    className: ChatDebugViewDetailsPanel,
     id: getPanelId(selectedDetailTab),
+    onContextMenu: HandleDetailsContextMenu,
     role: 'tabpanel',
     type: Div
   }, ...contentNodes];
@@ -3811,6 +3943,19 @@ const getEventTypeLabel = event => {
   return `${event.type}, ${toolName}`;
 };
 
+const isRecord = value => {
+  return typeof value === 'object' && value !== null;
+};
+const isErrorStatusCode = value => {
+  if (typeof value === 'number') {
+    return value >= 400;
+  }
+  if (typeof value === 'string') {
+    const parsedStatus = Number(value);
+    return Number.isFinite(parsedStatus) && parsedStatus >= 400;
+  }
+  return false;
+};
 const hasErrorStatus = event => {
   if (event.type === 'error') {
     return true;
@@ -3821,12 +3966,17 @@ const hasErrorStatus = event => {
   const {
     status
   } = event;
-  if (typeof status === 'number' && status >= 400) {
+  if (isErrorStatusCode(status)) {
     return true;
   }
-  if (typeof status === 'string') {
-    const parsedStatus = Number(status);
-    if (Number.isFinite(parsedStatus) && parsedStatus >= 400) {
+  const {
+    result
+  } = event;
+  if (isRecord(result)) {
+    if (isErrorStatusCode(result.status)) {
+      return true;
+    }
+    if (typeof result.error === 'string' || typeof result.errorMessage === 'string' || typeof result.exception === 'string') {
       return true;
     }
   }
@@ -3840,26 +3990,24 @@ const getStatusText = event => {
 const getDevtoolsRows = (events, selectedEventIndex) => {
   return events.flatMap((event, i) => {
     const isSelected = selectedEventIndex === i;
+    const isErrorStatus = hasErrorStatus(event);
     const rowIndex = String(i);
     return [{
       childCount: 3,
-      className: `ChatDebugViewEventRow${isSelected ? ' ChatDebugViewEventRowSelected' : ''}`,
+      className: joinClassNames(ChatDebugViewEventRow, isSelected && ChatDebugViewEventRowSelected),
       'data-index': rowIndex,
       type: Tr
     }, {
       childCount: 1,
-      className: 'ChatDebugViewCell ChatDebugViewCellType',
-      'data-index': rowIndex,
+      className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellType),
       type: Td
     }, text(getEventTypeLabel(event)), {
       childCount: 1,
-      className: 'ChatDebugViewCell ChatDebugViewCellDuration',
-      'data-index': rowIndex,
+      className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellDuration),
       type: Td
     }, text(getDurationText(event)), {
       childCount: 1,
-      className: 'ChatDebugViewCell ChatDebugViewCellStatus',
-      'data-index': rowIndex,
+      className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellStatus, isErrorStatus && ChatDebugViewCellStatusError),
       type: Td
     }, text(getStatusText(event))];
   });
@@ -3868,7 +4016,7 @@ const getDevtoolsRows = (events, selectedEventIndex) => {
 const getEmptyStateDom = emptyMessage => {
   return [{
     childCount: 1,
-    className: 'ChatDebugViewEmpty',
+    className: ChatDebugViewEmpty,
     type: Div
   }, text(emptyMessage)];
 };
@@ -3918,32 +4066,32 @@ const getTokenSegments = json => {
       while (lookAheadIndex < json.length && whitespaceRegex.test(json[lookAheadIndex])) {
         lookAheadIndex++;
       }
-      const className = json[lookAheadIndex] === ':' ? 'TokenKey' : 'TokenString';
+      const className = json[lookAheadIndex] === ':' ? TokenKey : TokenString;
       segments = pushToken(segments, className, tokenValue);
       continue;
     }
     const numberMatch = numberRegex.exec(json.slice(i));
     if (numberMatch) {
-      segments = pushToken(segments, 'TokenNumeric', numberMatch[0]);
+      segments = pushToken(segments, TokenNumeric, numberMatch[0]);
       i += numberMatch[0].length;
       continue;
     }
     if (json.startsWith('true', i)) {
-      segments = pushToken(segments, 'TokenBoolean', 'true');
+      segments = pushToken(segments, TokenBoolean, 'true');
       i += 4;
       continue;
     }
     if (json.startsWith('false', i)) {
-      segments = pushToken(segments, 'TokenBoolean', 'false');
+      segments = pushToken(segments, TokenBoolean, 'false');
       i += 5;
       continue;
     }
     if (json.startsWith('null', i)) {
-      segments = pushToken(segments, 'TokenBoolean', 'null');
+      segments = pushToken(segments, TokenBoolean, 'null');
       i += 4;
       continue;
     }
-    segments = pushToken(segments, 'TokenText', character);
+    segments = pushToken(segments, TokenText, character);
     i++;
   }
   return segments;
@@ -3953,7 +4101,7 @@ const getJsonLines = value => {
   const json = JSON.stringify(value, null, 2);
   if (!json) {
     return [[{
-      className: 'TokenText',
+      className: TokenText,
       value: String(json)
     }]];
   }
@@ -3993,50 +4141,93 @@ const getLineNodes = lines => {
     const lineContentNodes = getLineContentNodes(line);
     return [{
       childCount: 2,
-      className: 'row',
+      className: Row,
       type: Div
     }, {
       childCount: 1,
-      className: 'ChatDebugViewEventLineNumber',
+      className: ChatDebugViewEventLineNumber,
       type: Span
     }, text(String(index + 1)), {
       childCount: lineContentNodes.length / 2,
-      className: 'ChatDebugViewEventLineContent',
+      className: ChatDebugViewEventLineContent,
       type: Span
     }, ...lineContentNodes];
   });
 };
-const getEventNode = event => {
-  const renderedEvent = {
-    ...event,
-    type: getEventTypeLabel(event)
-  };
-  const lines = getJsonLines(renderedEvent);
+const isChatViewEvent = value => {
+  return typeof value === 'object' && value !== null && typeof value.type === 'string';
+};
+const getEventNode = value => {
+  const renderedValue = isChatViewEvent(value) ? {
+    ...value,
+    type: getEventTypeLabel(value)
+  } : value;
+  const lines = getJsonLines(renderedValue);
   const lineNodes = getLineNodes(lines);
   return [{
     childCount: lines.length,
-    className: 'ChatDebugViewEvent',
+    className: ChatDebugViewEvent,
     type: Div
   }, ...lineNodes];
 };
 
 const getEventsClassName = hasSelectedEvent => {
-  const widthClassName = hasSelectedEvent ? 'ChatDebugViewEvents' : 'ChatDebugViewEvents ChatDebugViewEventsFullWidth';
+  const widthClassName = joinClassNames(ChatDebugViewEvents, !hasSelectedEvent && ChatDebugViewEventsFullWidth);
   return widthClassName;
 };
 
+const hasOwn = (event, key) => {
+  return Object.hasOwn(event, key);
+};
+const getPreviewName = event => {
+  if (typeof event.name === 'string' && event.name) {
+    return event.name;
+  }
+  if (typeof event.toolName === 'string' && event.toolName) {
+    return event.toolName;
+  }
+  return undefined;
+};
+const shouldIncludeArguments = (event, name) => {
+  if (!hasOwn(event, 'arguments')) {
+    return false;
+  }
+  if (name === 'getWorkspaceUri') {
+    return false;
+  }
+  return true;
+};
+const getPreviewEvent = event => {
+  const name = getPreviewName(event);
+  const previewEvent = {
+    ...(name === undefined ? {} : {
+      name
+    }),
+    ...(shouldIncludeArguments(event, name) ? {
+      arguments: event.arguments
+    } : {}),
+    ...(hasOwn(event, 'result') ? {
+      result: event.result
+    } : {})
+  };
+  if (Object.keys(previewEvent).length > 0) {
+    return previewEvent;
+  }
+  return event;
+};
+
 const getSashNodesDom = hasSelectedEvent => {
   if (!hasSelectedEvent) {
     return [];
   }
   return [{
     childCount: 1,
-    className: 'ChatDebugViewSash',
+    className: ChatDebugViewSash,
     onPointerDown: HandleSashPointerDown,
     type: Div
   }, {
     childCount: 0,
-    className: 'ChatDebugViewSashLine',
+    className: ChatDebugViewSashLine,
     type: Div
   }];
 };
@@ -4044,7 +4235,7 @@ const getSashNodesDom = hasSelectedEvent => {
 const getTableBodyDom = (rowNodes, eventCount) => {
   return [{
     childCount: eventCount === 0 ? 1 : eventCount,
-    className: 'ChatDebugViewTableBody',
+    className: ChatDebugViewTableBody,
     onContextMenu: HandleTableBodyContextMenu,
     onPointerDown: HandleEventRowClick,
     type: TBody
@@ -4054,25 +4245,25 @@ const getTableBodyDom = (rowNodes, eventCount) => {
 const getTableHeaderDom = () => {
   return [{
     childCount: 1,
-    className: 'ChatDebugViewTableHeader',
+    className: ChatDebugViewTableHeader,
     type: THead
   }, {
     childCount: 3,
-    className: 'ChatDebugViewTableHeaderRow',
+    className: ChatDebugViewTableHeaderRow,
     type: Tr
   }, {
     childCount: 1,
-    className: 'ChatDebugViewHeaderCell ChatDebugViewCellType',
+    className: ChatDebugViewHeaderCell,
     scope: 'col',
     type: Th
   }, text('Type'), {
     childCount: 1,
-    className: 'ChatDebugViewHeaderCell ChatDebugViewCellDuration',
+    className: ChatDebugViewHeaderCell,
     scope: 'col',
     type: Th
   }, text('Duration'), {
     childCount: 1,
-    className: 'ChatDebugViewHeaderCell ChatDebugViewCellStatus',
+    className: ChatDebugViewHeaderCell,
     scope: 'col',
     type: Th
   }, text('Status')];
@@ -4081,16 +4272,20 @@ const getTableHeaderDom = () => {
 const getTableDom = (rowNodes, eventCount) => {
   return [{
     childCount: 2,
-    className: 'ChatDebugViewTable',
+    className: ChatDebugViewTable,
     type: Table
   }, ...getTableHeaderDom(), ...getTableBodyDom(rowNodes, eventCount)];
 };
 
+const formatPercent = value => {
+  return `${Number(value.toFixed(3))}%`;
+};
+
 const getBucketUnitDom = unitCount => {
   if (unitCount === 0) {
     return [{
       childCount: 0,
-      className: 'ChatDebugViewTimelineBucketUnit ChatDebugViewTimelineBucketUnitEmpty',
+      className: joinClassNames(ChatDebugViewTimelineBucketUnit, ChatDebugViewTimelineBucketUnitEmpty),
       type: Div
     }];
   }
@@ -4098,7 +4293,7 @@ const getBucketUnitDom = unitCount => {
     length: unitCount
   }).fill({
     childCount: 0,
-    className: 'ChatDebugViewTimelineBucketUnit',
+    className: ChatDebugViewTimelineBucketUnit,
     type: Div
   });
 };
@@ -4107,12 +4302,12 @@ const getBucketDom = bucket => {
   const presetValue = `${formatTimelinePresetValue(bucket.startSeconds)}:${formatTimelinePresetValue(bucket.endSeconds)}`;
   return [{
     childCount: 2,
-    className: `ChatDebugViewTimelineBucket${bucket.isSelected ? ' ChatDebugViewTimelineBucketSelected' : ''}`,
+    className: joinClassNames(ChatDebugViewTimelineBucket, bucket.isSelected && ChatDebugViewTimelineBucketSelected),
     type: Label
   }, {
     checked: false,
     childCount: 0,
-    className: 'ChatDebugViewTimelinePresetInput',
+    className: ChatDebugViewTimelinePresetInput,
     inputType: 'radio',
     name: TimelineRangePreset,
     onChange: HandleSimpleInput,
@@ -4120,11 +4315,24 @@ const getBucketDom = bucket => {
     value: presetValue
   }, {
     childCount: bucket.unitCount === 0 ? 1 : bucket.unitCount,
-    className: `ChatDebugViewTimelineBucketBar${bucket.isSelected ? ' ChatDebugViewTimelineBucketBarSelected' : ''}`,
+    className: joinClassNames(ChatDebugViewTimelineBucketBar, bucket.isSelected && ChatDebugViewTimelineBucketBarSelected),
     type: Div
   }, ...getBucketUnitDom(bucket.unitCount)];
 };
 
+const getEffectiveTimelineRange = (timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds) => {
+  if (!timelineSelectionActive) {
+    return {
+      endSeconds: timelineEndSeconds,
+      startSeconds: timelineStartSeconds
+    };
+  }
+  return {
+    endSeconds: timelineSelectionFocusSeconds,
+    startSeconds: timelineSelectionAnchorSeconds
+  };
+};
+
 const formatTimelineSeconds = value => {
   if (Number.isInteger(value)) {
     return `${value}s`;
@@ -4140,21 +4348,6 @@ const getTimelineSummary = (timelineEvents, timelineStartSeconds, timelineEndSec
   return `Window 0s-${formatTimelineSeconds(timelineInfo.durationSeconds)} of ${formatTimelineSeconds(timelineInfo.durationSeconds)}`;
 };
 
-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);
@@ -4163,45 +4356,45 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
   }
   const selectionNodes = timelineInfo.hasSelection && timelineInfo.selectionStartPercent !== null && timelineInfo.selectionEndPercent !== null ? [{
     childCount: 0,
-    className: 'ChatDebugViewTimelineSelectionRange',
+    className: ChatDebugViewTimelineSelectionRange,
     style: `left:${formatPercent(timelineInfo.selectionStartPercent)};width:${formatPercent(timelineInfo.selectionEndPercent - timelineInfo.selectionStartPercent)};`,
     type: Div
   }, {
     childCount: 0,
-    className: 'ChatDebugViewTimelineSelectionMarker ChatDebugViewTimelineSelectionMarkerStart',
+    className: joinClassNames(ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
     style: `left:${formatPercent(timelineInfo.selectionStartPercent)};`,
     type: Div
   }, {
     childCount: 0,
-    className: 'ChatDebugViewTimelineSelectionMarker ChatDebugViewTimelineSelectionMarkerEnd',
+    className: joinClassNames(ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
     style: `left:${formatPercent(timelineInfo.selectionEndPercent)};`,
     type: Div
   }] : [];
   return [{
     childCount: 2,
-    className: 'ChatDebugViewTimeline',
+    className: ChatDebugViewTimeline,
     type: Div
   }, {
     childCount: 1,
-    className: 'ChatDebugViewTimelineTop',
+    className: ChatDebugViewTimelineTop,
     type: Div
   }, {
     childCount: 1,
-    className: 'ChatDebugViewTimelineSummary',
+    className: ChatDebugViewTimelineSummary,
     type: Div
   }, text(getTimelineSummary(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds)), {
     childCount: 2,
-    className: 'ChatDebugViewTimelineInteractive',
+    className: ChatDebugViewTimelineInteractive,
     onDoubleClick: HandleTimelineDoubleClick,
     onPointerDown: HandleTimelinePointerDown,
     type: Div
   }, {
     childCount: timelineInfo.buckets.length,
-    className: 'ChatDebugViewTimelineBuckets',
+    className: ChatDebugViewTimelineBuckets,
     type: Div
   }, ...timelineInfo.buckets.flatMap(getBucketDom), {
     childCount: selectionNodes.length,
-    className: 'ChatDebugViewTimelineSelectionOverlay',
+    className: ChatDebugViewTimelineSelectionOverlay,
     type: Div
   }, ...selectionNodes];
 };
@@ -4209,25 +4402,29 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
 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, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
-  const selectedEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
-  const hasSelectedEvent = selectedEventNodes.length > 0;
+  const previewEventNodes = selectedEvent ? getEventNode(getPreviewEvent(selectedEvent)) : [];
+  const responseEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
+  const hasSelectedEvent = responseEventNodes.length > 0;
   const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableDom(rowNodes, events.length);
   const eventsClassName = getEventsClassName(hasSelectedEvent);
-  const detailsNodes = getDetailsDom(selectedEventNodes, selectedEvent, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response);
+  const detailsNodes = getDetailsDom(previewEventNodes, responseEventNodes, selectedEvent, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response);
   const sashNodes = getSashNodesDom(hasSelectedEvent);
   const splitChildCount = hasSelectedEvent ? 3 : 1;
   const mainChildCount = 1 + (timelineNodes.length > 0 ? 1 : 0);
   return [{
     childCount: mainChildCount,
-    className: 'ChatDebugViewDevtoolsMain',
+    className: ChatDebugViewDevtoolsMain,
     type: Div
   }, ...timelineNodes, {
     childCount: splitChildCount,
-    className: 'ChatDebugViewDevtoolsSplit',
+    className: ChatDebugViewDevtoolsSplit,
     type: Div
   }, {
     childCount: 1,
     className: eventsClassName,
+    onKeyDown: HandleTableKeyDown,
+    role: 'application',
+    tabIndex: 0,
     type: Div
   }, ...tableNodes, ...sashNodes, ...detailsNodes];
 };
@@ -4235,11 +4432,13 @@ const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvent
 const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
   return [{
     childCount: eventNodes.length === 0 ? 1 : eventNodes.length,
-    className: 'ChatDebugViewEvents',
+    className: ChatDebugViewEvents,
+    role: 'application',
+    tabIndex: 0,
     type: Div
   }, ...(eventNodes.length === 0 ? [{
     childCount: 1,
-    className: errorMessage ? 'ChatDebugViewError' : 'ChatDebugViewEmpty',
+    className: errorMessage ? ChatDebugViewError : ChatDebugViewEmpty,
     type: Div
   }, text(errorMessage || emptyMessage)] : eventNodes)];
 };
@@ -4247,18 +4446,18 @@ const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
 const getQuickFilterNodes = (eventCategoryFilter, eventCategoryFilterOptions) => {
   return [{
     childCount: eventCategoryFilterOptions.length,
-    className: 'ChatDebugViewQuickFilters',
+    className: ChatDebugViewQuickFilters,
     type: Div
   }, ...eventCategoryFilterOptions.flatMap(option => {
     const isSelected = option.value === eventCategoryFilter;
     return [{
       childCount: 2,
-      className: `ChatDebugViewQuickFilterPill${isSelected ? ' ChatDebugViewQuickFilterPillSelected' : ''}`,
+      className: joinClassNames(ChatDebugViewQuickFilterPill, isSelected && ChatDebugViewQuickFilterPillSelected),
       type: Label
     }, {
       checked: isSelected,
       childCount: 0,
-      className: 'ChatDebugViewQuickFilterInput',
+      className: ChatDebugViewQuickFilterInput,
       inputType: 'radio',
       name: EventCategoryFilter,
       onChange: HandleInput,
@@ -4310,7 +4509,7 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, eve
   const rootChildCount = 2;
   return [{
     childCount: rootChildCount,
-    className: useDevtoolsLayout ? 'ChatDebugView ChatDebugView--devtools' : 'ChatDebugView',
+    className: joinClassNames(ChatDebugView, useDevtoolsLayout && ChatDebugViewDevtools),
     type: Div
   }, ...debugViewTopDom, ...contentNodes];
 };
@@ -4377,7 +4576,7 @@ const render2 = (uid, diffResult) => {
 const renderEventListeners = () => {
   return [{
     name: HandleEventRowClick,
-    params: ['handleEventRowClick', 'event.target.dataset.index']
+    params: ['handleEventRowClick', 'event.target.dataset.index', 'event.button']
   }, {
     name: HandleTableBodyContextMenu,
     params: ['handleTableBodyContextMenu'],
@@ -4529,7 +4728,9 @@ const commandMap = {
   'ChatDebug.create': create,
   'ChatDebug.diff2': diff2,
   'ChatDebug.getCommandIds': getCommandIds,
+  'ChatDebug.handleDetailsContextMenu': wrapCommand(handleDetailsContextMenu),
   'ChatDebug.handleEventRowClick': wrapCommand(handleEventRowClick),
+  'ChatDebug.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
   'ChatDebug.handleInput': wrapCommand(handleInput),
   'ChatDebug.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'ChatDebug.handleSashPointerMove': wrapCommand(handleSashPointerMove),