@lvce-editor/chat-debug-view 3.4.0 → 4.0.0

package/dist/chatDebugViewWorkerMain.js

@@ -964,39 +964,82 @@ const {
   wrapGetter
 } = create$1();
 
+const All = 'all';
+const Tools = 'tools';
+const Network = 'network';
+const Ui = 'ui';
+const Stream = 'stream';
+const options = [{
+  label: 'All',
+  value: All
+}, {
+  label: 'Tools',
+  value: Tools
+}, {
+  label: 'Network',
+  value: Network
+}, {
+  label: 'UI',
+  value: Ui
+}, {
+  label: 'Stream',
+  value: Stream
+}];
+const getEventCategoryFilterLabel = eventCategoryFilter => {
+  switch (eventCategoryFilter) {
+    case Network:
+      return 'Network';
+    case Stream:
+      return 'Stream';
+    case Tools:
+      return 'Tools';
+    case Ui:
+      return 'UI';
+    default:
+      return 'All';
+  }
+};
+
 const createDefaultState = () => {
   return {
     assetDir: '',
     databaseName: 'lvce-chat-view-sessions',
     dataBaseVersion: 2,
     errorMessage: '',
+    eventCategoryFilter: All,
     events: [],
     eventStoreName: 'chat-view-events',
     filterValue: '',
     height: 0,
-    initial: true,
+    initial: false,
     platform: 0,
+    selectedEventIndex: null,
     sessionId: '',
     sessionIdIndexName: 'sessionId',
     showEventStreamFinishedEvents: false,
     showInputEvents: false,
     showResponsePartEvents: false,
+    timelineEndSeconds: '',
+    timelineStartSeconds: '',
     uid: 0,
     uri: '',
+    useDevtoolsLayout: false,
     width: 0,
     x: 0,
     y: 0
   };
 };
 
-const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '', databaseName = 'lvce-chat-view-sessions', dataBaseVersion = 2, eventStoreName = 'chat-view-events', sessionIdIndexName = 'sessionId') => {
+const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '', databaseName = 'lvce-chat-view-sessions', dataBaseVersion = 2, eventStoreName = 'chat-view-events', sessionIdIndexName = 'sessionId', savedState = {}) => {
   const state = {
     ...createDefaultState(),
+    ...savedState,
     assetDir,
     databaseName,
     dataBaseVersion,
     eventStoreName,
     height,
+    initial: true,
     platform,
     sessionId,
     sessionIdIndexName,
@@ -1011,13 +1054,11 @@ const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '
 
 const RenderItems = 1;
 const RenderCss = 2;
+const RenderIncremental = 3;
 
 const diff = (oldState, newState) => {
-  if (oldState.initial !== newState.initial) {
-    return [RenderCss, RenderItems];
-  }
-  if (oldState.errorMessage !== newState.errorMessage || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.uid !== newState.uid) {
-    return [RenderItems];
+  if (oldState.errorMessage !== newState.errorMessage || oldState.eventCategoryFilter !== newState.eventCategoryFilter || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.uid !== newState.uid) {
+    return [RenderIncremental, RenderCss];
   }
   return [];
 };
@@ -1034,35 +1075,388 @@ const getBoolean = value => {
   return value === true || value === 'true' || value === 'on' || value === '1';
 };
 
+const RE_SPACE = /\s+/;
+const tokenToEventCategoryFilter = new Map([['@tools', Tools], ['@network', Network], ['@ui', Ui], ['@stream', Stream]]);
+const parseFilterValue = filterValue => {
+  const normalizedFilter = filterValue.trim().toLowerCase();
+  if (!normalizedFilter) {
+    return {
+      eventCategoryFilter: All,
+      filterText: ''
+    };
+  }
+  const parts = normalizedFilter.split(RE_SPACE);
+  const eventCategoryFilter = parts.map(part => tokenToEventCategoryFilter.get(part)).find(Boolean) || All;
+  const filterText = parts.filter(part => !tokenToEventCategoryFilter.has(part)).join(' ');
+  return {
+    eventCategoryFilter,
+    filterText
+  };
+};
+
+const toolEventTypePrefix = 'tool-execution-';
+const isToolEvent = event => {
+  return event.type.startsWith(toolEventTypePrefix);
+};
+const isNetworkEvent = event => {
+  const normalizedType = event.type.toLowerCase();
+  return normalizedType === 'request' || normalizedType === 'response' || normalizedType === 'handle-response' || normalizedType.includes('fetch') || normalizedType.includes('xhr');
+};
+const isUiEvent = event => {
+  return event.type.startsWith('handle-') && event.type !== 'handle-response';
+};
+const isStreamEvent = event => {
+  return event.type === 'sse-response-part' || event.type === 'event-stream-finished';
+};
+const matchesEventCategoryFilter = (event, eventCategoryFilter) => {
+  switch (eventCategoryFilter) {
+    case Network:
+      return isNetworkEvent(event);
+    case Stream:
+      return isStreamEvent(event);
+    case Tools:
+      return isToolEvent(event);
+    case Ui:
+      return isUiEvent(event);
+    default:
+      return true;
+  }
+};
+const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
+  return events.filter(event => {
+    if (!showInputEvents && (event.type === 'handle-input' || event.type === 'handle-submit')) {
+      return false;
+    }
+    if (!showResponsePartEvents && event.type === 'sse-response-part') {
+      return false;
+    }
+    if (!showEventStreamFinishedEvents && event.type === 'event-stream-finished') {
+      return false;
+    }
+    // hide session creation events by default — not useful in the debug view
+    if (event.type === 'chat-session-created') {
+      return false;
+    }
+    return true;
+  });
+};
+const getFilteredEvents = (events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
+  const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+  const parsedFilter = parseFilterValue(filterValue);
+  const activeEventCategoryFilter = parsedFilter.eventCategoryFilter === All ? eventCategoryFilter : parsedFilter.eventCategoryFilter;
+  const filteredByCategory = visibleEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilter));
+  const {
+    filterText
+  } = parsedFilter;
+  if (!filterText) {
+    return filteredByCategory;
+  }
+  return filteredByCategory.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
+};
+
+const toTimeNumber = value => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const timestamp = Date.parse(value);
+    if (!Number.isNaN(timestamp)) {
+      return timestamp;
+    }
+  }
+  return undefined;
+};
+
+const getEventTime = event => {
+  return toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+};
+
+const maxBarUnits = 8;
+const parseTimelineSeconds = value => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  const parsed = Number.parseFloat(trimmed);
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    return undefined;
+  }
+  return parsed;
+};
+const roundSeconds = value => {
+  return Number(value.toFixed(3));
+};
+const getEventsWithTime = events => {
+  return events.flatMap(event => {
+    const time = getEventTime(event);
+    if (time === undefined) {
+      return [];
+    }
+    return [{
+      event,
+      time
+    }];
+  });
+};
+const getNormalizedRange = (durationSeconds, startValue, endValue) => {
+  const parsedStart = parseTimelineSeconds(startValue);
+  const parsedEnd = parseTimelineSeconds(endValue);
+  if (parsedStart === undefined && parsedEnd === undefined) {
+    return {
+      endSeconds: null,
+      hasSelection: false,
+      startSeconds: null
+    };
+  }
+  const rawStart = parsedStart ?? 0;
+  const rawEnd = parsedEnd ?? durationSeconds;
+  const normalizedStart = Math.max(0, Math.min(durationSeconds, Math.min(rawStart, rawEnd)));
+  const normalizedEnd = Math.max(0, Math.min(durationSeconds, Math.max(rawStart, rawEnd)));
+  return {
+    endSeconds: roundSeconds(normalizedEnd),
+    hasSelection: true,
+    startSeconds: roundSeconds(normalizedStart)
+  };
+};
+const filterEventsByTimelineRange = (events, startValue, endValue) => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return events;
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  const durationSeconds = roundSeconds(Math.max(0, lastTime - baseTime) / 1000);
+  const range = getNormalizedRange(durationSeconds, startValue, endValue);
+  if (!range.hasSelection || range.startSeconds === null || range.endSeconds === null) {
+    return events;
+  }
+  const startTime = baseTime + range.startSeconds * 1000;
+  const endTime = baseTime + range.endSeconds * 1000;
+  return eventsWithTime.filter(item => item.time >= startTime && item.time <= endTime).map(item => item.event);
+};
+const getTimelineInfo = (events, startValue, endValue) => {
+  const eventsWithTime = getEventsWithTime(events);
+  if (eventsWithTime.length === 0) {
+    return {
+      buckets: [],
+      durationSeconds: 0,
+      endSeconds: null,
+      hasSelection: false,
+      startSeconds: null
+    };
+  }
+  const baseTime = eventsWithTime[0].time;
+  const lastTime = eventsWithTime.at(-1)?.time ?? baseTime;
+  const durationMs = Math.max(0, lastTime - baseTime);
+  const durationSeconds = roundSeconds(durationMs / 1000);
+  const range = getNormalizedRange(durationSeconds, startValue, endValue);
+  const bucketCount = durationSeconds === 0 ? 1 : Math.max(12, Math.min(48, Math.ceil(durationSeconds)));
+  const bucketDurationMs = durationMs === 0 ? 1000 : durationMs / bucketCount;
+  const counts = Array.from({
+    length: bucketCount
+  }).fill(0);
+  for (const item of eventsWithTime) {
+    const offsetMs = item.time - baseTime;
+    const index = durationMs === 0 ? 0 : Math.min(bucketCount - 1, Math.floor(offsetMs / durationMs * bucketCount));
+    counts[index] += 1;
+  }
+  const maxCount = Math.max(...counts);
+  const buckets = counts.map((count, index) => {
+    const bucketStartMs = index * bucketDurationMs;
+    const bucketEndMs = index === bucketCount - 1 ? durationMs : (index + 1) * bucketDurationMs;
+    const hasSelection = range.hasSelection && range.startSeconds !== null && range.endSeconds !== null;
+    const selectionStartMs = hasSelection ? range.startSeconds * 1000 : 0;
+    const selectionEndMs = hasSelection ? range.endSeconds * 1000 : 0;
+    return {
+      count,
+      endSeconds: roundSeconds(bucketEndMs / 1000),
+      isSelected: hasSelection && bucketEndMs >= selectionStartMs && bucketStartMs <= selectionEndMs,
+      startSeconds: roundSeconds(bucketStartMs / 1000),
+      unitCount: count === 0 ? 0 : Math.max(1, Math.round(count / maxCount * maxBarUnits))
+    };
+  });
+  return {
+    buckets,
+    durationSeconds,
+    endSeconds: range.endSeconds,
+    hasSelection: range.hasSelection,
+    startSeconds: range.startSeconds
+  };
+};
+
 const Filter = 'filter';
+const EventCategoryFilter = 'eventCategoryFilter';
 const ShowEventStreamFinishedEvents = 'showEventStreamFinishedEvents';
 const ShowInputEvents = 'showInputEvents';
 const ShowResponsePartEvents = 'showResponsePartEvents';
-
+const UseDevtoolsLayout = 'useDevtoolsLayout';
+const SelectedEventIndex = 'selectedEventIndex';
+const CloseDetails = 'closeDetails';
+const TimelineStartSeconds = 'timelineStartSeconds';
+const TimelineEndSeconds = 'timelineEndSeconds';
+const TimelineRangePreset = 'timelineRangePreset';
+
+const getCurrentEvents = state => {
+  const filteredEvents = getFilteredEvents(state.events, state.filterValue, state.eventCategoryFilter, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
+  return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
+};
+const parseTimelineRangePreset = value => {
+  if (!value) {
+    return {
+      timelineEndSeconds: '',
+      timelineStartSeconds: ''
+    };
+  }
+  const [timelineStartSeconds = '', timelineEndSeconds = ''] = value.split(':', 2);
+  return {
+    timelineEndSeconds,
+    timelineStartSeconds
+  };
+};
+const getSelectedEventIndex = state => {
+  const {
+    selectedEventIndex
+  } = state;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const filteredEvents = getCurrentEvents(state);
+  const selectedEvent = filteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newIndex = filteredEvents.indexOf(selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
+};
+const getPreservedSelectedEventIndex = (oldState, newState) => {
+  const {
+    selectedEventIndex
+  } = oldState;
+  if (selectedEventIndex === null) {
+    return null;
+  }
+  const oldFilteredEvents = getCurrentEvents(oldState);
+  const selectedEvent = oldFilteredEvents[selectedEventIndex];
+  if (!selectedEvent) {
+    return null;
+  }
+  const newFilteredEvents = getCurrentEvents(newState);
+  const newIndex = newFilteredEvents.indexOf(selectedEvent);
+  if (newIndex === -1) {
+    return null;
+  }
+  return newIndex;
+};
+const parseSelectedEventIndex = value => {
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed) || parsed < 0) {
+    return null;
+  }
+  return parsed;
+};
 const handleInput = (state, name, value, checked) => {
   if (name === Filter) {
-    return {
+    const nextState = {
       ...state,
       filterValue: value
     };
+    return {
+      ...nextState,
+      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+    };
   }
-  if (name === ShowEventStreamFinishedEvents) {
+  if (name === EventCategoryFilter) {
+    const nextState = {
+      ...state,
+      eventCategoryFilter: value || All
+    };
     return {
+      ...nextState,
+      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+    };
+  }
+  if (name === ShowEventStreamFinishedEvents) {
+    const nextState = {
       ...state,
       showEventStreamFinishedEvents: getBoolean(checked)
     };
+    return {
+      ...nextState,
+      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+    };
   }
   if (name === ShowInputEvents) {
-    return {
+    const nextState = {
       ...state,
       showInputEvents: getBoolean(checked)
     };
+    return {
+      ...nextState,
+      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+    };
   }
   if (name === ShowResponsePartEvents) {
-    return {
+    const nextState = {
       ...state,
       showResponsePartEvents: getBoolean(checked)
     };
+    return {
+      ...nextState,
+      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+    };
+  }
+  if (name === UseDevtoolsLayout) {
+    const useDevtoolsLayout = getBoolean(checked);
+    return {
+      ...state,
+      selectedEventIndex: useDevtoolsLayout ? getSelectedEventIndex(state) : null,
+      useDevtoolsLayout
+    };
+  }
+  if (name === SelectedEventIndex) {
+    return {
+      ...state,
+      selectedEventIndex: parseSelectedEventIndex(value)
+    };
+  }
+  if (name === TimelineStartSeconds) {
+    const nextState = {
+      ...state,
+      timelineStartSeconds: value
+    };
+    return {
+      ...nextState,
+      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+    };
+  }
+  if (name === TimelineEndSeconds) {
+    const nextState = {
+      ...state,
+      timelineEndSeconds: value
+    };
+    return {
+      ...nextState,
+      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+    };
+  }
+  if (name === TimelineRangePreset) {
+    const nextState = {
+      ...state,
+      ...parseTimelineRangePreset(value)
+    };
+    return {
+      ...nextState,
+      selectedEventIndex: getPreservedSelectedEventIndex(state, nextState)
+    };
+  }
+  if (name === CloseDetails) {
+    return {
+      ...state,
+      selectedEventIndex: null
+    };
   }
   return state;
 };
@@ -1448,6 +1842,7 @@ const loadContent = async state => {
       errorMessage: getInvalidUriMessage(uri, parsed.code),
       events: [],
       initial: false,
+      selectedEventIndex: null,
       sessionId: ''
     };
   }
@@ -1462,6 +1857,7 @@ const loadContent = async state => {
         errorMessage: getSessionNotFoundMessage(sessionId),
         events: [],
         initial: false,
+        selectedEventIndex: null,
         sessionId
       };
     }
@@ -1470,6 +1866,7 @@ const loadContent = async state => {
       errorMessage: '',
       events,
       initial: false,
+      selectedEventIndex: null,
       sessionId
     };
   } catch {
@@ -1478,6 +1875,7 @@ const loadContent = async state => {
       errorMessage: getFailedToLoadMessage(sessionId),
       events: [],
       initial: false,
+      selectedEventIndex: null,
       sessionId
     };
   }
@@ -1489,7 +1887,8 @@ const refresh = async state => {
     ...state,
     errorMessage: '',
     events,
-    initial: false
+    initial: false,
+    selectedEventIndex: null
   };
 };
 
@@ -1499,6 +1898,7 @@ const TargetValue = 'event.target.value';
 
 const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
+const SetPatches = 'Viewlet.setPatches';
 
 const getCss = () => {
   return `
@@ -1511,10 +1911,15 @@ const getCss = () => {
   gap: 8px;
 }
 
+.ChatDebugView--devtools {
+  gap: 4px;
+}
+
 .ChatDebugViewTop {
   display: flex;
   align-items: center;
   gap: 12px;
+  flex-wrap: wrap;
 }
 
 .ChatDebugViewTop .InputBox {
@@ -1539,107 +1944,406 @@ const getCss = () => {
   opacity: 0.8;
 }
 
+.ChatDebugViewQuickFilters {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.ChatDebugViewQuickFilterPill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border-radius: 999px;
+  background: var(--vscode-editorWidget-background, transparent);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.ChatDebugViewQuickFilterPillSelected {
+  border-color: var(--vscode-focusBorder, #007fd4);
+  background: var(--vscode-list-activeSelectionBackground, rgba(14, 99, 156, 0.35));
+  color: var(--vscode-list-activeSelectionForeground, inherit);
+}
+
+.ChatDebugViewQuickFilterInput {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
 .ChatDebugViewEvents {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   overflow: auto;
+  min-width: 0;
+  min-height: 0;
   scrollbar-width: thin;
   scrollbar-color: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4)) transparent;
 }
 
-.ChatDebugViewEvents::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+.ChatDebugViewEvents--timeline {
+  grid-template-rows: auto auto minmax(0, 1fr);
 }
 
-.ChatDebugViewEvents::-webkit-scrollbar-track {
-  background: transparent;
+.ChatDebugView--devtools .ChatDebugViewEvents {
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border-radius: 6px;
+  margin-bottom: 0;
 }
 
-.ChatDebugViewEvents::-webkit-scrollbar-thumb {
-  background: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4));
-  border-radius: 999px;
-  border: 2px solid transparent;
-  background-clip: content-box;
+.ChatDebugViewEventsFullWidth {
+  grid-column: 1 / -1;
 }
 
-.ChatDebugViewEvents::-webkit-scrollbar-thumb:hover {
-  background: var(--vscode-scrollbarSlider-hoverBackground, rgba(100, 100, 100, 0.7));
+.ChatDebugViewDevtoolsMain {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
+  gap: 8px;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.ChatDebugViewEvents::-webkit-scrollbar-thumb:active {
-  background: var(--vscode-scrollbarSlider-activeBackground, rgba(191, 191, 191, 0.4));
+.ChatDebugViewTimeline {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
+  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 82%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.12)) 18%);
 }
 
-.ChatDebugViewEvent {
-  margin: 0;
-  padding: 8px;
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
-  border-radius: 6px;
-  margin-bottom: 8px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: var(--vscode-editor-font-family, monospace);
+.ChatDebugViewTimelineTop {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.ChatDebugViewTimelineTitle {
   font-size: 12px;
-  user-select: text;
+  font-weight: 600;
 }
 
-.ChatDebugViewEmpty {
+.ChatDebugViewTimelineSummary {
+  font-size: 12px;
   opacity: 0.8;
 }
 
-.ChatDebugViewError {
-  color: var(--vscode-errorForeground, #f14c4c);
-  white-space: normal;
+.ChatDebugViewTimelineControls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
-.TokenText {
-  color: var(--vscode-editor-foreground, inherit);
+.ChatDebugViewTimelineField {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
 }
 
-.TokenKey {
-  color: var(--vscode-symbolIcon-propertyForeground, var(--vscode-editor-foreground, inherit));
+.ChatDebugViewTimelineInput {
+  width: 84px;
 }
 
-.TokenString {
-  color: var(--vscode-debugTokenExpression-string, var(--vscode-charts-green, #89d185));
+.ChatDebugViewTimelineReset {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 12px;
 }
 
-.TokenNumeric {
-  color: var(--vscode-debugTokenExpression-number, var(--vscode-charts-blue, #75beff));
+.ChatDebugViewTimelineResetSelected {
+  border-color: var(--vscode-focusBorder, #007fd4);
+  background: var(--vscode-list-activeSelectionBackground, rgba(14, 99, 156, 0.35));
+  color: var(--vscode-list-activeSelectionForeground, inherit);
 }
 
-.TokenBoolean {
-  color: var(--vscode-debugTokenExpression-boolean, var(--vscode-charts-yellow, #dcdcaa));
+.ChatDebugViewTimelineBuckets {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+  align-items: end;
+  gap: 4px;
+  min-height: 60px;
 }
 
-.ChatOrderedList{
-  margin:0;
-  padding:0;
-  padding-left:10px;
+.ChatDebugViewTimelineBucket {
+  display: flex;
+  align-items: stretch;
+  min-height: 60px;
+  cursor: pointer;
 }
 
-.ChatOrderedListItem{
-  margin:0;
-  padding:0;
+.ChatDebugViewTimelinePresetInput {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
 }
 
-.ChatToolCalls{
-  margin:0;
-  padding:0;
+.ChatDebugViewTimelineBucketBar {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 2px;
+  padding: 4px 2px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.18)) 68%, transparent 32%);
 }
-`;
-};
 
-const renderCss = (oldState, newState) => {
-  const css = getCss();
-  return [SetCss, newState.uid, css];
-};
+.ChatDebugViewTimelineBucketSelected .ChatDebugViewTimelineBucketBar,
+.ChatDebugViewTimelineBucketBarSelected {
+  background: color-mix(in srgb, var(--vscode-charts-blue, #75beff) 72%, transparent 28%);
+  border-color: var(--vscode-focusBorder, #007fd4);
+}
 
-const Div = 4;
-const Input = 6;
-const Span = 8;
-const Text = 12;
+.ChatDebugViewTimelineBucketUnit {
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--vscode-charts-blue, #75beff);
+}
+
+.ChatDebugViewTimelineBucketUnitEmpty {
+  opacity: 0.35;
+  background: var(--vscode-editorWidget-border, #454545);
+}
+
+.ChatDebugViewTableHeader,
+.ChatDebugViewEventRow {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) 90px 64px;
+  align-items: center;
+  gap: 8px;
+}
+
+.ChatDebugViewTableHeader {
+  padding: 8px;
+  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
+  background: var(--vscode-editorWidget-background, transparent);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.ChatDebugViewHeaderCell {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.8;
+}
+
+.ChatDebugViewTableBody {
+  overflow: auto;
+  min-height: 0;
+}
+
+.ChatDebugViewEventRowLabel {
+  display: block;
+}
+
+.ChatDebugViewEventRowLabelSelected .ChatDebugViewEventRow,
+.ChatDebugViewEventRowSelected {
+  background: var(--vscode-list-activeSelectionBackground, rgba(14, 99, 156, 0.35));
+  color: var(--vscode-list-activeSelectionForeground, inherit);
+}
+
+.ChatDebugViewEventRowInput {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ChatDebugViewEventRow {
+  padding: 8px;
+  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
+  cursor: pointer;
+}
+
+.ChatDebugViewEventRow:hover {
+  background: var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.31));
+}
+
+.ChatDebugViewCell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ChatDebugViewCellDuration {
+  text-align: right;
+}
+
+.ChatDebugViewCellStatus {
+  text-align: right;
+}
+
+.ChatDebugViewDetails {
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border-radius: 6px;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.ChatDebugViewDetailsTop {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
+}
+
+.ChatDebugViewDetailsTitle {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.ChatDebugViewDetailsClose {
+  width: 18px;
+  height: 18px;
+  appearance: none;
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+}
+
+.ChatDebugViewDetailsClose::before,
+.ChatDebugViewDetailsClose::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 10px;
+  height: 1px;
+  background: currentColor;
+}
+
+.ChatDebugViewDetailsClose::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.ChatDebugViewDetailsClose::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.ChatDebugViewDetailsBody {
+  overflow: auto;
+  padding: 8px;
+}
+
+.ChatDebugViewEvents::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.ChatDebugViewEvents::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ChatDebugViewEvents::-webkit-scrollbar-thumb {
+  background: var(--vscode-scrollbarSlider-background, rgba(121, 121, 121, 0.4));
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.ChatDebugViewEvents::-webkit-scrollbar-thumb:hover {
+  background: var(--vscode-scrollbarSlider-hoverBackground, rgba(100, 100, 100, 0.7));
+}
+
+.ChatDebugViewEvents::-webkit-scrollbar-thumb:active {
+  background: var(--vscode-scrollbarSlider-activeBackground, rgba(191, 191, 191, 0.4));
+}
+
+.ChatDebugViewEvent {
+  margin: 0;
+  padding: 8px;
+  border: 1px solid var(--vscode-editorWidget-border, #454545);
+  border-radius: 6px;
+  margin-bottom: 8px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 12px;
+  user-select: text;
+}
+
+.ChatDebugViewEmpty {
+  opacity: 0.8;
+}
+
+.ChatDebugViewError {
+  color: var(--vscode-errorForeground, #f14c4c);
+  white-space: normal;
+}
+
+.TokenText {
+  color: var(--vscode-editor-foreground, inherit);
+}
+
+.TokenKey {
+  color: var(--vscode-symbolIcon-propertyForeground, var(--vscode-editor-foreground, inherit));
+}
+
+.TokenString {
+  color: var(--vscode-debugTokenExpression-string, var(--vscode-charts-green, #89d185));
+}
+
+.TokenNumeric {
+  color: var(--vscode-debugTokenExpression-number, var(--vscode-charts-blue, #75beff));
+}
+
+.TokenBoolean {
+  color: var(--vscode-debugTokenExpression-boolean, var(--vscode-charts-yellow, #dcdcaa));
+}
+
+.ChatOrderedList{
+  margin:0;
+  padding:0;
+  padding-left:10px;
+}
+
+.ChatOrderedListItem{
+  margin:0;
+  padding:0;
+}
+
+.ChatToolCalls{
+  margin:0;
+  padding:0;
+}
+`;
+};
+
+const renderCss = (oldState, newState) => {
+  const css = getCss();
+  return [SetCss, newState.uid, css];
+};
+
+const Div = 4;
+const Input = 6;
+const Span = 8;
+const Text = 12;
 const Pre = 51;
 const Label = 66;
+const Reference = 100;
 
 const text = data => {
   return {
@@ -1649,8 +2353,427 @@ const text = data => {
   };
 };
 
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const SetReferenceNodeUid = 11;
+
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
+};
+
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
+
+const arrayToTree = nodes => {
+  const result = [];
+  let i = 0;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    const {
+      children,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
+    result.push({
+      node,
+      children
+    });
+    i += 1 + nodesConsumed;
+  }
+  return result;
+};
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
+    return {
+      children: [],
+      nodesConsumed: 0
+    };
+  }
+  const children = [];
+  let i = startIndex;
+  let remaining = childCount;
+  let totalConsumed = 0;
+  while (remaining > 0 && i < nodes.length) {
+    const node = nodes[i];
+    const nodeChildCount = node.childCount || 0;
+    const {
+      children: nodeChildren,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
+    children.push({
+      node,
+      children: nodeChildren
+    });
+    const nodeSize = 1 + nodesConsumed;
+    i += nodeSize;
+    totalConsumed += nodeSize;
+    remaining--;
+  }
+  return {
+    children,
+    nodesConsumed: totalConsumed
+  };
+};
+
+const compareNodes = (oldNode, newNode) => {
+  const patches = [];
+  // Check if node type changed - return null to signal incompatible nodes
+  // (caller should handle this with a Replace operation)
+  if (oldNode.type !== newNode.type) {
+    return null;
+  }
+  // Handle reference nodes - special handling for uid changes
+  if (oldNode.type === Reference) {
+    if (oldNode.uid !== newNode.uid) {
+      patches.push({
+        type: SetReferenceNodeUid,
+        uid: newNode.uid
+      });
+    }
+    return patches;
+  }
+  // Handle text nodes
+  if (oldNode.type === Text && newNode.type === Text) {
+    if (oldNode.text !== newNode.text) {
+      patches.push({
+        type: SetText,
+        value: newNode.text
+      });
+    }
+    return patches;
+  }
+  // Compare attributes
+  const oldKeys = getKeys(oldNode);
+  const newKeys = getKeys(newNode);
+  // Check for attribute changes
+  for (const key of newKeys) {
+    if (oldNode[key] !== newNode[key]) {
+      patches.push({
+        type: SetAttribute,
+        key,
+        value: newNode[key]
+      });
+    }
+  }
+  // Check for removed attributes
+  for (const key of oldKeys) {
+    if (!(key in newNode)) {
+      patches.push({
+        type: RemoveAttribute,
+        key
+      });
+    }
+  }
+  return patches;
+};
+
+const treeToArray = node => {
+  const result = [node.node];
+  for (const child of node.children) {
+    result.push(...treeToArray(child));
+  }
+  return result;
+};
+
+const diffChildren = (oldChildren, newChildren, patches) => {
+  const maxLength = Math.max(oldChildren.length, newChildren.length);
+  // Track where we are: -1 means at parent, >= 0 means at child index
+  let currentChildIndex = -1;
+  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
+  const indicesToRemove = [];
+  for (let i = 0; i < maxLength; i++) {
+    const oldNode = oldChildren[i];
+    const newNode = newChildren[i];
+    if (!oldNode && !newNode) {
+      continue;
+    }
+    if (!oldNode) {
+      // Add new node - we should be at the parent
+      if (currentChildIndex >= 0) {
+        // Navigate back to parent
+        patches.push({
+          type: NavigateParent
+        });
+        currentChildIndex = -1;
+      }
+      // Flatten the entire subtree so renderInternal can handle it
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Add,
+        nodes: flatNodes
+      });
+    } else if (newNode) {
+      // Compare nodes to see if we need any patches
+      const nodePatches = compareNodes(oldNode.node, newNode.node);
+      // If nodePatches is null, the node types are incompatible - need to replace
+      if (nodePatches === null) {
+        // Navigate to this child
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Replace the entire subtree
+        const flatNodes = treeToArray(newNode);
+        patches.push({
+          type: Replace,
+          nodes: flatNodes
+        });
+        // After replace, we're at the new element (same position)
+        continue;
+      }
+      // Check if we need to recurse into children
+      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+      // Only navigate to this element if we need to do something
+      if (nodePatches.length > 0 || hasChildrenToCompare) {
+        // Navigate to this child if not already there
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Apply node patches (these apply to the current element, not children)
+        if (nodePatches.length > 0) {
+          patches.push(...nodePatches);
+        }
+        // Compare children recursively
+        if (hasChildrenToCompare) {
+          diffChildren(oldNode.children, newNode.children, patches);
+        }
+      }
+    } else {
+      // Remove old node - collect the index for later removal
+      indicesToRemove.push(i);
+    }
+  }
+  // Navigate back to parent if we ended at a child
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+    currentChildIndex = -1;
+  }
+  // Add remove patches in reverse order (highest index first)
+  // This ensures indices remain valid as we remove
+  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
+    patches.push({
+      type: RemoveChild,
+      index: indicesToRemove[j]
+    });
+  }
+};
+const diffTrees = (oldTree, newTree, patches, path) => {
+  // At the root level (path.length === 0), we're already AT the element
+  // So we compare the root node directly, then compare its children
+  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
+    const oldNode = oldTree[0];
+    const newNode = newTree[0];
+    // Compare root nodes
+    const nodePatches = compareNodes(oldNode.node, newNode.node);
+    // If nodePatches is null, the root node types are incompatible - need to replace
+    if (nodePatches === null) {
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Replace,
+        nodes: flatNodes
+      });
+      return;
+    }
+    if (nodePatches.length > 0) {
+      patches.push(...nodePatches);
+    }
+    // Compare children
+    if (oldNode.children.length > 0 || newNode.children.length > 0) {
+      diffChildren(oldNode.children, newNode.children, patches);
+    }
+  } else {
+    // Non-root level or multiple root elements - use the regular comparison
+    diffChildren(oldTree, newTree, patches);
+  }
+};
+
+const removeTrailingNavigationPatches = patches => {
+  // Find the last non-navigation patch
+  let lastNonNavigationIndex = -1;
+  for (let i = patches.length - 1; i >= 0; i--) {
+    const patch = patches[i];
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+      lastNonNavigationIndex = i;
+      break;
+    }
+  }
+  // Return patches up to and including the last non-navigation patch
+  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+};
+
+const diffTree = (oldNodes, newNodes) => {
+  // Step 1: Convert flat arrays to tree structures
+  const oldTree = arrayToTree(oldNodes);
+  const newTree = arrayToTree(newNodes);
+  // Step 3: Compare the trees
+  const patches = [];
+  diffTrees(oldTree, newTree, patches, []);
+  // Remove trailing navigation patches since they serve no purpose
+  return removeTrailingNavigationPatches(patches);
+};
+
 const HandleInput = 4;
 const HandleFilterInput = 5;
+const HandleSimpleInput = 6;
+
+const getDurationText = event => {
+  const explicitDuration = event.durationMs ?? event.duration;
+  if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
+    return `${explicitDuration}ms`;
+  }
+  const start = toTimeNumber(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+  const end = toTimeNumber(event.ended ?? event.endTime ?? event.endTimestamp ?? event.timestamp);
+  if (start === undefined || end === undefined || end < start) {
+    return '-';
+  }
+  return `${end - start}ms`;
+};
+
+const timestampFormatter = new Intl.DateTimeFormat('en-US', {
+  day: '2-digit',
+  fractionalSecondDigits: 3,
+  hour: '2-digit',
+  hourCycle: 'h23',
+  minute: '2-digit',
+  month: 'short',
+  second: '2-digit',
+  timeZone: 'UTC',
+  year: 'numeric'
+});
+const formatTimestamp = date => {
+  return `${timestampFormatter.format(date)} UTC`;
+};
+
+const getTimestampText = value => {
+  if (typeof value === 'string') {
+    const timestamp = Date.parse(value);
+    if (!Number.isNaN(timestamp)) {
+      return formatTimestamp(new Date(timestamp));
+    }
+    return value;
+  }
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return formatTimestamp(new Date(value));
+  }
+  return '-';
+};
+
+const getEndText = event => {
+  return getTimestampText(event.ended ?? event.endTime ?? event.endTimestamp ?? event.timestamp);
+};
+
+const getStartText = event => {
+  return getTimestampText(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
+};
+
+const hasErrorStatus = event => {
+  if (event.type === 'error') {
+    return true;
+  }
+  if (event.success === false || event.ok === false) {
+    return true;
+  }
+  const {
+    status
+  } = event;
+  if (typeof status === 'number' && status >= 400) {
+    return true;
+  }
+  if (typeof status === 'string') {
+    const parsedStatus = Number(status);
+    if (Number.isFinite(parsedStatus) && parsedStatus >= 400) {
+      return true;
+    }
+  }
+  return typeof event.error === 'string' || typeof event.errorMessage === 'string' || typeof event.exception === 'string';
+};
+
+const getStatusText = event => {
+  return hasErrorStatus(event) ? '400' : '200';
+};
+
+const getDevtoolsRows = (events, selectedEventIndex) => {
+  if (events.length === 0) {
+    return [{
+      childCount: 1,
+      className: 'ChatDebugViewEmpty',
+      type: Div
+    }, text('No events')];
+  }
+  const rows = [];
+  for (let i = 0; i < events.length; i++) {
+    const event = events[i];
+    const isSelected = selectedEventIndex === i;
+    rows.push({
+      childCount: 2,
+      className: `ChatDebugViewEventRowLabel${isSelected ? ' ChatDebugViewEventRowLabelSelected' : ''}`,
+      type: Label
+    }, {
+      checked: isSelected,
+      childCount: 0,
+      className: 'ChatDebugViewEventRowInput',
+      inputType: 'radio',
+      name: SelectedEventIndex,
+      onChange: HandleSimpleInput,
+      type: Input,
+      value: String(i)
+    }, {
+      childCount: 5,
+      className: `ChatDebugViewEventRow${isSelected ? ' ChatDebugViewEventRowSelected' : ''}`,
+      type: Div
+    }, {
+      childCount: 1,
+      className: 'ChatDebugViewCell ChatDebugViewCellType',
+      type: Div
+    }, text(event.type), {
+      childCount: 1,
+      className: 'ChatDebugViewCell',
+      type: Div
+    }, text(getStartText(event)), {
+      childCount: 1,
+      className: 'ChatDebugViewCell',
+      type: Div
+    }, text(getEndText(event)), {
+      childCount: 1,
+      className: 'ChatDebugViewCell ChatDebugViewCellDuration',
+      type: Div
+    }, text(getDurationText(event)), {
+      childCount: 1,
+      className: 'ChatDebugViewCell ChatDebugViewCellStatus',
+      type: Div
+    }, text(getStatusText(event)));
+  }
+  return rows;
+};
 
 const numberRegex = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?/;
 const whitespaceRegex = /\s/u;
@@ -1755,7 +2878,247 @@ const getEventNode = event => {
   }, ...tokenNodes];
 };
 
-const getChatDebugViewDom = (errorMessage, filterValue, showEventStreamFinishedEvents, showInputEvents, showResponsePartEvents, events) => {
+const trailingZeroFractionRegex = /\.0+$/;
+const trailingFractionZeroRegex = /(\.\d*?)0+$/;
+const formatTimelinePresetValue = value => {
+  return value.toFixed(3).replace(trailingZeroFractionRegex, '').replace(trailingFractionZeroRegex, '$1');
+};
+
+const formatTimelineSeconds = value => {
+  if (Number.isInteger(value)) {
+    return `${value}s`;
+  }
+  return `${Number(value.toFixed(1))}s`;
+};
+const getTimelineSummary = (timelineEvents, timelineStartSeconds, timelineEndSeconds) => {
+  const timelineInfo = getTimelineInfo(timelineEvents, timelineStartSeconds, timelineEndSeconds);
+  if (timelineInfo.hasSelection && timelineInfo.startSeconds !== null && timelineInfo.endSeconds !== null) {
+    return `Window ${formatTimelineSeconds(timelineInfo.startSeconds)}-${formatTimelineSeconds(timelineInfo.endSeconds)} of ${formatTimelineSeconds(timelineInfo.durationSeconds)}`;
+  }
+  return `Window 0s-${formatTimelineSeconds(timelineInfo.durationSeconds)} of ${formatTimelineSeconds(timelineInfo.durationSeconds)}`;
+};
+
+const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSeconds) => {
+  const timelineInfo = getTimelineInfo(timelineEvents, timelineStartSeconds, timelineEndSeconds);
+  if (timelineInfo.buckets.length === 0) {
+    return [];
+  }
+  return [{
+    childCount: 3,
+    className: 'ChatDebugViewTimeline',
+    type: Div
+  }, {
+    childCount: 2,
+    className: 'ChatDebugViewTimelineTop',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'ChatDebugViewTimelineTitle',
+    type: Div
+  }, text('Timeline'), {
+    childCount: 1,
+    className: 'ChatDebugViewTimelineSummary',
+    type: Div
+  }, text(getTimelineSummary(timelineEvents, timelineStartSeconds, timelineEndSeconds)), {
+    childCount: 3,
+    className: 'ChatDebugViewTimelineControls',
+    type: Div
+  }, {
+    childCount: 2,
+    className: 'ChatDebugViewTimelineField',
+    type: Label
+  }, text('From'), {
+    childCount: 0,
+    className: 'InputBox ChatDebugViewTimelineInput',
+    inputType: 'number',
+    name: TimelineStartSeconds,
+    onInput: HandleFilterInput,
+    placeholder: '0',
+    type: Input,
+    value: timelineStartSeconds
+  }, {
+    childCount: 2,
+    className: 'ChatDebugViewTimelineField',
+    type: Label
+  }, text('To'), {
+    childCount: 0,
+    className: 'InputBox ChatDebugViewTimelineInput',
+    inputType: 'number',
+    name: TimelineEndSeconds,
+    onInput: HandleFilterInput,
+    placeholder: formatTimelinePresetValue(timelineInfo.durationSeconds),
+    type: Input,
+    value: timelineEndSeconds
+  }, {
+    childCount: 2,
+    className: `ChatDebugViewTimelineReset${timelineInfo.hasSelection ? '' : ' ChatDebugViewTimelineResetSelected'}`,
+    type: Label
+  }, {
+    checked: !timelineInfo.hasSelection,
+    childCount: 0,
+    className: 'ChatDebugViewTimelinePresetInput',
+    inputType: 'radio',
+    name: TimelineRangePreset,
+    onChange: HandleSimpleInput,
+    type: Input,
+    value: ''
+  }, text('All'), {
+    childCount: timelineInfo.buckets.length,
+    className: 'ChatDebugViewTimelineBuckets',
+    type: Div
+  }, ...timelineInfo.buckets.flatMap(bucket => {
+    const presetValue = `${formatTimelinePresetValue(bucket.startSeconds)}:${formatTimelinePresetValue(bucket.endSeconds)}`;
+    return [{
+      childCount: 2,
+      className: `ChatDebugViewTimelineBucket${bucket.isSelected ? ' ChatDebugViewTimelineBucketSelected' : ''}`,
+      type: Label
+    }, {
+      checked: false,
+      childCount: 0,
+      className: 'ChatDebugViewTimelinePresetInput',
+      inputType: 'radio',
+      name: TimelineRangePreset,
+      onChange: HandleSimpleInput,
+      type: Input,
+      value: presetValue
+    }, {
+      childCount: bucket.unitCount === 0 ? 1 : bucket.unitCount,
+      className: `ChatDebugViewTimelineBucketBar${bucket.isSelected ? ' ChatDebugViewTimelineBucketBarSelected' : ''}`,
+      type: Div
+    }, ...(bucket.unitCount === 0 ? [{
+      childCount: 0,
+      className: 'ChatDebugViewTimelineBucketUnit ChatDebugViewTimelineBucketUnitEmpty',
+      type: Div
+    }] : Array.from({
+      length: bucket.unitCount
+    }).fill({
+      childCount: 0,
+      className: 'ChatDebugViewTimelineBucketUnit',
+      type: Div
+    }))];
+  })];
+};
+
+const getDevtoolsDom = (events, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds) => {
+  const rowNodes = getDevtoolsRows(events, selectedEventIndex);
+  const timelineNodes = getTimelineNodes(timelineEvents, timelineStartSeconds, timelineEndSeconds);
+  const selectedEvent = selectedEventIndex === null ? undefined : events[selectedEventIndex];
+  const selectedEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
+  const hasSelectedEvent = selectedEventNodes.length > 0;
+  const eventsClassName = `${hasSelectedEvent ? 'ChatDebugViewEvents' : 'ChatDebugViewEvents ChatDebugViewEventsFullWidth'}${timelineNodes.length > 0 ? ' ChatDebugViewEvents--timeline' : ''}`;
+  const detailsNodes = hasSelectedEvent ? [{
+    childCount: 2,
+    className: 'ChatDebugViewDetails',
+    type: Div
+  }, {
+    childCount: 2,
+    className: 'ChatDebugViewDetailsTop',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'ChatDebugViewDetailsTitle',
+    type: Div
+  }, text('Details'), {
+    childCount: 0,
+    className: 'ChatDebugViewDetailsClose',
+    inputType: 'checkbox',
+    name: CloseDetails,
+    onChange: HandleSimpleInput,
+    type: Input,
+    value: 'close'
+  }, {
+    childCount: selectedEventNodes.length,
+    className: 'ChatDebugViewDetailsBody',
+    type: Div
+  }, ...selectedEventNodes] : [];
+  return [{
+    childCount: hasSelectedEvent ? 2 : 1,
+    className: 'ChatDebugViewDevtoolsMain',
+    type: Div
+  }, {
+    childCount: timelineNodes.length > 0 ? 3 : 2,
+    className: eventsClassName,
+    type: Div
+  }, ...timelineNodes, {
+    childCount: 5,
+    className: 'ChatDebugViewTableHeader',
+    type: Div
+  }, {
+    childCount: 1,
+    className: 'ChatDebugViewHeaderCell ChatDebugViewCellType',
+    type: Div
+  }, text('Type'), {
+    childCount: 1,
+    className: 'ChatDebugViewHeaderCell',
+    type: Div
+  }, text('Started'), {
+    childCount: 1,
+    className: 'ChatDebugViewHeaderCell',
+    type: Div
+  }, text('Ended'), {
+    childCount: 1,
+    className: 'ChatDebugViewHeaderCell ChatDebugViewCellDuration',
+    type: Div
+  }, text('Duration'), {
+    childCount: 1,
+    className: 'ChatDebugViewHeaderCell ChatDebugViewCellStatus',
+    type: Div
+  }, text('Status'), {
+    childCount: rowNodes.length === 0 ? 1 : rowNodes.length,
+    className: 'ChatDebugViewTableBody',
+    type: Div
+  }, ...rowNodes, ...detailsNodes];
+};
+
+const getLegacyEventsDom = (errorMessage, emptyMessage, eventNodes) => {
+  return [{
+    childCount: eventNodes.length === 0 ? 1 : eventNodes.length,
+    className: 'ChatDebugViewEvents',
+    type: Div
+  }, ...(eventNodes.length === 0 ? [{
+    childCount: 1,
+    className: errorMessage ? 'ChatDebugViewError' : 'ChatDebugViewEmpty',
+    type: Div
+  }, text(errorMessage || emptyMessage)] : eventNodes)];
+};
+const getQuickFilterNodes = eventCategoryFilter => {
+  return [{
+    childCount: options.length,
+    className: 'ChatDebugViewQuickFilters',
+    type: Div
+  }, ...options.flatMap(option => {
+    const isSelected = option.value === eventCategoryFilter;
+    return [{
+      childCount: 2,
+      className: `ChatDebugViewQuickFilterPill${isSelected ? ' ChatDebugViewQuickFilterPillSelected' : ''}`,
+      type: Label
+    }, {
+      checked: isSelected,
+      childCount: 0,
+      className: 'ChatDebugViewQuickFilterInput',
+      inputType: 'radio',
+      name: EventCategoryFilter,
+      onChange: HandleInput,
+      type: Input,
+      value: option.value
+    }, text(option.label)];
+  })];
+};
+const getTimelineFilterDescription = (timelineStartSeconds, timelineEndSeconds) => {
+  const trimmedStart = timelineStartSeconds.trim();
+  const trimmedEnd = timelineEndSeconds.trim();
+  if (trimmedStart && trimmedEnd) {
+    return `${trimmedStart}s-${trimmedEnd}s`;
+  }
+  if (trimmedStart) {
+    return `from ${trimmedStart}s`;
+  }
+  if (trimmedEnd) {
+    return `to ${trimmedEnd}s`;
+  }
+  return '';
+};
+const getChatDebugViewDom = (errorMessage, filterValue, eventCategoryFilter, showEventStreamFinishedEvents, showInputEvents, showResponsePartEvents, useDevtoolsLayout, selectedEventIndex, timelineStartSeconds, timelineEndSeconds, timelineEvents, events) => {
   if (errorMessage) {
     return [{
       childCount: 1,
@@ -1769,13 +3132,29 @@ const getChatDebugViewDom = (errorMessage, filterValue, showEventStreamFinishedE
   }
   const eventNodes = events.flatMap(getEventNode);
   const trimmedFilterValue = filterValue.trim();
-  const hasFilterValue = trimmedFilterValue.length > 0;
-  const noFilteredEventsMessage = `no events found matching ${trimmedFilterValue}`;
+  const filterDescriptionParts = [];
+  if (eventCategoryFilter !== All) {
+    filterDescriptionParts.push(getEventCategoryFilterLabel(eventCategoryFilter).toLowerCase());
+  }
+  if (trimmedFilterValue) {
+    filterDescriptionParts.push(trimmedFilterValue);
+  }
+  const timelineFilterDescription = getTimelineFilterDescription(timelineStartSeconds, timelineEndSeconds);
+  if (timelineFilterDescription) {
+    filterDescriptionParts.push(timelineFilterDescription);
+  }
+  const hasFilterValue = filterDescriptionParts.length > 0;
+  const filterDescription = filterDescriptionParts.join(' ');
+  const noFilteredEventsMessage = `no events found matching ${filterDescription}`;
   const eventCountText = events.length === 0 && hasFilterValue ? noFilteredEventsMessage : `${events.length} event${events.length === 1 ? '' : 's'}`;
   const emptyMessage = events.length === 0 && hasFilterValue ? noFilteredEventsMessage : 'No events';
+  const safeSelectedEventIndex = selectedEventIndex === null || selectedEventIndex < 0 || selectedEventIndex >= events.length ? null : selectedEventIndex;
+  const contentNodes = useDevtoolsLayout ? getDevtoolsDom(events, safeSelectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds) : getLegacyEventsDom(errorMessage, emptyMessage, eventNodes);
+  const quickFilterNodes = useDevtoolsLayout ? getQuickFilterNodes(eventCategoryFilter) : [];
+  const rootChildCount = useDevtoolsLayout ? 4 : 3;
   return [{
-    childCount: 3,
-    className: 'ChatDebugView',
+    childCount: rootChildCount,
+    className: useDevtoolsLayout ? 'ChatDebugView ChatDebugView--devtools' : 'ChatDebugView',
     type: Div
   }, {
     childCount: 2,
@@ -1792,7 +3171,7 @@ const getChatDebugViewDom = (errorMessage, filterValue, showEventStreamFinishedE
     type: Input,
     value: filterValue
   }, {
-    childCount: 3,
+    childCount: 4,
     className: 'ChatDebugViewToggle',
     type: Div
   }, {
@@ -1829,71 +3208,21 @@ const getChatDebugViewDom = (errorMessage, filterValue, showEventStreamFinishedE
     onChange: HandleInput,
     type: Input
   }, text('Show response part events'), {
+    childCount: 2,
+    className: 'ChatDebugViewToggleLabel',
+    type: Label
+  }, {
+    checked: useDevtoolsLayout,
+    childCount: 0,
+    inputType: 'checkbox',
+    name: UseDevtoolsLayout,
+    onChange: HandleInput,
+    type: Input
+  }, text('Use devtools layout'), ...quickFilterNodes, {
     childCount: 1,
     className: 'ChatDebugViewEventCount',
     type: Div
-  }, text(eventCountText), {
-    childCount: eventNodes.length === 0 ? 1 : eventNodes.length,
-    className: 'ChatDebugViewEvents',
-    type: Div
-  }, ...(eventNodes.length === 0 ? [{
-    childCount: 1,
-    className: errorMessage ? 'ChatDebugViewError' : 'ChatDebugViewEmpty',
-    type: Div
-  }, text(errorMessage || emptyMessage)] : eventNodes)];
-};
-
-const RE_SPACE = /\s+/;
-const parseFilterValue = filterValue => {
-  const normalizedFilter = filterValue.trim().toLowerCase();
-  if (!normalizedFilter) {
-    return {
-      filterText: '',
-      toolsOnly: false
-    };
-  }
-  const parts = normalizedFilter.split(RE_SPACE);
-  const toolsOnly = parts.includes('@tools');
-  const filterText = parts.filter(part => part !== '@tools').join(' ');
-  return {
-    filterText,
-    toolsOnly
-  };
-};
-
-const toolEventTypePrefix = 'tool-execution-';
-const isToolEvent = event => {
-  return event.type.startsWith(toolEventTypePrefix);
-};
-const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
-  return events.filter(event => {
-    if (!showInputEvents && (event.type === 'handle-input' || event.type === 'handle-submit')) {
-      return false;
-    }
-    if (!showResponsePartEvents && event.type === 'sse-response-part') {
-      return false;
-    }
-    if (!showEventStreamFinishedEvents && event.type === 'event-stream-finished') {
-      return false;
-    }
-    // hide session creation events by default — not useful in the debug view
-    if (event.type === 'chat-session-created') {
-      return false;
-    }
-    return true;
-  });
-};
-const getFilteredEvents = (events, filterValue, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
-  const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
-  const {
-    filterText,
-    toolsOnly
-  } = parseFilterValue(filterValue);
-  const filteredBySyntax = toolsOnly ? visibleEvents.filter(isToolEvent) : visibleEvents;
-  if (!filterText) {
-    return filteredBySyntax;
-  }
-  return filteredBySyntax.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
+  }, text(eventCountText), ...contentNodes];
 };
 
 const withSessionEventIds = events => {
@@ -1905,16 +3234,29 @@ const withSessionEventIds = events => {
   });
 };
 const renderItems = (oldState, newState) => {
+  if (newState.initial) {
+    return [SetDom2, newState.uid, []];
+  }
   const eventsWithIds = withSessionEventIds(newState.events);
-  const filteredEvents = getFilteredEvents(eventsWithIds, newState.filterValue, newState.showInputEvents, newState.showResponsePartEvents, newState.showEventStreamFinishedEvents);
-  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, filteredEvents);
+  const timelineEvents = getFilteredEvents(eventsWithIds, newState.filterValue, newState.eventCategoryFilter, newState.showInputEvents, newState.showResponsePartEvents, newState.showEventStreamFinishedEvents);
+  const filteredEvents = filterEventsByTimelineRange(timelineEvents, newState.timelineStartSeconds, newState.timelineEndSeconds);
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, newState.eventCategoryFilter, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, timelineEvents, filteredEvents);
   return [SetDom2, newState.uid, dom];
 };
 
+const renderIncremental = (oldState, newState) => {
+  const oldDom = renderItems(oldState, oldState)[2];
+  const newDom = renderItems(newState, newState)[2];
+  const patches = diffTree(oldDom, newDom);
+  return [SetPatches, newState.uid, patches];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderCss:
       return renderCss;
+    case RenderIncremental:
+      return renderIncremental;
     case RenderItems:
       return renderItems;
     default:
@@ -1950,6 +3292,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleInput,
     params: ['handleInput', TargetName, TargetValue, TargetChecked]
+  }, {
+    name: HandleSimpleInput,
+    params: ['handleInput', TargetName, TargetValue]
   }];
 };
 
@@ -1966,23 +3311,31 @@ const resize = (state, dimensions) => {
 
 const saveState = state => {
   const {
+    eventCategoryFilter,
     filterValue,
     height,
     sessionId,
     showEventStreamFinishedEvents,
     showInputEvents,
     showResponsePartEvents,
+    timelineEndSeconds,
+    timelineStartSeconds,
+    useDevtoolsLayout,
     width,
     x,
     y
   } = state;
   return {
+    eventCategoryFilter,
     filterValue,
     height,
     sessionId,
     showEventStreamFinishedEvents,
     showInputEvents,
     showResponsePartEvents,
+    timelineEndSeconds,
+    timelineStartSeconds,
+    useDevtoolsLayout,
     width,
     x,
     y
@@ -1994,7 +3347,8 @@ const setEvents = (state, events) => {
     ...state,
     errorMessage: '',
     events,
-    initial: false
+    initial: false,
+    selectedEventIndex: null
   };
 };