@lvce-editor/chat-debug-view 5.0.0 → 5.1.0

package/dist/chatDebugViewWorkerMain.js

@@ -1024,12 +1024,16 @@ const {
 } = create$1();
 
 const Response = 'response';
+const Preview = 'preview';
 const Timing = 'timing';
-const detailTabs = [Response, Timing];
+const detailTabs = [Response, Preview, Timing];
 const isDetailTab = value => {
-  return value === Response || value === Timing;
+  return value === Response || value === Preview || value === Timing;
 };
 const getDetailTabLabel = value => {
+  if (value === Preview) {
+    return 'Preview';
+  }
   if (value === Timing) {
     return 'Timing';
   }
@@ -2901,7 +2905,6 @@ const getCss = state => {
   white-space: nowrap;
   min-width: 0;
   font-size: 11px;
-  text-transform: uppercase;
   letter-spacing: 0.04em;
   opacity: 0.8;
   contain: content;
@@ -2977,6 +2980,10 @@ const getCss = state => {
   text-align: right;
 }
 
+.ChatDebugViewCellStatusError {
+  color: var(--vscode-errorForeground, #f14c4c);
+}
+
 .ChatDebugViewDetails {
   border: 1px solid var(--vscode-editorWidget-border, #454545);
   border-radius: 6px;
@@ -2995,6 +3002,7 @@ const getCss = state => {
   gap: 8px;
   padding: 0 8px;
   border-bottom: 1px solid var(--vscode-editorWidget-border, #454545);
+  background: color-mix(in srgb, var(--vscode-editorWidget-background, transparent) 72%, var(--vscode-list-hoverBackground, rgba(90, 93, 94, 0.18)) 28%);
   contain: content;
 }
 
@@ -3071,7 +3079,7 @@ const getCss = state => {
   color: var(--vscode-descriptionForeground, var(--vscode-foreground, #cccccc));
   cursor: pointer;
   white-space: nowrap;
-  contain: strict;
+  contain: content;
 }
 
 .ChatDebugViewDetailsTab:hover {
@@ -3080,7 +3088,7 @@ const getCss = state => {
 
 .ChatDebugViewDetailsTabSelected {
   border-bottom-color: var(--vscode-focusBorder, #007fd4);
-  color: var(--vscode-foreground, #cccccc);
+  color: var(--vscode-focusBorder, #007fd4);
 }
 
 .ChatDebugViewDetailsPanel {
@@ -3138,17 +3146,18 @@ const getCss = state => {
 .row {
   display: flex;
   align-items: baseline;
+  gap: 12px;
   min-width: 100%;
   width: max-content;
   white-space: nowrap;
-  contain: content;
+  contain: strict;
+  height: 20px;
 }
 
 .ChatDebugViewEventLineNumber {
   display: flex;
   justify-content: flex-end;
   flex: 0 0 3ch;
-  margin-right: 12px;
   opacity: 0.6;
   user-select: none;
   contain: content;
@@ -3170,9 +3179,6 @@ const getCss = state => {
   display: flex;
   flex-direction: column;
   width: 100%;
-  border: 1px solid var(--vscode-editorWidget-border, #454545);
-  border-radius: 6px;
-  overflow: hidden;
   contain: strict;
   flex: 1;
 }
@@ -3750,12 +3756,6 @@ const getDetailsDom = (selectedEventNodes, selectedEvent = null, selectedDetailT
     className: 'ChatDebugViewDetailsTop',
     type: Div
   }, {
-    'aria-label': 'Detail sections',
-    childCount: detailTabs.length,
-    className: 'ChatDebugViewDetailsTabs',
-    role: 'tablist',
-    type: Div
-  }, ...getTabNodes(selectedDetailTab), {
     'aria-label': 'Close details',
     childCount: 0,
     className: 'ChatDebugViewDetailsClose',
@@ -3765,8 +3765,15 @@ const getDetailsDom = (selectedEventNodes, selectedEvent = null, selectedDetailT
     type: Button,
     value: 'close'
   }, {
+    'aria-label': 'Detail sections',
+    childCount: detailTabs.length,
+    className: 'ChatDebugViewDetailsTabs',
+    role: 'tablist',
+    type: Div
+  }, ...getTabNodes(selectedDetailTab), {
     childCount: 1,
     className: 'ChatDebugViewDetailsBody',
+    role: 'document',
     type: Div
   }, {
     'aria-labelledby': getTabId(selectedDetailTab),
@@ -3840,6 +3847,7 @@ const getStatusText = event => {
 const getDevtoolsRows = (events, selectedEventIndex) => {
   return events.flatMap((event, i) => {
     const isSelected = selectedEventIndex === i;
+    const isErrorStatus = hasErrorStatus(event);
     const rowIndex = String(i);
     return [{
       childCount: 3,
@@ -3858,7 +3866,7 @@ const getDevtoolsRows = (events, selectedEventIndex) => {
       type: Td
     }, text(getDurationText(event)), {
       childCount: 1,
-      className: 'ChatDebugViewCell ChatDebugViewCellStatus',
+      className: `ChatDebugViewCell ChatDebugViewCellStatus${isErrorStatus ? ' ChatDebugViewCellStatusError' : ''}`,
       'data-index': rowIndex,
       type: Td
     }, text(getStatusText(event))];

package/package.json

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