@lvce-editor/static-server 0.77.11 → 0.78.0

package/static/{c0b16fe → 5a230ea}/packages/chat-debug-view/dist/chatDebugViewWorkerMain.js

@@ -54,6 +54,49 @@ class VError extends Error {
   }
 }
 
+class AssertionError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'AssertionError';
+  }
+}
+const Object$1 = 1;
+const Number$1 = 2;
+const Array$1 = 3;
+const String$1 = 4;
+const Boolean$1 = 5;
+const Function = 6;
+const Null = 7;
+const Unknown = 8;
+const getType = value => {
+  switch (typeof value) {
+    case 'number':
+      return Number$1;
+    case 'function':
+      return Function;
+    case 'string':
+      return String$1;
+    case 'object':
+      if (value === null) {
+        return Null;
+      }
+      if (Array.isArray(value)) {
+        return Array$1;
+      }
+      return Object$1;
+    case 'boolean':
+      return Boolean$1;
+    default:
+      return Unknown;
+  }
+};
+const number = value => {
+  const type = getType(value);
+  if (type !== Number$1) {
+    throw new AssertionError('expected value to be of type number');
+  }
+};
+
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
 };
@@ -368,6 +411,100 @@ const IpcChildWithModuleWorkerAndMessagePort$1 = {
   listen: listen$6,
   wrap: wrap$e
 };
+const addListener = (emitter, type, callback) => {
+  if ('addEventListener' in emitter) {
+    emitter.addEventListener(type, callback);
+  } else {
+    emitter.on(type, callback);
+  }
+};
+const removeListener = (emitter, type, callback) => {
+  if ('removeEventListener' in emitter) {
+    emitter.removeEventListener(type, callback);
+  } else {
+    emitter.off(type, callback);
+  }
+};
+const getFirstEvent = (eventEmitter, eventMap) => {
+  const {
+    promise,
+    resolve
+  } = Promise.withResolvers();
+  const listenerMap = Object.create(null);
+  const cleanup = value => {
+    for (const event of Object.keys(eventMap)) {
+      removeListener(eventEmitter, event, listenerMap[event]);
+    }
+    resolve(value);
+  };
+  for (const [event, type] of Object.entries(eventMap)) {
+    const listener = event => {
+      cleanup({
+        event,
+        type
+      });
+    };
+    addListener(eventEmitter, event, listener);
+    listenerMap[event] = listener;
+  }
+  return promise;
+};
+const Message$1 = 3;
+const create$5$1 = async ({
+  isMessagePortOpen,
+  messagePort
+}) => {
+  if (!isMessagePort(messagePort)) {
+    throw new IpcError('port must be of type MessagePort');
+  }
+  if (isMessagePortOpen) {
+    return messagePort;
+  }
+  const eventPromise = getFirstEvent(messagePort, {
+    message: Message$1
+  });
+  messagePort.start();
+  const {
+    event,
+    type
+  } = await eventPromise;
+  if (type !== Message$1) {
+    throw new IpcError('Failed to wait for ipc message');
+  }
+  if (event.data !== readyMessage) {
+    throw new IpcError('unexpected first message');
+  }
+  return messagePort;
+};
+const signal$1 = messagePort => {
+  messagePort.start();
+};
+class IpcParentWithMessagePort extends Ipc {
+  getData = getData$2;
+  send(message) {
+    this._rawIpc.postMessage(message);
+  }
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    this._rawIpc.postMessage(message, transfer);
+  }
+  dispose() {
+    this._rawIpc.close();
+  }
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+  }
+  onClose(callback) {}
+}
+const wrap$5 = messagePort => {
+  return new IpcParentWithMessagePort(messagePort);
+};
+const IpcParentWithMessagePort$1 = {
+  __proto__: null,
+  create: create$5$1,
+  signal: signal$1,
+  wrap: wrap$5
+};
 
 class CommandNotFoundError extends Error {
   constructor(command) {
@@ -392,10 +529,10 @@ const execute = (command, ...args) => {
 
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
-const get$1 = id => {
+const get$2 = id => {
   return callbacks[id];
 };
-const remove = id => {
+const remove$1 = id => {
   delete callbacks[id];
 };
 class JsonRpcError extends Error {
@@ -541,14 +678,14 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$1(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
     return;
   }
   fn(response);
-  remove(id);
+  remove$1(id);
 };
 const E_COMMAND_NOT_FOUND = 'E_COMMAND_NOT_FOUND';
 const getErrorType = prettyError => {
@@ -604,7 +741,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$6 = (message, result) => {
+const create$a = (message, result) => {
   return {
     id: message.id,
     jsonrpc: Two$1,
@@ -613,7 +750,7 @@ const create$6 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$6(message, resultProperty);
+  return create$a(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -707,7 +844,7 @@ const handleJsonRpcMessage = async (...args) => {
 
 const Two = '2.0';
 
-const create$5 = (method, params) => {
+const create$9 = (method, params) => {
   return {
     jsonrpc: Two,
     method,
@@ -715,7 +852,7 @@ const create$5 = (method, params) => {
   };
 };
 
-const create$4 = (id, method, params) => {
+const create$8 = (id, method, params) => {
   const message = {
     id,
     jsonrpc: Two,
@@ -726,12 +863,12 @@ const create$4 = (id, method, params) => {
 };
 
 let id = 0;
-const create$3 = () => {
+const create$7 = () => {
   return ++id;
 };
 
 const registerPromise = map => {
-  const id = create$3();
+  const id = create$7();
   const {
     promise,
     resolve
@@ -748,7 +885,7 @@ const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer)
     id,
     promise
   } = registerPromise(callbacks);
-  const message = create$4(id, method, params);
+  const message = create$8(id, method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -784,7 +921,7 @@ const createRpc = ipc => {
      * @deprecated
      */
     send(method, ...params) {
-      const message = create$5(method, params);
+      const message = create$9(method, params);
       ipc.send(message);
     }
   };
@@ -824,7 +961,84 @@ const listen$1 = async (module, options) => {
   return ipc;
 };
 
-const create$2 = async ({
+const create$6 = async ({
+  commandMap,
+  isMessagePortOpen = true,
+  messagePort
+}) => {
+  // TODO create a commandMap per rpc instance
+  register(commandMap);
+  const rawIpc = await IpcParentWithMessagePort$1.create({
+    isMessagePortOpen,
+    messagePort
+  });
+  const ipc = IpcParentWithMessagePort$1.wrap(rawIpc);
+  handleIpc(ipc);
+  const rpc = createRpc(ipc);
+  messagePort.start();
+  return rpc;
+};
+
+const create$5 = async ({
+  commandMap,
+  isMessagePortOpen,
+  send
+}) => {
+  const {
+    port1,
+    port2
+  } = new MessageChannel();
+  await send(port1);
+  return create$6({
+    commandMap,
+    isMessagePortOpen,
+    messagePort: port2
+  });
+};
+
+const createSharedLazyRpc = factory => {
+  let rpcPromise;
+  const getOrCreate = () => {
+    if (!rpcPromise) {
+      rpcPromise = factory();
+    }
+    return rpcPromise;
+  };
+  return {
+    async dispose() {
+      const rpc = await getOrCreate();
+      await rpc.dispose();
+    },
+    async invoke(method, ...params) {
+      const rpc = await getOrCreate();
+      return rpc.invoke(method, ...params);
+    },
+    async invokeAndTransfer(method, ...params) {
+      const rpc = await getOrCreate();
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    async send(method, ...params) {
+      const rpc = await getOrCreate();
+      rpc.send(method, ...params);
+    }
+  };
+};
+
+const create$4 = async ({
+  commandMap,
+  isMessagePortOpen,
+  send
+}) => {
+  return createSharedLazyRpc(() => {
+    return create$5({
+      commandMap,
+      isMessagePortOpen,
+      send
+    });
+  });
+};
+
+const create$3 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -835,6 +1049,124 @@ const create$2 = async ({
   return rpc;
 };
 
+const createMockRpc = ({
+  commandMap
+}) => {
+  const invocations = [];
+  const invoke = (method, ...params) => {
+    invocations.push([method, ...params]);
+    const command = commandMap[method];
+    if (!command) {
+      throw new Error(`command ${method} not found`);
+    }
+    return command(...params);
+  };
+  const mockRpc = {
+    invocations,
+    invoke,
+    invokeAndTransfer: invoke
+  };
+  return mockRpc;
+};
+
+const rpcs = Object.create(null);
+const set$3 = (id, rpc) => {
+  rpcs[id] = rpc;
+};
+const get$1 = id => {
+  return rpcs[id];
+};
+const remove = id => {
+  delete rpcs[id];
+};
+
+/* eslint-disable  @typescript-eslint/explicit-function-return-type */
+const create$2 = rpcId => {
+  return {
+    async dispose() {
+      const rpc = get$1(rpcId);
+      await rpc.dispose();
+    },
+    // @ts-ignore
+    invoke(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invoke(method, ...params);
+    },
+    // @ts-ignore
+    invokeAndTransfer(method, ...params) {
+      const rpc = get$1(rpcId);
+      // @ts-ignore
+      return rpc.invokeAndTransfer(method, ...params);
+    },
+    registerMockRpc(commandMap) {
+      const mockRpc = createMockRpc({
+        commandMap
+      });
+      set$3(rpcId, mockRpc);
+      // @ts-ignore
+      mockRpc[Symbol.dispose] = () => {
+        remove(rpcId);
+      };
+      // @ts-ignore
+      return mockRpc;
+    },
+    set(rpc) {
+      set$3(rpcId, rpc);
+    }
+  };
+};
+
+const Button$1 = 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 Section = 41;
+const Search = 42;
+const Label = 66;
+const Reference = 100;
+
+const Button = 'event.button';
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const TargetName = 'event.target.name';
+const TargetValue = 'event.target.value';
+
+const ChatStorageWorker = 6003;
+const RendererWorker = 1;
+
+const SetCss = 'Viewlet.setCss';
+const SetDom2 = 'Viewlet.setDom2';
+const SetPatches = 'Viewlet.setPatches';
+
+const {
+  invoke: invoke$1,
+  set: set$2
+} = create$2(ChatStorageWorker);
+
+const {
+  invoke,
+  invokeAndTransfer,
+  set: set$1
+} = create$2(RendererWorker);
+const showContextMenu2 = async (uid, menuId, x, y, args) => {
+  number(uid);
+  number(menuId);
+  number(x);
+  number(y);
+  await invoke('ContextMenu.show2', uid, menuId, x, y, args);
+};
+const sendMessagePortToChatStorageWorker$1 = async port => {
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToChatStorageWorker', port, 'HandleMessagePort.handleMessagePort');
+};
+
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
   return key.slice(dotIndex + 1);
@@ -955,6 +1287,41 @@ const terminate = () => {
   globalThis.close();
 };
 
+const appendEvent = async event => {
+  return invoke$1('ChatStorage.appendEvent', event);
+};
+const listChatViewEvents$1 = async sessionId => {
+  return invoke$1('ChatStorage.listChatViewEvents', sessionId);
+};
+const loadSelectedEvent$1 = async (sessionId, eventId, type) => {
+  return invoke$1('ChatStorage.loadSelectedEvent', sessionId, eventId, type);
+};
+
+const appendStoredEventForTestDependencies = {
+  appendEvent: appendEvent
+};
+const appendStoredEventForTest = async (state, event) => {
+  await appendStoredEventForTestDependencies.appendEvent(event);
+  return state;
+};
+
+const Response = 'response';
+const Preview = 'preview';
+const Timing = 'timing';
+const detailTabs = [Preview, Response, Timing];
+const isDetailTab = value => {
+  return value === Response || value === Preview || value === Timing;
+};
+const getDetailTabLabel = value => {
+  if (value === Preview) {
+    return 'Preview';
+  }
+  if (value === Timing) {
+    return 'Timing';
+  }
+  return 'Response';
+};
+
 const createEventCategoryFilterOptions = () => {
   return [{
     label: 'All',
@@ -1014,6 +1381,34 @@ const parseFilterValue = filterValue => {
   };
 };
 
+const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
+const isSavedState = value => {
+  return typeof value === 'object' && value !== null;
+};
+const getRestoredEventCategoryFilter = (savedState, currentEventCategoryFilter) => {
+  if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
+    return savedState.eventCategoryFilter;
+  }
+  if (typeof savedState.filterValue === 'string') {
+    return parseFilterValue(savedState.filterValue).eventCategoryFilter;
+  }
+  return currentEventCategoryFilter;
+};
+const restoreSavedState = (state, savedState) => {
+  if (!isSavedState(savedState)) {
+    return state;
+  }
+  return {
+    ...state,
+    eventCategoryFilter: getRestoredEventCategoryFilter(savedState, state.eventCategoryFilter),
+    filterValue: typeof savedState.filterValue === 'string' ? savedState.filterValue : state.filterValue,
+    selectedDetailTab: typeof savedState.selectedDetailTab === 'string' && isDetailTab(savedState.selectedDetailTab) ? savedState.selectedDetailTab : state.selectedDetailTab,
+    selectedEventId: typeof savedState.selectedEventId === 'number' || savedState.selectedEventId === null ? savedState.selectedEventId : state.selectedEventId,
+    timelineEndSeconds: typeof savedState.timelineEndSeconds === 'string' ? savedState.timelineEndSeconds : state.timelineEndSeconds,
+    timelineStartSeconds: typeof savedState.timelineStartSeconds === 'string' ? savedState.timelineStartSeconds : state.timelineStartSeconds
+  };
+};
+
 const {
   get,
   getCommandIds,
@@ -1023,23 +1418,6 @@ const {
   wrapGetter
 } = create$1();
 
-const Response = 'response';
-const Preview = 'preview';
-const Timing = 'timing';
-const detailTabs = [Preview, Response, Timing];
-const isDetailTab = value => {
-  return value === Response || value === Preview || value === Timing;
-};
-const getDetailTabLabel = value => {
-  if (value === Preview) {
-    return 'Preview';
-  }
-  if (value === Timing) {
-    return 'Timing';
-  }
-  return 'Response';
-};
-
 const defaultTableWidth = 480;
 const minTableWidth = 240;
 const minDetailsWidth = 280;
@@ -1079,7 +1457,6 @@ const createDefaultState = () => {
     eventStoreName: 'chat-view-events',
     filterValue: '',
     height: 0,
-    indexedDbSupportOverride: undefined,
     initial: false,
     platform: 0,
     selectedDetailTab: Response,
@@ -1106,43 +1483,19 @@ const createDefaultState = () => {
   };
 };
 
-const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
-const getRestoredEventCategoryFilter = savedState => {
-  if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
-    return savedState.eventCategoryFilter;
-  }
-  if (typeof savedState.filterValue === 'string') {
-    return parseFilterValue(savedState.filterValue).eventCategoryFilter;
-  }
-  return All;
-};
 const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '', databaseName = 'lvce-chat-view-sessions', dataBaseVersion = 2, eventStoreName = 'chat-view-events', sessionIdIndexName = 'sessionId', savedState = {}) => {
   const defaultState = createDefaultState();
-  const {
-    filterValue,
-    selectedEventId,
-    tableWidth,
-    timelineEndSeconds,
-    timelineStartSeconds
-  } = savedState;
-  const restoredEventCategoryFilter = getRestoredEventCategoryFilter(savedState);
   const state = {
-    ...defaultState,
+    ...restoreSavedState(defaultState, savedState),
     assetDir,
     databaseName,
     dataBaseVersion,
-    eventCategoryFilter: restoredEventCategoryFilter,
     eventStoreName,
-    filterValue: filterValue ?? defaultState.filterValue,
     height,
     initial: true,
     platform,
-    selectedEventId: selectedEventId ?? defaultState.selectedEventId,
     sessionId,
     sessionIdIndexName,
-    tableWidth: tableWidth ?? defaultState.tableWidth,
-    timelineEndSeconds: timelineEndSeconds ?? defaultState.timelineEndSeconds,
-    timelineStartSeconds: timelineStartSeconds ?? defaultState.timelineStartSeconds,
     uid,
     uri,
     width,
@@ -1171,421 +1524,41 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
-const handleDetailsContextMenu = state => {
-  return state;
+const hasMatchingToolName = (startedEvent, finishedEvent) => {
+  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
+    return startedEvent.toolName === finishedEvent.toolName;
+  }
+  return true;
 };
 
-// cspell:ignore IDBP
+const isMatchingToolExecutionPair = (startedEvent, finishedEvent) => {
+  return startedEvent.sessionId === finishedEvent.sessionId && hasMatchingToolName(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 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$1 = value => {
+
+const getTimestamp = 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;
-  }
-  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);
-  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$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 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;
-  }
-};
-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 getEndedTimestamp = event => {
+  return getTimestamp(event.ended) ?? getTimestamp(event.endTime) ?? getTimestamp(event.endTimestamp) ?? getTimestamp(event.timestamp);
 };
 
 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 {
@@ -1606,15 +1579,9 @@ const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
     }),
     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++) {
@@ -1850,12 +1817,12 @@ const getTimelineInfo = (events, startValue, endValue) => {
   };
 };
 
-const getCurrentEvents$2 = state => {
+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 selectEventAtIndex = async (state, selectedEventIndex, dependencies) => {
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$3(state);
   const selectedEvent = currentEvents[selectedEventIndex];
   if (!selectedEvent) {
     return {
@@ -1882,568 +1849,571 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies) => {
   };
 };
 
-const handleEventRowClickDependencies = {
-  loadSelectedEvent: loadSelectedEvent
+const devtoolsRootGap = 4;
+const devtoolsTopHeight = 28;
+const devtoolsTimelineHeight = 88;
+const devtoolsTableHeaderHeight = 24;
+const devtoolsTableRowHeight = 24;
+const getTableBodyY = (state, hasTimeline) => {
+  return state.y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
 };
-const isPrimaryButton = button => {
-  return button === 0;
-};
-const parseSelectedEventIndex$1 = value => {
-  const parsed = Number.parseInt(value, 10);
-  if (Number.isNaN(parsed) || parsed < 0) {
-    return null;
+const getTableBodyEventIndex = (state, eventX, eventY) => {
+  if (!state.useDevtoolsLayout) {
+    return -1;
   }
-  return parsed;
+  const currentEvents = getCurrentEvents$3(state);
+  if (currentEvents.length === 0) {
+    return -1;
+  }
+  const tableX = state.x + leftPadding;
+  const tableWidth = clampTableWidth(state.width, state.tableWidth);
+  const hasTimeline = currentEvents.length > 0;
+  const tableBodyY = getTableBodyY(state, hasTimeline);
+  const relativeX = eventX - tableX;
+  const relativeY = eventY - tableBodyY;
+  if (relativeX < 0 || relativeX >= tableWidth || relativeY < 0) {
+    return -1;
+  }
+  const eventIndex = Math.floor(relativeY / devtoolsTableRowHeight);
+  if (eventIndex < 0 || eventIndex >= currentEvents.length) {
+    return -1;
+  }
+  return eventIndex;
+};
+
+const MenuChatDebugTableBody = 2190;
+const handleTableBodyContextMenu = async (state, eventX, eventY) => {
+  const eventIndex = getTableBodyEventIndex(state, eventX, eventY);
+  await showContextMenu2(state.uid, MenuChatDebugTableBody, eventX, eventY, {
+    eventIndex,
+    menuId: MenuChatDebugTableBody
+  });
+  return state;
 };
-const handleEventRowClick = async (state, value, button) => {
-  if (!isPrimaryButton(button)) {
-    return state;
+
+const getMenuIds = () => {
+  return [MenuChatDebugTableBody, 556, 557];
+};
+
+const getErrorMessage = error => {
+  if (error instanceof Error) {
+    return error.message;
   }
-  const selectedEventIndex = parseSelectedEventIndex$1(value);
-  if (selectedEventIndex === null) {
-    return state;
+  if (typeof error === 'string') {
+    return error;
   }
-  return selectEventAtIndex(state, selectedEventIndex, handleEventRowClickDependencies);
+  if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
+    return error.message;
+  }
+  return undefined;
+};
+const getFailedToLoadMessage = (sessionId, error) => {
+  const errorMessage = getErrorMessage(error);
+  if (errorMessage) {
+    return `Failed to load chat debug session "${sessionId}": ${errorMessage}`;
+  }
+  return `Failed to load chat debug session "${sessionId}". Please try again.`;
 };
 
-const handleHeaderContextMenu = state => {
-  return state;
+const ParseChatDebugUriErrorCode = {
+  InvalidSessionId: 'invalid-session-id',
+  InvalidUriEncoding: 'invalid-uri-encoding',
+  InvalidUriFormat: 'invalid-uri-format',
+  MissingUri: 'missing-uri'
 };
 
-const getBoolean = value => {
-  return value === true || value === 'true' || value === 'on' || value === '1';
+const getInvalidUriMessage = (uri, code) => {
+  if (code === ParseChatDebugUriErrorCode.MissingUri) {
+    return 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
+  }
+  return `Unable to load debug session: invalid URI "${uri}". Expected format: chat-debug://<sessionId>.`;
 };
 
-const Filter = 'filter';
-const EventCategoryFilter = 'eventCategoryFilter';
-const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
-const ShowInputEvents = 'showInputEvents';
-const ShowResponsePartEvents = 'showResponsePartEvents';
-const UseDevtoolsLayout = 'useDevtoolsLayout';
-const SelectedEventIndex = 'selectedEventIndex';
-const CloseDetails = 'closeDetails';
-const DetailTab = 'detailTab';
-const TimelineStartSeconds = 'timelineStartSeconds';
-const TimelineEndSeconds = 'timelineEndSeconds';
-const TimelineRangePreset = 'timelineRangePreset';
+const getSessionNotFoundMessage = sessionId => {
+  return `No chat session found for sessionId "${sessionId}".`;
+};
 
-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 listChatViewEventsDependencies = {
+  listChatViewEventsFromWorker: listChatViewEvents$1
 };
-const parseTimelineRangePreset = value => {
-  if (!value) {
+const listChatViewEvents = async (sessionId, _databaseName, _dataBaseVersion, _eventStoreName, _sessionIdIndexName) => {
+  try {
+    return await listChatViewEventsDependencies.listChatViewEventsFromWorker(sessionId);
+  } catch (error) {
     return {
-      timelineEndSeconds: '',
-      timelineStartSeconds: ''
+      error,
+      type: 'error'
     };
   }
-  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
-  return {
-    timelineEndSeconds,
-    timelineStartSeconds
-  };
 };
-const getEventIndexByStableId = (events, event) => {
-  const stableEventId = getStableEventId(event);
-  return events.findIndex(candidate => getStableEventId(candidate) === stableEventId);
+
+const loadSelectedEventDependencies = {
+  loadSelectedEventFromWorker: loadSelectedEvent$1
 };
-const getSelectedEventIndex = state => {
-  const {
-    selectedEventIndex
-  } = state;
-  if (selectedEventIndex === null) {
-    return null;
-  }
-  const filteredEvents = getCurrentEvents$1(state);
-  const selectedEvent = filteredEvents[selectedEventIndex];
-  if (!selectedEvent) {
-    return null;
-  }
-  const newIndex = getEventIndexByStableId(filteredEvents, selectedEvent);
-  if (newIndex === -1) {
-    return null;
-  }
-  return newIndex;
+const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreName, sessionId, _sessionIdIndexName, eventId, type) => {
+  return loadSelectedEventDependencies.loadSelectedEventFromWorker(sessionId, eventId, type);
 };
-const getPreservedSelectedEventIndex = (oldState, newState) => {
-  const {
-    selectedEventIndex
-  } = oldState;
-  if (selectedEventIndex === null) {
-    return null;
-  }
-  const oldFilteredEvents = getCurrentEvents$1(oldState);
-  const selectedEvent = oldFilteredEvents[selectedEventIndex];
-  if (!selectedEvent) {
-    return null;
+
+const chatDebugUriPattern = /^chat-debug:\/\/([^/?#]+)$/;
+const invalidSessionIdPattern = /[/?#]/;
+const parseChatDebugUri = uri => {
+  if (!uri) {
+    return {
+      code: ParseChatDebugUriErrorCode.MissingUri,
+      message: 'Missing URI',
+      type: 'error'
+    };
   }
-  const newFilteredEvents = getCurrentEvents$1(newState);
-  const newIndex = getEventIndexByStableId(newFilteredEvents, selectedEvent);
-  if (newIndex === -1) {
-    return null;
+  const match = uri.match(chatDebugUriPattern);
+  if (!match) {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriFormat,
+      message: 'Invalid URI format',
+      type: 'error'
+    };
   }
-  return newIndex;
-};
-const parseSelectedEventIndex = value => {
-  const parsed = Number.parseInt(value, 10);
-  if (Number.isNaN(parsed) || parsed < 0) {
-    return null;
-  }
-  return parsed;
-};
-const withPreservedSelection = (state, nextState) => {
-  const selectedEventIndex = getPreservedSelectedEventIndex(state, nextState);
-  return {
-    ...nextState,
-    selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
-    selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
-    selectedEventIndex
-  };
-};
-const handleInput = (state, name, value, checked) => {
-  if (name === Filter) {
-    const nextState = {
-      ...state,
-      filterValue: value
-    };
-    return withPreservedSelection(state, nextState);
-  }
-  if (name === EventCategoryFilter) {
-    const nextState = {
-      ...state,
-      eventCategoryFilter: value || All
-    };
-    return withPreservedSelection(state, nextState);
-  }
-  if (name === ShowEventStreamFinishedEvents) {
-    const nextState = {
-      ...state,
-      showEventStreamFinishedEvents: getBoolean(checked)
-    };
-    return withPreservedSelection(state, nextState);
-  }
-  if (name === ShowInputEvents) {
-    const nextState = {
-      ...state,
-      showInputEvents: getBoolean(checked)
+  const encodedSessionId = match[1];
+  let sessionId;
+  try {
+    sessionId = decodeURIComponent(encodedSessionId);
+  } catch {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
+      message: 'Invalid URI encoding',
+      type: 'error'
     };
-    return withPreservedSelection(state, nextState);
   }
-  if (name === ShowResponsePartEvents) {
-    const nextState = {
-      ...state,
-      showResponsePartEvents: getBoolean(checked)
+  if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidSessionId,
+      message: 'Invalid session id',
+      type: 'error'
     };
-    return withPreservedSelection(state, nextState);
   }
-  if (name === UseDevtoolsLayout) {
-    const useDevtoolsLayout = getBoolean(checked);
-    const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex(state) : null;
+  return {
+    sessionId,
+    type: 'success'
+  };
+};
+
+const loadEventsDependencies = {
+  listChatViewEvents: listChatViewEvents,
+  loadSelectedEvent: loadSelectedEvent
+};
+const getCurrentEvents$2 = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const restoreSelectedEvent = async state => {
+  if (state.selectedEventId === null) {
     return {
       ...state,
-      selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
-      selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
-      selectedEventIndex,
-      useDevtoolsLayout
+      selectedEvent: null,
+      selectedEventIndex: null
     };
   }
-  if (name === SelectedEventIndex) {
-    const selectedEventIndex = parseSelectedEventIndex(value);
+  const currentEvents = getCurrentEvents$2(state);
+  const selectedEventIndex = currentEvents.findIndex(event => event.eventId === state.selectedEventId);
+  if (selectedEventIndex === -1) {
     return {
       ...state,
-      selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
-      selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
-      selectedEventIndex
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null
     };
   }
-  if (name === TimelineStartSeconds) {
-    const nextState = {
+  const selectedEvent = currentEvents[selectedEventIndex];
+  if (!selectedEvent || typeof selectedEvent.eventId !== 'number') {
+    return {
       ...state,
-      timelineStartSeconds: value
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null
     };
-    return withPreservedSelection(state, nextState);
   }
-  if (name === TimelineEndSeconds) {
-    const nextState = {
-      ...state,
-      timelineEndSeconds: value
-    };
-    return withPreservedSelection(state, nextState);
+  const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  return {
+    ...state,
+    selectedEvent: selectedEventDetails,
+    selectedEventId: selectedEvent.eventId,
+    selectedEventIndex
+  };
+};
+const getStateWithInvalidUri = state => {
+  const parsed = parseChatDebugUri(state.uri);
+  if (parsed.type !== 'error') {
+    return state;
   }
-  if (name === TimelineRangePreset) {
-    const nextState = {
-      ...state,
-      ...parseTimelineRangePreset(value)
-    };
-    return withPreservedSelection(state, nextState);
+  return {
+    ...state,
+    errorMessage: getInvalidUriMessage(state.uri, parsed.code),
+    events: [],
+    initial: false,
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null,
+    sessionId: ''
+  };
+};
+const getSessionIdFromUri = state => {
+  const parsed = parseChatDebugUri(state.uri);
+  if (parsed.type === 'error') {
+    return undefined;
   }
-  if (name === CloseDetails) {
+  return parsed.sessionId;
+};
+const loadEventsForSessionId = async (state, sessionId) => {
+  const {
+    databaseName,
+    dataBaseVersion,
+    eventStoreName,
+    sessionIdIndexName
+  } = state;
+  const result = await loadEventsDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
+  if (result.type === 'error') {
     return {
       ...state,
+      errorMessage: getFailedToLoadMessage(sessionId, result.error),
+      events: [],
+      initial: false,
       selectedEvent: null,
       selectedEventId: null,
-      selectedEventIndex: null
+      selectedEventIndex: null,
+      sessionId
     };
   }
-  if (name === DetailTab) {
-    if (!isDetailTab(value)) {
-      return state;
-    }
+  const {
+    events
+  } = result;
+  if (events.length === 0) {
     return {
       ...state,
-      selectedDetailTab: value
+      errorMessage: getSessionNotFoundMessage(sessionId),
+      events: [],
+      initial: false,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null,
+      sessionId
     };
   }
-  return state;
+  const nextState = {
+    ...state,
+    errorMessage: '',
+    events,
+    initial: false,
+    sessionId
+  };
+  return restoreSelectedEvent(nextState);
+};
+const loadEventsFromUri = async state => {
+  const sessionId = getSessionIdFromUri(state);
+  if (!sessionId) {
+    return getStateWithInvalidUri(state);
+  }
+  return loadEventsForSessionId(state, sessionId);
+};
+const refreshEvents = async state => {
+  const sessionId = state.sessionId || getSessionIdFromUri(state);
+  if (!sessionId) {
+    return getStateWithInvalidUri(state);
+  }
+  return loadEventsForSessionId(state, sessionId);
 };
 
-const handleSashPointerDown = (state, eventX, eventY) => {
-  return state;
+const refresh = async state => {
+  return refreshEvents(state);
 };
 
-const handleSashPointerMove = (state, eventX, eventY) => {
+const handleClickRefreshDependencies = {
+  refresh: refresh
+};
+const handleClickRefresh = async state => {
+  return handleClickRefreshDependencies.refresh(state);
+};
+
+const handleCloseDetails = state => {
   return {
     ...state,
-    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null
   };
 };
 
-const handleSashPointerUp = (state, eventX, eventY) => {
-  return state;
-};
-
-const handleTableBodyContextMenu = state => {
+const handleDetailsContextMenu = state => {
   return state;
 };
 
-const clearTimelineSelectionState = state => {
+const handleDetailTab = (state, value) => {
+  if (!isDetailTab(value)) {
+    return state;
+  }
   return {
     ...state,
-    timelineSelectionActive: false,
-    timelineSelectionAnchorSeconds: '',
-    timelineSelectionFocusSeconds: ''
+    selectedDetailTab: value
   };
 };
 
-const handleTimelineDoubleClick = state => {
-  const nextState = handleInput(state, TimelineRangePreset, '', false);
-  return clearTimelineSelectionState(nextState);
+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 getTimelineEvents = state => {
+const getEventIndexByStableId$1 = (events, event) => {
+  return events.findIndex(candidate => candidate.eventId === event.eventId);
+};
+const getSelectedEventIndex$1 = state => {
   const {
-    eventCategoryFilter,
-    events,
-    filterValue,
-    showEventStreamFinishedEvents,
-    showInputEvents,
-    showResponsePartEvents
+    selectedEventIndex
   } = state;
-  return getFilteredEvents(events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const filteredEvents = getCurrentEvents$1(state);
+  const selectedEvent = filteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newIndex = getEventIndexByStableId$1(filteredEvents, selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
 };
-
-const getTimelineLeft = state => {
-  return state.x + viewPadding + timelineHorizontalPadding;
-};
-const getTimelineWidth = state => {
-  return Math.max(0, getMainWidth(state.width) - timelineHorizontalPadding * 2);
-};
-
-const trailingZeroFractionRegex = /\.0+$/;
-const trailingFractionZeroRegex = /(\.\d*?)0+$/;
-const formatTimelinePresetValue = value => {
-  return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
-};
-
-const getTimelineSecondsFromClientX = (events, eventX, timelineLeft, timelineWidth) => {
-  if (timelineWidth <= 0) {
-    return undefined;
+const getPreservedSelectedEventIndex$1 = (oldState, newState) => {
+  const {
+    selectedEventIndex
+  } = oldState;
+  if (selectedEventIndex === null) {
+    return null;
   }
-  const durationSeconds = getTimelineDurationSeconds(events);
-  const relativeX = Math.min(Math.max(eventX - timelineLeft, 0), timelineWidth);
-  const ratio = relativeX / timelineWidth;
-  return formatTimelinePresetValue(durationSeconds * ratio);
-};
-
-const handleTimelinePointerDown = (state, eventX) => {
-  const timelineEvents = getTimelineEvents(state);
-  const timelineLeft = getTimelineLeft(state);
-  const timelineWidth = getTimelineWidth(state);
-  const clientX = state.x + eventX;
-  const seconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
-  if (seconds === undefined) {
-    return state;
+  const oldFilteredEvents = getCurrentEvents$1(oldState);
+  const selectedEvent = oldFilteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newFilteredEvents = getCurrentEvents$1(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 {
-    ...state,
-    timelineSelectionActive: true,
-    timelineSelectionAnchorSeconds: seconds,
-    timelineSelectionFocusSeconds: seconds
+    ...nextState,
+    selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
+    selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
+    selectedEventIndex
   };
 };
 
-const handleTimelinePointerMove = (state, eventX) => {
-  if (!state.timelineSelectionActive) {
-    return state;
-  }
-  const timelineEvents = getTimelineEvents(state);
-  const timelineLeft = getTimelineLeft(state);
-  const timelineWidth = getTimelineWidth(state);
-  const clientX = state.x + eventX;
-  const seconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
-  if (seconds === undefined) {
-    return state;
-  }
-  return {
+const handleEventCategoryFilter = (state, value) => {
+  const nextState = {
     ...state,
-    timelineSelectionFocusSeconds: seconds
+    eventCategoryFilter: value || All
   };
+  return withPreservedSelection$1(state, nextState);
 };
 
-const handleTimelinePointerUp = (state, eventX) => {
-  if (!state.timelineSelectionActive) {
-    return state;
-  }
-  const timelineEvents = getTimelineEvents(state);
-  const timelineLeft = getTimelineLeft(state);
-  const timelineWidth = getTimelineWidth(state);
-  const clientX = state.x + eventX;
-  const focusSeconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
-  if (focusSeconds === undefined) {
-    return clearTimelineSelectionState(state);
-  }
-  const anchor = Number.parseFloat(state.timelineSelectionAnchorSeconds);
-  const focus = Number.parseFloat(focusSeconds);
-  const startSeconds = formatTimelinePresetValue(Math.min(anchor, focus));
-  const endSeconds = formatTimelinePresetValue(Math.max(anchor, focus));
-  const nextState = handleInput(state, TimelineRangePreset, `${startSeconds}:${endSeconds}`, false);
-  return clearTimelineSelectionState(nextState);
-};
-
-const getFailedToLoadMessage = sessionId => {
-  return `Failed to load chat debug session "${sessionId}". Please try again.`;
-};
-
-const getIndexedDbNotSupportedMessage = () => {
-  return 'Unable to load chat debug session: IndexedDB is not supported in this environment.';
+const handleEventRowClickDependencies = {
+  loadSelectedEvent: loadSelectedEvent
 };
-
-const ParseChatDebugUriErrorCode = {
-  InvalidSessionId: 'invalid-session-id',
-  InvalidUriEncoding: 'invalid-uri-encoding',
-  InvalidUriFormat: 'invalid-uri-format',
-  MissingUri: 'missing-uri'
+const isPrimaryButton = button => {
+  return button === 0;
 };
-
-const getInvalidUriMessage = (uri, code) => {
-  if (code === ParseChatDebugUriErrorCode.MissingUri) {
-    return 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
+const parseSelectedEventIndex$1 = value => {
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed) || parsed < 0) {
+    return null;
   }
-  return `Unable to load debug session: invalid URI "${uri}". Expected format: chat-debug://<sessionId>.`;
-};
-
-const getSessionNotFoundMessage = sessionId => {
-  return `No chat session found for sessionId "${sessionId}".`;
-};
-
-const filterEventsBySessionId = (events, sessionId) => {
-  return events.filter(event => event.sessionId === sessionId);
-};
-
-// cspell:ignore IDBP
-
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-const getAllEvents = async store => {
-  const all = await store.getAll();
-  return all;
-};
-
-const getEndTime = event => {
-  return event.ended ?? event.endTime ?? event.timestamp;
-};
-
-const getStartTime = event => {
-  return event.started ?? event.startTime ?? event.timestamp;
+  return parsed;
 };
-
-const getDuration = event => {
-  const explicitDuration = event.durationMs ?? event.duration;
-  if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
-    return explicitDuration;
+const handleEventRowClick = async (state, value, button = 0) => {
+  if (!isPrimaryButton(button)) {
+    return state;
   }
-  const start = toTimeNumber(getStartTime(event));
-  const end = toTimeNumber(getEndTime(event));
-  if (start === undefined || end === undefined || !Number.isFinite(start) || !Number.isFinite(end)) {
-    return 0;
+  const selectedEventIndex = parseSelectedEventIndex$1(value);
+  if (selectedEventIndex === null) {
+    return state;
   }
-  return Math.max(0, end - start);
+  return selectEventAtIndex(state, selectedEventIndex, handleEventRowClickDependencies);
 };
 
-const isTimeValue = value => {
-  return typeof value === 'number' || typeof value === 'string';
+const handleHeaderContextMenu = state => {
+  return state;
 };
 
-const getLightweightEvent = (event, fallbackEventId) => {
-  const startTime = getStartTime(event);
-  const endTime = getEndTime(event);
-  return {
-    duration: getDuration(event),
-    ...(isTimeValue(endTime) ? {
-      endTime
-    } : {}),
-    eventId: typeof event.eventId === 'number' ? event.eventId : fallbackEventId,
-    ...(isTimeValue(startTime) ? {
-      startTime
-    } : {}),
-    type: event.type
-  };
+const getBoolean = value => {
+  return value === true || value === 'true' || value === 'on' || value === '1';
 };
 
-// cspell:ignore IDBP
+const Filter = 'filter';
+const EventCategoryFilter = 'eventCategoryFilter';
+const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
+const ShowInputEvents = 'showInputEvents';
+const ShowResponsePartEvents = 'showResponsePartEvents';
+const UseDevtoolsLayout = 'useDevtoolsLayout';
+const SelectedEventIndex = 'selectedEventIndex';
+const CloseDetails = 'closeDetails';
+const DetailTab = 'detailTab';
+const TimelineStartSeconds = 'timelineStartSeconds';
+const TimelineEndSeconds = 'timelineEndSeconds';
+const TimelineRangePreset = 'timelineRangePreset';
+const Refresh = 'refresh';
 
-const toLightweightEvents = events => {
-  const eventsWithIds = events.map((event, index) => {
+const getCurrentEvents = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const parseTimelineRangePreset$1 = value => {
+  if (!value) {
     return {
-      ...event,
-      eventId: index + 1
+      timelineEndSeconds: '',
+      timelineStartSeconds: ''
     };
-  });
-  return collapseToolExecutionEvents(eventsWithIds).map((event, index) => getLightweightEvent(event, index + 1));
-};
-const getEventsBySessionId = async (store, sessionId, sessionIdIndexName) => {
-  if (store.indexNames.contains(sessionIdIndexName)) {
-    const index = store.index(sessionIdIndexName);
-    const events = await index.getAll(sessionId);
-    return toLightweightEvents(filterEventsBySessionId(events, sessionId));
   }
-  const all = await getAllEvents(store);
-  return toLightweightEvents(filterEventsBySessionId(all, sessionId));
+  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
+  return {
+    timelineEndSeconds,
+    timelineStartSeconds
+  };
 };
-
-let indexedDbSupportOverride;
-const getIndexedDbSupportOverride = () => {
-  return indexedDbSupportOverride;
+const getEventIndexByStableId = (events, event) => {
+  return events.findIndex(candidate => candidate.eventId === event.eventId);
 };
-const setIndexedDbSupportOverride = supported => {
-  indexedDbSupportOverride = supported;
+const getSelectedEventIndex = state => {
+  const {
+    selectedEventIndex
+  } = state;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const filteredEvents = getCurrentEvents(state);
+  const selectedEvent = filteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newIndex = getEventIndexByStableId(filteredEvents, selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
 };
-
-const isIndexedDbSupported = indexedDbSupportOverride => {
-  if (typeof indexedDbSupportOverride === 'boolean') {
-    return indexedDbSupportOverride;
+const getPreservedSelectedEventIndex = (oldState, newState) => {
+  const {
+    selectedEventIndex
+  } = oldState;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const oldFilteredEvents = getCurrentEvents(oldState);
+  const selectedEvent = oldFilteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
   }
-  const override = getIndexedDbSupportOverride();
-  if (typeof override === 'boolean') {
-    return override;
+  const newFilteredEvents = getCurrentEvents(newState);
+  const newIndex = getEventIndexByStableId(newFilteredEvents, selectedEvent);
+  if (newIndex === -1) {
+    return null;
   }
-  return globalThis.indexedDB !== undefined;
+  return newIndex;
 };
-
-const listChatViewEventsDependencies = {
-  getEventsBySessionId: getEventsBySessionId,
-  openDatabase: openDatabase
+const parseSelectedEventIndex = value => {
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed) || parsed < 0) {
+    return null;
+  }
+  return parsed;
 };
-const listChatViewEvents = async (sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName, indexedDbSupportOverride) => {
-  if (!isIndexedDbSupported(indexedDbSupportOverride)) {
-    return {
-      type: 'not-supported'
+const withPreservedSelection = (state, nextState) => {
+  const selectedEventIndex = getPreservedSelectedEventIndex(state, nextState);
+  return {
+    ...nextState,
+    selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
+    selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
+    selectedEventIndex
+  };
+};
+const handleInput = (state, name, value, checked) => {
+  if (name === Filter) {
+    const nextState = {
+      ...state,
+      filterValue: value
     };
+    return withPreservedSelection(state, nextState);
   }
-  try {
-    const database = await listChatViewEventsDependencies.openDatabase(databaseName, dataBaseVersion);
-    try {
-      if (!database.objectStoreNames.contains(eventStoreName)) {
-        return {
-          events: [],
-          type: 'success'
-        };
-      }
-      const transaction = database.transaction(eventStoreName, 'readonly');
-      const store = transaction.objectStore(eventStoreName);
-      if (!sessionId) {
-        return {
-          events: [],
-          type: 'success'
-        };
-      }
-      const events = await listChatViewEventsDependencies.getEventsBySessionId(store, sessionId, sessionIdIndexName);
-      return {
-        events,
-        type: 'success'
-      };
-    } finally {
-      database.close();
-    }
-  } catch (error) {
-    return {
-      error,
-      type: 'error'
+  if (name === EventCategoryFilter) {
+    const nextState = {
+      ...state,
+      eventCategoryFilter: value || All
     };
+    return withPreservedSelection(state, nextState);
   }
-};
-
-const chatDebugUriPattern = /^chat-debug:\/\/([^/?#]+)$/;
-const invalidSessionIdPattern = /[/?#]/;
-const parseChatDebugUri = uri => {
-  if (!uri) {
-    return {
-      code: ParseChatDebugUriErrorCode.MissingUri,
-      message: 'Missing URI',
-      type: 'error'
+  if (name === ShowEventStreamFinishedEvents) {
+    const nextState = {
+      ...state,
+      showEventStreamFinishedEvents: getBoolean(checked)
     };
+    return withPreservedSelection(state, nextState);
   }
-  const match = uri.match(chatDebugUriPattern);
-  if (!match) {
-    return {
-      code: ParseChatDebugUriErrorCode.InvalidUriFormat,
-      message: 'Invalid URI format',
-      type: 'error'
+  if (name === ShowInputEvents) {
+    const nextState = {
+      ...state,
+      showInputEvents: getBoolean(checked)
     };
+    return withPreservedSelection(state, nextState);
   }
-  const encodedSessionId = match[1];
-  let sessionId;
-  try {
-    sessionId = decodeURIComponent(encodedSessionId);
-  } catch {
-    return {
-      code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
-      message: 'Invalid URI encoding',
-      type: 'error'
+  if (name === ShowResponsePartEvents) {
+    const nextState = {
+      ...state,
+      showResponsePartEvents: getBoolean(checked)
     };
+    return withPreservedSelection(state, nextState);
   }
-  if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
+  if (name === UseDevtoolsLayout) {
+    const useDevtoolsLayout = getBoolean(checked);
+    const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex(state) : null;
     return {
-      code: ParseChatDebugUriErrorCode.InvalidSessionId,
-      message: 'Invalid session id',
-      type: 'error'
+      ...state,
+      selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
+      selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
+      selectedEventIndex,
+      useDevtoolsLayout
     };
   }
-  return {
-    sessionId,
-    type: 'success'
-  };
-};
-
-const loadEventsDependencies = {
-  listChatViewEvents: listChatViewEvents,
-  loadSelectedEvent: loadSelectedEvent
-};
-const getCurrentEvents = state => {
-  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
-  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
-};
-const restoreSelectedEvent = async state => {
-  if (state.selectedEventId === null) {
+  if (name === SelectedEventIndex) {
+    const selectedEventIndex = parseSelectedEventIndex(value);
     return {
       ...state,
-      selectedEvent: null,
-      selectedEventIndex: null
+      selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
+      selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
+      selectedEventIndex
     };
   }
-  const currentEvents = getCurrentEvents(state);
-  const selectedEventIndex = currentEvents.findIndex(event => event.eventId === state.selectedEventId);
-  if (selectedEventIndex === -1) {
+  if (name === TimelineStartSeconds) {
+    const nextState = {
+      ...state,
+      timelineStartSeconds: value
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === TimelineEndSeconds) {
+    const nextState = {
+      ...state,
+      timelineEndSeconds: value
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === TimelineRangePreset) {
+    const nextState = {
+      ...state,
+      ...parseTimelineRangePreset$1(value)
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === CloseDetails) {
     return {
       ...state,
       selectedEvent: null,
@@ -2451,865 +2421,282 @@ const restoreSelectedEvent = async state => {
       selectedEventIndex: null
     };
   }
-  const selectedEvent = currentEvents[selectedEventIndex];
-  if (!selectedEvent || typeof selectedEvent.eventId !== 'number') {
+  if (name === DetailTab) {
+    if (!isDetailTab(value)) {
+      return state;
+    }
     return {
       ...state,
-      selectedEvent: null,
-      selectedEventId: null,
-      selectedEventIndex: null
+      selectedDetailTab: value
     };
   }
-  const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  return state;
+};
+
+const handleSashPointerDown = (state, eventX, eventY) => {
+  return state;
+};
+
+const handleSashPointerMove = (state, eventX, eventY) => {
   return {
     ...state,
-    selectedEvent: selectedEventDetails,
-    selectedEventId: selectedEvent.eventId,
-    selectedEventIndex
+    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
   };
 };
-const getStateWithInvalidUri = state => {
-  const parsed = parseChatDebugUri(state.uri);
-  if (parsed.type !== 'error') {
-    return state;
-  }
+
+const handleSashPointerUp = (state, eventX, eventY) => {
+  return state;
+};
+
+const clearTimelineSelectionState = state => {
   return {
     ...state,
-    errorMessage: getInvalidUriMessage(state.uri, parsed.code),
-    events: [],
-    initial: false,
-    selectedEvent: null,
-    selectedEventId: null,
-    selectedEventIndex: null,
-    sessionId: ''
+    timelineSelectionActive: false,
+    timelineSelectionAnchorSeconds: '',
+    timelineSelectionFocusSeconds: ''
   };
 };
-const getSessionIdFromUri = state => {
-  const parsed = parseChatDebugUri(state.uri);
-  if (parsed.type === 'error') {
-    return undefined;
-  }
-  return parsed.sessionId;
-};
-const loadEventsForSessionId = async (state, sessionId) => {
-  const {
-    databaseName,
-    dataBaseVersion,
-    eventStoreName,
-    indexedDbSupportOverride,
-    sessionIdIndexName
-  } = state;
-  const result = await loadEventsDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName, indexedDbSupportOverride);
-  if (result.type === 'not-supported') {
-    return {
-      ...state,
-      errorMessage: getIndexedDbNotSupportedMessage(),
-      events: [],
-      initial: false,
-      selectedEvent: null,
-      selectedEventId: null,
-      selectedEventIndex: null,
-      sessionId
-    };
-  }
-  if (result.type === 'error') {
-    return {
-      ...state,
-      errorMessage: getFailedToLoadMessage(sessionId),
-      events: [],
-      initial: false,
-      selectedEvent: null,
-      selectedEventId: null,
-      selectedEventIndex: null,
-      sessionId
-    };
-  }
-  const {
-    events
-  } = result;
-  if (events.length === 0) {
+
+const parseTimelineRangePreset = value => {
+  if (!value) {
     return {
-      ...state,
-      errorMessage: getSessionNotFoundMessage(sessionId),
-      events: [],
-      initial: false,
-      selectedEvent: null,
-      selectedEventId: null,
-      selectedEventIndex: null,
-      sessionId
+      timelineEndSeconds: '',
+      timelineStartSeconds: ''
     };
   }
+  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
+  return {
+    timelineEndSeconds,
+    timelineStartSeconds
+  };
+};
+const handleTimelineStartSeconds = (state, value) => {
   const nextState = {
     ...state,
-    errorMessage: '',
-    events,
-    initial: false,
-    sessionId
+    timelineStartSeconds: value
   };
-  return restoreSelectedEvent(nextState);
+  return withPreservedSelection$1(state, nextState);
 };
-const loadEventsFromUri = async state => {
-  const sessionId = getSessionIdFromUri(state);
-  if (!sessionId) {
-    return getStateWithInvalidUri(state);
-  }
-  return loadEventsForSessionId(state, sessionId);
+const handleTimelineEndSeconds = (state, value) => {
+  const nextState = {
+    ...state,
+    timelineEndSeconds: value
+  };
+  return withPreservedSelection$1(state, nextState);
 };
-const refreshEvents = async state => {
-  const sessionId = state.sessionId || getSessionIdFromUri(state);
-  if (!sessionId) {
-    return getStateWithInvalidUri(state);
-  }
-  return loadEventsForSessionId(state, sessionId);
+const handleTimelineRangePreset = (state, value) => {
+  const nextState = {
+    ...state,
+    ...parseTimelineRangePreset(value)
+  };
+  return withPreservedSelection$1(state, nextState);
 };
 
-const loadContent = async state => {
-  return loadEventsFromUri(state);
+const handleTimelineDoubleClick = state => {
+  const nextState = handleTimelineRangePreset(state, '');
+  return clearTimelineSelectionState(nextState);
 };
 
-const refresh = async state => {
-  return refreshEvents(state);
+const getTimelineEvents = state => {
+  const {
+    eventCategoryFilter,
+    events,
+    filterValue,
+    showEventStreamFinishedEvents,
+    showInputEvents,
+    showResponsePartEvents
+  } = state;
+  return getFilteredEvents(events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
 };
 
-const ClientX = 'event.clientX';
-const ClientY = 'event.clientY';
-const TargetChecked = 'event.target.checked';
-const TargetName = 'event.target.name';
-const TargetValue = 'event.target.value';
-
-const SetCss = 'Viewlet.setCss';
-const SetDom2 = 'Viewlet.setDom2';
-const SetPatches = 'Viewlet.setPatches';
-
-const getCss = state => {
-  const tableWidth = clampTableWidth(state.width, state.tableWidth);
-  const detailsWidth = getDetailsWidth(state.width, state.tableWidth);
-  return `
-.ChatDebugView {
-  --ChatDebugViewDetailsWidth: ${detailsWidth}px;
-  --ChatDebugViewSashWidth: ${sashWidth}px;
-  --ChatDebugViewTableWidth: ${tableWidth}px;
-  padding: ${viewPadding}px;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  box-sizing: border-box;
-  gap: 8px;
-  contain: strict;
-}
-
-.ChatDebugView--devtools {
-  gap: 4px;
-}
-
-.ChatDebugViewTop {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-  contain: content;
-}
-
-.ChatDebugViewTop--devtools {
-  align-items: stretch;
-}
-
-.ChatDebugViewFilterInput {
-  flex: 1;
-  min-width: 0;
-  max-width: 500px;
-  contain: content;
-}
-
-.ChatDebugViewFilterInput--devtools {
-  flex: 0 1 80px;
-  width: 100%;
-  max-width: 80px;
-}
-
-.ChatDebugViewQuickFilterPill {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 22px;
-  padding: 0 10px;
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
-  border-radius: 999px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition:
-    background 120ms ease-out,
-    border-color 120ms ease-out,
-    color 120ms ease-out,
-    transform 120ms ease-out;
-  contain: content;
-}
-
-.ChatDebugViewQuickFilterPill:not(.ChatDebugViewQuickFilterPillSelected):hover {
-  border-color: var(--vscode-focusBorder, #007fd4);
-  background: color-mix(in srgb, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.16)) 82%, transparent 18%);
-  color: var(--vscode-list-hoverForeground, inherit);
-  transform: translateY(-1px);
-}
-
-
-.ChatDebugViewQuickFilters {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: center;
-  min-height: 28px;
-  font-size: 12px;
-  line-height: 1;
-  contain: content;
-}
-
-.ChatDebugViewQuickFilterPillSelected {
-  border-color: var(--vscode-focusBorder, #007fd4);
-  background: var(--vscode-list-activeSelectionBackground, rgba(14, 99, 156, 0.35));
-  color: var(--vscode-list-activeSelectionForeground, inherit);
-}
-
-.ChatDebugViewQuickFilterInput {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  contain: content;
-}
-
-.ChatDebugViewEvents {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  min-width: 0;
-  min-height: 0;
-  scrollbar-width: thin;
-  scrollbar-color: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4)) transparent;
-  contain: strict;
-}
-
-.ChatDebugView--devtools .ChatDebugViewEvents {
-  border-radius: 6px;
-  margin-bottom: 0;
-  overflow: hidden;
-}
-
-.ChatDebugViewEventsFullWidth {
-  flex: 1 1 100%;
-}
-
-.ChatDebugViewDevtoolsMain {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  align-items: stretch;
-  gap: 0;
-  min-width: 0;
-  min-height: 0;
-  contain: strict;
-}
-
-.ChatDebugViewDevtoolsMain > .ChatDebugViewTimeline {
-  flex: 0 0 auto;
-}
-
-.ChatDebugViewDevtoolsSplit {
-  display: flex;
-  flex: 1;
-  align-items: stretch;
-  gap: 0;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  contain: strict;
-}
-
-.ChatDebugViewDevtoolsSplit > .ChatDebugViewEvents {
-  flex: 0 1 var(--ChatDebugViewTableWidth);
-  min-width: 0;
-}
-
-.ChatDebugViewDevtoolsSplit > .ChatDebugViewEvents.ChatDebugViewEventsFullWidth {
-  flex: 1 1 100%;
-}
-
-.ChatDebugViewDevtoolsSplit > .ChatDebugViewDetails {
-  border-left: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  flex: 1;
-}
-
-.ChatDebugViewSash {
-  flex: 0 0 var(--ChatDebugViewSashWidth);
-  position: relative;
-  cursor: col-resize;
-  display: flex;
-  justify-content: center;
-  min-height: 0;
-  contain: strict;
-}
-
-.ChatDebugViewSashLine {
-  width: 1px;
-  height: 100%;
-  background: var(--vscode-editorWidget-border, #454545);
-  pointer-events: none;
-  contain: strict;
-}
-
-.ChatDebugViewSash:hover .ChatDebugViewSashLine {
-  background: var(--vscode-focusBorder, #007fd4);
-}
-
-.ChatDebugViewTable {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1 1 auto;
-  contain: strict;
-}
-
-.ChatDebugViewTimeline {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 6px ${timelineHorizontalPadding}px 8px;
-  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
-  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 82%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.12)) 18%);
-  contain: content;
-}
-
-.ChatDebugViewTimelineTop {
-  display: flex;
-  align-items: center;
-  contain: content;
-}
-
-.ChatDebugViewTimelineSummary {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  line-height: 16px;
-  opacity: 0.8;
-  contain: content;
-}
-
-.ChatDebugViewTimelineControls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  contain: content;
-}
-
-.ChatDebugViewTimelineBuckets {
-  display: flex;
-  align-items: end;
-  gap: 3px;
-  flex: 1 1 auto;
-  min-height: 52px;
-  pointer-events: none;
-  contain: strict;
-}
-
-.ChatDebugViewTimelineInteractive {
-  display: flex;
-  position: relative;
-  min-height: 52px;
-  cursor: crosshair;
-  user-select: none;
-  contain: strict;
-}
-
-.ChatDebugViewTimelineSelectionOverlay {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  contain: strict;
-}
-
-.ChatDebugViewTimelineSelectionRange {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background: color-mix(in srgb, var(--vscode-charts-blue, #75beff) 20%, transparent 80%);
-  border-left: 1px solid color-mix(in srgb, var(--vscode-charts-blue, #75beff) 65%, transparent 35%);
-  border-right: 1px solid color-mix(in srgb, var(--vscode-charts-blue, #75beff) 65%, transparent 35%);
-  contain: strict;
-}
-
-.ChatDebugViewTimelineSelectionMarker {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  margin-left: -0.5px;
-  background: var(--vscode-focusBorder, #007fd4);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vscode-focusBorder, #007fd4) 24%, transparent 76%);
-  contain: strict;
-}
-
-.ChatDebugViewTimelineBucket {
-  --ChatDebugViewTimelineBucketBarBackground: color-mix(in srgb, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.16)) 74%, transparent 26%);
-  --ChatDebugViewTimelineBucketBarBorderColor: transparent;
-  display: flex;
-  align-items: stretch;
-  flex: 1 1 10px;
-  min-width: 10px;
-  min-height: 52px;
-  contain: strict;
-}
-
-.ChatDebugViewTimelineBucketSelected {
-  --ChatDebugViewTimelineBucketBarBackground: color-mix(in srgb, var(--vscode-charts-blue, #75beff) 72%, transparent 28%);
-  --ChatDebugViewTimelineBucketBarBorderColor: var(--vscode-focusBorder, #007fd4);
-}
-
-.ChatDebugViewTimelinePresetInput {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  contain: content;
-}
-
-.ChatDebugViewTimelineBucketBar {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  gap: 2px;
-  padding: 6px 1px 2px;
-  border: 1px solid transparent;
-  border-radius: 2px;
-  width: 100%;
-  background: var(--ChatDebugViewTimelineBucketBarBackground);
-  border-color: var(--ChatDebugViewTimelineBucketBarBorderColor);
-  contain: strict;
-}
-
-.ChatDebugViewTimelineBucketBarSelected {
-  background: color-mix(in srgb, var(--vscode-charts-blue, #75beff) 72%, transparent 28%);
-  border-color: var(--vscode-focusBorder, #007fd4);
-}
-
-.ChatDebugViewTimelineBucketUnit {
-  width: 100%;
-  height: 4px;
-  border-radius: 999px;
-  background: var(--vscode-charts-blue, #75beff);
-  contain: strict;
-}
-
-.ChatDebugViewTimelineBucketUnitEmpty {
-  opacity: 0.35;
-  background: var(--vscode-editorWidget-border, #454545);
-}
-
-.ChatDebugViewTableHeaderRow,
-.ChatDebugViewEventRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  contain: content;
-}
-
-.ChatDebugViewTableHeader {
-  padding: 3px 8px;
-  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
-  background: var(--vscode-editorWidget-background, transparent);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  contain: content;
-}
-
-.ChatDebugViewHeaderCell {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  opacity: 0.8;
-  contain: content;
-}
-
-.ChatDebugViewTableHeaderRow > .ChatDebugViewHeaderCell:nth-child(1) {
-  flex: 1 1 140px;
-  min-width: 0;
-}
-
-.ChatDebugViewTableHeaderRow > .ChatDebugViewHeaderCell:nth-child(2) {
-  flex: 0 0 90px;
-  justify-content: flex-end;
-}
-
-.ChatDebugViewTableHeaderRow > .ChatDebugViewHeaderCell:nth-child(3) {
-  flex: 0 0 96px;
-  justify-content: flex-end;
-}
-
-.ChatDebugViewTableBody {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  min-height: 0;
-  flex: 1 1 auto;
-  contain: strict;
-}
-
-.ChatDebugViewEventRowLabel {
-  display: block;
-  contain: content;
-}
-
-.ChatDebugViewEventRowLabelSelected .ChatDebugViewEventRow,
-.ChatDebugViewEventRowSelected {
-  background: var(--vscode-list-activeSelectionBackground, rgba(14, 99, 156, 0.35));
-  color: var(--vscode-list-activeSelectionForeground, inherit);
-}
+const getTimelineLeft = state => {
+  return state.x + viewPadding + timelineHorizontalPadding;
+};
+const getTimelineWidth = state => {
+  return Math.max(0, getMainWidth(state.width) - timelineHorizontalPadding * 2);
+};
 
-.ChatDebugViewEventRowInput {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  contain: content;
-}
+const trailingZeroFractionRegex = /\.0+$/;
+const trailingFractionZeroRegex = /(\.\d*?)0+$/;
+const formatTimelinePresetValue = value => {
+  return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
+};
 
-.ChatDebugViewEventRow {
-  padding: 2px 8px;
-  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 92%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.31)) 8%);
-  cursor: default;
-}
+const getTimelineSecondsFromClientX = (events, eventX, timelineLeft, timelineWidth) => {
+  if (timelineWidth <= 0) {
+    return undefined;
+  }
+  const durationSeconds = getTimelineDurationSeconds(events);
+  const relativeX = Math.min(Math.max(eventX - timelineLeft, 0), timelineWidth);
+  const ratio = relativeX / timelineWidth;
+  return formatTimelinePresetValue(durationSeconds * ratio);
+};
 
-.ChatDebugViewTableBody > .ChatDebugViewEventRow:nth-child(even) {
-  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 84%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.31)) 16%);
-}
+const handleTimelinePointerDown = (state, eventX) => {
+  const timelineEvents = getTimelineEvents(state);
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = state.x + eventX;
+  const seconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (seconds === undefined) {
+    return state;
+  }
+  return {
+    ...state,
+    timelineSelectionActive: true,
+    timelineSelectionAnchorSeconds: seconds,
+    timelineSelectionFocusSeconds: seconds
+  };
+};
 
-.ChatDebugViewEventRow:hover {
-  background: var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.31));
-  color: var(--vscode-list-hoverForeground, inherit);
-}
+const handleTimelinePointerMove = (state, eventX) => {
+  if (!state.timelineSelectionActive) {
+    return state;
+  }
+  const timelineEvents = getTimelineEvents(state);
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = state.x + eventX;
+  const seconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (seconds === undefined) {
+    return state;
+  }
+  return {
+    ...state,
+    timelineSelectionFocusSeconds: seconds
+  };
+};
 
-.ChatDebugViewCell {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  pointer-events: none;
-  contain: content;
-}
+const handleTimelinePointerUp = (state, eventX) => {
+  if (!state.timelineSelectionActive) {
+    return state;
+  }
+  const timelineEvents = getTimelineEvents(state);
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = state.x + eventX;
+  const focusSeconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (focusSeconds === undefined) {
+    return clearTimelineSelectionState(state);
+  }
+  const anchor = Number.parseFloat(state.timelineSelectionAnchorSeconds);
+  const focus = Number.parseFloat(focusSeconds);
+  const startSeconds = formatTimelinePresetValue(Math.min(anchor, focus));
+  const endSeconds = formatTimelinePresetValue(Math.max(anchor, focus));
+  const nextState = handleTimelineRangePreset(state, `${startSeconds}:${endSeconds}`);
+  return clearTimelineSelectionState(nextState);
+};
 
-.ChatDebugViewCellType {
-  flex: 1 1 140px;
-  min-width: 0;
-}
+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
+  };
+};
 
-.ChatDebugViewCellTime {
-  flex: 1 1 180px;
-  min-width: 0;
-}
+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);
+};
 
-.ChatDebugViewCellDuration {
-  flex: 0 0 90px;
-  justify-content: flex-end;
-  text-align: right;
-}
+const loadContent = async (state, savedState) => {
+  return loadEventsFromUri(restoreSavedState(state, savedState));
+};
 
-.ChatDebugViewCellStatus {
-  flex: 0 0 64px;
-  justify-content: flex-end;
-  text-align: right;
+const getCss = state => {
+  const tableWidth = clampTableWidth(state.width, state.tableWidth);
+  const detailsWidth = getDetailsWidth(state.width, state.tableWidth);
+  return `
+.ChatDebugView {
+  --ChatDebugViewDetailsWidth: ${detailsWidth}px;
+  --ChatDebugViewSashWidth: ${sashWidth}px;
+  --ChatDebugViewTableWidth: ${tableWidth}px;
+  padding: ${viewPadding}px;
 }
 
-.ChatDebugViewCellStatusError {
-  color: var(--vscode-errorForeground, #f14c4c);
-}
 
-.ChatDebugViewDetails {
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
-  border-radius: 6px;
-  overflow: hidden;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
+.ChatDebugViewDetails  {
   contain: strict;
 }
 
 .ChatDebugViewDetailsTop {
-  display: flex;
-  align-items: stretch;
-  justify-content: flex-start;
-  gap: 8px;
-  padding: 0 8px;
-  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
-  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 72%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.18)) 28%);
-  contain: content;
-}
-
-.ChatDebugViewDetailsClose {
-  width: 18px;
-  height: 18px;
-  appearance: none;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  position: relative;
-  color: var(--vscode-foreground, #cccccc);
-  background: transparent;
-  align-self: center;
-  flex: 0 0 auto;
+  height: 33px;
   contain: strict;
 }
 
-.ChatDebugViewDetailsClose:hover {
-  background: var(--vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.31));
-}
-
-.ChatDebugViewDetailsClose::before,
-.ChatDebugViewDetailsClose::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 10px;
-  height: 1px;
-  background: currentColor;
-}
-
-.ChatDebugViewDetailsClose::before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.ChatDebugViewDetailsClose::after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-.ChatDebugViewDetailsBody {
+.ChatDebugViewDetailsBottom {
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  padding: 0;
-  flex: 1 1 auto;
-  min-height: 0;
-  align-items: stretch;
   contain: strict;
+  flex:1
+
+}
+.ChatDebugViewEvent {
+  contain: content
 }
 
-.ChatDebugViewDetailsTabs {
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  gap: 2px;
-  min-width: 0;
-  padding: 0;
-  overflow-x: auto;
-  contain: content;
+.row {
+  flex-shrink: 0;
 }
 
-.ChatDebugViewDetailsTab {
-  display: flex;
+.ChatDebugViewRefreshButton {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 32px;
+  flex: none;
+  min-height: 28px;
   padding: 0 10px;
-  appearance: none;
-  background: transparent;
-  border: 0;
-  border-bottom: 2px solid transparent;
-  color: var(--vscode-descriptionForeground, var(--vscode-foreground, #cccccc));
-  cursor: pointer;
-  white-space: nowrap;
-  contain: content;
-}
-
-.ChatDebugViewDetailsTab:hover {
-  color: var(--vscode-foreground, #cccccc);
-}
-
-.ChatDebugViewDetailsTabSelected {
-  border-bottom-color: var(--vscode-focusBorder, #007fd4);
-  color: var(--vscode-focusBorder, #007fd4);
-}
-
-.ChatDebugViewDetailsPanel {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  padding: 8px;
-  flex: 1 1 auto;
-  min-height: 0;
-  align-items: flex-start;
-  contain: strict;
-}
-
-.ChatDebugViewEvents::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-.ChatDebugViewEvents::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.ChatDebugViewEvents::-webkit-scrollbar-thumb {
-  background: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4));
-  border-radius: 999px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-.ChatDebugViewEvents::-webkit-scrollbar-thumb:hover {
-  background: var(--vscode-scrollbarSlider-hoverBackground, rgba(100, 100, 100, 0.7));
-}
-
-.ChatDebugViewEvents::-webkit-scrollbar-thumb:active {
-  background: var(--vscode-scrollbarSlider-activeBackground, rgba(191, 191, 191, 0.4));
-}
-
-.ChatDebugViewEvent {
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  min-width: 100%;
-  margin: 0;
-  padding: 8px;
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 6px;
-  margin-bottom: 8px;
-  white-space: nowrap;
-  font-family: var(--vscode-editor-font-family, monospace);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
+  color: inherit;
+  font: inherit;
   font-size: 12px;
-  user-select: text;
-  contain: content;
-}
-
-.row {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  min-width: 100%;
-  width: max-content;
+  font-weight: 500;
+  line-height: 1;
   white-space: nowrap;
-  contain: strict;
-  height: 20px;
-}
-
-.ChatDebugViewEventLineNumber {
-  display: flex;
-  justify-content: flex-end;
-  flex: 0 0 3ch;
-  opacity: 0.6;
-  user-select: none;
-  contain: content;
-}
-
-.ChatDebugViewEventLineContent {
-  display: flex;
-  white-space: pre;
-  contain: content;
-}
-
-.ChatDebugViewDetailsPanel > .ChatDebugViewEvent {
-  border: 0;
-  border-radius: 0;
-  margin-bottom: 0;
-}
-
-.ChatDebugViewTiming {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  contain: strict;
-  flex: 1;
-}
-
-.ChatDebugViewTimingRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
-  contain: content;
-}
-
-.ChatDebugViewTimingRow:last-child {
-  border-bottom: 0;
-}
-
-.ChatDebugViewTimingLabel {
-  opacity: 0.8;
-  contain: content;
-}
-
-.ChatDebugViewTimingValue {
-  text-align: right;
-  font-family: var(--vscode-editor-font-family, monospace);
-  contain: content;
-}
-
-.ChatDebugViewEmpty {
-  display: flex;
-  align-items: center;
-  opacity: 0.8;
-  contain: content;
-}
-
-.ChatDebugViewError {
-  display: flex;
-  color: var(--vscode-errorForeground, #f14c4c);
-  white-space: normal;
-  contain: content;
-}
-
-.TokenText {
-  color: var(--vscode-editor-foreground, inherit);
-}
-
-.TokenKey {
-  color: var(--vscode-symbolIcon-propertyForeground, var(--vscode-editor-foreground, inherit));
-}
-
-.TokenString {
-  color: var(--vscode-debugTokenExpression-string, var(--vscode-charts-green, #89d185));
-}
-
-.TokenNumeric {
-  color: var(--vscode-debugTokenExpression-number, var(--vscode-charts-blue, #75beff));
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
 }
 
-.TokenBoolean {
-  color: var(--vscode-debugTokenExpression-boolean, var(--vscode-charts-yellow, #dcdcaa));
+.ChatDebugViewRefreshButton:hover {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
+  border-color: rgba(255, 255, 255, 0.24);
 }
 
-.ChatOrderedList{
-  display:flex;
-  flex-direction:column;
-  margin:0;
-  padding:0;
-  padding-left:10px;
-  contain: content;
+.ChatDebugViewRefreshButton:active {
+  transform: translateY(1px);
 }
 
-.ChatOrderedListItem{
-  display:flex;
-  margin:0;
-  padding:0;
-  contain: content;
+.ChatDebugViewRefreshButton:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.4);
+  outline-offset: 1px;
 }
 
-.ChatToolCalls{
-  display:flex;
-  flex-direction:column;
-  margin:0;
-  padding:0;
-  contain: content;
+.ChatDebugViewEventRow:hover {
+  background: var(--ListHoverBackground);
+  color: var(--ListHoverForeground);
 }
 `;
 };
@@ -3319,21 +2706,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,
@@ -3633,9 +3005,8 @@ const diffTree = (oldNodes, newNodes) => {
 const ChatDebugView = 'ChatDebugView';
 const ChatDebugViewDevtools = 'ChatDebugView--devtools';
 const ChatDebugViewDetails = 'ChatDebugViewDetails';
-const ChatDebugViewDetailsBody = 'ChatDebugViewDetailsBody';
+const ChatDebugViewDetailsBottom = 'ChatDebugViewDetailsBottom';
 const ChatDebugViewDetailsClose = 'ChatDebugViewDetailsClose';
-const ChatDebugViewDetailsPanel = 'ChatDebugViewDetailsPanel';
 const ChatDebugViewDetailsTab = 'ChatDebugViewDetailsTab';
 const ChatDebugViewDetailsTabSelected = 'ChatDebugViewDetailsTabSelected';
 const ChatDebugViewDetailsTabs = 'ChatDebugViewDetailsTabs';
@@ -3654,6 +3025,7 @@ const ChatDebugViewEventsFullWidth = 'ChatDebugViewEventsFullWidth';
 const ChatDebugViewFilterInput = 'ChatDebugViewFilterInput';
 const ChatDebugViewFilterInputDevtools = 'ChatDebugViewFilterInput--devtools';
 const ChatDebugViewHeaderCell = 'ChatDebugViewHeaderCell';
+const ChatDebugViewRefreshButton = 'ChatDebugViewRefreshButton';
 const ChatDebugViewQuickFilterInput = 'ChatDebugViewQuickFilterInput';
 const ChatDebugViewQuickFilterPill = 'ChatDebugViewQuickFilterPill';
 const ChatDebugViewQuickFilterPillSelected = 'ChatDebugViewQuickFilterPillSelected';
@@ -3664,6 +3036,7 @@ const ChatDebugViewTable = 'ChatDebugViewTable';
 const ChatDebugViewTableBody = 'ChatDebugViewTableBody';
 const ChatDebugViewTableHeader = 'ChatDebugViewTableHeader';
 const ChatDebugViewTableHeaderRow = 'ChatDebugViewTableHeaderRow';
+const TableRowEven = 'TableRowEven';
 const ChatDebugViewTimeline = 'ChatDebugViewTimeline';
 const ChatDebugViewTimelineBucket = 'ChatDebugViewTimelineBucket';
 const ChatDebugViewTimelineBucketBar = 'ChatDebugViewTimelineBucketBar';
@@ -3673,7 +3046,6 @@ const ChatDebugViewTimelineBucketUnit = 'ChatDebugViewTimelineBucketUnit';
 const ChatDebugViewTimelineBucketUnitEmpty = 'ChatDebugViewTimelineBucketUnitEmpty';
 const ChatDebugViewTimelineBuckets = 'ChatDebugViewTimelineBuckets';
 const ChatDebugViewTimelineInteractive = 'ChatDebugViewTimelineInteractive';
-const ChatDebugViewTimelinePresetInput = 'ChatDebugViewTimelinePresetInput';
 const ChatDebugViewTimelineSelectionMarker = 'ChatDebugViewTimelineSelectionMarker';
 const ChatDebugViewTimelineSelectionMarkerEnd = 'ChatDebugViewTimelineSelectionMarkerEnd';
 const ChatDebugViewTimelineSelectionMarkerStart = 'ChatDebugViewTimelineSelectionMarkerStart';
@@ -3694,11 +3066,11 @@ const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
 const ChatDebugViewCellType = 'ChatDebugViewCellType';
 const InputBox = 'InputBox';
 const Row = 'row';
-const TokenBoolean = 'TokenBoolean';
-const TokenKey = 'TokenKey';
-const TokenNumeric = 'TokenNumeric';
-const TokenString = 'TokenString';
-const TokenText = 'TokenText';
+const TokenBoolean = 'Token TokenBoolean';
+const TokenKey = 'Token TokenKey';
+const TokenNumeric = 'Token TokenNumeric';
+const TokenString = 'Token TokenString';
+const TokenText = 'Token TokenText';
 const joinClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
@@ -3715,9 +3087,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,11 +3102,26 @@ const HandleTimelinePointerMove = 15;
 const HandleTimelinePointerUp = 16;
 const HandleTimelineDoubleClick = 17;
 const HandleTableKeyDown = 18;
+const HandleTimelineRangePreset = 19;
+const HandleCloseDetails = 20;
+const HandleClickRefresh = 21;
 
+const getRefreshButtonDom = () => {
+  return [{
+    'aria-label': 'Refresh events',
+    childCount: 1,
+    className: ChatDebugViewRefreshButton,
+    name: Refresh,
+    onClick: HandleClickRefresh,
+    type: Button$1,
+    value: Refresh
+  }, text('Refresh')];
+};
 const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) => {
+  const refreshButtonDom = getRefreshButtonDom();
   if (useDevtoolsLayout) {
     return [{
-      childCount: 1 + (quickFilterNodes.length > 0 ? 1 : 0),
+      childCount: 2 + (quickFilterNodes.length > 0 ? 1 : 0),
       className: joinClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
       onContextMenu: HandleHeaderContextMenu,
       type: Search
@@ -3748,10 +3135,10 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) =>
       placeholder: 'Filter events',
       type: Input,
       value: filterValue
-    }, ...quickFilterNodes];
+    }, ...quickFilterNodes, ...refreshButtonDom];
   }
   return [{
-    childCount: 1,
+    childCount: 2,
     className: ChatDebugViewTop,
     onContextMenu: HandleHeaderContextMenu,
     type: Search
@@ -3765,7 +3152,7 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) =>
     placeholder: 'Filter events',
     type: Input,
     value: filterValue
-  }];
+  }, ...refreshButtonDom];
 };
 
 const getDurationText = event => {
@@ -3857,11 +3244,11 @@ 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,
+      type: Button$1,
       value: detailTab
     }, text(getDetailTabLabel(detailTab))];
   });
@@ -3874,7 +3261,7 @@ const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes
   return [{
     childCount: 2,
     className: ChatDebugViewDetails,
-    type: Div
+    type: Section
   }, {
     childCount: 2,
     className: ChatDebugViewDetailsTop,
@@ -3884,9 +3271,9 @@ const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes
     childCount: 0,
     className: ChatDebugViewDetailsClose,
     name: CloseDetails,
-    onChange: HandleSimpleInput,
-    onClick: HandleSimpleInput,
-    type: Button,
+    onChange: HandleCloseDetails,
+    onClick: HandleCloseDetails,
+    type: Button$1,
     value: 'close'
   }, {
     'aria-label': 'Detail sections',
@@ -3895,14 +3282,9 @@ const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes
     role: 'tablist',
     type: Div
   }, ...getTabNodes(selectedDetailTab), {
-    childCount: 1,
-    className: ChatDebugViewDetailsBody,
-    role: 'document',
-    type: Div
-  }, {
     'aria-labelledby': getTabId(selectedDetailTab),
     childCount: 1,
-    className: ChatDebugViewDetailsPanel,
+    className: ChatDebugViewDetailsBottom,
     id: getPanelId(selectedDetailTab),
     onContextMenu: HandleDetailsContextMenu,
     role: 'tabpanel',
@@ -3976,6 +3358,9 @@ const hasErrorStatus = event => {
     if (isErrorStatusCode(result.status)) {
       return true;
     }
+    if (isToolEvent(event) && 'error' in result && result.error !== undefined) {
+      return true;
+    }
     if (typeof result.error === 'string' || typeof result.errorMessage === 'string' || typeof result.exception === 'string') {
       return true;
     }
@@ -3989,12 +3374,13 @@ const getStatusText = event => {
 
 const getDevtoolsRows = (events, selectedEventIndex) => {
   return events.flatMap((event, i) => {
+    const isEvenRow = i % 2 === 1;
     const isSelected = selectedEventIndex === i;
     const isErrorStatus = hasErrorStatus(event);
     const rowIndex = String(i);
     return [{
       childCount: 3,
-      className: joinClassNames(ChatDebugViewEventRow, isSelected && ChatDebugViewEventRowSelected),
+      className: joinClassNames(ChatDebugViewEventRow, isEvenRow && TableRowEven, isSelected && ChatDebugViewEventRowSelected),
       'data-index': rowIndex,
       type: Tr
     }, {
@@ -4021,28 +3407,53 @@ const getEmptyStateDom = emptyMessage => {
   }, text(emptyMessage)];
 };
 
-const pushToken = (segments, className, value) => {
-  if (!value) {
-    return segments;
+const isDigit = character => {
+  return character !== undefined && character >= '0' && character <= '9';
+};
+const isWhitespace = character => {
+  return character === ' ' || character === '\n' || character === '\r' || character === '\t';
+};
+const getNumberEnd = (json, start) => {
+  let i = start;
+  if (json[i] === '-') {
+    i++;
   }
-  const lastSegment = segments.at(-1);
-  if (lastSegment && lastSegment.className === className) {
-    const merged = {
-      className,
-      value: lastSegment.value + value
-    };
-    return [...segments.slice(0, -1), merged];
+  if (json[i] === '0') {
+    i++;
+  } else {
+    if (!isDigit(json[i])) {
+      return start;
+    }
+    while (isDigit(json[i])) {
+      i++;
+    }
   }
-  return [...segments, {
-    className,
-    value
-  }];
+  if (json[i] === '.') {
+    const decimalStart = i;
+    i++;
+    if (!isDigit(json[i])) {
+      return decimalStart;
+    }
+    while (isDigit(json[i])) {
+      i++;
+    }
+  }
+  if (json[i] === 'e' || json[i] === 'E') {
+    const exponentStart = i;
+    i++;
+    if (json[i] === '+' || json[i] === '-') {
+      i++;
+    }
+    if (!isDigit(json[i])) {
+      return exponentStart;
+    }
+    while (isDigit(json[i])) {
+      i++;
+    }
+  }
+  return i;
 };
-
-const numberRegex = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?/;
-const whitespaceRegex = /\s/u;
-const getTokenSegments = json => {
-  let segments = [];
+const forEachTokenSegment = (json, onToken) => {
   let i = 0;
   while (i < json.length) {
     const character = json[i];
@@ -4061,40 +3472,38 @@ const getTokenSegments = json => {
         }
         i++;
       }
-      const tokenValue = json.slice(start, i);
       let lookAheadIndex = i;
-      while (lookAheadIndex < json.length && whitespaceRegex.test(json[lookAheadIndex])) {
+      while (lookAheadIndex < json.length && isWhitespace(json[lookAheadIndex])) {
         lookAheadIndex++;
       }
       const className = json[lookAheadIndex] === ':' ? TokenKey : TokenString;
-      segments = pushToken(segments, className, tokenValue);
+      onToken(className, json.slice(start, i));
       continue;
     }
-    const numberMatch = numberRegex.exec(json.slice(i));
-    if (numberMatch) {
-      segments = pushToken(segments, TokenNumeric, numberMatch[0]);
-      i += numberMatch[0].length;
+    const numberEnd = getNumberEnd(json, i);
+    if (numberEnd > i) {
+      onToken(TokenNumeric, json.slice(i, numberEnd));
+      i = numberEnd;
       continue;
     }
     if (json.startsWith('true', i)) {
-      segments = pushToken(segments, TokenBoolean, 'true');
+      onToken(TokenBoolean, 'true');
       i += 4;
       continue;
     }
     if (json.startsWith('false', i)) {
-      segments = pushToken(segments, TokenBoolean, 'false');
+      onToken(TokenBoolean, 'false');
       i += 5;
       continue;
     }
     if (json.startsWith('null', i)) {
-      segments = pushToken(segments, TokenBoolean, 'null');
+      onToken(TokenBoolean, 'null');
       i += 4;
       continue;
     }
-    segments = pushToken(segments, TokenText, character);
+    onToken(TokenText, character);
     i++;
   }
-  return segments;
 };
 
 const getJsonLines = value => {
@@ -4105,25 +3514,34 @@ const getJsonLines = value => {
       value: String(json)
     }]];
   }
-  const segments = getTokenSegments(json);
   const lines = [];
   let currentLine = [];
-  for (const segment of segments) {
-    const parts = segment.value.split('\n');
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i];
-      if (part) {
-        currentLine.push({
-          className: segment.className,
-          value: part
-        });
-      }
-      if (i < parts.length - 1) {
+  const pushLineSegment = (className, lineValue) => {
+    if (!lineValue) {
+      return;
+    }
+    const lastSegment = currentLine.at(-1);
+    if (lastSegment && lastSegment.className === className) {
+      lastSegment.value += lineValue;
+      return;
+    }
+    currentLine.push({
+      className,
+      value: lineValue
+    });
+  };
+  forEachTokenSegment(json, (className, segmentValue) => {
+    let start = 0;
+    for (let i = 0; i < segmentValue.length; i++) {
+      if (segmentValue[i] === '\n') {
+        pushLineSegment(className, segmentValue.slice(start, i));
         lines.push(currentLine);
         currentLine = [];
+        start = i + 1;
       }
     }
-  }
+    pushLineSegment(className, segmentValue.slice(start));
+  });
   lines.push(currentLine);
   return lines;
 };
@@ -4179,6 +3597,36 @@ const getEventsClassName = hasSelectedEvent => {
 const hasOwn = (event, key) => {
   return Object.hasOwn(event, key);
 };
+const isChatMessageUpdatedEvent = event => {
+  return event.type === 'chat-message-updated';
+};
+const isChatMessageAddedEvent = event => {
+  return event.type === 'chat-message-added';
+};
+const getPreviewMessageText = event => {
+  if (isChatMessageUpdatedEvent(event) && typeof event.text === 'string') {
+    return event.text;
+  }
+  if (!isChatMessageAddedEvent(event)) {
+    return undefined;
+  }
+  const {
+    message
+  } = event;
+  if (!message || typeof message !== 'object') {
+    return undefined;
+  }
+  if (!Object.hasOwn(message, 'text')) {
+    return undefined;
+  }
+  const {
+    text
+  } = message;
+  if (typeof text !== 'string') {
+    return undefined;
+  }
+  return text;
+};
 const getPreviewName = event => {
   if (typeof event.name === 'string' && event.name) {
     return event.name;
@@ -4198,6 +3646,10 @@ const shouldIncludeArguments = (event, name) => {
   return true;
 };
 const getPreviewEvent = event => {
+  const previewMessageText = getPreviewMessageText(event);
+  if (previewMessageText !== undefined) {
+    return previewMessageText;
+  }
   const name = getPreviewName(event);
   const previewEvent = {
     ...(name === undefined ? {} : {
@@ -4281,9 +3733,12 @@ const formatPercent = value => {
   return `${Number(value.toFixed(3))}%`;
 };
 
-const getBucketUnitDom = unitCount => {
+const getBucketUnitDom = (unitCount, presetValue) => {
   if (unitCount === 0) {
     return [{
+      ...(presetValue ? {
+        'data-value': presetValue
+      } : {}),
       childCount: 0,
       className: joinClassNames(ChatDebugViewTimelineBucketUnit, ChatDebugViewTimelineBucketUnitEmpty),
       type: Div
@@ -4292,6 +3747,9 @@ const getBucketUnitDom = unitCount => {
   return Array.from({
     length: unitCount
   }).fill({
+    ...(presetValue ? {
+      'data-value': presetValue
+    } : {}),
     childCount: 0,
     className: ChatDebugViewTimelineBucketUnit,
     type: Div
@@ -4301,23 +3759,17 @@ const getBucketUnitDom = unitCount => {
 const getBucketDom = bucket => {
   const presetValue = `${formatTimelinePresetValue(bucket.startSeconds)}:${formatTimelinePresetValue(bucket.endSeconds)}`;
   return [{
-    childCount: 2,
+    childCount: 1,
     className: joinClassNames(ChatDebugViewTimelineBucket, bucket.isSelected && ChatDebugViewTimelineBucketSelected),
-    type: Label
-  }, {
-    checked: false,
-    childCount: 0,
-    className: ChatDebugViewTimelinePresetInput,
-    inputType: 'radio',
-    name: TimelineRangePreset,
-    onChange: HandleSimpleInput,
-    type: Input,
-    value: presetValue
+    'data-value': presetValue,
+    onClick: HandleTimelineRangePreset,
+    type: Div
   }, {
     childCount: bucket.unitCount === 0 ? 1 : bucket.unitCount,
     className: joinClassNames(ChatDebugViewTimelineBucketBar, bucket.isSelected && ChatDebugViewTimelineBucketBarSelected),
+    'data-value': presetValue,
     type: Div
-  }, ...getBucketUnitDom(bucket.unitCount)];
+  }, ...getBucketUnitDom(bucket.unitCount, presetValue)];
 };
 
 const getEffectiveTimelineRange = (timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds) => {
@@ -4373,7 +3825,7 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
   return [{
     childCount: 2,
     className: ChatDebugViewTimeline,
-    type: Div
+    type: Section
   }, {
     childCount: 1,
     className: ChatDebugViewTimelineTop,
@@ -4414,10 +3866,12 @@ const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvent
   return [{
     childCount: mainChildCount,
     className: ChatDebugViewDevtoolsMain,
+    role: 'none',
     type: Div
   }, ...timelineNodes, {
     childCount: splitChildCount,
     className: ChatDebugViewDevtoolsSplit,
+    role: 'none',
     type: Div
   }, {
     childCount: 1,
@@ -4460,7 +3914,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 +3952,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) : [];
@@ -4575,21 +4031,41 @@ const render2 = (uid, diffResult) => {
 
 const renderEventListeners = () => {
   return [{
+    name: HandleHeaderContextMenu,
+    params: ['handleHeaderContextMenu'],
+    preventDefault: true
+  }, {
     name: HandleEventRowClick,
-    params: ['handleEventRowClick', 'event.target.dataset.index', 'event.button']
+    params: ['handleEventRowClick', 'event.target.dataset.index', Button]
   }, {
     name: HandleTableBodyContextMenu,
-    params: ['handleTableBodyContextMenu'],
+    params: ['handleTableBodyContextMenu', ClientX, ClientY],
+    preventDefault: true
+  }, {
+    name: HandleDetailsContextMenu,
+    params: ['handleDetailsContextMenu'],
     preventDefault: true
   }, {
     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', 'event.target.dataset.value']
+  }, {
+    name: HandleCloseDetails,
+    params: ['handleCloseDetails']
+  }, {
+    name: HandleClickRefresh,
+    params: ['handleClickRefresh']
+  }, {
+    name: HandleTableKeyDown,
+    params: ['handleTableKeyDown', 'event.key']
   }, {
     name: HandleSashPointerDown,
     params: ['handleSashPointerDown', ClientX, ClientY],
@@ -4645,28 +4121,20 @@ const saveState = state => {
   const {
     eventCategoryFilter,
     filterValue,
-    height,
+    selectedDetailTab,
     selectedEventId,
     sessionId,
-    tableWidth,
     timelineEndSeconds,
-    timelineStartSeconds,
-    width,
-    x,
-    y
+    timelineStartSeconds
   } = state;
   return {
     eventCategoryFilter,
     filterValue,
-    height,
+    selectedDetailTab,
     selectedEventId,
     sessionId,
-    tableWidth,
     timelineEndSeconds,
-    timelineStartSeconds,
-    width,
-    x,
-    y
+    timelineStartSeconds
   };
 };
 
@@ -4682,31 +4150,20 @@ const setEvents = (state, events) => {
   };
 };
 
-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);
-  if (result.type === 'not-supported') {
-    return {
-      ...state,
-      errorMessage: getIndexedDbNotSupportedMessage(),
-      events: [],
-      initial: false,
-      selectedEvent: null,
-      selectedEventId: null,
-      sessionId
-    };
-  }
+  const result = await setSessionIdDependencies.listChatViewEvents(sessionId, state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionIdIndexName);
   if (result.type === 'error') {
     return {
       ...state,
-      errorMessage: getFailedToLoadMessage(sessionId),
+      errorMessage: getFailedToLoadMessage(sessionId, result.error),
       events: [],
       initial: false,
       selectedEvent: null,
       selectedEventId: null,
+      selectedEventIndex: null,
       sessionId
     };
   }
@@ -4720,26 +4177,40 @@ const setSessionId = async (state, sessionId) => {
     initial: false,
     selectedEvent: null,
     selectedEventId: null,
+    selectedEventIndex: null,
     sessionId
   };
 };
 
 const commandMap = {
+  'ChatDebug.appendStoredEventForTest': wrapCommand(appendStoredEventForTest),
   'ChatDebug.create': create,
   'ChatDebug.diff2': diff2,
   'ChatDebug.getCommandIds': getCommandIds,
+  'ChatDebug.getMenuIds': getMenuIds,
+  'ChatDebug.handleClickRefresh': wrapCommand(handleClickRefresh),
+  '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),
@@ -4749,16 +4220,28 @@ const commandMap = {
   'ChatDebug.resize': wrapCommand(resize),
   'ChatDebug.saveState': wrapGetter(saveState),
   'ChatDebug.setEvents': wrapCommand(setEvents),
-  'ChatDebug.setIndexedDbSupportForTest': setIndexedDbSupportForTest,
   'ChatDebug.setSessionId': wrapCommand(setSessionId),
   'ChatDebug.terminate': terminate
 };
 
+const sendMessagePortToChatStorageWorker = async port => {
+  await sendMessagePortToChatStorageWorker$1(port);
+};
+const initializeChatStorageWorker = async () => {
+  const rpc = await create$4({
+    commandMap: {},
+    send: sendMessagePortToChatStorageWorker
+  });
+  set$2(rpc);
+};
+
 const listen = async () => {
   registerCommands(commandMap);
-  await create$2({
+  const r = await create$3({
     commandMap: commandMap
   });
+  set$1(r);
+  await initializeChatStorageWorker();
 };
 
 const main = async () => {