@lvce-editor/chat-debug-view 10.7.0 → 10.9.0

package/dist/chatDebugViewWorkerMain.js

@@ -1446,6 +1446,7 @@ const ImageCouldNotBeLoaded = 'image could not be loaded';
 const InvalidSessionId = 'Invalid session id';
 const InvalidUriEncoding = 'Invalid URI encoding';
 const InvalidUriFormat = 'Invalid URI format';
+const Method$1 = 'Method';
 const MissingUri = 'Missing URI';
 const Network$1 = 'Network';
 const NoChatSessionFound = 'No chat session found for sessionId "{PH1}".';
@@ -1528,6 +1529,9 @@ const invalidUriFormat = () => {
 const missingUri = () => {
   return i18nString(MissingUri);
 };
+const method = () => {
+  return i18nString(Method$1);
+};
 const network = () => {
   return i18nString(Network$1);
 };
@@ -1830,14 +1834,19 @@ const parseFilterValue = filterValue => {
 };
 
 const Type = 'type';
+const Method = 'method';
 const Duration = 'duration';
 const Status$1 = 'status';
-const tableColumnNames = [Type, Status$1, Duration];
+const tableColumnNames = [Type, Method, Status$1, Duration];
 const createTableColumns = () => {
   return [{
     isVisible: true,
     label: type(),
     name: Type
+  }, {
+    isVisible: true,
+    label: method(),
+    name: Method
   }, {
     isVisible: true,
     label: status(),
@@ -1877,6 +1886,8 @@ const getTableColumnLabel = (tableColumns, name) => {
   switch (name) {
     case Duration:
       return duration();
+    case Method:
+      return method();
     case Status$1:
       return status();
     case Type:
@@ -1888,6 +1899,7 @@ const getTableColumnLabel = (tableColumns, name) => {
 
 const defaultTableColumnWidths = {
   duration: 110,
+  method: 90,
   status: 110,
   type: 260
 };
@@ -1921,6 +1933,7 @@ const getTableWidthFromClientX = (viewX, width, clientX) => {
 
 const minimumTableColumnWidths = {
   [Duration]: 80,
+  [Method]: 56,
   [Status$1]: 56,
   [Type]: 80
 };
@@ -1989,7 +2002,7 @@ const getResizedTableColumnWidths = (width, tableWidth, visibleTableColumns, tab
 };
 
 const isSameTableColumnWidths = (first, second) => {
-  return first.type === second.type && first.duration === second.duration && first.status === second.status;
+  return first.type === second.type && first.method === second.method && first.duration === second.duration && first.status === second.status;
 };
 
 const isFiniteNumber = value => {
@@ -2001,7 +2014,7 @@ const isTableColumnWidths = value => {
     return false;
   }
   const record = value;
-  return isFiniteNumber(record.type) && isFiniteNumber(record.duration) && isFiniteNumber(record.status);
+  return isFiniteNumber(record.type) && isFiniteNumber(record.method) && isFiniteNumber(record.duration) && isFiniteNumber(record.status);
 };
 
 const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
@@ -2210,6 +2223,9 @@ const createDefaultState = () => {
     databaseName: 'lvce-chat-view-sessions',
     dataBaseVersion: 2,
     detailTabs: createDetailTabs(),
+    devtoolsRootGap: 4,
+    devtoolsTimelineHeight: 88,
+    devtoolsTopHeight: 28,
     errorMessage: '',
     events: [],
     eventStoreName: 'chat-view-events',
@@ -2222,6 +2238,9 @@ const createDefaultState = () => {
     platform: 0,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     sashPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
@@ -2293,7 +2312,7 @@ const RenderFocusContext = 4;
 const RenderFocus = 5;
 
 const diff = (oldState, newState) => {
-  if (oldState.categoryFilters !== newState.categoryFilters || 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.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.sortColumn !== newState.sortColumn || oldState.sortDescending !== newState.sortDescending || oldState.tableColumnWidths !== newState.tableColumnWidths || 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) {
+  if (oldState.categoryFilters !== newState.categoryFilters || 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.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.sortColumn !== newState.sortColumn || oldState.sortDescending !== newState.sortDescending || oldState.tableColumnWidths !== newState.tableColumnWidths || 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 [];
@@ -2501,7 +2520,7 @@ const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showE
 
 const isNetworkEvent = event => {
   const normalizedType = event.type.toLowerCase();
-  return normalizedType === 'request' || normalizedType === 'response' || normalizedType === 'handle-response' || normalizedType.includes('fetch') || normalizedType.includes('xhr');
+  return normalizedType === 'request' || normalizedType === 'ai-request' || normalizedType === 'response' || normalizedType === 'ai-response-success' || normalizedType === 'handle-response' || normalizedType.includes('fetch') || normalizedType.includes('xhr');
 };
 
 const isStreamEvent = event => {
@@ -2574,7 +2593,6 @@ const getEventTableDurationText = event => {
   return `${durationText.slice(0, -2)} ms`;
 };
 
-const toolExecutionTypePrefix = 'tool-execution';
 const getToolName = event => {
   if (typeof event.toolName === 'string' && event.toolName) {
     return event.toolName;
@@ -2596,6 +2614,8 @@ const getToolName = event => {
   }
   return name;
 };
+
+const toolExecutionTypePrefix = 'tool-execution';
 const getEventTypeLabel = event => {
   if (!event.type.startsWith(toolExecutionTypePrefix)) {
     return event.type;
@@ -2748,11 +2768,11 @@ const devtoolsTableScrollBarWidth = 12;
 const devtoolsTableSummaryHeight = 24;
 const minimumDevtoolsTableScrollBarHeight = 20;
 
-const devtoolsRootGap = 4;
-const devtoolsTopHeight = 28;
-const devtoolsTimelineHeight = 88;
 const getTableBodyY = (state, hasTimeline) => {
   const {
+    devtoolsRootGap,
+    devtoolsTimelineHeight,
+    devtoolsTopHeight,
     y
   } = state;
   return y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
@@ -2990,6 +3010,9 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
     detailTabs: createDetailTabs(selectedDetailTab, resolvedSelectedEvent),
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
@@ -3332,6 +3355,9 @@ const restoreSelectedEvent = async state => {
       ...state,
       previewTextCursorColumnIndex: null,
       previewTextCursorRowIndex: null,
+      previewTextDeltaY: 0,
+      previewTextScrollBarHandleOffset: 0,
+      previewTextScrollBarPointerActive: false,
       selectedEvent: null,
       selectedEventIndex: null
     };
@@ -3343,6 +3369,9 @@ const restoreSelectedEvent = async state => {
       ...state,
       previewTextCursorColumnIndex: null,
       previewTextCursorRowIndex: null,
+      previewTextDeltaY: 0,
+      previewTextScrollBarHandleOffset: 0,
+      previewTextScrollBarPointerActive: false,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null
@@ -3354,6 +3383,9 @@ const restoreSelectedEvent = async state => {
       ...state,
       previewTextCursorColumnIndex: null,
       previewTextCursorRowIndex: null,
+      previewTextDeltaY: 0,
+      previewTextScrollBarHandleOffset: 0,
+      previewTextScrollBarPointerActive: false,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null
@@ -3365,6 +3397,9 @@ const restoreSelectedEvent = async state => {
     ...state,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: resolvedSelectedEvent,
     selectedEventId: selectedEvent.eventId,
     selectedEventIndex
@@ -3449,6 +3484,9 @@ const handleCloseDetails$1 = state => {
     ...state,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null
@@ -3880,26 +3918,42 @@ const getResponseContentText = content => {
   } = content;
   return typeof text === 'string' ? text : undefined;
 };
-const getSseResponseCompletedPreviewText = event => {
-  if (event.type !== 'sse-response-completed') {
-    return undefined;
-  }
-  const {
-    value
-  } = event;
-  if (!value || typeof value !== 'object') {
-    return undefined;
+const getResponseOutput = event => {
+  if (event.type === 'sse-response-completed') {
+    const {
+      value
+    } = event;
+    if (!value || typeof value !== 'object') {
+      return undefined;
+    }
+    const {
+      response
+    } = value;
+    if (!response || typeof response !== 'object') {
+      return undefined;
+    }
+    const {
+      output
+    } = response;
+    return Array.isArray(output) ? output : undefined;
   }
-  const {
-    response
-  } = value;
-  if (!response || typeof response !== 'object') {
-    return undefined;
+  if (event.type === 'ai-response') {
+    const {
+      value
+    } = event;
+    if (!value || typeof value !== 'object') {
+      return undefined;
+    }
+    const {
+      output
+    } = value;
+    return Array.isArray(output) ? output : undefined;
   }
-  const {
-    output
-  } = response;
-  if (!Array.isArray(output) || output.length === 0) {
+  return undefined;
+};
+const getResponsePreviewText = event => {
+  const output = getResponseOutput(event);
+  if (!output || output.length === 0) {
     return undefined;
   }
   const [firstOutput] = output;
@@ -3915,9 +3969,9 @@ const getPreviewMessageText = event => {
   if (isChatMessageUpdatedEvent(event) && typeof event.text === 'string') {
     return event.text;
   }
-  const sseResponseCompletedPreviewText = getSseResponseCompletedPreviewText(event);
-  if (sseResponseCompletedPreviewText !== undefined) {
-    return sseResponseCompletedPreviewText;
+  const responsePreviewText = getResponsePreviewText(event);
+  if (responsePreviewText !== undefined) {
+    return responsePreviewText;
   }
   if (!isChatMessageAddedEvent(event)) {
     return undefined;
@@ -4004,16 +4058,21 @@ const getWriteFilePreviewText = (event, name) => {
   const {
     arguments: toolArguments
   } = event;
-  if (typeof toolArguments !== 'object' || toolArguments === null || !Object.hasOwn(toolArguments, 'content')) {
+  if (typeof toolArguments !== 'object' || toolArguments === null || !Object.hasOwn(toolArguments, 'content') || !Object.hasOwn(toolArguments, 'uri')) {
     return undefined;
   }
   const {
-    content
+    content,
+    uri
   } = toolArguments;
-  if (typeof content !== 'string') {
+  if (typeof content !== 'string' || typeof uri !== 'string') {
     return undefined;
   }
-  return content;
+  return {
+    content,
+    previewType: 'write-file',
+    uri
+  };
 };
 
 const getPreviewEvent = event => {
@@ -4064,6 +4123,77 @@ const getPreviewTextCursorStyle = cursor => {
   return `height: ${previewTextRowHeight}px; left: ${cursor.columnIndex * defaultPreviewTextColumnWidth}px; top: ${cursor.rowIndex * previewTextRowHeight}px; width: 0px;`;
 };
 
+const isWriteFilePreview = value => {
+  return typeof value === 'object' && value !== null && value.previewType === 'write-file' && typeof value.content === 'string' && typeof value.uri === 'string';
+};
+
+const getPreviewTextValue = selectedEvent => {
+  if (!selectedEvent) {
+    return undefined;
+  }
+  const previewEvent = getPreviewEvent(selectedEvent);
+  if (typeof previewEvent === 'string') {
+    return previewEvent;
+  }
+  if (isWriteFilePreview(previewEvent)) {
+    return previewEvent.content;
+  }
+  return undefined;
+};
+const getPreviewTextLineCount = selectedEvent => {
+  const value = getPreviewTextValue(selectedEvent);
+  if (value === undefined) {
+    return 0;
+  }
+  return value.split('\n').length;
+};
+const getPreviewTextViewportHeight = state => {
+  if (!state.selectedEvent) {
+    return 0;
+  }
+  return getTableBodyHeight(state, 1);
+};
+const getPreviewTextMaxDeltaY = (lineCount, viewportHeight) => {
+  return Math.max(lineCount * previewTextRowHeight - viewportHeight, 0);
+};
+const clampPreviewTextDeltaY = (deltaY, lineCount, viewportHeight) => {
+  const maxDeltaY = getPreviewTextMaxDeltaY(lineCount, viewportHeight);
+  if (deltaY < 0) {
+    return 0;
+  }
+  if (deltaY > maxDeltaY) {
+    return maxDeltaY;
+  }
+  return deltaY;
+};
+const getPreviewVirtualizationState = (selectedEvent, viewportHeight, deltaY) => {
+  const totalLineCount = getPreviewTextLineCount(selectedEvent);
+  const clampedDeltaY = clampPreviewTextDeltaY(deltaY, totalLineCount, viewportHeight);
+  const startLineY = Math.floor(clampedDeltaY / previewTextRowHeight);
+  const visibleLineCount = viewportHeight <= 0 ? 0 : Math.max(1, Math.ceil(viewportHeight / previewTextRowHeight));
+  const endLineY = Math.min(totalLineCount, startLineY + visibleLineCount);
+  const maxDeltaY = getPreviewTextMaxDeltaY(totalLineCount, viewportHeight);
+  const scrollBarHeight = getScrollBarHeight(totalLineCount, viewportHeight);
+  const scrollBarOffset = getScrollBarOffset(clampedDeltaY, maxDeltaY, viewportHeight, scrollBarHeight);
+  return {
+    deltaY: clampedDeltaY,
+    endLineY,
+    maxDeltaY,
+    scrollBarHeight,
+    scrollBarOffset,
+    showScrollBar: scrollBarHeight > 0,
+    startLineY,
+    totalLineCount,
+    viewportHeight
+  };
+};
+const setPreviewTextDeltaY = (state, deltaY) => {
+  return {
+    ...state,
+    previewTextDeltaY: clampPreviewTextDeltaY(deltaY, getPreviewTextLineCount(state.selectedEvent), getPreviewTextViewportHeight(state))
+  };
+};
+
 const hasNumberedTextPreview = (state, previewEvent) => {
   if (typeof previewEvent !== 'string') {
     return false;
@@ -4081,7 +4211,8 @@ const handlePreviewTextPointerDown = (state, x, y) => {
   if (!hasNumberedTextPreview(state, previewEvent)) {
     return state;
   }
-  const cursor = getPreviewTextCursorFromPoint(previewEvent, x, y);
+  const deltaY = clampPreviewTextDeltaY(state.previewTextDeltaY, getPreviewTextLineCount(state.selectedEvent), getPreviewTextViewportHeight(state));
+  const cursor = getPreviewTextCursorFromPoint(previewEvent, x, y + deltaY);
   if (state.previewTextCursorColumnIndex === cursor.columnIndex && state.previewTextCursorRowIndex === cursor.rowIndex) {
     return state;
   }
@@ -4092,6 +4223,87 @@ const handlePreviewTextPointerDown = (state, x, y) => {
   };
 };
 
+const getPreviewTextBodyY = state => {
+  return getTableBodyY(state, true);
+};
+
+const getHandleOffsetAndPercent$1 = (viewportHeight, scrollBarHeight, relativeY) => {
+  const halfScrollBarHeight = scrollBarHeight / 2;
+  if (relativeY <= halfScrollBarHeight) {
+    return {
+      handleOffset: relativeY,
+      percent: 0
+    };
+  }
+  if (relativeY <= viewportHeight - halfScrollBarHeight) {
+    return {
+      handleOffset: halfScrollBarHeight,
+      percent: (relativeY - halfScrollBarHeight) / Math.max(1, viewportHeight - scrollBarHeight)
+    };
+  }
+  return {
+    handleOffset: scrollBarHeight - viewportHeight + relativeY,
+    percent: 1
+  };
+};
+const handlePreviewTextScrollBarPointerDown = (state, eventY) => {
+  const viewportHeight = getPreviewTextViewportHeight(state);
+  const virtualization = getPreviewVirtualizationState(state.selectedEvent, viewportHeight, state.previewTextDeltaY);
+  const bodyY = getPreviewTextBodyY(state);
+  const relativeY = eventY - bodyY;
+  if (virtualization.viewportHeight === 0 || virtualization.scrollBarHeight === 0) {
+    return state;
+  }
+  const {
+    handleOffset,
+    percent
+  } = getHandleOffsetAndPercent$1(virtualization.viewportHeight, virtualization.scrollBarHeight, relativeY);
+  const nextState = setPreviewTextDeltaY(state, percent * virtualization.maxDeltaY);
+  return {
+    ...nextState,
+    previewTextScrollBarHandleOffset: handleOffset,
+    previewTextScrollBarPointerActive: true
+  };
+};
+
+const handlePreviewTextScrollBarPointerMove = (state, eventY) => {
+  if (!state.previewTextScrollBarPointerActive) {
+    return state;
+  }
+  const viewportHeight = getPreviewTextViewportHeight(state);
+  const virtualization = getPreviewVirtualizationState(state.selectedEvent, viewportHeight, state.previewTextDeltaY);
+  if (viewportHeight === 0 || virtualization.scrollBarHeight === 0) {
+    return state;
+  }
+  const relativeY = eventY - getPreviewTextBodyY(state);
+  const nextHandleTop = Math.max(0, Math.min(viewportHeight - virtualization.scrollBarHeight, relativeY - state.previewTextScrollBarHandleOffset));
+  const percent = nextHandleTop / Math.max(1, viewportHeight - virtualization.scrollBarHeight);
+  const nextState = setPreviewTextDeltaY(state, percent * virtualization.maxDeltaY);
+  return {
+    ...nextState,
+    previewTextScrollBarPointerActive: true
+  };
+};
+
+const handlePreviewTextScrollBarPointerUp = state => {
+  if (!state.previewTextScrollBarPointerActive && state.previewTextScrollBarHandleOffset === 0) {
+    return state;
+  }
+  return {
+    ...state,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false
+  };
+};
+
+const handlePreviewTextWheel = (state, deltaY) => {
+  return setPreviewTextDeltaY(state, state.previewTextDeltaY + deltaY);
+};
+
+const handleRootContextMenu = state => {
+  return state;
+};
+
 const handleSashPointerDown = (state, eventX, eventY) => {
   if (state.sashPointerActive) {
     return state;
@@ -4152,6 +4364,8 @@ const getTableResizerId = name => {
   switch (name) {
     case 'ResizerOne':
       return 1;
+    case 'ResizerThree':
+      return 3;
     case 'ResizerTwo':
       return 2;
     default:
@@ -4476,6 +4690,9 @@ const setUseDevtoolsLayout = (state, checked) => {
     ...state,
     previewTextCursorColumnIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorColumnIndex : null,
     previewTextCursorRowIndex: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextCursorRowIndex : null,
+    previewTextDeltaY: useDevtoolsLayout && selectedEventIndex !== null ? state.previewTextDeltaY : 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEvent : null,
     selectedEventId: useDevtoolsLayout && selectedEventIndex !== null ? state.selectedEventId : null,
     selectedEventIndex,
@@ -4625,14 +4842,17 @@ const getCss = state => {
   const tableContentWidth = Math.max(0, tableWidth - (showScrollBar ? devtoolsTableScrollBarWidth : 0));
   const detailsWidth = hasSelectedEvent ? getDetailsWidth(state.width, 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.tableColumnWidths);
-  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0] = tableColumnLayout.visibleColumnWidths;
+  const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0, tableColThreeWidth = 0] = tableColumnLayout.visibleColumnWidths;
   const resizerOneLeft = tableColumnLayout.resizerLefts[0] ?? 0;
   const resizerTwoLeft = tableColumnLayout.resizerLefts[1] ?? 0;
+  const resizerThreeLeft = tableColumnLayout.resizerLefts[2] ?? 0;
   const {
     selectionEndPercent,
     selectionStartPercent
@@ -4644,7 +4864,12 @@ const getCss = state => {
   --ChatDebugViewTableColZeroWidth: ${tableColZeroWidth}px;
   --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
   --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
+  --ChatDebugViewTableColThreeWidth: ${tableColThreeWidth}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: ${state.tableColumnWidths.duration}px;
   --ChatDebugViewTableRowHeight: ${devtoolsTableRowHeight}px;
@@ -4653,6 +4878,7 @@ const getCss = state => {
   --ChatDebugViewTableScrollBarWidth: ${showScrollBar ? devtoolsTableScrollBarWidth : 0}px;
   --ResizerOneLeft: ${resizerOneLeft}px;
   --ResizerTwoLeft: ${resizerTwoLeft}px;
+  --ResizerThreeLeft: ${resizerThreeLeft}px;
   --ChatDebugViewSashWidth: ${sashWidth}px;
   --ChatDebugViewTableWidth: ${tableWidth}px;
   --ChatDebugViewTimelineHeight: ${state.timelineHeight}px;
@@ -4700,6 +4926,36 @@ const getCss = state => {
   width: var(--ChatDebugViewDetailsLineNumberWidth);
 }
 
+.PreviewVirtualizedEditor {
+  height: var(--ChatDebugViewPreviewViewportHeight);
+  overflow: hidden;
+  position: relative;
+}
+
+.PreviewVirtualizedEditor .Editor {
+  width: calc(100% - var(--ChatDebugViewPreviewScrollBarWidth));
+}
+
+.PreviewTextScrollBar {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 999px;
+  height: var(--ChatDebugViewPreviewViewportHeight);
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: var(--ChatDebugViewPreviewScrollBarWidth);
+}
+
+.PreviewTextScrollBarThumb {
+  background: rgba(255, 255, 255, 0.22);
+  border-radius: 999px;
+  height: var(--ChatDebugViewPreviewScrollBarHeight);
+  left: 2px;
+  position: absolute;
+  top: var(--ChatDebugViewPreviewScrollBarOffset);
+  width: calc(100% - 4px);
+}
+
 .TableScrollBar {
   background: rgba(255, 255, 255, 0.06);
   border-radius: 999px;
@@ -4720,6 +4976,38 @@ const getCss = state => {
   width: calc(100% - 4px);
 }
 
+.TokenText {
+  color: var(--vscode-editor-foreground);
+}
+
+.TokenString {
+  color: var(--vscode-debugTokenExpression-string, #ce9178);
+}
+
+.TokenNumeric {
+  color: var(--vscode-debugTokenExpression-number, #b5cea8);
+}
+
+.TokenBoolean {
+  color: var(--vscode-debugTokenExpression-boolean, #569cd6);
+}
+
+.TokenKey,
+.TokenAttributeName,
+.TokenPropertyName {
+  color: var(--vscode-symbolIcon-propertyForeground, #9cdcfe);
+}
+
+.TokenKeyword,
+.TokenTag,
+.TokenSelector {
+  color: var(--vscode-symbolIcon-keywordForeground, #569cd6);
+}
+
+.TokenComment {
+  color: var(--vscode-editorLineNumber-foreground, #6a9955);
+}
+
 `;
 };
 
@@ -5048,6 +5336,9 @@ const EditorRows = 'EditorRows';
 const EditorSelection = 'EditorSelection';
 const EditorSelections = 'Selections';
 const EditorViewlet = 'Viewlet Editor';
+const PreviewTextScrollBar = 'PreviewTextScrollBar';
+const PreviewTextScrollBarThumb = 'PreviewTextScrollBarThumb';
+const PreviewVirtualizedEditor = 'PreviewVirtualizedEditor';
 const ChatDebugViewEventLineNumber = 'ChatDebugViewEventLineNumber';
 const Gutter = 'Gutter';
 const TableRowSelected = 'TableRowSelected';
@@ -5077,6 +5368,7 @@ const Resizer = 'Resizer';
 const ResizerInner = 'ResizerInner';
 const ResizerOne = 'ResizerOne';
 const ResizerTwo = 'ResizerTwo';
+const ResizerThree = 'ResizerThree';
 const TableHead = 'TableHead';
 const Resizers = 'Resizers';
 const TableCol = 'TableCol';
@@ -5123,25 +5415,17 @@ const ChatDebugViewCellDuration = 'ChatDebugViewCellDuration';
 const ChatDebugViewCellStatusError = 'ChatDebugViewCellStatusError';
 const InputBox = 'InputBox';
 const TokenBoolean = 'Token TokenBoolean';
+const TokenComment = 'Token TokenComment';
 const TokenKey = 'Token TokenKey';
+const TokenKeyword = 'Token TokenKeyword';
 const TokenNumeric = 'Token TokenNumeric';
+const TokenAttributeName = 'Token TokenAttributeName';
+const TokenPropertyName = 'Token TokenPropertyName';
+const TokenSelector = 'Token TokenSelector';
 const TokenString = 'Token TokenString';
+const TokenTag = 'Token TokenTag';
 const TokenText = 'Token TokenText';
 
-const debugErrorRootNode = {
-  childCount: 1,
-  className: ChatDebugView,
-  type: Div
-};
-const debugErrorMessageNode = {
-  childCount: 1,
-  className: ChatDebugViewError,
-  type: Div
-};
-const getDebugErrorDom = errorMessage => {
-  return [debugErrorRootNode, debugErrorMessageNode, text(errorMessage)];
-};
-
 const HandleEventCategoryFilter = 4;
 const HandleFilterInput = 5;
 const SelectDetailTab = 6;
@@ -5174,6 +5458,25 @@ const HandleTableScrollBarPointerDown = 32;
 const HandleTableScrollBarPointerMove = 33;
 const HandleTableScrollBarPointerUp = 34;
 const HandleTableWheel = 35;
+const HandlePreviewTextWheel = 36;
+const HandlePreviewTextScrollBarPointerDown = 37;
+const HandlePreviewTextScrollBarPointerMove = 38;
+const HandlePreviewTextScrollBarPointerUp = 39;
+const HandleRootContextMenu = 40;
+
+const debugErrorRootNode = {
+  childCount: 1,
+  className: ChatDebugView,
+  type: Div
+};
+const debugErrorMessageNode = {
+  childCount: 1,
+  className: ChatDebugViewError,
+  type: Div
+};
+const getDebugErrorDom = errorMessage => {
+  return [debugErrorRootNode, debugErrorMessageNode, text(errorMessage)];
+};
 
 const getFilterInputDom = (filterValue, useDevtoolsLayout) => {
   return {
@@ -5238,18 +5541,51 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, categoryFilters) =>
     return [{
       childCount: 2 + (quickFilterNodes.length > 0 ? 1 : 0),
       className: mergeClassNames(ChatDebugViewTop, ChatDebugViewTopDevtools),
-      onContextMenu: HandleHeaderContextMenu,
       type: Search
     }, getFilterInputDom(filterValue, true), ...quickFilterNodes, ...refreshButtonDom];
   }
   return [{
     childCount: 2,
     className: ChatDebugViewTop,
-    onContextMenu: HandleHeaderContextMenu,
     type: Search
   }, getFilterInputDom(filterValue, false), ...refreshButtonDom];
 };
 
+const getNextSiblingIndex$2 = (nodes, index) => {
+  let nextSiblingIndex = index + 1;
+  const childCount = nodes[index]?.childCount || 0;
+  for (let i = 0; i < childCount; i++) {
+    nextSiblingIndex = getNextSiblingIndex$2(nodes, nextSiblingIndex);
+  }
+  return nextSiblingIndex;
+};
+
+const getDirectChildCount$1 = nodes => {
+  let count = 0;
+  let index = 0;
+  while (index < nodes.length) {
+    count++;
+    index = getNextSiblingIndex$2(nodes, index);
+  }
+  return count;
+};
+
+const getPanelId = detailTab => {
+  return `ChatDebugViewDetailsPanel-${detailTab}`;
+};
+
+const getDetailContentDom = (selectedDetailTab, safeSelectedDetailTab, contentNodes) => {
+  return [{
+    'aria-label': selectedDetailTab.label,
+    childCount: getDirectChildCount$1(contentNodes),
+    className: ChatDebugViewDetailsBottom,
+    id: getPanelId(safeSelectedDetailTab),
+    onContextMenu: HandleDetailsContextMenu,
+    role: 'tabpanel',
+    type: Div
+  }, ...contentNodes];
+};
+
 const detailsCloseButtonDom = [{
   'aria-label': closeDetails(),
   childCount: 1,
@@ -5268,6 +5604,29 @@ const getDetailsCloseButtonDom = () => {
   return detailsCloseButtonDom;
 };
 
+const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
+  if (selectedEvent === null) {
+    return detailTabs;
+  }
+  return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
+};
+
+const getEditorRowDom = line => {
+  return [{
+    childCount: line.childCount,
+    className: EditorRow,
+    type: Div
+  }, ...line.nodes];
+};
+
+const getEditorRowsDom = lineData => {
+  return [{
+    childCount: lineData.length,
+    className: EditorRows,
+    type: Div
+  }, ...lineData.flatMap(getEditorRowDom)];
+};
+
 const defaultEditorCursor = {
   columnIndex: 0,
   rowIndex: 1
@@ -5285,13 +5644,14 @@ const getEditorSelectionDom = (cursor = defaultEditorCursor) => {
     type: Div
   }] : [])];
 };
-const getGutterDom = (lineData, showLineNumbers) => {
+
+const getGutterDom = (lineData, showLineNumbers, lineNumberStart = 0) => {
   const gutterNodes = showLineNumbers ? lineData.flatMap((_, index) => {
     return [{
       childCount: 1,
       className: ChatDebugViewEventLineNumber,
       type: Span
-    }, text(String(index + 1))];
+    }, text(String(lineNumberStart + index + 1))];
   }) : [];
   return [{
     childCount: showLineNumbers ? lineData.length : 0,
@@ -5299,21 +5659,55 @@ const getGutterDom = (lineData, showLineNumbers) => {
     type: Div
   }, ...gutterNodes];
 };
-const getEditorRowDom = line => {
-  return [{
-    childCount: line.childCount,
-    className: EditorRow,
+
+const getVirtualizedEditorDom = (lineData, showLineNumbers = true, cursor = null, onPointerDown, options) => {
+  const editorChildren = [{
+    childCount: 2,
+    className: EditorViewlet,
+    role: 'code',
     type: Div
-  }, ...line.nodes];
-};
-const getEditorRowsDom = lineData => {
-  return [{
-    childCount: lineData.length,
-    className: EditorRows,
+  }, ...getGutterDom(lineData, showLineNumbers, options.lineNumberStart), {
+    childCount: 2,
+    className: EditorContent,
+    onPointerDown,
     type: Div
-  }, ...lineData.flatMap(getEditorRowDom)];
-};
-const getEditorDom = (lineData, showLineNumbers = true, cursor = defaultEditorCursor, onPointerDown) => {
+  }, {
+    'aria-autocomplete': 'list',
+    'aria-multiline': true,
+    'aria-roledescription': 'editor',
+    autocapitalize: 'off',
+    autocomplete: 'off',
+    autocorrect: 'off',
+    childCount: 0,
+    className: EditorInput,
+    name: 'editor',
+    role: 'textbox',
+    spellcheck: false,
+    type: TextArea,
+    wrap: 'off'
+  }, {
+    childCount: 2,
+    className: EditorLayers,
+    type: Div
+  }, ...getEditorSelectionDom(cursor), ...getEditorRowsDom(lineData)];
+  return [{
+    childCount: options.showScrollBar ? 2 : 1,
+    className: mergeClassNames(EditorContainer, PreviewVirtualizedEditor),
+    onWheel: options.onWheel,
+    type: Div
+  }, ...editorChildren, ...(options.showScrollBar ? [{
+    childCount: 1,
+    className: PreviewTextScrollBar,
+    onPointerDown: options.onScrollBarPointerDown,
+    type: Div
+  }, {
+    childCount: 0,
+    className: PreviewTextScrollBarThumb,
+    type: Div
+  }] : [])];
+};
+
+const getEditorDom = (lineData, showLineNumbers = true, cursor, onPointerDown) => {
   return [{
     childCount: 1,
     className: EditorContainer,
@@ -5349,7 +5743,7 @@ const getEditorDom = (lineData, showLineNumbers = true, cursor = defaultEditorCu
   }, ...getEditorSelectionDom(cursor), ...getEditorRowsDom(lineData)];
 };
 
-const isDigit = character => {
+const isDigit$1 = character => {
   return character !== undefined && character >= '0' && character <= '9';
 };
 const isWhitespace = character => {
@@ -5363,10 +5757,10 @@ const getIntegerEnd = (json, start) => {
   if (json[i] === '0') {
     return i + 1;
   }
-  if (!isDigit(json[i])) {
+  if (!isDigit$1(json[i])) {
     return start;
   }
-  while (isDigit(json[i])) {
+  while (isDigit$1(json[i])) {
     i++;
   }
   return i;
@@ -5377,10 +5771,10 @@ const getFractionEnd = (json, start) => {
   }
   const decimalStart = start;
   let i = start + 1;
-  if (!isDigit(json[i])) {
+  if (!isDigit$1(json[i])) {
     return decimalStart;
   }
-  while (isDigit(json[i])) {
+  while (isDigit$1(json[i])) {
     i++;
   }
   return i;
@@ -5394,10 +5788,10 @@ const getExponentEnd = (json, start) => {
   if (json[i] === '+' || json[i] === '-') {
     i++;
   }
-  if (!isDigit(json[i])) {
+  if (!isDigit$1(json[i])) {
     return exponentStart;
   }
-  while (isDigit(json[i])) {
+  while (isDigit$1(json[i])) {
     i++;
   }
   return i;
@@ -5409,7 +5803,7 @@ const getWhitespaceEnd = (json, start) => {
   }
   return i;
 };
-const getStringEnd = (json, start) => {
+const getStringEnd$1 = (json, start) => {
   let i = start + 1;
   while (i < json.length) {
     const currentCharacter = json[i];
@@ -5425,7 +5819,7 @@ const getStringEnd = (json, start) => {
   return i;
 };
 const emitStringToken = (json, start, onToken) => {
-  const end = getStringEnd(json, start);
+  const end = getStringEnd$1(json, start);
   const lookAheadIndex = getWhitespaceEnd(json, end);
   const className = json[lookAheadIndex] === ':' ? TokenKey : TokenString;
   onToken(className, json.slice(start, end));
@@ -5452,7 +5846,7 @@ const getLiteralToken = (json, start) => {
   }
   return undefined;
 };
-const getNumberEnd = (json, start) => {
+const getNumberEnd$1 = (json, start) => {
   let i = getIntegerEnd(json, start);
   if (i === start) {
     return start;
@@ -5469,7 +5863,7 @@ const forEachTokenSegment = (json, onToken) => {
       i = emitStringToken(json, i, onToken);
       continue;
     }
-    const numberEnd = getNumberEnd(json, i);
+    const numberEnd = getNumberEnd$1(json, i);
     if (numberEnd > i) {
       onToken(TokenNumeric, json.slice(i, numberEnd));
       i = numberEnd;
@@ -5485,6 +5879,24 @@ const forEachTokenSegment = (json, onToken) => {
     i++;
   }
 };
+const getTokenSegments = json => {
+  const segments = [];
+  forEachTokenSegment(json, (className, value) => {
+    if (!value) {
+      return;
+    }
+    const lastSegment = segments.at(-1);
+    if (lastSegment && lastSegment.className === className) {
+      lastSegment.value += value;
+      return;
+    }
+    segments.push({
+      className,
+      value
+    });
+  });
+  return segments;
+};
 
 const getJsonLines = value => {
   const json = JSON.stringify(value, null, 2);
@@ -5553,8 +5965,14 @@ const getEventNode = value => {
   return getEditorDom(lineData);
 };
 
-const getPanelId = detailTab => {
-  return `ChatDebugViewDetailsPanel-${detailTab}`;
+const getPayloadContentNodes = (payloadEventNodes, selectedEvent) => {
+  if (payloadEventNodes.length > 0) {
+    return payloadEventNodes;
+  }
+  if (selectedEvent === null) {
+    return [];
+  }
+  return getEventNode(getPayloadEvent(selectedEvent));
 };
 
 const getImagePreviewLabelDom = preview => {
@@ -5595,9 +6013,411 @@ const getImagePreviewDom = preview => {
   }, ...getImagePreviewLabelDom(preview)];
 };
 
-const getTextNode = (value, showLineNumbers = true, cursor = null) => {
+const extensionToLanguage = {
+  css: 'css',
+  html: 'html',
+  js: 'javascript',
+  json: 'json',
+  py: 'python',
+  ts: 'typescript'
+};
+const getLanguageFromFileExtension = uri => {
+  try {
+    const url = new URL(uri);
+    const path = url.pathname.toLowerCase();
+    const lastDotIndex = path.lastIndexOf('.');
+    if (lastDotIndex === -1) {
+      return undefined;
+    }
+    const extension = path.slice(lastDotIndex + 1);
+    return extensionToLanguage[extension];
+  } catch {
+    return undefined;
+  }
+};
+
+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
+  }];
+};
+
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+
+const jsIdentifierStartRegex = /[A-Za-z_$]/;
+const jsIdentifierPartRegex = /[\w$]/;
+const pythonIdentifierStartRegex = /[A-Za-z_]/;
+const pythonIdentifierPartRegex = /\w/;
+const cssIdentifierRegex = /[A-Za-z-]/;
+const htmlTagNameRegex = /[A-Za-z0-9:-]/;
+const htmlAttributeStartRegex = /[A-Za-z:_-]/;
+const htmlAttributePartRegex = /[\w:-]/;
+const leadingWhitespaceRegex = /^\s*/;
+const trailingWhitespaceRegex = /\s*$/;
+const jsKeywords = new Set(['async', 'await', 'class', 'const', 'else', 'export', 'extends', 'for', 'from', 'function', 'if', 'import', 'let', 'new', 'return', 'switch', 'try', 'while']);
+const tsKeywords = new Set([...jsKeywords, 'interface', 'implements', 'number', 'readonly', 'string', 'type']);
+const pythonKeywords = new Set(['as', 'class', 'def', 'elif', 'else', 'except', 'False', 'for', 'from', 'if', 'import', 'None', 'return', 'True', 'try', 'while', 'with']);
+const isIdentifierStart = character => {
+  return !!character && jsIdentifierStartRegex.test(character);
+};
+const isIdentifierPart = character => {
+  return !!character && jsIdentifierPartRegex.test(character);
+};
+const isPythonIdentifierStart = character => {
+  return !!character && pythonIdentifierStartRegex.test(character);
+};
+const isPythonIdentifierPart = character => {
+  return !!character && pythonIdentifierPartRegex.test(character);
+};
+const isDigit = character => {
+  return !!character && character >= '0' && character <= '9';
+};
+const getStringEnd = (value, start, quote) => {
+  let i = start + 1;
+  while (i < value.length) {
+    if (value[i] === '\\') {
+      i += 2;
+      continue;
+    }
+    if (value[i] === quote) {
+      return i + 1;
+    }
+    i++;
+  }
+  return value.length;
+};
+const getBlockCommentEnd = (value, start, terminator) => {
+  const endIndex = value.indexOf(terminator, start);
+  if (endIndex === -1) {
+    return value.length;
+  }
+  return endIndex + terminator.length;
+};
+const getLineCommentEnd = (value, start) => {
+  const endIndex = value.indexOf('\n', start);
+  if (endIndex === -1) {
+    return value.length;
+  }
+  return endIndex;
+};
+const getNumberEnd = (value, start) => {
+  let i = start;
+  while (isDigit(value[i])) {
+    i++;
+  }
+  if (value[i] === '.') {
+    i++;
+    while (isDigit(value[i])) {
+      i++;
+    }
+  }
+  return i;
+};
+const appendLineComment = (value, state) => {
+  if (!value.startsWith('//', state.i) && !value.startsWith('#', state.i)) {
+    return false;
+  }
+  const end = getLineCommentEnd(value, state.i);
+  state.segments = pushToken(state.segments, TokenComment, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendBlockComment = (value, state) => {
+  if (!value.startsWith('/*', state.i)) {
+    return false;
+  }
+  const end = getBlockCommentEnd(value, state.i, '*/');
+  state.segments = pushToken(state.segments, TokenComment, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendStringToken = (value, state) => {
+  const quote = value[state.i];
+  if (quote !== '"' && quote !== "'" && quote !== '`') {
+    return false;
+  }
+  const end = getStringEnd(value, state.i, quote);
+  state.segments = pushToken(state.segments, TokenString, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendNumericToken = (value, state) => {
+  if (!isDigit(value[state.i])) {
+    return false;
+  }
+  const end = getNumberEnd(value, state.i);
+  state.segments = pushToken(state.segments, TokenNumeric, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendIdentifierToken = (value, state, keywords, isIdentifierStartCharacter, isIdentifierPartCharacter) => {
+  if (!isIdentifierStartCharacter(value[state.i])) {
+    return false;
+  }
+  let end = state.i + 1;
+  while (isIdentifierPartCharacter(value[end])) {
+    end++;
+  }
+  const identifier = value.slice(state.i, end);
+  const className = keywords.has(identifier) ? TokenKeyword : TokenText;
+  state.segments = pushToken(state.segments, className, identifier);
+  state.i = end;
+  return true;
+};
+const appendTextCharacter = (value, state) => {
+  state.segments = pushToken(state.segments, TokenText, value[state.i]);
+  state.i++;
+};
+const tokenizeCode = (value, keywords, isIdentifierStartCharacter, isIdentifierPartCharacter, supportsBlockComments) => {
+  const state = {
+    i: 0,
+    segments: []
+  };
+  while (state.i < value.length) {
+    if (appendLineComment(value, state)) {
+      continue;
+    }
+    if (supportsBlockComments && appendBlockComment(value, state)) {
+      continue;
+    }
+    if (appendStringToken(value, state)) {
+      continue;
+    }
+    if (appendNumericToken(value, state)) {
+      continue;
+    }
+    if (appendIdentifierToken(value, state, keywords, isIdentifierStartCharacter, isIdentifierPartCharacter)) {
+      continue;
+    }
+    appendTextCharacter(value, state);
+  }
+  return state.segments;
+};
+const pushTrimmedSelector = (segments, value) => {
+  const leadingWhitespace = value.match(leadingWhitespaceRegex)?.[0] ?? '';
+  const trailingWhitespace = value.match(trailingWhitespaceRegex)?.[0] ?? '';
+  const trimmed = value.slice(leadingWhitespace.length, value.length - trailingWhitespace.length);
+  let result = segments;
+  result = pushToken(result, TokenText, leadingWhitespace);
+  result = pushToken(result, TokenSelector, trimmed);
+  result = pushToken(result, TokenText, trailingWhitespace);
+  return result;
+};
+const getCssIdentifierEnd = (value, start) => {
+  let end = start + 1;
+  while (cssIdentifierRegex.test(value[end] ?? '')) {
+    end++;
+  }
+  return end;
+};
+const getCssIdentifierClassName = (value, end) => {
+  let lookAhead = end;
+  while (value[lookAhead] === ' ' || value[lookAhead] === '\t') {
+    lookAhead++;
+  }
+  return value[lookAhead] === ':' ? TokenPropertyName : TokenText;
+};
+const appendCssIdentifier = (value, state) => {
+  if (!cssIdentifierRegex.test(value[state.i] ?? '')) {
+    return false;
+  }
+  const end = getCssIdentifierEnd(value, state.i);
+  const identifier = value.slice(state.i, end);
+  state.segments = pushToken(state.segments, getCssIdentifierClassName(value, end), identifier);
+  state.i = end;
+  return true;
+};
+const appendCssOutsideDeclaration = (value, state) => {
+  const nextBrace = value.indexOf('{', state.i);
+  if (nextBrace === -1) {
+    state.segments = pushToken(state.segments, TokenText, value.slice(state.i));
+    state.i = value.length;
+    return true;
+  }
+  state.segments = pushTrimmedSelector(state.segments, value.slice(state.i, nextBrace));
+  state.segments = pushToken(state.segments, TokenText, '{');
+  state.i = nextBrace + 1;
+  return false;
+};
+const handleCssDeclarationToken = (value, state) => {
+  if (value[state.i] === '}') {
+    state.segments = pushToken(state.segments, TokenText, '}');
+    state.i++;
+    return false;
+  }
+  if (appendNumericToken(value, state)) {
+    return true;
+  }
+  if (appendCssIdentifier(value, state)) {
+    return true;
+  }
+  appendTextCharacter(value, state);
+  return true;
+};
+const tokenizeCss = value => {
+  const state = {
+    i: 0,
+    segments: []
+  };
+  let inDeclarationBlock = false;
+  while (state.i < value.length) {
+    if (appendBlockComment(value, state)) {
+      continue;
+    }
+    if (appendStringToken(value, state)) {
+      continue;
+    }
+    if (!inDeclarationBlock) {
+      if (appendCssOutsideDeclaration(value, state)) {
+        break;
+      }
+      inDeclarationBlock = true;
+      continue;
+    }
+    inDeclarationBlock = handleCssDeclarationToken(value, state);
+  }
+  return state.segments;
+};
+const getHtmlTagNameEnd = (value, start) => {
+  let i = start + 1;
+  while (htmlTagNameRegex.test(value[i] ?? '')) {
+    i++;
+  }
+  return i;
+};
+const getHtmlAttributeEnd = (value, start) => {
+  let end = start + 1;
+  while (htmlAttributePartRegex.test(value[end] ?? '')) {
+    end++;
+  }
+  return end;
+};
+const appendHtmlAttribute = (value, state) => {
+  if (!htmlAttributeStartRegex.test(value[state.i] ?? '')) {
+    return false;
+  }
+  const end = getHtmlAttributeEnd(value, state.i);
+  state.segments = pushToken(state.segments, TokenAttributeName, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const appendHtmlString = (value, state) => {
+  const quote = value[state.i];
+  if (quote !== '"' && quote !== "'") {
+    return false;
+  }
+  const end = getStringEnd(value, state.i, quote);
+  state.segments = pushToken(state.segments, TokenString, value.slice(state.i, end));
+  state.i = end;
+  return true;
+};
+const tokenizeHtmlTag = (value, start) => {
+  let segments = [];
+  if (value.startsWith('</', start)) {
+    const end = value.indexOf('>', start);
+    const tagEnd = end === -1 ? value.length : end + 1;
+    segments = pushToken(segments, TokenTag, value.slice(start, tagEnd));
+    return {
+      end: tagEnd,
+      segments
+    };
+  }
+  let i = getHtmlTagNameEnd(value, start);
+  segments = pushToken(segments, TokenTag, value.slice(start, i));
+  while (i < value.length) {
+    if (value[i] === '>') {
+      segments = pushToken(segments, TokenText, '>');
+      return {
+        end: i + 1,
+        segments
+      };
+    }
+    const state = {
+      i,
+      segments
+    };
+    if (appendHtmlString(value, state)) {
+      ({
+        i,
+        segments
+      } = state);
+      continue;
+    }
+    if (appendHtmlAttribute(value, state)) {
+      ({
+        i,
+        segments
+      } = state);
+      continue;
+    }
+    segments = pushToken(segments, TokenText, value[i]);
+    i++;
+  }
+  return {
+    end: value.length,
+    segments
+  };
+};
+const tokenizeHtml = value => {
+  let segments = [];
+  let i = 0;
+  while (i < value.length) {
+    if (value.startsWith('<!--', i)) {
+      const end = getBlockCommentEnd(value, i, '-->');
+      segments = pushToken(segments, TokenComment, value.slice(i, end));
+      i = end;
+      continue;
+    }
+    if (value[i] === '<') {
+      const {
+        end,
+        segments: tagSegments
+      } = tokenizeHtmlTag(value, i);
+      for (const segment of tagSegments) {
+        segments = pushToken(segments, segment.className, segment.value);
+      }
+      i = end;
+      continue;
+    }
+    const nextTag = value.indexOf('<', i);
+    const end = nextTag === -1 ? value.length : nextTag;
+    segments = pushToken(segments, TokenText, value.slice(i, end));
+    i = end;
+  }
+  return segments;
+};
+const getSyntaxHighlightTokens = (value, language) => {
+  switch (language) {
+    case 'css':
+      return tokenizeCss(value);
+    case 'html':
+      return tokenizeHtml(value);
+    case 'javascript':
+      return tokenizeCode(value, jsKeywords, isIdentifierStart, isIdentifierPart, true);
+    case 'json':
+      return getTokenSegments(value);
+    case 'python':
+      return tokenizeCode(value, pythonKeywords, isPythonIdentifierStart, isPythonIdentifierPart, false);
+    case 'typescript':
+      return tokenizeCode(value, tsKeywords, isIdentifierStart, isIdentifierPart, true);
+  }
+};
+
+const getTextLineData = value => {
   const lines = value.split('\n');
-  const lineData = lines.map(line => {
+  return lines.map(line => {
     return {
       childCount: 1,
       nodes: [{
@@ -5607,15 +6427,79 @@ const getTextNode = (value, showLineNumbers = true, cursor = null) => {
       }, text(line)]
     };
   });
+};
+const getTokenLineData = tokenSegments => {
+  const lineData = [];
+  let currentNodes = [];
+  let childCount = 0;
+  const pushLine = () => {
+    lineData.push({
+      childCount,
+      nodes: currentNodes
+    });
+    currentNodes = [];
+    childCount = 0;
+  };
+  const pushSegment = (className, segmentValue) => {
+    if (!segmentValue) {
+      return;
+    }
+    currentNodes.push({
+      childCount: 1,
+      className,
+      type: Span
+    }, text(segmentValue));
+    childCount++;
+  };
+  for (const segment of tokenSegments) {
+    let start = 0;
+    for (let i = 0; i < segment.value.length; i++) {
+      if (segment.value[i] !== '\n') {
+        continue;
+      }
+      pushSegment(segment.className, segment.value.slice(start, i));
+      pushLine();
+      start = i + 1;
+    }
+    pushSegment(segment.className, segment.value.slice(start));
+  }
+  if (lineData.length === 0 || currentNodes.length > 0) {
+    pushLine();
+  }
+  return lineData;
+};
+const getLineData = (value, tokenSegments) => {
+  return tokenSegments ? getTokenLineData(tokenSegments) : getTextLineData(value);
+};
+const getTextNode = (value, showLineNumbers = true, cursor = null, tokenSegments, virtualization) => {
+  const lineData = getLineData(value, tokenSegments);
+  if (virtualization) {
+    const slicedLineData = lineData.slice(virtualization.startLineY, virtualization.endLineY);
+    const visibleCursor = cursor && cursor.rowIndex >= virtualization.startLineY && cursor.rowIndex < virtualization.endLineY ? {
+      ...cursor,
+      rowIndex: cursor.rowIndex - virtualization.startLineY
+    } : null;
+    return getVirtualizedEditorDom(slicedLineData, showLineNumbers, visibleCursor, showLineNumbers ? HandlePreviewTextPointerDown : undefined, {
+      lineNumberStart: virtualization.startLineY,
+      onScrollBarPointerDown: HandlePreviewTextScrollBarPointerDown,
+      onWheel: HandlePreviewTextWheel,
+      showScrollBar: virtualization.showScrollBar
+    });
+  }
   return getEditorDom(lineData, showLineNumbers, cursor, showLineNumbers ? HandlePreviewTextPointerDown : undefined);
 };
 
-const getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor) => {
+const getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor, virtualization) => {
   if (typeof previewEvent === 'string') {
     const isInvalidImageMessage = previewEvent === ImageCouldNotBeLoaded;
     const isChatMessageUpdatedPreview = !!selectedEvent && isChatMessageUpdatedEvent(selectedEvent);
     const showLineNumbers = !isInvalidImageMessage && !isChatMessageUpdatedPreview;
-    return getTextNode(previewEvent, showLineNumbers, showLineNumbers ? previewTextCursor ?? null : null);
+    return getTextNode(previewEvent, showLineNumbers, showLineNumbers ? previewTextCursor ?? null : null, undefined, virtualization);
+  }
+  if (isWriteFilePreview(previewEvent)) {
+    const language = getLanguageFromFileExtension(previewEvent.uri);
+    const tokenSegments = language ? getSyntaxHighlightTokens(previewEvent.content, language) : undefined;
+    return getTextNode(previewEvent.content, true, previewTextCursor ?? null, tokenSegments, virtualization);
   }
   if (previewEvent === undefined) {
     return [];
@@ -5626,33 +6510,27 @@ const getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor) =>
   return getEventNode(previewEvent);
 };
 
-const getDetailTabDom = detailTab => {
-  const {
-    isSelected
-  } = detailTab;
-  return [{
-    'aria-controls': getPanelId(detailTab.name),
-    ariaSelected: isSelected,
-    childCount: 1,
-    className: mergeClassNames(PanelTab, isSelected ? PanelTabSelected : ''),
-    name: detailTab.name,
-    onChange: SelectDetailTab,
-    onClick: SelectDetailTab,
-    onFocus: HandleDetailTabsFocus,
-    role: Tab,
-    tabIndex: isSelected ? 0 : -1,
-    type: Button$1
-  }, text(detailTab.label)];
+const getPreviewContentNodes = (previewEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, virtualization) => {
+  if (previewEventNodes.length > 0) {
+    return previewEventNodes;
+  }
+  if (selectedEvent === null) {
+    return [];
+  }
+  return getPreviewEventNodes(getPreviewEvent(selectedEvent), selectedEvent, previewTextCursorRowIndex === null || previewTextCursorColumnIndex === null ? null : {
+    columnIndex: previewTextCursorColumnIndex,
+    rowIndex: previewTextCursorRowIndex
+  }, virtualization);
 };
 
-const getTabNodes = detailTabs => {
-  return [{
-    'aria-label': detailSections(),
-    childCount: detailTabs.length,
-    className: ChatDebugViewDetailsTabs,
-    role: 'tablist',
-    type: Div
-  }, ...detailTabs.flatMap(getDetailTabDom)];
+const getResponseContentNodes = (responseEventNodes, selectedEvent) => {
+  if (responseEventNodes.length > 0) {
+    return responseEventNodes;
+  }
+  if (selectedEvent === null) {
+    return [];
+  }
+  return getEventNode(selectedEvent);
 };
 
 const timestampFormatter = new Intl.DateTimeFormat('en-US', {
@@ -5768,96 +6646,63 @@ const getTimingDetailsDom = event => {
   }, ...getTimingPreviewDom(event), ...getTimingRowDom(started(), getStartText(event)), ...getTimingRowDom(ended(), getEndText(event)), ...getTimingRowDom(duration(), getDurationText(event))];
 };
 
-const getNextSiblingIndex$2 = (nodes, index) => {
-  let nextSiblingIndex = index + 1;
-  const childCount = nodes[index]?.childCount || 0;
-  for (let i = 0; i < childCount; i++) {
-    nextSiblingIndex = getNextSiblingIndex$2(nodes, nextSiblingIndex);
-  }
-  return nextSiblingIndex;
-};
-const getDirectChildCount$1 = nodes => {
-  let count = 0;
-  let index = 0;
-  while (index < nodes.length) {
-    count++;
-    index = getNextSiblingIndex$2(nodes, index);
-  }
-  return count;
-};
-const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
-  if (selectedEvent === null) {
-    return detailTabs;
-  }
-  return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
-};
 const getTimingContentNodes = (responseEventNodes, selectedEvent) => {
   if (selectedEvent === null) {
     return responseEventNodes;
   }
   return getTimingDetailsDom(selectedEvent);
 };
-const getPreviewContentNodes = (previewEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex) => {
-  if (previewEventNodes.length > 0) {
-    return previewEventNodes;
-  }
-  if (selectedEvent === null) {
-    return [];
-  }
-  return getPreviewEventNodes(getPreviewEvent(selectedEvent), selectedEvent, previewTextCursorRowIndex === null || previewTextCursorColumnIndex === null ? null : {
-    columnIndex: previewTextCursorColumnIndex,
-    rowIndex: previewTextCursorRowIndex
-  });
-};
-const getPayloadContentNodes = (payloadEventNodes, selectedEvent) => {
-  if (payloadEventNodes.length > 0) {
-    return payloadEventNodes;
-  }
-  if (selectedEvent === null) {
-    return [];
-  }
-  return getEventNode(getPayloadEvent(selectedEvent));
-};
-const getResponseContentNodes = (responseEventNodes, selectedEvent) => {
-  if (responseEventNodes.length > 0) {
-    return responseEventNodes;
-  }
-  if (selectedEvent === null) {
-    return [];
-  }
-  return getEventNode(selectedEvent);
-};
-const getSelectedContentNodes = (safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex) => {
+
+const getSelectedContentNodes = (safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization) => {
   if (safeSelectedDetailTab === Timing) {
     return getTimingContentNodes(responseEventNodes, selectedEvent);
   }
   if (safeSelectedDetailTab === Preview) {
-    return getPreviewContentNodes(previewEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex);
+    return getPreviewContentNodes(previewEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization);
   }
   if (safeSelectedDetailTab === Payload) {
     return getPayloadContentNodes(payloadEventNodes, selectedEvent);
   }
   return getResponseContentNodes(responseEventNodes, selectedEvent);
 };
-const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs(), previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null) => {
+
+const getDetailTabDom = detailTab => {
+  const {
+    isSelected
+  } = detailTab;
+  return [{
+    'aria-controls': getPanelId(detailTab.name),
+    ariaSelected: isSelected,
+    childCount: 1,
+    className: mergeClassNames(PanelTab, isSelected ? PanelTabSelected : ''),
+    name: detailTab.name,
+    onChange: SelectDetailTab,
+    onClick: SelectDetailTab,
+    onFocus: HandleDetailTabsFocus,
+    role: Tab,
+    tabIndex: isSelected ? 0 : -1,
+    type: Button$1
+  }, text(detailTab.label)];
+};
+
+const getTabNodes = detailTabs => {
+  return [{
+    'aria-label': detailSections(),
+    childCount: detailTabs.length,
+    className: ChatDebugViewDetailsTabs,
+    role: 'tablist',
+    type: Div
+  }, ...detailTabs.flatMap(getDetailTabDom)];
+};
+
+const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes, responseEventNodes = payloadEventNodes, selectedEvent = null, detailTabs = createDetailTabs(), previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, previewVirtualization) => {
   if (previewEventNodes.length === 0 && payloadEventNodes.length === 0 && responseEventNodes.length === 0) {
     return [];
   }
   const normalizedDetailTabs = getNormalizedDetailTabs(selectedEvent, detailTabs);
   const safeSelectedDetailTab = getSelectedDetailTab(normalizedDetailTabs);
   const selectedDetailTab = normalizedDetailTabs.find(detailTab => detailTab.name === safeSelectedDetailTab) ?? normalizedDetailTabs[0];
-  const getDetailContentDom = () => {
-    const contentNodes = getSelectedContentNodes(safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex);
-    return [{
-      'aria-label': selectedDetailTab.label,
-      childCount: getDirectChildCount$1(contentNodes),
-      className: ChatDebugViewDetailsBottom,
-      id: getPanelId(safeSelectedDetailTab),
-      onContextMenu: HandleDetailsContextMenu,
-      role: 'tabpanel',
-      type: Div
-    }, ...contentNodes];
-  };
+  const contentNodes = getSelectedContentNodes(safeSelectedDetailTab, previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualization);
   return [{
     childCount: 2,
     className: ChatDebugViewDetails,
@@ -5867,7 +6712,27 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
     className: ChatDebugViewDetailsTop,
     onContextMenu: HandleDetailsTopContextMenu,
     type: Div
-  }, ...getDetailsCloseButtonDom(), ...getTabNodes(normalizedDetailTabs), ...getDetailContentDom()];
+  }, ...getDetailsCloseButtonDom(), ...getTabNodes(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
+};
+
+const getMethods = new Set(['list_dir', 'list_files', 'read_file']);
+const postMethods = new Set(['create_directory', 'create_file', 'mkdir', 'write_file']);
+const deleteMethods = new Set(['delete_directory', 'delete_file', 'delete_folder', 'remove_directory', 'remove_file', 'remove_folder']);
+const getEventTableMethodLabel = event => {
+  const toolName = getToolName(event);
+  if (!toolName) {
+    return '';
+  }
+  if (getMethods.has(toolName)) {
+    return 'GET';
+  }
+  if (postMethods.has(toolName)) {
+    return 'POST';
+  }
+  if (deleteMethods.has(toolName)) {
+    return 'DELETE';
+  }
+  return '';
 };
 
 const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
@@ -5880,6 +6745,12 @@ const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
           className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
           type: Td
         }, text(getEventTableDurationText(event))];
+      case Method:
+        return [{
+          childCount: 1,
+          className: TableCell,
+          type: Td
+        }, text(getEventTableMethodLabel(event))];
       case Status$1:
         return [{
           childCount: 1,
@@ -6050,7 +6921,7 @@ const getTableBodyDom = (rowNodes, eventCount) => {
   }, ...rowNodes];
 };
 
-const tableColClassNames = ['TableColZero', 'TableColOne', 'TableColTwo'];
+const tableColClassNames = ['TableColZero', 'TableColOne', 'TableColTwo', 'TableColThree'];
 const getTableColumnGroupDom = visibleTableColumns => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
   return [{
@@ -6073,6 +6944,7 @@ const getHeaderCellNode = (column, tableColumns) => {
     type: Th
   }, text(getTableColumnLabel(tableColumns, column))];
 };
+
 const getHeaderCellNodes = (visibleTableColumns, tableColumns = createTableColumns()) => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns, tableColumns);
   return orderedVisibleTableColumns.flatMap(column => getHeaderCellNode(column, tableColumns));
@@ -6101,8 +6973,8 @@ const getTableDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleT
   }, ...getTableColumnGroupDom(visibleTableColumns), ...getTableHeaderDom(visibleTableColumns, tableColumns), ...getTableBodyDom(rowNodes, eventCount)];
 };
 
-const resizerNames = ['ResizerOne', 'ResizerTwo'];
-const resizerClassNames = [ResizerOne, ResizerTwo];
+const resizerNames = ['ResizerOne', 'ResizerTwo', 'ResizerThree'];
+const resizerClassNames = [ResizerOne, ResizerTwo, ResizerThree];
 const getTableResizersDom = visibleTableColumns => {
   const visibleColumnCount = getOrderedVisibleTableColumns(visibleTableColumns).length;
   const resizerCount = Math.max(0, visibleColumnCount - 1);
@@ -6127,6 +6999,7 @@ const getTableResizersDom = visibleTableColumns => {
   return [{
     childCount: resizerCount,
     className: Resizers,
+    role: None,
     type: Div
   }, ...resizerNodes];
 };
@@ -6147,7 +7020,7 @@ const getTableScrollBarDom = visible => {
   }];
 };
 
-const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '', showScrollBar = false) => {
+const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = 'none', showScrollBar = false) => {
   const tableWrapperClassName = mergeClassNames(TableWrapper, focus === FocusChatDebugTable ? FocusOutline : '', className);
   const tableWrapperNode = {
     childCount: showScrollBar ? 3 : 2,
@@ -6161,7 +7034,7 @@ const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultV
   return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus), ...getTableResizersDom(visibleTableColumns), ...getTableScrollBarDom(showScrollBar)];
 };
 
-const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '', showScrollBar = false) => {
+const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = 'none', showScrollBar = false) => {
   const tableSummaryNodes = getTableSummaryDom(summary);
   return [{
     childCount: tableSummaryNodes.length === 0 ? 1 : 2,
@@ -6338,25 +7211,31 @@ const getTimelineDom = (timelineInfo, hoverPercent = null) => {
   }, ...selectionNodes];
 };
 
-const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', detailTabs = createDetailTabs(), visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, minLineY = 0, maxLineY = events.length) => {
+const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', detailTabs = createDetailTabs(), visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, previewTextDeltaY = 0, previewTextViewportHeight = 0, minLineY = 0, maxLineY = events.length) => {
   const visibleEvents = events.slice(minLineY, maxLineY);
   const rowNodes = getDevtoolsRows(visibleEvents, selectedEventIndex, visibleTableColumns, minLineY);
   const effectiveRange = getEffectiveTimelineRange(timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
   const resolvedTimelineInfo = timelineInfo || getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
   const timelineNodes = getTimelineDom(resolvedTimelineInfo, timelineHoverPercent);
   const previewEvent = selectedEvent ? getPreviewEvent(selectedEvent) : undefined;
+  const previewVirtualization = getPreviewVirtualizationState(selectedEvent, previewTextViewportHeight, previewTextDeltaY);
+  const previewVirtualizationOptions = previewTextViewportHeight <= 0 || previewVirtualization.totalLineCount === 0 ? undefined : {
+    endLineY: previewVirtualization.endLineY,
+    showScrollBar: previewVirtualization.showScrollBar,
+    startLineY: previewVirtualization.startLineY
+  };
   const previewEventNodes = getPreviewEventNodes(previewEvent, selectedEvent, previewTextCursorRowIndex === null || previewTextCursorColumnIndex === null ? null : {
     columnIndex: previewTextCursorColumnIndex,
     rowIndex: previewTextCursorRowIndex
-  });
+  }, previewVirtualizationOptions);
   const payloadEventNodes = selectedEvent ? getEventNode(getPayloadEvent(selectedEvent)) : [];
   const responseEventNodes = selectedEvent ? getEventNode(getResponseEvent(selectedEvent)) : [];
-  const hasSelectedEvent = responseEventNodes.length > 0;
+  const hasSelectedEvent = !!selectedEvent;
   const eventsClassName = getEventsClassName(hasSelectedEvent);
   const summary = getTableSummary(events);
   const showScrollBar = visibleEvents.length < events.length;
   const tableNodes = events.length === 0 ? getEmptyStateDom(emptyMessage) : getTableWrapperWrapperDom(rowNodes, visibleEvents.length, visibleTableColumns, tableColumns, summary, focus, '', '', showScrollBar);
-  const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs, previewTextCursorRowIndex, previewTextCursorColumnIndex);
+  const detailsNodes = getDetailsDom(previewEventNodes, payloadEventNodes, responseEventNodes, selectedEvent, detailTabs, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewVirtualizationOptions);
   const sashNodes = getSashNodesDom(hasSelectedEvent);
   const splitChildCount = hasSelectedEvent ? 3 : 1;
   const rootChildCount = 3;
@@ -6410,7 +7289,7 @@ const getEventCategoryFilterDescription = eventCategoryFilters => {
   }
   return eventCategoryFilters.map(eventCategoryFilter => getEventCategoryFilterLabel(eventCategoryFilter).toLowerCase()).join(', ');
 };
-const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, categoryFilters, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineFilterDescription, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, minLineY = 0, maxLineY = events.length) => {
+const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, categoryFilters, _showEventStreamFinishedEvents, _showInputEvents, _showResponsePartEvents, useDevtoolsLayout, selectedEvent, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineFilterDescription, timelineEvents, events, timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', visibleTableColumns = defaultVisibleTableColumns, detailTabs = createDetailTabs(), tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, minLineY = 0, maxLineY = events.length, previewTextDeltaY = 0, previewTextViewportHeight = 0) => {
   if (errorMessage) {
     return getDebugErrorDom(errorMessage);
   }
@@ -6434,13 +7313,14 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   const emptyMessage = getEmptyMessage(events.length, hasFilterValue, useNoToolCallEventsMessage, noFilteredEventsMessage);
   const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
   if (useDevtoolsLayout) {
-    const devtoolsDom = getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, detailTabs, visibleTableColumns, tableColumns, timelineInfo, timelineHoverPercent, focus, previewTextCursorRowIndex, previewTextCursorColumnIndex, minLineY, maxLineY);
+    const devtoolsDom = getDevtoolsDom(events, selectedEvent, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds, detailTabs, visibleTableColumns, tableColumns, timelineInfo, timelineHoverPercent, focus, previewTextCursorRowIndex, previewTextCursorColumnIndex, previewTextDeltaY, previewTextViewportHeight, minLineY, maxLineY);
     const devtoolsContentNodes = devtoolsDom.slice(1);
     const topLevelNodes = [...getDebugViewTopDom(filterValue, useDevtoolsLayout, categoryFilters), ...devtoolsContentNodes];
     const rootChildCount = getTopLevelChildCount(topLevelNodes);
     return [{
       childCount: rootChildCount,
       className: mergeClassNames(ChatDebugView, ChatDebugViewDevtools),
+      onContextMenu: HandleRootContextMenu,
       type: Div
     }, ...topLevelNodes];
   }
@@ -6450,6 +7330,7 @@ const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilters, ca
   return [{
     childCount: rootChildCount,
     className: mergeClassNames(ChatDebugView, useDevtoolsLayout ? ChatDebugViewDevtools : ''),
+    onContextMenu: HandleRootContextMenu,
     type: Div
   }, ...debugViewTopDom, ...contentNodes];
 };
@@ -6467,7 +7348,8 @@ const renderItems = (oldState, newState) => {
     return [SetDom2, newState.uid, []];
   }
   const filteredEvents = getCurrentEvents$2(newState);
-  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, getSelectedEventCategoryFilters(newState.categoryFilters), newState.categoryFilters, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, newState.timelineFilterDescription, withSessionEventIds(newState.timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, getVisibleTableColumns(newState.tableColumns), newState.detailTabs, newState.tableColumns, newState.timelineInfo, newState.timelineHoverPercent, newState.focus, newState.previewTextCursorRowIndex, newState.previewTextCursorColumnIndex, newState.tableMinLineY, newState.tableMaxLineY);
+  const previewTextViewportHeight = getPreviewTextViewportHeight(newState);
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, getSelectedEventCategoryFilters(newState.categoryFilters), newState.categoryFilters, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, newState.timelineFilterDescription, withSessionEventIds(newState.timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, getVisibleTableColumns(newState.tableColumns), newState.detailTabs, newState.tableColumns, newState.timelineInfo, newState.timelineHoverPercent, newState.focus, newState.previewTextCursorRowIndex, newState.previewTextCursorColumnIndex, newState.tableMinLineY, newState.tableMaxLineY, newState.previewTextDeltaY, previewTextViewportHeight);
   return [SetDom2, newState.uid, dom];
 };
 
@@ -6539,6 +7421,10 @@ const render2 = (uid, diffResult) => {
 
 const renderEventListeners = () => {
   return [{
+    name: HandleRootContextMenu,
+    params: ['handleRootContextMenu'],
+    preventDefault: true
+  }, {
     name: HandleHeaderContextMenu,
     params: ['handleHeaderContextMenu', ClientX, ClientY],
     preventDefault: true
@@ -6626,6 +7512,21 @@ const renderEventListeners = () => {
     params: ['handleTableWheel', 'event.deltaY'],
     passive: true,
     preventDefault: true
+  }, {
+    name: HandlePreviewTextWheel,
+    params: ['handlePreviewTextWheel', 'event.deltaY'],
+    passive: true,
+    preventDefault: true
+  }, {
+    name: HandlePreviewTextScrollBarPointerDown,
+    params: ['handlePreviewTextScrollBarPointerDown', ClientY],
+    trackPointerEvents: [HandlePreviewTextScrollBarPointerMove, HandlePreviewTextScrollBarPointerUp]
+  }, {
+    name: HandlePreviewTextScrollBarPointerMove,
+    params: ['handlePreviewTextScrollBarPointerMove', ClientY]
+  }, {
+    name: HandlePreviewTextScrollBarPointerUp,
+    params: ['handlePreviewTextScrollBarPointerUp']
   }, {
     name: HandleTimelinePointerDown,
     params: ['handleTimelinePointerDown', TargetName, ClientX],
@@ -6653,11 +7554,13 @@ const rerender = state => {
 };
 
 const resetTableColumns = state => {
-  if (getVisibleTableColumns(state.tableColumns).join(',') === defaultVisibleTableColumns.join(',') && isSameTableColumnWidths(state.tableColumnWidths, defaultTableColumnWidths)) {
+  if (getVisibleTableColumns(state.tableColumns).join(',') === defaultVisibleTableColumns.join(',') && isSameTableColumnWidths(state.tableColumnWidths, defaultTableColumnWidths) && state.sortColumn === '' && state.sortDescending === false) {
     return state;
   }
   return {
     ...state,
+    sortColumn: '',
+    sortDescending: false,
     tableColumns: createTableColumns(),
     tableColumnWidths: defaultTableColumnWidths
   };
@@ -6727,6 +7630,9 @@ const setEvents = (state, events) => {
     initial: false,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null
@@ -6754,6 +7660,9 @@ const setSessionId = async (state, sessionId) => {
       initial: false,
       previewTextCursorColumnIndex: null,
       previewTextCursorRowIndex: null,
+      previewTextDeltaY: 0,
+      previewTextScrollBarHandleOffset: 0,
+      previewTextScrollBarPointerActive: false,
       selectedEvent: null,
       selectedEventId: null,
       selectedEventIndex: null,
@@ -6770,6 +7679,9 @@ const setSessionId = async (state, sessionId) => {
     initial: false,
     previewTextCursorColumnIndex: null,
     previewTextCursorRowIndex: null,
+    previewTextDeltaY: 0,
+    previewTextScrollBarHandleOffset: 0,
+    previewTextScrollBarPointerActive: false,
     selectedEvent: null,
     selectedEventId: null,
     selectedEventIndex: null,
@@ -6820,6 +7732,11 @@ const commandMap = {
   'ChatDebug.handleHeaderContextMenu': wrapCommand(handleHeaderContextMenu),
   'ChatDebug.handleInput': wrapCommand(handleInput),
   'ChatDebug.handlePreviewTextPointerDown': wrapCommand(handlePreviewTextPointerDown),
+  'ChatDebug.handlePreviewTextScrollBarPointerDown': wrapCommand(handlePreviewTextScrollBarPointerDown),
+  'ChatDebug.handlePreviewTextScrollBarPointerMove': wrapCommand(handlePreviewTextScrollBarPointerMove),
+  'ChatDebug.handlePreviewTextScrollBarPointerUp': wrapCommand(handlePreviewTextScrollBarPointerUp),
+  'ChatDebug.handlePreviewTextWheel': wrapCommand(handlePreviewTextWheel),
+  'ChatDebug.handleRootContextMenu': wrapCommand(handleRootContextMenu),
   'ChatDebug.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'ChatDebug.handleSashPointerMove': wrapCommand(handleSashPointerMove),
   'ChatDebug.handleSashPointerUp': wrapCommand(handleSashPointerUp),