@lvce-editor/chat-debug-view 5.3.0 → 5.4.0

package/dist/chatDebugViewWorkerMain.js

@@ -1171,14 +1171,414 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
+const handleCloseDetails = state => {
+  return {
+    ...state,
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null
+  };
+};
+
 const handleDetailsContextMenu = state => {
   return state;
 };
 
+const handleDetailTab = (state, value) => {
+  if (!isDetailTab(value)) {
+    return state;
+  }
+  return {
+    ...state,
+    selectedDetailTab: value
+  };
+};
+
+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
+  };
+};
+
+const getCurrentEvents$3 = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const getEventIndexByStableId$1 = (events, event) => {
+  const stableEventId = getStableEventId(event);
+  return events.findIndex(candidate => getStableEventId(candidate) === stableEventId);
+};
+const getSelectedEventIndex$1 = state => {
+  const {
+    selectedEventIndex
+  } = state;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const filteredEvents = getCurrentEvents$3(state);
+  const selectedEvent = filteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newIndex = getEventIndexByStableId$1(filteredEvents, selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
+};
+const getPreservedSelectedEventIndex$1 = (oldState, newState) => {
+  const {
+    selectedEventIndex
+  } = oldState;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const oldFilteredEvents = getCurrentEvents$3(oldState);
+  const selectedEvent = oldFilteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newFilteredEvents = getCurrentEvents$3(newState);
+  const newIndex = getEventIndexByStableId$1(newFilteredEvents, selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
+};
+const withPreservedSelection$1 = (state, nextState) => {
+  const selectedEventIndex = getPreservedSelectedEventIndex$1(state, nextState);
+  return {
+    ...nextState,
+    selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
+    selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
+    selectedEventIndex
+  };
+};
+
+const handleEventCategoryFilter = (state, value) => {
+  const nextState = {
+    ...state,
+    eventCategoryFilter: value || All
+  };
+  return withPreservedSelection$1(state, nextState);
+};
+
 // cspell:ignore IDBP
 
-const startedEventType$1 = 'tool-execution-started';
-const finishedEventType$1 = 'tool-execution-finished';
+const startedEventType = 'tool-execution-started';
+const finishedEventType = 'tool-execution-finished';
 const getRawEventBySessionIdAndEventId = async (store, sessionId, sessionIdIndexName, eventId) => {
   if (eventId < 1) {
     return undefined;
@@ -1200,18 +1600,18 @@ const getRawEventBySessionIdAndEventId = async (store, sessionId, sessionIdIndex
   const events = all.filter(event => event.sessionId === sessionId);
   return events[eventId - 1];
 };
-const getTimestamp$1 = value => {
+const getTimestamp = value => {
   return typeof value === 'string' || typeof value === 'number' ? value : undefined;
 };
-const hasMatchingToolName$1 = (startedEvent, finishedEvent) => {
+const hasMatchingToolName = (startedEvent, finishedEvent) => {
   if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
     return startedEvent.toolName === finishedEvent.toolName;
   }
   return true;
 };
-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);
+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 {
     ...startedEvent,
     ...finishedEvent,
@@ -1236,20 +1636,20 @@ const getEventDetailsBySessionIdAndEventId = async (store, sessionId, sessionIdI
       eventId
     };
   }
-  if (event.type !== startedEventType$1) {
+  if (event.type !== startedEventType) {
     return {
       ...event,
       eventId
     };
   }
   const nextEvent = await getRawEventBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId + 1);
-  if (!nextEvent || nextEvent.type !== finishedEventType$1 || nextEvent.sessionId !== sessionId || !hasMatchingToolName$1(event, nextEvent)) {
+  if (!nextEvent || nextEvent.type !== finishedEventType || nextEvent.sessionId !== sessionId || !hasMatchingToolName(event, nextEvent)) {
     return {
       ...event,
       eventId
     };
   }
-  return mergeToolExecutionEvents$1(event, nextEvent, eventId);
+  return mergeToolExecutionEvents(event, nextEvent, eventId);
 };
 
 const instanceOfAny = (object, constructors) => constructors.some(c => object instanceof c);
@@ -1473,381 +1873,63 @@ const cursorIteratorTraps = {
     return cachedFunc;
   }
 };
-async function* iterate(...args) {
-  // tslint:disable-next-line:no-this-assignment
-  let cursor = this;
-  if (!(cursor instanceof IDBCursor)) {
-    cursor = await cursor.openCursor(...args);
-  }
-  if (!cursor) return;
-  cursor = cursor;
-  const proxiedCursor = new Proxy(cursor, cursorIteratorTraps);
-  ittrProxiedCursorToOriginalProxy.set(proxiedCursor, cursor);
-  // Map this double-proxy back to the original, so other cursor methods work.
-  reverseTransformCache.set(proxiedCursor, unwrap(cursor));
-  while (cursor) {
-    yield proxiedCursor;
-    // If one of the advancing methods was not called, call continue().
-    cursor = await (advanceResults.get(proxiedCursor) || cursor.continue());
-    advanceResults.delete(proxiedCursor);
-  }
-}
-function isIteratorProp(target, prop) {
-  return prop === Symbol.asyncIterator && instanceOfAny(target, [IDBIndex, IDBObjectStore, IDBCursor]) || prop === 'iterate' && instanceOfAny(target, [IDBIndex, IDBObjectStore]);
-}
-replaceTraps(oldTraps => ({
-  ...oldTraps,
-  get(target, prop, receiver) {
-    if (isIteratorProp(target, prop)) return iterate;
-    return oldTraps.get(target, prop, receiver);
-  },
-  has(target, prop) {
-    return isIteratorProp(target, prop) || oldTraps.has(target, prop);
-  }
-}));
-
-const openDatabaseDependencies = {
-  openDB: openDB
-};
-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;
+async function* iterate(...args) {
+  // tslint:disable-next-line:no-this-assignment
+  let cursor = this;
+  if (!(cursor instanceof IDBCursor)) {
+    cursor = await cursor.openCursor(...args);
   }
-  return filteredByCategory.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
-};
-
-const toTimeNumber = value => {
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return value;
+  if (!cursor) return;
+  cursor = cursor;
+  const proxiedCursor = new Proxy(cursor, cursorIteratorTraps);
+  ittrProxiedCursorToOriginalProxy.set(proxiedCursor, cursor);
+  // Map this double-proxy back to the original, so other cursor methods work.
+  reverseTransformCache.set(proxiedCursor, unwrap(cursor));
+  while (cursor) {
+    yield proxiedCursor;
+    // If one of the advancing methods was not called, call continue().
+    cursor = await (advanceResults.get(proxiedCursor) || cursor.continue());
+    advanceResults.delete(proxiedCursor);
   }
-  if (typeof value === 'string') {
-    const timestamp = Date.parse(value);
-    if (!Number.isNaN(timestamp)) {
-      return timestamp;
-    }
+}
+function isIteratorProp(target, prop) {
+  return prop === Symbol.asyncIterator && instanceOfAny(target, [IDBIndex, IDBObjectStore, IDBCursor]) || prop === 'iterate' && instanceOfAny(target, [IDBIndex, IDBObjectStore]);
+}
+replaceTraps(oldTraps => ({
+  ...oldTraps,
+  get(target, prop, receiver) {
+    if (isIteratorProp(target, prop)) return iterate;
+    return oldTraps.get(target, prop, receiver);
+  },
+  has(target, prop) {
+    return isIteratorProp(target, prop) || oldTraps.has(target, prop);
   }
-  return undefined;
-};
+}));
 
-const getEventTime = event => {
-  return toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+const openDatabaseDependencies = {
+  openDB: openDB
 };
-
-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 openDatabase = async (databaseName, dataBaseVersion) => {
+  return openDatabaseDependencies.openDB(databaseName, dataBaseVersion);
 };
-const roundSeconds = value => {
-  return Number(value.toFixed(3));
+
+const loadSelectedEventDependencies = {
+  getEventDetailsBySessionIdAndEventId: getEventDetailsBySessionIdAndEventId,
+  openDatabase: openDatabase
 };
-const getEventsWithTime = events => {
-  return events.flatMap(event => {
-    const time = getEventTime(event);
-    if (time === undefined) {
-      return [];
+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;
     }
-    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 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 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 getCurrentEvents$2 = state => {
@@ -1895,7 +1977,7 @@ const parseSelectedEventIndex$1 = value => {
   }
   return parsed;
 };
-const handleEventRowClick = async (state, value, button) => {
+const handleEventRowClick = async (state, value, button = 0) => {
   if (!isPrimaryButton(button)) {
     return state;
   }
@@ -1931,7 +2013,7 @@ 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 => {
+const parseTimelineRangePreset$1 = value => {
   if (!value) {
     return {
       timelineEndSeconds: '',
@@ -2074,7 +2156,7 @@ const handleInput = (state, name, value, checked) => {
   if (name === TimelineRangePreset) {
     const nextState = {
       ...state,
-      ...parseTimelineRangePreset(value)
+      ...parseTimelineRangePreset$1(value)
     };
     return withPreservedSelection(state, nextState);
   }
@@ -2126,8 +2208,43 @@ const clearTimelineSelectionState = state => {
   };
 };
 
+const parseTimelineRangePreset = value => {
+  if (!value) {
+    return {
+      timelineEndSeconds: '',
+      timelineStartSeconds: ''
+    };
+  }
+  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
+  return {
+    timelineEndSeconds,
+    timelineStartSeconds
+  };
+};
+const handleTimelineStartSeconds = (state, value) => {
+  const nextState = {
+    ...state,
+    timelineStartSeconds: value
+  };
+  return withPreservedSelection$1(state, nextState);
+};
+const handleTimelineEndSeconds = (state, value) => {
+  const nextState = {
+    ...state,
+    timelineEndSeconds: value
+  };
+  return withPreservedSelection$1(state, nextState);
+};
+const handleTimelineRangePreset = (state, value) => {
+  const nextState = {
+    ...state,
+    ...parseTimelineRangePreset(value)
+  };
+  return withPreservedSelection$1(state, nextState);
+};
+
 const handleTimelineDoubleClick = state => {
-  const nextState = handleInput(state, TimelineRangePreset, '', false);
+  const nextState = handleTimelineRangePreset(state, '');
   return clearTimelineSelectionState(nextState);
 };
 
@@ -2217,10 +2334,44 @@ const handleTimelinePointerUp = (state, eventX) => {
   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);
+  const nextState = handleTimelineRangePreset(state, `${startSeconds}:${endSeconds}`);
   return clearTimelineSelectionState(nextState);
 };
 
+const handleUseDevtoolsLayout = (state, checked) => {
+  const useDevtoolsLayout = getBoolean(checked);
+  const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex$1(state) : null;
+  return {
+    ...state,
+    selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
+    selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
+    selectedEventIndex,
+    useDevtoolsLayout
+  };
+};
+
+const handleShowEventStreamFinishedEvents = (state, checked) => {
+  const nextState = {
+    ...state,
+    showEventStreamFinishedEvents: getBoolean(checked)
+  };
+  return withPreservedSelection$1(state, nextState);
+};
+const handleShowInputEvents = (state, checked) => {
+  const nextState = {
+    ...state,
+    showInputEvents: getBoolean(checked)
+  };
+  return withPreservedSelection$1(state, nextState);
+};
+const handleShowResponsePartEvents = (state, checked) => {
+  const nextState = {
+    ...state,
+    showResponsePartEvents: getBoolean(checked)
+  };
+  return withPreservedSelection$1(state, nextState);
+};
+
 const getFailedToLoadMessage = sessionId => {
   return `Failed to load chat debug session "${sessionId}". Please try again.`;
 };
@@ -2588,7 +2739,6 @@ const Reference = 100;
 
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
-const TargetChecked = 'event.target.checked';
 const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
 
@@ -3715,9 +3865,9 @@ const getDebugErrorDom = errorMessage => {
   }, text(errorMessage)];
 };
 
-const HandleInput = 4;
+const HandleEventCategoryFilter = 4;
 const HandleFilterInput = 5;
-const HandleSimpleInput = 6;
+const HandleDetailTab = 6;
 const HandleEventRowClick = 7;
 const HandleHeaderContextMenu = 8;
 const HandleSashPointerDown = 9;
@@ -3730,6 +3880,8 @@ const HandleTimelinePointerMove = 15;
 const HandleTimelinePointerUp = 16;
 const HandleTimelineDoubleClick = 17;
 const HandleTableKeyDown = 18;
+const HandleTimelineRangePreset = 19;
+const HandleCloseDetails = 20;
 
 const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) => {
   if (useDevtoolsLayout) {
@@ -3857,8 +4009,8 @@ const getTabNodes = selectedDetailTab => {
       className: joinClassNames(ChatDebugViewDetailsTab, isSelected && ChatDebugViewDetailsTabSelected),
       id: getTabId(detailTab),
       name: DetailTab,
-      onChange: HandleSimpleInput,
-      onClick: HandleSimpleInput,
+      onChange: HandleDetailTab,
+      onClick: HandleDetailTab,
       role: 'tab',
       tabIndex: isSelected ? 0 : -1,
       type: Button,
@@ -3884,8 +4036,8 @@ const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes
     childCount: 0,
     className: ChatDebugViewDetailsClose,
     name: CloseDetails,
-    onChange: HandleSimpleInput,
-    onClick: HandleSimpleInput,
+    onChange: HandleCloseDetails,
+    onClick: HandleCloseDetails,
     type: Button,
     value: 'close'
   }, {
@@ -4316,7 +4468,7 @@ const getBucketDom = bucket => {
     className: ChatDebugViewTimelinePresetInput,
     inputType: 'radio',
     name: TimelineRangePreset,
-    onChange: HandleSimpleInput,
+    onChange: HandleTimelineRangePreset,
     type: Input,
     value: presetValue
   }, {
@@ -4466,7 +4618,7 @@ const getQuickFilterNodes = (eventCategoryFilter, eventCategoryFilterOptions) =>
       className: ChatDebugViewQuickFilterInput,
       inputType: 'radio',
       name: EventCategoryFilter,
-      onChange: HandleInput,
+      onChange: HandleEventCategoryFilter,
       type: Input,
       value: option.value
     }, text(option.label)];
@@ -4593,11 +4745,17 @@ const renderEventListeners = () => {
     name: HandleFilterInput,
     params: ['handleInput', TargetName, TargetValue]
   }, {
-    name: HandleInput,
-    params: ['handleInput', TargetName, TargetValue, TargetChecked]
+    name: HandleEventCategoryFilter,
+    params: ['handleEventCategoryFilter', TargetValue]
   }, {
-    name: HandleSimpleInput,
-    params: ['handleInput', TargetName, TargetValue]
+    name: HandleDetailTab,
+    params: ['handleDetailTab', TargetValue]
+  }, {
+    name: HandleTimelineRangePreset,
+    params: ['handleTimelineRangePreset', TargetValue]
+  }, {
+    name: HandleCloseDetails,
+    params: ['handleCloseDetails']
   }, {
     name: HandleSashPointerDown,
     params: ['handleSashPointerDown', ClientX, ClientY],
@@ -4694,8 +4852,11 @@ const setIndexedDbSupportForTest = supported => {
   return setIndexedDbSupportOverride(supported);
 };
 
+const setSessionIdDependencies = {
+  listChatViewEvents: listChatViewEvents
+};
 const setSessionId = async (state, sessionId) => {
-  const result = await listChatViewEvents(sessionId, state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionIdIndexName);
+  const result = await setSessionIdDependencies.listChatViewEvents(sessionId, state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionIdIndexName, state.indexedDbSupportOverride);
   if (result.type === 'not-supported') {
     return {
       ...state,
@@ -4704,6 +4865,7 @@ const setSessionId = async (state, sessionId) => {
       initial: false,
       selectedEvent: null,
       selectedEventId: null,
+      selectedEventIndex: null,
       sessionId
     };
   }
@@ -4715,6 +4877,7 @@ const setSessionId = async (state, sessionId) => {
       initial: false,
       selectedEvent: null,
       selectedEventId: null,
+      selectedEventIndex: null,
       sessionId
     };
   }
@@ -4728,6 +4891,7 @@ const setSessionId = async (state, sessionId) => {
     initial: false,
     selectedEvent: null,
     selectedEventId: null,
+    selectedEventIndex: null,
     sessionId
   };
 };
@@ -4736,18 +4900,28 @@ const commandMap = {
   'ChatDebug.create': create,
   'ChatDebug.diff2': diff2,
   'ChatDebug.getCommandIds': getCommandIds,
+  'ChatDebug.handleCloseDetails': wrapCommand(handleCloseDetails),
   'ChatDebug.handleDetailsContextMenu': wrapCommand(handleDetailsContextMenu),
+  'ChatDebug.handleDetailTab': wrapCommand(handleDetailTab),
+  'ChatDebug.handleEventCategoryFilter': wrapCommand(handleEventCategoryFilter),
   'ChatDebug.handleEventRowClick': wrapCommand(handleEventRowClick),
   'ChatDebug.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
   'ChatDebug.handleInput': wrapCommand(handleInput),
   'ChatDebug.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'ChatDebug.handleSashPointerMove': wrapCommand(handleSashPointerMove),
   'ChatDebug.handleSashPointerUp': wrapCommand(handleSashPointerUp),
+  'ChatDebug.handleShowEventStreamFinishedEvents': wrapCommand(handleShowEventStreamFinishedEvents),
+  'ChatDebug.handleShowInputEvents': wrapCommand(handleShowInputEvents),
+  'ChatDebug.handleShowResponsePartEvents': wrapCommand(handleShowResponsePartEvents),
   'ChatDebug.handleTableBodyContextMenu': wrapCommand(handleTableBodyContextMenu),
   'ChatDebug.handleTimelineDoubleClick': wrapCommand(handleTimelineDoubleClick),
+  'ChatDebug.handleTimelineEndSeconds': wrapCommand(handleTimelineEndSeconds),
   'ChatDebug.handleTimelinePointerDown': wrapCommand(handleTimelinePointerDown),
   'ChatDebug.handleTimelinePointerMove': wrapCommand(handleTimelinePointerMove),
   'ChatDebug.handleTimelinePointerUp': wrapCommand(handleTimelinePointerUp),
+  'ChatDebug.handleTimelineRangePreset': wrapCommand(handleTimelineRangePreset),
+  'ChatDebug.handleTimelineStartSeconds': wrapCommand(handleTimelineStartSeconds),
+  'ChatDebug.handleUseDevtoolsLayout': wrapCommand(handleUseDevtoolsLayout),
   'ChatDebug.loadContent': wrapCommand(loadContent),
   'ChatDebug.loadContent2': wrapCommand(loadContent),
   'ChatDebug.refresh': wrapCommand(refresh),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/chat-debug-view",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Chat Debug View Worker",
   "repository": {
     "type": "git",