@codingame/monaco-vscode-chat-service-override 28.4.0 → 29.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/chatDebug/chatDebugLogsView.js

@@ -1,29 +1,36 @@
 
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
-import { $ as $$1, append, hide, show, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { $ as $$1, append, hide, show, clearNode, isMouseEvent, getWindow } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { BreadcrumbsWidget } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget';
 import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
+import { ProgressBar } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/progressbar/progressbar';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
 import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
 import { Disposable, MutableDisposable, combinedDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/index';
+import { RunOnceScheduler } from '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
 import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
 import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
 import { ServiceCollection } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/serviceCollection';
 import { WorkbenchList, WorkbenchObjectTree } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
-import { defaultBreadcrumbsWidgetStyles, defaultButtonStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
+import { defaultBreadcrumbsWidgetStyles, defaultButtonStyles, defaultProgressBarStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
 import { FilterWidget } from '@codingame/monaco-vscode-api/vscode/vs/workbench/browser/parts/views/viewFilter';
 import { IChatDebugService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatDebugService.service';
+import { filterDebugEventsByText } from '@codingame/monaco-vscode-xterm-addons-common/vscode/vs/workbench/contrib/chat/common/chatDebugEvents';
 import { IChatService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatService/chatService.service';
 import { LocalChatSessionUri } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/model/chatUri';
-import { ChatDebugEventDelegate, ChatDebugEventRenderer, ChatDebugEventTreeRenderer } from './chatDebugEventList.js';
+import { ChatDebugEventDelegate, ChatDebugEventRenderer, ChatDebugEventTreeRenderer, getEventCreatedText, getEventNameText, getEventDetailsText } from './chatDebugEventList.js';
 import { LogsViewMode, setupBreadcrumbKeyboardNavigation, TextBreadcrumbItem } from './chatDebugTypes.js';
 import { bindFilterContextKeys } from './chatDebugFilters.js';
 import { ChatDebugDetailPanel } from './chatDebugDetailPanel.js';
 import { IChatWidgetService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chat.service';
 import { createDebugEventsAttachment } from '@codingame/monaco-vscode-xterm-addons-common/vscode/vs/workbench/contrib/chat/browser/chatDebug/chatDebugAttachment';
+import { IClipboardService } from '@codingame/monaco-vscode-api/vscode/vs/platform/clipboard/common/clipboardService.service';
+import { IContextMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
+import { Action, Separator } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
+import { StandardMouseEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/mouseEvent';
 import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 
 const $ = $$1;
@@ -40,7 +47,9 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
         chatDebugService,
         instantiationService,
         contextKeyService,
-        chatWidgetService
+        chatWidgetService,
+        clipboardService,
+        contextMenuService
     ) {
         super();
         this.filterState = filterState;
@@ -49,12 +58,15 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
         this.instantiationService = instantiationService;
         this.contextKeyService = contextKeyService;
         this.chatWidgetService = chatWidgetService;
+        this.clipboardService = clipboardService;
+        this.contextMenuService = contextMenuService;
         this._onNavigate = this._register(( new Emitter()));
         this.onNavigate = this._onNavigate.event;
-        this.logsViewMode = LogsViewMode.List;
+        this.logsViewMode = LogsViewMode.Tree;
         this.events = [];
         this.eventListener = this._register(( new MutableDisposable()));
         this.sessionStateDisposable = this._register(( new MutableDisposable()));
+        this.refreshScheduler = this._register(( new RunOnceScheduler(() => this.refreshList(), 50)));
         this.container = append(parent, $(".chat-debug-logs"));
         hide(this.container);
         const breadcrumbContainer = append(this.container, $(".chat-debug-breadcrumb"));
@@ -86,13 +98,13 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
         syncContextKeys();
         const childInstantiationService = this._register(this.instantiationService.createChild(( new ServiceCollection([IContextKeyService, scopedContextKeyService]))));
         this.filterWidget = this._register(childInstantiationService.createInstance(FilterWidget, {
-            placeholder: ( localize(5706, "Filter (e.g. text, !exclude, before:YYYY-MM-DDTHH:MM:SS)")),
-            ariaLabel: ( localize(5707, "Filter debug events"))
+            placeholder: ( localize(5831, "Filter (e.g. text, !exclude, before:YYYY-MM-DDTHH:MM:SS)")),
+            ariaLabel: ( localize(5832, "Filter debug events"))
         }));
         this.viewModeToggle = this._register(( new Button(this.headerContainer, {
             ...defaultButtonStyles,
             secondary: true,
-            title: ( localize(5708, "Toggle between list and tree view"))
+            title: ( localize(5833, "Toggle between list and tree view"))
         })));
         this.viewModeToggle.element.classList.add("chat-debug-view-mode-toggle", "monaco-text-button");
         this.updateViewModeToggle();
@@ -104,7 +116,7 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
         const troubleshootButton = this._register(( new Button(this.headerContainer, {
             ...defaultButtonStyles,
             secondary: true,
-            title: ( localize(5709, "Add snapshot to Chat"))
+            title: ( localize(5834, "Add snapshot to Chat"))
         })));
         troubleshootButton.element.classList.add("chat-debug-troubleshoot-button", "monaco-text-button");
         append(
@@ -135,43 +147,48 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
         this.tableHeader = append(mainColumn, $(".chat-debug-table-header"));
         append(
             this.tableHeader,
-            $("span.chat-debug-col-created", undefined, ( localize(5710, "Created")))
+            $("span.chat-debug-col-created", undefined, ( localize(5835, "Created")))
         );
-        append(this.tableHeader, $("span.chat-debug-col-name", undefined, ( localize(5711, "Name"))));
+        append(this.tableHeader, $("span.chat-debug-col-name", undefined, ( localize(5836, "Name"))));
         append(
             this.tableHeader,
-            $("span.chat-debug-col-details", undefined, ( localize(5712, "Details")))
+            $("span.chat-debug-col-details", undefined, ( localize(5837, "Details")))
         );
+        this.progressBar = this._register(( new ProgressBar(mainColumn, {
+            ...defaultProgressBarStyles,
+            ariaLabel: ( localize(5838, "Chat debug logs loading progress"))
+        })));
         this.bodyContainer = append(mainColumn, $(".chat-debug-logs-body"));
         this.listContainer = append(this.bodyContainer, $(".chat-debug-list-container"));
+        hide(this.listContainer);
         const accessibilityProvider = {
             getAriaLabel: e => {
                 switch (e.kind) {
                 case "toolCall":
-                    return localize(5713, "Tool call: {0}{1}", e.toolName, e.result ? ` (${e.result})` : "");
+                    return localize(5839, "Tool call: {0}{1}", e.toolName, e.result ? ` (${e.result})` : "");
                 case "modelTurn":
                     return localize(
-                        5714,
+                        5840,
                         "Model turn: {0}{1}",
-                        e.model ?? ( localize(5715, "model")),
-                        e.totalTokens ? ( localize(5716, " {0} tokens", e.totalTokens)) : ""
+                        e.model ?? ( localize(5841, "model")),
+                        e.totalTokens ? ( localize(5842, " {0} tokens", e.totalTokens)) : ""
                     );
                 case "generic":
                     return `${e.category ? e.category + ": " : ""}${e.name}: ${e.details ?? ""}`;
                 case "subagentInvocation":
                     return localize(
-                        5717,
+                        5843,
                         "Subagent: {0}{1}",
                         e.agentName,
                         e.description ? ` - ${e.description}` : ""
                     );
                 case "userMessage":
-                    return localize(5718, "User message: {0}", e.message);
+                    return localize(5844, "User message: {0}", e.message);
                 case "agentResponse":
-                    return localize(5719, "Agent response: {0}", e.message);
+                    return localize(5845, "Agent response: {0}", e.message);
                 }
             },
-            getWidgetAriaLabel: () => ( localize(5720, "Chat Debug Events"))
+            getWidgetAriaLabel: () => ( localize(5846, "Chat Debug Events"))
         };
         let nextFallbackId = 0;
         const fallbackIds = ( new WeakMap());
@@ -195,7 +212,6 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
             })
         );
         this.treeContainer = append(this.bodyContainer, $(".chat-debug-list-container"));
-        hide(this.treeContainer);
         this.tree = this._register(this.instantiationService.createInstance(
             WorkbenchObjectTree,
             "ChatDebugEventsTree",
@@ -207,14 +223,14 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
                 accessibilityProvider
             }
         ));
-        this.shimmerRow = append(this.bodyContainer, $(".chat-debug-logs-shimmer-row"));
-        this.shimmerRow.setAttribute("aria-label", ( localize(5721, "Loading more events…")));
-        this.shimmerRow.setAttribute("aria-busy", "true");
-        append(this.shimmerRow, $("span.chat-debug-logs-shimmer-bar"));
-        hide(this.shimmerRow);
         this.detailPanel = this._register(
             this.instantiationService.createInstance(ChatDebugDetailPanel, contentContainer)
         );
+        this._register(this.detailPanel.onDidChangeWidth(() => {
+            if (this.currentDimension) {
+                this.layout(this.currentDimension);
+            }
+        }));
         this._register(this.detailPanel.onDidHide(() => {
             if (this.list.getSelection().length > 0) {
                 this.list.setSelection([]);
@@ -222,6 +238,19 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
             if (this.tree.getSelection().length > 0) {
                 this.tree.setSelection([]);
             }
+            if (this.currentDimension) {
+                this.layout(this.currentDimension);
+            }
+        }));
+        this._register(this.list.onContextMenu(e => {
+            if (e.element) {
+                this.showEventContextMenu(e.element, e.browserEvent);
+            }
+        }));
+        this._register(this.tree.onContextMenu(e => {
+            if (e.element) {
+                this.showEventContextMenu(e.element, e.browserEvent);
+            }
         }));
         this._register(this.list.onDidChangeSelection(e => {
             const selected = e.elements[0];
@@ -266,15 +295,15 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
             return;
         }
         const sessionTitle = this.chatService.getSessionTitle(this.currentSessionResource) || LocalChatSessionUri.parseLocalSessionId(this.currentSessionResource) || ( this.currentSessionResource.toString());
-        this.breadcrumbWidget.setItems([( new TextBreadcrumbItem(( localize(5722, "Agent Debug Panel")), true)), ( new TextBreadcrumbItem(sessionTitle, true)), ( new TextBreadcrumbItem(( localize(5723, "Logs"))))]);
+        this.breadcrumbWidget.setItems([( new TextBreadcrumbItem(( localize(5847, "Agent Debug Logs")), true)), ( new TextBreadcrumbItem(sessionTitle, true)), ( new TextBreadcrumbItem(( localize(5848, "Logs"))))]);
     }
     layout(dimension) {
         this.currentDimension = dimension;
         const breadcrumbHeight = 22;
         const headerHeight = this.headerContainer.offsetHeight;
         const tableHeaderHeight = this.tableHeader.offsetHeight;
-        const detailVisible = this.detailPanel.element.style.display !== "none";
-        const detailWidth = detailVisible ? this.detailPanel.element.offsetWidth : 0;
+        const detailVisible = this.detailPanel.isVisible;
+        const detailWidth = detailVisible ? this.detailPanel.width : 0;
         const listHeight = dimension.height - breadcrumbHeight - headerHeight - tableHeaderHeight;
         const listWidth = dimension.width - detailWidth;
         if (this.logsViewMode === LogsViewMode.Tree) {
@@ -282,6 +311,10 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
         } else {
             this.list.layout(listHeight, listWidth);
         }
+        if (this.detailPanel.isVisible) {
+            this.detailPanel.layout(listHeight);
+        }
+        this.detailPanel.layoutSash();
     }
     refreshList() {
         let filtered = this.events;
@@ -289,58 +322,39 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
             const category = e.kind === "generic" ? e.category : undefined;
             return this.filterState.isKindVisible(e.kind, category);
         });
-        filtered = filtered.filter(e => this.filterState.isTimestampVisible(e.created));
-        const filterText = this.filterState.textFilterWithoutTimestamps;
+        const filterText = this.filterState.textFilter;
         if (filterText) {
-            const terms = filterText.split(/\s*,\s*/).filter(t => t.length > 0);
-            const includeTerms = ( terms.filter(t => !t.startsWith("!")).map(t => t.trim()));
-            const excludeTerms = ( terms.filter(t => t.startsWith("!")).map(t => t.slice(1).trim())).filter(t => t.length > 0);
-            filtered = filtered.filter(e => {
-                const matchesText = term => {
-                    if (e.kind.toLowerCase().includes(term)) {
-                        return true;
-                    }
-                    switch (e.kind) {
-                    case "toolCall":
-                        return e.toolName.toLowerCase().includes(term) || (e.input?.toLowerCase().includes(term) ?? false) || (e.output?.toLowerCase().includes(term) ?? false);
-                    case "modelTurn":
-                        return (e.model?.toLowerCase().includes(term) ?? false);
-                    case "generic":
-                        return e.name.toLowerCase().includes(term) || (e.details?.toLowerCase().includes(term) ?? false) || (e.category?.toLowerCase().includes(term) ?? false);
-                    case "subagentInvocation":
-                        return e.agentName.toLowerCase().includes(term) || (e.description?.toLowerCase().includes(term) ?? false);
-                    case "userMessage":
-                        return e.message.toLowerCase().includes(term) || ( e.sections.some(
-                            s => s.name.toLowerCase().includes(term) || s.content.toLowerCase().includes(term)
-                        ));
-                    case "agentResponse":
-                        return e.message.toLowerCase().includes(term) || ( e.sections.some(
-                            s => s.name.toLowerCase().includes(term) || s.content.toLowerCase().includes(term)
-                        ));
-                    }
-                };
-                if (( excludeTerms.some(term => matchesText(term)))) {
-                    return false;
-                }
-                if (includeTerms.length > 0) {
-                    return ( includeTerms.some(term => matchesText(term)));
-                }
-                return true;
-            });
+            filtered = filterDebugEventsByText(filtered, filterText);
         }
         if (this.logsViewMode === LogsViewMode.List) {
             this.list.splice(0, this.list.length, filtered);
         } else {
             this.refreshTree(filtered);
         }
-        this.updateShimmerPosition(filtered.length);
-    }
-    updateShimmerPosition(itemCount) {
-        this.shimmerRow.style.top = `${itemCount * 28}px`;
     }
     addEvent(event) {
-        this.events.push(event);
-        this.refreshList();
+        const time = event.created.getTime();
+        let lo = 0;
+        let hi = this.events.length;
+        while (lo < hi) {
+            const mid = (lo + hi) >>> 1;
+            if (this.events[mid].created.getTime() <= time) {
+                lo = mid + 1;
+            } else {
+                hi = mid;
+            }
+        }
+        if (lo === this.events.length) {
+            this.events.push(event);
+        } else {
+            this.events.splice(lo, 0, event);
+        }
+        this.scheduleRefresh();
+    }
+    scheduleRefresh() {
+        if (!this.refreshScheduler.isScheduled()) {
+            this.refreshScheduler.schedule();
+        }
     }
     loadEvents() {
         this.events = [
@@ -348,8 +362,7 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
         ];
         const addEventDisposable = this.chatDebugService.onDidAddEvent(e => {
             if (!this.currentSessionResource || ( e.sessionResource.toString()) === ( this.currentSessionResource.toString())) {
-                this.events.push(e);
-                this.refreshList();
+                this.addEvent(e);
             }
         });
         const clearEventsDisposable = this.chatDebugService.onDidClearProviderEvents(sessionResource => {
@@ -366,22 +379,22 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
     }
     trackSessionState() {
         if (!this.currentSessionResource) {
-            hide(this.shimmerRow);
+            this.progressBar.stop();
             this.sessionStateDisposable.clear();
             return;
         }
         const model = this.chatService.getSession(this.currentSessionResource);
         if (!model) {
-            hide(this.shimmerRow);
+            this.progressBar.stop();
             this.sessionStateDisposable.clear();
             return;
         }
         this.sessionStateDisposable.value = autorun(reader => {
             const inProgress = model.requestInProgress.read(reader);
             if (inProgress) {
-                show(this.shimmerRow);
+                this.progressBar.infinite();
             } else {
-                hide(this.shimmerRow);
+                this.progressBar.stop();
             }
         });
     }
@@ -446,22 +459,40 @@ let ChatDebugLogsView = class ChatDebugLogsView extends Disposable {
         ));
         const labelContainer = append(el, $("span.chat-debug-view-mode-labels"));
         const treeLabel = append(labelContainer, $("span.chat-debug-view-mode-label"));
-        treeLabel.textContent = ( localize(5724, "Tree View"));
+        treeLabel.textContent = ( localize(5849, "Tree View"));
         const listLabel = append(labelContainer, $("span.chat-debug-view-mode-label"));
-        listLabel.textContent = ( localize(5725, "List View"));
+        listLabel.textContent = ( localize(5850, "List View"));
         if (isTree) {
             listLabel.classList.add("hidden");
         } else {
             treeLabel.classList.add("hidden");
         }
-        const activeLabel = isTree ? ( localize(5726, "Switch to List View")) : ( localize(5727, "Switch to Tree View"));
+        const activeLabel = isTree ? ( localize(5851, "Switch to List View")) : ( localize(5852, "Switch to Tree View"));
         el.setAttribute("aria-label", activeLabel);
         this.viewModeToggle.setTitle(activeLabel);
     }
     updateMoreFiltersChecked() {
         this.filterWidget.checkMoreFilters(!this.filterState.isAllFiltersDefault());
     }
+    showEventContextMenu(event, browserEvent) {
+        const d = event.created;
+        const pad = n => String(n).padStart(2, "0");
+        const timestamp = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+        const row = [
+            getEventCreatedText(event),
+            getEventNameText(event),
+            getEventDetailsText(event)
+        ].filter(Boolean).join("\t");
+        const name = getEventNameText(event);
+        this.contextMenuService.showContextMenu({
+            getAnchor: () => isMouseEvent(browserEvent) ? ( new StandardMouseEvent(getWindow(this.container), browserEvent)) : this.container,
+            getActions: () => [( new Action("chatDebug.copyTimestamp", ( localize(5853, "Copy Timestamp")), undefined, true, () => this.clipboardService.writeText(timestamp))), ( new Action("chatDebug.copyRow", ( localize(5854, "Copy Row")), undefined, true, () => this.clipboardService.writeText(row))), ( new Separator()), ( new Action("chatDebug.filterBefore", ( localize(5855, "Filter Before Timestamp")), undefined, true, () => this.applyFilterToken(`before:${timestamp}`))), ( new Action("chatDebug.filterAfter", ( localize(5856, "Filter After Timestamp")), undefined, true, () => this.applyFilterToken(`after:${timestamp}`))), ( new Action("chatDebug.filterName", ( localize(5857, "Filter Name")), undefined, !!name, () => this.applyFilterToken(name)))]
+        });
+    }
+    applyFilterToken(token) {
+        this.filterWidget.setFilterText(token);
+    }
 };
-ChatDebugLogsView = ( __decorate([( __param(2, IChatService)), ( __param(3, IChatDebugService)), ( __param(4, IInstantiationService)), ( __param(5, IContextKeyService)), ( __param(6, IChatWidgetService))], ChatDebugLogsView));
+ChatDebugLogsView = ( __decorate([( __param(2, IChatService)), ( __param(3, IChatDebugService)), ( __param(4, IInstantiationService)), ( __param(5, IContextKeyService)), ( __param(6, IChatWidgetService)), ( __param(7, IClipboardService)), ( __param(8, IContextMenuService))], ChatDebugLogsView));
 
 export { ChatDebugLogsView, LogsNavigation };

package/vscode/src/vs/workbench/contrib/chat/browser/chatDebug/chatDebugMessageContentRenderer.d.ts

@@ -1,30 +1,41 @@
 import { DisposableStore } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
-import { IChatDebugUserMessageEvent, IChatDebugAgentResponseEvent, IChatDebugEventMessageContent } from "../../common/chatDebugService.js";
+import { IClipboardService } from "@codingame/monaco-vscode-api/vscode/vs/platform/clipboard/common/clipboardService.service";
+import { ILanguageService } from "@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/language.service";
+import { IChatDebugUserMessageEvent, IChatDebugAgentResponseEvent, IChatDebugEventMessageContent } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatDebugService";
 /**
  * Render a user message event with collapsible prompt sections.
+ * JSON content in sections is syntax-highlighted.
  */
-export declare function renderUserMessageContent(event: IChatDebugUserMessageEvent): {
+export declare function renderUserMessageContent(event: IChatDebugUserMessageEvent, languageService: ILanguageService, clipboardService?: IClipboardService, scrollable?: {
+    scanDomNode(): void;
+}): Promise<{
     element: HTMLElement;
     disposables: DisposableStore;
-};
+}>;
 /**
  * Render an agent response event with collapsible response sections.
+ * JSON content in sections is syntax-highlighted.
  */
-export declare function renderAgentResponseContent(event: IChatDebugAgentResponseEvent): {
+export declare function renderAgentResponseContent(event: IChatDebugAgentResponseEvent, languageService: ILanguageService, clipboardService?: IClipboardService, scrollable?: {
+    scanDomNode(): void;
+}): Promise<{
     element: HTMLElement;
     disposables: DisposableStore;
-};
+}>;
 /**
  * Convert a user message or agent response event to plain text for clipboard / editor output.
  */
 export declare function messageEventToPlainText(event: IChatDebugUserMessageEvent | IChatDebugAgentResponseEvent): string;
 /**
  * Render a resolved message content (from resolveChatDebugLogEvent) with collapsible sections.
+ * JSON content in sections is syntax-highlighted.
  */
-export declare function renderResolvedMessageContent(content: IChatDebugEventMessageContent): {
+export declare function renderResolvedMessageContent(content: IChatDebugEventMessageContent, languageService: ILanguageService, clipboardService?: IClipboardService, scrollable?: {
+    scanDomNode(): void;
+}): Promise<{
     element: HTMLElement;
     disposables: DisposableStore;
-};
+}>;
 /**
  * Convert a resolved message content to plain text.
  */

package/vscode/src/vs/workbench/contrib/chat/browser/chatDebug/chatDebugMessageContentRenderer.js

@@ -2,16 +2,16 @@
 import { $ as $$1, append } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
-import { renderCollapsibleSection } from './chatDebugCollapsible.js';
+import { tokenizeContent, renderSection } from './chatDebugToolCallContentRenderer.js';
 
 const $ = $$1;
-function renderUserMessageContent(event) {
+async function renderUserMessageContent(event, languageService, clipboardService, scrollable) {
     const disposables = ( new DisposableStore());
     const container = $("div.chat-debug-message-content");
     container.tabIndex = 0;
     append(
         container,
-        $("div.chat-debug-message-content-title", undefined, ( localize(5728, "User Message")))
+        $("div.chat-debug-message-content-title", undefined, ( localize(5858, "User Message")))
     );
     append(
         container,
@@ -21,10 +21,23 @@ function renderUserMessageContent(event) {
         const sectionsContainer = append(container, $("div.chat-debug-message-sections"));
         append(
             sectionsContainer,
-            $("div.chat-debug-message-sections-label", undefined, ( localize(5729, "Prompt Sections ({0})", event.sections.length)))
+            $("div.chat-debug-message-sections-label", undefined, ( localize(5859, "Prompt Sections ({0})", event.sections.length)))
         );
         for (const section of event.sections) {
-            renderCollapsibleSection(sectionsContainer, section, disposables);
+            const {
+                plainText,
+                tokenizedHtml
+            } = await tokenizeContent(section.content, languageService);
+            renderSection(
+                sectionsContainer,
+                section.name,
+                plainText,
+                tokenizedHtml,
+                disposables,
+                false,
+                clipboardService,
+                scrollable
+            );
         }
     }
     return {
@@ -32,13 +45,13 @@ function renderUserMessageContent(event) {
         disposables
     };
 }
-function renderAgentResponseContent(event) {
+async function renderAgentResponseContent(event, languageService, clipboardService, scrollable) {
     const disposables = ( new DisposableStore());
     const container = $("div.chat-debug-message-content");
     container.tabIndex = 0;
     append(
         container,
-        $("div.chat-debug-message-content-title", undefined, ( localize(5730, "Agent Response")))
+        $("div.chat-debug-message-content-title", undefined, ( localize(5860, "Agent Response")))
     );
     append(
         container,
@@ -48,10 +61,23 @@ function renderAgentResponseContent(event) {
         const sectionsContainer = append(container, $("div.chat-debug-message-sections"));
         append(
             sectionsContainer,
-            $("div.chat-debug-message-sections-label", undefined, ( localize(5731, "Response Sections ({0})", event.sections.length)))
+            $("div.chat-debug-message-sections-label", undefined, ( localize(5861, "Response Sections ({0})", event.sections.length)))
         );
         for (const section of event.sections) {
-            renderCollapsibleSection(sectionsContainer, section, disposables);
+            const {
+                plainText,
+                tokenizedHtml
+            } = await tokenizeContent(section.content, languageService);
+            renderSection(
+                sectionsContainer,
+                section.name,
+                plainText,
+                tokenizedHtml,
+                disposables,
+                false,
+                clipboardService,
+                scrollable
+            );
         }
     }
     return {
@@ -61,7 +87,7 @@ function renderAgentResponseContent(event) {
 }
 function messageEventToPlainText(event) {
     const lines = [];
-    const label = event.kind === "userMessage" ? ( localize(5728, "User Message")) : ( localize(5730, "Agent Response"));
+    const label = event.kind === "userMessage" ? ( localize(5858, "User Message")) : ( localize(5860, "Agent Response"));
     lines.push(`${label}: ${event.message}`);
     lines.push("");
     for (const section of event.sections) {
@@ -71,11 +97,11 @@ function messageEventToPlainText(event) {
     }
     return lines.join("\n");
 }
-function renderResolvedMessageContent(content) {
+async function renderResolvedMessageContent(content, languageService, clipboardService, scrollable) {
     const disposables = ( new DisposableStore());
     const container = $("div.chat-debug-message-content");
     container.tabIndex = 0;
-    const title = content.type === "user" ? ( localize(5728, "User Message")) : ( localize(5730, "Agent Response"));
+    const title = content.type === "user" ? ( localize(5858, "User Message")) : ( localize(5860, "Agent Response"));
     append(container, $("div.chat-debug-message-content-title", undefined, title));
     append(
         container,
@@ -83,13 +109,26 @@ function renderResolvedMessageContent(content) {
     );
     if (content.sections.length > 0) {
         const sectionsContainer = append(container, $("div.chat-debug-message-sections"));
-        const label = content.type === "user" ? ( localize(5729, "Prompt Sections ({0})", content.sections.length)) : ( localize(5731, "Response Sections ({0})", content.sections.length));
+        const label = content.type === "user" ? ( localize(5859, "Prompt Sections ({0})", content.sections.length)) : ( localize(5861, "Response Sections ({0})", content.sections.length));
         append(
             sectionsContainer,
             $("div.chat-debug-message-sections-label", undefined, label)
         );
         for (const section of content.sections) {
-            renderCollapsibleSection(sectionsContainer, section, disposables);
+            const {
+                plainText,
+                tokenizedHtml
+            } = await tokenizeContent(section.content, languageService);
+            renderSection(
+                sectionsContainer,
+                section.name,
+                plainText,
+                tokenizedHtml,
+                disposables,
+                false,
+                clipboardService,
+                scrollable
+            );
         }
     }
     return {
@@ -99,7 +138,7 @@ function renderResolvedMessageContent(content) {
 }
 function resolvedMessageToPlainText(content) {
     const lines = [];
-    const label = content.type === "user" ? ( localize(5728, "User Message")) : ( localize(5730, "Agent Response"));
+    const label = content.type === "user" ? ( localize(5858, "User Message")) : ( localize(5860, "Agent Response"));
     lines.push(`${label}: ${content.message}`);
     lines.push("");
     for (const section of content.sections) {

package/vscode/src/vs/workbench/contrib/chat/browser/chatDebug/chatDebugModelTurnContentRenderer.d.ts

@@ -1,13 +1,18 @@
 import { DisposableStore } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
-import { IChatDebugEventModelTurnContent } from "../../common/chatDebugService.js";
+import { IClipboardService } from "@codingame/monaco-vscode-api/vscode/vs/platform/clipboard/common/clipboardService.service";
+import { ILanguageService } from "@codingame/monaco-vscode-api/vscode/vs/editor/common/languages/language.service";
+import { IChatDebugEventModelTurnContent } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/chatDebugService";
 /**
  * Render a resolved model turn content with structured display of
  * request metadata, token usage, and timing.
+ * When JSON is detected in section content, renders it with syntax highlighting.
  */
-export declare function renderModelTurnContent(content: IChatDebugEventModelTurnContent): {
+export declare function renderModelTurnContent(content: IChatDebugEventModelTurnContent, languageService: ILanguageService, clipboardService?: IClipboardService, scrollable?: {
+    scanDomNode(): void;
+}): Promise<{
     element: HTMLElement;
     disposables: DisposableStore;
-};
+}>;
 /**
  * Convert a resolved model turn content to plain text for clipboard / editor output.
  */