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

package/dist/chatDebugViewWorkerMain.js

@@ -1171,465 +1171,127 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
+const handleCloseDetails = state => {
+  return {
+    ...state,
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null
+  };
+};
+
 const handleDetailsContextMenu = state => {
   return state;
 };
 
-// cspell:ignore IDBP
+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 getRawEventBySessionIdAndEventId = async (store, sessionId, sessionIdIndexName, eventId) => {
-  if (eventId < 1) {
-    return undefined;
-  }
-  if (store.indexNames.contains(sessionIdIndexName)) {
-    const index = store.index(sessionIdIndexName);
-    const keys = await index.getAllKeys(sessionId, eventId);
-    if (keys.length < eventId) {
-      return undefined;
-    }
-    const key = keys.at(-1);
-    if (key === undefined) {
-      return undefined;
-    }
-    const event = await store.get(key);
-    return event;
-  }
-  const all = await store.getAll();
-  const events = all.filter(event => event.sessionId === sessionId);
-  return events[eventId - 1];
+const 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 hasMatchingToolName$1 = (startedEvent, finishedEvent) => {
-  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
-    return startedEvent.toolName === finishedEvent.toolName;
+
+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;
   }
-  return true;
+  const stableEventId = `event-${eventStableIdState.nextStableEventId++}`;
+  eventStableIds.set(event, stableEventId);
+  return stableEventId;
 };
-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 {
+
+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,
+    ...(eventId === undefined ? {} : {
+      eventId
+    }),
     ...(started === undefined ? {} : {
       started
     }),
-    type: 'tool-execution'
+    type: mergedEventType
   };
+  const stableEventId = `${getOrCreateStableEventId(startedEvent)}:${getOrCreateStableEventId(finishedEvent)}`;
+  setStableEventId(mergedEvent, stableEventId);
+  return mergedEvent;
 };
-const getEventDetailsBySessionIdAndEventId = async (store, sessionId, sessionIdIndexName, eventId, summaryType) => {
-  const event = await getRawEventBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId);
-  if (!event) {
-    return undefined;
-  }
-  if (summaryType !== 'tool-execution') {
-    return {
-      ...event,
-      eventId
-    };
-  }
-  if (event.type !== startedEventType$1) {
-    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)) {
-    return {
-      ...event,
-      eventId
-    };
-  }
-  return mergeToolExecutionEvents$1(event, nextEvent, eventId);
+
+const getStableEventId = event => {
+  return getOrCreateStableEventId(event);
 };
 
-const instanceOfAny = (object, constructors) => constructors.some(c => object instanceof c);
-let idbProxyableTypes;
-let cursorAdvanceMethods;
-// This is a function to prevent it throwing up in node environments.
-function getIdbProxyableTypes() {
-  return idbProxyableTypes || (idbProxyableTypes = [IDBDatabase, IDBObjectStore, IDBIndex, IDBCursor, IDBTransaction]);
-}
-// This is a function to prevent it throwing up in node environments.
-function getCursorAdvanceMethods() {
-  return cursorAdvanceMethods || (cursorAdvanceMethods = [IDBCursor.prototype.advance, IDBCursor.prototype.continue, IDBCursor.prototype.continuePrimaryKey]);
-}
-const transactionDoneMap = new WeakMap();
-const transformCache = new WeakMap();
-const reverseTransformCache = new WeakMap();
-function promisifyRequest(request) {
-  const promise = new Promise((resolve, reject) => {
-    const unlisten = () => {
-      request.removeEventListener('success', success);
-      request.removeEventListener('error', error);
-    };
-    const success = () => {
-      resolve(wrap(request.result));
-      unlisten();
-    };
-    const error = () => {
-      reject(request.error);
-      unlisten();
-    };
-    request.addEventListener('success', success);
-    request.addEventListener('error', error);
-  });
-  // This mapping exists in reverseTransformCache but doesn't exist in transformCache. This
-  // is because we create many promises from a single IDBRequest.
-  reverseTransformCache.set(promise, request);
-  return promise;
-}
-function cacheDonePromiseForTransaction(tx) {
-  // Early bail if we've already created a done promise for this transaction.
-  if (transactionDoneMap.has(tx)) return;
-  const done = new Promise((resolve, reject) => {
-    const unlisten = () => {
-      tx.removeEventListener('complete', complete);
-      tx.removeEventListener('error', error);
-      tx.removeEventListener('abort', error);
-    };
-    const complete = () => {
-      resolve();
-      unlisten();
-    };
-    const error = () => {
-      reject(tx.error || new DOMException('AbortError', 'AbortError'));
-      unlisten();
-    };
-    tx.addEventListener('complete', complete);
-    tx.addEventListener('error', error);
-    tx.addEventListener('abort', error);
-  });
-  // Cache it for later retrieval.
-  transactionDoneMap.set(tx, done);
-}
-let idbProxyTraps = {
-  get(target, prop, receiver) {
-    if (target instanceof IDBTransaction) {
-      // Special handling for transaction.done.
-      if (prop === 'done') return transactionDoneMap.get(target);
-      // Make tx.store return the only store in the transaction, or undefined if there are many.
-      if (prop === 'store') {
-        return receiver.objectStoreNames[1] ? undefined : receiver.objectStore(receiver.objectStoreNames[0]);
+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;
       }
     }
-    // Else transform whatever we get back.
-    return wrap(target[prop]);
-  },
-  set(target, prop, value) {
-    target[prop] = value;
-    return true;
-  },
-  has(target, prop) {
-    if (target instanceof IDBTransaction && (prop === 'done' || prop === 'store')) {
-      return true;
-    }
-    return prop in target;
+    collapsedEvents.push(event);
   }
-};
-function replaceTraps(callback) {
-  idbProxyTraps = callback(idbProxyTraps);
-}
-function wrapFunction(func) {
-  // Due to expected object equality (which is enforced by the caching in `wrap`), we
-  // only create one new func per func.
-  // Cursor methods are special, as the behaviour is a little more different to standard IDB. In
-  // IDB, you advance the cursor and wait for a new 'success' on the IDBRequest that gave you the
-  // cursor. It's kinda like a promise that can resolve with many values. That doesn't make sense
-  // with real promises, so each advance methods returns a new promise for the cursor object, or
-  // undefined if the end of the cursor has been reached.
-  if (getCursorAdvanceMethods().includes(func)) {
-    return function (...args) {
-      // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
-      // the original object.
-      func.apply(unwrap(this), args);
-      return wrap(this.request);
-    };
-  }
-  return function (...args) {
-    // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
-    // the original object.
-    return wrap(func.apply(unwrap(this), args));
-  };
-}
-function transformCachableValue(value) {
-  if (typeof value === 'function') return wrapFunction(value);
-  // This doesn't return, it just creates a 'done' promise for the transaction,
-  // which is later returned for transaction.done (see idbObjectHandler).
-  if (value instanceof IDBTransaction) cacheDonePromiseForTransaction(value);
-  if (instanceOfAny(value, getIdbProxyableTypes())) return new Proxy(value, idbProxyTraps);
-  // Return the same value back if we're not going to transform it.
-  return value;
-}
-function wrap(value) {
-  // We sometimes generate multiple promises from a single IDBRequest (eg when cursoring), because
-  // IDB is weird and a single IDBRequest can yield many responses, so these can't be cached.
-  if (value instanceof IDBRequest) return promisifyRequest(value);
-  // If we've already transformed this value before, reuse the transformed value.
-  // This is faster, but it also provides object equality.
-  if (transformCache.has(value)) return transformCache.get(value);
-  const newValue = transformCachableValue(value);
-  // Not all types are transformed.
-  // These may be primitive types, so they can't be WeakMap keys.
-  if (newValue !== value) {
-    transformCache.set(value, newValue);
-    reverseTransformCache.set(newValue, value);
-  }
-  return newValue;
-}
-const unwrap = value => reverseTransformCache.get(value);
-
-/**
- * Open a database.
- *
- * @param name Name of the database.
- * @param version Schema version.
- * @param callbacks Additional callbacks.
- */
-function openDB(name, version, {
-  blocked,
-  upgrade,
-  blocking,
-  terminated
-} = {}) {
-  const request = indexedDB.open(name, version);
-  const openPromise = wrap(request);
-  if (upgrade) {
-    request.addEventListener('upgradeneeded', event => {
-      upgrade(wrap(request.result), event.oldVersion, event.newVersion, wrap(request.transaction), event);
-    });
-  }
-  if (blocked) {
-    request.addEventListener('blocked', event => blocked(
-    // Casting due to https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1405
-    event.oldVersion, event.newVersion, event));
-  }
-  openPromise.then(db => {
-    if (terminated) db.addEventListener('close', () => terminated());
-    if (blocking) {
-      db.addEventListener('versionchange', event => blocking(event.oldVersion, event.newVersion, event));
-    }
-  }).catch(() => {});
-  return openPromise;
-}
-const readMethods = ['get', 'getKey', 'getAll', 'getAllKeys', 'count'];
-const writeMethods = ['put', 'add', 'delete', 'clear'];
-const cachedMethods = new Map();
-function getMethod(target, prop) {
-  if (!(target instanceof IDBDatabase && !(prop in target) && typeof prop === 'string')) {
-    return;
-  }
-  if (cachedMethods.get(prop)) return cachedMethods.get(prop);
-  const targetFuncName = prop.replace(/FromIndex$/, '');
-  const useIndex = prop !== targetFuncName;
-  const isWrite = writeMethods.includes(targetFuncName);
-  if (
-  // Bail if the target doesn't exist on the target. Eg, getAll isn't in Edge.
-  !(targetFuncName in (useIndex ? IDBIndex : IDBObjectStore).prototype) || !(isWrite || readMethods.includes(targetFuncName))) {
-    return;
-  }
-  const method = async function (storeName, ...args) {
-    // isWrite ? 'readwrite' : undefined gzipps better, but fails in Edge :(
-    const tx = this.transaction(storeName, isWrite ? 'readwrite' : 'readonly');
-    let target = tx.store;
-    if (useIndex) target = target.index(args.shift());
-    // Must reject if op rejects.
-    // If it's a write operation, must reject if tx.done rejects.
-    // Must reject with op rejection first.
-    // Must resolve with op value.
-    // Must handle both promises (no unhandled rejections)
-    return (await Promise.all([target[targetFuncName](...args), isWrite && tx.done]))[0];
-  };
-  cachedMethods.set(prop, method);
-  return method;
-}
-replaceTraps(oldTraps => ({
-  ...oldTraps,
-  get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
-  has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop)
-}));
-const advanceMethodProps = ['continue', 'continuePrimaryKey', 'advance'];
-const methodMap = {};
-const advanceResults = new WeakMap();
-const ittrProxiedCursorToOriginalProxy = new WeakMap();
-const cursorIteratorTraps = {
-  get(target, prop) {
-    if (!advanceMethodProps.includes(prop)) return target[prop];
-    let cachedFunc = methodMap[prop];
-    if (!cachedFunc) {
-      cachedFunc = methodMap[prop] = function (...args) {
-        advanceResults.set(this, ittrProxiedCursorToOriginalProxy.get(this)[prop](...args));
-      };
-    }
-    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;
+  return collapsedEvents;
 };
 
 const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
@@ -1737,117 +1399,537 @@ const getEventsWithTime = events => {
     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 [{
+      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 = 'tool-execution-started';
+const finishedEventType = 'tool-execution-finished';
+const getRawEventBySessionIdAndEventId = async (store, sessionId, sessionIdIndexName, eventId) => {
+  if (eventId < 1) {
+    return undefined;
+  }
+  if (store.indexNames.contains(sessionIdIndexName)) {
+    const index = store.index(sessionIdIndexName);
+    const keys = await index.getAllKeys(sessionId, eventId);
+    if (keys.length < eventId) {
+      return undefined;
+    }
+    const key = keys.at(-1);
+    if (key === undefined) {
+      return undefined;
+    }
+    const event = await store.get(key);
+    return event;
+  }
+  const all = await store.getAll();
+  const events = all.filter(event => event.sessionId === sessionId);
+  return events[eventId - 1];
+};
+const getTimestamp = value => {
+  return typeof value === 'string' || typeof value === 'number' ? value : undefined;
+};
+const hasMatchingToolName = (startedEvent, finishedEvent) => {
+  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
+    return startedEvent.toolName === finishedEvent.toolName;
+  }
+  return true;
+};
+const mergeToolExecutionEvents = (startedEvent, finishedEvent, eventId) => {
+  const ended = getTimestamp(finishedEvent.ended) ?? getTimestamp(finishedEvent.endTime) ?? getTimestamp(finishedEvent.timestamp);
+  const started = getTimestamp(startedEvent.started) ?? getTimestamp(startedEvent.startTime) ?? getTimestamp(startedEvent.timestamp);
+  return {
+    ...startedEvent,
+    ...finishedEvent,
+    ...(ended === undefined ? {} : {
+      ended
+    }),
+    eventId,
+    ...(started === undefined ? {} : {
+      started
+    }),
+    type: 'tool-execution'
+  };
+};
+const getEventDetailsBySessionIdAndEventId = async (store, sessionId, sessionIdIndexName, eventId, summaryType) => {
+  const event = await getRawEventBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId);
+  if (!event) {
+    return undefined;
+  }
+  if (summaryType !== 'tool-execution') {
+    return {
+      ...event,
+      eventId
+    };
+  }
+  if (event.type !== startedEventType) {
+    return {
+      ...event,
+      eventId
+    };
+  }
+  const nextEvent = await getRawEventBySessionIdAndEventId(store, sessionId, sessionIdIndexName, eventId + 1);
+  if (!nextEvent || nextEvent.type !== finishedEventType || nextEvent.sessionId !== sessionId || !hasMatchingToolName(event, nextEvent)) {
+    return {
+      ...event,
+      eventId
+    };
+  }
+  return mergeToolExecutionEvents(event, nextEvent, eventId);
+};
+
+const instanceOfAny = (object, constructors) => constructors.some(c => object instanceof c);
+let idbProxyableTypes;
+let cursorAdvanceMethods;
+// This is a function to prevent it throwing up in node environments.
+function getIdbProxyableTypes() {
+  return idbProxyableTypes || (idbProxyableTypes = [IDBDatabase, IDBObjectStore, IDBIndex, IDBCursor, IDBTransaction]);
+}
+// This is a function to prevent it throwing up in node environments.
+function getCursorAdvanceMethods() {
+  return cursorAdvanceMethods || (cursorAdvanceMethods = [IDBCursor.prototype.advance, IDBCursor.prototype.continue, IDBCursor.prototype.continuePrimaryKey]);
+}
+const transactionDoneMap = new WeakMap();
+const transformCache = new WeakMap();
+const reverseTransformCache = new WeakMap();
+function promisifyRequest(request) {
+  const promise = new Promise((resolve, reject) => {
+    const unlisten = () => {
+      request.removeEventListener('success', success);
+      request.removeEventListener('error', error);
+    };
+    const success = () => {
+      resolve(wrap(request.result));
+      unlisten();
+    };
+    const error = () => {
+      reject(request.error);
+      unlisten();
+    };
+    request.addEventListener('success', success);
+    request.addEventListener('error', error);
+  });
+  // This mapping exists in reverseTransformCache but doesn't exist in transformCache. This
+  // is because we create many promises from a single IDBRequest.
+  reverseTransformCache.set(promise, request);
+  return promise;
+}
+function cacheDonePromiseForTransaction(tx) {
+  // Early bail if we've already created a done promise for this transaction.
+  if (transactionDoneMap.has(tx)) return;
+  const done = new Promise((resolve, reject) => {
+    const unlisten = () => {
+      tx.removeEventListener('complete', complete);
+      tx.removeEventListener('error', error);
+      tx.removeEventListener('abort', error);
+    };
+    const complete = () => {
+      resolve();
+      unlisten();
+    };
+    const error = () => {
+      reject(tx.error || new DOMException('AbortError', 'AbortError'));
+      unlisten();
+    };
+    tx.addEventListener('complete', complete);
+    tx.addEventListener('error', error);
+    tx.addEventListener('abort', error);
+  });
+  // Cache it for later retrieval.
+  transactionDoneMap.set(tx, done);
+}
+let idbProxyTraps = {
+  get(target, prop, receiver) {
+    if (target instanceof IDBTransaction) {
+      // Special handling for transaction.done.
+      if (prop === 'done') return transactionDoneMap.get(target);
+      // Make tx.store return the only store in the transaction, or undefined if there are many.
+      if (prop === 'store') {
+        return receiver.objectStoreNames[1] ? undefined : receiver.objectStore(receiver.objectStoreNames[0]);
+      }
+    }
+    // Else transform whatever we get back.
+    return wrap(target[prop]);
+  },
+  set(target, prop, value) {
+    target[prop] = value;
+    return true;
+  },
+  has(target, prop) {
+    if (target instanceof IDBTransaction && (prop === 'done' || prop === 'store')) {
+      return true;
+    }
+    return prop in target;
+  }
+};
+function replaceTraps(callback) {
+  idbProxyTraps = callback(idbProxyTraps);
+}
+function wrapFunction(func) {
+  // Due to expected object equality (which is enforced by the caching in `wrap`), we
+  // only create one new func per func.
+  // Cursor methods are special, as the behaviour is a little more different to standard IDB. In
+  // IDB, you advance the cursor and wait for a new 'success' on the IDBRequest that gave you the
+  // cursor. It's kinda like a promise that can resolve with many values. That doesn't make sense
+  // with real promises, so each advance methods returns a new promise for the cursor object, or
+  // undefined if the end of the cursor has been reached.
+  if (getCursorAdvanceMethods().includes(func)) {
+    return function (...args) {
+      // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
+      // the original object.
+      func.apply(unwrap(this), args);
+      return wrap(this.request);
+    };
+  }
+  return function (...args) {
+    // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
+    // the original object.
+    return wrap(func.apply(unwrap(this), args));
+  };
+}
+function transformCachableValue(value) {
+  if (typeof value === 'function') return wrapFunction(value);
+  // This doesn't return, it just creates a 'done' promise for the transaction,
+  // which is later returned for transaction.done (see idbObjectHandler).
+  if (value instanceof IDBTransaction) cacheDonePromiseForTransaction(value);
+  if (instanceOfAny(value, getIdbProxyableTypes())) return new Proxy(value, idbProxyTraps);
+  // Return the same value back if we're not going to transform it.
+  return value;
+}
+function wrap(value) {
+  // We sometimes generate multiple promises from a single IDBRequest (eg when cursoring), because
+  // IDB is weird and a single IDBRequest can yield many responses, so these can't be cached.
+  if (value instanceof IDBRequest) return promisifyRequest(value);
+  // If we've already transformed this value before, reuse the transformed value.
+  // This is faster, but it also provides object equality.
+  if (transformCache.has(value)) return transformCache.get(value);
+  const newValue = transformCachableValue(value);
+  // Not all types are transformed.
+  // These may be primitive types, so they can't be WeakMap keys.
+  if (newValue !== value) {
+    transformCache.set(value, newValue);
+    reverseTransformCache.set(newValue, value);
+  }
+  return newValue;
+}
+const unwrap = value => reverseTransformCache.get(value);
+
+/**
+ * Open a database.
+ *
+ * @param name Name of the database.
+ * @param version Schema version.
+ * @param callbacks Additional callbacks.
+ */
+function openDB(name, version, {
+  blocked,
+  upgrade,
+  blocking,
+  terminated
+} = {}) {
+  const request = indexedDB.open(name, version);
+  const openPromise = wrap(request);
+  if (upgrade) {
+    request.addEventListener('upgradeneeded', event => {
+      upgrade(wrap(request.result), event.oldVersion, event.newVersion, wrap(request.transaction), event);
+    });
+  }
+  if (blocked) {
+    request.addEventListener('blocked', event => blocked(
+    // Casting due to https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1405
+    event.oldVersion, event.newVersion, event));
+  }
+  openPromise.then(db => {
+    if (terminated) db.addEventListener('close', () => terminated());
+    if (blocking) {
+      db.addEventListener('versionchange', event => blocking(event.oldVersion, event.newVersion, event));
+    }
+  }).catch(() => {});
+  return openPromise;
+}
+const readMethods = ['get', 'getKey', 'getAll', 'getAllKeys', 'count'];
+const writeMethods = ['put', 'add', 'delete', 'clear'];
+const cachedMethods = new Map();
+function getMethod(target, prop) {
+  if (!(target instanceof IDBDatabase && !(prop in target) && typeof prop === 'string')) {
+    return;
+  }
+  if (cachedMethods.get(prop)) return cachedMethods.get(prop);
+  const targetFuncName = prop.replace(/FromIndex$/, '');
+  const useIndex = prop !== targetFuncName;
+  const isWrite = writeMethods.includes(targetFuncName);
+  if (
+  // Bail if the target doesn't exist on the target. Eg, getAll isn't in Edge.
+  !(targetFuncName in (useIndex ? IDBIndex : IDBObjectStore).prototype) || !(isWrite || readMethods.includes(targetFuncName))) {
+    return;
+  }
+  const method = async function (storeName, ...args) {
+    // isWrite ? 'readwrite' : undefined gzipps better, but fails in Edge :(
+    const tx = this.transaction(storeName, isWrite ? 'readwrite' : 'readonly');
+    let target = tx.store;
+    if (useIndex) target = target.index(args.shift());
+    // Must reject if op rejects.
+    // If it's a write operation, must reject if tx.done rejects.
+    // Must reject with op rejection first.
+    // Must resolve with op value.
+    // Must handle both promises (no unhandled rejections)
+    return (await Promise.all([target[targetFuncName](...args), isWrite && tx.done]))[0];
+  };
+  cachedMethods.set(prop, method);
+  return method;
+}
+replaceTraps(oldTraps => ({
+  ...oldTraps,
+  get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
+  has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop)
+}));
+const advanceMethodProps = ['continue', 'continuePrimaryKey', 'advance'];
+const methodMap = {};
+const advanceResults = new WeakMap();
+const ittrProxiedCursorToOriginalProxy = new WeakMap();
+const cursorIteratorTraps = {
+  get(target, prop) {
+    if (!advanceMethodProps.includes(prop)) return target[prop];
+    let cachedFunc = methodMap[prop];
+    if (!cachedFunc) {
+      cachedFunc = methodMap[prop] = function (...args) {
+        advanceResults.set(this, ittrProxiedCursorToOriginalProxy.get(this)[prop](...args));
+      };
+    }
+    return cachedFunc;
   }
-  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
-    };
+async function* iterate(...args) {
+  // tslint:disable-next-line:no-this-assignment
+  let cursor = this;
+  if (!(cursor instanceof IDBCursor)) {
+    cursor = await cursor.openCursor(...args);
   }
-  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;
+  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);
   }
-  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;
+}
+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 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 openDatabaseDependencies = {
+  openDB: openDB
 };
-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 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 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.`;
 };
@@ -2571,9 +2722,23 @@ const refresh = async state => {
   return refreshEvents(state);
 };
 
+const Button = 1;
+const Div = 4;
+const Input = 6;
+const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
+const Text = 12;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+const Search = 42;
+const Label = 66;
+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';
 
@@ -3319,21 +3484,6 @@ const renderCss = (oldState, newState) => {
   return [SetCss, newState.uid, css];
 };
 
-const Button = 1;
-const Div = 4;
-const Input = 6;
-const Span = 8;
-const Table = 9;
-const TBody = 10;
-const Td = 11;
-const Text = 12;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
-const Search = 42;
-const Label = 66;
-const Reference = 100;
-
 const text = data => {
   return {
     childCount: 0,
@@ -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'
   }, {
@@ -4179,6 +4331,9 @@ const getEventsClassName = hasSelectedEvent => {
 const hasOwn = (event, key) => {
   return Object.hasOwn(event, key);
 };
+const isChatMessageUpdatedEvent = event => {
+  return event.type === 'chat-message-updated';
+};
 const getPreviewName = event => {
   if (typeof event.name === 'string' && event.name) {
     return event.name;
@@ -4198,6 +4353,9 @@ const shouldIncludeArguments = (event, name) => {
   return true;
 };
 const getPreviewEvent = event => {
+  if (isChatMessageUpdatedEvent(event) && typeof event.text === 'string') {
+    return event.text;
+  }
   const name = getPreviewName(event);
   const previewEvent = {
     ...(name === undefined ? {} : {
@@ -4310,7 +4468,7 @@ const getBucketDom = bucket => {
     className: ChatDebugViewTimelinePresetInput,
     inputType: 'radio',
     name: TimelineRangePreset,
-    onChange: HandleSimpleInput,
+    onChange: HandleTimelineRangePreset,
     type: Input,
     value: presetValue
   }, {
@@ -4460,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)];
@@ -4498,10 +4656,12 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, eve
   if (timelineFilterDescription) {
     filterDescriptionParts.push(timelineFilterDescription);
   }
+  const hasTimelineFilter = Boolean(timelineFilterDescription);
   const hasFilterValue = filterDescriptionParts.length > 0;
   const filterDescription = filterDescriptionParts.join(' ');
   const noFilteredEventsMessage = `no events found matching ${filterDescription}`;
-  const emptyMessage = events.length === 0 && hasFilterValue ? noFilteredEventsMessage : 'No events have been found';
+  const useNoToolCallEventsMessage = eventCategoryFilter === Tools && !trimmedFilterValue && !hasTimelineFilter;
+  const emptyMessage = events.length === 0 && hasFilterValue ? useNoToolCallEventsMessage ? 'No tool call events.' : noFilteredEventsMessage : 'No events have been found';
   const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
   const contentNodes = useDevtoolsLayout ? getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response) : getLegacyEventsDom(errorMessage, emptyMessage, events.flatMap(getEventNode));
   const quickFilterNodes = useDevtoolsLayout ? getQuickFilterNodes(eventCategoryFilter, eventCategoryFilterOptions) : [];
@@ -4585,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],
@@ -4686,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,
@@ -4696,6 +4865,7 @@ const setSessionId = async (state, sessionId) => {
       initial: false,
       selectedEvent: null,
       selectedEventId: null,
+      selectedEventIndex: null,
       sessionId
     };
   }
@@ -4707,6 +4877,7 @@ const setSessionId = async (state, sessionId) => {
       initial: false,
       selectedEvent: null,
       selectedEventId: null,
+      selectedEventIndex: null,
       sessionId
     };
   }
@@ -4720,6 +4891,7 @@ const setSessionId = async (state, sessionId) => {
     initial: false,
     selectedEvent: null,
     selectedEventId: null,
+    selectedEventIndex: null,
     sessionId
   };
 };
@@ -4728,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),