@lvce-editor/static-server 0.77.8 → 0.77.10

package/static/2374597/packages/chat-debug-view/dist/chatDebugViewWorkerMain.js

@@ -0,0 +1,4768 @@
+const normalizeLine = line => {
+  if (line.startsWith('Error: ')) {
+    return line.slice('Error: '.length);
+  }
+  if (line.startsWith('VError: ')) {
+    return line.slice('VError: '.length);
+  }
+  return line;
+};
+const getCombinedMessage = (error, message) => {
+  const stringifiedError = normalizeLine(`${error}`);
+  if (message) {
+    return `${message}: ${stringifiedError}`;
+  }
+  return stringifiedError;
+};
+const NewLine$2 = '\n';
+const getNewLineIndex$1 = (string, startIndex = undefined) => {
+  return string.indexOf(NewLine$2, startIndex);
+};
+const mergeStacks = (parent, child) => {
+  if (!child) {
+    return parent;
+  }
+  const parentNewLineIndex = getNewLineIndex$1(parent);
+  const childNewLineIndex = getNewLineIndex$1(child);
+  if (childNewLineIndex === -1) {
+    return parent;
+  }
+  const parentFirstLine = parent.slice(0, parentNewLineIndex);
+  const childRest = child.slice(childNewLineIndex);
+  const childFirstLine = normalizeLine(child.slice(0, childNewLineIndex));
+  if (parentFirstLine.includes(childFirstLine)) {
+    return parentFirstLine + childRest;
+  }
+  return child;
+};
+class VError extends Error {
+  constructor(error, message) {
+    const combinedMessage = getCombinedMessage(error, message);
+    super(combinedMessage);
+    this.name = 'VError';
+    if (error instanceof Error) {
+      this.stack = mergeStacks(this.stack, error.stack);
+    }
+    if (error.codeFrame) {
+      // @ts-ignore
+      this.codeFrame = error.codeFrame;
+    }
+    if (error.code) {
+      // @ts-ignore
+      this.code = error.code;
+    }
+  }
+}
+
+const isMessagePort = value => {
+  return value && value instanceof MessagePort;
+};
+const isMessagePortMain = value => {
+  return value && value.constructor && value.constructor.name === 'MessagePortMain';
+};
+const isOffscreenCanvas = value => {
+  return typeof OffscreenCanvas !== 'undefined' && value instanceof OffscreenCanvas;
+};
+const isInstanceOf = (value, constructorName) => {
+  return value?.constructor?.name === constructorName;
+};
+const isSocket = value => {
+  return isInstanceOf(value, 'Socket');
+};
+const transferrables = [isMessagePort, isMessagePortMain, isOffscreenCanvas, isSocket];
+const isTransferrable = value => {
+  for (const fn of transferrables) {
+    if (fn(value)) {
+      return true;
+    }
+  }
+  return false;
+};
+const walkValue = (value, transferrables, isTransferrable) => {
+  if (!value) {
+    return;
+  }
+  if (isTransferrable(value)) {
+    transferrables.push(value);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      walkValue(item, transferrables, isTransferrable);
+    }
+    return;
+  }
+  if (typeof value === 'object') {
+    for (const property of Object.values(value)) {
+      walkValue(property, transferrables, isTransferrable);
+    }
+    return;
+  }
+};
+const getTransferrables = value => {
+  const transferrables = [];
+  walkValue(value, transferrables, isTransferrable);
+  return transferrables;
+};
+const attachEvents = that => {
+  const handleMessage = (...args) => {
+    const data = that.getData(...args);
+    that.dispatchEvent(new MessageEvent('message', {
+      data
+    }));
+  };
+  that.onMessage(handleMessage);
+  const handleClose = event => {
+    that.dispatchEvent(new Event('close'));
+  };
+  that.onClose(handleClose);
+};
+class Ipc extends EventTarget {
+  constructor(rawIpc) {
+    super();
+    this._rawIpc = rawIpc;
+    attachEvents(this);
+  }
+}
+const E_INCOMPATIBLE_NATIVE_MODULE = 'E_INCOMPATIBLE_NATIVE_MODULE';
+const E_MODULES_NOT_SUPPORTED_IN_ELECTRON = 'E_MODULES_NOT_SUPPORTED_IN_ELECTRON';
+const ERR_MODULE_NOT_FOUND = 'ERR_MODULE_NOT_FOUND';
+const NewLine$1 = '\n';
+const joinLines$1 = lines => {
+  return lines.join(NewLine$1);
+};
+const RE_AT = /^\s+at/;
+const RE_AT_PROMISE_INDEX = /^\s*at async Promise.all \(index \d+\)$/;
+const isNormalStackLine = line => {
+  return RE_AT.test(line) && !RE_AT_PROMISE_INDEX.test(line);
+};
+const getDetails = lines => {
+  const index = lines.findIndex(isNormalStackLine);
+  if (index === -1) {
+    return {
+      actualMessage: joinLines$1(lines),
+      rest: []
+    };
+  }
+  let lastIndex = index - 1;
+  while (++lastIndex < lines.length) {
+    if (!isNormalStackLine(lines[lastIndex])) {
+      break;
+    }
+  }
+  return {
+    actualMessage: lines[index - 1],
+    rest: lines.slice(index, lastIndex)
+  };
+};
+const splitLines$1 = lines => {
+  return lines.split(NewLine$1);
+};
+const RE_MESSAGE_CODE_BLOCK_START = /^Error: The module '.*'$/;
+const RE_MESSAGE_CODE_BLOCK_END = /^\s* at/;
+const isMessageCodeBlockStartIndex = line => {
+  return RE_MESSAGE_CODE_BLOCK_START.test(line);
+};
+const isMessageCodeBlockEndIndex = line => {
+  return RE_MESSAGE_CODE_BLOCK_END.test(line);
+};
+const getMessageCodeBlock = stderr => {
+  const lines = splitLines$1(stderr);
+  const startIndex = lines.findIndex(isMessageCodeBlockStartIndex);
+  const endIndex = startIndex + lines.slice(startIndex).findIndex(isMessageCodeBlockEndIndex, startIndex);
+  const relevantLines = lines.slice(startIndex, endIndex);
+  const relevantMessage = relevantLines.join(' ').slice('Error: '.length);
+  return relevantMessage;
+};
+const isModuleNotFoundMessage = line => {
+  return line.includes('[ERR_MODULE_NOT_FOUND]');
+};
+const getModuleNotFoundError = stderr => {
+  const lines = splitLines$1(stderr);
+  const messageIndex = lines.findIndex(isModuleNotFoundMessage);
+  const message = lines[messageIndex];
+  return {
+    code: ERR_MODULE_NOT_FOUND,
+    message
+  };
+};
+const isModuleNotFoundError = stderr => {
+  if (!stderr) {
+    return false;
+  }
+  return stderr.includes('ERR_MODULE_NOT_FOUND');
+};
+const isModulesSyntaxError = stderr => {
+  if (!stderr) {
+    return false;
+  }
+  return stderr.includes('SyntaxError: Cannot use import statement outside a module');
+};
+const RE_NATIVE_MODULE_ERROR = /^innerError Error: Cannot find module '.*.node'/;
+const RE_NATIVE_MODULE_ERROR_2 = /was compiled against a different Node.js version/;
+const isUnhelpfulNativeModuleError = stderr => {
+  return RE_NATIVE_MODULE_ERROR.test(stderr) && RE_NATIVE_MODULE_ERROR_2.test(stderr);
+};
+const getNativeModuleErrorMessage = stderr => {
+  const message = getMessageCodeBlock(stderr);
+  return {
+    code: E_INCOMPATIBLE_NATIVE_MODULE,
+    message: `Incompatible native node module: ${message}`
+  };
+};
+const getModuleSyntaxError = () => {
+  return {
+    code: E_MODULES_NOT_SUPPORTED_IN_ELECTRON,
+    message: `ES Modules are not supported in electron`
+  };
+};
+const getHelpfulChildProcessError = (stdout, stderr) => {
+  if (isUnhelpfulNativeModuleError(stderr)) {
+    return getNativeModuleErrorMessage(stderr);
+  }
+  if (isModulesSyntaxError(stderr)) {
+    return getModuleSyntaxError();
+  }
+  if (isModuleNotFoundError(stderr)) {
+    return getModuleNotFoundError(stderr);
+  }
+  const lines = splitLines$1(stderr);
+  const {
+    actualMessage,
+    rest
+  } = getDetails(lines);
+  return {
+    code: '',
+    message: actualMessage,
+    stack: rest
+  };
+};
+class IpcError extends VError {
+  // @ts-ignore
+  constructor(betterMessage, stdout = '', stderr = '') {
+    if (stdout || stderr) {
+      // @ts-ignore
+      const {
+        code,
+        message,
+        stack
+      } = getHelpfulChildProcessError(stdout, stderr);
+      const cause = new Error(message);
+      // @ts-ignore
+      cause.code = code;
+      cause.stack = stack;
+      super(cause, betterMessage);
+    } else {
+      super(betterMessage);
+    }
+    // @ts-ignore
+    this.name = 'IpcError';
+    // @ts-ignore
+    this.stdout = stdout;
+    // @ts-ignore
+    this.stderr = stderr;
+  }
+}
+const readyMessage = 'ready';
+const getData$2 = event => {
+  return event.data;
+};
+const listen$7 = () => {
+  // @ts-ignore
+  if (typeof WorkerGlobalScope === 'undefined') {
+    throw new TypeError('module is not in web worker scope');
+  }
+  return globalThis;
+};
+const signal$8 = global => {
+  global.postMessage(readyMessage);
+};
+class IpcChildWithModuleWorker extends Ipc {
+  getData(event) {
+    return getData$2(event);
+  }
+  send(message) {
+    // @ts-ignore
+    this._rawIpc.postMessage(message);
+  }
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    // @ts-ignore
+    this._rawIpc.postMessage(message, transfer);
+  }
+  dispose() {
+    // ignore
+  }
+  onClose(callback) {
+    // ignore
+  }
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+  }
+}
+const wrap$f = global => {
+  return new IpcChildWithModuleWorker(global);
+};
+const waitForFirstMessage = async port => {
+  const {
+    promise,
+    resolve
+  } = Promise.withResolvers();
+  port.addEventListener('message', resolve, {
+    once: true
+  });
+  const event = await promise;
+  // @ts-ignore
+  return event.data;
+};
+const listen$6 = async () => {
+  const parentIpcRaw = listen$7();
+  signal$8(parentIpcRaw);
+  const parentIpc = wrap$f(parentIpcRaw);
+  const firstMessage = await waitForFirstMessage(parentIpc);
+  if (firstMessage.method !== 'initialize') {
+    throw new IpcError('unexpected first message');
+  }
+  const type = firstMessage.params[0];
+  if (type === 'message-port') {
+    parentIpc.send({
+      id: firstMessage.id,
+      jsonrpc: '2.0',
+      result: null
+    });
+    parentIpc.dispose();
+    const port = firstMessage.params[1];
+    return port;
+  }
+  return globalThis;
+};
+class IpcChildWithModuleWorkerAndMessagePort extends Ipc {
+  getData(event) {
+    return getData$2(event);
+  }
+  send(message) {
+    this._rawIpc.postMessage(message);
+  }
+  sendAndTransfer(message) {
+    const transfer = getTransferrables(message);
+    this._rawIpc.postMessage(message, transfer);
+  }
+  dispose() {
+    if (this._rawIpc.close) {
+      this._rawIpc.close();
+    }
+  }
+  onClose(callback) {
+    // ignore
+  }
+  onMessage(callback) {
+    this._rawIpc.addEventListener('message', callback);
+    this._rawIpc.start();
+  }
+}
+const wrap$e = port => {
+  return new IpcChildWithModuleWorkerAndMessagePort(port);
+};
+const IpcChildWithModuleWorkerAndMessagePort$1 = {
+  __proto__: null,
+  listen: listen$6,
+  wrap: wrap$e
+};
+
+class CommandNotFoundError extends Error {
+  constructor(command) {
+    super(`Command not found ${command}`);
+    this.name = 'CommandNotFoundError';
+  }
+}
+const commands = Object.create(null);
+const register = commandMap => {
+  Object.assign(commands, commandMap);
+};
+const getCommand = key => {
+  return commands[key];
+};
+const execute = (command, ...args) => {
+  const fn = getCommand(command);
+  if (!fn) {
+    throw new CommandNotFoundError(command);
+  }
+  return fn(...args);
+};
+
+const Two$1 = '2.0';
+const callbacks = Object.create(null);
+const get$1 = id => {
+  return callbacks[id];
+};
+const remove = id => {
+  delete callbacks[id];
+};
+class JsonRpcError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'JsonRpcError';
+  }
+}
+const NewLine = '\n';
+const DomException = 'DOMException';
+const ReferenceError$1 = 'ReferenceError';
+const SyntaxError$1 = 'SyntaxError';
+const TypeError$1 = 'TypeError';
+const getErrorConstructor = (message, type) => {
+  if (type) {
+    switch (type) {
+      case DomException:
+        return DOMException;
+      case ReferenceError$1:
+        return ReferenceError;
+      case SyntaxError$1:
+        return SyntaxError;
+      case TypeError$1:
+        return TypeError;
+      default:
+        return Error;
+    }
+  }
+  if (message.startsWith('TypeError: ')) {
+    return TypeError;
+  }
+  if (message.startsWith('SyntaxError: ')) {
+    return SyntaxError;
+  }
+  if (message.startsWith('ReferenceError: ')) {
+    return ReferenceError;
+  }
+  return Error;
+};
+const constructError = (message, type, name) => {
+  const ErrorConstructor = getErrorConstructor(message, type);
+  if (ErrorConstructor === DOMException && name) {
+    return new ErrorConstructor(message, name);
+  }
+  if (ErrorConstructor === Error) {
+    const error = new Error(message);
+    if (name && name !== 'VError') {
+      error.name = name;
+    }
+    return error;
+  }
+  return new ErrorConstructor(message);
+};
+const joinLines = lines => {
+  return lines.join(NewLine);
+};
+const splitLines = lines => {
+  return lines.split(NewLine);
+};
+const getCurrentStack = () => {
+  const stackLinesToSkip = 3;
+  const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
+  return currentStack;
+};
+const getNewLineIndex = (string, startIndex = undefined) => {
+  return string.indexOf(NewLine, startIndex);
+};
+const getParentStack = error => {
+  let parentStack = error.stack || error.data || error.message || '';
+  if (parentStack.startsWith('    at')) {
+    parentStack = error.message + NewLine + parentStack;
+  }
+  return parentStack;
+};
+const MethodNotFound = -32601;
+const Custom = -32001;
+const restoreJsonRpcError = error => {
+  const currentStack = getCurrentStack();
+  if (error && error instanceof Error) {
+    if (typeof error.stack === 'string') {
+      error.stack = error.stack + NewLine + currentStack;
+    }
+    return error;
+  }
+  if (error && error.code && error.code === MethodNotFound) {
+    const restoredError = new JsonRpcError(error.message);
+    const parentStack = getParentStack(error);
+    restoredError.stack = parentStack + NewLine + currentStack;
+    return restoredError;
+  }
+  if (error && error.message) {
+    const restoredError = constructError(error.message, error.type, error.name);
+    if (error.data) {
+      if (error.data.stack && error.data.type && error.message) {
+        restoredError.stack = error.data.type + ': ' + error.message + NewLine + error.data.stack + NewLine + currentStack;
+      } else if (error.data.stack) {
+        restoredError.stack = error.data.stack;
+      }
+      if (error.data.codeFrame) {
+        // @ts-ignore
+        restoredError.codeFrame = error.data.codeFrame;
+      }
+      if (error.data.code) {
+        // @ts-ignore
+        restoredError.code = error.data.code;
+      }
+      if (error.data.type) {
+        // @ts-ignore
+        restoredError.name = error.data.type;
+      }
+    } else {
+      if (error.stack) {
+        const lowerStack = restoredError.stack || '';
+        // @ts-ignore
+        const indexNewLine = getNewLineIndex(lowerStack);
+        const parentStack = getParentStack(error);
+        // @ts-ignore
+        restoredError.stack = parentStack + lowerStack.slice(indexNewLine);
+      }
+      if (error.codeFrame) {
+        // @ts-ignore
+        restoredError.codeFrame = error.codeFrame;
+      }
+    }
+    return restoredError;
+  }
+  if (typeof error === 'string') {
+    return new Error(`JsonRpc Error: ${error}`);
+  }
+  return new Error(`JsonRpc Error: ${error}`);
+};
+const unwrapJsonRpcResult = responseMessage => {
+  if ('error' in responseMessage) {
+    const restoredError = restoreJsonRpcError(responseMessage.error);
+    throw restoredError;
+  }
+  if ('result' in responseMessage) {
+    return responseMessage.result;
+  }
+  throw new JsonRpcError('unexpected response message');
+};
+const warn = (...args) => {
+  console.warn(...args);
+};
+const resolve = (id, response) => {
+  const fn = get$1(id);
+  if (!fn) {
+    console.log(response);
+    warn(`callback ${id} may already be disposed`);
+    return;
+  }
+  fn(response);
+  remove(id);
+};
+const E_COMMAND_NOT_FOUND = 'E_COMMAND_NOT_FOUND';
+const getErrorType = prettyError => {
+  if (prettyError && prettyError.type) {
+    return prettyError.type;
+  }
+  if (prettyError && prettyError.constructor && prettyError.constructor.name) {
+    return prettyError.constructor.name;
+  }
+  return undefined;
+};
+const isAlreadyStack = line => {
+  return line.trim().startsWith('at ');
+};
+const getStack = prettyError => {
+  const stackString = prettyError.stack || '';
+  const newLineIndex = stackString.indexOf('\n');
+  if (newLineIndex !== -1 && !isAlreadyStack(stackString.slice(0, newLineIndex))) {
+    return stackString.slice(newLineIndex + 1);
+  }
+  return stackString;
+};
+const getErrorProperty = (error, prettyError) => {
+  if (error && error.code === E_COMMAND_NOT_FOUND) {
+    return {
+      code: MethodNotFound,
+      data: error.stack,
+      message: error.message
+    };
+  }
+  return {
+    code: Custom,
+    data: {
+      code: prettyError.code,
+      codeFrame: prettyError.codeFrame,
+      name: prettyError.name,
+      stack: getStack(prettyError),
+      type: getErrorType(prettyError)
+    },
+    message: prettyError.message
+  };
+};
+const create$1$1 = (id, error) => {
+  return {
+    error,
+    id,
+    jsonrpc: Two$1
+  };
+};
+const getErrorResponse = (id, error, preparePrettyError, logError) => {
+  const prettyError = preparePrettyError(error);
+  logError(error, prettyError);
+  const errorProperty = getErrorProperty(error, prettyError);
+  return create$1$1(id, errorProperty);
+};
+const create$6 = (message, result) => {
+  return {
+    id: message.id,
+    jsonrpc: Two$1,
+    result: result ?? null
+  };
+};
+const getSuccessResponse = (message, result) => {
+  const resultProperty = result ?? null;
+  return create$6(message, resultProperty);
+};
+const getErrorResponseSimple = (id, error) => {
+  return {
+    error: {
+      code: Custom,
+      data: error,
+      // @ts-ignore
+      message: error.message
+    },
+    id,
+    jsonrpc: Two$1
+  };
+};
+const getResponse = async (message, ipc, execute, preparePrettyError, logError, requiresSocket) => {
+  try {
+    const result = requiresSocket(message.method) ? await execute(message.method, ipc, ...message.params) : await execute(message.method, ...message.params);
+    return getSuccessResponse(message, result);
+  } catch (error) {
+    if (ipc.canUseSimpleErrorResponse) {
+      return getErrorResponseSimple(message.id, error);
+    }
+    return getErrorResponse(message.id, error, preparePrettyError, logError);
+  }
+};
+const defaultPreparePrettyError = error => {
+  return error;
+};
+const defaultLogError = () => {
+  // ignore
+};
+const defaultRequiresSocket = () => {
+  return false;
+};
+const defaultResolve = resolve;
+
+// TODO maybe remove this in v6 or v7, only accept options object to simplify the code
+const normalizeParams = args => {
+  if (args.length === 1) {
+    const options = args[0];
+    return {
+      execute: options.execute,
+      ipc: options.ipc,
+      logError: options.logError || defaultLogError,
+      message: options.message,
+      preparePrettyError: options.preparePrettyError || defaultPreparePrettyError,
+      requiresSocket: options.requiresSocket || defaultRequiresSocket,
+      resolve: options.resolve || defaultResolve
+    };
+  }
+  return {
+    execute: args[2],
+    ipc: args[0],
+    logError: args[5],
+    message: args[1],
+    preparePrettyError: args[4],
+    requiresSocket: args[6],
+    resolve: args[3]
+  };
+};
+const handleJsonRpcMessage = async (...args) => {
+  const options = normalizeParams(args);
+  const {
+    execute,
+    ipc,
+    logError,
+    message,
+    preparePrettyError,
+    requiresSocket,
+    resolve
+  } = options;
+  if ('id' in message) {
+    if ('method' in message) {
+      const response = await getResponse(message, ipc, execute, preparePrettyError, logError, requiresSocket);
+      try {
+        ipc.send(response);
+      } catch (error) {
+        const errorResponse = getErrorResponse(message.id, error, preparePrettyError, logError);
+        ipc.send(errorResponse);
+      }
+      return;
+    }
+    resolve(message.id, message);
+    return;
+  }
+  if ('method' in message) {
+    await getResponse(message, ipc, execute, preparePrettyError, logError, requiresSocket);
+    return;
+  }
+  throw new JsonRpcError('unexpected message');
+};
+
+const Two = '2.0';
+
+const create$5 = (method, params) => {
+  return {
+    jsonrpc: Two,
+    method,
+    params
+  };
+};
+
+const create$4 = (id, method, params) => {
+  const message = {
+    id,
+    jsonrpc: Two,
+    method,
+    params
+  };
+  return message;
+};
+
+let id = 0;
+const create$3 = () => {
+  return ++id;
+};
+
+const registerPromise = map => {
+  const id = create$3();
+  const {
+    promise,
+    resolve
+  } = Promise.withResolvers();
+  map[id] = resolve;
+  return {
+    id,
+    promise
+  };
+};
+
+const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer) => {
+  const {
+    id,
+    promise
+  } = registerPromise(callbacks);
+  const message = create$4(id, method, params);
+  if (useSendAndTransfer && ipc.sendAndTransfer) {
+    ipc.sendAndTransfer(message);
+  } else {
+    ipc.send(message);
+  }
+  const responseMessage = await promise;
+  return unwrapJsonRpcResult(responseMessage);
+};
+const createRpc = ipc => {
+  const callbacks = Object.create(null);
+  ipc._resolve = (id, response) => {
+    const fn = callbacks[id];
+    if (!fn) {
+      console.warn(`callback ${id} may already be disposed`);
+      return;
+    }
+    fn(response);
+    delete callbacks[id];
+  };
+  const rpc = {
+    async dispose() {
+      await ipc?.dispose();
+    },
+    invoke(method, ...params) {
+      return invokeHelper(callbacks, ipc, method, params, false);
+    },
+    invokeAndTransfer(method, ...params) {
+      return invokeHelper(callbacks, ipc, method, params, true);
+    },
+    // @ts-ignore
+    ipc,
+    /**
+     * @deprecated
+     */
+    send(method, ...params) {
+      const message = create$5(method, params);
+      ipc.send(message);
+    }
+  };
+  return rpc;
+};
+
+const requiresSocket = () => {
+  return false;
+};
+const preparePrettyError = error => {
+  return error;
+};
+const logError = () => {
+  // handled by renderer worker
+};
+const handleMessage = event => {
+  const actualRequiresSocket = event?.target?.requiresSocket || requiresSocket;
+  const actualExecute = event?.target?.execute || execute;
+  return handleJsonRpcMessage(event.target, event.data, actualExecute, event.target._resolve, preparePrettyError, logError, actualRequiresSocket);
+};
+
+const handleIpc = ipc => {
+  if ('addEventListener' in ipc) {
+    ipc.addEventListener('message', handleMessage);
+  } else if ('on' in ipc) {
+    // deprecated
+    ipc.on('message', handleMessage);
+  }
+};
+
+const listen$1 = async (module, options) => {
+  const rawIpc = await module.listen(options);
+  if (module.signal) {
+    module.signal(rawIpc);
+  }
+  const ipc = module.wrap(rawIpc);
+  return ipc;
+};
+
+const create$2 = async ({
+  commandMap
+}) => {
+  // TODO create a commandMap per rpc instance
+  register(commandMap);
+  const ipc = await listen$1(IpcChildWithModuleWorkerAndMessagePort$1);
+  handleIpc(ipc);
+  const rpc = createRpc(ipc);
+  return rpc;
+};
+
+const toCommandId = key => {
+  const dotIndex = key.indexOf('.');
+  return key.slice(dotIndex + 1);
+};
+const create$1 = () => {
+  const states = Object.create(null);
+  const commandMapRef = {};
+  return {
+    clear() {
+      for (const key of Object.keys(states)) {
+        delete states[key];
+      }
+    },
+    diff(uid, modules, numbers) {
+      const {
+        newState,
+        oldState
+      } = states[uid];
+      const diffResult = [];
+      for (let i = 0; i < modules.length; i++) {
+        const fn = modules[i];
+        if (!fn(oldState, newState)) {
+          diffResult.push(numbers[i]);
+        }
+      }
+      return diffResult;
+    },
+    dispose(uid) {
+      delete states[uid];
+    },
+    get(uid) {
+      return states[uid];
+    },
+    getCommandIds() {
+      const keys = Object.keys(commandMapRef);
+      const ids = keys.map(toCommandId);
+      return ids;
+    },
+    getKeys() {
+      return Object.keys(states).map(key => {
+        return Number.parseFloat(key);
+      });
+    },
+    registerCommands(commandMap) {
+      Object.assign(commandMapRef, commandMap);
+    },
+    set(uid, oldState, newState) {
+      states[uid] = {
+        newState,
+        oldState
+      };
+    },
+    wrapCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const {
+          newState,
+          oldState
+        } = states[uid];
+        const newerState = await fn(newState, ...args);
+        if (oldState === newerState || newState === newerState) {
+          return;
+        }
+        const latestOld = states[uid];
+        const latestNew = {
+          ...latestOld.newState,
+          ...newerState
+        };
+        states[uid] = {
+          newState: latestNew,
+          oldState: latestOld.oldState
+        };
+      };
+      return wrapped;
+    },
+    wrapGetter(fn) {
+      const wrapped = (uid, ...args) => {
+        const {
+          newState
+        } = states[uid];
+        return fn(newState, ...args);
+      };
+      return wrapped;
+    },
+    wrapLoadContent(fn) {
+      const wrapped = async (uid, ...args) => {
+        const {
+          newState,
+          oldState
+        } = states[uid];
+        const result = await fn(newState, ...args);
+        const {
+          error,
+          state
+        } = result;
+        if (oldState === state || newState === state) {
+          return {
+            error
+          };
+        }
+        const latestOld = states[uid];
+        const latestNew = {
+          ...latestOld.newState,
+          ...state
+        };
+        states[uid] = {
+          newState: latestNew,
+          oldState: latestOld.oldState
+        };
+        return {
+          error
+        };
+      };
+      return wrapped;
+    }
+  };
+};
+const terminate = () => {
+  globalThis.close();
+};
+
+const createEventCategoryFilterOptions = () => {
+  return [{
+    label: 'All',
+    value: All
+  }, {
+    label: 'Tools',
+    value: Tools
+  }, {
+    label: 'Network',
+    value: Network
+  }, {
+    label: 'UI',
+    value: Ui
+  }, {
+    label: 'Stream',
+    value: Stream
+  }];
+};
+
+const getEventCategoryFilterLabel = eventCategoryFilter => {
+  switch (eventCategoryFilter) {
+    case Network:
+      return 'Network';
+    case Stream:
+      return 'Stream';
+    case Tools:
+      return 'Tools';
+    case Ui:
+      return 'UI';
+    default:
+      return 'All';
+  }
+};
+
+const All = 'all';
+const Tools = 'tools';
+const Network = 'network';
+const Ui = 'ui';
+const Stream = 'stream';
+
+const RE_SPACE = /\s+/;
+const tokenToEventCategoryFilter = new Map([['@tools', Tools], ['@network', Network], ['@ui', Ui], ['@stream', Stream]]);
+const parseFilterValue = filterValue => {
+  const normalizedFilter = filterValue.trim().toLowerCase();
+  if (!normalizedFilter) {
+    return {
+      eventCategoryFilter: All,
+      filterText: ''
+    };
+  }
+  const parts = normalizedFilter.split(RE_SPACE);
+  const eventCategoryFilter = parts.map(part => tokenToEventCategoryFilter.get(part)).find(Boolean) || All;
+  const filterText = parts.filter(part => !tokenToEventCategoryFilter.has(part)).join(' ');
+  return {
+    eventCategoryFilter,
+    filterText
+  };
+};
+
+const {
+  get,
+  getCommandIds,
+  registerCommands,
+  set,
+  wrapCommand,
+  wrapGetter
+} = create$1();
+
+const Response = 'response';
+const Preview = 'preview';
+const Timing = 'timing';
+const detailTabs = [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;
+const sashWidth = 8;
+const viewPadding = 8;
+const timelineHorizontalPadding = 10;
+const horizontalPadding = viewPadding * 2;
+const leftPadding = viewPadding;
+const getMainWidth = width => {
+  return Math.max(0, width - horizontalPadding);
+};
+const clampTableWidth = (width, tableWidth) => {
+  const mainWidth = getMainWidth(width);
+  const maxTableWidth = Math.max(0, mainWidth - minDetailsWidth - sashWidth);
+  const minClampedTableWidth = Math.min(minTableWidth, maxTableWidth);
+  return Math.max(minClampedTableWidth, Math.min(tableWidth, maxTableWidth));
+};
+const getDetailsWidth = (width, tableWidth) => {
+  const mainWidth = getMainWidth(width);
+  const clampedTableWidth = clampTableWidth(width, tableWidth);
+  return Math.max(0, mainWidth - clampedTableWidth - sashWidth);
+};
+const getTableWidthFromClientX = (viewX, width, clientX) => {
+  const nextTableWidth = clientX - viewX - leftPadding;
+  return clampTableWidth(width, nextTableWidth);
+};
+
+const createDefaultState = () => {
+  return {
+    assetDir: '',
+    databaseName: 'lvce-chat-view-sessions',
+    dataBaseVersion: 2,
+    errorMessage: '',
+    eventCategoryFilter: All,
+    eventCategoryFilterOptions: createEventCategoryFilterOptions(),
+    events: [],
+    eventStoreName: 'chat-view-events',
+    filterValue: '',
+    height: 0,
+    indexedDbSupportOverride: undefined,
+    initial: false,
+    platform: 0,
+    selectedDetailTab: Response,
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null,
+    sessionId: '',
+    sessionIdIndexName: 'sessionId',
+    showEventStreamFinishedEvents: false,
+    showInputEvents: false,
+    showResponsePartEvents: false,
+    tableWidth: defaultTableWidth,
+    timelineEndSeconds: '',
+    timelineSelectionActive: false,
+    timelineSelectionAnchorSeconds: '',
+    timelineSelectionFocusSeconds: '',
+    timelineStartSeconds: '',
+    uid: 0,
+    uri: '',
+    useDevtoolsLayout: true,
+    width: 0,
+    x: 0,
+    y: 0
+  };
+};
+
+const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
+const getRestoredEventCategoryFilter = savedState => {
+  if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
+    return savedState.eventCategoryFilter;
+  }
+  if (typeof savedState.filterValue === 'string') {
+    return parseFilterValue(savedState.filterValue).eventCategoryFilter;
+  }
+  return All;
+};
+const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '', databaseName = 'lvce-chat-view-sessions', dataBaseVersion = 2, eventStoreName = 'chat-view-events', sessionIdIndexName = 'sessionId', savedState = {}) => {
+  const defaultState = createDefaultState();
+  const {
+    filterValue,
+    selectedEventId,
+    tableWidth,
+    timelineEndSeconds,
+    timelineStartSeconds
+  } = savedState;
+  const restoredEventCategoryFilter = getRestoredEventCategoryFilter(savedState);
+  const state = {
+    ...defaultState,
+    assetDir,
+    databaseName,
+    dataBaseVersion,
+    eventCategoryFilter: restoredEventCategoryFilter,
+    eventStoreName,
+    filterValue: filterValue ?? defaultState.filterValue,
+    height,
+    initial: true,
+    platform,
+    selectedEventId: selectedEventId ?? defaultState.selectedEventId,
+    sessionId,
+    sessionIdIndexName,
+    tableWidth: tableWidth ?? defaultState.tableWidth,
+    timelineEndSeconds: timelineEndSeconds ?? defaultState.timelineEndSeconds,
+    timelineStartSeconds: timelineStartSeconds ?? defaultState.timelineStartSeconds,
+    uid,
+    uri,
+    width,
+    x,
+    y
+  };
+  set(uid, state, state);
+};
+
+const RenderItems = 1;
+const RenderCss = 2;
+const RenderIncremental = 3;
+
+const diff = (oldState, newState) => {
+  if (oldState.errorMessage !== newState.errorMessage || oldState.eventCategoryFilter !== newState.eventCategoryFilter || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.selectedDetailTab !== newState.selectedDetailTab || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.width !== newState.width || oldState.uid !== newState.uid) {
+    return [RenderIncremental, RenderCss];
+  }
+  return [];
+};
+
+const diff2 = uid => {
+  const {
+    newState,
+    oldState
+  } = get(uid);
+  return diff(oldState, newState);
+};
+
+const handleDetailsContextMenu = state => {
+  return state;
+};
+
+// cspell:ignore IDBP
+
+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 getTimestamp$1 = value => {
+  return typeof value === 'string' || typeof value === 'number' ? value : undefined;
+};
+const hasMatchingToolName$1 = (startedEvent, finishedEvent) => {
+  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
+    return startedEvent.toolName === finishedEvent.toolName;
+  }
+  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 getStartedTimestamp = event => {
+  return getTimestamp(event.started) ?? getTimestamp(event.startTime) ?? getTimestamp(event.startTimestamp) ?? getTimestamp(event.timestamp);
+};
+
+const setStableEventId = (event, stableEventId) => {
+  eventStableIds.set(event, stableEventId);
+};
+
+const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
+  const ended = getEndedTimestamp(finishedEvent);
+  const {
+    eventId
+  } = startedEvent;
+  const started = getStartedTimestamp(startedEvent);
+  const mergedEvent = {
+    ...startedEvent,
+    ...finishedEvent,
+    ...(ended === undefined ? {} : {
+      ended
+    }),
+    ...(eventId === undefined ? {} : {
+      eventId
+    }),
+    ...(started === undefined ? {} : {
+      started
+    }),
+    type: mergedEventType
+  };
+  const stableEventId = `${getOrCreateStableEventId(startedEvent)}:${getOrCreateStableEventId(finishedEvent)}`;
+  setStableEventId(mergedEvent, stableEventId);
+  return mergedEvent;
+};
+
+const getStableEventId = event => {
+  return getOrCreateStableEventId(event);
+};
+
+const collapseToolExecutionEvents = events => {
+  const collapsedEvents = [];
+  for (let i = 0; i < events.length; i++) {
+    const event = events[i];
+    if (isToolExecutionStartedEvent(event)) {
+      const nextEvent = events[i + 1];
+      if (nextEvent && isToolExecutionFinishedEvent(nextEvent) && isMatchingToolExecutionPair(event, nextEvent)) {
+        collapsedEvents.push(mergeToolExecutionEvents(event, nextEvent));
+        i++;
+        continue;
+      }
+    }
+    collapsedEvents.push(event);
+  }
+  return collapsedEvents;
+};
+
+const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
+  return events.filter(event => {
+    if (!showInputEvents && event.type === 'handle-input') {
+      return false;
+    }
+    if (!showResponsePartEvents && event.type === 'sse-response-part') {
+      return false;
+    }
+    if (!showEventStreamFinishedEvents && event.type === 'event-stream-finished') {
+      return false;
+    }
+    // hide session creation events by default — not useful in the debug view
+    if (event.type === 'chat-session-created') {
+      return false;
+    }
+    return true;
+  });
+};
+
+const isNetworkEvent = event => {
+  const normalizedType = event.type.toLowerCase();
+  return normalizedType === 'request' || normalizedType === 'response' || normalizedType === 'handle-response' || normalizedType.includes('fetch') || normalizedType.includes('xhr');
+};
+
+const isStreamEvent = event => {
+  return event.type === 'sse-response-part' || event.type === 'event-stream-finished';
+};
+
+const toolEventTypePrefix = 'tool-execution';
+const isToolEvent = event => {
+  return event.type.startsWith(toolEventTypePrefix);
+};
+
+const isUiEvent = event => {
+  return event.type.startsWith('handle-') && event.type !== 'handle-response';
+};
+
+const matchesEventCategoryFilter = (event, eventCategoryFilter) => {
+  switch (eventCategoryFilter) {
+    case Network:
+      return isNetworkEvent(event);
+    case Stream:
+      return isStreamEvent(event);
+    case Tools:
+      return isToolEvent(event);
+    case Ui:
+      return isUiEvent(event);
+    default:
+      return true;
+  }
+};
+
+const getFilteredEvents = (events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
+  const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+  const collapsedEvents = collapseToolExecutionEvents(visibleEvents);
+  const parsedFilter = parseFilterValue(filterValue);
+  const activeEventCategoryFilter = parsedFilter.eventCategoryFilter === All ? eventCategoryFilter : parsedFilter.eventCategoryFilter;
+  const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilter));
+  const {
+    filterText
+  } = parsedFilter;
+  if (!filterText) {
+    return filteredByCategory;
+  }
+  return filteredByCategory.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
+};
+
+const toTimeNumber = value => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const timestamp = Date.parse(value);
+    if (!Number.isNaN(timestamp)) {
+      return timestamp;
+    }
+  }
+  return undefined;
+};
+
+const getEventTime = event => {
+  return toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+};
+
+const maxBarUnits = 8;
+const parseTimelineSeconds = value => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  const parsed = Number.parseFloat(trimmed);
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    return undefined;
+  }
+  return parsed;
+};
+const roundSeconds = value => {
+  return Number(value.toFixed(3));
+};
+const getEventsWithTime = events => {
+  return events.flatMap(event => {
+    const time = getEventTime(event);
+    if (time === undefined) {
+      return [];
+    }
+    return [{
+      event,
+      time
+    }];
+  });
+};
+const getTimelineDurationSeconds = events => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return 0;
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  return roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
+};
+const getSelectionPercent = (value, durationSeconds) => {
+  if (durationSeconds <= 0) {
+    return 0;
+  }
+  return Number((value / durationSeconds * 100).toFixed(3));
+};
+const getNormalizedRange = (durationSeconds, startValue, endValue) => {
+  const parsedStart = parseTimelineSeconds(startValue);
+  const parsedEnd = parseTimelineSeconds(endValue);
+  if (parsedStart === undefined && parsedEnd === undefined) {
+    return {
+      endSeconds: null,
+      hasSelection: false,
+      startSeconds: null
+    };
+  }
+  const rawStart = parsedStart ?? 0;
+  const rawEnd = parsedEnd ?? durationSeconds;
+  const normalizedStart = Math.max(0, Math.min(durationSeconds, Math.min(rawStart, rawEnd)));
+  const normalizedEnd = Math.max(0, Math.min(durationSeconds, Math.max(rawStart, rawEnd)));
+  return {
+    endSeconds: roundSeconds(normalizedEnd),
+    hasSelection: true,
+    startSeconds: roundSeconds(normalizedStart)
+  };
+};
+const filterEventsByTimelineRange = (events, startValue, endValue) => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return events;
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  const durationSeconds = roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
+  const range = getNormalizedRange(durationSeconds, startValue, endValue);
+  if (!range.hasSelection || range.startSeconds === null || range.endSeconds === null) {
+    return events;
+  }
+  const startTime = baseTime + range.startSeconds * 1000;
+  const endTime = baseTime + range.endSeconds * 1000;
+  return eventsWithTime.filter(item => item.time >= startTime && item.time <= endTime).map(item => item.event);
+};
+const getTimelineInfo = (events, startValue, endValue) => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return {
+      buckets: [],
+      durationSeconds: 0,
+      endSeconds: null,
+      hasSelection: false,
+      selectionEndPercent: null,
+      selectionStartPercent: null,
+      startSeconds: null
+    };
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  const durationMs = Math.max(0, lastTime - baseTime);
+  const durationSeconds = roundSeconds(durationMs / 1000);
+  const range = getNormalizedRange(durationSeconds, startValue, endValue);
+  const bucketCount = durationSeconds === 0 ? 1 : Math.max(12, Math.min(48, Math.ceil(durationSeconds)));
+  const bucketDurationMs = durationMs === 0 ? 1000 : durationMs / bucketCount;
+  const counts = Array.from({
+    length: bucketCount
+  }).fill(0);
+  for (const item of eventsWithTime) {
+    const offsetMs = item.time - baseTime;
+    const index = durationMs === 0 ? 0 : Math.min(bucketCount - 1, Math.floor(offsetMs / durationMs * bucketCount));
+    counts[index] += 1;
+  }
+  const maxCount = Math.max(...counts);
+  const selectionStartPercent = range.hasSelection && range.startSeconds !== null ? getSelectionPercent(range.startSeconds, durationSeconds) : null;
+  const selectionEndPercent = range.hasSelection && range.endSeconds !== null ? getSelectionPercent(range.endSeconds, durationSeconds) : null;
+  const buckets = counts.map((count, index) => {
+    const bucketStartMs = index * bucketDurationMs;
+    const bucketEndMs = index === bucketCount - 1 ? durationMs : (index + 1) * bucketDurationMs;
+    const hasSelection = range.hasSelection && range.startSeconds !== null && range.endSeconds !== null;
+    const selectionStartMs = hasSelection ? range.startSeconds * 1000 : 0;
+    const selectionEndMs = hasSelection ? range.endSeconds * 1000 : 0;
+    return {
+      count,
+      endSeconds: roundSeconds(bucketEndMs / 1000),
+      isSelected: hasSelection && bucketEndMs >= selectionStartMs && bucketStartMs <= selectionEndMs,
+      startSeconds: roundSeconds(bucketStartMs / 1000),
+      unitCount: count === 0 ? 0 : Math.max(1, Math.round(count / maxCount * maxBarUnits))
+    };
+  });
+  return {
+    buckets,
+    durationSeconds,
+    endSeconds: range.endSeconds,
+    hasSelection: range.hasSelection,
+    selectionEndPercent,
+    selectionStartPercent,
+    startSeconds: range.startSeconds
+  };
+};
+
+const getCurrentEvents$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 selectEventAtIndex = async (state, selectedEventIndex, dependencies) => {
+  const currentEvents = getCurrentEvents$2(state);
+  const selectedEvent = currentEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return {
+      ...state,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex
+    };
+  }
+  if (typeof selectedEvent.eventId !== 'number') {
+    return {
+      ...state,
+      selectedEvent,
+      selectedEventId: null,
+      selectedEventIndex
+    };
+  }
+  const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  return {
+    ...state,
+    selectedEvent: selectedEventDetails ?? selectedEvent,
+    selectedEventId: selectedEvent.eventId,
+    selectedEventIndex
+  };
+};
+
+const handleEventRowClickDependencies = {
+  loadSelectedEvent: loadSelectedEvent
+};
+const isPrimaryButton = button => {
+  return button === 0;
+};
+const parseSelectedEventIndex$1 = value => {
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed) || parsed < 0) {
+    return null;
+  }
+  return parsed;
+};
+const handleEventRowClick = async (state, value, button) => {
+  if (!isPrimaryButton(button)) {
+    return state;
+  }
+  const selectedEventIndex = parseSelectedEventIndex$1(value);
+  if (selectedEventIndex === null) {
+    return state;
+  }
+  return selectEventAtIndex(state, selectedEventIndex, handleEventRowClickDependencies);
+};
+
+const handleHeaderContextMenu = state => {
+  return state;
+};
+
+const getBoolean = value => {
+  return value === true || value === 'true' || value === 'on' || value === '1';
+};
+
+const Filter = 'filter';
+const EventCategoryFilter = 'eventCategoryFilter';
+const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
+const ShowInputEvents = 'showInputEvents';
+const ShowResponsePartEvents = 'showResponsePartEvents';
+const UseDevtoolsLayout = 'useDevtoolsLayout';
+const SelectedEventIndex = 'selectedEventIndex';
+const CloseDetails = 'closeDetails';
+const DetailTab = 'detailTab';
+const TimelineStartSeconds = 'timelineStartSeconds';
+const TimelineEndSeconds = 'timelineEndSeconds';
+const TimelineRangePreset = 'timelineRangePreset';
+
+const getCurrentEvents$1 = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const parseTimelineRangePreset = value => {
+  if (!value) {
+    return {
+      timelineEndSeconds: '',
+      timelineStartSeconds: ''
+    };
+  }
+  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
+  return {
+    timelineEndSeconds,
+    timelineStartSeconds
+  };
+};
+const getEventIndexByStableId = (events, event) => {
+  const stableEventId = getStableEventId(event);
+  return events.findIndex(candidate => getStableEventId(candidate) === stableEventId);
+};
+const getSelectedEventIndex = state => {
+  const {
+    selectedEventIndex
+  } = state;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const filteredEvents = getCurrentEvents$1(state);
+  const selectedEvent = filteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newIndex = getEventIndexByStableId(filteredEvents, selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
+};
+const getPreservedSelectedEventIndex = (oldState, newState) => {
+  const {
+    selectedEventIndex
+  } = oldState;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const oldFilteredEvents = getCurrentEvents$1(oldState);
+  const selectedEvent = oldFilteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newFilteredEvents = getCurrentEvents$1(newState);
+  const newIndex = getEventIndexByStableId(newFilteredEvents, selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
+};
+const parseSelectedEventIndex = value => {
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed) || parsed < 0) {
+    return null;
+  }
+  return parsed;
+};
+const withPreservedSelection = (state, nextState) => {
+  const selectedEventIndex = getPreservedSelectedEventIndex(state, nextState);
+  return {
+    ...nextState,
+    selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
+    selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
+    selectedEventIndex
+  };
+};
+const handleInput = (state, name, value, checked) => {
+  if (name === Filter) {
+    const nextState = {
+      ...state,
+      filterValue: value
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === EventCategoryFilter) {
+    const nextState = {
+      ...state,
+      eventCategoryFilter: value || All
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === ShowEventStreamFinishedEvents) {
+    const nextState = {
+      ...state,
+      showEventStreamFinishedEvents: getBoolean(checked)
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === ShowInputEvents) {
+    const nextState = {
+      ...state,
+      showInputEvents: getBoolean(checked)
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === ShowResponsePartEvents) {
+    const nextState = {
+      ...state,
+      showResponsePartEvents: getBoolean(checked)
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === UseDevtoolsLayout) {
+    const useDevtoolsLayout = getBoolean(checked);
+    const selectedEventIndex = useDevtoolsLayout ? getSelectedEventIndex(state) : null;
+    return {
+      ...state,
+      selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
+      selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
+      selectedEventIndex,
+      useDevtoolsLayout
+    };
+  }
+  if (name === SelectedEventIndex) {
+    const selectedEventIndex = parseSelectedEventIndex(value);
+    return {
+      ...state,
+      selectedEvent: selectedEventIndex === null ? null : state.selectedEvent,
+      selectedEventId: selectedEventIndex === null ? null : state.selectedEventId,
+      selectedEventIndex
+    };
+  }
+  if (name === TimelineStartSeconds) {
+    const nextState = {
+      ...state,
+      timelineStartSeconds: value
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === TimelineEndSeconds) {
+    const nextState = {
+      ...state,
+      timelineEndSeconds: value
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === TimelineRangePreset) {
+    const nextState = {
+      ...state,
+      ...parseTimelineRangePreset(value)
+    };
+    return withPreservedSelection(state, nextState);
+  }
+  if (name === CloseDetails) {
+    return {
+      ...state,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null
+    };
+  }
+  if (name === DetailTab) {
+    if (!isDetailTab(value)) {
+      return state;
+    }
+    return {
+      ...state,
+      selectedDetailTab: value
+    };
+  }
+  return state;
+};
+
+const handleSashPointerDown = (state, eventX, eventY) => {
+  return state;
+};
+
+const handleSashPointerMove = (state, eventX, eventY) => {
+  return {
+    ...state,
+    tableWidth: getTableWidthFromClientX(state.x, state.width, eventX)
+  };
+};
+
+const handleSashPointerUp = (state, eventX, eventY) => {
+  return state;
+};
+
+const handleTableBodyContextMenu = state => {
+  return state;
+};
+
+const clearTimelineSelectionState = state => {
+  return {
+    ...state,
+    timelineSelectionActive: false,
+    timelineSelectionAnchorSeconds: '',
+    timelineSelectionFocusSeconds: ''
+  };
+};
+
+const handleTimelineDoubleClick = state => {
+  const nextState = handleInput(state, TimelineRangePreset, '', false);
+  return clearTimelineSelectionState(nextState);
+};
+
+const getTimelineEvents = state => {
+  const {
+    eventCategoryFilter,
+    events,
+    filterValue,
+    showEventStreamFinishedEvents,
+    showInputEvents,
+    showResponsePartEvents
+  } = state;
+  return getFilteredEvents(events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+};
+
+const getTimelineLeft = state => {
+  return state.x + viewPadding + timelineHorizontalPadding;
+};
+const getTimelineWidth = state => {
+  return Math.max(0, getMainWidth(state.width) - timelineHorizontalPadding * 2);
+};
+
+const trailingZeroFractionRegex = /\.0+$/;
+const trailingFractionZeroRegex = /(\.\d*?)0+$/;
+const formatTimelinePresetValue = value => {
+  return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
+};
+
+const getTimelineSecondsFromClientX = (events, eventX, timelineLeft, timelineWidth) => {
+  if (timelineWidth <= 0) {
+    return undefined;
+  }
+  const durationSeconds = getTimelineDurationSeconds(events);
+  const relativeX = Math.min(Math.max(eventX - timelineLeft, 0), timelineWidth);
+  const ratio = relativeX / timelineWidth;
+  return formatTimelinePresetValue(durationSeconds * ratio);
+};
+
+const handleTimelinePointerDown = (state, eventX) => {
+  const timelineEvents = getTimelineEvents(state);
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = state.x + eventX;
+  const seconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (seconds === undefined) {
+    return state;
+  }
+  return {
+    ...state,
+    timelineSelectionActive: true,
+    timelineSelectionAnchorSeconds: seconds,
+    timelineSelectionFocusSeconds: seconds
+  };
+};
+
+const handleTimelinePointerMove = (state, eventX) => {
+  if (!state.timelineSelectionActive) {
+    return state;
+  }
+  const timelineEvents = getTimelineEvents(state);
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = state.x + eventX;
+  const seconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (seconds === undefined) {
+    return state;
+  }
+  return {
+    ...state,
+    timelineSelectionFocusSeconds: seconds
+  };
+};
+
+const handleTimelinePointerUp = (state, eventX) => {
+  if (!state.timelineSelectionActive) {
+    return state;
+  }
+  const timelineEvents = getTimelineEvents(state);
+  const timelineLeft = getTimelineLeft(state);
+  const timelineWidth = getTimelineWidth(state);
+  const clientX = state.x + eventX;
+  const focusSeconds = getTimelineSecondsFromClientX(timelineEvents, clientX, timelineLeft, timelineWidth);
+  if (focusSeconds === undefined) {
+    return clearTimelineSelectionState(state);
+  }
+  const anchor = Number.parseFloat(state.timelineSelectionAnchorSeconds);
+  const focus = Number.parseFloat(focusSeconds);
+  const startSeconds = formatTimelinePresetValue(Math.min(anchor, focus));
+  const endSeconds = formatTimelinePresetValue(Math.max(anchor, focus));
+  const nextState = handleInput(state, TimelineRangePreset, `${startSeconds}:${endSeconds}`, false);
+  return clearTimelineSelectionState(nextState);
+};
+
+const getFailedToLoadMessage = sessionId => {
+  return `Failed to load chat debug session "${sessionId}". Please try again.`;
+};
+
+const getIndexedDbNotSupportedMessage = () => {
+  return 'Unable to load chat debug session: IndexedDB is not supported in this environment.';
+};
+
+const ParseChatDebugUriErrorCode = {
+  InvalidSessionId: 'invalid-session-id',
+  InvalidUriEncoding: 'invalid-uri-encoding',
+  InvalidUriFormat: 'invalid-uri-format',
+  MissingUri: 'missing-uri'
+};
+
+const getInvalidUriMessage = (uri, code) => {
+  if (code === ParseChatDebugUriErrorCode.MissingUri) {
+    return 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
+  }
+  return `Unable to load debug session: invalid URI "${uri}". Expected format: chat-debug://<sessionId>.`;
+};
+
+const getSessionNotFoundMessage = sessionId => {
+  return `No chat session found for sessionId "${sessionId}".`;
+};
+
+const filterEventsBySessionId = (events, sessionId) => {
+  return events.filter(event => event.sessionId === sessionId);
+};
+
+// cspell:ignore IDBP
+
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+const getAllEvents = async store => {
+  const all = await store.getAll();
+  return all;
+};
+
+const getEndTime = event => {
+  return event.ended ?? event.endTime ?? event.timestamp;
+};
+
+const getStartTime = event => {
+  return event.started ?? event.startTime ?? event.timestamp;
+};
+
+const getDuration = event => {
+  const explicitDuration = event.durationMs ?? event.duration;
+  if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
+    return explicitDuration;
+  }
+  const start = toTimeNumber(getStartTime(event));
+  const end = toTimeNumber(getEndTime(event));
+  if (start === undefined || end === undefined || !Number.isFinite(start) || !Number.isFinite(end)) {
+    return 0;
+  }
+  return Math.max(0, end - start);
+};
+
+const isTimeValue = value => {
+  return typeof value === 'number' || typeof value === 'string';
+};
+
+const getLightweightEvent = (event, fallbackEventId) => {
+  const startTime = getStartTime(event);
+  const endTime = getEndTime(event);
+  return {
+    duration: getDuration(event),
+    ...(isTimeValue(endTime) ? {
+      endTime
+    } : {}),
+    eventId: typeof event.eventId === 'number' ? event.eventId : fallbackEventId,
+    ...(isTimeValue(startTime) ? {
+      startTime
+    } : {}),
+    type: event.type
+  };
+};
+
+// cspell:ignore IDBP
+
+const toLightweightEvents = events => {
+  const eventsWithIds = events.map((event, index) => {
+    return {
+      ...event,
+      eventId: index + 1
+    };
+  });
+  return collapseToolExecutionEvents(eventsWithIds).map((event, index) => getLightweightEvent(event, index + 1));
+};
+const getEventsBySessionId = async (store, sessionId, sessionIdIndexName) => {
+  if (store.indexNames.contains(sessionIdIndexName)) {
+    const index = store.index(sessionIdIndexName);
+    const events = await index.getAll(sessionId);
+    return toLightweightEvents(filterEventsBySessionId(events, sessionId));
+  }
+  const all = await getAllEvents(store);
+  return toLightweightEvents(filterEventsBySessionId(all, sessionId));
+};
+
+let indexedDbSupportOverride;
+const getIndexedDbSupportOverride = () => {
+  return indexedDbSupportOverride;
+};
+const setIndexedDbSupportOverride = supported => {
+  indexedDbSupportOverride = supported;
+};
+
+const isIndexedDbSupported = indexedDbSupportOverride => {
+  if (typeof indexedDbSupportOverride === 'boolean') {
+    return indexedDbSupportOverride;
+  }
+  const override = getIndexedDbSupportOverride();
+  if (typeof override === 'boolean') {
+    return override;
+  }
+  return globalThis.indexedDB !== undefined;
+};
+
+const listChatViewEventsDependencies = {
+  getEventsBySessionId: getEventsBySessionId,
+  openDatabase: openDatabase
+};
+const listChatViewEvents = async (sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName, indexedDbSupportOverride) => {
+  if (!isIndexedDbSupported(indexedDbSupportOverride)) {
+    return {
+      type: 'not-supported'
+    };
+  }
+  try {
+    const database = await listChatViewEventsDependencies.openDatabase(databaseName, dataBaseVersion);
+    try {
+      if (!database.objectStoreNames.contains(eventStoreName)) {
+        return {
+          events: [],
+          type: 'success'
+        };
+      }
+      const transaction = database.transaction(eventStoreName, 'readonly');
+      const store = transaction.objectStore(eventStoreName);
+      if (!sessionId) {
+        return {
+          events: [],
+          type: 'success'
+        };
+      }
+      const events = await listChatViewEventsDependencies.getEventsBySessionId(store, sessionId, sessionIdIndexName);
+      return {
+        events,
+        type: 'success'
+      };
+    } finally {
+      database.close();
+    }
+  } catch (error) {
+    return {
+      error,
+      type: 'error'
+    };
+  }
+};
+
+const chatDebugUriPattern = /^chat-debug:\/\/([^/?#]+)$/;
+const invalidSessionIdPattern = /[/?#]/;
+const parseChatDebugUri = uri => {
+  if (!uri) {
+    return {
+      code: ParseChatDebugUriErrorCode.MissingUri,
+      message: 'Missing URI',
+      type: 'error'
+    };
+  }
+  const match = uri.match(chatDebugUriPattern);
+  if (!match) {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriFormat,
+      message: 'Invalid URI format',
+      type: 'error'
+    };
+  }
+  const encodedSessionId = match[1];
+  let sessionId;
+  try {
+    sessionId = decodeURIComponent(encodedSessionId);
+  } catch {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
+      message: 'Invalid URI encoding',
+      type: 'error'
+    };
+  }
+  if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidSessionId,
+      message: 'Invalid session id',
+      type: 'error'
+    };
+  }
+  return {
+    sessionId,
+    type: 'success'
+  };
+};
+
+const loadEventsDependencies = {
+  listChatViewEvents: listChatViewEvents,
+  loadSelectedEvent: loadSelectedEvent
+};
+const getCurrentEvents = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const restoreSelectedEvent = async state => {
+  if (state.selectedEventId === null) {
+    return {
+      ...state,
+      selectedEvent: null,
+      selectedEventIndex: null
+    };
+  }
+  const currentEvents = getCurrentEvents(state);
+  const selectedEventIndex = currentEvents.findIndex(event => event.eventId === state.selectedEventId);
+  if (selectedEventIndex === -1) {
+    return {
+      ...state,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null
+    };
+  }
+  const selectedEvent = currentEvents[selectedEventIndex];
+  if (!selectedEvent || typeof selectedEvent.eventId !== 'number') {
+    return {
+      ...state,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null
+    };
+  }
+  const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  return {
+    ...state,
+    selectedEvent: selectedEventDetails,
+    selectedEventId: selectedEvent.eventId,
+    selectedEventIndex
+  };
+};
+const getStateWithInvalidUri = state => {
+  const parsed = parseChatDebugUri(state.uri);
+  if (parsed.type !== 'error') {
+    return state;
+  }
+  return {
+    ...state,
+    errorMessage: getInvalidUriMessage(state.uri, parsed.code),
+    events: [],
+    initial: false,
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null,
+    sessionId: ''
+  };
+};
+const getSessionIdFromUri = state => {
+  const parsed = parseChatDebugUri(state.uri);
+  if (parsed.type === 'error') {
+    return undefined;
+  }
+  return parsed.sessionId;
+};
+const loadEventsForSessionId = async (state, sessionId) => {
+  const {
+    databaseName,
+    dataBaseVersion,
+    eventStoreName,
+    indexedDbSupportOverride,
+    sessionIdIndexName
+  } = state;
+  const result = await loadEventsDependencies.listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName, indexedDbSupportOverride);
+  if (result.type === 'not-supported') {
+    return {
+      ...state,
+      errorMessage: getIndexedDbNotSupportedMessage(),
+      events: [],
+      initial: false,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null,
+      sessionId
+    };
+  }
+  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) {
+    return {
+      ...state,
+      errorMessage: getSessionNotFoundMessage(sessionId),
+      events: [],
+      initial: false,
+      selectedEvent: null,
+      selectedEventId: null,
+      selectedEventIndex: null,
+      sessionId
+    };
+  }
+  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 loadContent = async state => {
+  return loadEventsFromUri(state);
+};
+
+const refresh = async state => {
+  return refreshEvents(state);
+};
+
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const TargetChecked = 'event.target.checked';
+const TargetName = 'event.target.name';
+const TargetValue = 'event.target.value';
+
+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);
+}
+
+.ChatDebugViewEventRowInput {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  contain: content;
+}
+
+.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;
+}
+
+.ChatDebugViewTableBody > .ChatDebugViewEventRow:nth-child(even) {
+  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 84%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.31)) 16%);
+}
+
+.ChatDebugViewEventRow:hover {
+  background: var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.31));
+  color: var(--vscode-list-hoverForeground, inherit);
+}
+
+.ChatDebugViewCell {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  pointer-events: none;
+  contain: content;
+}
+
+.ChatDebugViewCellType {
+  flex: 1 1 140px;
+  min-width: 0;
+}
+
+.ChatDebugViewCellTime {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.ChatDebugViewCellDuration {
+  flex: 0 0 90px;
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.ChatDebugViewCellStatus {
+  flex: 0 0 64px;
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.ChatDebugViewCellStatusError {
+  color: var(--vscode-errorForeground, #f14c4c);
+}
+
+.ChatDebugViewDetails {
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border-radius: 6px;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  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;
+  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 {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: stretch;
+  contain: strict;
+}
+
+.ChatDebugViewDetailsTabs {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 2px;
+  min-width: 0;
+  padding: 0;
+  overflow-x: auto;
+  contain: content;
+}
+
+.ChatDebugViewDetailsTab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  padding: 0 10px;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  color: var(--vscode-descriptionForeground, var(--vscode-foreground, #cccccc));
+  cursor: pointer;
+  white-space: nowrap;
+  contain: content;
+}
+
+.ChatDebugViewDetailsTab:hover {
+  color: var(--vscode-foreground, #cccccc);
+}
+
+.ChatDebugViewDetailsTabSelected {
+  border-bottom-color: var(--vscode-focusBorder, #007fd4);
+  color: var(--vscode-focusBorder, #007fd4);
+}
+
+.ChatDebugViewDetailsPanel {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: 8px;
+  flex: 1 1 auto;
+  min-height: 0;
+  align-items: flex-start;
+  contain: strict;
+}
+
+.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-radius: 6px;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 12px;
+  user-select: text;
+  contain: content;
+}
+
+.row {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-width: 100%;
+  width: max-content;
+  white-space: nowrap;
+  contain: strict;
+  height: 20px;
+}
+
+.ChatDebugViewEventLineNumber {
+  display: flex;
+  justify-content: flex-end;
+  flex: 0 0 3ch;
+  opacity: 0.6;
+  user-select: none;
+  contain: content;
+}
+
+.ChatDebugViewEventLineContent {
+  display: flex;
+  white-space: pre;
+  contain: content;
+}
+
+.ChatDebugViewDetailsPanel > .ChatDebugViewEvent {
+  border: 0;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+
+.ChatDebugViewTiming {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  contain: strict;
+  flex: 1;
+}
+
+.ChatDebugViewTimingRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
+  contain: content;
+}
+
+.ChatDebugViewTimingRow:last-child {
+  border-bottom: 0;
+}
+
+.ChatDebugViewTimingLabel {
+  opacity: 0.8;
+  contain: content;
+}
+
+.ChatDebugViewTimingValue {
+  text-align: right;
+  font-family: var(--vscode-editor-font-family, monospace);
+  contain: content;
+}
+
+.ChatDebugViewEmpty {
+  display: flex;
+  align-items: center;
+  opacity: 0.8;
+  contain: content;
+}
+
+.ChatDebugViewError {
+  display: flex;
+  color: var(--vscode-errorForeground, #f14c4c);
+  white-space: normal;
+  contain: content;
+}
+
+.TokenText {
+  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));
+}
+
+.TokenBoolean {
+  color: var(--vscode-debugTokenExpression-boolean, var(--vscode-charts-yellow, #dcdcaa));
+}
+
+.ChatOrderedList{
+  display:flex;
+  flex-direction:column;
+  margin:0;
+  padding:0;
+  padding-left:10px;
+  contain: content;
+}
+
+.ChatOrderedListItem{
+  display:flex;
+  margin:0;
+  padding:0;
+  contain: content;
+}
+
+.ChatToolCalls{
+  display:flex;
+  flex-direction:column;
+  margin:0;
+  padding:0;
+  contain: content;
+}
+`;
+};
+
+const renderCss = (oldState, newState) => {
+  const css = getCss(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,
+    text: data,
+    type: Text
+  };
+};
+
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const SetReferenceNodeUid = 11;
+
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
+};
+
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
+
+const arrayToTree = nodes => {
+  const result = [];
+  let i = 0;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    const {
+      children,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
+    result.push({
+      node,
+      children
+    });
+    i += 1 + nodesConsumed;
+  }
+  return result;
+};
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
+    return {
+      children: [],
+      nodesConsumed: 0
+    };
+  }
+  const children = [];
+  let i = startIndex;
+  let remaining = childCount;
+  let totalConsumed = 0;
+  while (remaining > 0 && i < nodes.length) {
+    const node = nodes[i];
+    const nodeChildCount = node.childCount || 0;
+    const {
+      children: nodeChildren,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
+    children.push({
+      node,
+      children: nodeChildren
+    });
+    const nodeSize = 1 + nodesConsumed;
+    i += nodeSize;
+    totalConsumed += nodeSize;
+    remaining--;
+  }
+  return {
+    children,
+    nodesConsumed: totalConsumed
+  };
+};
+
+const compareNodes = (oldNode, newNode) => {
+  const patches = [];
+  // Check if node type changed - return null to signal incompatible nodes
+  // (caller should handle this with a Replace operation)
+  if (oldNode.type !== newNode.type) {
+    return null;
+  }
+  // Handle reference nodes - special handling for uid changes
+  if (oldNode.type === Reference) {
+    if (oldNode.uid !== newNode.uid) {
+      patches.push({
+        type: SetReferenceNodeUid,
+        uid: newNode.uid
+      });
+    }
+    return patches;
+  }
+  // Handle text nodes
+  if (oldNode.type === Text && newNode.type === Text) {
+    if (oldNode.text !== newNode.text) {
+      patches.push({
+        type: SetText,
+        value: newNode.text
+      });
+    }
+    return patches;
+  }
+  // Compare attributes
+  const oldKeys = getKeys(oldNode);
+  const newKeys = getKeys(newNode);
+  // Check for attribute changes
+  for (const key of newKeys) {
+    if (oldNode[key] !== newNode[key]) {
+      patches.push({
+        type: SetAttribute,
+        key,
+        value: newNode[key]
+      });
+    }
+  }
+  // Check for removed attributes
+  for (const key of oldKeys) {
+    if (!(key in newNode)) {
+      patches.push({
+        type: RemoveAttribute,
+        key
+      });
+    }
+  }
+  return patches;
+};
+
+const treeToArray = node => {
+  const result = [node.node];
+  for (const child of node.children) {
+    result.push(...treeToArray(child));
+  }
+  return result;
+};
+
+const diffChildren = (oldChildren, newChildren, patches) => {
+  const maxLength = Math.max(oldChildren.length, newChildren.length);
+  // Track where we are: -1 means at parent, >= 0 means at child index
+  let currentChildIndex = -1;
+  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
+  const indicesToRemove = [];
+  for (let i = 0; i < maxLength; i++) {
+    const oldNode = oldChildren[i];
+    const newNode = newChildren[i];
+    if (!oldNode && !newNode) {
+      continue;
+    }
+    if (!oldNode) {
+      // Add new node - we should be at the parent
+      if (currentChildIndex >= 0) {
+        // Navigate back to parent
+        patches.push({
+          type: NavigateParent
+        });
+        currentChildIndex = -1;
+      }
+      // Flatten the entire subtree so renderInternal can handle it
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Add,
+        nodes: flatNodes
+      });
+    } else if (newNode) {
+      // Compare nodes to see if we need any patches
+      const nodePatches = compareNodes(oldNode.node, newNode.node);
+      // If nodePatches is null, the node types are incompatible - need to replace
+      if (nodePatches === null) {
+        // Navigate to this child
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Replace the entire subtree
+        const flatNodes = treeToArray(newNode);
+        patches.push({
+          type: Replace,
+          nodes: flatNodes
+        });
+        // After replace, we're at the new element (same position)
+        continue;
+      }
+      // Check if we need to recurse into children
+      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+      // Only navigate to this element if we need to do something
+      if (nodePatches.length > 0 || hasChildrenToCompare) {
+        // Navigate to this child if not already there
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Apply node patches (these apply to the current element, not children)
+        if (nodePatches.length > 0) {
+          patches.push(...nodePatches);
+        }
+        // Compare children recursively
+        if (hasChildrenToCompare) {
+          diffChildren(oldNode.children, newNode.children, patches);
+        }
+      }
+    } else {
+      // Remove old node - collect the index for later removal
+      indicesToRemove.push(i);
+    }
+  }
+  // Navigate back to parent if we ended at a child
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+    currentChildIndex = -1;
+  }
+  // Add remove patches in reverse order (highest index first)
+  // This ensures indices remain valid as we remove
+  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
+    patches.push({
+      type: RemoveChild,
+      index: indicesToRemove[j]
+    });
+  }
+};
+const diffTrees = (oldTree, newTree, patches, path) => {
+  // At the root level (path.length === 0), we're already AT the element
+  // So we compare the root node directly, then compare its children
+  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
+    const oldNode = oldTree[0];
+    const newNode = newTree[0];
+    // Compare root nodes
+    const nodePatches = compareNodes(oldNode.node, newNode.node);
+    // If nodePatches is null, the root node types are incompatible - need to replace
+    if (nodePatches === null) {
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Replace,
+        nodes: flatNodes
+      });
+      return;
+    }
+    if (nodePatches.length > 0) {
+      patches.push(...nodePatches);
+    }
+    // Compare children
+    if (oldNode.children.length > 0 || newNode.children.length > 0) {
+      diffChildren(oldNode.children, newNode.children, patches);
+    }
+  } else {
+    // Non-root level or multiple root elements - use the regular comparison
+    diffChildren(oldTree, newTree, patches);
+  }
+};
+
+const removeTrailingNavigationPatches = patches => {
+  // Find the last non-navigation patch
+  let lastNonNavigationIndex = -1;
+  for (let i = patches.length - 1; i >= 0; i--) {
+    const patch = patches[i];
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+      lastNonNavigationIndex = i;
+      break;
+    }
+  }
+  // Return patches up to and including the last non-navigation patch
+  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+};
+
+const diffTree = (oldNodes, newNodes) => {
+  // Step 1: Convert flat arrays to tree structures
+  const oldTree = arrayToTree(oldNodes);
+  const newTree = arrayToTree(newNodes);
+  // Step 3: Compare the trees
+  const patches = [];
+  diffTrees(oldTree, newTree, patches, []);
+  // Remove trailing navigation patches since they serve no purpose
+  return removeTrailingNavigationPatches(patches);
+};
+
+const ChatDebugView = 'ChatDebugView';
+const ChatDebugViewDevtools = 'ChatDebugView--devtools';
+const ChatDebugViewDetails = 'ChatDebugViewDetails';
+const ChatDebugViewDetailsBody = 'ChatDebugViewDetailsBody';
+const ChatDebugViewDetailsClose = 'ChatDebugViewDetailsClose';
+const ChatDebugViewDetailsPanel = 'ChatDebugViewDetailsPanel';
+const ChatDebugViewDetailsTab = 'ChatDebugViewDetailsTab';
+const ChatDebugViewDetailsTabSelected = 'ChatDebugViewDetailsTabSelected';
+const ChatDebugViewDetailsTabs = 'ChatDebugViewDetailsTabs';
+const ChatDebugViewDetailsTop = 'ChatDebugViewDetailsTop';
+const ChatDebugViewDevtoolsMain = 'ChatDebugViewDevtoolsMain';
+const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
+const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
+const ChatDebugViewError = 'ChatDebugViewError';
+const ChatDebugViewEvent = 'ChatDebugViewEvent';
+const ChatDebugViewEventLineContent = 'ChatDebugViewEventLineContent';
+const ChatDebugViewEventLineNumber = 'ChatDebugViewEventLineNumber';
+const ChatDebugViewEventRow = 'ChatDebugViewEventRow';
+const ChatDebugViewEventRowSelected = 'ChatDebugViewEventRowSelected';
+const ChatDebugViewEvents = 'ChatDebugViewEvents';
+const ChatDebugViewEventsFullWidth = 'ChatDebugViewEventsFullWidth';
+const ChatDebugViewFilterInput = 'ChatDebugViewFilterInput';
+const ChatDebugViewFilterInputDevtools = 'ChatDebugViewFilterInput--devtools';
+const ChatDebugViewHeaderCell = 'ChatDebugViewHeaderCell';
+const ChatDebugViewQuickFilterInput = 'ChatDebugViewQuickFilterInput';
+const ChatDebugViewQuickFilterPill = 'ChatDebugViewQuickFilterPill';
+const ChatDebugViewQuickFilterPillSelected = 'ChatDebugViewQuickFilterPillSelected';
+const ChatDebugViewQuickFilters = 'ChatDebugViewQuickFilters';
+const ChatDebugViewSash = 'ChatDebugViewSash';
+const ChatDebugViewSashLine = 'ChatDebugViewSashLine';
+const ChatDebugViewTable = 'ChatDebugViewTable';
+const ChatDebugViewTableBody = 'ChatDebugViewTableBody';
+const ChatDebugViewTableHeader = 'ChatDebugViewTableHeader';
+const ChatDebugViewTableHeaderRow = 'ChatDebugViewTableHeaderRow';
+const ChatDebugViewTimeline = 'ChatDebugViewTimeline';
+const ChatDebugViewTimelineBucket = 'ChatDebugViewTimelineBucket';
+const ChatDebugViewTimelineBucketBar = 'ChatDebugViewTimelineBucketBar';
+const ChatDebugViewTimelineBucketBarSelected = 'ChatDebugViewTimelineBucketBarSelected';
+const ChatDebugViewTimelineBucketSelected = 'ChatDebugViewTimelineBucketSelected';
+const ChatDebugViewTimelineBucketUnit = 'ChatDebugViewTimelineBucketUnit';
+const ChatDebugViewTimelineBucketUnitEmpty = 'ChatDebugViewTimelineBucketUnitEmpty';
+const ChatDebugViewTimelineBuckets = 'ChatDebugViewTimelineBuckets';
+const ChatDebugViewTimelineInteractive = 'ChatDebugViewTimelineInteractive';
+const ChatDebugViewTimelinePresetInput = 'ChatDebugViewTimelinePresetInput';
+const ChatDebugViewTimelineSelectionMarker = 'ChatDebugViewTimelineSelectionMarker';
+const ChatDebugViewTimelineSelectionMarkerEnd = 'ChatDebugViewTimelineSelectionMarkerEnd';
+const ChatDebugViewTimelineSelectionMarkerStart = 'ChatDebugViewTimelineSelectionMarkerStart';
+const ChatDebugViewTimelineSelectionOverlay = 'ChatDebugViewTimelineSelectionOverlay';
+const ChatDebugViewTimelineSelectionRange = 'ChatDebugViewTimelineSelectionRange';
+const ChatDebugViewTimelineSummary = 'ChatDebugViewTimelineSummary';
+const ChatDebugViewTimelineTop = 'ChatDebugViewTimelineTop';
+const ChatDebugViewTiming = 'ChatDebugViewTiming';
+const ChatDebugViewTimingLabel = 'ChatDebugViewTimingLabel';
+const ChatDebugViewTimingRow = 'ChatDebugViewTimingRow';
+const ChatDebugViewTimingValue = 'ChatDebugViewTimingValue';
+const ChatDebugViewTop = 'ChatDebugViewTop';
+const ChatDebugViewTopDevtools = 'ChatDebugViewTop--devtools';
+const ChatDebugViewCell = 'ChatDebugViewCell';
+const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
+const ChatDebugViewCellStatus = 'ChatDebugViewCellStatus';
+const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
+const ChatDebugViewCellType = 'ChatDebugViewCellType';
+const InputBox = 'InputBox';
+const Row = 'row';
+const TokenBoolean = 'TokenBoolean';
+const TokenKey = 'TokenKey';
+const TokenNumeric = 'TokenNumeric';
+const TokenString = 'TokenString';
+const TokenText = 'TokenText';
+const joinClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
+const getDebugErrorDom = errorMessage => {
+  return [{
+    childCount: 1,
+    className: ChatDebugView,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ChatDebugViewError,
+    type: Div
+  }, text(errorMessage)];
+};
+
+const HandleInput = 4;
+const HandleFilterInput = 5;
+const HandleSimpleInput = 6;
+const HandleEventRowClick = 7;
+const HandleHeaderContextMenu = 8;
+const HandleSashPointerDown = 9;
+const HandleSashPointerMove = 10;
+const HandleSashPointerUp = 11;
+const HandleTableBodyContextMenu = 12;
+const HandleDetailsContextMenu = 13;
+const HandleTimelinePointerDown = 14;
+const HandleTimelinePointerMove = 15;
+const HandleTimelinePointerUp = 16;
+const HandleTimelineDoubleClick = 17;
+const HandleTableKeyDown = 18;
+
+const getDebugViewTopDom = (filterValue, useDevtoolsLayout, quickFilterNodes) => {
+  if (useDevtoolsLayout) {
+    return [{
+      childCount: 1 + (quickFilterNodes.length > 0 ? 1 : 0),
+      className: joinClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
+      onContextMenu: HandleHeaderContextMenu,
+      type: Search
+    }, {
+      autocomplete: 'off',
+      childCount: 0,
+      className: joinClassNames(InputBox, ChatDebugViewFilterInput, ChatDebugViewFilterInputDevtools),
+      inputType: 'search',
+      name: Filter,
+      onInput: HandleFilterInput,
+      placeholder: 'Filter events',
+      type: Input,
+      value: filterValue
+    }, ...quickFilterNodes];
+  }
+  return [{
+    childCount: 1,
+    className: ChatDebugViewTop,
+    onContextMenu: HandleHeaderContextMenu,
+    type: Search
+  }, {
+    autocomplete: 'off',
+    childCount: 0,
+    className: joinClassNames(InputBox, ChatDebugViewFilterInput),
+    inputType: 'search',
+    name: Filter,
+    onInput: HandleFilterInput,
+    placeholder: 'Filter events',
+    type: Input,
+    value: filterValue
+  }];
+};
+
+const getDurationText = event => {
+  const explicitDuration = event.durationMs ?? event.duration;
+  if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
+    return `${explicitDuration}ms`;
+  }
+  const start = toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+  const end = toTimeNumber(event.ended ?? event.endTime ?? event.endTimestamp ?? event.timestamp);
+  if (start === undefined || end === undefined || end < start) {
+    return '-';
+  }
+  return `${end - start}ms`;
+};
+
+const timestampFormatter = new Intl.DateTimeFormat('en-US', {
+  day: '2-digit',
+  fractionalSecondDigits: 3,
+  hour: '2-digit',
+  hourCycle: 'h23',
+  minute: '2-digit',
+  month: 'short',
+  second: '2-digit',
+  timeZone: 'UTC',
+  year: 'numeric'
+});
+const formatTimestamp = date => {
+  return `${timestampFormatter.format(date)} UTC`;
+};
+
+const getTimestampText = value => {
+  if (typeof value === 'string') {
+    const timestamp = Date.parse(value);
+    if (!Number.isNaN(timestamp)) {
+      return formatTimestamp(new Date(timestamp));
+    }
+    return value;
+  }
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return formatTimestamp(new Date(value));
+  }
+  return '-';
+};
+
+const getEndText = event => {
+  return getTimestampText(event.ended ?? event.endTime ?? event.endTimestamp ?? event.timestamp);
+};
+
+const getStartText = event => {
+  return getTimestampText(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+};
+
+const getTimingRowDom = (label, value) => {
+  return [{
+    childCount: 2,
+    className: ChatDebugViewTimingRow,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ChatDebugViewTimingLabel,
+    type: Span
+  }, text(label), {
+    childCount: 1,
+    className: ChatDebugViewTimingValue,
+    type: Span
+  }, text(value)];
+};
+const getTimingDetailsDom = event => {
+  return [{
+    childCount: 3,
+    className: ChatDebugViewTiming,
+    type: Div
+  }, ...getTimingRowDom('Started', getStartText(event)), ...getTimingRowDom('Ended', getEndText(event)), ...getTimingRowDom('Duration', getDurationText(event))];
+};
+
+const getTabId = detailTab => {
+  return `ChatDebugViewDetailsTab-${detailTab}`;
+};
+const getPanelId = detailTab => {
+  return `ChatDebugViewDetailsPanel-${detailTab}`;
+};
+const getTabNodes = selectedDetailTab => {
+  return detailTabs.flatMap(detailTab => {
+    const isSelected = detailTab === selectedDetailTab;
+    return [{
+      'aria-controls': getPanelId(detailTab),
+      'aria-selected': isSelected,
+      childCount: 1,
+      className: joinClassNames(ChatDebugViewDetailsTab, isSelected && ChatDebugViewDetailsTabSelected),
+      id: getTabId(detailTab),
+      name: DetailTab,
+      onChange: HandleSimpleInput,
+      onClick: HandleSimpleInput,
+      role: 'tab',
+      tabIndex: isSelected ? 0 : -1,
+      type: Button,
+      value: detailTab
+    }, text(getDetailTabLabel(detailTab))];
+  });
+};
+const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes, selectedEvent = null, selectedDetailTab = Response) => {
+  if (previewEventNodes.length === 0 && responseEventNodes.length === 0) {
+    return [];
+  }
+  const contentNodes = selectedDetailTab === Timing && selectedEvent ? getTimingDetailsDom(selectedEvent) : selectedDetailTab === Preview ? previewEventNodes : responseEventNodes;
+  return [{
+    childCount: 2,
+    className: ChatDebugViewDetails,
+    type: Div
+  }, {
+    childCount: 2,
+    className: ChatDebugViewDetailsTop,
+    type: Div
+  }, {
+    'aria-label': 'Close details',
+    childCount: 0,
+    className: ChatDebugViewDetailsClose,
+    name: CloseDetails,
+    onChange: HandleSimpleInput,
+    onClick: HandleSimpleInput,
+    type: Button,
+    value: 'close'
+  }, {
+    'aria-label': 'Detail sections',
+    childCount: detailTabs.length,
+    className: ChatDebugViewDetailsTabs,
+    role: 'tablist',
+    type: Div
+  }, ...getTabNodes(selectedDetailTab), {
+    childCount: 1,
+    className: ChatDebugViewDetailsBody,
+    role: 'document',
+    type: Div
+  }, {
+    'aria-labelledby': getTabId(selectedDetailTab),
+    childCount: 1,
+    className: ChatDebugViewDetailsPanel,
+    id: getPanelId(selectedDetailTab),
+    onContextMenu: HandleDetailsContextMenu,
+    role: 'tabpanel',
+    type: Div
+  }, ...contentNodes];
+};
+
+const toolExecutionTypePrefix = 'tool-execution';
+const getToolName = event => {
+  if (typeof event.toolName === 'string' && event.toolName) {
+    return event.toolName;
+  }
+  if (typeof event.name === 'string' && event.name) {
+    return event.name;
+  }
+  const {
+    arguments: toolArguments
+  } = event;
+  if (!toolArguments || typeof toolArguments !== 'object') {
+    return undefined;
+  }
+  const {
+    name
+  } = toolArguments;
+  if (typeof name !== 'string' || !name) {
+    return undefined;
+  }
+  return name;
+};
+const getEventTypeLabel = event => {
+  if (!event.type.startsWith(toolExecutionTypePrefix)) {
+    return event.type;
+  }
+  const toolName = getToolName(event);
+  if (!toolName) {
+    return event.type;
+  }
+  return `${event.type}, ${toolName}`;
+};
+
+const isRecord = value => {
+  return typeof value === 'object' && value !== null;
+};
+const isErrorStatusCode = value => {
+  if (typeof value === 'number') {
+    return value >= 400;
+  }
+  if (typeof value === 'string') {
+    const parsedStatus = Number(value);
+    return Number.isFinite(parsedStatus) && parsedStatus >= 400;
+  }
+  return false;
+};
+const hasErrorStatus = event => {
+  if (event.type === 'error') {
+    return true;
+  }
+  if (event.success === false || event.ok === false) {
+    return true;
+  }
+  const {
+    status
+  } = event;
+  if (isErrorStatusCode(status)) {
+    return true;
+  }
+  const {
+    result
+  } = event;
+  if (isRecord(result)) {
+    if (isErrorStatusCode(result.status)) {
+      return true;
+    }
+    if (typeof result.error === 'string' || typeof result.errorMessage === 'string' || typeof result.exception === 'string') {
+      return true;
+    }
+  }
+  return typeof event.error === 'string' || typeof event.errorMessage === 'string' || typeof event.exception === 'string';
+};
+
+const getStatusText = event => {
+  return hasErrorStatus(event) ? '400' : '200';
+};
+
+const getDevtoolsRows = (events, selectedEventIndex) => {
+  return events.flatMap((event, i) => {
+    const isSelected = selectedEventIndex === i;
+    const isErrorStatus = hasErrorStatus(event);
+    const rowIndex = String(i);
+    return [{
+      childCount: 3,
+      className: joinClassNames(ChatDebugViewEventRow, isSelected && ChatDebugViewEventRowSelected),
+      'data-index': rowIndex,
+      type: Tr
+    }, {
+      childCount: 1,
+      className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellType),
+      type: Td
+    }, text(getEventTypeLabel(event)), {
+      childCount: 1,
+      className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellDuration),
+      type: Td
+    }, text(getDurationText(event)), {
+      childCount: 1,
+      className: joinClassNames(ChatDebugViewCell, ChatDebugViewCellStatus, isErrorStatus && ChatDebugViewCellStatusError),
+      type: Td
+    }, text(getStatusText(event))];
+  });
+};
+
+const getEmptyStateDom = emptyMessage => {
+  return [{
+    childCount: 1,
+    className: ChatDebugViewEmpty,
+    type: Div
+  }, text(emptyMessage)];
+};
+
+const pushToken = (segments, className, value) => {
+  if (!value) {
+    return segments;
+  }
+  const lastSegment = segments.at(-1);
+  if (lastSegment && lastSegment.className === className) {
+    const merged = {
+      className,
+      value: lastSegment.value + value
+    };
+    return [...segments.slice(0, -1), merged];
+  }
+  return [...segments, {
+    className,
+    value
+  }];
+};
+
+const numberRegex = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?/;
+const whitespaceRegex = /\s/u;
+const getTokenSegments = json => {
+  let segments = [];
+  let i = 0;
+  while (i < json.length) {
+    const character = json[i];
+    if (character === '"') {
+      const start = i;
+      i++;
+      while (i < json.length) {
+        const currentCharacter = json[i];
+        if (currentCharacter === '\\') {
+          i += 2;
+          continue;
+        }
+        if (currentCharacter === '"') {
+          i++;
+          break;
+        }
+        i++;
+      }
+      const tokenValue = json.slice(start, i);
+      let lookAheadIndex = i;
+      while (lookAheadIndex < json.length && whitespaceRegex.test(json[lookAheadIndex])) {
+        lookAheadIndex++;
+      }
+      const className = json[lookAheadIndex] === ':' ? TokenKey : TokenString;
+      segments = pushToken(segments, className, tokenValue);
+      continue;
+    }
+    const numberMatch = numberRegex.exec(json.slice(i));
+    if (numberMatch) {
+      segments = pushToken(segments, TokenNumeric, numberMatch[0]);
+      i += numberMatch[0].length;
+      continue;
+    }
+    if (json.startsWith('true', i)) {
+      segments = pushToken(segments, TokenBoolean, 'true');
+      i += 4;
+      continue;
+    }
+    if (json.startsWith('false', i)) {
+      segments = pushToken(segments, TokenBoolean, 'false');
+      i += 5;
+      continue;
+    }
+    if (json.startsWith('null', i)) {
+      segments = pushToken(segments, TokenBoolean, 'null');
+      i += 4;
+      continue;
+    }
+    segments = pushToken(segments, TokenText, character);
+    i++;
+  }
+  return segments;
+};
+
+const getJsonLines = value => {
+  const json = JSON.stringify(value, null, 2);
+  if (!json) {
+    return [[{
+      className: TokenText,
+      value: String(json)
+    }]];
+  }
+  const segments = getTokenSegments(json);
+  const lines = [];
+  let currentLine = [];
+  for (const segment of segments) {
+    const parts = segment.value.split('\n');
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (part) {
+        currentLine.push({
+          className: segment.className,
+          value: part
+        });
+      }
+      if (i < parts.length - 1) {
+        lines.push(currentLine);
+        currentLine = [];
+      }
+    }
+  }
+  lines.push(currentLine);
+  return lines;
+};
+const getLineContentNodes = line => {
+  return line.flatMap(segment => {
+    return [{
+      childCount: 1,
+      className: segment.className,
+      type: Span
+    }, text(segment.value)];
+  });
+};
+const getLineNodes = lines => {
+  return lines.flatMap((line, index) => {
+    const lineContentNodes = getLineContentNodes(line);
+    return [{
+      childCount: 2,
+      className: Row,
+      type: Div
+    }, {
+      childCount: 1,
+      className: ChatDebugViewEventLineNumber,
+      type: Span
+    }, text(String(index + 1)), {
+      childCount: lineContentNodes.length / 2,
+      className: ChatDebugViewEventLineContent,
+      type: Span
+    }, ...lineContentNodes];
+  });
+};
+const isChatViewEvent = value => {
+  return typeof value === 'object' && value !== null && typeof value.type === 'string';
+};
+const getEventNode = value => {
+  const renderedValue = isChatViewEvent(value) ? {
+    ...value,
+    type: getEventTypeLabel(value)
+  } : value;
+  const lines = getJsonLines(renderedValue);
+  const lineNodes = getLineNodes(lines);
+  return [{
+    childCount: lines.length,
+    className: ChatDebugViewEvent,
+    type: Div
+  }, ...lineNodes];
+};
+
+const getEventsClassName = hasSelectedEvent => {
+  const widthClassName = joinClassNames(ChatDebugViewEvents, !hasSelectedEvent && ChatDebugViewEventsFullWidth);
+  return widthClassName;
+};
+
+const hasOwn = (event, key) => {
+  return Object.hasOwn(event, key);
+};
+const getPreviewName = event => {
+  if (typeof event.name === 'string' && event.name) {
+    return event.name;
+  }
+  if (typeof event.toolName === 'string' && event.toolName) {
+    return event.toolName;
+  }
+  return undefined;
+};
+const shouldIncludeArguments = (event, name) => {
+  if (!hasOwn(event, 'arguments')) {
+    return false;
+  }
+  if (name === 'getWorkspaceUri') {
+    return false;
+  }
+  return true;
+};
+const getPreviewEvent = event => {
+  const name = getPreviewName(event);
+  const previewEvent = {
+    ...(name === undefined ? {} : {
+      name
+    }),
+    ...(shouldIncludeArguments(event, name) ? {
+      arguments: event.arguments
+    } : {}),
+    ...(hasOwn(event, 'result') ? {
+      result: event.result
+    } : {})
+  };
+  if (Object.keys(previewEvent).length > 0) {
+    return previewEvent;
+  }
+  return event;
+};
+
+const getSashNodesDom = hasSelectedEvent => {
+  if (!hasSelectedEvent) {
+    return [];
+  }
+  return [{
+    childCount: 1,
+    className: ChatDebugViewSash,
+    onPointerDown: HandleSashPointerDown,
+    type: Div
+  }, {
+    childCount: 0,
+    className: ChatDebugViewSashLine,
+    type: Div
+  }];
+};
+
+const getTableBodyDom = (rowNodes, eventCount) => {
+  return [{
+    childCount: eventCount === 0 ? 1 : eventCount,
+    className: ChatDebugViewTableBody,
+    onContextMenu: HandleTableBodyContextMenu,
+    onPointerDown: HandleEventRowClick,
+    type: TBody
+  }, ...rowNodes];
+};
+
+const getTableHeaderDom = () => {
+  return [{
+    childCount: 1,
+    className: ChatDebugViewTableHeader,
+    type: THead
+  }, {
+    childCount: 3,
+    className: ChatDebugViewTableHeaderRow,
+    type: Tr
+  }, {
+    childCount: 1,
+    className: ChatDebugViewHeaderCell,
+    scope: 'col',
+    type: Th
+  }, text('Type'), {
+    childCount: 1,
+    className: ChatDebugViewHeaderCell,
+    scope: 'col',
+    type: Th
+  }, text('Duration'), {
+    childCount: 1,
+    className: ChatDebugViewHeaderCell,
+    scope: 'col',
+    type: Th
+  }, text('Status')];
+};
+
+const getTableDom = (rowNodes, eventCount) => {
+  return [{
+    childCount: 2,
+    className: ChatDebugViewTable,
+    type: Table
+  }, ...getTableHeaderDom(), ...getTableBodyDom(rowNodes, eventCount)];
+};
+
+const formatPercent = value => {
+  return `${Number(value.toFixed(3))}%`;
+};
+
+const getBucketUnitDom = unitCount => {
+  if (unitCount === 0) {
+    return [{
+      childCount: 0,
+      className: joinClassNames(ChatDebugViewTimelineBucketUnit, ChatDebugViewTimelineBucketUnitEmpty),
+      type: Div
+    }];
+  }
+  return Array.from({
+    length: unitCount
+  }).fill({
+    childCount: 0,
+    className: ChatDebugViewTimelineBucketUnit,
+    type: Div
+  });
+};
+
+const getBucketDom = bucket => {
+  const presetValue = `${formatTimelinePresetValue(bucket.startSeconds)}:${formatTimelinePresetValue(bucket.endSeconds)}`;
+  return [{
+    childCount: 2,
+    className: joinClassNames(ChatDebugViewTimelineBucket, bucket.isSelected && ChatDebugViewTimelineBucketSelected),
+    type: Label
+  }, {
+    checked: false,
+    childCount: 0,
+    className: ChatDebugViewTimelinePresetInput,
+    inputType: 'radio',
+    name: TimelineRangePreset,
+    onChange: HandleSimpleInput,
+    type: Input,
+    value: presetValue
+  }, {
+    childCount: bucket.unitCount === 0 ? 1 : bucket.unitCount,
+    className: joinClassNames(ChatDebugViewTimelineBucketBar, bucket.isSelected && ChatDebugViewTimelineBucketBarSelected),
+    type: Div
+  }, ...getBucketUnitDom(bucket.unitCount)];
+};
+
+const getEffectiveTimelineRange = (timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds) => {
+  if (!timelineSelectionActive) {
+    return {
+      endSeconds: timelineEndSeconds,
+      startSeconds: timelineStartSeconds
+    };
+  }
+  return {
+    endSeconds: timelineSelectionFocusSeconds,
+    startSeconds: timelineSelectionAnchorSeconds
+  };
+};
+
+const formatTimelineSeconds = value => {
+  if (Number.isInteger(value)) {
+    return `${value}s`;
+  }
+  return `${Number(value.toFixed(1))}s`;
+};
+
+const getTimelineSummary = (timelineEvents, timelineStartSeconds, timelineEndSeconds) => {
+  const timelineInfo = getTimelineInfo(timelineEvents, timelineStartSeconds, timelineEndSeconds);
+  if (timelineInfo.hasSelection && timelineInfo.startSeconds !== null && timelineInfo.endSeconds !== null) {
+    return `Window ${formatTimelineSeconds(timelineInfo.startSeconds)}-${formatTimelineSeconds(timelineInfo.endSeconds)} of ${formatTimelineSeconds(timelineInfo.durationSeconds)}`;
+  }
+  return `Window 0s-${formatTimelineSeconds(timelineInfo.durationSeconds)} of ${formatTimelineSeconds(timelineInfo.durationSeconds)}`;
+};
+
+const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSeconds, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '') => {
+  const effectiveRange = getEffectiveTimelineRange(timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
+  const timelineInfo = getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
+  if (timelineInfo.buckets.length === 0) {
+    return [];
+  }
+  const selectionNodes = timelineInfo.hasSelection && timelineInfo.selectionStartPercent !== null && timelineInfo.selectionEndPercent !== null ? [{
+    childCount: 0,
+    className: ChatDebugViewTimelineSelectionRange,
+    style: `left:${formatPercent(timelineInfo.selectionStartPercent)};width:${formatPercent(timelineInfo.selectionEndPercent - timelineInfo.selectionStartPercent)};`,
+    type: Div
+  }, {
+    childCount: 0,
+    className: joinClassNames(ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
+    style: `left:${formatPercent(timelineInfo.selectionStartPercent)};`,
+    type: Div
+  }, {
+    childCount: 0,
+    className: joinClassNames(ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
+    style: `left:${formatPercent(timelineInfo.selectionEndPercent)};`,
+    type: Div
+  }] : [];
+  return [{
+    childCount: 2,
+    className: ChatDebugViewTimeline,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ChatDebugViewTimelineTop,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ChatDebugViewTimelineSummary,
+    type: Div
+  }, text(getTimelineSummary(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds)), {
+    childCount: 2,
+    className: ChatDebugViewTimelineInteractive,
+    onDoubleClick: HandleTimelineDoubleClick,
+    onPointerDown: HandleTimelinePointerDown,
+    type: Div
+  }, {
+    childCount: timelineInfo.buckets.length,
+    className: ChatDebugViewTimelineBuckets,
+    type: Div
+  }, ...timelineInfo.buckets.flatMap(getBucketDom), {
+    childCount: selectionNodes.length,
+    className: ChatDebugViewTimelineSelectionOverlay,
+    type: Div
+  }, ...selectionNodes];
+};
+
+const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = 'No events have been found', timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response) => {
+  const rowNodes = getDevtoolsRows(events, selectedEventIndex);
+  const timelineNodes = getTimelineNodes(timelineEvents, timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
+  const previewEventNodes = selectedEvent ? getEventNode(getPreviewEvent(selectedEvent)) : [];
+  const responseEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
+  const hasSelectedEvent = responseEventNodes.length > 0;
+  const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableDom(rowNodes, events.length);
+  const eventsClassName = getEventsClassName(hasSelectedEvent);
+  const detailsNodes = getDetailsDom(previewEventNodes, responseEventNodes, selectedEvent, isDetailTab(selectedDetailTab) ? selectedDetailTab : Response);
+  const sashNodes = getSashNodesDom(hasSelectedEvent);
+  const splitChildCount = hasSelectedEvent ? 3 : 1;
+  const mainChildCount = 1 + (timelineNodes.length > 0 ? 1 : 0);
+  return [{
+    childCount: mainChildCount,
+    className: ChatDebugViewDevtoolsMain,
+    type: Div
+  }, ...timelineNodes, {
+    childCount: splitChildCount,
+    className: ChatDebugViewDevtoolsSplit,
+    type: Div
+  }, {
+    childCount: 1,
+    className: eventsClassName,
+    onKeyDown: HandleTableKeyDown,
+    role: 'application',
+    tabIndex: 0,
+    type: Div
+  }, ...tableNodes, ...sashNodes, ...detailsNodes];
+};
+
+const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
+  return [{
+    childCount: eventNodes.length === 0 ? 1 : eventNodes.length,
+    className: ChatDebugViewEvents,
+    role: 'application',
+    tabIndex: 0,
+    type: Div
+  }, ...(eventNodes.length === 0 ? [{
+    childCount: 1,
+    className: errorMessage ? ChatDebugViewError : ChatDebugViewEmpty,
+    type: Div
+  }, text(errorMessage || emptyMessage)] : eventNodes)];
+};
+
+const getQuickFilterNodes = (eventCategoryFilter, eventCategoryFilterOptions) => {
+  return [{
+    childCount: eventCategoryFilterOptions.length,
+    className: ChatDebugViewQuickFilters,
+    type: Div
+  }, ...eventCategoryFilterOptions.flatMap(option => {
+    const isSelected = option.value === eventCategoryFilter;
+    return [{
+      childCount: 2,
+      className: joinClassNames(ChatDebugViewQuickFilterPill, isSelected && ChatDebugViewQuickFilterPillSelected),
+      type: Label
+    }, {
+      checked: isSelected,
+      childCount: 0,
+      className: ChatDebugViewQuickFilterInput,
+      inputType: 'radio',
+      name: EventCategoryFilter,
+      onChange: HandleInput,
+      type: Input,
+      value: option.value
+    }, text(option.label)];
+  })];
+};
+
+const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds) => {
+  const trimmedStart = timelineStartSeconds.trim();
+  const trimmedEnd = timelineEndSeconds.trim();
+  if (trimmedStart && trimmedEnd) {
+    return `${trimmedStart}s-${trimmedEnd}s`;
+  }
+  if (trimmedStart) {
+    return `from ${trimmedStart}s`;
+  }
+  if (trimmedEnd) {
+    return `to ${trimmedEnd}s`;
+  }
+  return '';
+};
+
+const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, eventCategoryFilterOptions, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', selectedDetailTab = Response) => {
+  if (errorMessage) {
+    return getDebugErrorDom(errorMessage);
+  }
+  const trimmedFilterValue = filterValue.trim();
+  const filterDescriptionParts = [];
+  if (eventCategoryFilter !== All) {
+    filterDescriptionParts.push(getEventCategoryFilterLabel(eventCategoryFilter).toLowerCase());
+  }
+  if (trimmedFilterValue) {
+    filterDescriptionParts.push(trimmedFilterValue);
+  }
+  const timelineFilterDescription = getTimelineFilterDescription(timelineStartSeconds, timelineEndSeconds);
+  if (timelineFilterDescription) {
+    filterDescriptionParts.push(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 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) : [];
+  const debugViewTopDom = getDebugViewTopDom(filterValue, useDevtoolsLayout, quickFilterNodes);
+  const rootChildCount = 2;
+  return [{
+    childCount: rootChildCount,
+    className: joinClassNames(ChatDebugView, useDevtoolsLayout && ChatDebugViewDevtools),
+    type: Div
+  }, ...debugViewTopDom, ...contentNodes];
+};
+
+const withSessionEventIds = events => {
+  return events.map((event, index) => {
+    return {
+      ...event,
+      eventId: typeof event.eventId === 'number' ? event.eventId : index + 1
+    };
+  });
+};
+const renderItems = (oldState, newState) => {
+  if (newState.initial) {
+    return [SetDom2, newState.uid, []];
+  }
+  const timelineEvents = getTimelineEvents(newState);
+  const filteredEvents = filterEventsByTimelineRange(timelineEvents, newState.timelineStartSeconds, newState.timelineEndSeconds);
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, newState.eventCategoryFilter, newState.eventCategoryFilterOptions, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, withSessionEventIds(timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, newState.selectedDetailTab);
+  return [SetDom2, newState.uid, dom];
+};
+
+const renderIncremental = (oldState, newState) => {
+  const oldDom = renderItems(oldState, oldState)[2];
+  const newDom = renderItems(newState, newState)[2];
+  const patches = diffTree(oldDom, newDom);
+  return [SetPatches, newState.uid, patches];
+};
+
+const getRenderer = diffType => {
+  switch (diffType) {
+    case RenderCss:
+      return renderCss;
+    case RenderIncremental:
+      return renderIncremental;
+    case RenderItems:
+      return renderItems;
+    default:
+      throw new Error('unknown renderer');
+  }
+};
+
+const applyRender = (oldState, newState, diffResult) => {
+  const commands = [];
+  for (const item of diffResult) {
+    const fn = getRenderer(item);
+    const result = fn(oldState, newState);
+    if (result.length > 0) {
+      commands.push(result);
+    }
+  }
+  return commands;
+};
+
+const render2 = (uid, diffResult) => {
+  const {
+    newState,
+    oldState
+  } = get(uid);
+  set(uid, newState, newState);
+  return applyRender(oldState, newState, diffResult);
+};
+
+const renderEventListeners = () => {
+  return [{
+    name: HandleEventRowClick,
+    params: ['handleEventRowClick', 'event.target.dataset.index', 'event.button']
+  }, {
+    name: HandleTableBodyContextMenu,
+    params: ['handleTableBodyContextMenu'],
+    preventDefault: true
+  }, {
+    name: HandleFilterInput,
+    params: ['handleInput', TargetName, TargetValue]
+  }, {
+    name: HandleInput,
+    params: ['handleInput', TargetName, TargetValue, TargetChecked]
+  }, {
+    name: HandleSimpleInput,
+    params: ['handleInput', TargetName, TargetValue]
+  }, {
+    name: HandleSashPointerDown,
+    params: ['handleSashPointerDown', ClientX, ClientY],
+    trackPointerEvents: [HandleSashPointerMove, HandleSashPointerUp]
+  }, {
+    name: HandleSashPointerMove,
+    params: ['handleSashPointerMove', ClientX, ClientY]
+  }, {
+    name: HandleSashPointerUp,
+    params: ['handleSashPointerUp', ClientX, ClientY]
+  }, {
+    name: HandleTimelinePointerDown,
+    params: ['handleTimelinePointerDown', ClientX],
+    trackPointerEvents: [HandleTimelinePointerMove, HandleTimelinePointerUp]
+  }, {
+    name: HandleTimelinePointerMove,
+    params: ['handleTimelinePointerMove', ClientX]
+  }, {
+    name: HandleTimelinePointerUp,
+    params: ['handleTimelinePointerUp', ClientX]
+  }, {
+    name: HandleTimelineDoubleClick,
+    params: ['handleTimelineDoubleClick']
+  }];
+};
+
+const rerender = state => {
+  return structuredClone(state);
+};
+
+const handleResize = (state, dimensions) => {
+  const nextState = {
+    ...state,
+    ...dimensions
+  };
+  return {
+    ...nextState,
+    tableWidth: clampTableWidth(nextState.width, state.tableWidth)
+  };
+};
+
+const isResizeDimensions = value => {
+  return typeof value === 'object' && value !== null;
+};
+const resize = (state, dimensions) => {
+  if (!isResizeDimensions(dimensions)) {
+    return state;
+  }
+  return handleResize(state, dimensions);
+};
+
+const saveState = state => {
+  const {
+    eventCategoryFilter,
+    filterValue,
+    height,
+    selectedEventId,
+    sessionId,
+    tableWidth,
+    timelineEndSeconds,
+    timelineStartSeconds,
+    width,
+    x,
+    y
+  } = state;
+  return {
+    eventCategoryFilter,
+    filterValue,
+    height,
+    selectedEventId,
+    sessionId,
+    tableWidth,
+    timelineEndSeconds,
+    timelineStartSeconds,
+    width,
+    x,
+    y
+  };
+};
+
+const setEvents = (state, events) => {
+  return {
+    ...state,
+    errorMessage: '',
+    events,
+    initial: false,
+    selectedEvent: null,
+    selectedEventId: null,
+    selectedEventIndex: null
+  };
+};
+
+const setIndexedDbSupportForTest = supported => {
+  return setIndexedDbSupportOverride(supported);
+};
+
+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
+    };
+  }
+  if (result.type === 'error') {
+    return {
+      ...state,
+      errorMessage: getFailedToLoadMessage(sessionId),
+      events: [],
+      initial: false,
+      selectedEvent: null,
+      selectedEventId: null,
+      sessionId
+    };
+  }
+  const {
+    events
+  } = result;
+  return {
+    ...state,
+    errorMessage: '',
+    events,
+    initial: false,
+    selectedEvent: null,
+    selectedEventId: null,
+    sessionId
+  };
+};
+
+const commandMap = {
+  'ChatDebug.create': create,
+  'ChatDebug.diff2': diff2,
+  'ChatDebug.getCommandIds': getCommandIds,
+  'ChatDebug.handleDetailsContextMenu': wrapCommand(handleDetailsContextMenu),
+  'ChatDebug.handleEventRowClick': wrapCommand(handleEventRowClick),
+  'ChatDebug.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
+  'ChatDebug.handleInput': wrapCommand(handleInput),
+  'ChatDebug.handleSashPointerDown': wrapCommand(handleSashPointerDown),
+  'ChatDebug.handleSashPointerMove': wrapCommand(handleSashPointerMove),
+  'ChatDebug.handleSashPointerUp': wrapCommand(handleSashPointerUp),
+  'ChatDebug.handleTableBodyContextMenu': wrapCommand(handleTableBodyContextMenu),
+  'ChatDebug.handleTimelineDoubleClick': wrapCommand(handleTimelineDoubleClick),
+  'ChatDebug.handleTimelinePointerDown': wrapCommand(handleTimelinePointerDown),
+  'ChatDebug.handleTimelinePointerMove': wrapCommand(handleTimelinePointerMove),
+  'ChatDebug.handleTimelinePointerUp': wrapCommand(handleTimelinePointerUp),
+  'ChatDebug.loadContent': wrapCommand(loadContent),
+  'ChatDebug.loadContent2': wrapCommand(loadContent),
+  'ChatDebug.refresh': wrapCommand(refresh),
+  'ChatDebug.render2': render2,
+  'ChatDebug.renderEventListeners': renderEventListeners,
+  'ChatDebug.rerender': wrapCommand(rerender),
+  'ChatDebug.resize': wrapCommand(resize),
+  'ChatDebug.saveState': wrapGetter(saveState),
+  'ChatDebug.setEvents': wrapCommand(setEvents),
+  'ChatDebug.setIndexedDbSupportForTest': setIndexedDbSupportForTest,
+  'ChatDebug.setSessionId': wrapCommand(setSessionId),
+  'ChatDebug.terminate': terminate
+};
+
+const listen = async () => {
+  registerCommands(commandMap);
+  await create$2({
+    commandMap: commandMap
+  });
+};
+
+const main = async () => {
+  await listen();
+};
+
+main();