@lvce-editor/static-server 0.81.10 → 0.81.12

package/static/{ec38d11 → 13d02cb}/packages/chat-debug-view/dist/chatDebugViewWorkerMain.js

@@ -884,7 +884,7 @@ const getErrorResponseSimple = (id, error) => {
     jsonrpc: Two$1
   };
 };
-const getResponse = async (message, ipc, execute, preparePrettyError, logError, requiresSocket) => {
+const getResponse$1 = 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);
@@ -943,7 +943,7 @@ const handleJsonRpcMessage = async (...args) => {
   } = options;
   if ('id' in message) {
     if ('method' in message) {
-      const response = await getResponse(message, ipc, execute, preparePrettyError, logError, requiresSocket);
+      const response = await getResponse$1(message, ipc, execute, preparePrettyError, logError, requiresSocket);
       try {
         ipc.send(response);
       } catch (error) {
@@ -956,7 +956,7 @@ const handleJsonRpcMessage = async (...args) => {
     return;
   }
   if ('method' in message) {
-    await getResponse(message, ipc, execute, preparePrettyError, logError, requiresSocket);
+    await getResponse$1(message, ipc, execute, preparePrettyError, logError, requiresSocket);
     return;
   }
   throw new JsonRpcError('unexpected message');
@@ -1241,6 +1241,8 @@ const ListBox = 'listbox';
 const Option = 'option';
 const Tab = 'tab';
 
+const MaskIcon = 'MaskIcon';
+
 const Button$1 = 1;
 const Col = 2;
 const ColGroup = 3;
@@ -1269,6 +1271,18 @@ const ClientY = 'event.clientY';
 const TargetName = 'event.target.name';
 const TargetValue = 'event.target.value';
 
+const Enter = 3;
+const Escape = 8;
+const Space = 9;
+const PageUp = 10;
+const PageDown = 11;
+const End$1 = 255;
+const Home = 12;
+const UpArrow = 14;
+const DownArrow = 16;
+
+const User = 1;
+
 const None$1 = 0;
 const Checked = 2;
 const Unchecked = 3;
@@ -1335,7 +1349,10 @@ const registerUpdateListener = async (sessionId, rpcId, uid) => {
 };
 
 const appendStoredEventForTest = async (state, event) => {
-  await appendEvent(event);
+  await appendEvent({
+    ...event,
+    subType: event.subType || event.type
+  });
   return state;
 };
 
@@ -1381,6 +1398,7 @@ const appendStoredImageAttachmentForTest = async (state, sessionId, eventId, mim
     mimeType,
     name,
     sessionId,
+    subType: 'chat-attachment-added',
     timestamp,
     type: 'chat-attachment-added'
   });
@@ -1432,6 +1450,7 @@ const appendStoredRemovedImageAttachmentForTest = async (state, sessionId, event
     mimeType,
     name,
     sessionId,
+    subType: 'chat-attachment-removed',
     timestamp,
     type: 'chat-attachment-removed'
   });
@@ -1450,7 +1469,7 @@ const DetailTab = 'detailTab';
 const TimelineStartSeconds = 'timelineStartSeconds';
 const TimelineEndSeconds = 'timelineEndSeconds';
 const TimelineRangePreset = 'timelineRangePreset';
-const Refresh$1 = 'refresh';
+const Refresh = 'refresh';
 const ToggleHeadersSection = 'toggleHeadersSection';
 const All$1 = 'all';
 const Tools$1 = 'tools';
@@ -1506,7 +1525,6 @@ const OpenInNewTab = 'Open in New Tab';
 const OutputTokens = 'Output Tokens';
 const Payload = 'Payload';
 const Preview = 'Preview';
-const Refresh = 'Refresh';
 const RefreshEvents = 'Refresh events';
 const ResetColumns = 'Reset columns';
 const RequestHeaders$1 = 'Request Headers';
@@ -1638,9 +1656,6 @@ const payload = () => {
 const outputTokens = () => {
   return i18nString(OutputTokens);
 };
-const refresh$1 = () => {
-  return i18nString(Refresh);
-};
 const refreshEvents$1 = () => {
   return i18nString(RefreshEvents);
 };
@@ -1744,7 +1759,7 @@ const getEventCategoryFilterLabel = eventCategoryFilter => {
   }
 };
 
-const eventCategoryFilters = [All$1, Tools$1, Network$1, Ui$1, Stream$1];
+const eventCategoryFilters = [All$1, Tools$1, Network$1];
 const normalizeSelectedEventCategoryFilters = (selectedEventCategoryFilter = All$1) => {
   const selectedEventCategoryFilters = Array.isArray(selectedEventCategoryFilter) ? selectedEventCategoryFilter : [selectedEventCategoryFilter];
   const uniqueSelectedEventCategoryFilters = [...new Set(selectedEventCategoryFilters)];
@@ -1762,25 +1777,20 @@ const normalizeSelectedEventCategoryFilters = (selectedEventCategoryFilter = All
 const createCategoryFilters$1 = (selectedEventCategoryFilter = All$1) => {
   const selectedEventCategoryFilters = normalizeSelectedEventCategoryFilters(selectedEventCategoryFilter);
   return [{
+    eventTypes: ['*'],
     isSelected: selectedEventCategoryFilters.includes(All$1),
     label: all(),
     name: All$1
   }, {
+    eventTypes: ['tool-execution', 'tool-request', 'tool-request-response'],
     isSelected: selectedEventCategoryFilters.includes(Tools$1),
     label: tools(),
     name: Tools$1
   }, {
+    eventTypes: ['request', 'response', 'handle-response', 'ai-request', 'ai-response-success', 'ai-request-response'],
     isSelected: selectedEventCategoryFilters.includes(Network$1),
     label: network(),
     name: Network$1
-  }, {
-    isSelected: selectedEventCategoryFilters.includes(Ui$1),
-    label: ui(),
-    name: Ui$1
-  }, {
-    isSelected: selectedEventCategoryFilters.includes(Stream$1),
-    label: stream(),
-    name: Stream$1
   }];
 };
 
@@ -1788,13 +1798,19 @@ const createCategoryFilters = (selectedEventCategoryFilter = All$1) => {
   return createCategoryFilters$1(selectedEventCategoryFilter);
 };
 const isEventCategoryFilter = value => {
-  return value === All$1 || value === Tools$1 || value === Network$1 || value === Ui$1 || value === Stream$1;
+  return value === All$1 || value === Tools$1 || value === Network$1;
+};
+const getName = filter => {
+  return filter.name;
 };
 const getSelectedEventCategoryFilters = categoryFilters => {
   const selectedCategoryFilters = categoryFilters.filter(categoryFilter => categoryFilter.isSelected);
-  const selectedEventCategoryFilters = selectedCategoryFilters.map(categoryFilter => categoryFilter.name).filter(name => isEventCategoryFilter(name));
+  const selectedEventCategoryFilters = selectedCategoryFilters.map(getName).filter(isEventCategoryFilter);
   return normalizeSelectedEventCategoryFilters(selectedEventCategoryFilters);
 };
+const getSelectedCategoryFilters = categoryFilters => {
+  return categoryFilters.filter(categoryFilter => categoryFilter.isSelected);
+};
 const getSelectedEventCategoryFilter = categoryFilters => {
   const selectedEventCategoryFilters = getSelectedEventCategoryFilters(categoryFilters);
   if (selectedEventCategoryFilters.length === 1) {
@@ -2076,7 +2092,7 @@ const isTableColumnWidths = value => {
   return isFiniteNumber(record.type) && isFiniteNumber(record.method) && isFiniteNumber(record.duration) && isFiniteNumber(record.size) && isFiniteNumber(record.status);
 };
 
-const validEventCategoryFilters = new Set([All$1, Network$1, Stream$1, Tools$1, Ui$1]);
+const validEventCategoryFilters = new Set([All$1, Network$1, Tools$1]);
 const isSavedState = value => {
   return typeof value === 'object' && value !== null;
 };
@@ -2161,6 +2177,7 @@ const restoreSavedState = (state, savedState) => {
 };
 
 const {
+  diff,
   get,
   getCommandIds,
   registerCommands,
@@ -2195,6 +2212,9 @@ const hasTimingDetails = event => {
 
 const getEndValueResponseData = event => {
   const endValue = event.endValue;
+  if (typeof endValue === 'object' && 'toolCallResult' in endValue) {
+    return endValue.toolCallResult;
+  }
   if (!endValue || endValue.value === undefined) {
     return undefined;
   }
@@ -2501,6 +2521,7 @@ const createDefaultState = () => {
     height: 0,
     horizontalPadding,
     initial: false,
+    inputSource: 0,
     largeBreakpoint: 900,
     leftPadding,
     mediumBreakpoint: 600,
@@ -2546,6 +2567,8 @@ const createDefaultState = () => {
     timelineSelectionAnchorSeconds: '',
     timelineSelectionFocusSeconds: '',
     timelineStartSeconds: '',
+    totalResources: 0,
+    totalTransferred: 0,
     uid: 0,
     uri: '',
     useDevtoolsLayout: true,
@@ -2579,25 +2602,35 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '
   set(uid, state, state);
 };
 
+const isEqual$3 = (oldState, newState) => {
+  return oldState.defaultTableWidth === newState.defaultTableWidth && oldState.events.length === newState.events.length && oldState.height === newState.height && oldState.initial === newState.initial && oldState.selectedEvent === newState.selectedEvent && oldState.tableColumns === newState.tableColumns && oldState.tableDeltaY === newState.tableDeltaY && oldState.tableWidth === newState.tableWidth && oldState.tableWidth === newState.tableWidth;
+};
+
+const isEqual$2 = (oldState, newState) => {
+  return oldState.focus === newState.focus;
+};
+
+const isEqual$1 = (oldState, newState) => {
+  return oldState.initial === newState.initial && oldState.categoryFilters === newState.categoryFilters && oldState.collapsedHeaderSections === newState.collapsedHeaderSections && oldState.detailTabs === newState.detailTabs && oldState.errorMessage === newState.errorMessage && oldState.events === newState.events && oldState.filterValue === newState.filterValue && oldState.previewTextCursorColumnIndex === newState.previewTextCursorColumnIndex && oldState.previewTextCursorRowIndex === newState.previewTextCursorRowIndex && oldState.previewTextDeltaY === newState.previewTextDeltaY && oldState.summaries === newState.summaries && oldState.sessionId === newState.sessionId && oldState.showEventStreamFinishedEvents === newState.showEventStreamFinishedEvents && oldState.showInputEvents === newState.showInputEvents && oldState.showResponsePartEvents === newState.showResponsePartEvents && oldState.sortColumn === newState.sortColumn && oldState.sortDescending === newState.sortDescending && oldState.tableDeltaY === newState.tableDeltaY && oldState.tableMaxLineY === newState.tableMaxLineY && oldState.tableMinLineY === newState.tableMinLineY && oldState.tableWidth === newState.tableWidth && oldState.timelineEndSeconds === newState.timelineEndSeconds && oldState.timelineHeight === newState.timelineHeight && oldState.timelineHoverPercent === newState.timelineHoverPercent && oldState.timelineHoverSeconds === newState.timelineHoverSeconds && oldState.timelineSelectionActive === newState.timelineSelectionActive && oldState.timelineSelectionAnchorSeconds === newState.timelineSelectionAnchorSeconds && oldState.timelineSelectionFocusSeconds === newState.timelineSelectionFocusSeconds && oldState.timelineStartSeconds === newState.timelineStartSeconds && oldState.useDevtoolsLayout === newState.useDevtoolsLayout && oldState.tableColumns === newState.tableColumns && oldState.selectedEvent === newState.selectedEvent && oldState.selectedEventIndex === newState.selectedEventIndex && oldState.focus === newState.focus && oldState.width === newState.width && oldState.uid === newState.uid;
+};
+
 const RenderItems = 1;
 const RenderCss = 2;
 const RenderIncremental = 3;
 const RenderFocusContext = 4;
 const RenderFocus = 5;
+const RenderValue = 8;
 
-const diff = (oldState, newState) => {
-  if (oldState.categoryFilters !== newState.categoryFilters || oldState.collapsedHeaderSections !== newState.collapsedHeaderSections || oldState.detailTabs !== newState.detailTabs || oldState.errorMessage !== newState.errorMessage || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.previewTextCursorColumnIndex !== newState.previewTextCursorColumnIndex || oldState.previewTextCursorRowIndex !== newState.previewTextCursorRowIndex || oldState.previewTextDeltaY !== newState.previewTextDeltaY || oldState.summaries !== newState.summaries || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.sortColumn !== newState.sortColumn || oldState.sortDescending !== newState.sortDescending || oldState.tableDeltaY !== newState.tableDeltaY || oldState.tableMaxLineY !== newState.tableMaxLineY || oldState.tableMinLineY !== newState.tableMinLineY || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineHeight !== newState.timelineHeight || oldState.timelineHoverPercent !== newState.timelineHoverPercent || oldState.timelineHoverSeconds !== newState.timelineHoverSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.tableColumns !== newState.tableColumns || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.focus !== newState.focus || oldState.width !== newState.width || oldState.uid !== newState.uid) {
-    return [RenderIncremental, RenderCss];
-  }
-  return [];
+const isEqual = (oldState, newState) => {
+  return newState.inputSource === User || oldState.filterValue === newState.filterValue;
 };
 
+const modules = [isEqual$1, isEqual, isEqual$3, isEqual$2, isEqual$2];
+const numbers = [RenderIncremental, RenderValue, RenderCss, RenderFocusContext, RenderFocus];
+
 const diff2 = uid => {
-  const {
-    newState,
-    oldState
-  } = get(uid);
-  return diff(oldState, newState);
+  const r = diff(uid, modules, numbers);
+  return r;
 };
 
 const filterEventsByTimelineRange = (events, startValue, endValue) => {
@@ -2651,6 +2684,9 @@ const getPayloadText = payload => {
   return serialized ?? '';
 };
 const getResponsePayloadSize = event => {
+  if (event && typeof event.size === 'number' && event.size > 0) {
+    return event.size;
+  }
   const payload = getResponsePayload(event);
   if (payload === undefined) {
     return 0;
@@ -2689,6 +2725,13 @@ const getEndedTimestamp = event => {
   return getTimestamp(event.ended) ?? getTimestamp(event.endTime) ?? getTimestamp(event.endTimestamp) ?? getTimestamp(event.timestamp);
 };
 
+const getEventSubType = (event, fallbackType = event.type, ignoreCurrentSubType = false) => {
+  if (typeof event.subType === 'string') {
+    return event.subType;
+  }
+  return event.type;
+};
+
 const getStartedTimestamp = event => {
   return getTimestamp(event.started) ?? getTimestamp(event.startTime) ?? getTimestamp(event.startTimestamp) ?? getTimestamp(event.timestamp);
 };
@@ -2709,6 +2752,7 @@ const mergeToolExecutionEvents = (startedEvent, finishedEvent, type = mergedEven
     ...(started === undefined ? {} : {
       started
     }),
+    subType: getEventSubType(startedEvent, type, true),
     type
   };
   return mergedEvent;
@@ -2832,43 +2876,17 @@ const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showE
   });
 };
 
-const isNetworkEvent = event => {
-  const normalizedType = event.type.toLowerCase();
-  return normalizedType === 'request' || normalizedType === 'ai-request' || normalizedType === 'response' || normalizedType === 'ai-response-success' || 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 matchesEventType = (eventType, filterEventType) => {
+  return filterEventType === '*' || eventType === filterEventType || eventType.startsWith(`${filterEventType}-`);
 };
-
-const matchesSingleEventCategoryFilter = (event, eventCategoryFilter) => {
-  switch (eventCategoryFilter) {
-    case Network$1:
-      return isNetworkEvent(event);
-    case Stream$1:
-      return isStreamEvent(event);
-    case Tools$1:
-      return isToolEvent(event);
-    case Ui$1:
-      return isUiEvent(event);
-    default:
-      return true;
-  }
+const matchesSingleEventCategoryFilter = (event, categoryFilter) => {
+  return categoryFilter.eventTypes.some(eventType => matchesEventType(event.type, eventType));
 };
-const matchesEventCategoryFilter = (event, eventCategoryFilters) => {
-  if (eventCategoryFilters.length === 0 || eventCategoryFilters.includes(All$1)) {
+const matchesEventCategoryFilter = (event, categoryFilters) => {
+  if (categoryFilters.length === 0) {
     return true;
   }
-  return eventCategoryFilters.some(eventCategoryFilter => matchesSingleEventCategoryFilter(event, eventCategoryFilter));
+  return categoryFilters.some(categoryFilter => matchesSingleEventCategoryFilter(event, categoryFilter));
 };
 
 const getFilteredEvents = (events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
@@ -2919,45 +2937,8 @@ const getEventTableDurationText = event => {
   return `${durationText.slice(0, -2)} ms`;
 };
 
-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 toolExecutionTypePrefix = 'tool-execution';
-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 getEventTableTypeLabel = event => {
-  if (event.name === 'list_files') {
-    return event.name;
-  }
-  return getEventTypeLabel(event);
+  return getEventSubType(event);
 };
 
 const isErrorStatusCode = value => {
@@ -2975,6 +2956,11 @@ const isRecord = value => {
   return typeof value === 'object' && value !== null;
 };
 
+const toolEventTypePrefixes = ['tool-execution', 'tool-request'];
+const isToolEvent = event => {
+  return toolEventTypePrefixes.some(prefix => event.type.startsWith(prefix));
+};
+
 const hasErrorStatus = event => {
   if (event.type === 'error') {
     return true;
@@ -3078,7 +3064,7 @@ const getCurrentEvents$1 = state => {
     timelineEndSeconds,
     timelineStartSeconds
   } = state;
-  const eventCategoryFilters = getSelectedEventCategoryFilters(categoryFilters);
+  const eventCategoryFilters = getSelectedCategoryFilters(categoryFilters);
   const filteredEvents = getFilteredEvents(events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
   const timelineEvents = filterEventsByTimelineRange(filteredEvents, timelineStartSeconds, timelineEndSeconds);
   return sortEventsByTableColumn(timelineEvents, sortColumn, sortDescending);
@@ -3479,130 +3465,479 @@ const focusPrevious = async state => {
   return focusIndex(state, nextIndex);
 };
 
-const getMenuEntriesTableBody = props => {
-  return [{
-    args: [props.eventIndex],
-    command: 'ChatDebug.handleTableRowCopy',
-    flags: None$1,
-    id: 'copy',
-    label: copy()
-  }, {
-    args: [props.eventIndex],
-    command: 'ChatDebug.handleTableRowCopyAsFetch',
-    flags: None$1,
-    id: 'copy-as-fetch',
-    label: copyAsFetch()
-  }, {
-    args: [props.eventIndex],
-    command: 'ChatDebug.handleTableRowOpenInNewTab',
-    flags: None$1,
-    id: 'open-in-new-tab',
-    label: openInNewTab()
-  }];
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
 };
 
-const getColumnMenuEntry = (columnName, label, isVisible) => {
+const text = data => {
   return {
-    args: [columnName],
-    command: 'ChatDebug.toggleTableColumnVisibility',
-    flags: isVisible ? Checked : Unchecked,
-    id: columnName,
-    label
+    childCount: 0,
+    text: data,
+    type: Text
   };
 };
-const getMenuEntriesTableHeader = state => {
-  return [...state.tableColumns.map(column => getColumnMenuEntry(column.name, column.label, column.isVisible)), {
-    args: [],
-    command: 'ChatDebug.resetTableColumns',
-    flags: None$1,
-    id: 'reset-columns',
-    label: resetColumns()
-  }];
-};
-
-const MenuChatDebugTableHeader = 2189;
-const handleHeaderContextMenu = async (state, eventX, eventY) => {
-  const {
-    uid
-  } = state;
-  await showContextMenu2(uid, MenuChatDebugTableHeader, eventX, eventY, {
-    menuId: MenuChatDebugTableHeader
-  });
-  return state;
-};
 
-const show2 = async (uid, menuId, x, y, args) => {
-  await showContextMenu2(uid, menuId, x, y, args);
-};
+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 getTableBodyEventIndex = (state, eventX, eventY) => {
-  const {
-    tableMaxLineY,
-    tableMinLineY,
-    tableWidth,
-    useDevtoolsLayout,
-    x
-  } = state;
-  if (!useDevtoolsLayout) {
-    return -1;
-  }
-  const currentEvents = getCurrentEvents$1(state);
-  if (currentEvents.length === 0) {
-    return -1;
-  }
-  const tableX = x + state.leftPadding;
-  const tableWidthNew = clampTableWidth(state, tableWidth);
-  const hasTimeline = currentEvents.length > 0;
-  const tableBodyY = getTableBodyY(state, hasTimeline);
-  const relativeX = eventX - tableX;
-  const relativeY = eventY - tableBodyY;
-  if (relativeX < 0 || relativeX >= tableWidthNew || relativeY < 0) {
-    return -1;
-  }
-  const eventIndex = tableMinLineY + Math.floor(relativeY / devtoolsTableRowHeight);
-  if (eventIndex < tableMinLineY || eventIndex >= tableMaxLineY || eventIndex >= currentEvents.length) {
-    return -1;
-  }
-  return eventIndex;
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
 };
 
-const MenuChatDebugTableBody = 2190;
-const handleTableBodyContextMenu = async (state, eventX, eventY) => {
-  const eventIndex = getTableBodyEventIndex(state, eventX, eventY);
-  await show2(state.uid, MenuChatDebugTableBody, eventX, eventY, {
-    eventIndex,
-    menuId: MenuChatDebugTableBody
-  });
-  return state;
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
 };
 
-const getMenuEntries2 = (state, props) => {
-  if (props.menuId === MenuChatDebugTableHeader) {
-    return getMenuEntriesTableHeader(state);
-  }
-  if (props.menuId === MenuChatDebugTableBody) {
-    return getMenuEntriesTableBody(props);
+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 [];
-};
-
-const getMenuIds = () => {
-  return [MenuChatDebugTableHeader, MenuChatDebugTableBody, 556, 557];
+  return result;
 };
-
-const getPreviewName = event => {
-  if (typeof event.name === 'string' && event.name) {
-    return event.name;
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
+    return {
+      children: [],
+      nodesConsumed: 0
+    };
   }
-  if (typeof event.toolName === 'string' && event.toolName) {
-    return event.toolName;
+  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 undefined;
+  return {
+    children,
+    nodesConsumed: totalConsumed
+  };
 };
 
-const hasOwn = (event, key) => {
-  return Object.hasOwn(event, key);
-};
+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
+    });
+  }
+  // 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 FocusChatDebugTable = 221_139;
+
+const getKeyBindings = () => {
+  return [{
+    command: 'ChatDebug.focusNext',
+    key: DownArrow,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.focusPrevious',
+    key: UpArrow,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.focusFirst',
+    key: Home,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.focusFirst',
+    key: PageUp,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.focusLast',
+    key: PageDown,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.focusLast',
+    key: End$1,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.selectCurrent',
+    key: Space,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.selectCurrent',
+    key: Enter,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.focusFirst',
+    key: Home,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.focusLast',
+    key: End$1,
+    when: FocusChatDebugTable
+  }, {
+    command: 'ChatDebug.handleEscape',
+    key: Escape,
+    when: FocusChatDebugTable
+  }];
+};
+
+const getMenuEntriesTableBody = props => {
+  return [{
+    args: [props.eventIndex],
+    command: 'ChatDebug.handleTableRowCopy',
+    flags: None$1,
+    id: 'copy',
+    label: copy()
+  }, {
+    args: [props.eventIndex],
+    command: 'ChatDebug.handleTableRowCopyAsFetch',
+    flags: None$1,
+    id: 'copy-as-fetch',
+    label: copyAsFetch()
+  }, {
+    args: [props.eventIndex],
+    command: 'ChatDebug.handleTableRowOpenInNewTab',
+    flags: None$1,
+    id: 'open-in-new-tab',
+    label: openInNewTab()
+  }];
+};
+
+const getColumnMenuEntry = (columnName, label, isVisible) => {
+  return {
+    args: [columnName],
+    command: 'ChatDebug.toggleTableColumnVisibility',
+    flags: isVisible ? Checked : Unchecked,
+    id: columnName,
+    label
+  };
+};
+const getMenuEntriesTableHeader = state => {
+  return [...state.tableColumns.map(column => getColumnMenuEntry(column.name, column.label, column.isVisible)), {
+    args: [],
+    command: 'ChatDebug.resetTableColumns',
+    flags: None$1,
+    id: 'reset-columns',
+    label: resetColumns()
+  }];
+};
+
+const MenuChatDebugTableHeader = 2189;
+const handleHeaderContextMenu = async (state, eventX, eventY) => {
+  const {
+    uid
+  } = state;
+  await showContextMenu2(uid, MenuChatDebugTableHeader, eventX, eventY, {
+    menuId: MenuChatDebugTableHeader
+  });
+  return state;
+};
+
+const show2 = async (uid, menuId, x, y, args) => {
+  await showContextMenu2(uid, menuId, x, y, args);
+};
+
+const getTableBodyEventIndex = (state, eventX, eventY) => {
+  const {
+    tableMaxLineY,
+    tableMinLineY,
+    tableWidth,
+    useDevtoolsLayout,
+    x
+  } = state;
+  if (!useDevtoolsLayout) {
+    return -1;
+  }
+  const currentEvents = getCurrentEvents$1(state);
+  if (currentEvents.length === 0) {
+    return -1;
+  }
+  const tableX = x + state.leftPadding;
+  const tableWidthNew = clampTableWidth(state, tableWidth);
+  const hasTimeline = currentEvents.length > 0;
+  const tableBodyY = getTableBodyY(state, hasTimeline);
+  const relativeX = eventX - tableX;
+  const relativeY = eventY - tableBodyY;
+  if (relativeX < 0 || relativeX >= tableWidthNew || relativeY < 0) {
+    return -1;
+  }
+  const eventIndex = tableMinLineY + Math.floor(relativeY / devtoolsTableRowHeight);
+  if (eventIndex < tableMinLineY || eventIndex >= tableMaxLineY || eventIndex >= currentEvents.length) {
+    return -1;
+  }
+  return eventIndex;
+};
+
+const MenuChatDebugTableBody = 2190;
+const handleTableBodyContextMenu = async (state, eventX, eventY) => {
+  const eventIndex = getTableBodyEventIndex(state, eventX, eventY);
+  await show2(state.uid, MenuChatDebugTableBody, eventX, eventY, {
+    eventIndex,
+    menuId: MenuChatDebugTableBody
+  });
+  return state;
+};
+
+const getMenuEntries2 = (state, props) => {
+  if (props.menuId === MenuChatDebugTableHeader) {
+    return getMenuEntriesTableHeader(state);
+  }
+  if (props.menuId === MenuChatDebugTableBody) {
+    return getMenuEntriesTableBody(props);
+  }
+  return [];
+};
+
+const getMenuIds = () => {
+  return [MenuChatDebugTableHeader, MenuChatDebugTableBody, 556, 557];
+};
+
+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 hasOwn = (event, key) => {
+  return Object.hasOwn(event, key);
+};
 
 const shouldIncludeArguments = (event, name) => {
   if (!hasOwn(event, 'arguments')) {
@@ -3650,6 +3985,9 @@ const getMergedRequestPayloadEvent = requestEvent => {
   };
 };
 const getPayloadObject = (event, name) => {
+  if (event.type === 'tool-call-started') {
+    return event.args;
+  }
   return {
     ...(name === undefined ? {} : {
       name
@@ -3685,10 +4023,24 @@ const getPayloadEvent = event => {
 };
 
 const getPayload = async state => {
-  if (!state.selectedEvent) {
+  const {
+    selectedEvent
+  } = state;
+  if (!selectedEvent) {
     return undefined;
   }
-  const payload = getPayloadEvent(state.selectedEvent);
+  const payload = getPayloadEvent(selectedEvent);
+  return payload;
+};
+
+const getResponse = async state => {
+  const {
+    selectedEvent
+  } = state;
+  if (!selectedEvent) {
+    return undefined;
+  }
+  const payload = getResponseEvent(selectedEvent);
   return payload;
 };
 
@@ -3824,7 +4176,7 @@ const getTimelineEvents = state => {
     showInputEvents,
     showResponsePartEvents
   } = state;
-  const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
+  const eventCategoryFilters = getSelectedCategoryFilters(state.categoryFilters);
   return getFilteredEvents(events, filterValue, eventCategoryFilters, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
 };
 
@@ -3845,9 +4197,16 @@ const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds)
 
 const getStateWithTimelineInfo = state => {
   const timelineEvents = getTimelineEvents(state);
-  const effectiveRange = getEffectiveTimelineRange(state.timelineStartSeconds, state.timelineEndSeconds, state.timelineSelectionActive, state.timelineSelectionAnchorSeconds, state.timelineSelectionFocusSeconds);
+  const {
+    timelineEndSeconds,
+    timelineSelectionActive,
+    timelineSelectionAnchorSeconds,
+    timelineSelectionFocusSeconds,
+    timelineStartSeconds
+  } = state;
+  const effectiveRange = getEffectiveTimelineRange(timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
   const timelineInfo = getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
-  const timelineFilterDescription = getTimelineFilterDescription(state.timelineStartSeconds, state.timelineEndSeconds);
+  const timelineFilterDescription = getTimelineFilterDescription(timelineStartSeconds, timelineEndSeconds);
   const nextState = {
     ...state,
     timelineEvents,
@@ -3904,6 +4263,9 @@ const getSessionNotFoundMessage = sessionId => {
 const getResponseMap = events => {
   const seen = Object.create(null);
   for (const event of events) {
+    if (event.type === 'tool-call-finished' && 'requestId' in event && typeof event.requestId === 'string') {
+      seen[event.requestId] = event;
+    }
     if (event.type === 'ai-response' && 'requestId' in event && typeof event.requestId === 'string') {
       seen[event.requestId] = event;
     }
@@ -3911,6 +4273,15 @@ const getResponseMap = events => {
   return seen;
 };
 
+/* eslint-disable @cspell/spellchecker */
+/* eslint-disable sonarjs/cognitive-complexity */
+
+const withSubType = event => {
+  return {
+    ...event,
+    subType: getEventSubType(event)
+  };
+};
 const getStatus = item => {
   if (item.statusCode !== undefined) {
     const statusCode = Number(item.statusCode);
@@ -3953,6 +4324,7 @@ const getMergedRequestResponseEvent = (item, response) => {
       ...(timestamp === undefined ? {} : {
         timestamp
       }),
+      subType: getEventSubType(item, 'ai-request-response', true),
       type: 'ai-request-response'
     };
   }
@@ -3973,9 +4345,55 @@ const getMergedRequestResponseEvent = (item, response) => {
     ...(timestamp === undefined ? {} : {
       timestamp
     }),
+    subType: getEventSubType(item, 'ai-request-response', true),
     type: 'ai-request-response'
   };
 };
+
+// TODO maybe chat-tool-worker should return a status code.
+const getToolCallStatus = response => {
+  // @ts-ignore
+  if (response && response.toolCallResult && response.toolCallResult.error) {
+    return 400;
+  }
+  return 200;
+};
+const getToolCallSize = response => {
+  if (response && response.size !== undefined) {
+    return response.size;
+  }
+  return 0;
+};
+const getMergedToolCallEvent = (item, response) => {
+  const parsedStart = new Date(item.timestamp || '');
+  const parsedEnd = new Date(response.timestamp || '');
+  const durationMs = parsedEnd.getTime() - parsedStart.getTime();
+  const started = getStartedTimestamp(item);
+  const ended = getEndedTimestamp(response);
+  const timestamp = item.timestamp ?? started;
+  const status = getToolCallStatus(response);
+  const subType = getEventSubType(item, 'tool-request-response', true);
+  const size = getToolCallSize(response);
+  return {
+    ...(ended === undefined ? {} : {
+      ended
+    }),
+    durationMs,
+    eventEndId: response.eventId,
+    eventId: item.eventId,
+    method: 'POST',
+    size,
+    ...(started === undefined ? {} : {
+      started
+    }),
+    status,
+    ...(timestamp === undefined ? {} : {
+      timestamp
+    }),
+    subType,
+    type: 'tool-request-response'
+  };
+};
 const toPrettyEvents = rawEvents => {
   if (rawEvents.type === 'error') {
     return [];
@@ -3983,15 +4401,22 @@ const toPrettyEvents = rawEvents => {
   const pretty = [];
   const map = getResponseMap(rawEvents.events);
   for (const item of rawEvents.events) {
-    if (item.type === 'ai-request' && 'requestId' in item && typeof item.requestId === 'string') {
+    if (item.type === 'tool-call-started' && 'requestId' in item && typeof item.requestId === 'string') {
+      const response = map[item.requestId];
+      if (response) {
+        pretty.push(getMergedToolCallEvent(item, response));
+      } else {
+        pretty.push(withSubType(item));
+      }
+    } else if (item.type === 'tool-call-finished' && 'requestId' in item && typeof item.requestId === 'string') ; else if (item.type === 'ai-request' && 'requestId' in item && typeof item.requestId === 'string') {
       const response = map[item.requestId];
       if (response) {
         pretty.push(getMergedRequestResponseEvent(item, response));
       } else {
-        pretty.push(item);
+        pretty.push(withSubType(item));
       }
     } else if (item.type === 'ai-response' && 'requestId' in item && typeof item.requestId === 'string') ; else {
-      pretty.push(item);
+      pretty.push(withSubType(item));
     }
   }
   return pretty;
@@ -4999,8 +5424,6 @@ const handleSashPointerUp = (state, eventX, eventY) => {
   };
 };
 
-const FocusChatDebugTable = 221_139;
-
 const handleTableFocus = state => {
   return {
     ...state,
@@ -5489,505 +5912,313 @@ const setUseDevtoolsLayout = (state, checked) => {
     selectedEventIndex,
     useDevtoolsLayout
   };
-  return applyVirtualTableState({
-    ...nextState,
-    tableWidth: shouldUseBalancedSplitTableWidth(nextState) ? getBalancedSplitTableWidth(nextState) : state.tableWidth
-  });
-};
-
-const handleShowEventStreamFinishedEvents = (state, checked) => {
-  const nextState = {
-    ...state,
-    showEventStreamFinishedEvents: getBoolean(checked)
-  };
-  return withPreservedSelection$1(state, nextState);
-};
-const handleShowInputEvents = (state, checked) => {
-  const nextState = {
-    ...state,
-    showInputEvents: getBoolean(checked)
-  };
-  return withPreservedSelection$1(state, nextState);
-};
-const handleShowResponsePartEvents = (state, checked) => {
-  const nextState = {
-    ...state,
-    showResponsePartEvents: getBoolean(checked)
-  };
-  return withPreservedSelection$1(state, nextState);
-};
-
-const rpcId = 'handleStorageWorkerUpdate';
-const handleStorageWorkerUpdate = async uid => {
-  await invoke('Viewlet.executeViewletCommand', uid, 'ChatDebug.handleClickRefresh');
-};
-
-const loadEventsFromUri = async state => {
-  const sessionId = getSessionIdFromUri(state);
-  if (!sessionId) {
-    return getStateWithInvalidUri(state);
-  }
-  return loadEventsForSessionId(state, sessionId);
-};
-
-const loadContent = async (state, savedState) => {
-  await getPreference('chatDebug.autoRefresh');
-  const restoredState = restoreSavedState(state, savedState);
-  const nextState = await loadEventsFromUri(restoredState);
-  if (nextState.sessionId) {
-    try {
-      await registerUpdateListener(nextState.sessionId, rpcId, nextState.uid);
-    } catch {
-      // ignore
-    }
-  }
-  return applyVirtualTableState({
-    ...nextState,
-    categoryFilters: createCategoryFilters(getSelectedEventCategoryFilters(nextState.categoryFilters)),
-    detailTabs: createDetailTabs(getSelectedDetailTab(nextState.detailTabs), nextState.selectedEvent)
-  });
-};
-
-const isAttachmentImagePreview = value => {
-  return typeof value === 'object' && value !== null && value.previewType === 'image';
-};
-
-const detailsLineNumberDigitWidth = 8;
-const detailsLineNumberHorizontalPadding = 8;
-const getStringLineCount = value => {
-  return value.split('\n').length;
-};
-const isChatViewEvent$1 = value => {
-  return typeof value === 'object' && value !== null && typeof value.type === 'string';
-};
-const getJsonLineCount = value => {
-  const renderedValue = isChatViewEvent$1(value) ? {
-    ...value,
-    type: getEventTypeLabel(value)
-  } : value;
-  const json = JSON.stringify(renderedValue, null, 2);
-  if (!json) {
-    return 1;
-  }
-  let lineCount = 1;
-  for (let i = 0; i < json.length; i++) {
-    if (json[i] === '\n') {
-      lineCount++;
-    }
-  }
-  return lineCount;
-};
-const getPreviewLineCount = selectedEvent => {
-  const previewEvent = getPreviewEvent(selectedEvent);
-  if (previewEvent === undefined || isAttachmentImagePreview(previewEvent)) {
-    return 0;
-  }
-  if (typeof previewEvent === 'string') {
-    if (previewEvent === ImageCouldNotBeLoaded || isChatMessageUpdatedEvent(selectedEvent)) {
-      return 0;
-    }
-    return getStringLineCount(previewEvent);
-  }
-  return getJsonLineCount(previewEvent);
-};
-const getLineCount = state => {
-  const {
-    selectedEvent
-  } = state;
-  if (!selectedEvent) {
-    return 0;
-  }
-  const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
-  if (selectedDetailTab === Timing$1 || selectedDetailTab === Tokens$1) {
-    return 0;
-  }
-  if (selectedDetailTab === Preview$1) {
-    return getPreviewLineCount(selectedEvent);
-  }
-  if (selectedDetailTab === Payload$1) {
-    return getJsonLineCount(getPayloadEvent(selectedEvent));
-  }
-  return getJsonLineCount(getResponseEvent(selectedEvent));
-};
-const getDetailsLineNumberWidth = state => {
-  const lineCount = getLineCount(state);
-  if (lineCount === 0) {
-    return 0;
-  }
-  const digitCount = String(lineCount).length;
-  return digitCount * detailsLineNumberDigitWidth + detailsLineNumberHorizontalPadding;
-};
-
-// cspell:ignore liga calt
-
-const getCss = state => {
-  const hasSelectedEvent = !!state.selectedEvent;
-  const tableWidth = hasSelectedEvent ? clampTableWidth(state, state.tableWidth) : getMainWidth(state);
-  const currentEvents = getCurrentEvents$1(state);
-  const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
-  const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
-  const maxDeltaY = getMaxDeltaY(currentEvents.length, tableBodyHeight);
-  const showScrollBar = scrollBarHeight > 0;
-  const scrollBarOffset = getScrollBarOffset(state.tableDeltaY, maxDeltaY, tableBodyHeight, scrollBarHeight);
-  const tableContentWidth = Math.max(0, tableWidth - (showScrollBar ? devtoolsTableScrollBarWidth : 0));
-  const detailsWidth = hasSelectedEvent ? getDetailsWidth(state, state.tableWidth) : 0;
-  const detailsLineNumberWidth = getDetailsLineNumberWidth(state);
-  const previewTextViewportHeight = getPreviewTextViewportHeight(state);
-  const previewVirtualization = getPreviewVirtualizationState(state.selectedEvent, previewTextViewportHeight, state.previewTextDeltaY);
-  let topSize = 60;
-  if (state.width >= state.largeBreakpoint) {
-    topSize = 30;
-  }
-  const tableColumnLayout = getTableColumnLayout(tableContentWidth, getVisibleTableColumns(state.tableColumns), state.tableColumns);
-  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0, tableColThreeWidth = 0, tableColFourWidth = 0] = tableColumnLayout.visibleColumnWidths;
-  const resizerOneLeft = tableColumnLayout.resizerLefts[0] ?? 0;
-  const resizerTwoLeft = tableColumnLayout.resizerLefts[1] ?? 0;
-  const resizerThreeLeft = tableColumnLayout.resizerLefts[2] ?? 0;
-  const resizerFourLeft = tableColumnLayout.resizerLefts[3] ?? 0;
-  const {
-    selectionEndPercent,
-    selectionStartPercent
-  } = state.timelineInfo;
-  return `
-.ChatDebugView {
-  --ChatDebugViewTableBodyHeight: ${tableBodyHeight}px;
-  --ChatDebugViewTableHeaderHeight: ${devtoolsTableHeaderHeight}px;
-  --ChatDebugViewTableColZeroWidth: ${tableColZeroWidth}px;
-  --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
-  --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
-  --ChatDebugViewTableColThreeWidth: ${tableColThreeWidth}px;
-  --ChatDebugViewTableColFourWidth: ${tableColFourWidth}px;
-  --ChatDebugViewDetailsLineNumberWidth: ${detailsLineNumberWidth}px;
-  --ChatDebugViewPreviewScrollBarHeight: ${previewVirtualization.scrollBarHeight}px;
-  --ChatDebugViewPreviewScrollBarOffset: ${previewVirtualization.scrollBarOffset}px;
-  --ChatDebugViewPreviewScrollBarWidth: ${previewVirtualization.showScrollBar ? devtoolsTableScrollBarWidth : 0}px;
-  --ChatDebugViewPreviewViewportHeight: ${previewVirtualization.viewportHeight}px;
-  --ChatDebugViewDetailsWidth: ${detailsWidth}px;
-  --ChatDebugViewDurationColumnWidth: ${getTableColumnWidth(state.tableColumns, Duration)}px;
-  --ChatDebugViewTableRowHeight: ${devtoolsTableRowHeight}px;
-  --ChatDebugViewTableScrollBarHeight: ${scrollBarHeight}px;
-  --ChatDebugViewTableScrollBarOffset: ${scrollBarOffset}px;
-  --ChatDebugViewTableScrollBarWidth: ${showScrollBar ? devtoolsTableScrollBarWidth : 0}px;
-  --ResizerOneLeft: ${resizerOneLeft}px;
-  --ResizerTwoLeft: ${resizerTwoLeft}px;
-  --ResizerThreeLeft: ${resizerThreeLeft}px;
-  --ResizerFourLeft: ${resizerFourLeft}px;
-  --ChatDebugViewSashWidth: ${state.sashWidth}px;
-  --ChatDebugViewTableWidth: ${tableWidth}px;
-  --ChatDebugViewTimelineHeight: ${state.timelineHeight}px;
-  --ChatDebugViewTimelineCursorGuideLeft: ${state.timelineHoverPercent ?? 0}%;
-  --ChatDebugViewTimelineSelectionEndLeft: ${selectionEndPercent ?? 0}%;
-  --ChatDebugViewTimelineSelectionStartLeft: ${selectionStartPercent ?? 0}%;
-  --ChatDebugViewTopSize: ${topSize}px;
-  --ChatDebugViewTypeColumnWidth: ${getTableColumnWidth(state.tableColumns, Type)}px;
-  padding: ${state.viewPadding}px;
-  padding-right: 0;
-}
-`;
-};
-
-const renderCss = (oldState, newState) => {
-  const css = getCss(newState);
-  return [SetCss, newState.uid, css];
+  return applyVirtualTableState({
+    ...nextState,
+    tableWidth: shouldUseBalancedSplitTableWidth(nextState) ? getBalancedSplitTableWidth(nextState) : state.tableWidth
+  });
 };
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
+const handleShowEventStreamFinishedEvents = (state, checked) => {
+  const nextState = {
+    ...state,
+    showEventStreamFinishedEvents: getBoolean(checked)
+  };
+  return withPreservedSelection$1(state, nextState);
 };
-
-const text = data => {
-  return {
-    childCount: 0,
-    text: data,
-    type: Text
+const handleShowInputEvents = (state, checked) => {
+  const nextState = {
+    ...state,
+    showInputEvents: getBoolean(checked)
   };
+  return withPreservedSelection$1(state, nextState);
 };
-
-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 handleShowResponsePartEvents = (state, checked) => {
+  const nextState = {
+    ...state,
+    showResponsePartEvents: getBoolean(checked)
+  };
+  return withPreservedSelection$1(state, nextState);
 };
 
-const getKeys = node => {
-  const keys = Object.keys(node).filter(isKey);
-  return keys;
+const rpcId = 'handleStorageWorkerUpdate';
+const handleStorageWorkerUpdate = async uid => {
+  await invoke('Viewlet.executeViewletCommand', uid, 'ChatDebug.handleClickRefresh');
 };
 
-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;
+const loadEventsFromUri = async state => {
+  const sessionId = getSessionIdFromUri(state);
+  if (!sessionId) {
+    return getStateWithInvalidUri(state);
   }
-  return result;
+  return loadEventsForSessionId(state, sessionId);
 };
-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--;
-  }
+
+const loadPreferences = async () => {
+  const autoRefresh = getBoolean(await getPreference('chatDebug.autoRefresh'));
   return {
-    children,
-    nodesConsumed: totalConsumed
+    autoRefresh
   };
 };
 
-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
-      });
+const loadContent = async (state, savedState) => {
+  await loadPreferences();
+  const restoredState = restoreSavedState(state, savedState);
+  const nextState = await loadEventsFromUri(restoredState);
+  if (nextState.sessionId) {
+    try {
+      await registerUpdateListener(nextState.sessionId, rpcId, nextState.uid);
+    } catch {
+      // ignore
     }
   }
-  return patches;
-};
-
-const treeToArray = node => {
-  const result = [node.node];
-  for (const child of node.children) {
-    result.push(...treeToArray(child));
-  }
-  return result;
+  return applyVirtualTableState({
+    ...nextState,
+    categoryFilters: createCategoryFilters(getSelectedEventCategoryFilters(nextState.categoryFilters)),
+    detailTabs: createDetailTabs(getSelectedDetailTab(nextState.detailTabs), nextState.selectedEvent)
+  });
 };
 
-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);
-    }
+const isAttachmentImagePreview = value => {
+  return typeof value === 'object' && value !== null && value.previewType === 'image';
+};
+
+const getToolName = event => {
+  if (typeof event.toolName === 'string' && event.toolName) {
+    return event.toolName;
   }
-  // Navigate back to parent if we ended at a child
-  if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
-    });
+  if (typeof event.name === 'string' && event.name) {
+    return event.name;
   }
-  // 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 {
+    arguments: toolArguments
+  } = event;
+  if (!toolArguments || typeof toolArguments !== 'object') {
+    return undefined;
   }
+  const {
+    name
+  } = toolArguments;
+  if (typeof name !== 'string' || !name) {
+    return undefined;
+  }
+  return name;
 };
-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);
+
+const toolExecutionTypePrefix = 'tool-execution';
+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 detailsLineNumberDigitWidth = 8;
+const detailsLineNumberHorizontalPadding = 8;
+const getStringLineCount = value => {
+  return value.split('\n').length;
+};
+const isChatViewEvent$1 = value => {
+  return typeof value === 'object' && value !== null && typeof value.type === 'string';
+};
+const getJsonLineCount = value => {
+  const renderedValue = isChatViewEvent$1(value) ? {
+    ...value,
+    type: getEventTypeLabel(value)
+  } : value;
+  const json = JSON.stringify(renderedValue, null, 2);
+  if (!json) {
+    return 1;
+  }
+  let lineCount = 1;
+  for (let i = 0; i < json.length; i++) {
+    if (json[i] === '\n') {
+      lineCount++;
     }
-    // Compare children
-    if (oldNode.children.length > 0 || newNode.children.length > 0) {
-      diffChildren(oldNode.children, newNode.children, patches);
+  }
+  return lineCount;
+};
+const getPreviewLineCount = selectedEvent => {
+  const previewEvent = getPreviewEvent(selectedEvent);
+  if (previewEvent === undefined || isAttachmentImagePreview(previewEvent)) {
+    return 0;
+  }
+  if (typeof previewEvent === 'string') {
+    if (previewEvent === ImageCouldNotBeLoaded || isChatMessageUpdatedEvent(selectedEvent)) {
+      return 0;
     }
-  } else {
-    // Non-root level or multiple root elements - use the regular comparison
-    diffChildren(oldTree, newTree, patches);
+    return getStringLineCount(previewEvent);
+  }
+  return getJsonLineCount(previewEvent);
+};
+const getLineCount = state => {
+  const {
+    selectedEvent
+  } = state;
+  if (!selectedEvent) {
+    return 0;
+  }
+  const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
+  if (selectedDetailTab === Timing$1 || selectedDetailTab === Tokens$1) {
+    return 0;
+  }
+  if (selectedDetailTab === Preview$1) {
+    return getPreviewLineCount(selectedEvent);
+  }
+  if (selectedDetailTab === Payload$1) {
+    return getJsonLineCount(getPayloadEvent(selectedEvent));
+  }
+  return getJsonLineCount(getResponseEvent(selectedEvent));
+};
+const getDetailsLineNumberWidth = state => {
+  const lineCount = getLineCount(state);
+  if (lineCount === 0) {
+    return 0;
   }
+  const digitCount = String(lineCount).length;
+  return digitCount * detailsLineNumberDigitWidth + detailsLineNumberHorizontalPadding;
 };
 
-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;
-    }
+// cspell:ignore liga calt
+
+const getCss = state => {
+  const {
+    largeBreakpoint,
+    previewTextDeltaY,
+    sashWidth,
+    selectedEvent,
+    tableColumns,
+    tableDeltaY,
+    tableWidth: tableWithRaw,
+    timelineHeight,
+    timelineHoverPercent,
+    timelineInfo,
+    viewPadding,
+    width
+  } = state;
+  const hasSelectedEvent = !!selectedEvent;
+  const tableWidth = hasSelectedEvent ? clampTableWidth(state, tableWithRaw) : getMainWidth(state);
+  const currentEvents = getCurrentEvents$1(state);
+  const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
+  const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
+  const maxDeltaY = getMaxDeltaY(currentEvents.length, tableBodyHeight);
+  const showScrollBar = scrollBarHeight > 0;
+  const scrollBarOffset = getScrollBarOffset(tableDeltaY, maxDeltaY, tableBodyHeight, scrollBarHeight);
+  const tableContentWidth = Math.max(0, tableWidth - (showScrollBar ? devtoolsTableScrollBarWidth : 0));
+  const detailsWidth = hasSelectedEvent ? getDetailsWidth(state, tableWidth) : 0;
+  const detailsLineNumberWidth = getDetailsLineNumberWidth(state);
+  const previewTextViewportHeight = getPreviewTextViewportHeight(state);
+  const previewVirtualization = getPreviewVirtualizationState(selectedEvent, previewTextViewportHeight, previewTextDeltaY);
+  let topSize = 60;
+  if (width >= largeBreakpoint) {
+    topSize = 30;
   }
-  // Return patches up to and including the last non-navigation patch
-  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+  const tableColumnLayout = getTableColumnLayout(tableContentWidth, getVisibleTableColumns(tableColumns), tableColumns);
+  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0, tableColThreeWidth = 0, tableColFourWidth = 0] = tableColumnLayout.visibleColumnWidths;
+  const resizerOneLeft = tableColumnLayout.resizerLefts[0] ?? 0;
+  const resizerTwoLeft = tableColumnLayout.resizerLefts[1] ?? 0;
+  const resizerThreeLeft = tableColumnLayout.resizerLefts[2] ?? 0;
+  const resizerFourLeft = tableColumnLayout.resizerLefts[3] ?? 0;
+  const {
+    selectionEndPercent,
+    selectionStartPercent
+  } = timelineInfo;
+  return `
+.ChatDebugView {
+  --ChatDebugViewTableBodyHeight: ${tableBodyHeight}px;
+  --ChatDebugViewTableHeaderHeight: ${devtoolsTableHeaderHeight}px;
+  --ChatDebugViewTableColZeroWidth: ${tableColZeroWidth}px;
+  --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
+  --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
+  --ChatDebugViewTableColThreeWidth: ${tableColThreeWidth}px;
+  --ChatDebugViewTableColFourWidth: ${tableColFourWidth}px;
+  --ChatDebugViewDetailsLineNumberWidth: ${detailsLineNumberWidth}px;
+  --ChatDebugViewPreviewScrollBarHeight: ${previewVirtualization.scrollBarHeight}px;
+  --ChatDebugViewPreviewScrollBarOffset: ${previewVirtualization.scrollBarOffset}px;
+  --ChatDebugViewPreviewScrollBarWidth: ${previewVirtualization.showScrollBar ? devtoolsTableScrollBarWidth : 0}px;
+  --ChatDebugViewPreviewViewportHeight: ${previewVirtualization.viewportHeight}px;
+  --ChatDebugViewDetailsWidth: ${detailsWidth}px;
+  --ChatDebugViewDurationColumnWidth: ${getTableColumnWidth(tableColumns, Duration)}px;
+  --ChatDebugViewTableRowHeight: ${devtoolsTableRowHeight}px;
+  --ChatDebugViewTableScrollBarHeight: ${scrollBarHeight}px;
+  --ChatDebugViewTableScrollBarOffset: ${scrollBarOffset}px;
+  --ChatDebugViewTableScrollBarWidth: ${showScrollBar ? devtoolsTableScrollBarWidth : 0}px;
+  --ResizerOneLeft: ${resizerOneLeft}px;
+  --ResizerTwoLeft: ${resizerTwoLeft}px;
+  --ResizerThreeLeft: ${resizerThreeLeft}px;
+  --ResizerFourLeft: ${resizerFourLeft}px;
+  --ChatDebugViewSashWidth: ${sashWidth}px;
+  --ChatDebugViewTableWidth: ${tableWidth}px;
+  --ChatDebugViewTimelineHeight: ${timelineHeight}px;
+  --ChatDebugViewTimelineCursorGuideLeft: ${timelineHoverPercent ?? 0}%;
+  --ChatDebugViewTimelineSelectionEndLeft: ${selectionEndPercent ?? 0}%;
+  --ChatDebugViewTimelineSelectionStartLeft: ${selectionStartPercent ?? 0}%;
+  --ChatDebugViewTopSize: ${topSize}px;
+  --ChatDebugViewTypeColumnWidth: ${getTableColumnWidth(tableColumns, Type)}px;
+  padding: ${viewPadding}px;
+  padding-right: 0;
+}
+
+.ChatDebugViewTop .IconButton {
+  align-self: center;
+
+
+
+}
+
+
+
+
+
+
+
+
+
+  .ExternalLink{
+  color: #52bdf2;
+}
+
+
+
+
+
+/* TODO improve this with virtual scrolling */
+
+.ChatDebugView .EditorLayers {
+  contain: unset;
+  height: auto;
+}
+
+.ChatDebugView .Gutter {
+  contain: unset;
+  height: auto;
+}
+
+.ChatDebugView .EditorContent {
+  contain: unset;
+  height: auto;
+}
+
+.ChatDebugView .EditorRows {
+  overflow-y: visible;
+  contain: unset;
+  height: auto;
+}
+
+.ChatDebugView .Editor {
+    overflow-y: auto;
+}
+
+
+`;
 };
 
-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 renderCss = (oldState, newState) => {
+  const css = getCss(newState);
+  return [SetCss, newState.uid, css];
 };
 
 const ChatDebugView = 'ChatDebugView';
@@ -6009,6 +6240,7 @@ const ChatDebugViewHeadersRowOdd = 'ChatDebugViewHeadersRowOdd';
 const ChatDebugViewHeadersSection = 'ChatDebugViewHeadersSection';
 const ChatDebugViewHeadersSectionHeading = 'ChatDebugViewHeadersSectionHeading';
 const ChatDebugViewHeadersSectionInfo = 'ChatDebugViewHeadersSectionInfo';
+const ExternalLink = 'ExternalLink';
 const ChatDebugViewHeadersTable = 'ChatDebugViewHeadersTable';
 const ChatDebugViewDevtoolsSplit = 'ChatDebugViewDevtoolsSplit';
 const ChatDebugViewEmpty = 'ChatDebugViewEmpty';
@@ -6036,7 +6268,6 @@ const ChatDebugViewImagePreview = 'ChatDebugViewImagePreview';
 const ChatDebugViewImagePreviewImageWrapper = 'ChatDebugViewImagePreviewImageWrapper';
 const ChatDebugViewImagePreviewImage = 'ChatDebugViewImagePreviewImage';
 const ChatDebugViewImagePreviewLabel = 'ChatDebugViewImagePreviewLabel';
-const ChatDebugViewRefreshButton = 'ChatDebugViewRefreshButton';
 const ChatDebugViewQuickFilterPill = 'ChatDebugViewQuickFilterPill';
 const ChatDebugViewQuickFilterPillSelected = 'ChatDebugViewQuickFilterPillSelected';
 const ChatDebugViewQuickFilters = 'ChatDebugViewQuickFilters';
@@ -6213,12 +6444,16 @@ const getQuickFilterNodes = categoryFilters => {
 const refreshButtonDom = [{
   'aria-label': refreshEvents$1(),
   childCount: 1,
-  className: ChatDebugViewRefreshButton,
-  name: Refresh$1,
+  className: mergeClassNames('IconButton'),
+  name: Refresh,
   onClick: HandleClickRefresh,
   type: Button$1,
-  value: Refresh$1
-}, text(refresh$1())];
+  value: Refresh
+}, {
+  childCount: 0,
+  className: mergeClassNames(MaskIcon, 'MaskIconRefresh'),
+  type: Div
+}];
 const getRefreshButtonDom = () => {
   return refreshButtonDom;
 };
@@ -6364,6 +6599,7 @@ const getInfoNodesWithLink = info => {
     type: Div
   }, text(prefix), {
     childCount: 1,
+    className: ExternalLink,
     href: accessControlExposeHeadersUrl,
     rel: 'noopener noreferrer',
     target: '_blank',
@@ -6428,7 +6664,7 @@ const getHeaderSectionNodes = section => {
   return [{
     childCount,
     className: ChatDebugViewHeadersSection,
-    type: Div
+    type: Section
   }, {
     ariaExpanded: section.isExpanded,
     childCount: 1,
@@ -7988,6 +8224,16 @@ const tableSummaryItemNode = {
   childCount: 1,
   type: Span
 };
+const tableSummarySeparatorNode = {
+  childCount: 1,
+  type: Span
+};
+const getTableSummaryItemDom = (summary, hasSeparator) => {
+  if (hasSeparator) {
+    return [tableSummaryItemNode, text(summary), tableSummarySeparatorNode, text(' | ')];
+  }
+  return [tableSummaryItemNode, text(summary)];
+};
 const getTableSummaryDom = summaries => {
   const nonEmptySummaries = summaries.filter(Boolean);
   if (nonEmptySummaries.length === 0) {
@@ -7995,10 +8241,8 @@ const getTableSummaryDom = summaries => {
   }
   const nodes = [getTableSummaryNode(nonEmptySummaries.length * 2 - 1)];
   for (let i = 0; i < nonEmptySummaries.length; i++) {
-    nodes.push(tableSummaryItemNode, text(nonEmptySummaries[i]));
-    if (i < nonEmptySummaries.length - 1) {
-      nodes.push(text(' | '));
-    }
+    const hasSeparator = i < nonEmptySummaries.length - 1;
+    nodes.push(...getTableSummaryItemDom(nonEmptySummaries[i], hasSeparator));
   }
   return nodes;
 };
@@ -8461,7 +8705,7 @@ const renderIncremental = (oldState, newState) => {
 };
 
 const getSelector = focus => {
-  if (focus === 0) {
+  if (focus === FocusChatDebugTable) {
     return '.Table';
   }
   return '';
@@ -8909,9 +9153,11 @@ const commandMap = {
   'ChatDebug.focusNext': wrapCommand(focusNext),
   'ChatDebug.focusPrevious': wrapCommand(focusPrevious),
   'ChatDebug.getCommandIds': getCommandIds,
+  'ChatDebug.getKeyBindings': getKeyBindings,
   'ChatDebug.getMenuEntries': wrapGetter(getMenuEntries2),
   'ChatDebug.getMenuIds': getMenuIds,
   'ChatDebug.getPayload': wrapGetter(getPayload),
+  'ChatDebug.getResponse': wrapGetter(getResponse),
   'ChatDebug.handleClickRefresh': wrapCommand(handleClickRefresh),
   'ChatDebug.handleCloseDetails': wrapCommand(handleCloseDetails$1),
   'ChatDebug.handleDetailsContextMenu': wrapCommand(handleDetailsContextMenu),