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

package/dist/chatDebugViewWorkerMain.js

@@ -1071,6 +1071,94 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
+const parseSelectedEventIndex$1 = value => {
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed) || parsed < 0) {
+    return null;
+  }
+  return parsed;
+};
+const handleEventRowClick = (state, value) => {
+  const selectedEventIndex = parseSelectedEventIndex$1(value);
+  if (selectedEventIndex === null) {
+    return state;
+  }
+  return {
+    ...state,
+    selectedEventIndex
+  };
+};
+
+const startedEventType = 'tool-execution-started';
+const finishedEventType = 'tool-execution-finished';
+const mergedEventType = 'tool-execution';
+const eventStableIds = new WeakMap();
+let nextStableEventId = 1;
+const getOrCreateStableEventId = event => {
+  const existingStableEventId = eventStableIds.get(event);
+  if (existingStableEventId) {
+    return existingStableEventId;
+  }
+  const stableEventId = `event-${nextStableEventId++}`;
+  eventStableIds.set(event, stableEventId);
+  return stableEventId;
+};
+const setStableEventId = (event, stableEventId) => {
+  eventStableIds.set(event, stableEventId);
+};
+const getStartedTimestamp = event => {
+  return event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp;
+};
+const getEndedTimestamp = event => {
+  return event.ended ?? event.endTime ?? event.endTimestamp ?? event.timestamp;
+};
+const isToolExecutionStartedEvent = event => {
+  return event.type === startedEventType;
+};
+const isToolExecutionFinishedEvent = event => {
+  return event.type === finishedEventType;
+};
+const hasMatchingToolName = (startedEvent, finishedEvent) => {
+  if (typeof startedEvent.toolName === 'string' && typeof finishedEvent.toolName === 'string') {
+    return startedEvent.toolName === finishedEvent.toolName;
+  }
+  return true;
+};
+const isMatchingToolExecutionPair = (startedEvent, finishedEvent) => {
+  return startedEvent.sessionId === finishedEvent.sessionId && hasMatchingToolName(startedEvent, finishedEvent);
+};
+const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
+  const mergedEvent = {
+    ...startedEvent,
+    ...finishedEvent,
+    ended: getEndedTimestamp(finishedEvent),
+    started: getStartedTimestamp(startedEvent),
+    type: mergedEventType
+  };
+  const stableEventId = `${getOrCreateStableEventId(startedEvent)}:${getOrCreateStableEventId(finishedEvent)}`;
+  setStableEventId(mergedEvent, stableEventId);
+  return mergedEvent;
+};
+const getStableEventId = event => {
+  return getOrCreateStableEventId(event);
+};
+const collapseToolExecutionEvents = events => {
+  const collapsedEvents = [];
+  for (let i = 0; i < events.length; i++) {
+    const event = events[i];
+    if (isToolExecutionStartedEvent(event)) {
+      const nextEvent = events[i + 1];
+      if (nextEvent && isToolExecutionFinishedEvent(nextEvent) && isMatchingToolExecutionPair(event, nextEvent)) {
+        collapsedEvents.push(mergeToolExecutionEvents(event, nextEvent));
+        i++;
+        continue;
+      }
+    }
+    collapsedEvents.push(event);
+  }
+  return collapsedEvents;
+};
+
 const getBoolean = value => {
   return value === true || value === 'true' || value === 'on' || value === '1';
 };
@@ -1094,7 +1182,7 @@ const parseFilterValue = filterValue => {
   };
 };
 
-const toolEventTypePrefix = 'tool-execution-';
+const toolEventTypePrefix = 'tool-execution';
 const isToolEvent = event => {
   return event.type.startsWith(toolEventTypePrefix);
 };
@@ -1124,7 +1212,7 @@ const matchesEventCategoryFilter = (event, eventCategoryFilter) => {
 };
 const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
   return events.filter(event => {
-    if (!showInputEvents && (event.type === 'handle-input' || event.type === 'handle-submit')) {
+    if (!showInputEvents && event.type === 'handle-input') {
       return false;
     }
     if (!showResponsePartEvents && event.type === 'sse-response-part') {
@@ -1142,9 +1230,10 @@ const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showE
 };
 const getFilteredEvents = (events, filterValue, eventCategoryFilter, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
   const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
+  const collapsedEvents = collapseToolExecutionEvents(visibleEvents);
   const parsedFilter = parseFilterValue(filterValue);
   const activeEventCategoryFilter = parsedFilter.eventCategoryFilter === All ? eventCategoryFilter : parsedFilter.eventCategoryFilter;
-  const filteredByCategory = visibleEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilter));
+  const filteredByCategory = collapsedEvents.filter(event => matchesEventCategoryFilter(event, activeEventCategoryFilter));
   const {
     filterText
   } = parsedFilter;
@@ -1313,6 +1402,10 @@ const parseTimelineRangePreset = value => {
     timelineStartSeconds
   };
 };
+const getEventIndexByStableId = (events, event) => {
+  const stableEventId = getStableEventId(event);
+  return events.findIndex(candidate => getStableEventId(candidate) === stableEventId);
+};
 const getSelectedEventIndex = state => {
   const {
     selectedEventIndex
@@ -1325,7 +1418,7 @@ const getSelectedEventIndex = state => {
   if (!selectedEvent) {
     return null;
   }
-  const newIndex = filteredEvents.indexOf(selectedEvent);
+  const newIndex = getEventIndexByStableId(filteredEvents, selectedEvent);
   if (newIndex === -1) {
     return null;
   }
@@ -1344,7 +1437,7 @@ const getPreservedSelectedEventIndex = (oldState, newState) => {
     return null;
   }
   const newFilteredEvents = getCurrentEvents(newState);
-  const newIndex = newFilteredEvents.indexOf(selectedEvent);
+  const newIndex = getEventIndexByStableId(newFilteredEvents, selectedEvent);
   if (newIndex === -1) {
     return null;
   }
@@ -1904,8 +1997,8 @@ const getCss = () => {
   return `
 .ChatDebugView {
   padding: 8px;
-  display: grid;
-  grid-template-rows: auto auto 1fr;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   box-sizing: border-box;
   gap: 8px;
@@ -1939,20 +2032,16 @@ const getCss = () => {
   gap: 4px;
 }
 
-.ChatDebugViewEventCount {
-  font-size: 12px;
-  opacity: 0.8;
+.ChatDebugViewQuickFilterPill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
+
 .ChatDebugViewQuickFilters {
   display: flex;
   gap: 8px;
-  flex-wrap: wrap;
-}
-
-.ChatDebugViewQuickFilterPill {
-  display: inline-flex;
-  align-items: center;
   justify-content: center;
   min-height: 28px;
   padding: 0 12px;
@@ -1977,8 +2066,8 @@ const getCss = () => {
 }
 
 .ChatDebugViewEvents {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  display: flex;
+  flex-direction: column;
   overflow: auto;
   min-width: 0;
   min-height: 0;
@@ -1987,30 +2076,49 @@ const getCss = () => {
 }
 
 .ChatDebugViewEvents--timeline {
-  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 0;
 }
 
 .ChatDebugView--devtools .ChatDebugViewEvents {
   border: 1px solid var(--vscode-editorWidget-border, #454545);
   border-radius: 6px;
   margin-bottom: 0;
+  overflow: hidden;
 }
 
 .ChatDebugViewEventsFullWidth {
-  grid-column: 1 / -1;
+  flex: 1 1 100%;
 }
 
 .ChatDebugViewDevtoolsMain {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
   gap: 8px;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
 }
 
+.ChatDebugViewDevtoolsMain > .ChatDebugViewEvents {
+  flex: 1 1 480px;
+  min-width: 0;
+}
+
+.ChatDebugViewDevtoolsMain > .ChatDebugViewDetails {
+  flex: 0 0 clamp(320px, 32vw, 420px);
+}
+
+.ChatDebugViewTable {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
 .ChatDebugViewTimeline {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 8px;
   padding: 10px;
   border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
@@ -2042,17 +2150,6 @@ const getCss = () => {
   flex-wrap: wrap;
 }
 
-.ChatDebugViewTimelineField {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-}
-
-.ChatDebugViewTimelineInput {
-  width: 84px;
-}
-
 .ChatDebugViewTimelineReset {
   display: inline-flex;
   align-items: center;
@@ -2072,8 +2169,7 @@ const getCss = () => {
 }
 
 .ChatDebugViewTimelineBuckets {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+  display: flex;
   align-items: end;
   gap: 4px;
   min-height: 60px;
@@ -2082,6 +2178,8 @@ const getCss = () => {
 .ChatDebugViewTimelineBucket {
   display: flex;
   align-items: stretch;
+  flex: 1 1 10px;
+  min-width: 10px;
   min-height: 60px;
   cursor: pointer;
 }
@@ -2124,8 +2222,7 @@ const getCss = () => {
 
 .ChatDebugViewTableHeader,
 .ChatDebugViewEventRow {
-  display: grid;
-  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) 90px 64px;
+  display: flex;
   align-items: center;
   gap: 8px;
 }
@@ -2149,6 +2246,8 @@ const getCss = () => {
 .ChatDebugViewTableBody {
   overflow: auto;
   min-height: 0;
+  flex: 1 1 auto;
+  contain: strict;
 }
 
 .ChatDebugViewEventRowLabel {
@@ -2181,13 +2280,26 @@ const getCss = () => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
+}
+
+.ChatDebugViewCellType {
+  flex: 1 1 140px;
+  min-width: 0;
+}
+
+.ChatDebugViewCellTime {
+  flex: 1 1 180px;
+  min-width: 0;
 }
 
 .ChatDebugViewCellDuration {
+  flex: 0 0 90px;
   text-align: right;
 }
 
 .ChatDebugViewCellStatus {
+  flex: 0 0 64px;
   text-align: right;
 }
 
@@ -2197,8 +2309,9 @@ const getCss = () => {
   overflow: hidden;
   min-width: 0;
   min-height: 0;
-  display: grid;
-  grid-template-rows: auto 1fr;
+  display: flex;
+  flex-direction: column;
+  contain: strict;
 }
 
 .ChatDebugViewDetailsTop {
@@ -2246,6 +2359,9 @@ const getCss = () => {
 .ChatDebugViewDetailsBody {
   overflow: auto;
   padding: 8px;
+  flex: 1 1 auto;
+  min-height: 0;
+  contain: strict;
 }
 
 .ChatDebugViewEvents::-webkit-scrollbar {
@@ -2644,6 +2760,7 @@ const diffTree = (oldNodes, newNodes) => {
 const HandleInput = 4;
 const HandleFilterInput = 5;
 const HandleSimpleInput = 6;
+const HandleEventRowClick = 7;
 
 const getDurationText = event => {
   const explicitDuration = event.durationMs ?? event.duration;
@@ -2733,42 +2850,36 @@ const getDevtoolsRows = (events, selectedEventIndex) => {
   for (let i = 0; i < events.length; i++) {
     const event = events[i];
     const isSelected = selectedEventIndex === i;
+    const rowIndex = String(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' : ''}`,
+      'data-index': rowIndex,
       type: Div
     }, {
       childCount: 1,
       className: 'ChatDebugViewCell ChatDebugViewCellType',
+      'data-index': rowIndex,
       type: Div
     }, text(event.type), {
       childCount: 1,
-      className: 'ChatDebugViewCell',
+      className: 'ChatDebugViewCell ChatDebugViewCellTime',
+      'data-index': rowIndex,
       type: Div
     }, text(getStartText(event)), {
       childCount: 1,
-      className: 'ChatDebugViewCell',
+      className: 'ChatDebugViewCell ChatDebugViewCellTime',
+      'data-index': rowIndex,
       type: Div
     }, text(getEndText(event)), {
       childCount: 1,
       className: 'ChatDebugViewCell ChatDebugViewCellDuration',
+      'data-index': rowIndex,
       type: Div
     }, text(getDurationText(event)), {
       childCount: 1,
       className: 'ChatDebugViewCell ChatDebugViewCellStatus',
+      'data-index': rowIndex,
       type: Div
     }, text(getStatusText(event)));
   }
@@ -2920,35 +3031,9 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
     className: 'ChatDebugViewTimelineSummary',
     type: Div
   }, text(getTimelineSummary(timelineEvents, timelineStartSeconds, timelineEndSeconds)), {
-    childCount: 3,
+    childCount: 1,
     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'}`,
@@ -3006,6 +3091,7 @@ const getDevtoolsDom = (events, selectedEventIndex, timelineEvents, timelineStar
   const selectedEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
   const hasSelectedEvent = selectedEventNodes.length > 0;
   const eventsClassName = `${hasSelectedEvent ? 'ChatDebugViewEvents' : 'ChatDebugViewEvents ChatDebugViewEventsFullWidth'}${timelineNodes.length > 0 ? ' ChatDebugViewEvents--timeline' : ''}`;
+  const eventsChildCount = timelineNodes.length > 0 ? 2 : 1;
   const detailsNodes = hasSelectedEvent ? [{
     childCount: 2,
     className: 'ChatDebugViewDetails',
@@ -3036,10 +3122,14 @@ const getDevtoolsDom = (events, selectedEventIndex, timelineEvents, timelineStar
     className: 'ChatDebugViewDevtoolsMain',
     type: Div
   }, {
-    childCount: timelineNodes.length > 0 ? 3 : 2,
+    childCount: eventsChildCount,
     className: eventsClassName,
     type: Div
   }, ...timelineNodes, {
+    childCount: 2,
+    className: 'ChatDebugViewTable',
+    type: Div
+  }, {
     childCount: 5,
     className: 'ChatDebugViewTableHeader',
     type: Div
@@ -3049,11 +3139,11 @@ const getDevtoolsDom = (events, selectedEventIndex, timelineEvents, timelineStar
     type: Div
   }, text('Type'), {
     childCount: 1,
-    className: 'ChatDebugViewHeaderCell',
+    className: 'ChatDebugViewHeaderCell ChatDebugViewCellTime',
     type: Div
   }, text('Started'), {
     childCount: 1,
-    className: 'ChatDebugViewHeaderCell',
+    className: 'ChatDebugViewHeaderCell ChatDebugViewCellTime',
     type: Div
   }, text('Ended'), {
     childCount: 1,
@@ -3066,6 +3156,7 @@ const getDevtoolsDom = (events, selectedEventIndex, timelineEvents, timelineStar
   }, text('Status'), {
     childCount: rowNodes.length === 0 ? 1 : rowNodes.length,
     className: 'ChatDebugViewTableBody',
+    onClick: HandleEventRowClick,
     type: Div
   }, ...rowNodes, ...detailsNodes];
 };
@@ -3237,10 +3328,9 @@ const renderItems = (oldState, newState) => {
   if (newState.initial) {
     return [SetDom2, newState.uid, []];
   }
-  const eventsWithIds = withSessionEventIds(newState.events);
-  const timelineEvents = getFilteredEvents(eventsWithIds, newState.filterValue, newState.eventCategoryFilter, newState.showInputEvents, newState.showResponsePartEvents, newState.showEventStreamFinishedEvents);
+  const timelineEvents = getFilteredEvents(newState.events, 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);
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, newState.eventCategoryFilter, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, withSessionEventIds(timelineEvents), withSessionEventIds(filteredEvents));
   return [SetDom2, newState.uid, dom];
 };
 
@@ -3287,6 +3377,9 @@ const render2 = (uid, diffResult) => {
 
 const renderEventListeners = () => {
   return [{
+    name: HandleEventRowClick,
+    params: ['handleEventRowClick', 'event.target.dataset.index']
+  }, {
     name: HandleFilterInput,
     params: ['handleInput', TargetName, TargetValue]
   }, {
@@ -3367,6 +3460,7 @@ const commandMap = {
   'ChatDebug.create': create,
   'ChatDebug.diff2': diff2,
   'ChatDebug.getCommandIds': getCommandIds,
+  'ChatDebug.handleEventRowClick': wrapCommand(handleEventRowClick),
   'ChatDebug.handleInput': wrapCommand(handleInput),
   'ChatDebug.loadContent': wrapCommand(loadContent),
   'ChatDebug.loadContent2': wrapCommand(loadContent),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/chat-debug-view",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Chat Debug View Worker",
   "repository": {
     "type": "git",